What does it mean to cascade CSS cascading style sheets?

Source: Internet
Author: User

Basically cascade meaning is "inherit", "Weight", "cover", through good hierarchy naming better implementation effect, less code, more functions, below for the detailed introduction, interested friends don't miss

 

Solution One:

Cascade refers to the priority of a style, whichever is higher when the conflict arises.
1. Developer Style > Reader style > Browser style (unless using!important tags)
2. ID selector > (pseudo) class selector > element selector
3. The weight of the same time to take the following definition of the style

The following is a classic HTML, with three class names for modules, headings, and bodies.
<div class= "mod" >
<div class= "HD" ></div>
<div class= "BD" ></div>
</div>
Most HTML pages can be nested or cumulative from this structure.

Answer two:

CSS cascading refers to the CSS style when the same attribute is configured for the same element, according to the Cascade Rules (weights) to deal with the conflict, select the application of the high weight of the CSS selector specified by the attribute, generally also described as a high weight of the coverage weight is low, so also known as Cascade. Each CSS selector will have a weight (inline 1000,id100,class10,tag1, as you can think), and when two selectors are configured with the same attribute of the same element (such as a setting color:red, another color:black), a conflict occurs. The solution to the conflict is the weight of the CSS selector, the weight of high to cover the low weight.

In addition, inherited attributes are the lightest of the weights and are overwritten by the four definitions above.

CSS semantics actually more refers to the semantics of HTML. For example, here's a code that says:

Copy Code code as follows:


&lt;div class= "box" &gt;


&lt;div class= "H2" &gt; This is the block title &lt;/div&gt;


&lt;div class= "BD" &gt; this is block content &lt;/div&gt;


&lt;div&gt;


But the semantics of the writing can make robot identify the structure of the Web page, the following is the semantics of the wording:

Copy Code code as follows:


&lt;section&gt;


&lt;h2&gt; This is the block title &lt;/h2&gt;


&lt;p&gt; This is block content &lt;/p&gt;


&lt;/section&gt;


For robot, it can recognize the section (block), H2 (level two title), p (text paragraph), but do not recognize the content of the Div, because the div tag itself is not semantic (if necessary by class or ID attribute to give semantics, but this is the suboptimal choice). and HTML5 new article, header, footer, nav, section and other tags is to enrich the HTML native semantic tags, to a large extent, to meet the needs of HTML writing.

Answer three:

My understanding is that cascading refers to the style of the superior tag automatically inheriting to all its subordinate tags, such as the font style set for the <body> tab selector automatically applied to <p> under <body> unless <p> Overridden The associated style to overwrite it.
CSS semantic naming refers to the use of easy to understand the name of the HTML tag appended to the class or ID, such as for the top of the page <div>, you can set its ID header; The <div> at the bottom of the page is set to footer, You can enhance the maintainability of your CSS.

Basically the cascade means "inheritance", "Weight", "overlay", better implementation through good hierarchy naming, less code, more functionality

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.