Home > Developer > Web Develop
In the basic Knowledge (iii), said three ways to write CSS style, before all is written in the style tag to write CSS style, and then in the body using the ID selector, class selector and other attachment style.
then the second type is directly attached to the body, followed by the style property. as follows:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Test</title></Head><Body> <Divclass= "C1"style= "background:blue;height:100px;width:100px">In the test</Div></Body></HTML>
The interface displays the blue background frame of the 100*100, as follows: test, such as:
The third way is to use the link tag to introduce a CSS stylesheet. In this way, you first create a new style sheet that writes CSS styles to the style sheet.
The new style sheet name is: Ssa.css, with the contents:
. c1{ background-color:red; height:100px; width:100px;}When the stylesheet is built, use the link tag reference in the original HTML file
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Test</title> <Linkrel= "stylesheet"href= "Ssa.css"></Head><Body> <Divclass= "C1" >In the test</Div></Body></HTML>
The interface displays the red background frame of the 100*100 with the following contents: Test
2. CSS PriorityThree ways to write CSS style, if a place where all three are quoted, then what is the priority?
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Title</title> <Linkrel= "stylesheet"href= "Ssa.css"> <style>. C1{Background-color:Pink;Height:100px;width:100px; } </style></Head><Body> <Divclass= "C1"style= "background-color:blue;height:100px;width:100px"</in > TestDiv></Body></HTML>
The View browser interface is displayed as follows:
In the browser interface point F12, pop-up interface click the mouse button, placed on the display, view the right side of the screen display
we can see that pink and red are not currently displayed, and if we remove the check box in front of blue, the interface is displayed as:
Similarly, the Pink check box is removed, the interface displays
After reading this example, we found that the precedence of CSS is: The Style property in the tag has the highest precedence, followed by the nearest code, that is, in the order from the bottom up, above is the first div tag in the style attribute is the highest priority, followed by the top, first style tag styles, And then the style sheet that link introduces.
If the style label and the link tag are replaced, the interface CSS display's priority will also change, or we can add a style sheet below the style tag to see the priority level
The code for style sheet ssa1.css is as follows:
. c1{ Background-color:green; height:100px; width:100px;}The precedence of the code below verifies the precedence order rules that were previously said:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Title</title> <Linkrel= "stylesheet"href= "Ssa.css"> <style>. C1{Background-color:Pink;Height:100px;width:100px; } </style> <Linkrel= "stylesheet"href= "Ssa1.css"></Head><Body> <Divclass= "C1"style= "background-color:blue;height:100px;width:100px">In the test</Div></Body></HTML>
HTML, CSS Basics (iv)
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
