层叠样式表[用于html的样式]
外联,在HTML的标签中用link 的方式连接。
内联,通过stlyle的方式进行连接。
嵌入,在开始标记用slyle属性来书写一个样式表可以被多个html复用。
属性
width[元素的高度]
height[元素的宽度]
color[元素内容的颜色]
background[元素背景的颜色]
font-size[元素内容的文字大小]
font-weight[元素内容的文字粗细]
text-align[元素内容的排列方式]
border[元素边框样式
选择器
元素选择器
p{
....
}
类选择器[用句号表示]
.h1{
.....
}
id选择器[用#号表示; 每个元素都拥有但是具有唯一性]
#h1{
.....
}
通配选择器[用*号表示 作用于所有元素]
*{
.......
}
子集选择器[用大于符号表示 只作用于子集的后代元素]
ol>ul{
......
}
后代选择器[用空格表示]
ol+[空格]ul{
.....
}
伪类选择器[用冒号表示 括号类是几就书写几]
h1:nth-child(n){
......
}
属性选择器[用方括号表示]
[href="#"]{
......
}
层叠
1 所有样式表从一个样式表顶部层叠到底部从而让不同的样式被添加或者覆盖。
2 层叠是一种机制用于解决CSS冲突声明 [属性相同值不同]。
3 一个声明的优先级与他的重要性有关。若属性值后加!importunt表示重要声明权重值最高。
4 当权重值相同时则比较原次序。
5 每个选择器都有权重值,组合选择器权重则为权重值和。
权重值表格
a | b | c | d | |
---|---|---|---|---|
嵌入 | id | class | 元素 | |
idstyle | 1 | 0 | 0 | 0 |
cid | 0 | 1 | 0 | 0 |
class属性类 | 0 | 0 | 1 | 0 |
元素 伪元素 | 0 | 0 | 0 | 1 |
通配符 | ||||
!importunt | 最高 |