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

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页