css属性继承问题

标签：css属性继承

概念：所谓CSS的继承是指被包在内部的标签将拥有外部标签的样式性质，它是依赖于祖先-后代的关系的。继承特性最典型的应用通常发挥在整个网页的样式预设，需要指定为其它样式的部份设定在个别元素里即可。

css规则告诉浏览器如何去渲染HTML页面上特定的元素，css规则由两大部分组成，选择器+声明块，如：body{color:red;}

color属性的继承
案例1：//body{color:red;}
 <p>>父级P<strong class="class_s" id="id_s">子级strong</strong>父级P</p>
 <ul>
        父级ul
         <li>子级li1</li>
         <li>子级li2</li>
        父级ul结束
     </ul>

html文档树的理解，请看图: 文档树.png

list-style属性的继承
案例2：ul{list-style:none} li{list-style:none}

优先级（权值越大优先级越高）来确定css规则继承指定的值：
1、声明的权值比继承过来的权值高；
案例4：ul{color：pink} li{color:lightblue}

2、多种样式混合应用时的优先级如下：
内联样式 > id选择器 > class选择器和伪类选择器 > 元素选择器和伪类元素选择器 > 通配符选择器 > 外联样式
案例5： strong{color:black}
 .class_s{color:wheat}
  #id_s{color:blue}

3、在文档中出现的顺序，越在后面出现的，优先级越高
案例5：  strong{color:black} strong{color: lawngreen}

4、人为定义CSS继承优先级（important规则）通过在一条规则的分号前插入！important这样一个短语来标记一条重要规则
 其优先级最高
案例6：strong{color:black !important}

并非所有的属性是继承的，例如boder,width,display等属性就不能继承
案例7： p{border:1px solid;width:200px}
 <p>父级P<strong>子级strong</strong>父级P</p>
<script>
     var p=document.getElementsByTagName("p")[0];
        var num=0;
        function bul(){
            if(num==0){
                p.style.display="none";
                num=1;
            }
            else{
                p.style.display="block";
                num=0;
            }

        }
    </script>
 

下面总结了一些关于样式表的属性是否继承：
1、字体（Font）
继承性——有：font、color、font-family、font-size、font-size-adjust、font-stretch 、font-style 、font-style 、text-underline-position 、font-variant 、 text-transform line-height、letter-spacing 、word-spacing               
     
继承性——无：text-decoration 、text-shadow

2、文本（Text）
继承性——有：text-indent 、text-align 、layout-flow 、writing-mode 、white-space 、word-wrap 、text-kashida-space 、layout-grid 、layout-grid-char 、layout-grid-char-spacing 、layout-grid-line 、layout-grid-mode 、layout-grid-type

继承性——无：text-overflow 、vertical-align 、direction、unicode-bidi 、word-break 、line-break 、text-autospace、text-justify 、ruby-align 、ruby-overhang 、ruby-position 、ime-mode 、

3、背景（Background）
继承性都为无：
background、background-origin 、background-clip 、background-size 、background-attachment 、background-color、background-image 、background-position 、background-positionX 、background-positionY 、background-repeat 、layer-background-color 、layer-background-image 

4、定位（Position）
继承性都为无：
position 、z-index 、top、right 、bottom 、left

5、尺寸（Dimensions）
继承性都为无：
height 、max-height 、min-height 、width、max-width 、min-width

6、布局（Layout）
继承性都为无：
clear 、float、clip 、overflow、overflow-x、overflow-y、display、visibility

7、外补丁（Margins）
继承性都为无：
margin 、margin-top 、margin-right 、margin-bottom 、margin-left

8、轮廓（Outlines）
继承性都为无：
outline、outline-color 、outline-style 、outline-style 、outline-width

9、边框（border）
继承性都为无：
border、border-color 、border-style 、border-image 、border-radius 、box-shadow、border-width 、border-top 、border-top-color 、border-top-style 、border-top-width 、border-right 、border-right-color 、border-right-style 、border-right-width 、border-bottom 、border-bottom-color 、border-bottom-style 、border-bottom-width 、border-left 、border-left-style 、border-left-width

10、内补丁（Padding）
继承性都为无：
padding 、padding-top 、padding-right 、padding-bottom 、padding-left

 
11、列表（Lists）
继承性——有：list-style 、list-style-image 、list-style-position 、list-style-type

继承性——无：marker-offset

12、表格（Tabble）
继承性都为有：
border-collapse 、border-spacing 、caption-side 、empty-cells 、table-layout 、speak-header

13、其他
继承性都为无：
cursor、zoom

css属性继承问题

标签：css属性继承

原文地址：http://blog.csdn.net/frost08ds/article/details/42529655