CSS簡寫就是指將多行的CSS屬性簡寫成一行,又稱為CSS代碼優化或CSS縮寫。CSS簡寫的最大好處就是能夠顯著減少CSS文件的大小,優化網站整體性能,更加容易閱讀。
下面介紹常見的CSS簡寫規則:
這里主要用于兩個屬性:margin和padding,我們以margin為例,padding與之相同。盒子有上下左右四個方向,每個方向都有個外邊距:
1 2 3 4 | margin-top : 1px ; margin-right : 2px ; margin-bottom : 3px ; margin-left : 4px ; |
你可以簡寫成:
1 | margin : 1px 2px 3px 4px ; |
語法 margin:top right bottom left;
1 2 3 4 5 6 7 8 | //四個方向的邊距相同,等同于 margin : 1px 1px 1px 1px ; margin : 1px ; //上下邊距都為 1px ,左右邊距均為 2px ,等同于 margin : 1px 2px 1px 2px ; margin : 1px 2px ; //右邊距和左邊距相同,等同于 margin : 1px 2px 3px 2px ; margin : 1px 2px 3px ; //注意,這里雖然上下邊距都為 1px ,但是這里不能縮寫。 margin : 1px 2px 1px 3px ; |
二、邊框(border)
邊框的屬性如下:
1 2 3 | border-width : 1px ; border-style : solid ; border-color : #000 ; |
可以縮寫為一句:
1 | border : 1px solid #000 ; |
語法 border:width style color;
背景的屬性如下:
1 2 3 4 5 | background-color : #f00 ; background-image : url (background.gif); background-repeat : no-repeat ; background-attachment : fixed ; background-position : 00 ; |
可以縮寫為一句:
1 | background : #f00 url (background.gif) no-repeat fixed 0 0 ; |
語法是background:color image repeat attachment position; 你可以省略其中一個或多個屬性值,如果省略,該屬性值將用瀏覽器默認值,默認值為:
color: transparent
image: none
repeat: repeat
attachment: scroll
position: 0% 0%
字體的屬性如下:
1 2 3 4 5 | font-style : italic ; font-variant : small-caps ; font-weight : bold ; font-size : 1em ; line-height : 140% ; font-family : "Lucida Grande" , sans-serif ; |
可以縮寫為一句:
1 | font : italic small-caps bold 1em / 140% "Lucida Grande" , sans-serif ; |
注意,如果你縮寫字體定義,至少要定義font-size和font-family兩個值。
取消默認的圓點和序號可以這樣寫list-style:none;, list的屬性如下:
1 2 3 | list-style-type : square ; list-style-position : inside ; list-style-image : url (image.gif); |
可以縮寫為一句:
1 | list-style : square inside url (image.gif); |
六、顏色(Color)
16進制的色彩值,如果每兩位的值相同,可以縮寫一半。例如:
Aqua: #00ffff ——#0ff Black: #000000 ——#000 Blue: #0000ff ——#00f Dark Grey: #666666 ——#666 Fuchsia:#ff00ff ——#f0f Light Grey: #cccccc ——#ccc Lime: #00ff00 ——#0f0 Orange: #ff6600 ——#f60 Red: #ff0000 ——#f00 White: #ffffff ——#fff Yellow: #ffff00 ——#ff0
書寫原則是如果CSS屬性值為0,那么你不必為其添加單位(如:px/em),你可能會這樣寫:
1 | padding : 10px 5px 0px 0px ; |
試試這樣吧:
1 | padding : 10px 5px 00 ; |
八、最后一個分號
最后一個屬性值后面分號可以不寫,如:
1 2 3 4 5 6 | #nav{ border-top : 4px solid #333 ; font-style : normal ; font-variant : normal ; font-weight : normal ; } |
可以簡寫成:
1 2 3 4 5 6 | #nav{ border-top : 4px solid #333 ; font-style : normal ; font-variant : normal ; font-weight : normal } |
九、字體粗細(font-weight)
你可能會這樣寫:
1 2 3 4 5 6 | h 1 { font-weight : bold ; } p{ font-weight : normal ; } |
可以簡寫成:
1 2 3 4 5 6 | h 1 { font-weight : 700 ; } p{ font-weight : 400 ; } |
border-radius是css3中新加入的屬性,用來實現圓角邊框。
1 2 3 4 5 6 7 8 9 | -moz-border-radius-bottomleft: 6px ; -moz-border-radius-topleft: 6px ; -moz-border-radius-topright: 6px ; -webkit-border-bottom-left-radius: 6px ; -webkit-border-top-left-radius: 6px ; -webkit-border-top-right-radius: 6px ; border-bottom-left-radius: 6px ; border-top-left-radius: 6px ; border-top-right-radius: 6px ; |
可以簡寫成:
1 2 3 | -moz-border-radius: 0 6px 6px ; -webkit-border-radius: 0 6px 6px ; border-radius: 0 6px 6px ; |
語法 border-radius:topleft topright bottomright bottomleft
新聞熱點
疑難解答