0906
CSS Diner - Where we feast on CSS Selectors! (flukeout.github.io)
样式的的继承,我们为一个元素设置的样式同时也会应用它的后代元素上
继承是发生在祖先后代之间的
继承的设计是为了方便我们的开发。
注意,并不是所有的样式都会被继承
样式的冲突
选择器的权重
比较优先级时,需要将所有的选择器的优先级进行相加计算,最后优先级越高,则越优先显示(分组选择器单独计算的)
选择器的累加不会超过其最大的数量级,如类选择器再高也不会超过id选择器
如果,优先级计算后相同,此时则优先使用靠下的样式
可以在某一个样式后边添加 !important ,则此时该样式的会获取到最高优先级,甚至会超过内联样式。but,注意:在开发中这个玩意一定要慎用!能不不用则不用!
思考题: a元素的四个伪类,在全用的时候,有没有先后顺序要求??
不知对错 <sytle> a:visited{color:yellow;} a:active{color:orange} a:hover{color:pink;} a:link{color:red;} </sytle>
像素
屏幕(显示器)实际上由一个个的小点构成
不同屏幕的像素大小是不同的,像素越小的屏幕显示的效果越清晰
所以同样的200px在不同的设备显示的效果不一样
.box1{ width:200px; height:100px; background-color:aqua; }
百分比
.box2{ width:50%; height:50%; background-color:pink; }
.box3{ font-size:20px; width:10em; height:10em; }
rem
rem是相对于根元素的字体大小来计算
移动端的适配使用较多,后期遇到再说
<html> font-size:30; </html> .box3{ font-size:20px; width:10rem; height:10rem; } //这样的话box的大小是300px而不是200px
那么“方便的”颜色使用方式是怎样的呢?
background-color:rgb(255,0,0); //红色 background-color:rgb(0,255,0); //绿色
RGBA
就是在RGB的基础上增加了一个a 表示不透明度
四个值,前三个和rgb一样,第四个表示不透明度
1表示:完全不透明
0表示:完全透明
.5表示:半透明
background-color:rgba(0,255,0,.2);
十六进制的RGB值
background-color:#ff0000; //红色 background-color:#ffff00; //黄色 background-color:#bfa; //豆沙绿
用的不多