CSS簡寫指南

1.margin

1.1 margin:1px 2px 3px(上 左右 下)

1.2 margin:2px 3px(上下 左右)

1.2 margin:1px 3px 2px 3px(上右下左)

2.padding(同上)

3.border

border:1px red solid

(border-width border-color border-style)

1 2 3

border-width：1px 2px 3px; //最多可用四個值，縮寫規則類似盒子大小的縮寫，下同 border-style：solid dashed dotted groove; border-color:red blue white black;

4.background

background:#234 url(./path/img.jpg) no-repeat top left fixed

(background-color background-image background-repeat background-position background-attachment)

1 2 3 4 5

background-color: color || #hex || RGB(% || 0-255) || RGBa; background-image:url(); background-repeat: repeat || repeat-x || repeat-y || no-repeat; background-position: X Y || (top||bottom||center) (left||right||center); background-attachment: scroll || fixed;

5.font

font:italic normal bold 12px/16px serif

(font-style font-variant font-weight font-size / line-height font-family)

1 2 3 4 5 6

font-style: normal || italic || oblique; font-variant:normal || small-caps; font-weight: normal || bold || bolder || || lighter || (100-900); font-size: (number+unit) || (xx-small - xx-large); line-height: normal || (number+unit); font-family:name,"more names";

6.list-style

list-style:none;//常用 用于清楚列表樣式

list-style:circle inside url(../img.gif)

(list-style-type list-style-position?list-style-image)

1 2 3

list-style-type:none || disc || circle || square || decimal || lower-alpha || upper-alpha || lower-roman || upper-roman list-style-position: inside || outside || inherit list-style-image: (url) || none || inherit

?