class属性の適用

先回の課題の答え合わせをしておきましょう。

まずはtest.htmlの中身を再掲します。

<html>
<head>
<title>pのCSS設定</title>
<style type=”text/css”>
.red {
color:red;
text-align:center;
}
</style>
</head>
<body>
これは<p class=”red”>赤文字</p>です<br>
<p>これも赤文字です?</p>
</body>
</html>

 

さて,保存してブラウザで開くとどうなるでしょうか?

css3

そう,bodyの中身の1行目はclass属性が”red”なので赤文字でセンタリングされます。

一方,次のp要素はclass属性が指定されていませんので何のスタイルも適用されません。

 

同じタグすべてに同じスタイルを適用させる事もありますが,どちらかというとそれは稀です。

たとえば画像はすべて同じサイズで表示させるというような場合はタグ指定でもいいのかもしれません。

でも,例外が一つでも発生すると-たとえば説明のためにサイズの異なる画像を一つでも加えると-困った事になります。それで,最初からタグでは無くclassを宣言しておくようにするのです。

 

そうすれば例外が発生してもその画像だけ別のclassとすればいいだけですから。

 

では,class属性で宣言したのとstyle属性での宣言が重複したらどうなるでしょう?

 

たとえば”red”というclassは上述のままとして

<p class=”red” style=”color:blue”>XXXX</p>

<p  style=”color:blue”class=”red”>XXXX</p>

これだとエラーになるのでしょうか?あるいは上と下で結果が異なるのでしょうか?

是非,試してみて下さい。

 

今日のまとめ:

スタイルシート適用のためにタグにはclass指定をしておくのが無難

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です