w3c标准

w3c标准 - Css - （2）继承

1. 什么是css继承？

css样式的继承值得是，特定的css属性向下传递到子元素。

下面看一下css的例子：

.TestInheritDiv {color: red;}

<div class="TestInheritDiv">        <p>This is used to test the css.<em>The test is in child</em></p></div>

从上面的例子可以看到，我们仅仅定义了拥有class属性值为TestInheritDiv的div元素设置字体颜色为红色，但是其内部的p元素以及p元素的子元素em的字体均设置为红色。这就是继承。

2. 继承

Css有全局作用域和局部作用域，全局作用域就相当于我们为整个html文档定义的属性和浏览器自己默认的属性设置，就像下图中黄色框标注的部分，局局部作用域就像红色标注的地方。还有像类选择器，属性选择器，其实这些属性针对当前应用到的元素都是一个相对应的全局作用域，因为这个不是仅仅是对应某一个标签，而是对应到某一类标签，其实也可以理解成，这个属性的设置没有设置到具体的某一个元素上，例如一个class属性，那它就相当于是在html元素定义的属性，所有的匹配这个class的元素都会应用这个属性，当然不是所有的属性都会继承，后面会有介绍。

（1）继承属性总结：

背景属性      属性名  解释  继承性  是否属性值中拥有inherit    background  设置背景属性  No  Yes    background-color  规定要使用的背景颜色  No  Yes    background-position  规定背景图像的位置  No  Yes    background-size  规定背景图片的尺寸  No  Yes    background-origin  规定背景图片的定位区域  No  Yes    background-repeat  规定如何重复背景图像  No  Yes    background-clip  规定背景的绘制区域  No  Yes    background-attachment  规定背景是否固定或者随着页面的其余部分滚动  No  Yes    background-image  规定要使用的背景图像  No  Yes              文本属性      属性名  解释  继承性  是否属性值中拥有inherit    color  设置文本颜色  Yes  Yes    direction  规定文本的方向  Yes  Yes    line-height  设置行高  Yes  Yes    letter-spacing  设置字符间距  Yes  Yes    text-align  对齐元素中的文本  Yes  Yes    text-decoration  向文本中添加修饰  No  Yes    text-indent  缩进元素中文本的的首行  Yes  Yes    text-shadow  设置文本阴影  Yes  Yes    text-transform  控制元素中的字母  Yes  Yes    white-space  设置元素中空白的处理方式  Yes  Yes    word-spacing  设置字间距  Yes  Yes        字体属性      属性名  解释  继承性  是否属性值中拥有inherit    font  简写属性  Yes  No    font-family  设置字体系列  Yes  Yes    font-size  设置字体的尺寸  Yes  Yes    font-style  设置字体风格  Yes  Yes    font-variant  以小型大写字体或者正常字体显示文本  Yes  Yes    font-weight  设置字体的粗细  Yes  Yes        列表属性      属性名  解释  继承性  是否属性值中拥有inherit    list-style  简写属性，用于把所有用于列表的属性设置在一个声明中  Yes  Yes    list-style-image  将图片设置为列表项标志  Yes  Yes    list-style-position  设置列表项中列表项标志的位置  Yes  Yes    list-style-type  设置列表项标志的类型  Yes  Yes       表格属性      属性名  解释  继承性  是否属性值中拥有inherit    border-collapse  设置是否把表格单元合并为单一的边框  Yes  Yes    border-spacing  设置分隔单元格边框的距离  Yes  Yes    caption-side  设置表格标题的位置  Yes  Yes    empty-cells  设置是否显示表格中的空单元格  Yes  Yes    table-layout  设置显示单元、行和列的算法  Yes  Yes        轮廓属性      属性名  解释  继承性  是否属性值中拥有inherit    outline  在一个声明中设置所有的轮廓属性  No  Yes    outline-color  设置轮廓的颜色  No  Yes    outline-style  设置轮廓的样式  No  Yes    outline-width  设置轮廓的宽度  No  Yes        盒子属性      属性名  解释  继承性  是否属性值中拥有inherit    padding  简写属性，作用是在一个声明中设置元素的所在内边距属性  No  Yes    padding-bottom  设置元素的下内边距  No  Yes    padding-left  设置元素的左内边距  No  Yes    padding-right  设置元素的右内边距  No  Yes    padding-top  设置元素的上内边距  No  Yes    border  简写属性，用于把对四个边的属性设置在一个声明中。  No  Yes    border-style  用于设置元素所有边框的样式，或者单独的为各边设置边宽样式  No  Yes    border-width  简写属性，用于元素的所有边框设置宽度，或者单独的为各边边框设置宽度  No  Yes    border-color  简写属性，设置元素的所有边框中可见部分的颜色，或者为4个边分别设置颜色  No  Yes    margin  简写属性，在一个声明中设置所有外边距属性  No  Yes    margin-bottom  设置元素的下外边距  No  Yes    margin-left  设置元素的左外边距  No  Yes    margin-right  设置元素的右外边距  No  Yes    margin-top  设置元素的上外边距  No  Yes        定位属性      属性名  解释  继承性  是否属性值中拥有inherit    position  把元素放置到一个静态的、相对的、绝对的、或固定的位置中。  No  Yes    top  定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。  No  Yes    right  定义了定位元素右外边距边界与其包含块右边界之间的偏移。  No  Yes    bottom  定义了定位元素下外边距边界与其包含块下边
界之间的偏移。  No  Yes    left  定义了定位元素左外边距边界与其包含块左边
界之间的偏移。  No  Yes    overflow  设置当元素的内容溢出其区域时发生的事情。  No  Yes    clip  设置元素的形状。元素被剪入这个形状之中，然后显示出来。  No  Yes    vertical-align  设置元素的垂直对齐方式。  No  Yes    z-index  设置元素的堆叠顺序。  No  Yes        尺寸属性      属性名  解释  继承性  是否属性值中拥有inherit    height  设置元素的高度  No  Yes    line-height  设置行高  Yes  Yes    max-height  设置元素的最大高度  No  Yes    max-width  设置元素的最带宽度  No  Yes    min-height  设置元素的最小高度  No  Yes    min-width  设置元素的最小宽度  No  Yes    width  设置元素的高度  No  Yes        分类属性      属性名  解释  继承性  是否属性值中拥有inherit    clear  设置一个元素的侧面是否允许其他浮动的元素  No  Yes    cursor  规定当指向某元素之上时显示的指针类型  Yes  No    display  设置是否及如何显示元素  No  Yes    float  定义元素在哪个方向浮动  No  Yes    position  把元素放置到一个静态的，相对的，绝对的，或者固定的位置  No  Yes    visibility  设置元素是否可见或不可见  Yes  Yes        

(2)下面的我会对着分类中的一些属性值进行举例

a. 首先是background属性：大家看一下下面的代码：

<div background-style="background-div"><div background-style="no-div"></div><p background-style="background-p">This the content in element p.</p></div>

[background-style="background-div"] {background: green;    /*visibility: hidden;*/}[background-style="no-div"] {width: 200px;height: 300px;/*background: inherit;    visibility: visible;*/}[background-style="background-p"] {/*background: inherit;    visibility: visible;*/}

        首先是将最外层的div设置属性，背景颜色是green，先看一下当前代码执行的结果，可以看到外层div的背景色是hreen，但是里层的div以及p标签没有自动继承外层的背景颜色，

        为了将更好的展示效果，我再给内层标签加上inherit属性的同时将外层的visibility设为hidden，然后将内层的visibility设置为visible，这样我们看到的效果就不会受到外层div的影响.

Note: 我们也可以看到inherit的作用，继承父元素的属性。

b. Color属性

<div text-style="text-div"><div text-style="no-div"><span>The content is in the div</span></div><p text-style="text-p">This the content in element p.</p></div>

[text-style="text-div"] {color: red}[text-style="no-div"] {/*color: inherit;*/}[text-style="text-p"] {/*color: inherit;*/} 

        先看一下在没有inherit的情况下页面的显示以及应用在element上的样式，可以看出在文本属性里具有继承性的属性是不用自己加上属性就可以继承父元素上的文本属性。

        然后我们在加上inherit的效果

        其实可以看到页面上的效果是没有变化的，有变化的是样式上内容的变化，此时应用的样式应用的color：inherit，相信大家也有疑问，既然具有继承性的属性自己可以继承那对于当前的属性还有inherit岂不是多此一举吗？其实我也有这个疑问，我的理解是：
代码上能地表明要继承于父元素的样式属性，可以在我们查看元素属性时一眼看出来这个元素的属性是哪一个。还有一种情况是受到浏览器默认样式的影响的情况下，需要显示的要求继承父元素的属性，而不是浏览器的属性值，这个示例可以看后面的list-style-type.

c. text-decoration

<div text-style="text-div"><div text-style="no-div"><span>The content is in the div</span></div><p text-style="text-p">This the content in element p.</p></div>

[text-style="text-div"] {text-shadow: 10px 10px 5px red;}[text-style="no-div"] {}[text-style="text-p"] {} 

        我们看一下文本属性里的这个和别人不一样的两个属性text-decoration,我们看一下页面上的显示

        在上面的总结中标识的是text-decoration是没有继承性的，但是现在我们看到的效果是子元素中仍然应用了父元素的样式，这是为什么呢？相信大家细致的发现了黄色框标注的情况，chorme浏览器可能看到结果不太明显，但是还可以看到text-decoration是具有透明度的。

         

        我们再看一下上面ie浏览器上的显示，大家已经发新在子元素中根本就没有一行代码类似于color属性的继承于父元素的，这是什么原因呢，其实这个属性确实是没有继承的，w3c上的解释是：text-decoration如果后代元素没有自己的装饰，祖先元素上设置的装饰会“延伸”到后代元素中。
        所以对这个属性我们的理解还是不能继承的，只是在子元素没有设置的时候，会向下延伸，这里不能说是继承了，毕竟属性本身行为与继承属性的行为不同。

d. list-style-type

<div list-style="list-div"><ul list-style="list-ul"><li>test1</li><li>test2</li><li>test3</li><li>test4</li></ul></div>

[list-style="list-div"] {list-style-type: circle;}[list-style="list-ul"] {/*list-style-type: circle;*/}

        从上面表格中可以看出list-style-type属性是具有继承性的，然后看一下当前页面上的展示

        当前页面上按照属性继承的情况来看应该是显示的是列表的style应该是空心圆，但是显示的实心园，相信大家也看到在浏览器的样式上面红色框标注的地方，因为当前元素应用的是user agent style,所以子元素没有继承到父元素的属性，这个时候inherit就可以排上用场了，可以让子元素继承父元素的属性，而不是适应浏览器的属性。

e.line-height属性

        这里不做示例了，因为这个涉及到line-box的内容，我想在后面的文章一起进行学习。