【font】
簡寫:
font:italic small-caps bold 12px/1.5em arial,verdana;
等效於:
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:arial,verdana;
順序:font-style | font-variant | font-weight | font-size | line-height | font-family
(注:簡寫時,font-size和line-height只能通過斜槓/組成乙個值,不能分開寫)
【background】
簡寫:
background:#fff url(bg.gif) no-repeat fixed left top;
等效於:
background-color:#fff;background-image:url(bg.gif);background-repeat:no-repeat;background-attachment:fixed;background-position:left top;
順序:background-color | background-image | background-repeat | background-attachment | background-position
【margin & padding】
簡寫:
margin:1px 0 2em -20px;
等效於:
margin-top:1px;margin-right:0;margin-bottom:2em;margin-left:-20px;
順序:margin-top | margin-right | margin-bottom | margin-left
(注:padding的簡寫和margin完全一樣)
【border】
簡寫:
border:1px solid #000;
等效於:
border-width:1px;border-style:solid;border-color:#000;
順序:border-width | border-style | border-color
(注:這三句也是簡寫,等於是把四邊的樣式合而為一了)
【border-top / border-right / border-bottom / border-left】
簡寫:
border-top:1px solid #000;
等效於:
border-top-width:1px;border-top-style:solid;border-top-color:#000;
(注:這三句也是簡寫,等於是把四邊的樣式合而為一了)
【list-style】
簡寫:
list-style:square outside url(bullet.gif);
等效於:
list-style-type:square;list-style-position:outside;list-style-image:url(bullet.gif);
順序:list-style-type | list-style-position | list-style-image
【四邊】
四邊的簡寫一般如下:
padding:1px 2px 3px 4px;
等效於:
padding-top:1px;padding-right:2px;padding-bottom:3px;padding-left:4px;
順序:top | right | bottom | left
(注:不論是邊框寬度,還是邊框顏色、邊距等,只要css樣式涉及四邊,順序通通都是「上右下左」的順時針方向)
如果四邊的值省略乙個,只寫三個:
padding:1px 2px 3px;
則等效於:
padding-top:1px;padding-right:2px;padding-bottom:3px;padding-left:2px;
(注:省略的「左」值等於「右」)
如果四邊的值省略兩個:
padding:1px 2px;
則等效於:
padding-top:1px;padding-right:2px;padding-bottom:1px;padding-left:2px;
(注:省略的「下」值等於「上」)
如果只有乙個值:
padding:1px;
則等效於:
padding-top:1px;padding-right:1px;padding-bottom:1px;padding-left:1px;
【顏色】
顏色的簡寫:
color:#fff
等效於:
color:#ffffff 或 color:white
簡寫:
color:#06c
等效於:
color:#0066cc
CSS 背景屬性background簡寫攻略
background color 背景顏色 合法的顏色值 background image 背景影象 url background repeat 如何重複背景影象 no repeat,repeat,repeat x,repeat y background attachment 背景影象是否固定或者隨...
CSS3 動畫簡寫屬性
doctype html en utf 8 viewport content width device width,initial scale 1.0 動畫簡寫屬性 title key frames move 100 div style head div body html tips 1.簡寫屬性裡...
border英文縮寫 CSS 的簡寫屬性
定義 簡寫屬性是讓你同時設定其他幾個 css 屬性值的 css 屬性。使用簡寫屬性,web 開發人員可以編寫更簡潔 更具可讀性的樣式表,節省時間和精力。css 規範把簡寫屬性定義為作用於同一主題的一組屬性。比如 css 的background屬性就是乙個簡寫屬性,它可以定義background co...