HTML の要素を装飾するのに、CSS を組み合わせて指定したい。
Blog.okuryu : CSS で複数のクラスを指定する方法 によると、
class 属性値をスペースで区切って指定すると複数のクラスの CSS が適用される。
例えば、テーブルの「枠や背景色」を装飾したいとする。CSS で
- 「枠の太さ」
- 「セルの背景色」
を、別々の class で指定する。
テーブルの枠の指定の方法は、「HTML のテーブルで、一部の枠だけ太くする」を参照した。
<html>
<head>
<title>複数の CSS を class で指定</title>
<style type='text/css'>
<!--
table { border-collapse: collapse; }
table, td { border: solid 1px; }
.sunday{ background-color: #FFEEFD; }
.saturday{ background-color: #EEF2FF; }
.x_axis{ border-top: solid 3px; }
.y_axis{ border-right: solid 3px; }
-->
</style>
</head>
<body>
<table>
<tr>
<td class='sunday y_axis'>hoge</td>
<td class='saturday'>hogehoge</td>
</tr>
<tr>
<td class='sunday y_axis'>piyo</td>
<td class='saturday'>piyopiyo</td>
</tr>
<tr>
<td class='sunday x_axis y_axis'>fuga</td>
<td class='saturday x_axis'>fugafuga</td>
</tr>
</table>
</body>
</html>
0コメント:
コメントを投稿