Home >Web Front-end >HTML Tutorial >Back-end coders talk about front-end (CSS) Lesson 8: Inheritance and cascading_html/css_WEB-ITnose

Back-end coders talk about front-end (CSS) Lesson 8: Inheritance and cascading_html/css_WEB-ITnose

WBOYOriginal: 2016-06-24 11:47:171252browse

1. Inheritance

Inheritance: The so-called CSS style inheritance is the rule statement for child elements to apply to parent elements. (Due to this feature, CSS attributes can be divided into inheritable attributes and non-inheritable attributes.)
Inheritable attributes: Attributes whose attribute values can be inherited from parent elements to child elements are called inheritable attributes.

What properties are inheritable?

1. Text style attributes

text-indent, text-align, word-spacing, letter-spacing, text-transform, text-decoration, direction, white-space

2. Font style attributes

font, font-family, font-size, font-style, font-variant, font-weight

3. List style attributes

list-style, list-style-image, list-style-position, list-style-type

4. color attribute

Note: Special explanation here: font-size Attributes (inheritance is special)
Unlike the exact value that is inherited, font-size inherits the calculated value.

For example:

<!DOCTYPE html>

<html lang=“utf8”>

    <head>

        <meta charset="utf-8">

        <title>Demo</title>

    </head>

    <body style="font-size:85%">

        body字体大小

        <h1 style="font-size:200%">h1字体大小</h1>

        <h2 style="font-size:150%">h2字体大小</h2>

        <p>p字体大小<em>em字体大小</em></p>

    </body>

</html>

元素	值	计算值
default font-size	16px
6c04bd5ca3fcae76e30b72ad730ca86d	85%	16px × 85% = 13.6px
4a249f0d628e2318394fd9b75b4636b1	200%	13.6px × 200% = 27.2px
c1a436a314ed609750bd7c7d319db4da	150%	13.6px × 150% = 20.4px
e388a4556c0f65e1904146cc1a846bee	unspecified	13.6px
907fae80ddef53131f3292ee4f81644b	unspecified	13.6px

That is: unless the font-size value is reassigned, it will continue according to the last size value. For example, in the picture above, the body font is set to the default font (usually 16px=1em) 85% (13.6px), then the following fonts are all 13.6px. Instead of continuing to inherit 85%, let 13.6 be multiplied by 85% again.

2. Cascading

Cascading: The so-called CSS style cascading is the process in which DOM elements apply rules in the style sheet to override inherited styles.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：CSS3 learning animation property_html/css_WEB-ITnoseNext article：CSS3 learning animation property_html/css_WEB-ITnose

See more