Home > Developer > Web Develop
These two days in learning CSS involves inline, outreach, embedding on the page's impact:
1. Inline-----Write CSS code directly in HTML. Use the <style> tag to define the style as an inner 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 stress. Since the browser has finished loading CSS to render the page, it prevents the page from being read by the CSS file.
2, the external-----The CSS code as a separate file, such as the Aaa.css file contains all styles. External cascading in HTML is introduced using the <link> tag statement. The sample code is as follows:
<link href= "Aaa.css" rel= "stylesheet" type= "Text/css"/>
3. Embedded-----Add CSS code directly to the decorated markup element. The sample code is as follows:
<div style= "FLOAT:RIGHT;MARGIN-RIGHT:20PX;PADDING:4PX;" >ITEYE</div>
Here are some of the issues you might encounter:
1. In inline, if a label uses multiple CSS rules at the same time, and the same attribute is assigned differently in these rules, which Rule's attribute value is ultimately displayed on the page? The sample code is as follows:
<style type= "Text/css" >
. aaa{font-size:12px;}
. Bbb{font-size:18px;backgroung-color: #FFF;}
</style>
<body>
<div class= "AAA BBB" >ityeye</div>
</body>
The values displayed on the page are the BBB, which is the attribute in the rule. Because BBB is the last CSS rule to define the attribute.
2. If a tag uses multiple CSS rules at the same time, and the rules are both existing and inline, and in the outer-union, and have different assignments for the same attribute, what is the rule's attribute value in the final page? The sample code is as follows:
<style type= "Text/css" >
. Aaa{font-size:12px;background-color: #036;}
. Bbb{font-size:18px;backgroung-color: #FFF;}
</style>
<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 values displayed on the page are the BBB, which is the attribute in the rule. Because BBB writes higher precedence in an HTML page, the HTML page BBB is the last CSS rule to define the attribute.
3. If a tag uses multiple CSS rules at the same time, and the rules are both existing and inline, there are also embedded in the tag, and the same attribute is assigned different assignment, which is finally displayed in the page which Rule's attribute value? The sample code is as follows:
<style type= "Text/css" >
. Aaa{font-size:12px;background-color: #036;}
. Bbb{font-size:18px;backgroung-color: #FFF;}
</style>
<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 value of the property that is embedded in the tag is displayed in the page. Because the rules embedded in the tag have precedence over, inline, and out-of-the-box.
Summary: Using multiple CSS rules in the same tag, the priority shown in the page is: Embedded is higher than inline, and inline is higher than the inline type. If the same is a different rule in inline or inline, it is related to the position of the rule in the CSS style sheet, showing the property values of the CSS rules that were last defined in the style sheet. In a sentence: the nearest principle, that is, from which CSS rules near the display of which.
How do multiple CSS rules appear on the page in the same tag?
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
