三种添加样式的方法
内联样式表
可以将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