Which properties in the CSS selector can be inherited?
May 29, 2021 Article blog
Table of contents
If we want to style CSS in HTML elements, we need to control it through the CSS selector. In other words, the CSS selector is used to point to a label that needs to be added to the CSS style so that the CSS style knows that it needs to work on that label.
Inheritance of CSS refers to the style of the label wrapped inside that will have an external label, i.e. the child element can inherit the property of the parent element.
Several commonly used selectors and their inheritable properties are described below.
Common CSS selectors are:
-
id Selector
We set the id selector by setting the id property of the label. T
he id selector in CSS is defined by
#
A
s follows, set the CSS style with id "box". A
dd a style with a height of 100px, a width of 100px, and a red background color for div.
-
Class selector
Common selectors also have class selectors. T he class selector styles by setting the class property of the label. T he class selector in CSS . t o define. I f the following is the CSS style that sets class to box. Add a style with a height of 100px, a width of 100px, and a blue background color for div.
-
Label selector
The label selector is a CSS style for a class of labels. S tyle directly with the label name in CSS. A s follows, set the CSS style of div. Add a style with a height of 100px, a width of 100px, and a pink background color.
-
Inline selector
We can also write CSS code directly within the label. By adding the style property, you can add a CSS style to the style.
Inheritable properties:
There are several properties that can be inherited in CSS.
-
Font family properties
|
Combined font |
|
|
Font series of elements |
|
|
Set the thickness of the font |
|
|
Set the size of the font |
|
|
Define the style of the font |
|
|
Set the font display of small capital letters, which means that all lowercase letters are converted to capital, but all the letters using small uppercase fonts are smaller than the remaining text. |
|
|
Allows you to be widened or narrowed.All mainstream browsers are not supported. |
|
|
For an element specified an Aspect value, the height of the lowercase letter "X" of the font and the ratio between the "font-size" height is referred to as a font's aspect value.This will keep the X-Height of the preferred font. |
-
Text series properties
| text-indent | Text indent |
| text-align | Text level is aligned |
| line-height | High travel |
| word-spacing | Increase or reduce blank between words (ie, word interval) |
| letter-spacing | Increase or reduce blanks between characters (character spacing) |
| text-transform | Control text |
| direction | Statify the writing direction of the text |
| color | Text color |
-
Element visibility
| visibility | Specify whether the elements are visible |
-
Table layout properties
| caption-side | Form a form title |
| border-collapse | Set the merge border model for the table |
| border-spacing | Set the distance between the edge of the adjacent cell (only for "border separation" mode) |
| empty-cells | Set whether to display empty units in the table (used only for "separation border" mode) |
| table-layout | Display the algorithm rule of the form cell, line, column |
-
List properties
| list-style-type | Set the type of list item tag |
| list-style-image | Use images to replace the tag of the list item |
| list-style-position | Set where to place list item tags |
| list-style | Set all list properties in a statement |
-
Build content properties
| quotes | Set the quotation type type of nested reference (Embedded quotation) |
-
Cursor properties
| cursor | Specify the type of cursor to display (shape) |
-
Page style properties
| page |
Retrieve or specify the page type used when displaying an object container
|
| page-break-inside | Set Page-Breaking Behavior inside the element |
| orphans | Set or return an element to the minimum number of visible rows at the bottom of the page (for printing or printing preview) |
| speak | The specified content will be presented in sound form |
| speak-punctuation | Specify how to think of punctuation |
| speak-numeral | Specify how to read the number |
| speak-header | Specifies how to handle the table title.You should read the title before each cell, or you read only the title before the title is different from the previous cell. |
| speech-rate | Specify the speed of speech |
| volume | Specify speech volume |
| voice-family | Specify speech family |
| pitch | Specify speech |
|
pitch-range
|
Specify changes in speech (monotonous or beautiful sound?) |
|
stress
|
Specify "pressure" in speech |
|
richness
|
Specifies the richness of voice.(The sound is rich or thin?) |
|
azimuth
|
Set the source of sound |
|
elevation
|
Set the source of sound |
The above is a summary of the CSS selector and its inherited properties. For more tutorials, log on to the W3Cschool website
Recommended lessons: HTML, CSS, Getting Started at the front end