CSS Tips Summary: Web page production of the 22 common CSS Tips

Article Introduction: 22 CSS Tips that must be known.

1, change the background and color of selected text

2. :: selection{/* Safari and Opera *
   
3. Background: #c3effd;
   
4. Color: #000;
   
5. }
   
6. ::-moz-selection{/* Firefox *
   
7. Background: #c3effd;
   
8. Color: #000;
   
9. }

2, to prevent the red fox roll Jump

1. html{Overflow-y:scroll;}

3, Paging printing

1. . page-break{Page-break-before:always;}

4. Use!important

1. . page {background-color:blue!important; background-color:red;}

5, the image replaces the text

1. . header{
   
2. text-indent:-9999px;
   
3. Background:url (' someimage.jpg ') no-repeat;
   
4. height:100px; /*dimensions equal to Image size*/
   
5. width:500px;
   
6. }

6, the minimum height of compatible browsers

1. #container {
   
2. Height:auto!important;/*all browsers except IE6 'll respect the!important flag*/
   
3. min-height:500px;
   
4. Height:500px;/*should have the same value as the min height above*/
   
5. }

7, the new window open link highlighted

1. a[target= "_blank"]:before,
   
2. a[target= "new"]:before {
   
3. margin:0 5px 0 0;
   
4. padding:1px;
   
5. outline:1px solid #333;
   
6. Color: #333;
   
7. Background: #ff9;
   
8. font:12px "Zapf Dingbats";
   
9. Content: "\279c";
   
10. }

8, beautify the Li serial number

1. OL {
   
2. Font:italic 1em Georgia, times, serif;
   
3. Color: #999999;
   
4. }
   
5. OL p {
   
6. Font:normal 8em Arial, Helvetica, Sans-serif;
   
7. Color: #000000;
   
8. }

9, the first word sinks

1. p:first-letter{
   
2. Display:block;
   
3. margin:5px 0 0 5px;
   
4. Float:left;
   
5. Color: #FF3366;
   
6. Font-size:3.0em;
   
7. Font-family:georgia;
   
8. }

10, compatible with the browser opacity

1. . transparent_class {
   
2. Filter:alpha (OPACITY=50);
   
3. -moz-opacity:0.5;
   
4. -khtml-opacity:0.5;
   
5. opacity:0.5;
   
6. }

11, using Line-height to achieve vertical center

1. line-height:30px;

12, center layout

1. body{
   
2. width:1000px;
   
3. margin:0 Auto;
   
4. }

13. Remove the vertical scroll bar of IE text field

1. textarea{
   
2. Overflow:auto;
   
3. }

14. Move the dotted box of hyperlinks

1. A:active, a:focus{Outline:none;

15, ie the element disappears, add to the element

1. position:relative;

16, according to the link is not the same, add different icons

1. A[href$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$= '. Doc '] {
   
2. padding:0 20px 0 0;
   
3. Background:transparent URL (/graphics/icons/doc.gif) no-repeat Center right;
   
4. }

17, CSS hand-click Style

1. Input[type=submit],label,select,.pointer {cursor:pointer;}

18, Letter Capital

1. Text-transform:capitalize;

19, all English capitals, and the first letter is larger than the other

1. Font-variant:small-caps;

20, highlighted text box, does not support IE

1. Input[type=text]:focus, input[type=password]:focus{
   
2. border:2px solid #000;
   
3. }

21, remove the IMG border

1. A img{border:none;}

22, use the label to achieve no form form

1. 
   

2. Username
   

3. 
   

4. 
   

5. Username
   

6. 
   

7. 
   

8. 
   
9. 
   
10. P label{
    
11. width:100px;
    
12. Float:left;
    
13. margin-right:10px;
    
14. Text-align:right;
    
15. }