CSS 规则结构

CSS 规则是 CSS 的基本构建单元，理解 CSS 规则的结构是学习 CSS 的第一步。每个 CSS 规则都由两个主要部分组成：选择器和声明块。

CSS 规则的基本组成

一个完整的 CSS 规则包含以下要素：

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

选择器（Selector）

选择器用于指定要应用样式的 HTML 元素。选择器告诉浏览器："找到这些元素，然后把样式应用上去"。

h1 {
  color: blue;
}

在这个例子中，h1 就是选择器，它选中所有的 <h1> 标签元素。

声明块（Declaration Block）

声明块包含在一对大括号 {} 中，包含一个或多个声明。每个声明定义了一个或多个样式属性及其对应的值。

p {
  color: #333;
  font-size: 16px;
  line-height: 1.6;
}

声明（Declaration）

每个声明由一个属性和一个值组成，用冒号 : 分隔，以分号 ; 结束。

属性: 值;

CSS 规则的详细解析

让我们通过一个具体的例子来深入理解 CSS 规则的结构：

.article-title {
  color: #2c3e50;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 15px;
  text-align: center;
}

规则分解

1. 选择器：.article-title

   • 这是一个类选择器
   • 选中所有 class="article-title" 的元素

2. 声明块：大括号 {} 中的内容

   • 包含 5 个声明

3. 声明 1：color: #2c3e50;

   • 属性：color（文本颜色）
   • 值：#2c3e50（深灰色）

4. 声明 2：font-size: 24px;

   • 属性：font-size（字体大小）
   • 值：24px（24 像素）

5. 声明 3：font-weight: bold;

   • 属性：font-weight（字体粗细）
   • 值：bold（粗体）

6. 声明 4：margin-bottom: 15px;

   • 属性：margin-bottom（底部外边距）
   • 值：15px（15 像素）

7. 声明 5：text-align: center;

   • 属性：text-align（文本对齐）
   • 值：center（居中）

CSS 规则的书写规范

空格和换行

虽然 CSS 对空格和换行不敏感，但良好的代码格式能提高可读性：

推荐的格式：

/* 良好的格式 */
.card {
  background: white;
  border: 1px solid #ddd;
  padding: 20px;
  border-radius: 8px;
}

不推荐的格式：

/* 难以阅读 */
.card{background:white;border:1px solid #ddd;padding:20px;border-radius:8px;}

分号的使用

每个声明必须以分号 ; 结束，最后一个声明的分号可以省略，但建议保留：

/* 推荐的写法 */
.button {
  padding: 10px 20px;
  background: #007bff;
  color: white;
  border: none;
}

注释的使用

在 CSS 中添加注释可以提高代码的可维护性：

/* 主要导航样式 */
.main-nav {
  background: #333;
  padding: 15px 0;
}

/* 导航链接样式 */
.main-nav a {
  color: white;
  text-decoration: none;
  margin-right: 20px;
}

常见的 CSS 规则示例

元素选择器规则

/* 选中所有段落 */
p {
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

/* 选中所有标题 */
h1, h2, h3 {
  color: #2c3e50;
  margin-bottom: 15px;
}

类选择器规则

/* 选中所有具有 highlight 类的元素 */
.highlight {
  background-color: #fff3cd;
  padding: 10px;
  border-left: 4px solid #ffc107;
}

/* 选中所有具有 btn 类的元素 */
.btn {
  display: inline-block;
  padding: 10px 20px;
  background: #007bff;
  color: white;
  text-decoration: none;
  border-radius: 4px;
}

ID 选择器规则

/* 选中 ID 为 header 的元素 */
#header {
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  padding: 20px 0;
}

/* 选中 ID 为 main-content 的元素 */
#main-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

组合选择器规则

/* 选中所有 div 元素内的段落 */
div p {
  margin-bottom: 15px;
}

/* 选中所有直接作为 nav 子元素的链接 */
nav > a {
  font-weight: bold;
  text-transform: uppercase;
}

CSS 属性和值的规则

属性命名

CSS 属性名使用小写字母，多个单词用连字符 - 连接：

/* 正确的属性命名 */
background-color
font-size
border-top-left-radius

/* 错误的属性命名 */
backgroundColor  /* 应该使用连字符 */
FontSize        /* 应该使用小写 */

值的类型

CSS 属性值有多种类型：

1. 关键字值

display: block;
font-weight: bold;
text-align: center;

2. 长度值

width: 100px;
height: 2em;
margin: 1.5rem;

3. 颜色值

color: red;
background: #ffffff;
border-color: rgb(0, 0, 0);

4. URL 值

background-image: url('background.jpg');
list-style-image: url('bullet.png');

5. 多值属性

margin: 10px 20px;      /* 上下10px，左右20px */
padding: 5px 10px 15px 20px;  /* 上5px，右10px，下15px，左20px */
border: 1px solid #ddd; /* 宽度、样式、颜色 */

CSS 规则的优先级

当多个 CSS 规则应用于同一个元素时，浏览器需要决定使用哪个规则。这涉及到 CSS 的优先级机制：

基本优先级规则

1. !important 声明具有最高优先级
2. 内联样式 次之
3. ID 选择器 再次之
4. 类选择器、伪类、属性选择器
5. 元素选择器、伪元素 最低

优先级示例

/* 优先级：0,0,1 */
p {
  color: blue;
}

/* 优先级：0,1,0 */
.text {
  color: green;
}

/* 优先级：1,0,0 */
#content {
  color: red;
}

/* 优先级：最高 */
.highlight {
  color: yellow !important;
}

CSS 规则的实际应用

完整的样式表示例

/* 全局样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Arial', sans-serif;
  line-height: 1.6;
  color: #333;
  background: #f5f5f5;
}

/* 容器样式 */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 标题样式 */
h1 {
  font-size: 32px;
  color: #2c3e50;
  margin-bottom: 20px;
  text-align: center;
}

h2 {
  font-size: 24px;
  color: #34495e;
  margin-bottom: 15px;
}

/* 按钮样式 */
.btn {
  display: inline-block;
  padding: 12px 24px;
  background: #3498db;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  transition: background 0.3s ease;
}

.btn:hover {
  background: #2980b9;
}

/* 卡片样式 */
.card {
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

常见的 CSS 规则错误

1. 忘记分号

/* 错误 */
.button {
  background: #007bff
  color: white
}

/* 正确 */
.button {
  background: #007bff;
  color: white;
}

2. 属性名拼写错误

/* 错误 */
.text {
  backgroud-color: white;  /* 拼写错误 */
}

/* 正确 */
.text {
  background-color: white;
}

3. 选择器错误

/* 错误 - 类选择器需要加点 */
title {
  color: #333;
}

/* 正确 */
.title {
  color: #333;
}

4. 值格式错误

/* 错误 */
.border {
  border: 1px solid;  /* 缺少颜色值 */
}

/* 正确 */
.border {
  border: 1px solid #ddd;
}

总结

CSS 规则结构是 CSS 的基础，理解它对于编写有效的 CSS 至关重要。记住以下几点：

1. CSS 规则由选择器和声明块组成
2. 声明块包含一个或多个声明
3. 每个声明由属性和值组成，用冒号分隔，分号结束
4. 良好的代码格式能提高可读性
5. CSS 属性值有多种类型
6. 理解 CSS 优先级规则很重要

掌握了 CSS 规则结构，你就可以开始编写自己的 CSS 样式了。在接下来的章节中，我们将学习各种选择器的使用方法，以及常用的 CSS 属性。