html のスタイルは、CSS(Cascading Style Sheet)とよばれ、W3C の仕様です。
W3C には、「文書構造と体裁を分離させる」なる理念があり、
文書構造を html により、体裁をスタイル(CSS)により実現しようとしています。
ですから、スタイルは、html のタグなどとは異なる規則に従って記述する
ことになります。
スタイルのそれぞれの指定は、プロパティとその値の組により、
「プロパティ」:(←コロン)「値」;(←セミコロン)
で記述されます。(例えば、既述の background-color:blue; のように)
プロパティは、タグ同様たくさんあります。全てを覚える必要はないと思います。
よく使うものは覚え、必要なものはノートか何かに纏めておき、それ以外は、例えば、
「HTML クイックリファレンス」
を参考にするとか。
ここでは、タグの style 属性を用いて説明します。
スタイルの設定には、他に、
style タグを用いる方法 と スタイルファイルを用いる方法
があります。(W3C は、スタイルファイルを用いることを推奨しています。)
background-color は背景色を、color は文字色を、指定するプロパティです。
その値は、rgb 値かカラーネームで指定します。
例
枠の形状、太さ、色(値が3つ、半角スペースで区切る、順不同、省略も可) を指定するプロパティです。 例
width は幅を、height は高さを、指定するプロパティです。
その値は、数値(px 等)か %(パーセント)で指定します。
例
margin は外側のスペース確保、padding は内側のスペース確保に使用します。
値を1つ指定した場合、上下左右に指定量スペースが確保されます。
それぞれのスペース量を指定する場合は、上から時計回りにスペース量を記述します。
例
それぞれを、個々に指定するプロパティもあります。
margin-top(padding-top)・・・上、
margin-right(padding-right)・・・右、
margin-bottom(padding-bottom)・・・下、
margin-left(padding-left)・・・左
行間幅を設定します。値として数値をとります。(デフォルトは値 1)
例を下の水平線間に表示
text-align は、文字列の行揃えの位置指定等に使います。 例
スタイルの記述場所は、
・1.スタイルを適用したいタグに、style 属性として記述する。
・2.html ファイルの、head 部分に、style タグ内容として記述する。
・3.スタイルファイルに記述し、html ファイルに読み込む。
の3通りがあります。ひとつの html ファイルで、
これ等の記述場所を混在させても構いません。
1の「タグに style 属性として記述する」方法は、プロパティでの説明通りです。
2 と 3 では、「これこれ(これ等)のタグに、以下のプロパティを適用する」
というタグを指定する形で記述します。指定は、
タグ名、タグの class 属性、タグの id 属性
等(他にもたくさんあります)を使い、セレクタで行われます。
(セレクタについては、次のページで説明します。)
class 属性は、複数のタグを特定するときに使います。記法は、
<「タグ名」 class="「class 名」" ・・・(他の属性)・・・ >
となります。「class 名」は、半角英数字の文字列です。
同じ class 名を複数付けても構いません。
id 属性は、一つのタグを特定するときに使います。記法は、
<「タグ名」 id="「id 名」" ・・・(他の属性)・・・ >
となります。「id 名」は、半角英数字の文字列です。
一つのページ内で、同じ id 名を複数付けることはできません。