## 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
