CSS常見簡寫規則整理

標籤：

• 外邊距(margin)

• margin-top
• margin-right
• margin-bottom
• margin-left

簡寫順序為順時針方向（上、右、下、左），如：margin: 1px 2px 3px 4px;

其中四邊都相等時可簡寫為一個，如：margin: 1px;

當上下、左右分別相等時，也可簡寫，如：margin: 1px 2px; 代表上下1px，左右2px

只有左右相等時，可簡寫為：margin: 1px 2px 3px;

但只有上下相等時不可簡寫。

• 內邊距(padding)

• padding-top
• padding-right
• padding-bottom
• padding-left

例：

h1 {  padding-top: 10px;  padding-right: 0.25em;  padding-bottom: 2ex;  padding-left: 20%;  }

規則與外邊距相同，在此就不細說了。

• 邊框(border)

border:2px solid #cdcdcd;

p  {  border:5px solid red;  }

 

分別為border-width、border-style、border-color

除border-style必須提供之外，其它都可省略而使用預設參數，其中border-width預設為3px，border-color預設為黑色。

• 字型(font)

• 背景(background)

可設定屬性（可選）

• background-color
• background-position
• background-size
• background-repeat
• background-origin
• background-clip
• background-attachment
• background-image

 

• 列表(list-style)

list-style:disc outside url(list.png)

分別為list-style-type、list-style-position、list-style-image

 

CSS常見簡寫規則整理