What does CSS inheritance mean? Which properties of CSS can be inherited?

In the CSS learning process, we will encounter some properties can inherit, then, what does the inheritance in CSS mean? What properties can be inherited? This article will introduce you to the content of the inheritance in CSS.

Before we define CSS inheritance, take a look at the HTML DOM (document tree), the HTML DOM (document tree) is composed of HTML elements, the document tree and the family tree similar, also have ancestors, descendants, fathers, children and brothers. In fact, it is easy to understand, here is not much to say, want to know more words can look at this HTML DOM Chinese reference manual.

What does CSS inheritance mean?

After looking at the document tree, the inheritance in our CSS can be defined as a specific CSS property passed down to descendant elements. This is also very well understood, that is, the tag that is wrapped inside will have the style of the external label, that is, the child element can inherit the parent element's attributes.

Let's use an example to illustrate what the inheritance of CSS is.

<p>CSS<em> Inheritance </em> Code </p>

It is important to note that EM is contained within p.

When we specify the CSS style of p, see what happens to em?

<style>p {color:red;} </style>

In the browser, the P tag and the EM label font are red at the same time. We do not specify the EM style, but EM inherits the style attributes of its father element p.

See here, I believe you should be very aware of the CSS in the meaning of inheritance, in fact, CSS inheritance in our writing code is often used, even unknowingly used.

Of course, our properties in the above example can be inherited, but not all properties can be inherited, then what properties of CSS can inherit it? Let's summarize here.

What properties do css have to inherit?

1. In CSS, there are inheritance attributes in the font attributes:

Font: Fonts. Font-family: Specifies the font of the element. Font-weight: Sets the weight of the font.

Font-size: Sets the size of the font. Font-style: Defines the style of the font.

Font-variant: Sets the font display text for small caps, which means that all lowercase letters are converted to uppercase, but all letters that use a small uppercase font have a smaller font size than the rest of the text.

Font-stretch: The current font-family is stretched and deformed. All major browsers are not supported.

Font-size-adjust: Specify a aspect value for an element so that the x-height of the preferred font can be maintained.

2. In CSS, there are inheritance attributes in the text attribute:

Text-indent: Text indent. Text-align: Horizontal alignment of text. Line-height: Row height. Word-spacing: Increases or decreases the space between words (that is, word spacing).

Letter-spacing: Increases or decreases whitespace between characters (character spacing). Text-transform: Controls text capitalization. Direction: Specifies the direction in which the text is written.

Color: Text Colors

3. Element visibility of inherited attributes in CSS:

Visibility: Specifies whether the element is visible.

4. Table layout Properties with inherited attributes in CSS:

Caption-side: Sets the position of the table header. Border-collapse: Sets whether the table border is collapsed to a single border.

Border-spacing: Sets the distance separating the border of the cell. Empty-cells: Sets whether to display empty cells in the table.

Table-layout: Sets the algorithm for displaying cells, rows, and columns.

5. List layout properties of inherited attributes in CSS:

List-style-type: Modifies the type of flags used for list items. List-style-image: Use an image for each symbol.

List-style-position: You can determine whether a flag appears outside the contents of the list item or inside the content.

List-style: Shorthand list style, used to set all properties used for a list in a declaration.

6, the CSS has inherited properties of the generated content properties:

Quotes: Sets the quotation mark type for nested references.

7, CSS has the property of the inheritance of the cursor properties:

Cursor: Specifies the type (shape) of cursors to display

8. CSS has inherited properties of the page style properties:

Page: Specifies the type of pages specific elements should be displayed. Page-break-inside: Sets the paging behavior within the table element to avoid paging.

Windows: Sets the minimum number of rows that must be retained at the top of the page when pagination occurs within an element.

Orphans: Sets the minimum number of rows that must be retained at the bottom of the page when pagination occurs within an element.

9. Sound style attributes for inherited properties in CSS

Speak: Sets or retrieves whether the sound is given. Speak-punctuation: Sets or retrieves how punctuation marks are pronounced.

Speak-numeral: Sets or retrieves how numbers are pronounced. Speak-header: Sets or retrieves how many times a table header relates to a series of cells after it.

Speech-rate: Sets or retrieves the pronunciation speed. Volume: Sets or retrieves the volume.

Voice-family: Sets or retrieves the current sound type. Pitch: Sets or retrieves the pitch.

Pitch-range: Sets or retrieves the degree of smoothness of the sound. Stress: similar to Pitch-range. Sets or retrieves the highest peak value of the current sound waveform.

Richness: Sets or retrieves the timbre of the current sound. Azimuth: Sets or retrieves the sound field angle of the current sound.

Elevation: Sets or retrieves the source elevation of the current sound.

10. Attributes that all elements can inherit: visibility, cursor

11. Attributes that can be inherited by inline elements:

(1) Font family properties

(2) Text series properties other than Text-indent, text-align

12. Attributes that block-level elements can inherit : text-indent, Text-align

The above is about the CSS to summarize the inheritance of the content, of course, if you want to go further to understand the knowledge of CSS inheritance, you can go to the PHP Chinese network to see a CSS Video tutorial section or CSS3 Video tutorial section, the various CSS related video.