初识CSS-CSS的三大特性

层叠性、继承性、优先级。

层叠性

样式冲突:是指同一个元素拥有两个不同属性值的相同样式。

层叠性的作用:解决样式冲突。

使一个样式覆盖(层叠)另一个样式,使元素只选择一种样式进行显示。

层叠性原则:样式冲突,遵循就近原则,哪个样式离结构近,就执行那个样式。



    
        CSS的三大特性之一:层叠性。
    

运行结果



    
        CSS的三大特性之一:层叠性。
    

运行结果



    
        CSS的三大特性之一:层叠性。
    

运行结果

继承性

子标签会继承父标签的某些样式,如文本属性、字体属性、颜色属性、字体行高等。

也就是说某些样式在父标签中添加后就不需要在子标签中再次添加该样式,可以减少代码冗余。



    
        CSS的继承性。
        

CSS的继承性。


运行结果

优先级

同一个元素指定多个选择器,就会产生优先级,优先显示权重高的样式。

权重等级顺序:

继承 或者 *(全局选择器):0,0,0,0 < 元素选择器:0,0,0,1 < 类选择器或伪类选择器:0,0,1,0 < ID选择器 :0,1,0,0 < 行内样式:1,0,0,0 < 在属性值后加:“!Important”:无穷大。

注意事项:



    
        CSS的三大特性之优先级:继承或全局选择器*(0,0,0,0)。
CSS的三大特性之优先级:元素选择(0,0,0,1)。
CSS的三大特性之优先级:类选择器或伪类选择器(0,0,1,0)。
CSS的三大特性之优先级:ID选择器(0,1,0,0)。
CSS的三大特性之优先级:行内样式(1,0,0,0)。
CSS的三大特性之优先级:!important(无穷大)。

运行结果



    
        CSS的三大特性之优先级:继承或全局选择器*(0,0,0,0)。
CSS的三大特性之优先级:元素选择(0,0,0,1)。
CSS的三大特性之优先级:类选择器或伪类选择器(0,0,1,0)。
CSS的三大特性之优先级:ID选择器(0,1,0,0)。
CSS的三大特性之优先级:行内样式(1,0,0,0)。
CSS的三大特性之优先级:!important(无穷大)。

无穷大运行结果显示

今天就学到这吧,下次继续,不能再说明天了,还不知道明天能不能及时学习。加油!

展开阅读全文

页面更新:2024-05-11

标签:特性   无穷大   优先级   权重   全局   样式   属性   元素   冲突   标签

1 2 3 4 5

上滑加载更多 ↓
推荐阅读:
友情链接:
更多:

本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828  

© CopyRight 2008-2024 All Rights Reserved. Powered By bs178.com 闽ICP备11008920号-3
闽公网安备35020302034844号

Top