head の中でスタイルシートを書く範囲を 次のように <style type="text/css">と </style>で囲むことで指定します。
<html> <head> <title> </title> <style type="text/css">スタイルシートを指定する範囲</style> </head> <body> </body> </html>このスタイルシートを指定する範囲の所で 書くフォーマット(書式)は次のようになります。
セレクタ1 { プロパティ1: 値1; プロパティ2: 値2;} セレクタ2, セレクタ3 { プロパティ3: 値3; プロパティ4: 値4; プロパティ5: 値5;}上のセレクタと呼ぶ部分は、 スタイルの指定対象を意味する用語で、ここにHTMLのタグの要素名などが書けます。
スタイルの指定は、セレクタ記述の後に書く { から始まって } の間です。
ここに プロパティ名: 値; の表現を並べて書くことができます。 この時、 ; の直後では、半角スペースや改行やtabなどで区切って書きます。
また複数のセレクタを並べる場合は、 , で区切ります。
以下に例を示します。 セレクタ、プロパティが1つの例で、 セレクタでbodyを指定し、その背景色を#CCFFFFにしています。body { background-color: #CCFFFF; }次は プロパティが複数の例で、セレクタでpを指定し、その背景色、文字色、文字サイズを 指定している例です。
p { background-color: #FFCCCC; color: blue; font-size: 16pt;}上記は、次のように改行で区切って書いても同じです。読みやすい方がよいでしょう。
p { background-color: #FFCCCC; color: blue; font-size: 16pt; }これで、pのタグに上記の設定が働きます。この部分がその表示例です。
次は セレクタで、h1 と、h2 の複数を指定する例です。背景色、文字色を指定しています。 またその表示例も示します。
h1,h2 { background-color: #CCFFCC; color: green;}h1の表示
h2の表示
具体的な例を示します。以下では body と li と p に対し、スタイルを設定しています。
<html> <head> <title> 箇条書 </title> <style type="text/css"> body { background-color: #CCCCFF; font-size: 10pt;} li { background-color: #FFFFFF;} /* 白 */ p { background-color: #FFFF00;} /* 黄色 */ </style> </head> <body> <p>HTMLの主なタグを以下に箇条書で示します。</p> <ul><!-- 順序番号が付かない箇条書きを使用 --> <li>見出しのレベルを指定する。</li> <li>文章の段落範囲を指定する。</li> <li>図を挿入する。</li> <li style="background-color: #CCCCFF;">カ条書きの構造を指定する。</li> <li>リンクの指定。</li> <li>表を作る。</li> <li>ページを分割する。</li> </ul> <p>以上です。</p> </body> </html>
なお、/* 白 */ や /* 黄色 */の部分は、 スタイル内用のコメントです。
コメントは、ソースの作成者が意味などを分かりやすく残すために書く部分で、ブラウザの表示に反映しません。 <style >から</style>の間では、 /* と */ で挟んだ部分がコメントとして取り扱われます。
また、<!-- 順序番号が付かない箇条書きを使用 -->の部分もコメントです。
こちらは、HTMLのコメントで、<!-- と --> で囲った部分が対象となります。
確認ボタンで、コメントの部分が見えていないことに注目してください。
どちらのコメントも、複数の行を囲む指定ができます。