■ CSS 設定の方法　その１

ここでは、CSS を設定する方法を勉強します。
もう前のページの見本で３種類あるってのはわかったでしょ。

この３つです。それではひとつひとつについて具体的に勉強していきましょう。
見本を用意しておきます。

って書くとこうなるよね。これがスタイル適用前。

これをこのように変えます。テキスト色オレンジ、文字サイズ20pt、太字、アンダーラインつきです。３つのどの方法を使っても結果は同じです。

１．タグにはさまれた部分に適用する方法

タグにスタイルを直接書き込みます。これをインラインで設定するといいます。見本の場合は <div> タグに対して、このように書き込みます。

<div> タグの中にいくつかの設定を行っています。これらの設定ひとつひとつをタグに対するプロパティ（属性）といいます。そしてそれぞれの設定値をプロパティの値といいます。

インラインで設定する場合は、タグ　style=　の後をダブルクォーテーション（”）で囲み、その中にプロパティと値を書き込みます。
書き方は、プロパティと値の間をコロン（：）で区切り、次のプロパティとの間をセミコロン（；）で区切ります。
最後の値の後はセミコロンは不要ですが、プロパティを追加したときに忘れないようにいつもつけています。
HTML と同様、タグ内の空白は無視されます。
※ただし全角の空白を入れると、Netscape では、空白の後のプロパティが認識されなくなりますので注意して下さい。

今度は、同じテキストに別のスタイルを適用してみましょうか。さっきよりもたくさん書き込んでみました。

<div style="color:#ffc0cb; font-size:1cm; font-weight:bold; text-align:center; background-color:#800080; border-style:groove; border-color:#ffc0cb; border-width:10pt; padding:10pt;">
王様の耳はロバの耳
</div>

このように表示されます。

プロパティと値はこうなってます。

ちょっとプロパティが多すぎて、わかりにくくなったかな。
プロパティについては後で勉強するから、ここではインライン設定の方法だけ覚えておいて下さい。
インライン設定はタグに直接書き込むので、HTML でページを作るのとそんなに変わりません。HTML よりも細かい設定が可能なので、ページをデザインする効果はあります。
ただし、その反面、タグが複雑になって変更・修正がめんどうになるし、CSS の重要な効果であるスタイルの一括変換ができないといったデメリットがあります。
全体のスタイルを別の方法で設定した後に、個別のタグについてスタイルを設定したい場合に使いましょう。