CSS 语法

CSS 语法虽然简单，却是一切样式的地基。每条规则都由两部分构成：选择器（告诉浏览器"给谁设置样式"）和声明块（告诉浏览器"设置成什么样"）。理解了规则结构，才能正确地写出、读懂各种样式代码。

语法结构

selector {
    property: value;   /* 属性: 值; */
    property: value;
}

其中 selector 是选择器，花括号内的每条 property: value 叫一条声明，多条声明用分号分隔，最后一条的分号可写可不写，但建议都写上。

p {
    color: red;
    text-align: center;
}

<p>这段文字会被设置为红色并居中。</p>

效果说明：这里选择器 p 选中所有段落，color 改颜色，text-align 控制对齐方式。

选择器的常见写法

选择器决定了规则作用于哪些元素，常见的有三种：

• 标签选择器：直接用标签名，如 h1、p。
• class 选择器：用 .类名 选中带该类名的元素，如 .box。
• id 选择器：用 #id值 选中唯一元素，如 #nav。

.box { width: 200px; }   /* 作用于所有 class="box" 的元素 */
#nav { height: 50px; }   /* 作用于 id="nav" 的元素 */

效果说明：一个页面中 id 只能出现一次，而 class 可以反复使用，具体区别后面单独成篇讲解。

属性与值

属性决定"改什么方面"，值是"改成什么样"。不同属性有自己合法的取值范围：

p {
    color: blue;            /* 颜色：关键字 */
    font-size: 16px;        /* 长度：像素 */
    width: 50%;             /* 百分比：相对父元素 */
    line-height: 1.5;       /* 数字：倍率 */
}

效果说明：值可以是颜色关键字、像素、百分比等，写错值类型时该条声明会被浏览器忽略。

注释

CSS 注释以 /* 开始、*/ 结束，浏览器会忽略注释内容，常用于说明样式用途或临时停用某条规则：

/* 这是一条注释，说明下面的规则 */
h1 {
    color: green;   /* 行尾注释同样合法 */
}

效果说明：注释可以多行书写，也可以写在声明中间，不会影响页面效果。

易错点

• 属性和值之间用英文冒号分隔，写成中文冒号"："会失效。
• 每条声明结尾记得写英文分号，漏写会导致后面声明被拼坏。
• 属性名建议统一小写；大部分属性和关键字不区分大小写，但习惯上写小写。
• 多个选择器共用一套声明时用逗号分隔：h1, h2 { ... }，逗号不能写成空格，否则含义完全不同。

小结

CSS 的语法核心是"选择器 + 声明块"：选择器锁定元素，花括号内的"属性: 值"描述外观。牢记英文冒号、分号和正确的选择器写法，就掌握了阅读与书写 CSS 的基本功。