2.CSS特性-CSS进阶

时间:2022-07-26
本文章向大家介绍2.CSS特性-CSS进阶,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

二、CSS特性

CSS具有两大特性:

  • 继承性
  • 层叠性

1.继承性

CSS的继承性,指的是子元素继承父元素的某些样式属性,例如:在父元素定义字体颜色(color属性),子元素会继承父元素的字体颜色。

不是所有属性都具有继承性

不过,并不是所有属性都具有继承性,如:padding、margin、border等就不具备继承性,况且要是这些属性也可以继承,那对于网页来说是一场噩梦。

(1)具有继承性的属性

W3C规定,只有那些能让我们轻松书写的属性才可以继承。 在CSS中,具有继承性的属性有 3 大类:

  • 文本相关属性
  • 列表相关属性
  • 颜色相关属性
① 文本相关属性
  • font-family
  • font-size
  • font-style
  • font-weight
  • font
  • line-height
  • text-align
  • text-indent
  • word-spacing
② 列表相关属性
  • list-style-image
  • list-style-position
  • list-style-type
  • list-style
③ 颜色相关属性
  • color

(2)示例

① 例1
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">      <!--必须放在title标签及其它meta标签前-->
        <style type="text/css">
            html{
                font-size: 62.5%;   /*使得浏览器默认字体大小变为 10px */
            }       
            #daddy{     
                color:mediumpurple;
                font-weight: bold;
            }           
            
        </style>
    </head>
    <body>
        <div id="daddy">
            一蓑烟雨任平生。
            <div id="girl">一蓑烟雨任平生。</div>
        </div>
    </body>
</html>

CSS继承性示例1.png

② 例2
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">      <!--必须放在title标签及其它meta标签前-->
        <style type="text/css">
            html{
                font-size: 62.5%;   /*使得浏览器默认字体大小变为 10px */
            }       
            #daddy{     
                color:#66A9FE;
                font-weight: bold;
            }           
            
        </style>
    </head>
    <body>
        <div id="daddy">
            一蓑烟雨任平生。
            <a href="http://www.baidu.com">一蓑烟雨任平生。</a>
        </div>
    </body>
</html>

CSS继承性示例2.png

Ⅰ.a标签的继承

按照例1 体现的CSS继承性,例 2 的子元素也应该是蓝色,但是子元素(a元素)却显示深紫色。 这是因为a标签本身有默认的颜色样式,优先级比继承的要高,如果想要改变a标签的颜色,必须选中a标签进行操作才行。 对于a标签这个特点,在实际开发中会经常遇到

(3)实际开发

利用CSS继承性,有时我们可以少写很多代码,就像上面例子中,只需在父元素中定义属性,就不需要在子元素中重复定义。 在实际开发中,应充分利用CSS的继承性,从而减少重复代码的编写,这样也可使得CSS代码更精简优雅。

2.层叠性

在网页中,对于同一个元素,我们重复定义了多个相同的属性时,CSS将会怎样处理?

(1)“后来者居上”原则

CSS的层叠性,指的是样式的覆盖对于同一个元素来说,若我们重复定义多个相同的属性,并且这些样式具有相同的权重,CSS会以最后定义的属性的值为准,这就是“后来者居上”原则。

① 必须符合的3条件

“后来者居上”原则必须符合 3 个条件:

  • 元素相同
  • 属性相同
  • 权重相同

权重:指的是选择器的权重。

(2)示例

① 例1
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">      <!--必须放在title标签及其它meta标签前-->
        <style type="text/css">
    
            div{
                color:#00FFFF;
            }   
            div{
                color:blue;
            }           
            div{
                color:greenyellow;
            }               
        </style>
    </head>
    <body>
        <div>見贤思齊</div>
        <div>見贤思齊</div>
        <div>見贤思齊</div>
    </body>
</html>

<!--
    我们首先定义所有 div 颜色为#00FFFF,然后定义所有 div 颜色为blue,最后定义所有 div 颜色为greenyellow。
    因为CSS的层叠性,color:#00FFFF会被color:blue覆盖,color:blue会被color:greenyellow覆盖,所以最终颜色为greenyellow
-->

CSS层叠性示例1.png

② 例2
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">      <!--必须放在title标签及其它meta标签前-->
        <style type="text/css">
                
            div{
                color:greenyellow;
            }   
            #a{
                color:#00FFFF
            }           
        </style>
    </head>
    <body>
        <div>見贤思齊</div>
        <div id="a">見贤思齊</div>
        <div>見贤思齊</div>
    </body>
</html>

<!--
    这和例1不同,这就是因为“后来者居上”原则必须符合 3 个条件。
        - 元素相同
        - 属性相同
        - 权重相同
-->

CSS层叠性示例2.png