公输的前端学习记录day7（css）

五：css的引入方式

1。css的三种样式表

 按照css样式书写的位置（或者引入的方式），css样式表可以分为三大类：

 （1）行内样式表（行内式）

 （2）内部样式表（嵌入式）

 （3）外部样式表（链接式）

2。内部样式表

 是写到html页面内部，是将所有css代码抽取出来，单独放到一个＜style＞标签中。

注：＜style＞理论上可以放在HTML文档的任何地方，但一般会放在＜head＞中。

此种方式可以方便控制整个页面中的元素样式设置。代码结构清晰，但是并没有完全实现结构与样式相分离。

常称为嵌入式引入，是练习时常用的方式。

3。行内样式表

是在元素标签内部的style属性中设定css样式，适合修改简单的样式。

如：＜div style="color: red;font-size: 12px;"＞青春不常在＜/div＞

＜style＞其实就是标签的属性，在双引号中间写法要符合css规范，可控制当前标签样式，

缺：书写繁琐，并没用体现结构与样式相分离，不常用，只有对当前元素添加简单样式时可考虑使用。

4。外部样式表（实际开发都是这个）

适合样式比较多的情况。也称外链式或链接式引入。

核心：样式单独写到css文件中，之后把css文件引入到HTML页面中使用。

引入外部样式表分两步，：

1. 新建一个后缀名为.css的样式文件，把所有css代码都放入此文件中。
2. 在HTML页面中使用＜link＞标签引入这个文件。

＜link rel="stylesheet" href="css文件路径”＞

放在＜head＞中。

六：综合案例

＜hr＞水平线标签，不太常用，后边换掉。暂时代替。

代码：

 

 呈现效果图：