css的一些基础属性
一、常见的css属性
- color（属性），示例：“color：red”，描述：设置元素内容的颜色
- text-align（属性），示例：“text-align：center”，描述：设置内容的对齐方式
- font-size（属性），示例：“font-size：28px”，描述：设置元素内容的文字大小
- font-weight（属性），示例：“font-weight：bold”，描述：设置元素内容的文字大小
- Background（属性），示例：“background：red”，描述：设置元素的背景颜色
二、Css选择器
- Css选择器，决定了将规则应用到哪些元素上
- 三种基本选择器：元素选择器、类选择器、ID选择器，除此之外，css还有大量的选择器
- 通配符选择器、属性选择器、伪类选择器、伪元素选择器
三、声明冲突
行内样式表>作者样式表>浏览器默认样式表>用户样式表
四、层叠概述
- 什么是层叠概述
- 层叠是一种机制，用于解决css声明冲突，多个相同的css声明（属性），应用于同一个元素上。
- 层叠的整个过程，是浏览器根据规则自的动完成
- 学习层叠就是学习层叠过程中的规则
- 学习层叠的目的，是为了在开发时更好的掌控元素的样式
- 层叠的过程
- 比较优先级：优先级低的声明会被淘汰，优先级高的声明胜出
- 比较特殊性：特殊性低的声明会被淘汰，特殊性高的声明胜出
- 比较源次序：源次序靠前的声明会被淘汰，靠后的声明胜出
- 经过1.2.3的这三个步骤，仅会有一个声明胜出，其他的全部淘汰
- 每一个声明都有一个优先级
- 每当冲突发生时，优先级高的会保留，优先级低的会被淘汰
- 一个声明的优先级，与它的来源和重要性有关
- 来源：作者样式表、浏览器默认样式表、用户样式表
- 重要性：若属性值后跟上！Important，则表示一条重要声明，否则，表示普通声明
- 优先级从低到高：浏览器默认样式表中的声明＜用户样式表中的普通声明＜作者样式表中的普通声明＜作者样式表中的重要声明＜用户样式表中的重要声明
- 我们书写只需比较：浏览器默认样式表中的声明，作者样式表中的普通声明，作者样式表中的重要声明
五、层叠过程——比较优先级
六、层叠过程——比较特殊性
1 . 每一个声明都有一个特殊性(Specificity)
2 . 当发生冲突时，特殊性高的会保留，特殊性低的会被淘汰
3 . 一个声明的特殊性，取决于规则适用范围的大小
4 . 规则适用范围越大，特殊性越低，适用范围越小，特殊性越高
5 . 行内样式>id选择器>类选择器>元素选择器>通配符选择器
6 . 在比较特殊性时，每一个冲突的声明，会生成4个数字(a,b,c,d)，以比较特殊性a越大，特殊性越高，若a相同，比较b，b越大，特殊性越高，依次类推...
a: 若声明是行内样式，则为1，否则为0
b: 规则中ID选择器的个数
c: 规则中类选择器、伪类选择器和属性选择器的个数
d: 规则中元素选择器、伪元素选择器的个数
7 . 当计算选择器分组的时候，要分开计算
七、层叠过程——比较源次序
- 最后出现的声明胜出，其他的全部淘汰
- 该规则的实际应用：css reset代码前置，a元素的伪类书写顺序
- a元素的伪类书写顺序
- ：hover鼠标悬停到元素上的样式，适用于其他元素
- ：link链接未被访问过的样式
- ：vlsited链接已被访问过的样式
- 为了保护用户隐私，一些声明在该伪类中是无效的
- 什么是继承
八、继承
1．继承(inherit)，是指子元素会自动拥有父元素的某些CSS属性
2．继承是自动发生的，开发者不需要书写任何额外的代码
3．可被继承的属性：color，font-size，font-weight，text-align
4．不可被继承的属性：background-color
5．有些属性在页面的某个区域中具有通用性
6．若没有继承，则必须为该区域的每个元素指定样式，导致代码重复臃肿
- 继承发生的场景
- 强制继承
- 强制继承，也叫做显式继承，是指将CSS属性值设置为inherit
- 这样做，通常有两个原因：
- 为了继承有些不可继承的属性
- 为了继承已被声明过的属性
一个元素的某个CSS属性，只有满足下面两个条件，才会继承父元素，该属性是可继承的属性，该属性在样式表中没有声明
九、表格
表格（table）、表格标题（caption）、行（tr）、列（td）
表头字体（th）、表头（thead）、表体（tbody）、表尾（tfoot）
