外置CSS通过link标签引入独立样式文件，实现HTML与CSS分离，提升可维护性、可重用性、性能和团队协作效率，是现代网页开发推荐做法。
外置CSS的使用其实非常直观，它通过在HTML文档的头部引入一个独立的.css文件来为网页添加样式。这种方式让你的HTML专注于内容结构，CSS专注于视觉表现，两者互不干扰，是现代网页开发中处理样式最推荐也最常用的方法。
解决方案
要使用外部CSS文件，你需要在HTML文档的
区域内添加一个标签。这个标签告诉浏览器去哪里找到你的样式文件，以及它是什么类型的资源。具体来说，你需要这样写：
立即学习“前端免费学习笔记（深入）”；
我的网页
欢迎来到我的网站
这是一个使用外部CSS的示例。
在上面的代码中：
rel="stylesheet"
：这个属性是必须的，它定义了被链接文档与当前文档的关系，这里表示这是一个样式表。href="styles/main.css"
：这个属性指定了外部CSS文件的路径。路径可以是相对路径（如styles/main.css
，相对于HTML文件）或绝对路径（如http://example.com/styles/main.css
）。通常，在项目内部我们都用相对路径。type="text/css"
：这个属性在HTML5中已经不是必需的了，因为CSS是默认的样式表类型，但保留它也无妨，不会有负面影响。
当你把这个
标签放到里，浏览器在解析HTML的时候就会去下载并应用main.css文件里的所有样式规则了。
为什么我们应该优先选择外置CSS，它比内联或内部样式好在哪里？
我个人觉得，外置CSS之所以成为主流，核心原因就一个字：“管”。它让管理样式变得前所未有的简单和高效。想想看，如果你的网站有几十个页面，每个页面都有相同的导航栏和页脚样式，你会选择在每个页面的
里都写一遍