スタイルシートとは、Cascading Style Sheetの略で、HTMLタグの表現方法を定義したものです。 スタイルシートを利用すると、文章の内容と表現を別管理することができます。
スタイルシートでは、プロパティと値を以下の書式で定義します。
スタイルシートは、プロパティと値をコロンで区切って記述します。
値は、スペースで区切ることにより、複数定義することができます。
プロパティ名1:値1; プロパティ名2:値21 値22; プロパティ名3:値31 値32 値33; |
スタイルは、タグやクラスに対して定義することもできます。
タグ指定をすると、同一のタグに対してすべて指定したスタイルが定義できます。
要素に、class属性を与えることにより、同じクラスを持つすべての要素に対して定義できます。
クラス指定は、.クラス名で定義します。
タグ指定、クラス指定は、以下の書式で定義します。
複数のタグやクラスに対して定義する場合は、タグ名やクラス名を「,」で区切り定義します。
スタイルの内容は、{}の中に記述します。
タグ名 {
スタイルシートの定義
}
.クラス名 {
スタイルシートの定義
}
タグ名1.クラス名1, タグ名2, .クラス名2 {
スタイルシートの定義
}
|
指定したタグの中の、特定のタグに対して設定する場合は、タグ名やクラス名を「半角スペース」で区切り定義します。
指定したタグの直下ののタグにだけ設定する場合は、タグ名やクラス名を「>」で区切り定義します。
指定したタグの次ののタグにだけ設定する場合は、タグ名やクラス名を「+」で区切り定義します。
ただし、「>」や「+」は、IE6では使えないようです。
/* 子孫の要素 */
タグ名1.クラス名1 タグ名2 {
}
/* 子の要素 */
タグ名1.クラス名1 < タグ名2 {
}
/* 次の要素 */
タグ名1.クラス名1 + タグ名2 {
}
|
タグ指定、クラス指定は、以下の書式で参照することができます。
<タグ名></タグ名> <タグ名 class=クラス名></タグ名> |
HTMLでのスタイルシートの利用方法には、以下の3種類がありますが、外部スタイルシートを利用するべきだと思います。
インラインスタイルとは、style属性でタグに直接指定する方法です。
<タグ名 style="プロパティ1:値1;プロパティ2:値2;"></タグ名> |
内部スタイルシートとは、HTMLに埋め込んで、スタイルシートを記述する方法です。
<head> <style> スタイルシートの記述 </style> </head> |
外部スタイルシートとは、別ファイル(style.css)で、スタイルシートを記述する方法です。 外部スタイルシートファイルの拡張子は、*.cssとします。
<head> <link rel="stylesheet" type="text/css" href="style.css"> </head> |