Shulou(Shulou.com)06/01 Report--

This article mainly shows you the "CSS cascading and inheritance example analysis", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "CSS cascading and inheritance example analysis" this article.

1. There are three ways to use CSS style sheets in HTML:

(1) inline style sheets.

Eg:LIN

(2) embedded style sheet.

That is, the tag and specific styling content are embedded in the tag.

(3) external linked stylesheets.

two。 Sequence of cascades

(1)

The first step is to classify the rules according to their origin.

The specific priorities are as follows:

Page author (author) set rules > user (user) rules > browser (browser) rules

(2)

Then there is a sort of rule based on selector and particularity:

1. Inline style sheets have the highest priority.

2.id selector, when there is more than one id selector, the rule with more than one id selector wins.

3. If there is no id selector, or if the number is the same, then the rule with the largest number of classes or pseudo-classes in the rule has a higher priority.

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

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

(3) the priority of embedded stylesheets and external link stylesheets, and the recently declared rules have high priority when other weights are equal.

That is, the order of the link tag and the style tag in the tag, and the priority of the second declaration is high.

3. Cascading and HTML attributes

The align,color,face,vlink,background in HTML also affects the appearance of the page.

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

The align attribute is deprecated by HTML 4.01, is not supported by XHTML 1.0 Strict DTD, and is no longer supported by HTML 5.

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 not recommended; in XHTML 1.0 Strict DTD, the color attribute of the font element is not supported.

Please use CSS instead.

CSS syntax:

[

Specify 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 not approved.

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

]

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

Eg:This is some text!

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

Please use CSS instead.

CSS syntax:

The color of the accessed link in the vlink property document.

Eg:

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

Please use CSS instead.

CSS syntax (in section): a:visited {color: # FF0000}

When these attributes conflict with css rules, they are always overridden by css rules.

4. Use it in the rules! Important

Use it! The rules specified by important are more important than other rules.

Eg: em {color: bule! Important;}

Note: user-initiated! The important rule takes precedence over the author's rule.

A user-defined stylesheet should declare yes! Important .

5. @ import rule, import the file.

Eg:h2 {color:red;}

@ import url ("style.css")

H2 {color:green;}

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

6. Inherit

(1) Note that the display,border,margin,padding property is 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 calculated before it is passed on to the offspring.

(4) specify inheritance: inherit special value

Eg:div .standout {border: 1px solid blue;}

Div .standout {border:inhert;}

Note: when css 1 is released, the author's! Important style takes precedence over user's! Important style.

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

The above is all the content of the article "sample Analysis of cascading and inheritance in CSS". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.