Which properties in css can be inherited

The attributes that can be inherited in css are: text-indent, text-align, line-height, word-spacing, letter-spacing, text-transform, visibility, color, cursor, etc.

The operating environment of this tutorial: Windows 7 system, CSS3 version, Dell G3 computer.

What is css inheritance?

To understand the inheritance of CSS style sheets, we first start with the document tree (HTML DOM). The document tree consists of HTML elements.

The document tree is similar to the family tree, and also has ancestors, descendants, fathers, children and brothers^_^. This is easy to understand, so I won’t go into details here. If you want to know more, please google it.

So CSS style sheet inheritance means that specific CSS properties are passed down to descendant elements.

As an example, there is the following html code snippet:

<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>

Recommended tutorial: CSS video tutorial

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

Maybe after reading this, you may think this is natural and not worth it at all^_^. In fact, this is inheritance. It affects our code unknowingly (imagine if there is no inherited attribute, you need to define the color attribute for each element, how painful this is!!! =_=!).

Of course not all css attributes will be inherited by subclasses, such as the border attribute. Continue to use the above piece of code. We add the border attribute to the p element

p { border: 1px solid red; }

Fortunately, the border attribute of p is not inherited by em, otherwise wouldn’t it be weird? !

#So, which properties can be inherited? css style sheet attributes that can be inherited are as follows:

1. Font family attribute

font: combined font

font-family: specifies the font family of the element

font-weight: Set the thickness of the font

font-size: Set the size of the font

font-style: Define the style of the font

font-variant : Sets the small caps font for displaying text, meaning all lowercase letters are converted to uppercase, but all letters using small caps have a smaller font size compared to the rest of the text.

font-stretch: Allows you to make text wider or narrower. Not supported by all major browsers.

font-size-adjust: Specifies an aspect value for an element. The ratio between the height of the lowercase letter "x" of the font and the height of "font-size" is called the aspect value of a font. This maintains the x-height of the preferred font.

2. Text series attributes

text-indent: text indent

text-align: text horizontal alignment

line-height: line height

Word-spacing: Increase or decrease the space between words (ie, word spacing)

letter-spacing: Increase or decrease the space between characters (character spacing)

text- transform: Control text case

direction: Specify the writing direction of text

color: Text color

3. Element visibility: visibility

4. Table layout attributes: caption-side, border-collapse, border-spacing, empty-cells, table-layout

5, list attributes: list-style-type, list-style-image, list-style- position, list-style

6, generated content attributes: quotes

7, cursor attributes: cursor

8, page style attributes: page, page-break-inside, windows, orphans

9, sound style attributes: speak, speak-punctuation, speak-numeral, speak-header, speech-rate, volume, voice-family, pitch, pitch-range, stress, richness,, azimuth, elevation

Attributes that can be inherited by all elements:

• Element visibility: visibility, opacity

• ##Cursor attributes: cursor

Attributes that can be inherited by inline elements:

• Font family attribute

• Except text -Text series attributes other than indent and text-align

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

More programming-related knowledge , please visit:

programming video! !

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