從零開始學習html（十三） CSS代碼縮寫，占用更少的帶寬
一、盒模型代碼簡寫
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>relative樣式</title> 6 <style type="text/css"> 7 p{ 8 padding:13px 13px 13px 13px; 9 margin:10px 40px 10px 40px; 10 } 11 </盒模型代碼簡寫style> 12 </head> 13 <body> 14 <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p> 15 </body> 16 </html>
還記得在講盒模型時外邊距(margin)、內邊距(padding)和邊框(border)設置上下左右四個方向的邊距是按照順時針方向設置的：上右下左。
具體應用在margin和padding的例子如下：
margin:10px 15px 12px 14px;/*上設置為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、border的縮寫方法和margin是一致的。
任務
來試試，在代碼編輯器中把margin和padding兩個值修改成縮寫形式。
參考代碼如下：
p{
padding:13px;
margin:10px 40px;
}
盒子模型尺寸＝邊框＋外邊距＋內邊距＋盒子中內容的尺寸
定義順序：上 右 下 左 （順時針）
定義三個值：1（上）2（左右）3（下）
定義兩個值：1（上下） 2（左右）這個順序是上，右，下，左，，，，順時針方向，，，然後如果有簡寫，都是對應式簡寫，
比如只有一個值，代表都是這樣，要是兩個值（代表，上下和左右是一樣的） 要是三個值（代表默認的最後一個left和給定的right是一樣的）
二、顏色值縮寫
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>relative樣式</title> 6 <style type="text/css"> 7 p{ 8 color:#336699; 9 } 10 </style> 11 </head> 12 <body> 13 <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p> 14 </body> 15 </html>顏色值縮寫
關於顏色的css樣式也是可以縮寫的，當你設置的顏色是16進制的色彩值時，如果每兩位的值相同，可以縮寫一半。
例子1：
p{color:#000000;}
可以縮寫為：
p{color: #000;}
例子2：
p{color: #336699;}
可以縮寫為：
p{color: #369;}
任務
來試試，在代碼編輯器中試一試顏色縮形式
- 參考代碼：
- p{
- color:#369;
- }
1：用英文單詞直接描述，如：red,green,black等。
2：用16進制表示，如：#000000,#FFFFFF等
3：用縮寫16進制表示，如：#000，#FFF等
三、字體縮寫
-
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>字體縮寫</title> 6 <style type="text/css"> 7 body{ 8 font-style:italic; 9 font-variant:small-caps; 10 font-weight:bold; 11 font-size:12px; 12 line-height:1.6em; 13 font-family:"宋體",sans-serif; 14 } 15 16 </style> 17 </head> 18 <body> 19 <p>Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible DOMs, broken CSS support, and abandoned browsers.</p> 20 <p>We must clear the mind of the past. Web enlightenment has been achieved thanks to the tireless efforts of folk like the W3C, WaSP, and the major browser creators.</p> 21 <p>The CSS Zen Garden invites you to relax and meditate on the important lessons of the masters. Begin to see with clarity. Learn to use the time-honored techniques in new and invigorating fashion. Become one with the web.</p> 22 </body> 23 </html>
字體縮寫網頁中的字體css樣式代碼也有他自己的縮寫方式，下面是給網頁設置字體的代碼：
body{ font-style:italic; font-variant:small-caps; font-weight:bold; font-size:12px; line-height:1.5em; font-family:"宋體",sans-serif; }這麽多行的代碼其實可以縮寫為一句：
body{ font:italic small-caps bold 12px/1.5em "宋體",sans-serif; }註意：
1、使用這一簡寫方式你至少要指定 font-size 和 font-family 屬性，其他的屬性(如 font-weight、font-style、font-variant、line-height)如未指定將自動使用默認值。
2、在縮寫時 font-size 與 line-height 中間要加入“/”斜扛。
一般情況下因為對於中文網站，英文還是比較少的，所以下面縮寫代碼比較常用：
body{ font:12px/1.5em "宋體",sans-serif; }只是有字號、行間距、中文字體、英文字體設置。
可以挨個解釋含義。
body{
font-style:italic; //設置字體為斜體
font-variant:small-caps; //區分大小寫，瀏覽器會顯示小型大寫字母的字體
font-weight:bold; //設置粗體
font-size:12px; //字號是12像素
line-height:1.5em; //行間距（行高）1.5個行倍
font-family:"宋體",sans-serif;//設置中文字體為宋體，英文字體為sans-serif}body{
簡寫順序：font-style | font-variant | font-weight | font-size | line-height | font-family
font:italic small-caps bold 12px/1.5em "宋體",sans-serif;
}
前三個順序沒影響可無，後兩個順序固定且必須有
從零開始學習html（十三） CSS代碼縮寫，占用更少的帶寬