一、盒模型代碼簡寫 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>relative樣式</title> 6 <sty ...
一、盒模型代碼簡寫
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;
}
前三個順序沒影響可無，後兩個順序固定且必須有
