zoukankan      html  css  js  c++  java
  • CSS 继承

    1、说明解释   -  TOP

    这里DIV CSS 继承是指我们设置上级(父级)的CSS样式,上级(父级)及以下的子级(下级)都具有此属性。
    一般只有文字文本具有继承特性,如文字大小、文字加粗、文字颜色、字体等。

    2、实例:   -  TOP

    1. <!DOCTYPE html
    2. <head
    3. <meta http-equiv="Content-Type" 
    4.  content="text/html; charset=utf-8" /> 
    5. <title>CSS 继承特性 - www.divcss5.com</title
    6. <style type="text/css"
    7. .yangshi{400px; color:#F00;} 
    8. .ziji{ float:left; 300px;} 
    9. </style
    10. </head
    11. <body
    12. <div class="yangshi"
    13. <div class="ziji">我是子级,我上级是yangshi</div
    14. </div
    15. </body
    16. </html

    DIV+CSS继承实例图
    说明:我设置上级(父级:yangshi)的文字颜色为红色,而子级(ziji)未设置文字颜色,但是文字具有继承特性,所以子级文字内容依然是红色。

    假如设置父级文字样式后,其多个子级中,可能有些子级颜色不想与父级相同,这个时候只需对对应子级设置需要颜色即可。
    演示如下:

    1. <!DOCTYPE html
    2. <head
    3. <meta http-equiv="Content-Type"
       content="text/html; charset=utf-8" /> 
    4. <title>DIV CSS继承特性 - www.divcss5.com</title
    5. <style type="text/css"
    6. .yangshi{400px; color:#F00;} 
    7. .ziji{300px;} 
    8. .ziji2{ 300px; color:#000;} 
    9. </style
    10. </head
    11. <body
    12. <div class="yangshi"
    13. <div class="ziji">我是子级,我上级是yangshi</div
    14. <div class="ziji2">我是子级2,我设置文字颜色为黑色</div
    15. </div
    16. </body
    17. </html

    CSS教程实例之CSS 继承演示图
    说明:yangshi下有ziji与ziji2两个子级,其中ziji继承了父级(上级的红色样式),而ziji2我们需要的是黑色,所以单独对ziji2设置文字为黑色的样式。

    3、继承好处   -  TOP

    可以只设置上级的CSS样式表属性,子级(下级)不用设置,都有此CSS属性,可以减少CSS代码,便于维护。

    4、常见继承CSS属性   -  TOP

    1、字体font-family
    2、文字大小css font-size
    3、文本粗细font-weight
    4、文字颜色css color
    通常只有文字CSS font具有继承特性,所以大家好好利用与认识。

    来自:http://www.divcss5.com/rumen/r132.shtml

  • 相关阅读:
    4. Qt的容器类
    hdu 4507 数位dp(求和,求平方和)
    MVC3和MVC4中CRUD操作
    SSL 中证书能否够使用IP而不是域名
    TinyXml快速入门(一)
    C++ TinyXml操作(含源码下载)
    Tinyxml 操作XML
    msxml 操作xml
    MFC中全局变量的定义及使用
    VC++中操作XMLWin32实例
  • 原文地址:https://www.cnblogs.com/hr2014/p/3865108.html
Copyright © 2011-2022 走看看