原文:How to Link CSS to HTML – Stylesheet File Linking,作者:Kolade Chris

HTML 是帮助你定义网页结构的标记语言。 CSS 是一种样式表语言,你可以使用它来使结构看起来漂亮且布局合理。

为了使你使用 CSS 实现的样式反映在 HTML 中,你必须找到一种将 CSS 链接到 HTML 的方法。

你可以通过编写内联 CSS、内部 CSS 或外部 CSS 来进行链接。

将 CSS 与 HTML 分开是最佳实践,因此本文重点介绍如何将外部 CSS 链接到 HTML。

如何将 CSS 链接到 HTML

要将 CSS 链接到 HTML,你必须使用带有一些相关属性的 link 标签。

link 标签是一个自闭合标签,你应该把它放在 HTML 的头部。

要将 CSS 链接到 HTML,你可以这样做:

<link rel="stylesheet" type="text/css" href="styles.css" />

link 标签放在 HTML 的 head 部分,如下所示:

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="styles.css" /> 
    <title>Link CSS to HTML</title>
</head>

rel 标签

rel 是外部文件和当前文件的关系。对于 CSS,你使用 stylesheet。例如,rel="stylesheet"

type 标签

type 是你链接到 HTML 的文档的类型。对于 CSS,它是 text/css。例如 type="text/css"

href 标签

href 代表 “hypertext reference 超文本引用”。你可以使用它来指定 CSS 文件的位置和文件名。它是一个可点击的链接,因此你也可以按住 CTRL,并单击它来查看 CSS 文件。

例如,如果 CSS 文件与 HTML 文件位于同一文件夹中,则为 href="styles.css"。如果 CSS 文件位于另一个文件夹中,则为 href="folder/styles.css"

小结

本文向你展示了如何使用 link 标签和必要的属性将外部 CSS 文件正确链接到 HTML。

我们还查看了每个属性的含义,你更了解如何使用它们了。

继续编码……