CSS Usage notes

1, Text vertical Center, need to set the element high height and row high line-height equal 2, do not use a small picture to do background tiles such as: 1px, Wide-high 1px picture tile a wide-high 200px area, need 200*200=40, 000 times, occupy resources. 3, no border, recommended writing is border:none; 4, careful use of the * wildcard, the so-called wildcard, is the CSS in all the tags are functioning, a large resource consumption. 5, resolutely do not use CSS expression, CSS is CSS, pull the JavaScript expression come in, not only the performance impact, independence is not. 6, the use of reference style sheet, rather than through the @import import, the introduction of style sheet is loaded with CSS to render the page, user experience is better, do not appear interface initialization disorder phenomenon. 7, know when to use what picture format PNG is a less compressed picture format, very clear, but IE6 does not support PNG-24, but fully support the PNG-8, (if it is opaque png-24,ie6 is also the perfect support) GIF for the low demand for small icons, good compatibility jpg is a compression of a lot of pictures, but also use the most Of 8, IE6 floating label margin double margin bug problem: plus Display:inline solution 9, the DIV layer centered in the browser Horizontal Center: div {width:400px; height:400px; margin:0 Auto////NOTE: The HTML code must be preceded by the following statement of the Declaration, otherwise it cannot be centered. Center Center: div{position:absolute;top:50% left:50%; margin:-100px 0 0-100px;width:200px; height:200px; border:1px solid red; 10, the processing of text often used: Text automatic line: Word-wrap:break-word;              Text to force the same line: White-space:nowrap;          Beyond Line "..." text-overflow:ellipsis; Hidden beyond range: Overflow:hidden; 11, regular use of the naming rules Header: Header Content: Content/container Tail: Footer Navigation: Nav Sidebar: Sidebar Column: Column Page perimeter control overall layout width: Wrapper Left Right Center 12, in order to compatible with the browser needs to restore the label style Page declarations unify with XHTML <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> Global label cleanup <style type= "Text/css" > body,div,label,span,ul,li{border:none;padding:0;margin:0;} Body,button, input, select, textarea {font:12px/1.5 ' song body ', Arial, Sans-serif;} A:focus{outline:none;-moz-outline-style:none;} UL, OL, Li {list-style:none;} img{border:0px;} </style>