ホームページ作成　９．スタイルシート

とりあえず下の簡単な例をみてください。
例：<span style="color:red;">スタイルシート</span> → スタイルシート
<span>自体には何の効果もありません。
<span style="‥‥‥">はお決まりで、あとはタグ一覧を見て"..."の中に修飾したいことを書くだけです。

(2)タグに効果を追加する。

これも簡単で、下の例のように<b>(太字)や<a href="abc.html">(リンク)の中にstyle="‥‥‥"を書くだけです。
太字＋背景色を変える：<b style="background:yellow;">スタイルシート</b> → スタイルシート

リンク＋文字間隔を変える：<a href="style.html" style="letter-spacing:15;">スタイルシート</a>
→ スタイルシート

(3)一括して指定する。

下の例を見てください。
<head>と</head>の間に指定することを書きます。
下の例のように指定するとそのページの<b>(太字)すべてが「太字＋(青字＋文字間隔１０)」になります。

<html>
<head>
<style type="text/css">
b {color:blue; letter-spacing:10;}

</style>
</head>
<body>
スタイルシート
<b>スタイルシート</b>

</body>
</html>

スタイルシート
スタイルシート

(4)classを使う。

これは上の(2)と(3)を合わせたようなことができて便利です。
これも<head>と</haed>の間に指定すること書きますがちょっと違う点があります。
下の例を見てください。
aoとakaのところは自分の好きなように書きます。
.aoは背景色を青に、.kiは背景色を黄色に指定してます。
タグの中にclass="ao"を書けば背景色が青に、class="ki"を書けば黄色になります。

<html>
<head>
<style type="text/css">
.ao {background:blue;}
.ki {background:yellow;}

</style>

<body>
<b class="ao">スタイルシート</b>
<a href="style.html" class="ki">スタイルシート</a>

</body>
</html>

スタイルシート
スタイルシート