网站
引入
CSS 用来控制网页的显示效果。HTML 负责内容结构，CSS 负责让这些内容变得更清晰、更美观、更适合不同设备显示。
要使用 CSS，首先要掌握它的基础语法，也就是如何编写一条 CSS 规则。
正文
定义
定义
CSS 规则通常由选择器和声明块组成，选择器负责找到元素，声明块负责设置样式。
CSS 的核心就是：选中网页中的元素，然后给它们添加样式。
语法
最常见的 CSS 规则写法：
选择器 {
属性: 属性值;
}例如：
h1 {
color: red;
font-size: 24px;
}这条规则的含义是：找到页面中所有的 <h1> 标题，把它们的文字颜色改成红色，字体大小改成 24 像素。
组成部分
选择器
选择器用于选中页面中的元素。
常见选择器：
h1：元素选择器，选中所有<h1>标题.box：类选择器，选中所有带有class="box"的元素#app：ID 选择器，选中id="app"的元素
/* 选中所有段落 */
p {
color: blue;
}
/* 选中所有 class 为 text 的元素 */
.text {
font-size: 16px;
}
/* 选中 id 为 header 的元素 */
#header {
background-color: #f0f0f0;
}声明块
声明块写在 {} 中，包含一条或多条声明。
h1 {
color: red; /* 第一条声明 */
font-size: 24px; /* 第二条声明 */
font-weight: bold; /* 第三条声明 */
}属性和属性值
每条声明由属性和属性值组成。
- 属性：表示要修改的样式类型，例如
color、font-size、background-color - 属性值：表示具体设置成什么，例如
red、24px、#ffffff
p {
color: blue; /* 属性: color，属性值: blue */
background-color: #f5f5f5; /* 属性: background-color，属性值: #f5f5f5 */
}属性和属性值之间用冒号 : 分隔，每条声明结尾建议写分号 ;。
例子
设置标题样式
<h1>这是标题</h1>h1 {
color: #2563eb;
font-size: 32px;
font-weight: 600;
}这条规则会让所有 <h1> 标题显示为蓝色、32 像素大小、字重为 600。
设置段落样式
<p class="intro">这是一段介绍文字</p>.intro {
color: #333;
font-size: 18px;
line-height: 1.6;
}这条规则会让带有 class="intro" 的段落显示为深灰色、18 像素大小、行高为 1.6 倍。
选中多个元素
可以用逗号同时选中多个元素，给它们应用相同的样式：
h1, h2, h3 {
color: #1f2937;
font-weight: bold;
}这条规则会让所有 <h1>、<h2>、<h3> 标题都显示为深灰色、粗体。
常见属性
| 属性 | 作用 |
|---|---|
color | 设置文字颜色 |
background-color | 设置背景颜色 |
font-size | 设置文字大小 |
font-weight | 设置文字粗细 |
width | 设置元素宽度 |
height | 设置元素高度 |
margin | 设置外边距 |
padding | 设置内边距 |
border | 设置边框 |
特点
- CSS 规则通常由选择器和声明块组成
- 声明块写在
{}中 - 每条声明由属性和属性值组成
- 属性和值之间使用冒号
: - 每条声明结尾建议写分号
; - CSS 会受到层叠、继承、优先级影响
- 选择器可以同时选中多个元素，用逗号
,分隔 - CSS 代码不区分大小写，但通常使用小写
- 空格和换行对 CSS 规则没有影响，但建议保持良好格式
注意事项
- 属性名不要拼错，拼错的属性不会生效
- 属性值不要漏掉单位，例如
font-size: 16是无效的，应该写成font-size: 16px - 每条声明结尾建议写分号，最后一条可以省略，但为了避免出错最好都写上
- 选择器和
{之间通常保留一个空格 - 属性和属性值之间的冒号后面通常保留一个空格
- 每条声明独占一行，提高可读性
- 注释使用
/* 注释内容 */，不能使用//
理解
可以把 CSS 理解为给 HTML 内容”化妆”和”排版”。
选择器负责找到要修改的内容，属性负责说明要改什么，属性值负责说明改成什么样。
它的作用不是改变 HTML 内容本身，而是改变内容在页面中的显示效果。
例如，h1 { color: red; } 不会改变标题的文字，只是让标题显示成红色。
CSS 的基础语法很简单：找到元素 → 告诉浏览器要修改什么样式 → 告诉浏览器修改成什么样。掌握这个基本结构后，就可以开始学习更多选择器和属性。
理解
理解了基础语法之后，就可以继续学习 CSS 选择器，用更精确的方式选中页面元素。
也可以学习 CSS 内联 内部 外部 CSS，了解 CSS 的不同引入方式。
后续可以结合 HTML 结构和 JavaScript 行为，完成更完整的网页效果。