css的一些基础属性

Posted 2022-01-22 wwjljwx

 

一、常见的css属性

 

1. color（属性），示例：“color：red”，描述：设置元素内容的颜色
2. text-align（属性），示例：“text-align：center”，描述：设置内容的对齐方式
3. font-size（属性），示例：“font-size：28px”，描述：设置元素内容的文字大小
4. font-weight（属性），示例：“font-weight：bold”，描述：设置元素内容的文字大小
5. Background（属性），示例：“background：red”，描述：设置元素的背景颜色

二、Css选择器

1. Css选择器，决定了将规则应用到哪些元素上
2. 三种基本选择器：元素选择器、类选择器、ID选择器，除此之外，css还有大量的选择器
3. 通配符选择器、属性选择器、伪类选择器、伪元素选择器

三、声明冲突

行内样式表>作者样式表>浏览器默认样式表>用户样式表

四、层叠概述

1. 什么是层叠概述
2. 层叠是一种机制，用于解决css声明冲突，多个相同的css声明（属性），应用于同一个元素上。
3. 层叠的整个过程，是浏览器根据规则自的动完成
4. 学习层叠就是学习层叠过程中的规则
5. 学习层叠的目的，是为了在开发时更好的掌控元素的样式
6. 层叠的过程
7. 比较优先级：优先级低的声明会被淘汰，优先级高的声明胜出
8. 比较特殊性：特殊性低的声明会被淘汰，特殊性高的声明胜出
9. 比较源次序：源次序靠前的声明会被淘汰，靠后的声明胜出
10. 经过1.2.3的这三个步骤，仅会有一个声明胜出，其他的全部淘汰
11. 每一个声明都有一个优先级
12. 每当冲突发生时，优先级高的会保留，优先级低的会被淘汰
13. 一个声明的优先级，与它的来源和重要性有关
14. 来源：作者样式表、浏览器默认样式表、用户样式表
15. 重要性：若属性值后跟上！Important，则表示一条重要声明，否则，表示普通声明
16. 优先级从低到高：浏览器默认样式表中的声明＜用户样式表中的普通声明＜作者样式表中的普通声明＜作者样式表中的重要声明＜用户样式表中的重要声明
17. 我们书写只需比较：浏览器默认样式表中的声明，作者样式表中的普通声明，作者样式表中的重要声明

五、层叠过程——比较优先级

六、层叠过程——比较特殊性

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 . 当计算选择器分组的时候，要分开计算

七、层叠过程——比较源次序

1. 最后出现的声明胜出，其他的全部淘汰
2. 该规则的实际应用：css reset代码前置，a元素的伪类书写顺序
3. a元素的伪类书写顺序
4. ：hover鼠标悬停到元素上的样式，适用于其他元素
5. ：link链接未被访问过的样式
6. ：vlsited链接已被访问过的样式
7. 为了保护用户隐私，一些声明在该伪类中是无效的
8. 什么是继承

八、继承

1．继承(inherit)，是指子元素会自动拥有父元素的某些CSS属性

2．继承是自动发生的，开发者不需要书写任何额外的代码

3．可被继承的属性：color，font-size，font-weight，text-align

4．不可被继承的属性：background-color

5．有些属性在页面的某个区域中具有通用性

6．若没有继承，则必须为该区域的每个元素指定样式，导致代码重复臃肿

1. 继承发生的场景
2. 强制继承
3. 强制继承，也叫做显式继承，是指将CSS属性值设置为inherit
4. 这样做，通常有两个原因：
5. 为了继承有些不可继承的属性
6. 为了继承已被声明过的属性

一个元素的某个CSS属性，只有满足下面两个条件，才会继承父元素，该属性是可继承的属性，该属性在样式表中没有声明

九、表格

表格（table）、表格标题（caption）、行（tr）、列（td）

表头字体（th）、表头（thead）、表体（tbody）、表尾（tfoot）