Home > Developer > JavaScript
How can multiple css rules in a tag be displayed on the page ?, Css rules
The impact of inline, external, and embedded on the pages involved in css learning over the past two days:
1. inline style ----- write the css Code directly in html. Use the <style> flag to define the style as an internal block object. The sample code is as follows:
<Style type = "text/css">
<! --
# User_nav {float: right; margin-right: 20px; padding: 4px ;}
-->
</Style>
Inline CSS can effectively reduce HTTP requests, improve page performance, and relieve server pressure. The page can be rendered only after the CSS file is loaded by the browser. This prevents the page from being streaking due to the inability to read the CSS file.
2、 ---save the csscode as a file, for example, the aaa.css file contains all styles. External cascade in HTML is introduced using the <link> MARK statement. The sample code is as follows:
<Link href = "aaa.css" rel = "stylesheet" type = "text/css"/>
3. Embedded ----- add CSS Code directly to the modified Tag Element. The sample code is as follows:
<Div style = "float: right; margin-right: 20px; padding: 4px;"> ITEYE </div>
The following are some possible problems:
1. if multiple CSS rules are used for a tag in an internal connection, and these rules assign different values to the same attribute, which rule attribute value is displayed on the page? The sample code is as follows:
<Head>
<Style type = "text/css">
. Aaa {font-size: 12px ;}
. Bbb {font-size: 18px; backgroung-color: # FFF ;}
</Style>
</Head>
<Body>
<Div class = "aaa bbb"> ityeye </div>
</Body>
The page displays bbb, Which is the property value in the rule. Because bbb is the CSS rule that defines this attribute.
2. If a tag uses multiple CSS rules at the same time, these rules exist both in the inline style and in the external style, in addition, different values are assigned to the same attribute. Which rule attribute value is displayed on the page? The sample code is as follows:
<Head>
<Style type = "text/css">
. Aaa {font-size: 12px; background-color: #036 ;}
. Bbb {font-size: 18px; backgroung-color: # FFF ;}
</Style>
</Head>
<Link herf = "css/mmm.css" ref = "stylesheet" type = "text/css"/>
<Body>
<Div class = "mmm aaa bbb"> ityeye </div>
</Body>
. Mmm {font-size: 18px; backgroung-color: # FFF;}/* written in the mmm.css file */
The page displays bbb, Which is the property value in the rule. Because bbb has a higher priority in HTML pages, bbb is the final CSS rule for this attribute.
3. If a tag uses multiple CSS rules at the same time, these rules exist both in the inline style, in the external style, and embedded in the label, in addition, different values are assigned to the same attribute. Which rule attribute value is displayed on the page? The sample code is as follows:
<Head>
<Style type = "text/css">
. Aaa {font-size: 12px; background-color: #036 ;}
. Bbb {font-size: 18px; backgroung-color: # FFF ;}
</Style>
</Head>
<Link herf = "css/mmm.css" ref = "stylesheet" type = "text/css"/>
<Body>
<Div class = "mmm aaa bbb" style = "font-size: 20px; backgrond-color: 00FF00"> ityeye </div>
</Body>
. Mmm {font-size: 18px; backgroung-color: # FFF;}/* written in the mmm.css file */
The attribute values embedded in tags are displayed on the page. Because the rules embedded in tags have a higher priority than those embedded in inline and External labels.
Conclusion: when multiple CSS rules are used in the same tag, the priority displayed on the page is: Embedded is higher than inline, and inline is higher than external. If they are different rules in the same inline or external style, they are related to the location of the rule in the CSS style sheet. The attribute values of the CSS rule defined in the style sheet are displayed. It is represented in one sentence as follows: the proximity principle, that is, the CSS rule that is near to which is displayed.
<P> is a block element, which is displayed on an independent line. If you want <p> to display the same line, you can give it a "display: inline; "To make it a line element.
How to reference multiple external css in a tag
How can I write the two references?
<Div class = "css name 1 css name 2"> </div>
Note: of course, when css name 1 and css name 2 have the same style attribute definition, css name 2 is the main one.
Example: css name 1 {font-size: 12px} css name 2 {font-size: 24px}
The font size of the DIV is 24px.
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
