将 css 添加到 html 文件 - Html (1) - 芒果文档

📌 相关文章

📜 将 css 添加到 html 文件 - Html (1)

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

将 CSS 添加到 HTML 文件 - HTML

在 HTML 中，我们可以使用 <link> 标签将 CSS 文件添加到 HTML 文档中。这使得我们可以通过 CSS 来为我们的网站设计漂亮的样式。

步骤

在 HTML 文件的头部添加 <link> 标签。
```
<head>
   <link rel="stylesheet" href="style.css">
</head>
```
在 href 属性中，我们可以指定 CSS 文件的链接或相对路径，比如以上代码中的 style.css。
编写 CSS 文件。
```
//style.css
body {
   background-color: white;
   color: black;
}
```
这里我们以 body 选择器为例，改变背景色和字体颜色。
保存 HTML 和 CSS 文件，刷新浏览器即可看到修改后的效果。

注意事项

在 href 属性中的链接路径应该是相对于 HTML 文件的位置，如果 CSS 文件在同一目录下，可以直接写文件名，如果在上级目录下，则需要写上路径。
可以在同一 HTML 文件中使用多个 <link> 标签引入多个 CSS 文件。
<link> 标签应该放在 HTML 文件头部。
避免在 HTML 中直接写 CSS 样式，应该尽可能使用外部 CSS 文件。
在 CSS 文件中可以使用相对单位（如 em、rem）和绝对单位（如 px、%）来定义样式。
可以使用 CSS 预处理器（如 SASS、LESS）来更方便地编写 CSS 文件。
可以在 HTML 中使用 <style> 标签来内嵌 CSS 样式，不过不推荐这样做。

结论

上述步骤可以帮助你将 CSS 样式添加到 HTML 文件，进而打造漂亮的网站。HTML 和 CSS 是前端开发的基础，熟练掌握它们是每个前端开发者的必备技能。