css：样式表

一、分类

1.  内部样式表

• 最好放在header标签内部，格式：<style type="text/css">css语句</style>

2. 外部样式表（同一个css样式表可以给多个html文件引用）

•  link标签引入css文件：<link rel="stylesheet" type="text/css" href="css/style.css">

        ① rel="stylesheet" ：关联样式表；

        ② type="text/css"  ：定义文档类型，这个属性可以省略，但是不能写错；

        ③ href="" ：路径；

• import引入css：<style type="text/css">  @import url(style.css); </style>

        ① 需要一个style标签包裹；

        ② @import属性 url路径；

3. 内联样式表(行内样式表)

• style属性：<div style="color:red;font-size:14px;">样式</div>

二、区别

link与import导入外部样式的区别：

1. 本质：link属于XHTML标签，而import则是css提供的一种方式；

2. 加载顺序：页面被加载时，link会被同时加载；import会等到页面完全被下载后才加载css数据；

3. 兼容：import只有IE5以上识别，CSS2.1提出，老浏览器不兼容；但是link没有兼容问题；

4. js控制dom：link导入的css才能被控制，但是import不可以；

三、优先级

1. 内联样式表的优先级最高；

2. 内部样式表和外部样式表的优先级和书写顺序有关，后面的会把前面的给覆盖掉；

3. 优先级覆盖掉的是相同的属性，其他属性正常显示；

四、使用情况

1. 内部样式表：适应用于代码量较少的情况下；

2. 外部样式表：适用于工作中写大量代码的时候；

3. 内联样式表：偶尔使用；