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
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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
