使用link标签可在HTML中引入外部CSS实现结构与样式分离,推荐做法是将CSS保存为独立文件并在head中通过引入,路径需正确,可引入多个文件,后引入的会覆盖前面相同规则。

在HTML文档中,可以通过link标签引入外部CSS样式文件,实现网页结构与样式的分离。这是最常见且推荐的做法。
使用 link 标签引入外部CSS
将CSS代码保存在一个独立的文件中(例如:style.css),然后在HTML文件的区域添加如下代码:
其中:
- rel="stylesheet":指定当前文档与引入资源的关系类型,这里是样式表。
- href:指定CSS文件的路径,可以是相对路径或绝对路径。
路径写法示例
假设项目结构如下:
立即学习“前端免费学习笔记(深入)”;
project/
├── index.html
└── css/
└── style.css
在index.html中应这样引入:
注意事项
确保文件路径正确,否则样式不会生效。浏览器会通过开发者工具的“网络”或“元素”面板提示404错误。
多个样式文件可依次引入,后面的样式会覆盖前面相同的选择器规则:
ain.css">
基本上就这些,只要路径对了,样式就能正常加载。不复杂但容易忽略细节。










