(Distal) HTML and css, 15, and inheritance of laminate

1, inheritance

The first characteristic of a laminated: inheritance

Inherited: to set the properties ancestors, descendants will inherit ancestral property in some (not all properties are inherited)

Code ↓

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        .box{
            width: 300px;
            height: 300px;
            background: skyblue;
            border: 1px solid red;
            color: green;
            font-size: 30px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="box">
        <h2>这是标题</h2>
        <p> This is a paragraph </ P > 
        < P > This is a paragraph </ P > 
    </ div > 
</ body > 
</ HTML >

View Code

← div called box to set properties, its offspring, that is, in the view of p and h2 tags will inherit some of the attributes of the box.

css inheritance: descendant elements can inherit the text styles from ancestor elements, can not inherit the box styles.

Look through the console style source ↓

Renderings ↓

You can see from the renderings, the character inherits text properties ancestors.

Inheritance This feature is very good, the whole text can be written in the style of the most ancestral body, the back of the label to inherit automatically, if there is a special property, as long as the label can be written separately.

(Distal) HTML and css, 15, and inheritance of laminate

1, inheritance

Guess you like