この文書は、初心者からエキスパートまでのための 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; }