スタイル指定を適用するのに次の４つの方法があります。
- <SPAN>タグでスタイル情報を記述し、タグ内の一部に適用させる。
- ＨＴＭＬタグを拡張させる形で指定し、そのタグの範囲にのみ適用させる。
- ヘッダー情報（<HEAD>）としてスタイル情報を記述し、そのページ全体に適用させる。
- スタイル指定したものを一つのファイルにまとめておき、そのファイル名（ＵＲＬ）を指定することでページ全体に適用させる。
これらは重複して使うことができますが、最後に読み込まれたものが有効です。すなわちホームページ全体に適用したいスタイル指定は一つのファイルにまとめてd．を使い、あるページだけに適用したい場合はc．を使い、ページの一部だけに適用するものはb．やa．を使うということです。
それでは次にそれぞれの指定方法について述べます。
a．<SPAN>タグを使う場合
<SPAN>タグを使うとタグ内の一部にスタイルを適用することができます。
<SPAN STYLE="PROPERTY:VALUE;……">〜</SPAN>
［例］
<SPAN STYLE="font-size:9pt">ここは小さい字</SPAN>
ページの一部だけに適用する場合は、そのタグに次の様に記述します。ページ全体の指定と異なる指定をしたい時にも使えます。
<タグ名 STYLE="PROPERTY:VALUE;……">〜</タグ名>
［例］
<H3 STYLE="color:blue">見出し</H3>
ヘッダー情報として<STYLE>〜</STYLE>の間にタグ名と指定するPROPERTY:VALUEを記述します。
<HEAD>
<STYLE TYPE="text/css">
<!--
タグ名{PROPERTY:VALUE;……}
……
-->
</STYLE>
</HEAD>
同じスタイルを複数のタグに適用する場合は、
タグ名1,タグ名2,タグ名3{PROPERTY:VALUE;……}と記述します。
［例］
<STYLE TYPE="text/css">
<!--
H2,H3{color:red}
P{font-size:15pt;color:green}
-->
</STYLE>
<!-- -->は無くても動作しますが、スタイルシートに対応していないブラウザではスタイルの記述内容がそのまま見えてしまうのでこれを記述して見えなくします。
各タグに対してスタイル指定したのもを一つのファイルにまとめます。このファイルの拡張子は.cssとします。.cssファイルには次のように記述します。
タグ名{PROPERTY:VALUE;……}
……
<HEAD>〜</HEAD>間に次の様に記述してスタイル指定したファイルを読み込ませます。
<HEAD>
<LINK REL=stylesheet TYPE="text/css" HREF="パス/ファイル名（拡張子.css）">
</HEAD>
PROPERTYとVALUEで、使って便利なものを紹介します。
ａ．文字の大きさ
{font-size:大きさ｝ 大きさ=数値+単位
単位：px=ピクセル、pt=ポイント、in=インチ、cm=センチ、％（デフォルトに対する）
例：２倍の大きさの文字
スタイルシート
.2x{font-size:200%}
ＨＴＭＬ
ここは普通の文字、<SPAN CLASS="2x">ここは２倍のおおきさ</SPAN>
表示結果
ここは普通の文字、ここは２倍のおおきさ
{color:文字色;background:背景色} 色=#RRGGBBまたは色の名前（red、greenなど）
例：青色の背景に白い文字
スタイルシート
.bgb{color:white;background:blue}
ＨＴＭＬ
<DIV CLASS="bgb">ここは青地に白の文字です。</DIV>
表示結果
{line-height:行間隔} 行間隔=行送りの数値+単位（単位は上に同じ）
例：行間隔を２倍にする
スタイルシート
.gyo2{line-height:200%}
ＨＴＭＬ
<DIV CLASS="gyo2">ここは<BR>行間隔が通常の<BR>２倍です。</DIV>
表示結果
{text-align:配置} 配置=left（左寄せ）、center（中央揃え）、right（右寄せ）
例：右寄せ
スタイルシート
.rgt{text-align:right}
ＨＴＭＬ
<DIV CLASS="rgt">ここは右寄せ</DIV>
表示結果
{margin-top:余白} 上部余白
{margin-left:余白} 左側余白
{margin-bottom:余白} 下部余白
{margin-right:余白} 右側余白
余白=数値+単位（px、pt、in、cm、％）
例：左余白１００ピクセル
スタイルシート
.left{margin-left:100px}
ＨＴＭＬ
<DIV CLASS="left">ここは左余白１００ピクセルです。</DIV>
表示結果
CLASSを使うと、同じ種類のタグで異なる指定をしたり、異なる種類のタグで同じ指定をしたりすることができます。CLASSは、次の様に指定します。
ドット+記号{PROPERTY:VALUE;……}
適用するタグに次のように記述します。
具体例を示します。
スタイルシート
.red{color:red}
.green{color:green}
ＨＴＭＬ
<H2 CLASS=red>ここは赤色</H2>
<H2 CLASS=green>ここは緑色</H2>
ここは普通<SPAN CLASS=red>ここも赤色</SPAN>
表示結果
ここは赤色
ここは緑色
ここは普通ここも赤色
