ホームページ作り入門<21>
スタイルシート
今では、文字の大きさや色をはじめページの見え方は、タグによらずスタイルシートで記述するのが標準になってきている。
例えば大きな文字「A」を書く場合 <H1>A</H1>とか<FONT SIZE="6">A</FONT>と書きました。
スタイルシートでは、わざわざフォントのタグを使わず、各機能タグの中に

style="font-size:20;color:#ff0000;"

と、そのタグ内のスタイルを指定します。
例えば

<TABLE style="font-size:32;color:#ff0000;"> と書くと </TABLE> があるまで、

大きな赤い文字になります。

しかも文字の大きさは、タグの場合7段階でしたが、スタイルシートはピクセル数での指定なので、好きな大きさが指定でき画面いっぱいの文字だって可能です。

5」 「10」 「15」 「20」 「25」 「30」 「35」 「40」 「45」 「50

タグ内に記述する以外に、<HEAD>内に記述する方法や、外部ファイルを利用する方法もありますが、ここでは省略します。
指定できるのは文字のスタイルだけではありません。
<input type="button" value="開く" style="width:50;height:50;cursor:pointer;background:#448888;font-size:24;color:ffff00">

のように、このボタンはwidth:横サイズ、height:縦サイズ、cursor:マウス形状、background:背景色、font-size:文字サイズ、color: 文字色が設定してあります。
要素と値は「:(コロン)」でつなぎ、複数項目の設定は「;(セミコロン)」で区切って連続して書きます。
タグ外で指定するときは<DIV>とか<P>といった段落タグを使って指定します。
さらに<BODY>タグ内に設定すればページ全体に機能します。

主なスタイルシート
要素プロパティ
文字色color:#8800ff(色コード)
文字サイズfont-size:数値(ピクセル)
文字太さズfont-weight:100〜900
行間line-height:1.0、1.5、、、(小数)
行揃えtext-align:left(左揃え)、center(中央揃え)、right(右揃え)
背景色background:#8800ff(色コード)、透明は"transparent"
余白色margin:数値(ピクセル)
横幅width:数値(ピクセル)
高さ幅height:数値(ピクセル)
カーソルcursor: crosshairdefault pointer text wait
座標position:absolute(絶対座標)、relative(相対座標)
横位置left:数値(ピクセル)
縦位置top:数値(ピクセル)