CSSの記述その9 sideカラムの装飾

sideカラムの装飾
sideカラムのリンクリストを装飾します。
(以下Read more…から)

sideカラムの装飾
#side dt{
font-size:90%;
}

#side dd{
margin:0 0 1em 0;
}

#side li{
list-style:disc outside;
margin:0 0 0.5em 1em;
font-size:80%;
}

#side li a{
color:#333;
}

#side li a:hover{
color:#cc6600;
}
  • 01.~03. dtのフォントサイズ
  • 05.~07. 2項目をdt、ddで定義、ddに対しmarginで下余白を確保
  • 10. list-style:disc outside; リストマークとテキストのインデント
  • 11.~12. 余白、フォントサイズ
  • 15.~17. リンクテキストのテキストカラー
  • 19.~21. リンクテキストのhover時のテキストカラー
今日の分のサンプルページ
http://boxboa.jp/weblog/sample/css20081204.html
今日の分のCSS
http://boxboa.jp/weblog/sample/css/css20081204.css cssファイル 3KB
これまでの記事
  1. CSSの記述その1 先ず1行目あたりから
  2. CSSの記述その1.5 11.17の続き
  3. CSSの記述その2 大枠ブロック要素をレイアウト
  4. CSSの記述その3 テキスト回りが窮屈なんで、その辺のスタイル
  5. CSSの記述その4 見出し要素のテキストを成形
  6. CSSの記述その5 header内ナビゲーションリンク成形
  7. CSSの記述その6 ポストメタデータdl部位成形
  8. CSSの記述その7 パラグラフ内img画像とテキスト
  9. CSSの記述その8 content内dlまわりの装飾
前回のcss
http://boxboa.jp/weblog/sample/css/css20081201.css cssファイル 2KB
  • Posted : カナキ |
  • カテゴリー:csshtml

コメント投稿期間が終了しました。