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

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

WBOY

Release： 2016-06-24 11:47:17

Original

1209 people have browsed it

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>

Copy after login

<html lang=“utf8”>

Copy after login

    <head>

Copy after login

        <meta charset="utf-8">

Copy after login

        <title>Demo</title>

Copy after login

    </head>

Copy after login

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

Copy after login

        body字体大小

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

    </body>

Copy after login

</html>

Copy after login

元素	值	计算值
default font-size	16px
	85%	16px × 85% = 13.6px
	200%	13.6px × 200% = 27.2px
	150%	13.6px × 150% = 20.4px
	unspecified	13.6px
	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.