CSS引入方式

CSS引入方式

CSS的三种样式表：

按照 CSS样式书写的位置（或引⼊的⽅式）， CSS样式表

可以分为三⼤类：⾏内样式表（⾏内式）、内部样式表（嵌⼊式）、外部样式表（链接式）

①内部样式表

是写到HTML⻚⾯内部，将所有的 CSS代码抽取出来，单独放到⼀个< style >标签中

▪ < style >标签理论上可以放在HTML⽂档的任何地⽅，但⼀般会放在⽂档的< head >标签中

▪ ⽅便控制整个⻚⾯的元素样式设置

▪ 代码结构清晰，但没实现结构与样式完全分离

②⾏内样式表（内联样式表）

在元素标签内部的style属性中设定 CSS样式，适合于修改简单样式，也被称为内嵌样式

<div style="color:red;font-size:12px;">.....
</div>

③外部样式表

实际开发都是外部样式表，适合于样式⽐较多的情况，被称为外链式或链接式引⼊

核⼼是：样式单独写到CSS⽂件中，之后把CSS⽂件引⼊到 HTML 中使⽤

步骤：

▪ 新建⼀个后缀名为. css的样式⽂件，把所有 CSS代码放⼊

▪ 在HTML⻚⾯中，使⽤**< link >**标签引⼊样式⽂件

<link rel="stylesheet" href="css文件路径"

Chrome调试⼯具

可以⽤来调试我们的 HTML结构和 CSS样式

①打开调试⼯具

打开chrome浏览器，按下F 12键或右击⻚⾯空⽩处→检查

②使⽤调试⼯具