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，但是这会给服务器带来很⼤的压⼒，最好不要这样做。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)

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。