NO.53 CSSを使うときの基本的な記述法③

class属性を使う
それぞれのタグにclass属性を指定しておくと、HEAD内にCSSを記述する際その部分だけCSSを反映させる事が出来るようになります。
例えば<b class=summer>～</b>で囲まれた領域にCSSを反映させるには、
HEADでCSSを記述する際にb.summer{}の中にデザイン内容を書き込めばいいだけです。
これはspan,divと併用してよく使われます。

<style type="text/css">
<!--
span.lost{color:gold}     /*spanタグの、class属性がlostと指定されてる部分だけ文字色が変わる*/
-->
</style>

↑のように記述した後<span class=lost>実行</span>このようにbody内に記述すれば、以下のように表示されます。
実行

また、↓のように記述する事により、タグの枠を超えて、ページ全体で特定のclass属性が指定されてる部分にCSSを反映させる事も可能です。

<style type="text/css">
<!--
.steal{color:pink}     /*class属性がstealと指定されてる部分は、どのタグでも文字色が変わる*/
-->
</style>

外部にCSSファイルを作って呼び込む
外部に用意したCSSファイル(*.css)を呼び込んでページ内のデザインに反映させる方法です。
これを使う事で、複数のページのデザインを一括指定することが出来ます。
↓の内容をHEAD内に記述して外部のCSSファイルを呼び出します。

<link rel="stylesheet" href="CSSファイル(*.css)のアドレス" type="text/css">

外部CSSファイルに記述する時は、↓のように普通にCSSを使うときと同じ内容になります。

a{color:red;background-color:gray;}
.zz{font-size:13px;}
td,tr,{font-family:System;}
body{background-color:yellow;}

前に戻る　次に進む

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