【CSS-1】CSS 语法规范与书写位置详解：提升代码可读性与维护性

CSS（层叠样式表）是前端开发的核心技术之一，用于控制网页的样式和布局。良好的 CSS 编写规范不仅能提高代码的可读性，还能增强团队协作效率。本文将详细介绍：

1. CSS 的基本语法规范
2. CSS 的书写位置（内联、内部、外部）
3. 最佳实践与优化建议

---

1. CSS 基本语法规范

CSS 的语法由 选择器（Selector） 和 声明块（Declaration Block） 组成：

selector {
    property: value;
    property: value;
}

1.1 选择器（Selector）

选择器用于指定要应用样式的 HTML 元素，常见的有：

• 元素选择器（如 div、p）
• 类选择器（如 .container）
• ID 选择器（如 #header）
• 属性选择器（如 [type="text"]）
• 伪类选择器（如 :hover、:nth-child()）

示例：

/* 元素选择器 */
p {
    color: blue;
}

/* 类选择器 */
.button {
    background: #f0f0f0;
}

/* ID 选择器 */
#main-content {
    width: 80%;
}

/* 伪类选择器 */
a:hover {
    text-decoration: underline;
}

1.2 声明块（Declaration Block）

声明块由 { } 包裹，每条声明由 属性（Property） 和 值（Value） 组成，以 : 分隔，并以 ; 结尾：

selector {
    property1: value1;  /* 声明1 */
    property2: value2;  /* 声明2 */
}

书写规范：

• 缩进：推荐 2 或 4 个空格（保持团队统一）

• 换行：单条声明可以写在一行，多条声明建议换行：

  /* 推荐写法 */
  .box {
      width: 100px;
      height: 100px;
      background: red;
  }
  
  /* 不推荐（可读性差） */
  .box { width: 100px; height: 100px; background: red; }
  

• 属性顺序（推荐）：

  1. 布局属性（display、position、float）
  2. 盒模型（width、height、margin、padding）
  3. 文本样式（font、color、text-align）
  4. 视觉效果（background、border、box-shadow）
  5. 动画 & 过渡（transition、animation）

---

2. CSS 的书写位置

CSS 可以写在 3 个位置：

1. 内联样式（Inline CSS）
2. 内部样式表（Internal CSS）
3. 外部样式表（External CSS）

2.1 内联样式（Inline CSS）

直接在 HTML 元素的 style 属性中编写：

<p style="color: red; font-size: 16px;">这是一段红色文字p>

适用场景：

• 快速测试样式
• 动态修改样式（如 JavaScript 操作）

缺点：

• 难以维护（样式与 HTML 混合）
• 无法复用（相同样式需重复编写）

2.2 内部样式表（Internal CSS）

在 HTML 的 中使用