ショートハンドプロパティで効率的に

CSSコーディングを効率的かつ見やすく仕上げるには、短縮表示OKなショートハンド対応のプロパティを効果的に使います。
よく使うものではmargin、padding、background、borderなどがあります。

●margin、padding

[4つの値を指定] margin:上 右 下 左 ;
[3つの値を指定] margin:上 左右 下 ;
[2つの値を指定] margin: 上下 左右 ;
[1つの値を指定] margin: 上下左右 ;
・単位はpx、%、emなど

ちなみに、emとはフォントの高さを1とする単位で、exとは小文字の「x」の高さを1とする単位です。

●background

background:  色  | 画像 |  リピート指定  | 表示指定  | 左右位置  |上下位置
初期値      透明 | なし  | repeat        | scroll      | 0px      |0px

色 : #fff
画像 :url(sample.gif)
リピート指定 : repeat|no-repeat|repeat-x|repeat-y
表示指定 : scroll|fix
左右位置 : 数値指定(px、%、em) left|center|right
上下位置 : 数値指定(px、%、em) top|center|bottom

左右位置と上下位置については注意が必要です。leftなどキーワード指定では順不同ですが、数値の場合には上記順番になります。
また数値入力の場合表示位置を左、または上からのオフセットとなります。どの値についても省略可能。

●border

border:   線幅  | 線種  | 色     ;
初期値   ブラウザ| solid | ブラウザ

線幅:数値(px,em)
色: #ccc
線種:
solid (1本線)、
double(2本線)、
dashed(破線) 、
dotted(点線)、
groove (立体的に窪んだ線)、
ridge (立体的に隆起した線)、
inset (上と左のボーダーが暗く、下と右のボーダーが明るく表示され、囲まれた領域全体が立体的に窪んだように表示されます。上下左右の一部指定では不可。 )
outset(上と左のボーダーが明るく、下と右のボーダーが暗く表示され、囲まれた領域全体が立体的に隆起したように表示されます。上下左右の一部指定では不可。)