CSS Optimization Chapter

Usually always say how to optimize, today in detail to write a CSS how to optimize, hey.

First of all, the optimization work of CSS mainly from two aspects

• Network performance : Write CSS to the minimum number of bytes, speed up the download speed, nature can make the page rendering faster
• Syntax Performance : The same can achieve some effects, but not all the way the effect is the same, we have seen a lot of javascript on the syntax optimization knowledge, in fact, there are some CSS

co-write CSS: Can write properties do not write separately, some examples are as followsBackground Property. test{
Background: #000 URL (image.jpg) left top no-repeat;} Background-image:url (image.jpg); Background-position:left top;background-repeat:no-repeat;margin/padding

{margin-top:5px; margin-right:10px; margin-bottom:5px; margin-left:10px;} {margin:5px 10px 5px 10px;} Clockwise

{border-top:2px; border-right:5px; border-left:10px; border-bottom:3px;} {border:2px 5px 10px 3px;}

Font {Font:oblique bold 16px/35px helvetica,arial} font-style:oblique; Font-weight:bold;   font-size:16px; line-height:35px; font-family:helvetical,arial;border:5px solid red;  

• Border-width
• Border-style
• Border-color

do not use@import
The <link> instructions are much slower than the labels, @import not only increasing the number of requests, but also causing unforeseen problems. There are several alternatives: using multiple <link> elements, preferably merging compressed CSS when publishing, reducing the number of HTTP requests

Take advantage of inheritance

When it comes to inheritance, you need to know about weights, and, incidentally, which attributes take precedence in various situations, and prevent abuse of attributes

• The most recent ancestor wins when a style conflict occurs because of inheritance.
• When the inherited style conflicts with a directly specified style, the style that is directly specified wins.
• When a directly specified style conflicts, the style weights win.

CSS selector weights
Tag Selector 1
Class Selector 10
ID Selector 100
Inline Style 1000
Pseudo-Elements (: First-child, etc.) 1
Pseudo-Class (: Link etc) 10

• The style properties of the!important are not overwritten. Cannot abuse!important.
• inline style (belongs to external stylesheet)

<link href= "001.css" type= "Text/css" rel= "Stylesheet"/> 1. It loads the CSS file before the main page file is loaded, so the displayed page is 2 from the beginning with the style effect. After the CSS file, it will overwrite the previous

• Inline style (belongs to internal style sheet)

<style type= "Text/css" >
. main{width:1002px; margin:0 Auto;} </style> import will load CSS files after the entire page is loaded

• Inline style (belongs to internal stylesheet)

Style= "Font-size:10px;font-color: #ff0000"

CSS Optimization Chapter