複雑なスタイル設定をしてみよう！

.shadow1 { color: aliceblue;
font-size: 70; font-weight: bold;
font-family: Bookman OldStyle; }
.shadow2 { color: lightcyan;
margin-top: -80; margin-left: 20;
font-size: 70; font-weight: bold;
font-family: Bookman OldStyle; }
.shadow3 { color: cyan;
margin-top: -70; margin-left: 15;
font-size: 60; font-weight: bold;
font-family: Bookman OldStyle; }
.shadow4 { color: turquoise;
margin-top: -55; margin-left: 25;
font-size: 50; font-weight: bold;
font-family: Bookman OldStyle; }
.shadow5 { color: gold;
font-size: 50; font-weight: bold;
font-family: Impact; }
.shadow6 { color: goldenrod;
margin-left: 25;
font-size: 50; font-weight: bold;
font-family: Impact; }
.shadow7 { color: gold;
font-size: 50; font-weight: bold;
font-family: Impact; }
.shadow8 { color: goldenrod;
margin-left: 35;
font-size: 50; font-weight: bold;
font-family: Impact; }
.shadow9 { color: gold;
font-size: 50; font-weight: bold;
font-family: Impact; }
.shadow10 { color: goldenrod;
margin-left: 45;
font-size: 50; font-weight: bold;
font-family: Impact; }
.shadow11 { color: gold;
font-size: 50; font-weight: bold;
font-family: Impact; }
.shadow12 { color: goldenrod;
margin-left: 55;
font-size: 50; font-weight: bold;
font-family: Impact; }
</HEAD>
<BODY>
<DIV CLASS="shadow1">Weekly</DIV>
<DIV CLASS="shadow2">Weekly</DIV>
<DIV CLASS="shadow3">Weekly</DIV>
<DIV CLASS="shadow4">Weekly</DIV>
<DIV CLASS="shadow6">S<SPAN CLASS="shadow5">unday</SPAN></DIV>
<DIV CLASS="shadow8">M<SPAN CLASS="shadow7">onday</SPAN></DIV>
<DIV CLASS="shadow10">T<SPAN CLASS="shadow9">uesday</SPAN></DIV>
<DIV CLASS="shadow12">W<SPAN CLASS="shadow11">ednesday</SPAN></DIV>
</BODY>

今回も長めのタグで少々面倒くさいですが、頑張っていきましょう。

まず<HEAD>と</HEAD>の間に
<STYLE TYPE="text/css">

.shadow1 { color: aliceblue;
font-size: 70; font-weight: bold;
font-family: Bookman OldStyle; }
　　　　　　　　　　・
　　　　　　　　　　・
　　　　　　　　　　・
.shadow12 { color: goldenrod;
margin-left: 55;
font-size: 50; font-weight: bold;
font-family: Impact; }
</STYLE>
というように、スタイル定義をしていきます。
今回は12種類の定義がありますので、.shadow1から.shadow12まで、自分が指定したいスタイルを定義します。

.（ピリオド）に続けて自由にスタイル名を付けることができ、無制限にいくらでもスタイルを設定できます。
例えば.shadow1は文字の色がaliceblueに、フォントサイズが70ピクセルに、書体が太字に、フォントの種類がBookman OldStyleになり、shadow2は文字の色がlightcyanで、上部の余白が-80ピクセルに、左側の余白が20ピクセルに、フォントサイズが70ピクセルに、書体が太字に、フォントの種類がBookman OldStyleになるというわけです。

これを本文に反映させるためには、本文中に<DIV CLASS="shadow1">Weekly</DIV>というように記述すれば良いのです。

<DIV CLASS=に続けて、例えば.shadow1ならば、.（ピリオド）を取ったshadow1を記入すれば良いのです。
これで、<DIV>と、</DIV>の間の文字にshadow1のスタイルが反映されるようになります。

また、改行の入らない1行の文字の一部分だけに別のスタイルを指定したい時には<SPAN>というタグを使用して<SPAN CLASS="shadow5">のように記述すれば良いのです。

ちょっと面倒くさいかもしれませんが、複雑なスタイルが無制限に指定できるのは素晴らしいですよね。