css基础学习(二)
样式的继承
样式的继承发生在祖先和后代元素之间。
将通用的样式统一设置到共同的祖先元素上。
注意:背景相关的,布局相关等这些样式都不会被继承
2 选择器的权重
当通过不同选择器选中相同元素,为相同的样式设置不同的值,此时就发生了样式的冲突。
选择器的权重
- 内联样式 1,0,0,0
- id选择器 0,1,0,0
- 类和伪类选择器 0,0,1,0
- 元素选择器 0,0,0,1
- 通配选择器 0,0,0,0
- 继承选择器 没有优先级
比较优先级
-
比较优先级时,需要将所有选择器进行相加计算,最后优先级越高,则越优先显示(分组选择器时单独计算的)
-
选择器累加不会超过最大数量级,类选择器不会超过id选择器
-
如果优先级计算后,则优先使用靠下的样式
-
可以在某一个样式后边加!important,则此时该样式获得最高的优先级
长度
像素
屏幕实际上由一个个像素构成(小方格)
同样200px在不同设备显示效果不一样,像素大小不一样。
百分比
可以设置属性相对于父元素属性百分比
设置百分比可以使子元素随着父元素改变而改变
em
是相对于元素的字体大小来计算
1em = 1 font-size
字体默认是16像素,10em = 160em
rem
rem相对于根元素的字体来计算
颜色单位
-
在css中直接使用颜色名来设置各种颜色,例如:red、orange、yellow、blue、green
-
RGB值,根据不同浓度来调配出不同的颜色,每一种颜色范围在0-255.(0% - 100%)语法:rgb(红色,绿色,蓝色)
-
RGBA值,a表示不透明度,1完全不透明,0表示完全透明
-
十六进制的RGB值,语法:#红色绿色蓝色,00-ff,例如#ff0000,可以简写#f00
-
HSL值 HSLA值,H 色相(0-360), S 饱和度(浓度0%-100%), L 亮度(浓度0%-100%)
文档流
网页是一个多层结构,一层叠着一层,通过css可以分别为每一层来设置样式,作为用户来讲只能看到最顶层,在这些层中,最底下的一层为文档流。
文档流是一个位置,所有创建元素都是在文档流中进行排列的
元素主要两个状态,在文档流中,不在文档流中(脱离文档流)
元素在文档流中的特点
- 块元素
- 在页面独占一行
- 默认宽度是父元素的全部(会把父元素撑满)
- 默认高度是被内容撑开
- 行内元素
- 行内元素不会独占一行,只占自身大小
- 行内元素在页面向右水平排列,如果一行不能容纳所有元素,则换行自左向右。
- 行内元素默认的宽度和高度都是被内容撑开