三种添加样式的方法

Author Avatar
Ninefire 6月 06, 2018
  • 在其它设备中阅读本文章

内联样式表

可以将CSS样式编写到元素(标签)的style属性当中。
例:<p style="color: green; font-size: 38px;">16物联网工程2班</p>

将样式直接编写到style属性中,这种样式我们成为内联样式,内联样式只对当前的元素(标签)中的内容起作用,内联样式不方便复用。

PS:网页编写推崇结构、表现和行为三者分离,而内联样式属于结构与表现耦合,不方便后期的维护,所以不推荐使用。
注意:元素(标签)的style属性和元素(标签)其他属性是同等地位。


内部样式表

也可以将CSS样式编写到head中的style标签里。
例:

<style>
    p {
          color: green;
          font-size: 38px;
          font-family: "微软雅黑";
    }
</style>

将样式编写到style标签中,然后通过CSS选择器选中指定元素,则可以同时为这些被选中的元素一起设置样式,便可以使样式进一步的复用。

PS:将样式表编写到style标签中,可以使结构和表现两者分离,因此是推荐使用的方式


外部样式表

还可以将CSS样式编写到外部的CSS文件中。
例:<link rel="stylesheet" type="text/css" href="css/reset.css" />

然后通过link标签来将外部的CSS文件引入到当前页面中,这样外部文件中的CSS样式表将会应用到当前页面中。

将CSS样式统一编写到外部的样式表中,使结构和表现两者完全分离,可以使样式表在不同的页面中使用,最大限度的使样式进行复用。

PS:用此种方法将样式统一写在样式表中,然后通过link标签引入,可以利用浏览器的缓存加快用户访问的速度,提高了用户体验。
因此在开发过程中,强烈推荐使用的就是外部的CSS文件。

如发现错误请联系我,谢谢你。
本文链接:http://ninefire.tk/HTML&CSS.basics/10.html