css写在html哪里：三种写法实操

css写在html哪里，分为行内样式、内嵌样式、外部样式表三种放置方案，行内样式写在html标签的style属性内，适合单元素临时调整；内嵌样式写在html文档head标签里的style标签中，适合单页面少量样式；外部样式表通过link标签引入html的head区域，适合多页面共用样式，该方法的适用边界是项目页面数量大于3个，页面样式存在大量复用需求，小型单页面原型不强制优先使用外部样式。

css写在html哪里：行内样式

行内样式直接写在html元素的开始标签内，借助style属性承载css代码，属性值填写完整的样式声明，多个样式之间用分号隔开。你可以直接在div、p、span这类标签上添加样式，修改效果即时生效，不需要额外新增标签或者文件。这种写法只作用于当前选中的单个标签，不会影响页面内其他元素，调试局部样式时比较便捷。

不适合大规模页面开发。

css写在html哪里：内嵌样式

内嵌样式需要在html页面的head标签内部，添加一对style标签，所有css选择器与样式规则全部写在style标签中间。浏览器解析html文档时，读到style标签就会加载内部样式，样式作用范围是当前整个html页面，页面内所有匹配选择器的元素都会应用对应样式。你可以一次性批量控制页面多个元素，相比行内样式，代码结构更整洁，适合静态单页Demo、简单活动页这类场景。

css写在html哪里：外部样式引入

外部css代码独立保存在后缀为.css的单独文件，不会直接写在html文档内部，html文件通过link标签完成外部css文件的加载，link标签放置在html的head标签内。link标签需要设置两个核心属性，rel属性固定填写stylesheet，href属性填写css文件的访问路径，路径分为相对路径与绝对路径，本地开发优先使用相对路径。修改css文件后，所有引入这个文件的html页面样式同步更新，多页面项目中可以减少重复代码。

样式优先级遵循浏览器层叠规则，相同权重下，后加载的样式会覆盖前面加载的样式，行内样式权重高于内嵌样式与外部样式，除非样式后添加!important声明，权重会发生改变。你调试样式冲突时，可以借助浏览器开发者工具Elements面板查看样式来源，面板会直接标注样式来自行内、内嵌或者外部css文件，快速定位样式覆盖问题。

style标签不能放在html的body标签内，部分低版本浏览器会出现样式解析异常，页面渲染出现错乱。

外部css文件内不能书写html标签，文件只允许存放css选择器与样式声明，把html标签写进css文件会导致全部样式失效。

link标签仅用于引入外部css文件，不要把css代码直接写在link标签内部，link是单标签，没有闭合标签，无法承载样式代码。