CSS3 基础概念

CSS（层叠样式表） 是一种用于修饰文档（如HTML、XML或SVG）的语言，能够以更优雅的方式呈现内容。它通过定义样式规则来控制网页的外观和布局。

HTML与CSS的关系：

• HTML 是网页内容的载体，负责结构（如文字、图片、视频等）。
• CSS 是表现层，负责样式（如字体、颜色、边框等）。类比来说，HTML是人的身体，CSS是衣服和装饰。

传统标签修改样式的缺点

• 需记忆标签属性，若标签无对应属性则无效。
• 需求变更时需大量修改代码。
• HTML应仅用于语义，而非样式控制。

CSS的优势

• 无需记忆标签与属性的对应关系。
• 需求变更时修改更灵活高效。
• 专注样式控制，与HTML职责分离。

CSS语法规则

CSS声明

• 格式：属性: 值;（如 color: red;）。
• 属性与值区分大小写，且需匹配有效值范围。

CSS声明块

• 多个声明用分号分隔，包裹在 {} 中：

  {
    color: red;
    font-size: 16px;
  }
  

• 最后一条声明可不加分号（但建议保留）。

CSS规则集

• 选择器：指定目标HTML元素（如 p）。
• 声明：由属性和值组成（如 color: red;）。
• 属性值：从预定义选项中选择（如 red 或 #FF0000）。

语法注意事项

• 规则集需用 {} 包裹。
• 声明间用分号分隔。
• 选择器与声明块间无符号。

代码可读性优化

空白与注释

• 使用空格、换行增强可读性：

  p {
    color: red;
    /* 这里是注释 */
    margin: 10px;
  }
  

• 注释格式：/* 注释内容 */。

速记属性

• 合并同类属性，简化代码：
  • 边框：border: 1px solid red;（等价于分开设置宽度、样式、颜色）。
  • 内边距：padding: 10px 15px 15px 5px;（对应上、右、下、左）。
  • 背景：background: red url(image.png) no-repeat;。

示例代码对比

传统HTML样式（不推荐）：

<p style="color: red; font-size: 16px;">文本</p>

CSS样式（推荐）：

p {
  color: red;
  font-size: 16px;
}

通过CSS分离样式与结构，代码更易维护和扩展。