前端Wiki/CSS/基础/初识 CSS

三种引入方式

CSS 要先「引入」到 HTML 中才能生效，共有三种方式：

外部样式表：样式写在独立的 .css 文件里，用 <link> 标签引入。这是最推荐的方式，样式可被多个页面复用，浏览器还能缓存。
内部样式表：样式写在 <style> 标签中，放在 head 里。适合单页面的少量专属样式。
内联样式：直接写在标签的 style 属性里，优先级很高但难以维护，只建议在特殊场景（如动态计算的值）少量使用。

三种方式可以同时存在。当它们对同一属性给出不同值时，一般遵循「内联 > 内部/外部」的顺序，而内部与外部之间则取决于书写顺序和优先级。

本节要点日常开发首选外部样式表；<link> 放在 head 中；内联样式优先级高但应尽量少用，便于统一维护。

HTML

<!-- 三种引入方式一览 -->
<link rel="stylesheet" href="style.css">

<style>
  h1 { color: steelblue; }  /* 内部样式表 */
</style>

<h1 style="font-size: 32px;">标题</h1>  <!-- 内联样式 -->

🔗 相关词条HTML CSS 浏览器优先级标签

📚 推荐阅读

YY UED 前端规范指南万象云档

优达学城前端样式指南万象云档

移动前端开发经验指南万象云档

Element Plus v2.2 组件库教程万象云档

带你入门前端工程万象云档

来自万象云档的免费在线书籍，点击封面直接阅读