CSS Inheritance

 

HTML elements can inherit CSS styles from their parent elements. This is called CSS inheritance. Here is a CSS inheritance example:

<div>
    <p>
        This text inherits the font-size of the parent div element.
    </p>
</div>    
<style>
    div {
        font-family: Aial;
    }
</style>

In this example the div element has the font-family property set to Arial. This CSS property is inherited by the nested p element, so it will also have its CSS property font-family set to Arial.

HTML elements can inherit styles from more remote ancestors too, and not just from their parents. Look at this example:

<body>
    <div>
        <p>
            This text inherits the font-size of the parent div element.
        </p>
    </div>    
    <style>
        body {
            font-family: Aial;
        }
    </style>
</body>

In this example the CSS property font-family is set on the body element. This CSS property is then inherited by the div and p elements.

Not all styles are inherited from a parent or ancestor element. Generally, styles that apply to text are inherited, whereas borders, margins and paddings and similar styles are not.

posted @ 2015-06-09 13:50  hephec  阅读(198)  评论(0)  编辑  收藏  举报