• 當(dāng)前位置：創(chuàng)新互聯(lián) >> 常見問題 >> 前端開發(fā) >> css >> CSS屬性簡(jiǎn)寫，為網(wǎng)頁加載提速

CSS屬性簡(jiǎn)寫，為網(wǎng)頁加載提速

• 作者：創(chuàng)新互聯(lián) 文章來源：前端開發(fā)部 點(diǎn)擊數(shù)： 更新時(shí)間：2009-10-13
• 通過使用CSS 縮寫以及其他的一些簡(jiǎn)單技巧，你可以在很大程度上減少樣式表的大小，以有效的為網(wǎng)頁加載提速。
  
  【1】、CSS字體屬性的簡(jiǎn)寫優(yōu)化：例如以下的CSS字體屬性：
  .mydiv {
  font-family:Verdana, Geneva, sans-serif;
  font-size:12px;
  font-weight:bold;
  line-height:180%;
  font-variant:small-caps;
  font-style:italic;
  }
  可以優(yōu)化簡(jiǎn)寫為一行：
  .mydiv {
  font: bold italic small-caps 12px/180% Verdana, Geneva, sans-serif;
  }
  同時(shí)將字體的六個(gè)屬性簡(jiǎn)寫為一行，這樣便節(jié)省下了五行代碼；
  
  【2】、magin/padding屬性優(yōu)化：例如我們定義一個(gè)div，設(shè)置它的class為：box
  box {
  margin-top:20px;
  margin-bottom:30px;
  margin-left:10px;
  margin-right:15px;
  }
  這樣代碼我們可以簡(jiǎn)寫為：
  box {
  margin:20px 15px 30px 10px;
  }
  magin/padding屬性優(yōu)化規(guī)則是：四個(gè)值：將 邊距的上、右、下、左值依次寫出來， 具體的可再參考一下上面的代碼，三個(gè)值：假設(shè)是只有box{ margin:20px 15px 10px;} 代碼的縮寫規(guī)則是 上、左右、下；即左右的邊距是15px；兩個(gè)值：例如box{ margin:20px 15px;}，代碼的縮寫規(guī)則是 上下、左右，即上線的邊距是 20px，左右是15px;
  在padding屬性中同理；
  
  【3】、border屬性的缺省優(yōu)化：
  通常可將border的屬性
  css {
  border-width:3px;
  border-style:solid;
  border-color:#f90;
  }
  優(yōu)化簡(jiǎn)寫為：
  css{ border:3px solid #f90;}
  什么是缺省優(yōu)化呢？還是拿上面的例子出發(fā)：以上代碼實(shí)現(xiàn)的是邊框3像素、樣式為solid、顏色為#f90；而實(shí)際中我們只需要設(shè)置其顏色就可以 了，因?yàn)?border-style的缺省值即為：style，所以solid;可以省去不寫，而border-width的缺省值為：medium，差不多為 3-4px,所以3px這個(gè)屬性值可以省去不寫，這樣這行代碼其實(shí)我們就可以簡(jiǎn)寫為 boder-color:#f90;就可以了。
  同理其他的一些css屬性值也是如此，在屬性值和缺省值相等或相同的情況下可以省去不寫。
• CSS基礎(chǔ)教程 將圖像設(shè)置為背景 :上一篇
  css解決英文字符與阿位伯?dāng)?shù)字自動(dòng)換行 :下一篇