css样式引用的几种方法、优先级关系及权重计算

1.引用方式

1.内联式（行内样式）

将标记的style属性值直接赋值为所定义的样式规则

<p style = "color:red;background:#000000;">这是一个段落</p>

2.嵌入式

利用<style></style>标签将样式表嵌入到html文件的头部

p{
    color:red;
    background:#000000;
}

3.链接式

在需要使用该样式表的html文档的头部利用<link>链接到这个CSS样式文件即可

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

4.导入式

这种方式首先需要定义一个或者多个外部样式表文件，然后在html文件头部的<style></style>标签之间，利用CSS的@import声明引入外部样式表。或者在CSS文件中再导入CSS，但是这会给服务器带来很大的压力，最好不要这样做。

<style>
    @import URL("style.css");
</style>

/*某个CSS文件*/
@import "另一个CSS文件的地址";
.test{
     width: 100px;
     height: 100px;
}

2.引用方式的区别

1. @import是由CSS提供的一种导入样式的方式，当页面被加载时，@import会等到页面全部被加载完成时再加载CSS样式，所以在页面还未加载完成期间，页面还没有CSS样式效果，会导致“屏闪”，通过@import导入的CSS样式是无法用DOM去控制的。
2. link属于XHTML标签，而@import是css提供的；
   页面被加载时，link会同时被加载，而@import引用的css会等到页面被加载完再加载；
   @import只在IE5以上才能识别，而link是XHTML标签，无兼容问题；
   link方式的样式的权重高于@import的权重。

3.样式的优先级

1. 在属性后面使用!important会覆盖页面内任何位置定义的元素样式。
2. 作为style属性写在元素内的样式
3. id选择器
4. 类选择器 = 伪类选择器=属性选择器 （后面的覆盖前面的）
5. 标签选择器
6. 通配符选择器
7. 浏览器自定义的样式

4.权重计算

按照选择器的性质，对应位相加就可计算其权重值

• 行内样式：权重为(1 , 0 , 0 , 0)
• id选择器：权重为(0 , 1 , 0 , 0)
• 类选择器=伪类选择器=属性选择器：权重为(0 , 0 , 1 , 0)
• 元素选择器：权重为(0 , 0 , 0 , 1)
• 通配符选择器：权重为(0 , 0 , 0 , 0)