不了解前端的UI不是好美工，以下是慕課網HTML+CSS基礎教程學習筆記，不廢話，Start!

第13章 CSS代碼縮寫

13-1 盒子型代碼簡寫

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; 復制代碼

13-2 顏色值縮寫

例1：

p{color:#000000;} 復制代碼

可以縮寫為：

p{color:#000;} 復制代碼

例2：

p{color:#336699;} 復制代碼

可以縮寫為：

p{color:#369;} 復制代碼

13-3 字體縮寫

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 屬性，其他屬性如果不寫，則自動使用默認值。

2.縮寫時，font-size 與line-height 中間要加入"/"。

總結

以上是生活随笔為你收集整理的设计师学习HTML/CSS之路-13的全部內容，希望文章能夠幫你解決所遇到的問題。

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