cssリンクとリストスタイル

リンクとリストスタイル

リンクスタイル

a:link { color: #FF0000; } /*        */
a:visited { color: #00FF00; } /*       */
a:hover { color: #FF00FF; } /*         */
a:active { color: #0000FF; } /*       */

テキスト修飾

/* text-decoration               */
a:link { text-decoration: none; }
a:visited { text-decoration: none; }
a:hover { text-decoration: underline; }
a:active { text-decoration: underline; }

背景色

a:link { background-color: #B2FF99; }
a:visited { background-color: #FFFF85; }
a:hover { background-color: #FF704D; }
a:active { background-color: #FF704D; }

異なるリスト項目タグ

/* list-style-type         */
ul.a { list-style-type: circle; }
ul.b { list-style-type: square; }
ol.c { list-style-type: upper-roman; }
ol.d { list-style-type: lower-alpha; }

カスタムリストアイテムの画像

ul { list-style-image: url('test.img'); }

ブラウザ対応ソリューション

ul 
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul li
{
background-image: url('square.gif');
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 15px;
}