编辑“︁CSS语法”︁（章节）

= CSS语法 =

CSS（层叠样式表）是一种用于描述HTML或XML文档样式的语言。CSS语法由一系列规则组成，这些规则定义了如何将样式应用到文档中的元素上。理解CSS语法是掌握网页设计的基础，无论是初学者还是有经验的开发者都需要熟悉其结构和用法。

== 基本语法结构 ==

CSS规则由两个主要部分组成：'''选择器'''和'''声明块'''。声明块包含一个或多个'''声明'''，每个声明由'''属性'''和'''值'''组成，用冒号分隔，并以分号结束。

基本语法格式如下：
<syntaxhighlight lang="css">
selector {
    property: value;
    property: value;
}
</syntaxhighlight>

=== 示例解析 ===
<syntaxhighlight lang="css">
h1 {
    color: blue;
    font-size: 24px;
}
</syntaxhighlight>

* '''选择器'''：`h1` - 表示这条规则将应用于所有`<h1>`元素。
* '''声明块'''：`{ ... }` - 包含一个或多个声明。
* '''声明'''：`color: blue;` - 定义文本颜色为蓝色。
* '''属性'''：`color` - 要修改的样式属性。
* '''值'''：`blue` - 属性的具体值。

== 选择器类型 ==

CSS提供了多种选择器类型，用于精确地选择文档中的元素：

=== 1. 元素选择器 ===
选择所有指定HTML标签的元素。
<syntaxhighlight lang="css">
p {
    margin: 10px;
}
</syntaxhighlight>

=== 2. 类选择器 ===
选择具有特定class属性的元素，以点号开头。
<syntaxhighlight lang="css">
.highlight {
    background-color: yellow;
}
</syntaxhighlight>

=== 3. ID选择器 ===
选择具有特定id属性的元素，以井号开头。
<syntaxhighlight lang="css">
#header {
    height: 100px;
}
</syntaxhighlight>

=== 4. 属性选择器 ===
选择具有特定属性的元素。
<syntaxhighlight lang="css">
a[target="_blank"] {
    color: red;
}
</syntaxhighlight>

=== 5. 伪类选择器 ===
选择元素的特定状态。
<syntaxhighlight lang="css">
a:hover {
    text-decoration: underline;
}
</syntaxhighlight>

== 声明与值 ==

CSS声明由属性和值组成，支持多种类型的值：

=== 1. 长度单位 ===
* 绝对单位：`px`（像素）、`pt`（点）
* 相对单位：`em`、`rem`、`%`（百分比）

=== 2. 颜色值 ===
* 关键字：`red`、`blue`
* 十六进制：`#FF0000`
* RGB/RGBA：`rgb(255, 0, 0)`、`rgba(255, 0, 0, 0.5)`
* HSL/HSLA：`hsl(0, 100%, 50%)`

=== 3. 其他值类型 ===
* 字符串：`content: "Hello"`
* 数字：`z-index: 10`
* 函数：`transform: rotate(45deg)`

== 注释 ==

CSS中使用`/* */`来添加注释：
<syntaxhighlight lang="css">
/* 这是一个CSS注释 */
body {
    font-family: Arial; /* 设置字体 */
}
</syntaxhighlight>

== 分组选择器 ==

可以对多个选择器应用相同的样式，用逗号分隔：
<syntaxhighlight lang="css">
h1, h2, h3 {
    font-family: sans-serif;
}
</syntaxhighlight>

== 层叠与优先级 ==

当多个规则应用于同一元素时，CSS遵循以下优先级规则：
1. !important声明
2. 内联样式
3. ID选择器
4. 类选择器、属性选择器、伪类
5. 元素选择器、伪元素
6. 继承的样式

== 实际案例 ==

=== 按钮样式 ===
<syntaxhighlight lang="css">
.button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.button:hover {
    background-color: #45a049;
}
</syntaxhighlight>

=== 响应式布局 ===
<syntaxhighlight lang="css">
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

@media (min-width: 768px) {
    .container {
        display: flex;
    }
}
</syntaxhighlight>

== 高级语法特性 ==

=== CSS变量 ===
<syntaxhighlight lang="css">
:root {
    --main-color: #3498db;
}

.element {
    color: var(--main-color);
}
</syntaxhighlight>

=== 嵌套规则（CSS预处理器） ===
虽然原生CSS不支持嵌套，但预处理器如SASS允许：
<syntaxhighlight lang="scss">
nav {
    ul {
        margin: 0;
        li {
            display: inline-block;
        }
    }
}
</syntaxhighlight>

== 常见错误与调试 ==

1. 缺少分号：每个声明必须以分号结束
2. 拼写错误：检查属性和值的拼写
3. 选择器错误：确保选择器匹配HTML中的元素
4. 优先级冲突：使用开发者工具检查应用的样式

== 可视化语法结构 ==
<mermaid>
graph TD
    A[CSS规则] --> B[选择器]
    A --> C[声明块]
    C --> D[声明]
    D --> E[属性]
    D --> F[值]
    B --> G[元素选择器]
    B --> H[类选择器]
    B --> I[ID选择器]
    B --> J[属性选择器]
    B --> K[伪类选择器]
</mermaid>

== 数学公式示例 ==

CSS中的计算可以使用calc()函数，例如：
<math>width = 100\% - 20px</math>
<syntaxhighlight lang="css">
.container {
    width: calc(100% - 20px);
}
</syntaxhighlight>

== 总结 ==

CSS语法是构建网页样式的核心，理解其基本结构和各种选择器类型对于创建有效的样式表至关重要。通过实践不同的选择器和属性组合，开发者可以精确控制网页的视觉呈现。随着CSS规范的不断发展，新的语法特性如变量和函数进一步增强了CSS的能力。

[[Category:编程语言]]
[[Category:CSS]]
[[Category:CSS基础]]