html/CSS入門のバックアップ(No.3)

<span style="color:red;">あいうえお</span>
<div style="color:red;">あいうえお</div>

spanはインライン要素(前後で改行されない)
divはブロック要素(前後で改行される)*1

しごとでも

<span style="font-size:12px;">
<span class="brsize">

とか書いてるなぁ。

<p style="color:red;">あいうえお</p>

すべてのタグに、style属性を書くのはめんどくさいので、まとめて再定義できる。

<style type="text/css">
<!--
b {
 font-size: 18px;
}
-->
</style>

てやると、<b>タグすべてに適用される。

各タグに対して、クラスを定義して、クラスに対するスタイル指定をすることができます。

<style type="text/css">
<!--
p.red   { color: red; } <-pタグにredというクラス名を定義。スタイルはcolor=redで。
p.green { color: green; }
-->
</style>

として

<p class="red">これはredクラスです。</p>
<p class="green">これはgreenクラスです。</p>

とする事もできます。

<style type="text/css">
<!--
.red   { color: red; } <- redというクラス名を定義。スタイルはcolor=redで。
-->
</style>

として、どのタグにも使用できるクラスを定義することもできます。先の例の

<span class="brsize">

なんか、そうですね。

aタグなどはすでに定義済みのクラスがある。そのクラス名のスタイル定義は「.」ではなく「:」を用いる。

a:link {
 font-size: 18px; <- aタグにすでに定義済みのクラスlinkに、スタイルを指定。
}

いままでクラス名にスタイル定義をしてきましたが、ID(？)に対してスタイル定義もできます。ひとつのドキュメント中に、複数の要素が同じ ID を持つことは許されません。 (ようは、一つのhtml内に、同じIDはないってこと？)

#banner { <- IDの定義。
 background:#69c;
}

として

<div id="banner">
 車輪の再発明をしてます
</div>

とやることができる。

現在のアクセス:8018

html/CSS入門 のバックアップ(No.3)