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

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

Before we define css inheritance, let’s first take a look at the HTML DOM (document tree). HTML DOM (document tree) is composed of html elements. The document tree is similar to the family tree. There are also ancestors, descendants, fathers, Children and brothers. In fact, it is easy to understand, so I won’t go into details here. If you want to know more, you can take a look at this HTML DOM Chinese Reference Manual.

What does css inheritance mean?

After looking at the document tree, inheritance in our css can be defined as specific css attributes being passed down to descendant elements. This is actually easy to understand. It means that the tags wrapped inside will have the style of the external tags, that is, the child elements can inherit the attributes of the parent element.

Let’s use an example to explain specifically what the inheritance of css is.

<p>
CSS<em>继承性</em>代码
</p>

It should be noted that em is included in p.

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

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

In the browser, the fonts of the p tag and em tag turn red at the same time. We did not specify the style of em, but em inherits the style attributes of its parent element p.

Seeing this, I believe you should be very clear about what inheritance in CSS means. In fact, CSS inheritance is often used when we write code, even without knowing it.

Of course, our properties in the above example can be inherited, but not all properties can be inherited. So what properties can be inherited in CSS? Let’s summarize it below.

What properties can be inherited in css?

1. Among the font attributes that are inherited properties in css:

font: font. font-family: Specifies the font of the element. font-weight: Set the thickness of the font.

font-size: Set the font size. font-style: Define the font style.

font-variant: Sets the font in small caps to display the text, this means that all lowercase letters are converted to uppercase, but all letters in small caps have a smaller font size compared to the rest of the text smaller.

font-stretch: Stretch and transform the current font-family. Not supported by all major browsers.

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

2. Among the text attributes with inherited properties in CSS:

text-indent: text indent. text-align: Text is aligned horizontally. line-height: line height. word-spacing: increasing or decreasing the space between words.

letter-spacing: Increase or decrease the space between characters (character spacing). text-transform: Control text case. direction: Specifies the writing direction of text.

color: Text color

3. Element visibility of inherited attributes in CSS:

visibility: Specifies whether the element is visible.

4. Table layout attributes with inherited properties in CSS:

caption-side: Set the position of the table title. border-collapse: Set whether to collapse the table border into a single border.

border-spacing: Set the distance separating cell borders. empty-cells: Set whether to display empty cells in the table.

table-layout: Set the algorithm for displaying cells, rows and columns.

5. List layout properties of inherited properties in css:

list-style-type: Modify the flag type used for list items. list-style-image: Use an image for each logo.

list-style-position: You can determine whether the logo appears outside the list item content or inside the content.

list-style: Abbreviated list style, used to set all properties for lists in one statement.

6. Generated content attributes of inherited properties in css:

quotes: Set the quote type of nested references.

7. Cursor attributes with inherited properties in CSS:

cursor: Specifies the type (shape) of the cursor to be displayed

8. Page style attributes with inherited properties in CSS:

page: Specifies the specific type of page on which elements should be displayed. page-break-inside: Set the paging behavior to avoid paging inside the table element.

windows: Sets the minimum number of lines that must remain at the top of the page when pagination occurs inside the element.

orphans: Sets the minimum number of lines that must remain at the bottom of the page when pagination occurs inside the element.

9. The sound style attribute with inheritance in css

speak: Set or retrieve whether the sound is given. speak-punctuation: Set or retrieve how punctuation marks are pronounced.

speak-numeral: Set or retrieve how numbers are pronounced. speak-header: Sets or retrieves how many times the table header occurs in relation to a series of cells following it.

speech-rate: Set or retrieve the pronunciation speed. volume: Set or retrieve the volume.

voice-family: Set or retrieve the current voice type. pitch: Set or retrieve pitch.

pitch-range: Set or retrieve the smoothness of the sound. stress: similar to pitch-range. Sets or retrieves the highest peak value of the current sound waveform.

richness: Set or retrieve the timbre of the current sound. azimuth: Set or retrieve the sound field angle of the current sound.

elevation: Set or retrieve the source elevation angle of the current sound.

10. Attributes that can be inherited by all elements: visibility, cursor

##11. Attributes that can be inherited by inline elements:

(1) Font family attributes

(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 a summary of css inheritance. Of course, if you want to learn more about css inheritance For relevant knowledge, you can go to the php Chinese website and take a look at the

css video tutorial column or the css3 video tutorial column, which contains various CSS-related videos.

Related recommendations:

CSS inheritance in-depth analysis

Introduction to attribute value inheritance in css

The above is the detailed content of What does css inheritance mean? Which properties of css can be inherited?. For more information, please follow other related articles on the PHP Chinese website!