Some of the CSS shorthand and optimization techniques

The following is a brief introduction to the new owners of CSS shorthand rules and some simple CSS optimization techniques, we Xu some help, the article a little water, we wonder, then. The bottom two CSS techniques can focus on understanding, may be able to bring you some unexpected results.

Color abbreviations
We can # ff0099 abbreviations as # f09 , # ffffff
Abbreviated as # fff . (Tips, tools such as Notepad replacement, can be directly input # ff0099 CSS file, all replaced by # F09 )


Use of line-height vertical center
For example: line-height : 22px ;
, Use the fixed width container need a line perpendicular to the center .


background ( background )
For example:
the background-image : url ( "huceo.png" );
background-position : top center ;
background - repeat : no-repeat ;
Can in fact be written as:
background : url (huceo.png) no-repeat top center ;




Background image path without the quotes
background : url ( "image / huceocom.gif" ) # 999 ;
Can be written as
background : url (images / huceo.gif) # 999 ;


Positioning property value is a value of 0 can remove the unit (such as: px / em)
For example: padding : 10px 8px 0px 0px ;
Shorthand: padding : 10px 8px 0 0;
Equal value may be combined
For example: padding : 10px 8px 10px 8px ;
Shorthand: padding : 10px 8px ;


Margin (margin / margins), Padding (padding) statement:
For example:
margin-top : 0px ;
margin-right : 10px ;
margin-bottom : 0px ;
margin-left : 10px ;
Shorthand for:
margin : 0 10px 0 10px ; (on the - right - down - left)
Again shorthand for:
margin : 0 10px ; (upper and lower value of 0, around a value of 10)


Borders (border attributes)
For example:
the border-width : 1px ;
border-style : solid ;
border-color : # 000 ;
Shorthand for:
border : 1px solid # 000 ;


Shared property
For example: requiring h1 to h6 using the same property, (English comma separated)
h1, h2, h3, h4, h5, h6 and
margin : 0;
padding : 0;
font-size : 12px ;
font-weight : normal ;
....
Have the same properties in CSS can be classified into the use of common property


CSS shorthand techniques, more specific to Baidu. Suggest that you try to use CSS shorthand to optimize the code, reduce file size.




Clear container floating
# Main {
overflow : hidden ;
}


Not to link wrap
a {
white the white-space : nowrap ;
}


Always let Firefox display the scroll bar
html {
overflow :-moz-scrollbars-vertical;
}
Cross-browser support
the body, the html {
min-the height : 101%;
}




The most simple CSS reset
* {
margin : 0; padding : 0
}

CSS image flattening (CSS sprites in)

Can effectively reduce the number of HTTP requests for image files can be multiple small images merged into one big image file will be a certain spacing, for example, the site Sidebar icon (including the search box icon), and three icons above the comment box (name , E-mail, web site) are put together.
Upon completion of the flattening, the system automatically gives the positioning properties of the background-position code to show the flattening of the specified location in the picture.

Using CSS compression
Baidu, compressed CSS file is
compressed to remove spaces, and reduce the readability of the code, but you can save the file sizes, faster download speeds in the application box . Compression do not have to worry about the problem of poor code readability, you can always restore. More convenient in order to maintain modify the CSS of the original file on a compressed file on the same directory, and modify the control line.