CSS样式表

Posted 2021-07-24 栗栗本栗

内联样式

• 可以直接将样式写到标签内部的style属性中。
• 这种方式编写简单，定位准确。但是由于直接将CSS代码写到了html标签的内部，导致结构与表现耦合，同时导致样式不能够复用，所以这种方式不推荐使用。

<p style="color: red;font-size: 30px"></p>

内部样式表

• 可以直接将样式写到<style>标签中。这样使CSS独立于HTML代码，而且可以同时为多个元素设置样式，这是使用的比较多的一种方式。
• 缺点:样式只能在一个页面中使用，不能在多个页面中重复使用。

<style>
	p {
    color:red;
    font-size: 30px;
  }
</style>
<p>大家好</p>

外部样式表

将所有的样式保存到一个外部的CSS文件中，然后通过<link>标签将样式表引入到文件中。
这种方式将样式表放入到了页面的外部，可以在多个页面中引入，同时浏览器加载文件时可以使用缓存，这是我们开发中使用的最多的方式。

<link rel="stylesheet" type="text/css" href="style.css">