css 簡寫技巧

標籤：add   tac   ges   png   bottom   att   nbsp   round   lis   

一些css  簡寫技巧

1.font 的簡寫  font 有可選選項和必選選項 如 font-style ， font -weight , font-variant ，可寫可不寫， 但如果寫的話必須前置 放到 font-size 和 font-family 前面。 而必選的  font-family 　　必須放到最後面 

p{ font-style:italic; font-weight:bold; font-variant:small-caps; font-size :12px; font-family:Arial;   }可以簡寫成 p{font:italic bold small-caps 12px Arial;}

　2 background 的簡寫

.div{background-color: #000;background-image: url(images/bg.gif);background-repeat: no-repeat;background-attachment:fixed;background-position: top right;}簡寫成.div{background: #000 url(images/bg.gif) no-repeat fixed top right;}

　

3.border 

.div{border-width: 1px;border-style: solid;border-color: #000;}簡寫成.div{border:1px solid #000}

 4.list-style

li{list-style-type:disc;list-style-position:inside;list-style-image:url(‘a.png‘);}簡寫成li{list-style:disc inside url(‘a.png);}

 5.margin padding 

.div{margin-top: 1px;margin-right: 2px;margin-bottom: 3px;margin-left: 4px;}簡寫成.div{margin:1px , 2px ,3px ,4px;//從top 開始的順時針 }
//margin：5px 10px; 上下5px 左右10px
//margin：1px 2px 3px ;上邊距1px  左右2px 下邊距3px
//padding 以此類推

　　

 

　

 

  

css 簡寫技巧