1.内部样式表

(内嵌样式表)写在html内部，将所有的css代码抽出来单独放到一个<style>标签中

<style>
   div {
     color: red;
     font-size: 20px; 
   }
</style>

2.行内样式表

(内联样式表)是在元素标签内部的style属性中设定css样式，适合于修改简单的样式

<div style="color: red; font-size: 20px;"></div>
  • style是标签的数学
  • 双引号中间写法要复合css规范
  • 可以控制当前的标签设置样式
  • 不推荐大量使用，对标签单独进行修改的时候可以考虑使用
  • 通常也被称为行内式引用

3.外部样式表

实际开发中都是外部样式表，适用于样式即多的情况，核心是：样式单独写到css文件中，之后再把css文件引入到html页面中使用

  1. 新建一个.css的样式文件，把所有css代码写进去
  2. 在html页面中，使用<link>标签引入这个文件
<link rel="stylesheet" href="css文件路径">
属性作用
rel定义当前文档与被链接文档之间的关系，这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件
href定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径

4.css引入方式总结

样式表优点缺点使用情况控制范围
行内样式表书写方便，权重高结构样式混写较少控制一个标签
内部样式表部分结构和样式相分离没有彻底分离较多控制一个页面
外部样式表完全实现结构和样式相分离需要引入，吐血推荐最多控制多个页面
最后修改：2022 年 03 月 28 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏