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
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。