您的位置：首页 > Web前端 > CSS

CSS样式_链接&列表

2016-04-08 07:49 746 查看

CSS链接

链接有四种状态：

a:link 普通的、未被访问的链接

a:visited 用户已访问的链接

a:hover 鼠标指针移动到链接上

a:active 链接被点击的时刻

当为链接的不同状态设置样式时，请按照以下次序规则：

a:hover 必须位于 a:link 和 a:visited 之后

a:active 必须位于 a:hover 之后

<!DOCTYPE html>
<html>
<head>
<style>
a.one:link    {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover   {color:#ffcc00;}

a.two:link    {color:#ff0000;}
a.two:visited {color:#0000ff;}
a.two:hover   {font-size:150%;}
</style>
</head>

<body>
<p>定义两种不同的链接样式。</p>

<p><b><a class="one" href="/index.html" target="_blank">第一种链接样式</a></b></p>
<p><b><a class="two" href="/index.html" target="_blank">第二种链接样式</a></b></p>
</body>

</html>


CSS列表

列表项标志类型 [list-style-type]

标志可以是方块、圆圈等，如：

ul.disc   { list-style-type: disc   }
ul.circle { list-style-type: circle }
ul.square { list-style-type: square }
ul.none   { list-style-type: none   }


列表项图像 [list-style-image]

使用一个url值指定图像的路径，如：

ul { list-style-image: url('/i/eg_arrow.gif') }


列表标志位置 [list-style-position]

规定列表标志的位置，值可以有inside, outside, inherit。如：

ul.inside { list-style-position: inside }


简写列表样式 [list-style]

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

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


list-style 的值可以按任何顺序列出，而且这些值都可以忽略。只要提供了一个值，其它的就会填入其默认值。

更多请参考：W3School
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  css a-link a-visited a-hover list-style
相关文章推荐
新的分享
章节导航