分享
当前位置:首页 > 技术交流

网站建设如何改变链接访问后的颜色

作者:潍坊设计 网址:http://www.536123.com/technology/link-color.htm

网站建设被访问之后颜色不变的链接是网站可用性问题,潍坊设计为您介绍一下如何改变链接访问后的颜色。

为什么要改变链接访问后的颜色

在网站上,链接是导航的过程中是一个关键因素。对于任何类型的导航设计,最古老的可用性准则就是要帮助用户认识到他们曾经去过哪些地方,他们现在处在哪里,他们可以去到哪里。用户将会停止使用那些在过去证明是没用的链接。相反的,他们可能会再次访问那些在过去证明是有用的链接。最重要的是,在用户知道他们已经访问过那些页面后,他们就不大可能再无意识的去访问他们了。

链接的作用除了为用户提供导航以外,还需要告诉用户哪些网页已经访问过。网站建设时往往有很多链接指向一个网页,甚至链接使用的文字都不一样,所以很可能会造成用户从另一个链接有访问到一个已经访问过的网页。为了让用户知道哪些链接是已经访问过的,需要改变链接访问后的颜色。

如何改变链接的颜色

网站建设可以使用CSS样式来控制链接的颜色。其实浏览器已经设置好了一套CSS样式了,默认颜色为蓝色,访问过的链接颜色是紫色。当然这种“万恶”的颜色设置已经不常见了,如果网站建设时不修改链接颜色,会被客户认为网站没有完成。

下面是潍坊设计www.536123.com的链接样式设置:

a:link {
color: #847B55;
text-decoration: underline;
}

a:visited {
color: #C4BBA2;
text-decoration: underline;
}

a:hover {
text-decoration: underline;
color: #AF8A29;
}

a:active {
color: #D2AD4A;
text-decoration: underline;
}

“a”就是链接的Html标记,一般情况下代码是“<a href="网址" title="链接标题">链接</a>”。在CSS样式中,链接a有四种状态,分别是link、visited、hover和active。a:link是链接的默认状态,是一个链接在没有被访问过时显示的默认状态。a:visited是链接访问后的状态。a:hover是鼠标移动到链接上的状态。a:active是当前访问的链接。

前三个比较好理解,最后一个比较难理解。当点击一个链接后,网站会访问一个新的页面,如果新网页是以新窗口的方式弹出,或者访问新网页后使用后退按钮返回刚才访问的网页,这时刚才点击的链接就处于active状态,active是告诉用户刚刚访问的是哪个链接。

我们来看一下潍坊设计a标记CSS样式的内容:

“color: #847B55;”设置的是a标记的颜色。关于使用什么颜色设置,属于仁者见仁,智者见智的问题。颜色的选择有一个基本准则,要让用户能够轻松的区别链接的四种状态。一般情况下a:link的颜色要比a:visited的醒目。如果链接没有下划线,链接的颜色一定不能与其他文字相同或相近。

“text-decoration: underline;”设置的是a标记需要显示下划线,这个应该是默认设置,但是由于网站上某些链接不需要或者不能显示下划线,所以为了保证链接样式的兼容性,所以对于默认状态都是设置了下划线。

样式设置好以后,如果不起作用,那么就需要检查一下样式的兼容性,不同样式表文件或同一文件中不同位置的设置,都可能向冲突。样式的优先级原则就是越靠近Html标记优先级越高。

链接a四种状态的样式设置顺序是固定的,及必须是采用a:link、a:visited、a:hover、a:active这种顺序,否则可能会出现问题。

上一篇文章:网站建设图片格式如何选择

下一篇文章:网站建设数据库基本知识