| HTML文書にスタイルシートを組み込む3つの方法。 |
- スタイルを指定したいタグに，style=”スタイル指定”という形で記述する (インライン方式)
| サンプルページへ |
- head 要素の中に‹style›タグを使ってスタイルを記述する (埋め込みembed 方式)
| サンプルページへ |
- 外部スタイルシートファイルを作成し，HTML文書にリンクさせる (リンク方式)
| サンプルページへ |
| スタイルシートを適用する対象の指定 | 例 |
| 特定の要素に適用させる場合 | h {～}，p{～}，div {～}（ブロックレベル要素），span {～}（インラインレベル要素）など |
| 複数の要素に適用させる場合 | h,p {～} |
| 全ての要素に適用させる場合 | * {～} |
| IDやクラスを指定した要素に適用させる場合 |
CSSには#myid {～}，THMLには<p id="myid"> |
CSSには#myclass {～}，HTMLには<p class="myclass"> |
| 特定の要素に含まれる要素に適用させる場合 | CSSにはp em {～}，THMLには<em>～</em> |
| リンク部分に適用させる場合（擬似クラス） | CSSにはa.special:link {～}，THMLには<a href="～.html" class="special">～ |
| 背景について（"body"以外でも利用可能） | ＣＳＳ例 |
| 背景色を赤(#ff3300）に指定する方法。 | body { background-color: #ff3300} |
| 背景画像に"seikei_wp.jpg"を指定する方法。 | body { background-image: url(seikei_wp.jpg)} |
| 背景画像の並び方を指定する方法。（繰り返さず１つだけ表示）（繰り返しは"repeat"） | body { background-repeat: no-repeat} |
| 背景画像の並び方を指定する方法。（横方向のみ繰り返して表示）（縦方向は"repeat-y"） | body { background-repeat: repeat-x} |
| 背景画像の表示位置を指定する方法。（例：右下に表示） | body { background-potision: right bottom} |
| 背景画像の表示位置を指定する方法。（例：中央に表示） | body { background-potision: center center} |
| 背景画像を固定する方法。（固定させない場合は"scroll"） | body { background-attachement: fixed} |
| フォントについて | ＣＳＳ例 |
| "type1"で「#ff9900」の色を指定する方法。 | .type1 { color: #ff9900} |
| "type2"で「#cccc00」の色を指定する方法。 | .type1 { color: #cccc00} |
| "type3"で「#4b0082」の色を指定する方法。 | .type1 { color: #4b0082} |
| "min"で「明朝体」を指定する方法。 | .min { font-family: "ＭＳ Ｐ明朝",平成明朝,serif} |
| "gth"で「ゴシック体」を指定する方法。 | .gth { font-family: "ＭＳ Ｐゴシック",Osaka,sans-serif} |
| フォントのサイズはこれが初期値（medium）で、xx-small→x-small→small→medium→large→x-large→xx-largeの順で大きくなります。 |
| "xxs"でxx-small（最小）を指定する方法。 | .xxs { font-size: xx-small } |
| "xl"でx-largeを指定する方法 | .xl { font-size: x-large } |
| "p09"でポイントサイズ９を指定する方法。 | .p09 { font-size: 9pt } |
| "p200"でポイントサイズ200%を指定する方法。 | .150 { font-size: 200% } |
| 太さの指定は100～900。"w400"で標準（normal=400）を指定する方法。 | .w400 { font-weight: 400 } |
| "wbol"で"bolder"（600相当）を指定する方法。 | .wbol { font-weight: bolder } |
| ボックスについて | ＣＳＳ例 |
| "box1"で上下マージン（余白）を指定する方法。（下は"marigin-bottom"） | #box1 { margin-top: 20px} |
| "box2"で左右マージンを指定する方法。（左は"margin-left）" | #box2 { margin-right: 50%} |
| "box3"でマージンを一度に指定する方法。（４つの値が上→右→下→左の順に設定） | #box3 { margin: 50 50 30 30} |
| "box4"で上下の周囲を指定する方法。（下は"padding-bottom"） | #box4 { padding-top: 60px} |
| "box5"で左右の周囲を指定する方法。（左は"padding-left"） | #box5 { padding-right: 30%} |
| "box6"で周囲を一度に指定する方法。（４つの値が上→右→下→左の順に設定） | #box6 { padding: 50 50 30 30} |
| "box7"でボックスの枠線の上下太さを指定する方法。（下は"border-bottom-width"） | #box7 { border-top-widht: 2px} |
| "box8"でボックスの枠線の左右太さを指定する方法。（左は"border-left-width"） | #box5 { padding-right: 30%} |
| "box9"でボックスの枠線の太さを一度に指定する方法。（上→右→下→左の順に設定） | #box6 { padding: 50 50 30 30} |
| "box10"でボックスの枠線の上下左右の色を指定する方法。（下は"bottom"，右は"right"，左は"left"） | #box10 { border-top-color: #ffcc00} |
| "box11"でボックスの枠線の形式を指定する方法。（太線は"solid"，二重線は"double"，破線は"dashed"，点線は"dotted"，その他"groove"，"ridge"，"inset"，"outset"） | #box11 {border-style: none} |
| レイアウトについて | ＣＳＳ例 |
| "p1"で文字の位置をセンタリングする方法。（右は"marigin-right"） | p1 { margin-left: auto} |
| "table1"で表の位置をセンタリングする方法。" | table2 { margin: auto} |
| "p2"で文字を絶対的な位置に配置する方法。 | p2 { position: absolute; top: 150; left:250} |
| "table2"で表を相対的な位置に配置する方法。 | table2 { position: relative; bottom: -90px} |
| "box11"でボックスを絶対的な位置に固定する方法。 | #box11 {position: fixed; top: 0; left: 0} |