网页设计培训-高端面授网页设计培训机构
云和教育:云和数据集团高端IT职业教育品牌 全国咨询热线:0371-67988003
课程 请选择课程
    校区 请选择校区
      • 华为
        授权培训中心
      • 腾讯云
        一级认证培训中心
      • 百度营销大学
        豫陕深授权运营中心
      • Oracle甲骨文
        OAEP中心
      • Microsoft Azure
        微软云合作伙伴
      • Unity公司
        战略合作伙伴
      • 普华基础软件
        战略合作伙伴
      • 新开普(股票代码300248)
        旗下丹诚开普投资
      • 中国互联网百强企业锐之旗
        旗下锐旗资本投资

      CSS层叠性和继承性的概念有什么不同?

      • 发布时间:
        2022-09-26
      • 版权所有:
        云和教育
      • 分享:

      CSS是层叠式样式表的简称,层叠性和继承性是其基本特征。对于网页设计师来说,应深刻理解和灵活运用这两个概念。

      1.层叠性

      层叠性是指多种CSS样式的叠加。例如,当使用内嵌式CSS样式表定义<p>标记字号大小为12m,外链式定义<p>标记颜色为红色,那么段落文本将显示为12p既这两种样式产生了叠加。

      2.继承性

      继承性是指书写CSS样式表时,子标记会继承父标记的某些样式,如文本颜色和字号。例如,定义主体标记body的文本颜色为黑色,那么页面中所有的文本都将显示为黑色,这是因为其他标记都嵌套在<body>标记中,是<body>标记的子标记。

      继承非常有用,可以不必在标记的每个后代上添加相同的样式。如果设置的属性是一个可继承的属性,只需将它应用于父标记即可,例如下面的代码:

      p, div, hl, h2, h3, h4, ul, ol, dl, li(color: black;}

      就可以写成:

      body( color:black;}

      第二种写法可以达到相同的控制效果,且代码更简洁(第一种写法中有一些陌生的标记,了解即可)。

      恰当地使用继承可以简化代码,降低CSS样式的复杂性。但是,如果在网页中所有的标记都大量继承样式,那么判断样式的来源就会很困难,所以对于字体、文本属性等网页中通用的样式可以选用继承。例如,字体、字号、颜色等可以在body标记中统一设置,然后通过继承影响文档中所有文本。

      需要注意的是,并不是所有的CSS属性都可以继承,例如,下面的属性就不具有继承性。

      边框属性, 如border、border-top、border-right、border-bottom等。外边距属性,如margin、margin-top、margin-bottom、margin-left等。

      内边距属性,如padding、padding-top、padding-right、padding-bottom等。

      背景属性,如background、background-image、background-repeat等。

      定位属性,如position、top、right、bottom、left、z-index等。

      布局属性, 如clear、float、clip、display、overflow等。

      元素宽高属性,如width、height。

      注意:当为body标记设置字号属性时,标题文本不会采用这个样式,可能会认为标题没有继承文本字号,这种认识是错误的。标题文本之所以不采用body标记设置的字号,是因为标题标记h1~h6有默认字号样式,这时默认字号覆盖了继承的字号。