## CSS三大特性

## CSS三大特性

# 继承性(inherit)

# 层叠性

# 优先级

# important

# div标签/span标签

# 块级元素/行内元素/行内块级元素

# CSS元素显示模式转换

CSS全称 Cascading StyleSheet层叠性样式表

什么是继承性?

-作用:  给父元素设置一些属性,子元素也可以使用,这个我们就称之为继承性

-注意点:

1.并不是所有的属性都可以继承,只有以 color/font-/text-/line 开头的属性才可以继承

2.在CSS的继承中不仅仅是儿子可以继承,只要是后代都可以继承

3.CSS继承性中的特殊性

3.1 a标签的文字颜色和下划线是不能继承的

3.2 h标签的文字大小是不能继承的

-应用场景:

一般用于设置网页上的共性信息,例如网页的文字颜色,字体,文字大小等内容

body{}

什么是层叠性?

-作用: 层叠性就是CSS处理冲突的一种能力

注意点:层叠性只有在多个选择器选中”同一个标签”,然后又设置了””相同的属性,才会发生层叠性

什么是优先级?

作用:当多个选择器同种同一个标签,并且给同一个标签设置相同的属性时,如何层叠就由优先级来确定

优先级判断的三种方式:

1.间接选中就是指继承

如果是间接选中就看谁离得近听谁的

2.相同选择器(直接选中)

如果都是直接选中,并且都是同类型的选择器,那么就是谁写在后面听谁的

3.不同选择器(直接选中)

如果都是直接选中,并且不是相同类型的选择器,那么就会按照选择器的优先级来层叠

id>类>标签>通配符>继承>浏览器默认

什么是important?

作用: 用于提升某个直接选中标签的选择器中的某个属性的优先级的,可以将被指定的属性的优先级提升为最高

格式: 属性名称:属性 !important;

注意点:

1.important只能用于直接选中,不能用于间接选中

2.通配符选择器选中的标签也是直接选中

3.!important只能提升被指定的属性的优先级,其他属性的优先级不会被提升

4.important必须放在分号前面,而且!不能省略

1.什么是优先级的权重?

作用: 当多个选择器混合在一起使用时,我们可以通过计算权重来判断谁的优先级最高

2.权重的计算规则

2.1 首先计算选择器中有多少个id,id多的优先级最高

2.2 如果id的个数一样,再看类名的个数,类名个数多的优先级最高

2.3 如果id,类名的个数都一样,那么看标签名称的个数,标签名称个数多的优先级最高

2.4 如果id,类名,标签名称的个数都一样,那么就不会继续往下计算,那么此时谁写在后面听谁的

注意点:

只有选择器是直接选中标签的才需要计算权重,否则听直接选中的

1.什么是div标签?

作用:  一般用于配合CSS完成网页的基本布局

2.什么是span标签?

作用: 一般用于配合CSS修改网页中的一些局部信息

3.div跟span有什么区别?

3.1.div会单独的占领一行,span不会独占一行

3.2.div是一个容器级的标签,而span是一个文本级的标签

4.容器级的标签和文本级的标签的区别?

容器级的标签中可以嵌套其他所有的标签

文本级的标签中只能嵌套文字/超链接/图片

容器级的标签

div h ul ol dl li dt dd …

文本级的标签

span p b u i s strong em ins del …

注意点:

哪些标签是文本级的,哪些标签是容器级的,我们不用刻意去记忆,在企业开发中一般要嵌套都是嵌套在div中,或者按照组标签来嵌套

CSS元素显示模式

在HTML中HTML将所有的标签分为两类,分别是容器级和文本级

而CSS中CSS也将所有的标签分为两类,分别是块级元素和行内元素

1.什么是块级元素,什么是行内元素?

块级元素会独占一行

行内元素不会独占一行

块级元素(容器级的标签和p)

div h ul ol dl li dt dd p …

行内元素(文本级的标签除了p以外..)

span b u i s strong em ins del …

2.块级元素和行内元素的区别

2.1块级元素

独占一行

如果没有设置宽度高度,那么默认跟父元素一样宽

如果设置了宽高,那么就按照设置的来

2.2 行内元素

不会独占一行

如果没有设置宽度,那么默认和内容一样宽

行内元素是不可以设置宽高的

2.3

行内块级元素

为了能够让元素既不独占一行,又能够设置宽高,那么就出现了行内块级元素

img

如何转换CSS元素的显示模式?

设置元素的display属性

disblock取值

display:

inline 行内

block 块级

inline-block 行内块级

快捷键:

di display: inline

db display: block

dib display: inline-block