在 html 中添加 css 文件 - CSS (1)

📌 相关文章

📜 在 html 中添加 css 文件 - CSS (1)

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

在 HTML 中添加 CSS 文件 - CSS

在 HTML 中，可以使用 <link> 标签将 CSS 文件链接到 HTML 文件中。

语法

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

其中：

rel 属性指定了文档与链接之间的关系，这里取值为 stylesheet，表示链接的是样式表。
type 属性指定了链接的资源类型，这里取值为 text/css，表示链接的是 CSS 样式表。
href 属性指定了链接的资源位置，这里指定了一个名为 style.css 的文件。

示例

以简单的 HTML 文件和 CSS 文件为例，来演示如何在 HTML 中添加 CSS 文件。

HTML 文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML 文件示例</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>Hello, world!</h1>
    <p>This is a paragraph.</p>
</body>
</html>

CSS 文件

h1 {
    color: red;
}

p {
    font-size: 18px;
}

链接 CSS 文件之后，<h1> 元素的文字将变为红色，<p> 元素的字号将变为 18px。

注意事项

href 属性需要指定准确的文件路径，否则 CSS 将无法被正确链接。可以使用绝对路径或相对路径，根据实际情况选择。
CSS 文件需要遵循 CSS 的语法规范，否则将无法被正确解析。
在 HTML 中，<link> 标签应该放在 <head> 标签中，以提高文档的性能。