好吧,我承认今天划水了,原本想今天把CSS有关知识全部过一遍,但是emmmmm,算了,先把今天所学的总结一下吧。
今天没有进行实地操作,一直在看相关知识点,接着昨天的选择器开始继续总结。
伪选择器:
1.伪类(Pseudo-class)
一个css伪类是以:开头,添加到选择器末尾的一个关键字,可以使样式在特定状态下呈现,比如鼠标悬停时文字变色等。
2.伪元素(Pseudo-element)
和伪类有点类似,但是是以::开头。
具体的每一个伪类和伪元素的作用可以在这里查询https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference#%E5%85%B3%E9%94%AE%E5%AD%97%E7%B4%A2%E5%BC%95
组合器和多重选择器,顾名思义就是讲多个选择器结合起来,规则如下:
然后就是CSS中的数值和单位,对于尺寸大小有px,em,rem,百分比等,对于颜色有关键字,十六进制,rgb,hsl等。
px就是像素值,16px代表文字大小为16个像素的大小,是绝对值,不会随着盒子的大小而改变,em是以父元素字体大小为比例,例如父元素字体大小为16px,若设置子元素字体大小为2em,实际字体大小为32px,rem和em类似,只不过是以根元素字体大小作参考。
颜色中有些关键字可以代替颜色,例如black就是黑色,red就是红色(color:black)。同时颜色也可以用十六进制表示,例如color:#707070。也可以用rgb值,color:rgb(255,255,0),我个人觉得这种表现方式更直观,另外还有一个rgba,a是代表透明度,范围是0-1。HSL的意思是表示色度,饱和度,亮度,色度的范围是0-360,饱和度和亮度的范围是0%到100%,同样也有HSLA,A代表透明度。HSL可以可视化为一个颜色柱,理解起来更直观。
圆柱体的柱面代表色度,半径代表饱和度,高代表亮度。
然后有一个重点就是,选择器之间的优先级,ID选择器大于类选择器,属性选择器,伪类大于元素选择器,伪元素。同层次之间,按照次序覆盖前面的属性。
对于各个组合选择器和多重选择器的优先级,有一种计算方式。
如若在属性值后添加! important,那么这个属性则会变得无比重要,不会被别的规则中的属性覆盖,除非有比当前选择器更高级的选择器的规则属性中又添加了此语句。
今天就这样吧,明天将要学习CSS排版,划水自重hhhhh。