📌  相关文章
📜  CSS Head Link - CSS (1)

📅  最后修改于: 2023-12-03 15:14:18.359000             🧑  作者: Mango

CSS Head Link - CSS

CSS Head Link 是 HTML 文件中用于引入样式表的标签，它的作用是把指定的样式表链接到 HTML 页面中。

语法

CSS Head Link 标签的语法如下：

<link rel="stylesheet" type="text/css" href="path/to/cssfile.css">

其中，rel 表示与当前文档之间关系的类型，type 表示文档的类型，通常为 text/css，href 则表示链接指向的样式表文件路径。

特点
  1. 可以链接多个样式表，只需在 HTML 页面中使用多个 CSS Head Link 标签即可。
  2. 可以使用 CDN 引入样式表，提高页面加载速度。
  3. 可以使用 media 属性指定文档的媒体类型，以便在不同设备上展现符合设备规格的样式表。
示例

以下是一个 CSS Head Link 的示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.example.com/css/normalize.css">
    <link rel="stylesheet" type="text/css" href="styles.css" media="screen">
</head>
<body>
    <h1>Hello, CSS</h1>
    <p>This is an example page.</p>
</body>
</html>

其中，第一个 CSS Head Link 使用了 CDN 引入了 normalize.css 样式表，第二个 CSS Head Link 引入了相对路径下的本地样式表 styles.css，并且指定了媒体类型为 screen，只有在屏幕设备上才会使用该样式表。