All in a page

この文書は、初心者からエキスパートまでのための CSS-2 仕様のクイックリファレンスです。スタイルプロパティは簡単な文法で書かれています。

margin-top : length | percentage | auto;
margin-right : length | percentage | auto;
margin-bottom : length | percentage | auto;
margin-left : length | percentage | auto;
margin : margin-top margin-right margin-bottom margin-left;

padding-top : length | percentage;
padding-right : length | percentage;
padding-bottom : length | percentage;
padding-left : length | percentage;
padding : padding-top padding-right padding-bottom padding-left;

border-top-width : thin | medium | thick | length;
border-right-width : thin | medium | thick | length;
border-bottom-width : thin | medium | thick | length;
border-left-width : thin | medium | thick | length;
border-width : thin | medium | thick | length;

border-top-color : color | transparent;
border-right-color : color | transparent;
border-bottom-color : color | transparent;
border-left-color : color | transparent;
border-color : border-top-color border-right-color border-bottom-color border-left-color;

border-top-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;
border-right-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;
border-bottom-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;
border-left-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;
border-style : border-top-style border-right-style border-bottom-style border-left-style;

border-top : border-width border-style border-color;
border-right : border-width border-style border-color;
border-bottom : border-width border-style border-color;
border-left : border-width border-style border-color;
border : border-width border-style border-color;

display : none | inline | block | inline-block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | tablefooter-group | table-row | table-column-group | table-column | table-cell | table-caption;

position : static | relative | absolute | fixed;

top : length | percentage | auto; right : length | percentage | auto; bottom : length | percentage | auto; left : length | percentage | auto;

float : left | right | none;
clear : none | left | right | both;

z-index : auto | integer;

direction : ltr | rtl;
unicode-bidi : normal | embed | bidi-override;

width : length | percentage | auto; min-width : length | percentage; max-width : length | percentage | none;

height : length | percentage | auto; min-height : length | percentage; max-height : length | percentage | none;

line-height : normal | number | length | percentage;

vertical-align : baseline | sub | super | top | text-top | middle | bottom | text-bottom | percentage | length;

overflow : visible | hidden | scroll | auto;

clip : rect(top,right,bottom,left) | auto;

visibility : visible | hidden | collapse;

list-style-type : disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | none;
list-style-image : uri | none;
list-style-position : inside | outside;
list-style : list-style-type list-style-position list-style-image;

color : color;

background-color : color | transparent;
background-image : uri | none;
background-repeat : repeat | repeat-x | repeat-y | no-repeat;
background-attachment : scroll | fixed;
background-position : [percentage | length | left | center | right] [percentage | length | top | center | bottom]  ;
background : background-color background-image background-repeat background-attachment background-position;

font-family: family-name | generic-family, family-name | generic-family, ... ;
font-style: normal | italic | oblique;
font-variant: normal | small-caps;
font-weight: normal | bold | bolder | lighter | 100 | ... | 900;
font-size: absolute-size | relative-size | length | percentage;
font: [font-style font-variant font-weight] font-size [/line-height] font-family;

text-indent : length | percentage;
text-align : left | right | center | justify ;
text-decoration : none | [ underline overline line-through blink ];
text-transform : capitalize | uppercase | lowercase | none;

letter-spacing : normal | length;
word-spacing : normal | length;
white-space : normal | pre | nowrap | pre-wrap | pre-line;

caption-side : top | bottom;

table-layout : auto | fixed;

vertical-align : baseline | top | bottom | middle;

border-collapse : collapse | separate;
border-spacing : length [length];

empty-cells : show | hide;

cursor : [uri] [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | swresize | s-resize | w-resize| text | wait | help ], ...;

outline-color : color | invert;
outline-style : border-style;
outline-width : border-width;
outline : outline-color outline-style outline-width;

相対単位 : em, ex, px

• em : 1 em はフォントサイズと等しい
• ex : 1 ex はフォントの "x" の高さと等しい
• px : ピクセル

絶対単位 : in, cm, mm, pt, pc

• in : インチ
• cm : センチメートル
• mm : ミリメートル
• pt : ポイント 【訳注: 】
• pc : パイカ 【訳注: 】

カラーの単位 : #336699, #fa5, rgb(127,255,0), rgb(40%,50%,60%)

• #306090 : 十六進数で赤が 30、緑が 60、青が 90。
• #fa5 : 十六進数で赤が FF、緑が AA、青が 55。
• rgb(127,255,0) : 赤が 127、緑が 255、青が 0。
• rgb(40%,50%,60%) : 赤が 40%、緑が 50%、青が 60%。

型セレクタ
h1 { text-decoration: underline; }

クラスセレクタ
.myclass { text-decoration: underline; }

一意セレクタ
#myid { text-decoration: underline; }

子孫セレクタ
#mainpage h1 { text-decoration: underline; }

リンク擬似クラスセレクタ
a:link { color: blue; }
a:visited { color: purple; }

動的擬似クラスセレクタ
a:hover { text-decoration: underline; }
a:active { color: #666666; }
a:focus { outline: 1px dashed red; }

印刷用擬似要素セレクタ
p:first-line { font-weight: bold; }
p:first-letter { font-size: 2em; }

コンテンツ擬似要素セレクタ
p:before { content: "["; }
p:after { content: "]"; }

子セレクタ
#title > p { font-weight: bold; }

first-child 擬似クラスセレクタ
p:first-child { margin-top: 0; }

隣接セレクタ
h1 + p { font-style: italic; }

属性セレクタ
option[selected] { color: #ff0000; }
input[type="password"] { color: #cccccc; }
a[rel~="next"] { background: #ffffff; }
*[lang|="en"] { color: red; }