CSS 入门实战

如何向 HTML 添加 CSS

层叠样式表（CSS）用于格式化网页的布局和外观。本指南将解释将 CSS 集成到 HTML 文档中的三种主要方法。

理解 CSS 集成

当浏览器渲染 HTML 文档时，它也会读取任何关联的 CSS 规则以应用样式。提供这些规则有三种方法：

• 外部 CSS：样式在单独的 .css 文件中定义。
• 内部 CSS：样式在 HTML 文档的 <head> 部分的 <style> 元素内定义。
• 行内 CSS：样式使用 style 属性直接应用于单个 HTML 元素。

1. 外部 CSS

这是大多数项目中最常用和推荐的方法。通过外部样式表，你可以从一个文件管理整个网站的样式。这促进了样式的一致性、可维护性和更好的组织性。

要使用外部样式表，你需要从 HTML 页面（或多个页面）的 <head> 部分链接到它：

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Web Page</title>
  <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

mystyle.css 文件将包含你的 CSS 规则（不含任何 HTML 标签）：

mystyle.css

body {
  background-color: lightblue;
  font-family: Arial, sans-serif;
}

h1 {
  color: navy;
  margin-left: 20px;
}

.special-text {
  font-style: italic;
  color: darkgreen;
}

优点：集中管理样式，更易维护，提高页面加载速度（浏览器会缓存 .css 文件）。

	重要提示：属性值与其单位之间不要添加空格（例如，margin-left: 20 px; 是错误的）。正确的语法是 margin-left: 20px;。

2. 内部 CSS（嵌入式样式）

当单个 HTML 页面具有不会在其他页面上重复使用的独特样式时，会使用内部 CSS。样式在 <style> 元素内定义，放置在 HTML 文档的 <head> 部分。

<head>
  <meta charset="UTF-8">
  <title>Unique Page Style</title>
  <style>
    body {
      background-color: linen;
    }
    h1 {
      color: maroon;
      margin-left: 40px;
    }
    p {
      font-size: 1.1em;
    }
  </style>
</head>
<body>
  <h1>此标题由内部 CSS 设置样式。</h1>
  <p>此段落也使用内部样式。</p>
</body>

优点：适用于单页面特定样式。无需额外的 HTTP 请求获取 CSS 文件。

缺点：样式不能在多个页面之间重复使用，使得全站更改更加困难。

3. 行内 CSS

行内样式使用 style 属性直接应用于单个 HTML 元素。通常不建议使用这种方法进行大量的样式设置，因为它将内容 (HTML) 与表现 (CSS) 混合在一起，使得维护更加困难，并且由于高特异性而容易覆盖其他样式。

谨慎使用行内样式，通常用于非常特定、动态的样式设置（例如，由 JavaScript 设置）或用于快速测试。

<h1 style="color:blue; margin-left:30px; text-align:center;">这是一个应用了行内样式的标题</h1>
<p style="color:green; font-size:12px;">此段落也应用了行内样式。</p>

缺点：特异性最高（难以覆盖），可维护性差，不可重用，使 HTML 代码膨胀。

层叠与特异性：样式如何应用

当多个 CSS 规则 targeting 同一个元素时，浏览器会使用一个称为层叠和特异性的系统来确定哪个规则优先。

层叠顺序（从最低到最高的通用优先级）：

1. 浏览器默认样式（用户代理样式表）。
2. 外部样式表（通过 <link> 链接）。
3. 内部样式表（<head> 标签内的 <style> 标签）。
4. 行内样式（通过元素的 style 属性应用）。

示例：如果外部样式表定义了 h1 { color: navy; }，并且同一页面的内部样式表定义了 h1 { color: orange; }，那么 h1 元素将是橙色，因为内部样式通常会覆盖针对相同选择器和属性的外部样式，前提是链接正确。

特异性：

在同一来源内（例如，你自己的所有 CSS），更具特异性的选择器将覆盖特异性较低的选择器。例如：

• ID 选择器（例如 #myElement）比类选择器（例如 .myClass）更具特异性。
• 类选择器比元素选择器（例如 p）更具特异性。
• 链式选择器（例如 div.myClass p）比单个选择器更具特异性。

!important：你可以向 CSS 属性值添加 !important，使其几乎覆盖任何其他声明。但是，请谨慎使用 !important，因为它会使样式调试变得非常困难。它通常是 CSS 结构不佳的标志。

!important 示例：

p {
  color: blue !important; /* 这很可能会覆盖 <p> 的其他颜色规则 */
}

#special-paragraph {
  color: red; /* 即使是 ID 选择器也可能被 p 选择器上的 !important 覆盖 */
}

注意：如果在 HTML <head> 中 在 内部 <style> 块 之后 链接外部样式表，如果它们具有相同的特异性，外部样式表中的规则可能会覆盖内部样式表中的规则，这是由于它们的出现顺序。

最佳实践：使用外部样式表

对于大多数 Web 开发而言，外部样式表是首选方法。它们在组织、可维护性和性能（由于缓存）方面提供了最佳平衡。内部样式仅用于页面特定调整，而行内样式仅用于罕见、高度特定的情况。