Shulou(Shulou.com)06/01 Report--

Most people do not understand the knowledge of this article "what is the inheritance of css?", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "what is the inheritance of css" article.

What does css inheritance mean?

After looking at the document tree, the inheritance in our css can be defined as a specific css attribute passed down to the descendant element. This is also easy to understand, which means that the tag wrapped inside will have the style of the external tag, that is, the child element can inherit the attributes of the parent element.

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

CSS inheritance code

It is important to note that em is included in p.

When we specify the css style of p, let's see what happens to em.

P {color:red;}

In the browser, the font of the p tag and the em tag turns red at the same time. We do not specify a style for em, but em inherits the style properties of its parent element p.

Seeing here, I'm sure you know very well what inheritance in css means. In fact, css inheritance is often used when we write code, even before we know it.

Of course, in the above example, our properties can be inherited, but not all properties can be inherited, so which properties of css can be inherited? Let's sum it up.

What attributes can be inherited from css?

1. In the font properties with inherited attributes in css:

Font: font. Font-family: specifies the font of the element. Font-weight: sets the weight of the font.

Font-size: sets the font size. Font-style: defines the style of the font.

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

Font-stretch: stretch the current font-family. All major browsers do not support it.

Font-size-adjust: specify an aspect value for an element so that you can maintain the x-height of the preferred font.

2. In the text attribute of the inherited attribute in css:

Text-indent: text indentation. Text-align: text alignment horizontally. Line-height: row high. Word-spacing: increase or decrease the white space between words (that is, word spacing).

Letter-spacing: increase or decrease the white space between characters (character spacing). Text-transform: controls the case of text. Direction: specifies the direction in which the text is written.

Color: text color

3. Element visibility of inherited attributes in css:

Visibility: specifies whether the element is visible.

4. Table layout attributes with inherited attributes in css:

Caption-side: sets the location of the table title. Border-collapse: sets whether the table border is folded to a single border.

Border-spacing: sets the distance at which cell borders are separated. Empty-cells: sets whether to display empty cells in the table.

Table-layout: sets the algorithm for displaying units, rows, and columns.

5. List layout attributes with inherited attributes in css:

List-style-type: modifies the type of flag used for list items. List-style-image: use an image for each flag.

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

List-style: shorthand list style, used to set all the properties used for the list in one declaration.

6. The generated content attribute of the inherited attribute in css:

Quotes: sets the quotation mark type of nested references.

7. Cursor attributes of inherited attributes in css:

Cursor: specifies the type (shape) of the cursor to display

8. Page style attributes with inherited attributes in css:

Page: specifies the specific type of page that elements should be displayed. Page-break-inside: sets the paging behavior to avoid paging within table elements.

Windows: sets the minimum number of rows that must be retained at the top of the page when paging occurs within the element.

Orphans: sets the minimum number of rows that must be retained at the bottom of the page when paging occurs within the element.

9. Sound style attributes with inherited attributes in css

Speak: sets or retrieves whether the sound is given. Speak-punctuation: sets or retrieves how punctuation is pronounced.

Speak-numeral: sets or retrieves how numbers are pronounced. Speak-header: sets or retrieves how many times the table header is related to a series of cells that follow.

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

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

Pitch-range: sets or retrieves the smoothness of the sound. Stress: similar to pitch-range. Sets or retrieves the highest peak 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 can be inherited by all elements: visibility, cursor

11. Attributes that inline elements can inherit:

(1) Font family properties

(2) text series attributes except text-indent and text-align

12. Attributes that can be inherited by block-level elements: text-indent, text-align

The above is about the content of this article "what is the inheritance of css". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.