CSS簡寫就是指將多行的CSS屬性簡寫成一行，又稱為CSS代碼優化或CSS縮寫。CSS

　　簡寫的最大好處就是能夠顯著減少CSS文件的大小，優化網站整體性能，更加容易閱

　　讀。

　　下面介紹常見的CSS簡寫規則：

　　一、盒子大小

　　這里主要用于兩個屬性：margin和padding，我們以margin為例，padding與之相同。

　　盒子有上下左右四個方向，每個方向都有個外邊距：

margin-top:1px;margin-right:2px;margin-bottom:3px;margin-left:4px;

??? 你可以簡寫成：

margin:1px 2px 3px 4px;

?語法 margin: top right bottom left

//四個方向的邊距相同，等同于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)

　　邊框的屬性如下：

?????

border-width:1px; border-style:solid; border-color:#000;

?可以縮寫為一句：

?

?語法 border:width style color;

?

border:1px solid #000;

　三、背景(Backgrounds)

　　背景的屬性如下：

background-color:#f00; background-image:url(background.gif); background-repeat:no-repeat; background-attachment:fixed; background-position:0 0;

?

???? 可以縮寫為一句：

??????語法是background:color image repeat attachment position;

background:#f00 url(background.gif) no-repeat fixed 0 0;

???? 你可以省略其中一個或多個屬性值，如果省略，該屬性值將用瀏覽器默認值，默認值為：

　　color: transparent

　　image: none

?? 　repeat: repeat

　　attachment: scroll

　　position: 0% 0%

　　四、字體(fonts)

　　字體的屬性如下：

font-style:italic; font-variant:small-caps; font-weight:bold; font-size:1em; line-height:140%; font-family:"Lucida Grande",sans-serif;

? 可以縮寫為一句：

font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

?注意，如果你縮寫字體定義，至少要定義font-size和font-family兩個值。

　?? 五、列表(lists)

　　取消默認的圓點和序號可以這樣寫list-style:none;,

　　list的屬性如下:???

list-style-type:square; list-style-position:inside; list-style-image:url(image.gif);

??可以縮寫為一句：

?

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

　　七、屬性值為0

　　書寫原則是如果CSS屬性值為0，那么你不必為其添加單位(如:px/em)，你可能會這樣

　　寫:

padding: 10px 5px 0px 0px;

??? 試試這樣吧：

padding: 10px 5px 0 0;

?

　　八、最后一個分號

　　最后一個屬性值后面分號可以不寫，如：

#nav{ border-top:4px solid #333; font-style: normal; font-variant:normal; font-weight: normal; }

?可簡寫成：

#nav{ border-top:4px solid #333; font-style: normal; font-variant:normal; font-weight: normal }

?

　　九、字體粗細(font-weight)

　　你可能會這樣寫:

h1{ font-weight:bold; } p{ font-weight:normal; }

?可以簡寫成：

h1{ font-weight:700; } p{ font-weight:400; }

?

　　十、圓角半徑(border-radius)

　　border-radius是css3中新加入的屬性，用來實現圓角邊框。

-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;

可以簡寫成:

語法 border-radius:topleft topright bottomright bottomleft

-moz-border-radius:0 6px 6px;-webkit-border-radius:0 6px 6px;border-radius:0 6px 6px;

??

轉載于:https://www.cnblogs.com/xupeiyu/p/3559563.html

總結

以上是生活随笔為你收集整理的10个CSS简写/优化技巧的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。