fontフォントをまとめて設定
p { font: italic bold 12pt/15pt serif;}font-style[略可]/font-variant[略可]/font-weight[略可]/font-size/line-height[略可]/font-family の順。
font-size と line-height は、/で区切り、1つのときはfont-size.
font-familyフォントファミリ名
p { font-family: "New York";} フォントファミリ名の種類は多い。
p { font-family: "New York", Times, serif;}複数名前を列挙すると先頭の方が優先順位が高い。
font-sizeフォントサイズ
h1 { font-size: large;}xx-small | x-small | small | medium | large | x-large | xx-large

a | a | a | a | a | a | a
em { font-size: larger;} larger | smaller
larger | smaller
p { font-size: 12pt;} 数値で直接指定(ポイントやミリメートル)
8pt  12pt  16pt
em { font-size: 120%;} パーセントで指定
80%  120%  160%
font-styleフォントスタイル
h1 { font-style: italic;} normal(標準) | italic(斜体) | oblique(斜め)
font-variantsmall-caps
H2 { font-variant: small-caps;} normal(標準) | Small-Caps(大文字が小文字のように少し小さい表示)
font-weightフォントの太さ
p { font-weight: normal;} lighter(細)| normal(標準)| bold(太) | bolder(もっと太)
lighter | normal | bold | bolder
p { font-weight: 400;}100| 200| 300| 400(標準)| 500| 600| 700| 800| 900
100 | 200 | 300 | 400| 500 | 600 | 700 | 800 | 900
background背景をまとめて設定
p { background: url(bkg.gif) blue 50% repeat fixed;}background-color/ background-image/ background-repeat/ background-attachment/ background-position の順。すべて略可
background-attachment背景画像の固定
body { background: white url(leftside.gif);
    background-attachment: fixed;}
scroll | fixed

scroll : 内容とともにスクロール(ディフォルト)

fixed : 常に固定

background-color背景色
h1 { background-color: red;} aqua | gray | navy | silver | black |
green | olive | teal | blue | lime | purple |
white | fuchsia | maroon | red | yellow
h1 { background-color: #ff0000;} rrggbbで指定
h1 { background-color: #f00;} rgbで指定(#abcは#aabbccと同じ)
body { background-color: rgb(255, 0, 0)} 10進数強度(0〜255)で指定
body { background-color: rgb(100%, 0%, 0%);} 10進数比率(0%〜100%)で指定
background-image背景画像
body { background-image: url(http://uso.com/a.gif);} url(画像のURL)

URL は絶対パス もしくは 相対パス。

相対パスはCSSファイルの位置を基準

URLに空白を含むときはダブルクォーテーション(")またはシングルクォーテーション(\')でくくる

background-position背景画像の位置
body {
    background-image: url(a.gif);
    background-attachment: fixed;
    background-position: 50% 50%;}
パーセントで指定

最初の指定は左端から、次は上端からの値

一つの場合は、左端から、上端からの両方とも同じ値となる

p { background-image: url(a.gif);
    background-position: 2cm 3cm;}
数値で指定

最初の指定は左端から、次は上端からの値

一つの場合は、左端から、上端からの両方とも同じ値となる

body {background-image: url(back.gif);
    background-position: top center;}
left | center | right   top | center | bottom

left : 0%と同

center : 50%と同

right : 100%と同様

top : 0%と同様

center : 50%と同様

bottom : 100%と同様

background-repeat背景画像の並び
body { background: white url(leftside.gif);
    background-repeat: repeat-y;}
repeat | repeat-x | repeat-y | no-repeat

repeat : 背景を埋めつくす (初期値)

repeat-x : 一番上に横方向に1列

repeat-y : 左側に縦方向に1列

no-repeat : 1つだけ表示

color文字色
h1 { color: red;}aqua | gray | navy | silver | black |
green | olive | teal | blue | lime | purple |
white | fuchsia | maroon | red | yellow
h1 { color: #ff0000;} rrggbbで指定
h1 { color: #f00;} rgbで指定(#abcは#aabbccと同じ)
h1 { color: rgb(255, 0, 0);} 10進数強度(0〜255)で指定
h1 { color: rgb(100%, 0%, 0%);} 10進数比率(0%〜100%)で指定
letter-spacing文字間隔
h1 { letter-spacing: normal;}normal 標準設定
h1 { letter-spacing: 1.0mm;} 数値で直接指定(ポイントやミリメートル)
this is sample.
line-height行間
p { line-height: normal;}normal 標準設定
p { line-height: 1.5;} 標準の高さの何倍かを数値で指定
p { line-height: 1.5em;} 単位つきの数値で直接指定
p { line-height: 150%;} パーセントで指定
text-align行揃え
p { text-align: justify;}left | right | center | justify
text-decoration文字の装飾
a:link { text-decoration: underline;} none | underline | overline | line-through | blink

blink は、Mozilla系のみ

text-indentインデント
p { text-indent: 4em;} 数値で直接指定(ポイントやミリメートルなど)
p { text-indent: 100%;} パーセントで指定
text-transform大文字・小文字
h1 { text-transform: uppercase;} capitalize | uppercase | lowercase | none

Capitalize:1文字目大文字

UPPERCASE(すべて大文字)

lowercase(すべて小文字)

none(そのまま)

vertical-align縦方向の位置揃え
img { vertical-align: top;}baseline | top | middle | bottom
img { vertical-align: super;} baseline | sub | super |

sub:下付き文字

super:上付き文字

word-spacing単語の間隔
h1 { word-spacing: normal;}normal 標準設定
h1 { word-spacing: 0.4em;} 数値で直接指定(ポイントやミリメートル)
this is sample.
border同じ枠の幅・スタイル・色
p { border: thick solid blue;}border-width/border-style/color の順
下記と同じ設定になる。p {
    border-top: thick solid blue;
    border-right: thick solid blue;
    border-bottom: thick solid blue;
    border-left: thick solid blue
}
p { border: none;}上下左右の罫線が消える。
border-bottom下枠の幅・スタイル・色
h1 { border-bottom: thick solid blue;}border-bottom-width/border-style/color の順
p { border-bottom: none;}下の罫線が消える。
border-bottom-color下枠の色
border-bottom-style下枠のスタイル
border-bottom-width下枠の幅
p { border-bottom-width: thin;}thin(細)| medium(中)| thick(太)(太さ:ブラウザ依存)
p { border-bottom-width: 0.3em;} 単位つきの数値で直接指定
border-color枠の色
p { border-color: red } aqua | gray | navy | silver | black |
green | olive | teal | blue | lime | purple |
white | fuchsia | maroon | red | yellow
p { border-color: #ff0000;} 16進数のRGB値で指定
p { border-color: #f00;} 16進数のRGB値で指定
p { border-color: rgb(255, 0, 0);} 10進数のRGB値で指定
p { border-color: rgb(100%, 0%, 0%);} 10進数のRGB値で指定
p { border-color: red;} 上下左右
p { border-color: red blue;} 上下・左右
p { border-color: red blue white; } 上・左右・下
p { border-color: red blue white black;} 上・右・下・左
border-left左枠の幅・スタイル・色
h1 { border-left: thick solid blue;}border-left-width/border-style/color の順
p { border-left: none;}左の罫線が消える。
border-left-color左枠の色
border-left-style左枠のスタイル
border-left-width左枠の幅
p { border-left-width: thin;}thin(細)| medium(中)| thick(太)(太さ:ブラウザ依存)
p { border-left-width: 0.3em;} 単位つきの数値で直接指定
border-right右枠の幅・スタイル・色
h1 { border-right:thick solid blue;}border-right-width/border-style/color の順
p { border-right: none;}右の罫線が消える。
border-right-color右枠の色
border-right-style右枠のスタイル
border-right-width上右下左枠の幅
p { border-right-width: thin;}thin(細)| medium(中)| thick(太)(太さ:ブラウザ依存)
p { border-right-width: 0.3em;} 単位つきの数値で直接指定
border-style上下左右の枠のスタイル
p { border-style: solid;}none(枠の表示なし)| dotted(点)| dashed(点線)| solid(単一線)| double(2重線)| groove(窪んだ線)| ridge(出っ張った線)| inset(窪んだボックス)| outset(出っ張ったボックス)
p { border-style: dotted;} 上下左右
p { border-style: dotted dashed;} 上下・左右
p { border-style: dotted dashed double;} 上・左右・下
p { border-style: dotted dashed double groove;} 上・右・下・左
border-top上枠の幅・スタイル・色
h1 { border-top: thick solid blue;}border-top-width/border-style/color の順
p { border-top: none;}上の罫線が消える。
border-top-color上枠の色
border-top-style上枠のスタイル
border-top-width上枠の幅
p { border-top-width: thin;}thin(細)| medium(中)| thick(太)(太さ:ブラウザ依存)
p { border-top-width: 0.3em;} 単位つきの数値で直接指定
border-width上下左右の枠の幅
p { border-width: thin;}thin(細)| medium(中)| thick(太)(太さ:ブラウザ依存)
p { border-width: 4em } 単位つきの数値で直接指定 上・下・左・右
p { border-width: 3em 5em;} 単位つきの数値で直接指定 上下・左右
p { border-width: 1em 2em 3em;} 単位つきの数値で直接指定 上・左右・下
p { border-width: 1em 2em 3em 4em;} 単位つきの数値で直接指定 上・右・下・左
clear文字の回り込み解除
h1 { clear: left;}none | left | right | both

none : 両側の回り込みを許可

left : ボックスの右側にテキストを表示する指定を解除

right : ボックスの左側にテキストを表示する指定を解除

both : 両側にあるボックスの間にテキストを表示する指定を解除

float文字の回り込み
img.button { float: left;}none | left | right

none : 回込みしない

left : ボックスをテキストの左に配置

right : ボックスをテキストの右に配置

height高さ
img.button { height: auto;}auto 自動設定
img.button { height: 20px;} 単位つきの数値で直接指定
margin上右下左マージン
body { margin: auto;}上下左右とも自動設定する。
左右自動設定の場合、中央寄せになる。
body { margin: 10% 10%;}パーセントで指定する。
2つ指定する場合は、上下・左右の順
body { margin: 1em 2em 3em;}単位つきの数値で直接指定する。
3つ指定する場合は、上・左右・下の順
body { margin: 1px 2px 3px 4px;}ピクセル単位の数値で直接指定する。
4つ指定する場合は、上・右・下・左の順
margin-bottom下マージン
h1 { margin-bottom: auto;}自動設定
h1 { margin-bottom: 3em;} 単位つきの数値で直接指定(ポイントやミリメートル)
h1 { margin-bottom: 10%;} パーセントで指定
margin-left左マージン
h1 { margin-left: auto;}自動設定
h1 { margin-left: 3em;} 単位つきの数値で直接指定(ポイントやミリメートル)
h1 { margin-left: 10%;} パーセントで指定
margin-right右マージン
h1 { margin-right: auto;}自動設定
h1 { margin-right: 3em;} 単位つきの数値で直接指定(ポイントやミリメートル)
h1 { margin-right: 10%;} パーセントで指定
margin-top上マージン
h1 { margin-top: auto;}自動設定
h1 { margin-top: 3em;} 単位つきの数値で直接指定(ポイントやミリメートル)
h1 { margin-top: 10%;} パーセントで指定
padding枠と内容の間隔まとめて設定
body { padding: 10%;} 上下左右 パーセントで指定
body { padding: 3em 5em;} 上下と左右 単位つきの数値で直接指定
body { padding: 1em 2em 3em;} 上・左右・下 単位つきの数値で直接指定
body { padding: 1em 2em 3em 4em;} 上・右・下・左 単位つきの数値で直接指定
padding-bottom下の枠と内容の間隔
h1 { padding-bottom: 8px;} 単位つきの数値で直接指定
h1 { padding-bottom: 10%;} パーセントで指定(幅に対するパーセント)
padding-left左の枠と内容の間隔
h1 { padding-left: 8px;} 単位つきの数値で直接指定
h1 { padding-left: 10%;} パーセントで指定(幅に対するパーセント)
padding-right右の枠と内容の間隔
h1 { padding-right: 8px;} 単位つきの数値で直接指定
h1 { padding-right: 10%;} パーセントで指定(幅に対するパーセント)
padding-top上の枠と内容の間隔
h1 { padding-top: 0.5em;} 単位つきの数値で直接指定
h1 { padding-top: 10%;} パーセントで指定(幅に対するパーセント)
width
img.button { width: auto;}auto 自動設定
img.button { width: 80px;} 単位つきの数値で直接指定
img.button { width: 10%; } パーセントで指定(幅に対するパーセント)
list-styleリストをまとめて設定
ul { list-style: url(a.gif) disc;}list-style-type/list-style-image/list-style-position の順。略可。
list-style-imageリストのマーク画像
ul { list-style-image: url(a.gif);} url(画像のURL)| none(表示なし)
list-style-positionリストのマークの表示位置
ol { list-style-position: inside;}inside(直下)| outside(右ずれ)
list-style-typeリストのマークの種類
ol { list-style-type: decimal;}disc | circle | square | decimal | lower-roman |upper-roman | lower-alpha | upper-alpha | none

disc : 黒丸

circle : 白丸

square : 四角

decimal : 数字

lower-roman : 小文字のローマ数字

upper-roman : 大文字のローマ数字

lower-alpha : 小文字のアルファベット

upper-alpha : 大文字のアルファベット

none : 表示なし

bottom下の位置
left左の位置
#test { position: relative;
    left: auto;}
auto 自動設定
#test { position: relative;
    left: 40px;}
単位つきの数値で直接指定
#test { position: relative;
    left: 10%; }
パーセントで指定
position絶対位置・相対位置の指定
#test { position: absolute;
    top: 100px;
    left: 100px;}
absolute | relative | static

absolute : 絶対位置

relative : 相対位置

static : 未指定(初期値)

right右の位置
top上の位置
#test { position: relative;
    top: auto;}
auto 自動設定
#test { position: relative;
    top: 40px;}
単位つきの数値で直接指定
#test { position: relative;
    top: 10%; }
パーセントで指定
clipクリッピング
#test {position: absolute;
    top: 100px;
    left: 100px;
    clip: auto;}
auto 自動設定
#test {position: absolute;
    top: 100px;
    left: 100px;
    clip: rect(5px 25px 25px 5px);}
単位つきの数値で直接指定 rect(上 左 横長 縦長)
display表示形式
p { display: block;}block | inline | list-item | none

block : ブロックとして前後に改行

inline : インラインとして

list-item : リスト要素として

none : 未指定

overflow内容が収まりきらない場合
#test {position: absolute;
    overflow: auto;}
auto | visible | scroll | hidden

auto : 自動設定

visible : 制限を無視して高さ幅を調整し強制表示

scroll : スクロールバーで表示

hidden : 収まらなければ非表示

visibility表示・非表示
#test { position: absolute;
    top: 200px;
    visibility: hidden;}
inherit | visible | hidden

inherit : 標準

visible : 表示

hidden : 非表示

white-space空白・タブ・改行の取り扱い
PRE { white-space: pre;}normal(標準)| pre(そのまま表示)| nowrap(折返さない)
z-index重なる順序
#test { position: absolute;
    z-index: auto;}
auto 自動設定
#test { position: absolute;
    z-index: 3;}
整数で指定(数が大きいものほど上。親は「0」
cursorカーソル形状の指定
div { cursor: pointer;}auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help
auto自動
crosshair十字カーソル
default標準カーソル
pointerアンカー上にあるときのカーソル
move移動可能な対象上にあるときのカーソル
e-resizeウィンドウの大きさ変更(右方向)
ne-resizeウィンドウの大きさ変更(右上方向)
nw-resizeウィンドウの大きさ変更(左上方向)
n-resizeウィンドウの大きさ変更(上方向)
se-resizeウィンドウの大きさ変更(右下方向)
sw-resizeウィンドウの大きさ変更(左下方向)
s-resizeウィンドウの大きさ変更(下方向)
w-resizeウィンドウの大きさ変更(左方向)
text文字の範囲指定のカーソル
wait時間待ちのカーソル
helpヘルプの利用可能を示すカーソル
・OS等によりカーソル形状は変わる。
・上のカーソルはWindows7のもの
カーソル形状を確認する
div { cursor: url(a.gif);} url(カーソル画像のURL)