CSS 语法

学习目标

理解 CSS 规则的基本结构：选择器、声明块、属性与值
掌握常用 CSS 选择器的类型与使用场景
学会正确书写声明块，包括属性与值的格式规范
了解选择器分组与嵌套的写法
初步认识伪类与伪元素的作用与语法

正文内容

CSS 基本结构

一条完整的 CSS 规则由 选择器（Selector） 和 声明块（Declaration Block） 组成：

h1 {
    color: blue;
    font-size: 24px;
}

选择器（Selector）：指定要样式化的 HTML 元素（如 h1 表示所有一级标题）。
声明块（Declaration Block）：用花括号 {} 包裹，包含一个或多个 声明（Declarations）。
声明（Declaration）：由 属性（Property） 和 值（Value） 组成，中间用冒号 : 分隔，末尾以分号 ; 结束。

示例中，color: blue; 表示将文字颜色设为蓝色，font-size: 24px; 表示字体大小为 24 像素。

完整 HTML 示例：

<!DOCTYPE html>
<html>
<head>
    <style>
        h1 {
            color: blue;
            font-size: 24px;
        }
        p {
            color: green;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>这是一个简单的段落。</p>
</body>
</html>

在此例中：

所有 <h1> 元素文字为蓝色，字号 24px；
所有 <p> 元素文字为绿色，字号 16px。

CSS 选择器类型

选择器用于“选中”需要应用样式的 HTML 元素。CSS 提供多种选择器：

1. 通用选择器

使用星号 *，匹配页面中所有元素。

* {
    margin: 0;
    padding: 0;
}

常用于重置默认浏览器样式（CSS Reset）。

2. 类型选择器

直接使用 HTML 标签名，如 h1、p、div 等。

h1 {
    font-family: Arial, sans-serif;
}

作用于所有该类型的元素。

3. 类选择器

以点号 . 开头，匹配具有特定 class 属性的元素。

.box {
    border: 1px solid black;
    padding: 10px;
}

对应 HTML：

<div class="box">这是一个带边框的盒子</div>

一个类可在多个元素上复用。

4. ID 选择器

以井号 # 开头，匹配具有特定 id 的唯一元素。

#header {
    background-color: lightgray;
}

对应 HTML：

<header id="header">网站头部</header>

每个 id 在页面中应唯一，不可重复。

声明块

每个声明由属性和值构成，格式为：

property: value;

常见属性

属性	说明
`color`	设置文本颜色
`background-color`	设置背景颜色
`font-size`	设置字体大小
`margin`	设置元素外边距
`padding`	设置元素内边距

值的类型

关键字：如 blue、bold、block
长度单位：如 16px、2em、50%
数字 / 百分比：如 0.8、100%

注意：每条声明必须以分号 ; 结尾，即使只有一条声明也建议保留，以保持一致性。

选择器分组与嵌套

1. 分组选择器

多个选择器共享同一套样式时，可用逗号 , 分隔：

h1, h2, h3 {
    color: darkblue;
}

上述规则表示：所有一级、二级、三级标题文字均为深蓝色。

2. 嵌套选择器

通过空格表示层级关系，选中某元素内部的特定后代：

ul li {
    list-style-type: square;
}

表示：在 <ul> 内部的所有 <li> 元素使用方形列表符号。

伪类与伪元素

伪类

用于定义元素的特定状态，如悬停、点击、焦点等。

a:hover {
    color: green;
}

当用户将鼠标悬停在链接上时，文字变为绿色。

常见伪类：

:hover — 鼠标悬停
:focus — 元素获得焦点（如输入框）
:active — 元素被激活（如点击时）
:first-child — 第一个子元素

伪元素

用于选中元素的特定部分，如首行、首字母等。

p::first-line {
    font-weight: bold;
}

段落的第一行文字加粗显示。

常见伪元素：

::first-line — 首行
::first-letter — 首字母
::before / ::after — 在元素前后插入内容

注意：伪元素使用双冒号 ::（现代标准），但单冒号 : 在旧代码中仍被支持。

重点总结

一条 CSS 规则 = 选择器 + {声明块}
声明格式：属性: 值;，多条声明用分号分隔
选择器类型从通用到精确：* → 标签 → .class → #id
分组（,）提升复用性，嵌套（空格）实现层级控制
伪类处理“状态”，伪元素处理“结构片段”
遵循语义化和可维护性原则，避免过度依赖内联样式

思考题

为什么 #header 和 .header 在使用上有本质区别？在什么场景下应优先使用类而非 ID？
如果希望所有段落的首行都缩进两个字符且加粗，应如何结合使用伪元素和属性？
请解释以下 CSS 选择器的含义：nav ul li a:hover，并画出其对应的 HTML 结构示意。