ＨＯＭＥ

スタイルシートとは

スタイルシートとは、WEBページ上の「見栄え」を定義するためのものです。
スタイルシートを使うとページのレイアウトを飾ることや同じ種類のタグの指定をひとつの文を書くだけでできるようになります。
ＨＴＭＬタグの知識がある程度ないと、スタイルシートを使うのは少し難しいかもしれませんが・・・

スタイルシートの要素

スタイルシートの要素にはセレクタ、属性、値があります。
font {color :red ; }
↑セレクタ↑属性↑値

スタイルシートを記述する場所

スタイルシートを記述する場所により、スタイルシートの名前が違います。
それはインラインスタイルシート、埋め込みスタイルシート、スタイルファイルの使用があります。

インラインスタイルシート
インラインスタイルシートの場合は、指定したいタグの< 〜 >の間に書きます。
書いてみるとこんな感じになります。

<font style="color:red;">〜</font>

これだったら、普通に<font color="red">と書く場合と同じですね＾＾；
ここでも：（コロン）、；（セミコロン）は重要ですので、注意してください。

埋め込みスタイルシート
埋め込みスタイルシートの場合<head>〜</head>の間に記述し、<style TYPE="text/css">〜</style>の間にセレクタ、属性、値を を書きます。
書いてみるとこんな感じになります。
<head>
<style TYPE="text/css">
<!--
font{
color:red;
}
-->
</style>
</head>
この文を書くと、このページすべての<font>タグの文字の色を、すべて赤に指定したことになります。
しかし、そのページに<font color="bule">と書いたとすると、そのフォントは青になります。
<!--と-->はスタイルシートに対応していないプラウザに間の文字を表示させないためのものです。
：（コロン）、；（セミコロン）は重要ですので、注意してください。

スタイルファイルの使用
スタイルファイルを使用する場合は、〜.css という拡張子のファイルの中に書きます。
書く文は、<head>〜</head>の間で記述した文の<!-- 〜 -->の間の部分と同じ文を書きます。
書いてみるとこんな感じです。
font{
color:red;
}
そして、そのスタイルシートを呼び出す場合には<head>〜</head>の間に次の文を書きます。

<link rel="stylesheet" type="text/css" href="〜.css">

スタイルシートの優先順位

優先順位とは、同じセレクタに対して、インラインスタイルシート、埋め込みスタイルシート、スタイルファイルの使用で別々の指定をした場合どれを優先するかということです。
高←低
インラインスタイルシート埋め込みスタイルシートスタイルファイルの使用
インラインスタイルシートが一番に優先されます。
例えば、埋め込みスタイルシートで指定していて、それだけを変更したい場合インラインスタイルシートで指定すればいいというわけです。

ＣＲＡＳＳを指定する

ＣＲＡＳＳを指定するとは、同じ種類のタグでスタイルを変えたい場合などに使います。
<head>〜</head>の間もしくは、他のファイルでスタイルシートを定義します。
クラスの名前はどんな名前でも平気です。名前の前に「.」(ドット)を付けて、タグで指定する場合と同じように指定します。
そして、タグでクラスを呼び出す場合は、<table crass="クラスの名前">といった感じで指定します。
例えばこんな文を書いたとします。

<style><!--
.big {
font-size:30px;
color:#0000ff;
}
.small {
font-size:12px;
color:#00ff00;
background-color:#aaaaaa;
}
--></style>

そして、<body>〜</body>タグ内にはこのように書きます。

<font class="big">クラスをbigで指定した文字です。</font>
<font class="small">クラスをsmallで指定した文字です。</font>

↓

クラスをbigで指定した文字です。
クラスをsmallで指定した文字です。

SEO [PR] 爆速!無料ブログ 無料ホームページ開設 無料ライブ放送