css簡寫屬性格式

2021-07-10 12:33:44 字數 2650 閱讀 3956

【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...