CSS cascade and inheritance, CSS cascade inheritance

CSS cascade and inheritance, CSS cascade inheritance

2016-11-06

Chapter 7 CSS beginners

 

1. Three methods of using CSS style sheets in HTML:

(1) inline style sheets.

Eg: <em> 2. Cascade order

(1)

First, you must classify the rule based on the origin.

The specific priority is as follows:

Rules set by the author of the page> user rules> browser rules

(2)

Then, sort the rules based on the selector and particularity:

1. The Inline style sheet has the highest priority.

2. id selector. When there are multiple id selector, rules with Multiple id selector will win.

3. If there is no id selector or the number is the same, the rules with the most classes or pseudo classes have a higher priority.

4. If a class (or no class) exists, the rule has a higher priority with the maximum number of elements.

5. If the number of IDS, classes, and elements is the same, the recently declared principle has the highest priority.

(3) Priority of embedded style sheets and external link style sheets. When other weights are consistent with each other, the recently declared rules have a higher priority.

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

 

3. cascading and HTML attributes

Align, color, face, vlink, and background in HTML also affect the appearance of the page.

 

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

The align attribute is not recommended for HTML 4.01. The XHTML 1.0 Strict DTD does not support this attribute, and HTML 5 does not support this attribute.

 

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

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

Use CSS instead.

CSS syntax: <p> the face attribute specifies the font of the text in the font element.

Eg: <fontface="verdana"> This is some text! </Font>

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

Use CSS instead.

CSS syntax: <p> the color of the accessed link in the vlink attribute document.

Eg: <bodyvlink="red">

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

Use CSS instead.

CSS syntax (in

 

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

 

4. Use it in rules! Important

Yes! Important rules are more important than other rules.

Eg: em {color: bule! Important ;}

Note: It was first created by the user! The impant ant rule takes precedence over the author rule.

The user-defined style sheet should be declared to be! Important.

 

5. @ import rule: import files.

Eg: h1 {color: red ;}

@ Import url(“style.css ");

/* Style.css */

H1 {color: green ;}

 

The code above indicates that h1 is red. By default, imported style sheets appear before the original style sheet rules.

 

6. Inheritance

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

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

(3) When the relative value is inherited, the value is calculated before it is passed to the child.

(4) specify inheritance: Special inherit Value

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

Div. standout {border: inhert ;}

 

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

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