スタイルシートの基本

スタイルシートとは?

CSS(カスケーディングスタイルシート)といって今までのHTMLの文字表現を
更に拡張する目的で開発された機能です
例えばフォントのサイズ、色、行間などレイアウトに関する指定情報を
パターンとしていくつか用意しておき、それをページ全体或いは
個々のタグに 適応させるという考え方です
これを使えばレイアウトが細かく指定できるほか
レイアウトに関するファイルの更新作業がとても楽になる利点があります

スタイルシートの記述方法

{PROPERTY:VALUE}
PROPERTYは定義するものではその値
書式例
div {font-size: 10pt; color:blue}
↑要素↑PROPERTY↑VALUE↑PROPERTY↑VALUE

1,拡張子.CSSの定義ファイルを作りそれを参照する方法
<link rel="stylesheet" type="text/css" href="★">
★=定義ファイル(拡張子.CSS)のファイル名またはURL
<style TYPE="text/css">
<!--
@import url(★.css);
h3 { font-size: 16pt }
-->
</style>

とすればページ全体ではなく指定したいその場だけ
定義ファイルから読み込んだ スタイルシートが適応されます

2,ヘッダー(<head>〜</head>)に記述して
そのページ全体に適応させる方法

<style TYPE="text/css">
<!--
--> </style>

スタイルシート未対応ブラウザで見るとソースが丸見えになってしまいますから
コメントタグ<!--〜〜-->でスタイルの指定部分を囲み見えないようにしましょう

3,個々のタグに属性として記述して適応させる方法
<★ style="☆">〜</★>
★=適応させるタグ名
☆=property:value

4,指定範囲(段落ごと)に適応させる方法
<span style="★">〜</span>
★=property:value

大まかな部分は定義ファイルを作りそこから参照して
細部の設定はページやタグ単位で指定する方法がいいでしょう

2003/09/14
タグ単位で指定するstyle属性はXHTML1.1で非推奨となっています

クラス属性

クラスを定義すれば同じタグ名でもクラスに応じた設定を反映する事ができます
記述方法は、要素名+ピリオド+任意のクラス名 {スタイル指定}
<html>
<head>
<title></title>
<style type="text/css">
<!--
div.blue {background-color:blue}
div.yellow {background-color:yellow}

-->
</style>
</head>
<body>
<div class="blue">クラス名blue,この段落の背景色はブルーになります</div>
<div class="yellow">クラス名yellow,この段落の背景色はイエローになります</div>
</body>
</html>

クラス名のみで指定する事も可能
.big {font-size:18pt; color:red}
<span class="big">クラス名big</span>
<td class="big">クラス名big</td>