スタイルシートの種類

1.インラインスタイルシート

　このスタイルシートは、HTMLのタグに埋め込むもの。例えば、
<font style=" font-size: 40px ">text</font>
　と指定すると、このフォントタグ内の有効範囲内（つまりタグから閉じタグまでの間）がスタイルシートの指定内容になる。ここでは、"text"という文字のサイズが40ピクセルとなる。このためにあるタグが、<span>タグである。

2.エンベッデッドスタイルシート

このスタイルは、<head>タグの中に<style> タグを入れ、その中にスタイルを記入する。注意点は、スタイルシート未対応ブラウザではこのスタイルシートの中身が画面に表示されるので、必ずで囲むこと。そしてスタイルの書き方は、
セレクタ{ プロパティ:パラメータ; }
のようになる。最後のセミコロンを忘れずに。
　セレクタは、以下の５種類。

■タグ

例えば、このようにする。

h1{ 
    font-size: 24px;
    color: #ff0000; 
}

とすると、ホームページ上のすべての<h1>タグが指定できる。

■クラス

.クラス名{ 
    font-size: 20pt;
    font-weight: bold;
    font-family: Osaka; 
}

と記す。
そして、例えばこのようにタグを書く。
<span class=" クラス名">text</span>
と書くと、 textという文字がクラスで指定したものになる。

■ID

クラスにとてもよく似ているが、違いは　id はタグ1つのみに付けるもので,複数のタグに付けるものではないことである。
例えば、

#クラス名{ 
    font-size: 20pt;
    font-weight: bold;
    font-family: Osaka; 
}

と記す。
そして、例えばこのようにタグを書く。
<span id="クラス名">text</span>
と書くと、 textという文字がIDで指定したものになる。

■タグ名.クラス名

■タグ名#ＩＤ名

　これらは、タグとクラスやＩＤを一緒に指定する方法。

■タグ名: 仮想クラス名

　例えばこれは<a> タグのいわゆるlink,vilnk,alinkなどを指定するときに使う。

a:link{ 
    font-size: 14px;
} 
a:visited{
    font-size: 12px;
} 
a:active{ 
    font-size:16px; 
} 
a:hover{
    font-size:15px; 
}

注／HOVER は、リンク上をマウスカーソルが乗ったときの指定で、ＩＥ４のみ対応。
となる。

3.リンキングスタイルシート

　これは、HTMLとは別に作っておいたスタイルシートファイル（拡張子:css）をリンクさせる方法で、指定は<link>タグで行う。
例えば、main.cssというスタイルシートファイルを使うとき、このようにする。
<link rel="stylesheet" href="main.css">
ちなみにＣＳＳファイルには、言ってみれば<style> タグの中身を書く。
この方式の利点は、複数のＨＴＭＬファイルでスタイルシート部分が共有できるため、ＨＴＭＬ文書の容量削減・作業効率アップにつながる。

4.インポートスタイルシート

　IE4 のみの機能で、<style> タグの中に次の一行を入れる。

@import (main.css)

このインポートの利点は、リンキングと違って、スタイルシートを追加できること。
この行の後にさらにスタイルシートを追加する。

戻る