当前位置：首页 > 前端技术 > CSS >内容正文

CSS

CSS 基本样式

发布时间：2025/10/17 CSS 114 豆豆

生活随笔收集整理的这篇文章主要介绍了 CSS 基本样式小编觉得挺不错的,现在分享给大家,帮大家做个参考.

4.1 CSS 基本概念

CSS：Cascade Style Sheet 层叠样式表。

样式表： 样式的集合，定义HTML元素显示的方式。

4.2 CSS 的使用

使用 CSS 的三种方式：

外部样式表：需要配合外部的 CSS 样式文件使用

index.html 页面

<!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="UTF-8"><title>CSS 样式</title><link rel="stylesheet" type="text/css" href="style.css"/> </head> <body> <div id="div1"></div> </body> </html>

style.css 页面

/* style.css */ #div1{width: 200px;height: 200px;background: #ef5576; }

内部样式表

index.html

<head>......<style type="text/css">#div1 {width: 400px;height: 400px;background: blue;}</style> </head>

内联样式表

index.html

优先级： 内联 CSS > 内部 CSS > 外部 CSS

结论：

如果一个样式在多个网页中使用，只能使用外部 CSS 样式表。

如果一个样式只是在一个页面中使用，可以考虑放到内部样式表。

除非有特殊情况，否则一般不建议使用内联样式。

4.3 CSS 的格式

格式：

选择器 {属性1: 值;属性2: 值;...... }

注释的格式：

/* 这是注释的内容 */

注意：

如果值是字符串，可以使用双引号也可以使用单引号。

如果要声明多个属性，必须通过分号进行隔开。

CSS 中不区分大小写，但是建议使用小写。

4.4 CSS 选择器

描述如何选择HTML氧元素

4.4.1 元素选择器

选择 HTML 文档中的元素

p {background: yellow; }

一旦选择使用，页面中的所有 p 元素都会被选中并变成黄色背景。

4.4.2 类选择器

选择文档中元素指定的类，类是通过 class 属性去指定的；多个元素可以使用同一个类。

html 文件

css 文件

.c1 {background: green; }

效果图

4.4.3 id 选择器

选择HTML文档中元素指定的ID

ID是通过id属性去设置的，每一个元素指定的id不能重复。

html 文件

css 文件

.c1 {background: green; }#p4 {background: #f5ff00; }

效果图

转载于:https://www.cnblogs.com/xsh168/p/11385082.html

总结

以上是生活随笔为你收集整理的CSS 基本样式的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。

样式
css