The most common and practical CSS skills

1. Reset the font size of the browser
Reset the default value of the browser, and then reset the font size of the browser. You can use the CSS solution reset on the Yahoo user interface. If you do not want to download a 9 MB file, Code The Java code is as follows:

1. body, Div, DL, DT, DD, UL, ol, Li, H1, H2, H3, H4, H5, H6, pre, form, fieldset, input, textarea, P,
2. BLOCKQUOTE, Th, TD {margin: 0; padding: 0 ;}
3. table {border-collapse: collapse; border-Spacing: 0 ;}
4. fieldset, IMG {border: 0 ;}
5. address, caption, cite, code, dfn, em, strong, Th, VAR {font-style: normal; font-weight: normal ;}
6. ol, UL {list-style: None ;}
7. caption, Th {text-align: Left ;}
8. H1, H2, H3, H4, H5, H6 {font-size: 100%; font-weight: normal;}
9. q: before, Q: After {content: ";}
10. abbr, acronym {border: 0 ;}

Body, Div, DL, DT, DD, UL, ol, Li, H1, H2, H3, H4, H5, H6, pre, form, fieldset, input, textarea, P, BLOCKQUOTE, Th, TD {margin: 0; padding: 0;} table {border-collapse: collapse; border-Spacing: 0;} fieldset, IMG {border: 0 ;} address, caption, cite, code, dfn, em, strong, Th, VAR {font-style: normal; font-weight: normal;} ol, UL {list-style: none;} caption, Th {text-align: Left;} H1, H2, H3, H4, H5, H6 {font-size: 100%; font-weight: normal ;} q: before, Q: After {content: ";} abbr, acronym {border: 0 ;}
 

Second, we reset the browser font size to 10 pixels, using the following: Java code

1. HTML {font-size: 62.5% ;}

This size is basically suitable, and you can adjust the size as needed, for example, Title 1 is 120 pixels: Java code

1. H1 {font-size: 2em ;}

2. Set horizontal center
Most websites are currently fixed in width. The CSS code is as follows: Java code

1. Div # container {margin: 0 auto ;}

3. control position: absolute position, relative position
Assume that there are two DIV Java Codes

1. <Div id = 'parent'>
2. <Div id = 'son'> </div>
3. </Div>

 
<Div id = 'parent'> <Div id = 'son'> </div>
 

Div has the left and top attributes for positioning.
If the position attribute of the DIV in the inner layer is absolute, it is relative to the position in the upper left corner of the document ..
If the position attribute of the inner Div (the one whose ID is Son) is relative, its left and top values are the distance from the upper left corner of the outer Div.

4. place important elements in the center of the screen
If you want to put what you want at the center, you can use the following CSS: Java code

1. Div. Popup {Height: 400px; width: 500px; position: absolute; top: 50%; left: 50% ;}
2. Div. Popup {margin-top:-200px; margin-left:-250px ;}

 
Div. popup {Height: 400px; width: 500px; position: absolute; top: 50%; left: 50%;} Div. popup {margin-top:-200px; margin-left:-250px ;}
 

You must specify the width and height, and set the top and left attributes to half of them, so that this part can be returned to the center of the screen.

5. Reusable rulesJava code

1. . Left {float: Left ;}
2. . Right {float: Right ;}
3. IMG. Left {border: 2px solid # aaaaaa; margin: 0 10px 0 0;}
4. IMG. Right {border: 2px solid # aaaaaa; margin: 0 0 0 10px; padding: 1px ;}

 
. Left {float: Left ;}. right {float: Right;} IMG. left {border: 2px solid # aaaaaa; margin: 0 10px 0 0;} IMG. right {border: 2px solid # aaaaaa; margin: 0 0 0 10px; padding: 1px ;}
 

Set your own CSS style sheets so that you can directly add tags as needed.

6. Solve the double margin problem of floating elements in IE6.
If float: Left and margin-left: 100px are set for a DIV, this bug will appear in IE6. You only need to set one more display. The Code is as follows: Java code

1. Div {float: Left; margin: 40px; display: inline ;}

7. Simple navigation menu
It is very helpful to preset a navigation bar in your design. Let others have a general understanding of the main content of your web page. The first XHTML: Java code

1. <Div id = "navbar">
2. <Ul>
3. <Li> <a href = "http:// Www.peakflowdesign.com "> peakflow design </a> </LI>
4. <Li> <a href = "http:// Www.google.com ""> Google </a> </LI>
5. <Li> <a href = "http:// Zenhabits.net/"> Zen Habits </a> </LI>
6. </Ul>
7. </Div>

<Div id = "navbar"> <ul> <li> <a href = "http://www.peakflowdesign.com"> peakflow design </a> </LI> <li> <a href =" http://www.google.com "> Google </a> </LI> <li> <a href =" http://zenhabits.net/"> Zen Habits </a> </LI> </ul> </Div>
 

CSS code: Java code

1. # Navbar ul Li {display: inline; margin: 0 10px 0 0;}
2. # Navbar ul Li a {color: #333; display: block; float: Left; padding: 5px ;}
3. # Navbar ul Li A: hover {Background: # Eee; color: black ;}

 
# Navbar ul Li {display: inline; margin: 0 10px 0 0 ;}# navbar ul Li a {color: #333; display: block; float: Left; padding: 5px ;}# navbar ul Li A: hover {Background: # Eee; color: black ;}
 

8. Do not use table form
As we are currently designing table-free for websites, the focus is on using Divs. The table columns and fields are no longer restricted. Therefore, we need some useful CSS to discover Java code in jeddhowden.com.

2. XHTML:
4. <Form action = "form. php" method = "Post">
6. <Fieldset>
8. <Legend> Personal Information </legend>
10. <Div>
12. <Label= "First_name"> First name: </label>
14. <Input type = "text" name = "first_name" id = "first_name" size = "10" value = ""/>
16. </Div>
18. <Div>
20. <Label= "Last_name"> last name: </label>
22. <Input type = "text" name = "last_name" id = "last_name" size = "10" value = ""/>
24. </Div>
26. <Div>
28. <Label= "Postal"> zip/postal code: </label>
30. <Input type = "text" name = "Postal" id = "Postal" size = "10" value = ""/>
32. </Div>
34. </Fieldset>
36. </Form>

XHTML: <form action = "form. PHP "method =" Post "> <fieldset> <legend> Personal Information </legend> <div> <label for =" first_name "> First name: </label> <input type = "text" name = "first_name" id = "first_name" size = "10" value = ""/> </div> <label for = "last_name"> Last Name: </label> <input type = "text" name = "last_name" id = "last_name" size = "10" value = ""/> </div> <label for = "postal"> zip/postal code: </label> <input type = "text" name = "Postal" id = "Postal" size = "10" value = ""/> </div> </fieldset> </form>
 

Java code

1. CSS:
2. Form Div {clear: Left; display: block; width: 400px; ZOOM: 1; margin: 5px 0 0 0; padding: 1px 3px ;}
3. Form Div label {display: block; float: Left; width: 130px; padding: 3px 5px; margin: 0 0 5px 0; text-align: Right ;}

 
CSS: Form Div {clear: Left; display: block; width: 400px; ZOOM: 1; margin: 5px 0 0 0; padding: 1px 3px;} form Div label {display: block; float: Left; width: 130px; padding: 3px 5px; margin: 0 0 5px 0; text-align: Right ;}
 

9. Keep footer at the bottom of the page
The company version information is always kept at the bottom of the webpage. How can this information be implemented? This is an old technology, thanks to the man in blue. Java code

1. XHTML:
2. <Body>
3. <Div id = "nonfooter">
4. <Div id = "content"> * place all page content here * </div>
5. </Div>
6. <Div id = "footer"> * place anything you want in your footer here *
7. </Div>
8. </Body>

 
XHTML: <body> <Div id = "nonfooter"> <Div id = "content"> * place all page content here * </div> <Div id = "footer ""> * place anything you want in your footer here * </div> </body>
 

Java code

1. CSS:
2. HTML, body {Height: 100% ;}
3. # Nonfooter {position: relative; Min-Height: 100% ;}
4. * Html # nonfooter {Height: 100% ;}
5. # Content {padding-bottom: 9em ;}
6. # Footer {position: relative; margin-top:-7.5em ;}

 
CSS: HTML, body {Height: 100% ;}# nonfooter {position: relative; Min-Height: 100% ;}* html # nonfooter {Height: 100% ;} # Content {padding-bottom: 9em;} # footer {position: relative; margin-top:-7.5em ;}
 

10. Use multiple types on the same element
With more and more useful functions, most people ignore the choice of internal CSS. Many classes can be applied to an element, such as Java code.

1. . Red {color: red ;}
2. . Bold {font-weight: strong ;}

 
. Red {color: red;}. Bold {font-weight: strong ;}
 

We can use it: Java code

1. <P class = "Red bold"> This text will be red yet also bold! </P>

11. Scroll display of background

1. CSS

. Header {Height: pixel PX; Background: URL (http://s3.cr.itc.cn/img/kids/bg_111.png) Repeat-X; display: block; content: "\ 0020"; clear: Both; Height: 0}

2. HTML code

<Div class = "Header" id = "headercloud">
</Div>

3. JavaScript code

Window. addevent ('domainready', function (){
$ ('Headercloud'). setstyle ('background-position', '0 0 ');
Setinterval (function (){
VaR Pos = $ ('headercloud'). getstyle ('background-position'). Split ('') [0];
Pos = pos. Replace ('pt', ''). Replace ('px ','');

If (parseint (POS)> 10000) Pos = 1;
Pos = (parseint (POS) + 1) + 'px 0px'
$ ('Headercloud'). setstyle ('background-position', POS );
}, 50 );
});