HTML 是帮助您定义网页结构的标记语言。CSS 是一种样式表语言,您可以使用它来使结构看起来漂亮且布局合理。
为了将您使用 CSS 实现的样式反映在 HTML 中,您必须找到一种将 CSS 链接到 HTML 的方法。
您可以通过编写内联 CSS、内部 CSS 或外部 CSS 来进行链接。
将 CSS 与 HTML 分开是最佳实践,因此本文重点介绍如何将外部 CSS 链接到 HTML。
如何将外部 CSS 文件链接到 HTML
要将 CSS 链接到 HTML,您应该使用下面的代码:
<link rel="stylesheet" type="text/css" href="styles.css" />
将链接标签放在 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>www.02405.com</title>
</head>
链接标签的属性
rel
属性_
rel
是外部文件和当前文件的关系。对于 CSS,您使用stylesheet
. 例如,rel="stylesheet"
。
type
属性_
type
是您链接到 HTML 的文档的类型。对于 CSS,它是text/css
. 例如type="text/css"
.
href
属性_
href
代表“超文本引用”。您可以使用它来指定 CSS 文件的位置和文件名。它是一个可点击的链接,因此您也可以按住CTRL
并单击它来查看 CSS 文件。
例如,href="styles.css"
如果 CSS 文件与 HTML 文件位于同一文件夹中。或者href="folder/styles.css"
,如果 CSS 文件位于另一个文件夹中。