CSS writing specifications

CSS Writing Specifications [Transfer]

1. The default attributes of elements in different browsers are different. Use Reset to reset some default attributes of browser elements to achieve browser compatibility. /**Clear inner and outer margins **/ body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements structural elements*/ dl, dt, dd, ul, ol, li, /* list elements list elements*/PRe, /* text formatting elements text formatting elements*/ form, fieldset, legend, button, input, textarea, /* form elements form elements*/ th, td, /* table elements table elements*/ img/* img elements Picture elements*/ { border:medium none; margin: 0; padding: 0; } /**Set default font **/body,button, input, select, textarea { font: 12px/1.5 '宋体' ,tahoma, Srial, helvetica, sans-serif; } h1, h2, h3, h4, h5, h6 { font-size: 100%; } em{font-style:normal;} /**Reset list elements **/ ul , ol { list-style: none; } /**Reset hyperlink element **/a { text-decoration: none; color:#333;} a:hover { text-decoration: underline; color:#F40; } /* *Reset image elements **/img{ border:0px;} /**Reset table elements **/ table { border-collapse: collapse; border-spacing: 0; }

2. Good naming habits

3. Code abbreviation li{ font-family:Arial, Helvetica, sans-serif; font-size: 1.2em; line-height: 1.4em; padding-top:5px; padding-bottom:10px; padding-left:5px; } becomes li { font: 1.2em/1.4em Arial, Helvetica, sans-serif; padding:5px 0 10px 5px; }

4. Use CSS inheritance. If multiple child elements of the parent element on the page use the same style, it is best to separate them The same styles are defined on their parent elements, allowing them to inherit these CSS styles. This way you can maintain your code well and reduce the amount of code. Then the original code is like this: #container li{ font-family:Georgia, serif; } #container p{ font-family:Georgia, serif; } #container h1{font-family:Georgia, serif; } #container{ font- family:Georgia, serif; }

5. Using multiple selectors you can combine multiple CSS selectors into one if they have a common style. Doing so not only keeps the code concise but also saves you time and space. For example: h1{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; } h2{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; } h3{ font-family: Arial, Helvetica, sans-serif; font-weight:normal; } can be combined into h1, h2, h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

6. Appropriate code Note

7. Sort your CSS code. If the properties in the code can be sorted alphabetically, it will be faster to find modifications:

/*** Style properties are sorted alphabetically ***/ div{ background-color:#3399cc ; color:#666; font:1.2em/1.4em Arial, Helvetica, sans-serif; height:300px; margin:10px 5px; padding:5px 0 10px 5px; width:30%; z-index:10; } 9 . Choose better style attribute values. Some attributes in CSS use different attribute values. Although the effects are similar, there are differences in performance. For example, the difference is that border:0 sets the border to 0px, although it is not visible on the page. , but according to the default value of border, the browser still renders border-width/border-color, that is, the memory value has been occupied. Border:none sets the border to "none", which means there is no border. When the browser parses "none", it will not perform rendering actions, that is, it will not consume memory values. Therefore, it is recommended to use border:none; Similarly, display:none hides the object browser without rendering and does not occupy memory. And visibility:hidden will.

10. Use instead of @import. First of all, @import does not belong to the XHTML tag and is not part of the Web standard. It is not very compatible with earlier browsers and has some negative effects on the performance of the website. Influence. For details, please refer to "High-Performance Website Design: Don't Use @import". So, please avoid using @import

11. Use external style sheets This principle is always a good design practice. Not only is it easier to maintain and modify, but more importantly, using external files can improve page speed, because CSS files can be cached in the browser. CSS built into the HTML document will be re-downloaded with the HTML document on each request. Therefore, in practical applications, there is no need to build CSS code into HTML documents:

12. Avoid using CSS expressions (Expression) CSS expressions are a powerful (but dangerous) way to dynamically set CSS properties.

13. Code Compression When you decide to deploy your website project to the Internet, you must consider compressing the CSS to remove comments and spaces to make the web page load faster. To compress your code, you can use some tools, such as YUI Compressor. You can use it to streamline CSS code, reduce file size, and obtain higher loading speed. The above is the content of CSS writing specifications. For more related articles, please pay attention to PHP Chinese website (www.php.cn)!