📅 最后修改于: 2023-12-03 15:30:10.172000 🧑 作者: Mango
CSS 链接是在 HTML 中通过 <link> 元素引用 CSS 样式表的一种方式。它可以将样式表与 HTML 页面分离，使得样式更加可控和易于维护。本文将介绍 CSS 链接的相关知识和用法。
在 HTML 的 <head> 元素中使用 <link> 元素来引用样式表。
<head>
<link rel="stylesheet" href="style.css">
</head>
上述代码中，rel 属性指定了所引用样式表的类型为“样式表”（stylesheet），href 属性指定了样式表文件的路径。其中，路径可以是绝对路径或相对路径。如果样式表文件与 HTML 文件在同一目录下，可以使用相对路径。
除了使用外部样式表，还可以通过在 HTML 中嵌入 <style> 元素来定义样式。
<head>
<style>
/* CSS 样式 */
</style>
</head>
这种定义方式的优点是在 HTML 中一目了然，方便修改和调试，缺点是可能使得 HTML 文件变得臃肿不堪，不利于维护和扩展。
除了 rel 和 href 属性外，<link> 元素还有其他可选属性。
type 属性规定外部资源的 MIME 类型。对于 CSS 样式表，通常为 text/css。
<link rel="stylesheet" href="style.css" type="text/css">
在 HTML5 中，type 属性是可选的，因为浏览器会默认将其识别为 CSS 样式表。
media 属性规定样式表适用的媒介类型，比如打印（print）、屏幕（screen）等。
<link rel="stylesheet" href="style.css" media="screen">
如果省略该属性，则样式表将适用于所有媒介类型。
如果同一页面中引用了多个样式表，它们的顺序将影响样式的优先级。后引用的样式表将覆盖先引用的样式表中的同名样式。
<head>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
</head>
上述代码中，reset.css 文件包含了重置样式，style.css 文件包含了页面的特定样式。由于是先引用了 reset.css，再引用了 style.css，因此后者的样式将优先生效。
CSS 链接是一种在 HTML 中引用 CSS 样式表的方式，通过将样式表与 HTML 页面分离，可以使得页面样式更加可控和易于维护。常用的属性有 rel、href、type 和 media。在多个样式表同时使用时应注意样式覆盖的优先级。