五月综合缴情婷婷六月,色94色欧美sute亚洲线路二,日韩制服国产精品一区,色噜噜一区二区三区,香港三级午夜理伦三级三

您現(xiàn)在的位置: 365建站網(wǎng) > 365文章 > 網(wǎng)頁標(biāo)準化:CSS代碼縮寫精簡實例

網(wǎng)頁標(biāo)準化:CSS代碼縮寫精簡實例

文章來源:365jz.com     點擊數(shù):325    更新時間:2009-01-07 22:25   參與評論

一些CSS屬性允許使用一串值代替許多屬性,值使用空格分開。

  margin,pdding和border-width允許合并margin-top-width, margin-right-width, margin-bottom-width等等,形式像這樣:property:top right bottom left;逆時針順序。

  所以下面的代碼:

  p {
  border-top-width: 1px;
  border-right-width: 5px;
  border-bottom-width: 10px;
  border-left-width: 20px;
  }

  可以寫成:

  p {
  border-width: 1px 5px 10px 20px;
  }
  border-width,border-color,border-style同樣可以合并到一起,例如:
  p {
  border: 1px red solid;
  }

  (同樣可以運用到border-top,border-right等等)

  如果只使用兩個值(比如margin: 1em 10em;),第一個值包括頂部和底部,第二個值包括左右。

  字體屬性同樣可以使用font屬性合并。

  p {
  font: italic bold 1em/1.5 courier;
  }

  (上面"/1.5"是 line-height的值)

  把它們總結(jié)在一起,試下下面的代碼:

  p {
  font: 1em/1.5 "Times New Roman", times, serif;
  padding: 3em 1em;
  border: 1px black solid;
  border-width: 1px 5px 5px 1px;
  border-color: red green blue yellow;
  margin: 1em 5em;
  }

  推薦大家使用縮寫形式,促進CSS代碼的精簡、優(yōu)化

本文作者:

如對本文有疑問,請?zhí)峤坏浇涣髡搲瑥V大熱心網(wǎng)友會為你解答??! 點擊進入論壇

發(fā)表評論 (325人查看0條評論)
請自覺遵守互聯(lián)網(wǎng)相關(guān)的政策法規(guī),嚴禁發(fā)布色情、暴力、反動的言論。
昵稱:
最新評論
------分隔線----------------------------

其它欄目

· 建站教程
· 365學(xué)習(xí)

業(yè)務(wù)咨詢

· 技術(shù)支持
· 服務(wù)時間:9:00-18:00
365建站網(wǎng)二維碼

Powered by 365建站網(wǎng) RSS地圖 HTML地圖

copyright © 2013-2024 版權(quán)所有 鄂ICP備17013400號