在 CSS 中链接外部样式表

cssweb developmentfront end technology更新于 2025/1/17 14:36:17

CSS 允许我们将外部样式表链接到我们的文件。这有助于我们单独修改 CSS，并缩短页面加载时间。外部文件在文档 <head> 内的 <link> 标签中指定。

语法

包含外部 CSS 的语法如下。

<link rel="stylesheet" href="#location">

示例

以下示例说明了如何嵌入 CSS 文件

HTML file

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h2>Demo Text</h2>
<div>
<ul>
<li>This is demo text.</li>
<li>This is demo text.</li>
<li>This is demo text.</li>
<li>This is demo text.</li>
<li>This is demo text.</li>
</ul>
</div>
</body>
</html>

CSS 文件

h2 {
   color: red;
}
div {
   background-color: lightcyan;
}

输出

这将给出以下输出 −

示例

HTML 文件

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h2>Demo Heading</h2>
<p>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. </p>
</body>
</html>

CSS 文件

p {
   background: url("https://www.cainiaomax.com/images/QAicon.png");
   background-origin: content-box;
   background-size: cover;
   box-shadow: 0 0 3px black;
   padding: 20px;
   background-origin: border-box;
}