css 簡寫技巧

一些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 以此類推