如何将CSS链接到HTML

181 阅读2分钟

HTML是一种标记语言,帮助你定义网页的结构。CSS是一种样式表语言,你用它来使网页的结构更美观,布局更合理。

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

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

最好的做法是将你的CSS与你的HTML分开,所以本文主要讨论如何将外部CSS与你的HTML连接起来。

如何将CSS链接到HTML

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

链接标签是一个自我封闭的标签,你应该把它放在你的HTML的标题部分。

要用它来链接CSS和HTML,你可以这样做:

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

将链接标签放在你的HTML的头部,如下所示:

<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 代表 "超文本参考"。你用它来指定CSS文件的位置和文件名。它是一个可点击的链接,所以你也可以按住 ,点击它来查看CSS文件。CTRL

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

最后的思考

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

我们还看了一下每个属性的含义,这样你就不会在不知道它们如何工作的情况下就使用它们。

继续编码...