An important detail in understanding and applying cascading style sheets is the cascading aspects of its name. In other words, how does it handle multiple rules for the same element? This week, I'll give you a detailed description of the features of CSS.
Priority of
CSS properties have greater precedence than HTML attributes. You can use HTML properties in browsers that do not have CSS support, but adding CSS support in your browser will not have any effect. When using CSS, it is important to have a deep understanding of the source of a CSS rule.
Source
When considering the application of CSS rules, there are usually two aspects. The first is the reader, which corresponds to the user who views the Web application through their favorite browsers. The second aspect is the author, the actual web developer who developed the Web application.
The reader's parameters are chosen to be handled by the user, that is, they can develop their own style sheets and then assign them to the browser settings. For example, Internet Explorer IE 6 users can use the Tools | Internet Options | Access menu to specify a user style sheet so that they can use their own style sheets. Web developers specify rules and apply them to Web pages by developing their own CSS. At the same time, browsers often have built-in rules.
Cascade
The cascading aspects of abbreviations in CSS refer to the merging and overwriting of rules between different sources. When multiple style sheets are used at the same time, each style sheet defines the selectors competing for control. The following list named the order, which resolves the conflict between the stylesheet selectors, the first of which is the most important.
Importance: is the selector specified as important?
Rule source: Where is the rule defined?
Attributes: What are the characteristics of a rule?
Order: What is the last definition?
Important Features
Adding a keyword important can increase the importance of your statement. Declarations of added importance override the standard or non important declarations that correspond to them. If both the reader and the author's style sheet contain important statement statements, the author's statement will overwrite the reader's statement. The following example demonstrates the importance of declaring a CSS property.
<title> cascading</title>
<style type= "Text/css" >
H1 {font-face:arial; font-size:12pt; color:red! important;}
</style>
<body>
</body>
In the above example, you can notice that the color red that is assigned to the style H1 is always useful because it is declared important. It is noteworthy that when an item is declared as important in both the reader and the author's stylesheet, the author's statement will overwrite the reader's statement.
Rule source
A Web user can create and use his or her own style sheet. In this case, a conflict occurs between the user style sheet and the Web application style sheet. When these conflicts occur, Web application settings are better than when all projects have the same importance. It is better to use important declarations than to correspond to unimportant declarations, but when declared as important, it means that Web applications will win.
Characteristics
When CSS rules are characteristic, more specific rules will win priority. So if the selector is all the same, the last one wins first. So the following example always defines H1 as green.
<title>Cascading</title>
<style type= "Text/css" >
H1 {color:red;}
H1 {color:green;}
</style><body>
</body>
On the other hand, the H1 in the body below has a special definition, so the element H1 is shown in red.
<title>Cascading</title>
<style type= "Text/css" >
Body H1 {color:red;}
H1 {color:green;}
</style><body>
</body>
When displaying a page, the more distinctive the selector, the greater the priority. In fact, there are rules specifically designed to estimate the attributes of elements, and basically, numeric values are assigned to some CSS selectors, each selector has a value of 100, the class selector is 10, and the value of each HTML selector is 1. If you assign these values to CSS rules, then a large value wins priority. The following calculation corresponds to the preceding example. The body H1 has two HTML selectors, so the value is 1+1=2. H1 contains an HTML selector, so the value is 1, and in each instance, 2 is greater than 1, so the element H1 (included in the body) is red.
Order
The order of the specification is simple: when the two rules have the same importance, the latter rule has a greater precedence. Using this rule can cause confusion when there are multiple style sheet sources. The following sequence of operations is therefore useful:
Browser defaults: First, the browser defaults or user-defined CSS rules are used.
External style sheet: Using externally defined style sheets
Internal style sheet (named in
Inline style sheet (inside an HTML element): Using a special style applied to each HTML element
Attention
Currently, CSS is a standard feature of most Web applications. As Web applications grow, a large number of CSS sources are used. To do this, you need to get an insight into how the user system handles multiple CSS rules. This ensures that there is no surprise to you or to the user.
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
