Learn more about the use of CSS cascades and inheritance

1. Three ways to use CSS style sheets in HTML:

(1) Inline style sheets.

eg：LIN

(2) Embedded style sheet.

That is, embed the

(3) Style sheet for external links.

2. The order of cascading

(1)

First, the rules must be classified according to origin.

The specific priority order is as follows:

Rules set by the page author (author)> User (user) rules> Browser (browser) rules

(2)

Then there is the rule sorting based on selectors and specificity:

　1. The priority of the inline style sheet is the highest.

2. ID selector, when there are multiple id selectors, the rule with more id selectors wins.

　　3. If there is no id selector, or the number is the same, then the rule with the most categories or pseudo-categories has higher priority.

　　4. If there is a class (or no class), then the rule with the largest number of elements will have higher priority.

　5. If the id, class, and number of elements are the same, the most recently declared principle has the highest priority.

(3) The priority of embedded style sheets and external link style sheets. When other weights are equal, the most recently declared rule has higher priority.

That is, in the order of the link tag and the style tag in the

tag, the second statement has higher priority.

3. Cascading and HTML attributes

The align, color, face, vlink, and background in HTML will also affect the appearance of the page.

The align attribute of the tag defines the horizontal and vertical alignment of the image relative to surrounding elements.

The align attribute is deprecated in HTML 4.01, XHTML 1.0 Strict DTD does not support this attribute, and HTML 5 no longer supports this attribute. The

color attribute specifies the color of the text in the font element.

In HTML 4.01, the color attribute of the font element is deprecated; in XHTML 1.0 Strict DTD, the color attribute of the font element is not supported.

Please use CSS instead.

CSS syntax:

[

Specifies the font, font size, and font color of the text.

eg:This is some text!

This is some text!

This is some text!

In HTML 4.01, the font element is deprecated.

In XHTML 1.0 Strict DTD, the font element is not supported.

]

The face attribute specifies the font for the text in the font element.

eg:This is some text!

In HTML 4.01, the use of the face attribute of the font element is deprecated; in XHTML In the 1.0 Strict DTD, the face attribute of the font element is not supported.

Please use CSS instead.

CSS syntax:

vlink attribute The color of the visited link in the document.

eg:

In HTML 4.01, the use of the vlink attribute of the body element is deprecated; in XHTML 1.0 Strict DTD, the use of the body element is not supported vlink attribute.

Please use CSS instead.

CSS syntax (in the

section):

When these properties conflict with css rules, Always overridden by css rules.

4. Use in rules! important

Use! The rule specified by important is more important than other rules.

eg: em { color: bule! important;}

Attention: User first! important rules take precedence over the author's rules.

User-defined style sheets should be declared! important.

5. @import rules, import files.

eg: h1 {color: red;}

@import url（"style.css");

/*style.css*/

h1{color: green;}

The above code, the final h1 is red. Because by default the imported stylesheet appears before the original stylesheet rules.

6.Inheritance

(1) Note that display, border, margin, padding attributes are not inherited.

(2) background-color is not inherited. When it is not set, its default value is the special value transparent.

(3) When inheriting a relative value, the value is first calculated before passing it to the descendants.

(4) Specify inheritance: inherit special value

eg: p .standout{ border: 1px solid blue;}

p .standout{ border:inhert;}

Note: When css 1 was released, the author's! important style takes precedence over the user's! important style.

css2, user's! important style takes precedence over the author's! important style.

The above is the detailed content of Learn more about the use of CSS cascades and inheritance. For more information, please follow other related articles on the PHP Chinese website!