一、CSS工作原理
1、层叠
浏览器默认样式表
用户样式表
作者链接样式表
作者嵌入样式表
作者行内样式表
2、计算方法
(1) 找到应用给每个元素和属性的所有声明
(2) 按照顺序和权重排序:增加权重的方法——空格+!important
(3) 按照特制度排序:
特制度计算ID—类—元素名
二、CSS规则
P{color:red;}
(1) 多个声明之间使用分号隔开
(2) 多个选择符之间使用逗号隔开
(3) 组合的选择符之间使用空格隔开
三、CSS选择符
1、上下文选择符
(1) 指定祖先
标签1 标签2{声明}
特殊的上下文选择符:子选择符——标签1>标签2
(2) 同胞选择符
紧邻的同胞选择符+:标签1+标签2
一般通报选择符~:标签1~标签2
(3) 通配选择符
*:选择所有
p * a:选择p下除去子元素的a标签
P *:选择P下的所有元素
2、ID和类选择符
类
(1) 类选择符:.类名
(2) 标签带类选择符: p.specialtext(选取带有该类的段落)
(3) 再添加选择符:p.specialtext span(带有该类的段落下的span)
(4) 多类选择符:.specialtext .featured
ID
(1) ID属性:#ID
(2) 用于页面导航的ID
<a href="#bio">
表示该链接的目标在当前页面中;
如果没有#,该链接将会加载bio目录下的默认页面;
如果只有#,该链接将会返回至页面顶部。
3、属性选择符
(1) 标签名[属性名]
img[title]
(2) 标签名[属性名=“属性值”]
img[title=”redflower”]
4、伪类
(1) UI伪类
a. 链接伪类 link visited hover active
b. focus
c. taget
(2) 结构化伪类
first-child last-child nth-child(3). 一类元素的哪一个元素
5、伪元素
css3中伪元素使用::来表示,伪类使用:来表示
first-letter first-line before after. 一个元素的某一个部分
四、样式继承
字体和文本的样式可以继承,宽度和边距等元素不能继承。
五、声明的规则
1、文本值
2、数字值
(1) 绝对值 px
(2) 相对值 Ex Em(Em相对于字母M的宽度 Ex相对于字母X的高度)
3、颜色值
(1) 颜色名
(2) 16进制颜色:#开头,两两同时可以简写。
(3) rgb(0,255,0)或百分比的形式
(4) HSL(0,0%,0%)
(5) Alpha通道:1完全不透明 0完全透明
css3中的rgba
R:红色值。正整数 | 百分数
G:绿色值。正整数 | 百分数
B:蓝色值。正整数| 百分数
A:透明度。取值0~1之间