- 内联样式
<p style="color:red;font-size:40px;"></p>
将css样式直接编写到元素的style属性当中。
只对当前元素中的内容起作用,不方便复用。
属于结构与表现耦合,不方便后期维护,不推荐使用。
- 内部样式表
<style type="text/css">
p{
color:red;
font-size:40px;
}
</style>
将css样式编写到head中的style标签里,然后通过css选择器选中指定元素,可以同时为这些元素一起设置样式,这样可以使样式进一步的复用。
进一步使结构和表现分离,推荐使用。
- 外部样式表
<link rel="stylesheet" type="text/css" href="style.css" />
将样式表编写到外部的css文件中,然后通过link标签来将外部的css文件引入到当前页面中。
完全使结构和表现分离,可以使样式表在不同的页面中使用,最大限度地使样式表可以复用,将样式统一写在样式表中,然后通过link标签引入,可以利用浏览器的缓存加快用户访问速度提高了用户体验,所以最推荐使用。
注意:style里的注释用/* */。