Does css have inheritance relationship?

css has an inheritance relationship. CSS inheritance is a rule that allows styles to be applied not only to a specific html tag element, but also to its descendants; that is: if the CSS style of the superior (parent) is set, the children of the superior (parent) and below All levels (subordinates) have this style.

The operating environment of this tutorial: windows7 system, css3 version, Dell G3 computer.

(Learning video sharing:css video tutorial)

css has an inheritance relationship.The role of css inheritance: set some attributes for the parent element, which can also be used by child elements.

CSS inheritance means that the tags wrapped inside will have the style properties of the outer tags. The most typical application of the inheritance feature is usually used in the style default of the entire web page, and the parts that need to be designated as other styles can be set in individual elements. This feature can provide web designers with more ideal space to play. But at the same time, there are many rules for inheritance, which can be confusing when applied. One of the main features of CSS is inheritance, which relies on the ancestor-descendant relationship. Inheritance is a mechanism that allows styles to be applied not only to a specific element, but also to its descendants. For example, a color value defined by BODY will also be applied to the text of the paragraph. The following is an example:

Style definition:

body{color:red;}

Application example code:

CSS的层叠和继承深入探讨

The application result of this code is: "In-depth discussion of CSS cascading and inheritance" The words are in red, and "Cascading and Inheritance" is in bold because the strong element is applied. This is consistent with the author's intention and is why inheritance is part of CSS.

Note:

1. Not all attributes can be inherited. Only attributes starting with color/font-/text-/line can be inherited

2. Not only sons can inherit, but descendants can inherit

Application scenarios:

Generally used to set common information on web pages , such as the text color, font, text size and other content of the web page

css has inherited properties

1. Text series Properties

text-indent: Text indent

text-align: Text horizontal alignment

line-height: Line height

word- spacing: Increase or decrease the space between words (i.e. word spacing)

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

text-transform: Control text case

direction: Specifies the writing direction of the text

color: Text color

2. Font series attribute

font: Combined font

font-family: Specify 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: Set the font in small caps to display text, this means that all lowercase letters will be converted to uppercase, but all letters using small caps font will be different from the rest of the text Its font size is smaller compared to .

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.

3. Table layout attribute

caption-side: Set the position of the table title.

border-collapse: Set whether the table borders are merged into a single border, or displayed separately as in standard HTML.

border-spacing: Set the distance between the borders of adjacent cells (only used in "Border Separation" mode).

empty-cells: Set whether to display empty cells in the table (only for "detached border" mode).

table-layout: Set the table layout algorithm for the table.

4. List layout attributes:

list-style-type: Set the type of list item mark.

list-style-image: Use an image to replace the markup of a list item.

list-style-position: Indicates how list item markers are drawn relative to the object's contents.

list-style: Shorthand attribute sets all list attributes in one declaration.

5. Element visibility: visibility

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

For more programming-related knowledge, please visit:

Introduction to Programming

! !

The above is the detailed content of Does css have inheritance relationship?. For more information, please follow other related articles on the PHP Chinese website!