CSS学习第四天 链接&列表

设置链接样式

能够设置链接样式的 CSS 属性有很多种（例如 color, font-family, background 等等）。

链接的特殊性在于能够根据它们所处的状态来设置它们的样式。

链接的四种状态：

• a:link - 普通的、未被访问的链接
• a:visited - 用户已访问的链接
• a:hover - 鼠标指针位于链接的上方
• a:active - 链接被点击的时刻

文字颜色设置

a:link {color:#FF0000;} /* 未被访问的链接 */
a:visited {color:#00FF00;} /* 已被访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */

a:active {color:#0000FF;} /* 正在被点击的链接 */

文字背景色设置

a:link {background-color:#B2FF99;}

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

a:active {background-color:#FF704D;}

设置列表样式

列表标志类型

ul {list-style-type : square}

ul.circle {list-style-type:circle}    / /无序表  标志位圆圈
ul.square {list-style-type:square}  //无序表  标志位方块
ol.upper-roman {list-style-type:upper-roman}  //  有序表  标志为大写罗马数字

ol.lower-alpha {list-style-type:lower-alpha}  // 有序表  标志为小写字母

列表项图像

ul li {list-style-image : url(xxx.gif)}

列表标志位置

list-style-position: inside or outside

简写列表样式

为简单起见，可以将以上 3 个列表样式属性合并为一个方便的属性：list-style，就像这样：

li {list-style : url(example.gif) square inside}