22 CSS tips to know

1. Change the background and color of the selected text

:: Selection /*  */    background:#c3effd;     Color:#000;} ::-moz-selection /*  */    background:#c3effd;     Color:#000;}

2. Prevent Firefox scroll bar from jumping

HTML { overflow-y:scroll;}

3, pagination printing

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

4. Using!important

{ background-color:blue!important;    background-color:red;}

5. Image Replacement Text

. Header {    text-indent:-9999px;     background:url (' someimage.jpg ') no-repeat;     height: 100px/*dimensions equal to image size*     / Width:500px;}

Callout: text-indent:-9999px; is to indent the first line to the left of the human eye.

6. Minimum height of compatible browser

#container {    height:auto!important; /* All browsers except IE6 would respect the!IMPORTANT flag */     min-height:500px;     height:500px; /* should has the same value as the min height above */}

7, open the new window link highlighting

{    margin:0 5px 0 0;     padding:1px;     outline:1px solid #333;     color:#333;     background:#ff9;     font:12px "Zapf Dingbats";     content: "\279c";}

8. Beautify Li serial number

{    font: italic 1em Georgia, times, serif;     color: #999999;}  {    font: normal. 8em Arial, Helvetica, Sans-serif;     Color: #000000;}

9, the first word sinking

P:first-letter {Display:block; margin:5px 0 0 5px; float:left; color:#FF3366; font-size:3.0em; font-family:Georgia;}

10, browser-compatible opacity

{          filter:Alpha (opacity=50);           -moz-opacity:0.5;           -khtml-opacity: 0.5;           opacity: 0.5;      }

11. Use Line-height to achieve vertical centering

line-height:30px;

12. Center Layout

Body {    width:1000px;     margin:0 auto;}

13. Remove the vertical scrollbar from IE text field

textarea {    overflow:auto;}

14. Move the dotted box of hyperlinks

a:active, A:focus { outline:none;}

15, the element disappears under IE, add to this element

position:relative;

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

{    padding:0 20px 0 0;     background:transparent URL (/graphics/icons/doc.gif) no-repeat centerRight;}

17. CSS hand-click Style

{ cursor:pointer;}

18. Uppercase letters

Text-transform:capitalize;

19, all the English capital, and the first letter than the other big

Font-variant:small-caps;

20, highlight text box, do not support IE

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

21. Remove the IMG border

a img { border:none;}

22. Use the label to implement no table Form

HTML Code

<formMethod= "POST"Action="#" ><P><label for= "username" >Username</label><inputtype= "text"ID= "username"name= "username" /></P><P><label for= "Password" >Username</label><inputtype= "Password"ID= "Password"name= "Pass" /></P><P><inputtype= "Submit"value= "Submit" /></P></form>

CSS Code

P label{    width:100px;    Float:left;    margin-right:10px;    Text-align:right;}

Reference: http://www.cnblogs.com/guoguo-15/archive/2011/08/24/2151859.html

22 CSS tips to know