1. 程式人生 > >css 簡寫技巧

css 簡寫技巧

bsp round url eight wid sid cap pos inside

一些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 簡寫技巧