[Conclusion]
I,UseCSSDisplay of style control page
- Intra-row style
<P style = "color: red; font-size: 14px;">
- Embedded
<Head>
<Title> page title </title>
<Style type = "text/CSS">
Body {
Margin: 0 auto;
Width: 960px;
}
</Style>
</Head>
- Link Type
<Head>
<Link href=”mycss.css "type =" text/CSS "rel =" stylesheet ">
</Head>
- Import Style
<Head>
<Style type = "text/CSS">
@ Import url(“mycss.css ");
</Style>
</Head>
II,CSSSelector
- Tag Selector
For example, the Li selector is used to declare the style of all <li> tags on the page.
<Style type = "text/CSS">
Li {
Color: red;
Text-Decoration: none;
}
</Style>
- CATEGORY selector. Class
. Error {color: red; font-size: 17px ;}
Note: Another more intuitive way to use the class selector is to distinguish the class name directly after the label is declared.
For example: h3.first _ class {color: Green}
- Id Selector
The ID selector is basically the same as the class selector. The difference is that the ID selector can only be used once on the HTML page, so it is more targeted.
For example: # Once {font-weight: bold; font-size: 30px ;}
- Collective declaration of selector, applicable to situations where the style of some selector is identical or partially identical.
For example, H1, H2, H3, P {color: Purple; font-size: 14px ;}
H2.special,. Special, # Once {text-Decoration: underline ;}
- Selector nesting. nesting can be used to declare HTML tags in special locations.
For example, p B {color: yellow; font-size: 30px ;}
It takes effect only for the B mark under the p Mark and does not take effect for the B mark outside the p Mark.
Note: Typical nested statements
1). Second I {color: black;}/* takes effect only for the <I> mark that uses the second class */
2) # first Li {padding-left: 8px;}/* The <li> flag in the tag with ID first takes effect */
3) UL Li {list-style: none ;}
4) TD. Top, top1 strong {font-szie: 10px;}/* multiple nesting */
- Child selector, indicating to select a direct child element of the parent element, with the symbol ">"
For example, ul. mylist> LI> A {text-Decoration: none ;}
<Ul class = "mylist">
<Li> <a href = "#"> link </a> </LI>/* only applies to this sentence because the sub-Selector */
</Ul>
<Li> <a href = "#"> link2 </a> </LI>/* This sentence does not work */
If it is changed to Ul. mylist> Li a {...}, all <A> tags take effect.
Iii. Skills
- Common webpage width: 960px;
- Use Div to implement layout of one row and two columns
<Div>
<Div class = "Left"> first column </div>
<Div class = "right"> second column </div>
</Div>
Note: 1) the sum of the width of the two columns cannot be greater than the width of the parent div;
2) float: left/right for one of the columns;
- Use Div to implement layout of one row and three columns
<Div>
<Div class = "left_mid">
<Div class = "Left"> first column </div>
<Div class = "mid"> second column </div>
</Div>
<Div class = "right"> third column </div>
</Div>
Note: 1) the sum of the width of the three columns cannot be greater than the width of the parent Div;
2) The float attribute of the control column.
- The default hyperlink style of the browser is: Blue + underline, and after clicking: Purple + underline.
- Differences between Div and span tags
1) div is a block-level element, and all its elements are automatically wrapped;
2) A span is an element in a row that does not wrap a line.
- About the margin and padding attributes
1) if the attribute is connected and written, it is abbreviated as the top, right, bottom, and left order rule clockwise;
2) When the attribute values are the same as those of the lower, left, and right, they can be abbreviated as: margin: 40px 50px;
3) When both the top, bottom, and left attributes are consistent, the value can be abbreviated as: margin: 60px;
- Center the elements in the webpage
Width: 960px;
Margin: 0 auto;
- Div with float configured doubles the margin value in IE6, which is a bug in IE6.
Solution: Add display: inline to the DIV style.
- Solve the vertical center problem of Div
Vertial-align: Middle
Line-Height: div 'height
- Difference between ID and class
1) The ID cannot be repeated, and the class can be used repeatedly.
2) The priority of ID is higher than that of class.
3) ID saves time in some situations
- Set flash to transparent
<Param name = "wmode" value = "Transparent">
I,UseCSSDisplay of style control page
- Intra-row style
<P style = "color: red; font-size: 14px;">
- Embedded
<Head>
<Title> page title </title>
<Style type = "text/CSS">
Body {
Margin: 0 auto;
Width: 960px;
}
</Style>
</Head>
- Link Type
<Head>
<Link href=”mycss.css "type =" text/CSS "rel =" stylesheet ">
</Head>
- Import Style
<Head>
<Style type = "text/CSS">
@ Import url(“mycss.css ");
</Style>
</Head>
II,CSSSelector
- Tag Selector
For example, the Li selector is used to declare the style of all <li> tags on the page.
<Style type = "text/CSS">
Li {
Color: red;
Text-Decoration: none;
}
</Style>
- CATEGORY selector. Class
. Error {color: red; font-size: 17px ;}
Note: Another more intuitive way to use the class selector is to distinguish the class name directly after the label is declared.
For example: h3.first _ class {color: Green}
- Id Selector
The ID selector is basically the same as the class selector. The difference is that the ID selector can only be used once on the HTML page, so it is more targeted.
For example: # Once {font-weight: bold; font-size: 30px ;}
- Collective declaration of selector, applicable to situations where the style of some selector is identical or partially identical.
For example, H1, H2, H3, P {color: Purple; font-size: 14px ;}
H2.special,. Special, # Once {text-Decoration: underline ;}
- Selector nesting. nesting can be used to declare HTML tags in special locations.
For example, p B {color: yellow; font-size: 30px ;}
It takes effect only for the B mark under the p Mark and does not take effect for the B mark outside the p Mark.
Note: Typical nested statements
1). Second I {color: black;}/* takes effect only for the <I> mark that uses the second class */
2) # first Li {padding-left: 8px;}/* The <li> flag in the tag with ID first takes effect */
3) UL Li {list-style: none ;}
4) TD. Top, top1 strong {font-szie: 10px;}/* multiple nesting */
- Child selector, indicating to select a direct child element of the parent element, with the symbol ">"
For example, ul. mylist> LI> A {text-Decoration: none ;}
<Ul class = "mylist">
<Li> <a href = "#"> link </a> </LI>/* only applies to this sentence because the sub-Selector */
</Ul>
<Li> <a href = "#"> link2 </a> </LI>/* This sentence does not work */
If it is changed to Ul. mylist> Li a {...}, all <A> tags take effect.
Iii. Skills
- Common webpage width: 960px;
- Use Div to implement layout of one row and two columns
<Div>
<Div class = "Left"> first column </div>
<Div class = "right"> second column </div>
</Div>
Note: 1) the sum of the width of the two columns cannot be greater than the width of the parent div;
2) float: left/right for one of the columns;
- Use Div to implement layout of one row and three columns
<Div>
<Div class = "left_mid">
<Div class = "Left"> first column </div>
<Div class = "mid"> second column </div>
</Div>
<Div class = "right"> third column </div>
</Div>
Note: 1) the sum of the width of the three columns cannot be greater than the width of the parent Div;
2) The float attribute of the control column.
- The default hyperlink style of the browser is: Blue + underline, and after clicking: Purple + underline.
- Differences between Div and span tags
1) div is a block-level element, and all its elements are automatically wrapped;
2) A span is an element in a row that does not wrap a line.
- About the margin and padding attributes
1) if the attribute is connected and written, it is abbreviated as the top, right, bottom, and left order rule clockwise;
2) When the attribute values are the same as those of the lower, left, and right, they can be abbreviated as: margin: 40px 50px;
3) When both the top, bottom, and left attributes are consistent, the value can be abbreviated as: margin: 60px;
- Center the elements in the webpage
Width: 960px;
Margin: 0 auto;
- Div with float configured doubles the margin value in IE6, which is a bug in IE6.
Solution: Add display: inline to the DIV style.
- Solve the vertical center problem of Div
Vertial-align: Middle
Line-Height: div 'height
- Difference between ID and class
1) The ID cannot be repeated, and the class can be used repeatedly.
2) The priority of ID is higher than that of class.
3) ID saves time in some situations
- Set flash to transparent
<Param name = "wmode" value = "Transparent">
