CSS代碼縮寫－占用更少的帶寬
盒模型代碼縮寫
- 盒模型中外邊距（margin）奸披、內(nèi)邊距（padding）和邊框（border）設(shè)置上下左右四個(gè)方向的距離時(shí)是按照順時(shí)針方向設(shè)置的：上右下左。具體應(yīng)用在margin和padding的例子如下：
// 上設(shè)置為10px倔毙、右設(shè)置為15px、下設(shè)置為12px阅仔、左設(shè)置為14px
margin:10px 15px 12px 14px;
// 1傍菇、如果top丸升、right、bottom佑颇、left的值相同顶掉，如下：
margin:10px 10px 10px 10px;
// 可縮寫為
margin:10px;
// 2、如果top和bottom值相同挑胸，left和right的值相同痒筒，如下：
margin:10px 20px 10px 20px;
// 可縮寫為
margin:10px 20px;
// 3、如果left和right的值相同茬贵，如下：
margin:10px 20px 30px 20px;
// 可縮寫為
margin:10px 20px 30px;
// padding的縮寫方法和margin是一致的
顏色值縮寫
- 關(guān)于顏色的css樣式也是可以縮寫的凸克，當(dāng)你設(shè)置的顏色是16進(jìn)制的色彩值時(shí)，如果每?jī)晌坏闹迪嗤屏ぃ梢钥s寫一半
// 實(shí)例
p {color: #000000;}
// 可縮寫為
p {color: #000;}
p {color: #336699;}
// 可縮寫為
p {color: #369}
字體縮寫
- 網(wǎng)頁(yè)中的字體css樣式代碼也有對(duì)應(yīng)的縮寫方式
// 下面是給網(wǎng)頁(yè)設(shè)置字體的代碼
body{
font-style: italic; // 設(shè)置字體風(fēng)格
font-variant: small-caps; // 以小型大寫字體或者正常字體顯示文本
font-weight: bold; // 設(shè)置字體的粗細(xì)
font-size: 12px; // 設(shè)置字體的尺寸
line-height: 1.5em; // 設(shè)置行高（行間距）
font-family: "宋體",sans-serif; // 設(shè)置字體系列
}
// font 語法：
font: [[<font-style> || <font-variant> || <font-weight>]? <font-size>[/<line-height>?<font-family>];
// 所以上面這串設(shè)置字體的代碼可以縮寫為
body{
font: italic small-caps bold 12px/1.5em "宋體",sans-serif;
}
// 注意：
// 1萎战、使用這一簡(jiǎn)寫方式至少要指定font-size和font-family屬性，其他的屬性（如font-style舆逃、font-variant蚂维、font-weight、line-height）如未指定將自動(dòng)使用默認(rèn)值
// 2路狮、在縮寫時(shí)font-size與line-height中間要加入“/”斜杠
// 一般情況下因?yàn)閷?duì)于中文網(wǎng)站虫啥，英文還是比較少的，所以下面縮寫代碼比較常用：
body {
font: 12px/1.5em "宋體", sans-serif;
}
// 只是有字號(hào)奄妨、行間距涂籽、中文字體、英文字體設(shè)置
- 注意：我們?cè)O(shè)置css樣式時(shí)砸抛，如果設(shè)置了某些樣式的縮寫屬性评雌，比如字體的
font树枫，背景圖片的background等，之后我們又想對(duì)其中的個(gè)別屬性單獨(dú)設(shè)置景东，比如行高line-height砂轻，要注意，單獨(dú)設(shè)置的屬性一定要寫在縮寫屬性的后面斤吐，或者使其對(duì)應(yīng)選擇器的權(quán)值更高搔涝，不然縮寫屬性中的默認(rèn)值會(huì)覆蓋我們單獨(dú)給某屬性設(shè)置的值
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
