Cascading is a key concept of Cascading Style Sheets. it is important to name CSS as follows. it defines how to combine rules. some are provided by web developers, while others are provided by browsers. when the two are combined, the attribute values on each HTML tag can be calculated.
1. How cascade operations work
Cascade is an indicator set used to apply rules to a given element on a page. It is impossible to know which styles should be used without determining the priority of conflicting rules.
2. Cascade order
Example:
. Y {
Color: block;
Background-color: yellow;
}
The rule is actually two rules, but just shares a public selector:
. Y {
Color: block;
}
. Y {
Background-color: yellow;
}
It is important to understand this because each rule can be overwritten separately. therefore, you only need to consider conflicting rules. when trying to analyze which rules take precedence, the rule is always analyzed as part of the Rules shown in the code above.
How to calculate which rule to apply?
In the following order: the author of the page> User> browser.
Next, sort the rules based on the selector and special programs.
Inline style attributes> ID selector (if the rule has multiple ID delimiters, the rule with the maximum number of ID delimiters takes priority)> compare the number of elements (more special)> recently declared rules have higher priority
Example:
A: inline style attributes. recently declared rules have higher priority.
A.html
<HTML>
<Head>
<Style type = "text/CSS">
<! --
Input {
Border: 1px solid # DDD;
}
-->
</Style>
<Link type = "text/CSS" href = "a.css" rel = "stylesheet" Media = "screen"/>
</Head>
<Body>
<Input type = "text" name = "keywords" size = "20" style = "border: 1px solid green;"/>
</Body>
</Html>
A.css
Input {
Border: 1px solid red;
}
The input application style in a.html is: {border: 1px solid green ;}
Because: Green recently> # DDD inline> Red external
B: Id selector (if the rule has multiple ID delimiters, the rule with the maximum number of ID delimiters takes priority)
B .html
<HTML>
<Head>
<Link type = "text/CSS" href = "B .css" rel = "stylesheet" Media = "screen"/>
</Head>
<Body>
<Div id = "div1">
First Div container test!
</Div>
</Body>
</Html>
B .css
# Div1 {
Font-family: tahoma;
}
# Div1 {
Font-family: Arial;
Color: red;
}
# Div1 {
Font-family: courier;
Color: # DDD;
Font-size: 16px;
Font-weight: 600;
}
C: Compare the number of elements (more special)
C.html
<HTML>
<Head>
<Link type = "text/CSS" href = "c.css" rel = "stylesheet" Media = "screen"/>
</Head>
<Body>
<Div id = "div1">
<Ul>
<Li> a.html </LI>
<Li> B .html </LI>
<Li class = "C"> c.html </LI>
</Ul>
</Div>
</Body>
</Html>
C.css
. C {
Font-family: Arial;
Color: red;
}
# Div1 ul Li. c {
Font-family: courier;
Color: # DDD;
Font-size: 16px;
Font-weight: 600;
}
3. cascading and HTML attributes
HTML also contains the display attributes that affect the user's page appearance, such as align, color, face, Link, vlink, bgcolor, and background. when these attributes conflict with CSS rules, CSS rules overwrite HTML attributes.
Note: If a CSS rule exists, the HTML display attribute is ignored.
4 .! Important
If necessary, the operator of the sample table can explicitly define a rule that is more important than its own rule. You can change it slightly in B .css in Example B.
B .css
# Div1 {
Font-family: tahoma! Important;
}
# Div1 {
Font-family: Arial;
Color: red;
}
# Div1 {
Font-family: courier;
Color: # DDD;
Font-size: 16px;
Font-weight: 600;
}
Brush your browser to see what style will appear.
One more thing about cascade:
It can be considered that the imported style sheet is more alienated, or it can be understood as follows: if there is a conflict, it has a lower priority. when all other aspects are equal (the ID attribute, the number of classes and elements are the same), even if the rule occurs before the import, it can be considered that the rules of the imported style sheet are closer to the Declaration.
Example:
D.html
<HTML>
<Head>
<Style type = "text/CSS">
<! --
@ Import "d.css" screen;
H2 {
Color: blue;
}
-->
</Style>
</Head>
<Body>
<H2> This Is A example </H2>
</Body>
</Html>
D.css
H2 {
Color: green;
}
Body {
Color: #000;
}
5. Inheritance
If some attributes have been set on the parent element, you do not need to explicitly set these values on each element. for example, if the font-family attribute is set on <body>, all other attributes on the page will have the same value unless other rules change it. it is called inheritance. the page element inherits the attribute value from the parent element <body>.
Not all attributes are naturally inherited. For example, border, edge moment, and padding do not inherit. otherwise, no matter when the box is drawn, all the elements in it are of the same type as the boxes around them. when defining each attribute in a specification, each attribute is either inherited or not inherited by default.
Example (a part previously written ):
E.html
E.css
5.1 inherited values
In most cases, the inherited value will be used, just as it is set on the element, for example, font-family and color. the display, border, margin, and padding attributes are not inherited. note:
Background-color is not inherited. If it is not set, the default value is special: transparent (meaning: visible in the following colors)
5.2 calculated value
The font-size attribute has some differences when it comes to inheritance, because the user does not actually have an inheritance declaration, and the user continues to calculate the value. some values are absolute values (PX is absolute values, Em is relative values), but most are relative values, for example, smaller or 3em. when the relative value is inherited, before it is passed to the child element. calculate the value first.
5.3 specify inheritance
If you want to inherit attributes from the parent element, but it does not actually do that by default, you can use the inherit value in the written rules. Example:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
