|
|
|
|
|
| 2.3 |
キーワードにスタイルを定義する
.keyword{style} ←定義
<tag class="keyword"> ←利用
スタイル自体にキーワードを付け定義します。 keyword に任意の文字列を指定し、style でスタイルを指定する。
ここで定義したスタイルを利用するには、タグの class パラメータに、利用したいスタイル定義のキーワードを指定する。
この定義を利用すると、既にスタイルが設定されているタグにも、キーワードで指定した内容が上書きされる事になる。
以下にサンプルを示す。
<html>
<head>
<style type="text/css">
<!--
h3{color:black}
.yellow{color:yellow}
.red{color:red}
-->
</style>
</head>
<body>
<h3>これは黒</h3>
<h3 class="yellow">これは黄</h3>
<h3 class="red">これは赤</h3>
</body>
</html>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 2.4 |
ＩＤにスタイルを定義する
#id{style} ←定義
tag#id{style} ←定義
<tag ... id="id"> ←利用
スタイルにＩＤを付け定義します。
またタグ名と共にＩＤを指定すると、そのタグと一緒に使う時だけ、スタイルが適用される。
また、ＩＤパラメータで指定したスタイルは、既に定義されたスタイルに上書きするので、
スタイルの一部だけを変更したい時に使います。
|
|
以下にサンプルを示す。
<html>
<head>
<style type="text/css">
h3{color:block}
.red{color:red}
.blue{color:blue}
#id1{color:white}
</style>
</head>
<body>
<h3>これは黒色</h3>
<h3 class="red">これは赤色</h3>
<p class="blue">これは青色</p>
<p class="blue" id="id1">これは青色ではなく桃色</p>
</body>
</html>
|
|
これは黒色
これは赤色
これは青色
これは青色ではなく桃色
|
|
|
|
|
|
|
|
|
