级联样式表，通常称为 CSS，是为 HTML 文档提供样式的语言。它决定了你的网页应该是什么样子，控制从布局到颜色的所有内容。

了解如何将 CSS 链接到 HTML 对于创建具有视觉吸引力和功能性的网页至关重要。CSS 允许您在多个网页上保持一致的设计，使其成为 Web 开发的基石。

了解基础知识

什么是外部 CSS？

外部 CSS 是指存储在具有 .css 扩展名的单独文件中并链接到 HTML 文档的样式表。此文件包含所有 CSS 规则和属性，这些规则和属性决定了网页上 HTML 元素的显示方式。

通过将 CSS 保存在外部文件中，您可以将相同的样式应用于多个 HTML 文件，从而确保整个网站的外观一致。

内联、内部和外部 CSS：比较

有三种方法可以将 CSS 应用于 HTML：内联、内部和外部。内联 CSS 涉及使用 style 属性直接在 HTML 标记中添加样式，这可能很耗时并且会使 HTML 代码混乱。

内部 CSS 放置在 HTML 文档的头部部分中，使用 style 标记。虽然此方法将样式与 HTML 结构分开，但它仅适用于单个页面。另一方面，外部 CSS 是应用样式的最有效方式。

它涉及链接到外部样式表，该样式表可以控制一个 CSS 文件中多个 HTML 页面的外观。

使用外部CSS的优点

使用外部 CSS 文件有几个关键优点：

  • 可重用性：一个 CSS 文件可用于设置多个 HTML 页面的样式，从而更轻松地在整个网站上保持一致的设计。

  • 关注点分离：将 CSS 与 HTML 分开可以促进更干净、更有条理的代码。这种分离允许 Web 开发人员和设计人员在不受干扰的情况下处理同一个项目。

  • 性能：由于浏览器在第一页加载后缓存外部 CSS 文件，因此后续页面加载速度更快，因为不需要再次下载 CSS。

  • 灵活性：更新网站的样式就像修改一个CSS文件一样简单，然后反映所有链接的HTML文件的更改。

准备 CSS 文件

创建 CSS 文件

要开始使用外部 CSS，您首先需要创建一个 CSS 文件。这是一个简单的文本文件，包含您的所有样式规则，并具有.css扩展名。您可以使用任何文本编辑器创建 CSS 文件，例如 Windows 上的记事本或 macOS 上的文本编辑。

对于 Web 开发，建议使用更复杂的文本编辑器，如 Sublime Text、Atom 或 Visual Studio Code，因为它们具有促进编码的附加功能。

CSS的基本语法

CSS 语法很简单。它由选择器和声明块组成。选择器指定要设置样式的 HTML 元素，而声明块具有一个或多个用分号分隔的声明。

每个声明都由一个 CSS 属性和一个值组成，用冒号分隔。

<p><code id="code-lang-html"><span>1</span><span>/* Basic syntax of CSS */
</span><span>2</span>selector {
<span>3</span>  property: value;
<span>4</span>  property: value;
<span>5</span>}</code></p>

组织 CSS 规则的最佳实践

在处理 CSS 文件时，保持代码的组织和可维护性非常重要。以下是一些最佳实践：

  • 注释：使用注释来解释 CSS 文件的某些部分或特定规则。当您或其他人稍后需要理解或修改代码时，这很有帮助。

  • 分组：将相关的样式规则分组在一起。例如，您可能有一个部分用于排版，另一个部分用于布局，另一个部分用于颜色。

  • 一致性：与命名约定、缩进和大小写保持一致，以使 CSS 文件更易于阅读。

  • 排序：对 CSS 规则进行逻辑排序。一些开发人员更喜欢按字母顺序对属性进行排序，而另一些开发人员则按类型（例如，定位、盒子模型、排版）对属性进行分组。

  • 速记属性：使用速记属性来缩短 CSS 并使其更具可读性。例如，您可以将所有边距设置在一行中，边距为：10px 20px 10px 20px;。

  • 避免过度特异性：使选择器尽可能简单，以避免特异性问题，并在需要时使样式更容易覆盖。

将外部 CSS 链接到 HTML

若要将外部 CSS 文件中的样式应用于 HTML 文档，需要使用该 <link> 元素。此元素位于 HTML 文件 <head> 的部分中，负责在 HTML 和 CSS 文件之间建立链接。

在 HTML <head> 部分中正确放置

标记 <link> 应位于 HTML 文档 <head> 的某个部分内。这可确保在页面正文之前加载样式，从而允许页面使用已应用的样式进行呈现。

<p><code id="code-lang-html"><span>1</span><span>&lt;!</span><span>DOCTYPE</span><span> </span><span>html</span><span>&gt;</span><span>
</span><span>2</span><span></span><span>&lt;</span><span>html</span><span>&gt;</span><span>
</span><span>3</span><span></span><span>&lt;</span><span>head</span><span>&gt;</span><span>
</span><span>4</span><span>  </span><span>&lt;!-- Linking the external CSS file --&gt;</span><span>
</span><span>5</span><span>  </span><span>&lt;</span><span>link</span><span> </span><span>rel</span><span>=</span><span>"</span><span>stylesheet</span><span>"</span><span> </span><span>type</span><span>=</span><span>"</span><span>text/css</span><span>"</span><span> </span><span>href</span><span>=</span><span>"</span><span>styles.css</span><span>"</span><span>&gt;</span><span>
</span><span>6</span><span></span><span>&lt;/</span><span>head</span><span>&gt;</span><span>
</span><span>7</span><span></span><span>&lt;</span><span>body</span><span>&gt;</span><span>
</span><span>8</span><span>  </span><span>&lt;!-- HTML content goes here --&gt;</span><span>
</span><span>9</span><span></span><span>&lt;/</span><span>body</span><span>&gt;</span><span>
</span><span>10</span><span></span><span>&lt;/</span><span>html</span><span>&gt;</span></code></p>

元素的属性

该元素包含几个属性，这些属性定义其与 HTML 文档的关系以及 CSS 文件的位置：

  • rel=“stylesheet”：此属性指定 HTML 页面与链接文档之间的关系。值“stylesheet”表示链接的文档是样式表。

  • type=“text/css”：虽然在 HTML5 中不是严格要求的，但此属性声明链接文档的 MIME 类型。对于 CSS 文件，MIME 类型为“text/css”。

  • href=“path/to/stylesheet.css”：href 属性至关重要，因为它提供了要链接到 HTML 文档的 CSS 文件的 URL。

解释 href 属性

<link> 元素中的 href 属性指定外部 CSS 文件的路径。此路径可以是绝对路径，也可以是相对路径。

绝对路径与相对路径

  • 绝对路径：绝对路径直接指向文件的位置，无论当前文件位于何处。

  • 相对路径：相对路径指向与当前 HTML 文档位置相关的文件。当 CSS 文件与 HTML 文件位于同一服务器上时，通常使用它。

文件路径管理提示

  • 同一文件夹：如果 HTML 文件和 CSS 文件位于同一文件夹中，只需使用 CSS 文件的名称作为 href 属性的值即可。

  • 子文件夹：如果您的 CSS 文件位于子文件夹中，请包括文件夹名称后跟斜杠，然后是 CSS 文件的名称。

  • 父文件夹：如果您的 CSS 文件位于父文件夹中，请使用 ../ 从当前 HTML 文件的位置向上导航一个目录级别。

<p><code id="code-lang-html"><span>1</span><span>&lt;!-- Example of linking a CSS file located in the same folder --&gt;</span><span>
</span><span>2</span><span></span><span>&lt;</span><span>link</span><span> </span><span>rel</span><span>=</span><span>"</span><span>stylesheet</span><span>"</span><span> </span><span>type</span><span>=</span><span>"</span><span>text/css</span><span>"</span><span> </span><span>href</span><span>=</span><span>"</span><span>styles.css</span><span>"</span><span>&gt;</span><span>
</span><span>3</span>
<span>4</span><span></span><span>&lt;!-- Example of linking a CSS file located in a subfolder --&gt;</span><span>
</span><span>5</span><span></span><span>&lt;</span><span>link</span><span> </span><span>rel</span><span>=</span><span>"</span><span>stylesheet</span><span>"</span><span> </span><span>type</span><span>=</span><span>"</span><span>text/css</span><span>"</span><span> </span><span>href</span><span>=</span><span>"</span><span>css/styles.css</span><span>"</span><span>&gt;</span><span>
</span><span>6</span>
<span>7</span><span></span><span>&lt;!-- Example of linking a CSS file located in a parent folder --&gt;</span><span>
</span><span>8</span><span></span><span>&lt;</span><span>link</span><span> </span><span>rel</span><span>=</span><span>"</span><span>stylesheet</span><span>"</span><span> </span><span>type</span><span>=</span><span>"</span><span>text/css</span><span>"</span><span> </span><span>href</span><span>=</span><span>"</span><span>../styles.css</span><span>"</span><span>&gt;</span></code></p>

 多个样式表

如何链接多个 CSS 文件

您可以将多个外部 CSS 文件链接到单个 HTML 文档以应用各种样式。这是通过在 HTML 文件 <head> 的部分中添加多个 <link> 元素来完成的。每个 <link> 标记将引用不同的 CSS 文件。

<p><code id="code-lang-html"><span>1</span><span>&lt;!</span><span>DOCTYPE</span><span> </span><span>html</span><span>&gt;</span><span>
</span><span>2</span><span></span><span>&lt;</span><span>html</span><span>&gt;</span><span>
</span><span>3</span><span></span><span>&lt;</span><span>head</span><span>&gt;</span><span>
</span><span>4</span><span>  </span><span>&lt;!-- Linking multiple external CSS files --&gt;</span><span>
</span><span>5</span><span>  </span><span>&lt;</span><span>link</span><span> </span><span>rel</span><span>=</span><span>"</span><span>stylesheet</span><span>"</span><span> </span><span>type</span><span>=</span><span>"</span><span>text/css</span><span>"</span><span> </span><span>href</span><span>=</span><span>"</span><span>reset.css</span><span>"</span><span>&gt;</span><span>
</span><span>6</span><span>  </span><span>&lt;</span><span>link</span><span> </span><span>rel</span><span>=</span><span>"</span><span>stylesheet</span><span>"</span><span> </span><span>type</span><span>=</span><span>"</span><span>text/css</span><span>"</span><span> </span><span>href</span><span>=</span><span>"</span><span>grid.css</span><span>"</span><span>&gt;</span><span>
</span><span>7</span><span>  </span><span>&lt;</span><span>link</span><span> </span><span>rel</span><span>=</span><span>"</span><span>stylesheet</span><span>"</span><span> </span><span>type</span><span>=</span><span>"</span><span>text/css</span><span>"</span><span> </span><span>href</span><span>=</span><span>"</span><span>theme.css</span><span>"</span><span>&gt;</span><span>
</span><span>8</span><span></span><span>&lt;/</span><span>head</span><span>&gt;</span><span>
</span><span>9</span><span></span><span>&lt;</span><span>body</span><span>&gt;</span><span>
</span><span>10</span><span>  </span><span>&lt;!-- HTML content goes here --&gt;</span><span>
</span><span>11</span><span></span><span>&lt;/</span><span>body</span><span>&gt;</span><span>
</span><span>12</span><span></span><span>&lt;/</span><span>html</span><span>&gt;</span></code></p>

9在上面的示例中，链接了三个 CSS 文件：reset.css、grid.css 和 theme.css。它们都将按照链接的顺序将其样式应用于 HTML 文档。

级联和优先顺序

CSS 代表级联样式表，级联是一个基本概念，用于定义当多个规则应用于同一元素时如何解决冲突。CSS 中的优先顺序由以下因素决定：

  1. 重要性：标有 ！important 的样式具有最高优先级。

  2. 特异性：更具体的选择器会覆盖更通用的选择器。

  3. 源顺序：当两个规则具有相同的重要性和特殊性时，后一个优先。

使用多个 CSS 文件时，将按照文件在 HTML 文档中的链接顺序应用样式。如果存在冲突的样式，则以最后一个链接的 CSS 文件为准。

组织多个样式表的策略

在使用多个样式表时，必须战略性地组织它们以保持可读性和可伸缩性。以下是一些常见的策略：

  • 重置或规范化样式：从重置或规范化 CSS 文件开始，以删除默认浏览器样式并确保不同浏览器之间的一致性。

  • 网格或框架：如果您使用的是网格系统或 CSS 框架，请在重置后链接此文件以布局页面的结构元素。

  • 主题或主样式：主样式表（包括大部分自定义样式）应链接在网格或框架之后，以应用您的特定设计。

  • 模块或组件：对于较大的项目，请考虑将样式分解为模块或组件，例如导航、窗体或按钮，并在主样式表之后链接这些模块或组件。

  • 响应式样式：为响应式样式包含单独的样式表，或在现有样式表中使用媒体查询来调整不同屏幕尺寸的布局和设计。

 结论

掌握如何将 CSS 链接到 HTML 是 Web 开发中的一项基本技能，可以增强网页的设计和功能。

通过使用外部 CSS 文件将样式与内容分离，您可以在整个站点中保持一致的外观，提高性能，并使将来的更新更加容易。掌握了这些技能，您就可以创建视觉上令人惊叹且风格高效的网站。