CSSの基本書式実施例
クラスセレクタ
HTML
<p> カテゴリ一覧</p>
<ul>
<li class="odd">アクション</li>
<li class="even">ミステリー</li>
<li class="odd">SF</li>
<li class="even">ヒューマン</li>
<li class="odd">ラブストーリー</li>
<li class="even">ノンフィクション</li>
</ul>
css
li.odd{
color: #dc143c;
}
li.even{
color: #4682b4;
}
カテゴリ一覧
- アクション
- ミステリー
- SF
- ヒューマン
- ラブストーリー
- ノンフィクション
li要素に対してclass属性の値として交互に「odd」と「even」を割り当てています。そしてスタイルシートではli.oddとli.evenに別々のスタイルを割り当てることで1行毎に違う見た目になるようにしています。
IDセレクタ
HTML
<div id="header">
映画の趣味のページ
</div>
<p>
カテゴリ一覧
</p>
<ul>
<li>アクション</li>
<li>ミステリー</li>
<li>SF</li>
<li>ヒューマン</li>
<li>ラブストーリー</li>
<li>ノンフィクション</li>
</ul>
<div id="footer">
Copyright (C) 2009 映画の友
</div>
css
div#header{
border-bottom: 1px solid #c0c0c0;
}
#footer{
border-top: 1px solid #c0c0c0;
}/p>
結果
カテゴリ一覧
- アクション
- ミステリー
- SF
- ヒューマン
- ラブストーリー
- ノンフィクション
解説
ページ内にヘッダとフッタを表すdiv要素に対してid属性を割り当て、前者には下側に、後者には上側に線を設定しました。