当前位置:首页 > 前端开发 > html中css样式的a标签

html中css样式的a标签

7个月前 (05-23)64
CSS为一些特殊效果准备了特定的工具,我们称之为“伪类”。其中有几项是我们经常用到的,下面我们就详细介绍一下经常用于定义链接样式的四个伪类,它们分别是:

:link
:visited
:hover
:active

因为我们要定义链接样式,所以其中必不可少的就是超级链接中的锚标签--a,锚标签和伪类链接起来书写的方法就是定义链接样式的基础方法,它们的写法如下:

a:link,定义正常链接的样式;
a:visited,定义已访问过链接的样式;
a:hover,定义鼠标悬浮在链接上时的样式;
a:active,定义鼠标点击链接时的样式。


示例:


a:link {
color:#FF0000;
text-decoration:underline;
}
a:visited {
color:#00FF00;
text-decoration:none;
}
a:hover {
color:#000000;
text-decoration:none;
}
a:active {
color:#FFFFFF;
text-decoration:none;
}


上面示例中定义的链接颜色是红色,访问过后的链接是绿色,鼠标悬浮在链接上时是黑色,点击时的颜色是白色。

如果正常链接和已访问过的链接样式相同,鼠标悬浮和点击时的样式相同,也可以将它们合并起来定义:


a:link,
a:visited {
color:#FF0000;
text-decoration:underline;
}
a:hover,
a:active {
color:#000000;
text-decoration:none;
}


链接定义的顺序
没有规矩不成方圆,虽然链接定义写好了,但它也是有规则的,如果这四项的书写顺序稍有差错,链接的效果可能就没有了,所以每次定义链接样式时务必确认定义的顺序,link--visited--hover-active,也就是我们常说到的LoVe HAte原则(大写字母就是它们的首字母)。

定义局部链接样式
在CSS中写上a:link{}这样的定义会使整个页面的链接样式改变,但有些局部链接需要特殊化,这个问题也不难解决,只要在链接样式定义的前面加上指定的id或class就可以了。

示例:

#sidebar a:link,
#sidebar a:visiteid {
color:#FF0000;
text-decoration:none;
}
#sidebar a:hover,
#sidebar a:active {
color:#000000;
text-decoration:underline;
}


本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/tian_fang/archive/2009/11/12/4802552.aspx

作者:qq201596
来源链接:https://blog.csdn.net/qq201596/article/details/83764432

标签: css

“html中css样式的a标签” 的相关文章

轮廓颜色 | outline-color (Basic User Interface)

  CSS 中文开发手册 轮廓颜色 | outline-color (Basic User Interface) - CSS 中文开发手册...

html用css修改了img标签位置,css怎么设置图片位置?

html用css修改了img标签位置,css怎么设置图片位置?

在HTML中,显示图片的方式有两种:img图片和背景(background)图片。那么在HTML中怎么使用css设置图片位置?下面本篇文章就来给大家介绍使用CSS设...

HTML CSS input 标签 使用方法

示例代码: <input type="input 类型" value="input 按钮显示文字" />...

html怎么设置字的颜色代码,css怎么设置文字颜色?

html怎么设置字的颜色代码,css怎么设置文字颜色?

在html中我们经常要用到css样式来美化html标签的一些不足之处,例如文字颜色。下面本篇文章就来给大家介绍一下使用CSS设置文字颜色的方法,希望对大家有所帮助。...

CSS变形transform(2d)

CSS变形transform(2d)

[1]变形原点 [2]变形函数 [3]多值 前面的话    CSS变形transform是一些效果的集合,主要是移动、旋转、缩放和倾斜这四种基本操作,还...

CSS清浮动处理(Clear与BFC)

CSS清浮动处理(Clear与BFC)

在CSS布局中float属性经常会被用到,但使用float属性后会使其在普通流中脱离父容器,让人很苦恼 1 浮动带来布局的便利,却也带来了新问题 1 <!d...

web前端开发发展趋势,CSS颜色基本样式,含泪整理面经

web前端开发发展趋势,CSS颜色基本样式,含泪整理面经

前言 JavaScript是面向 Web 的编程语言,获得了所有网页浏览器的支持,是目前使用最广泛的脚本编程语言之一,也是网页设计和 Web...

js修改css样式的方法,js如何设置css样式?js修改css样式的方法

js如何设置css样式?本篇文章就给大家介绍js设置(修改)css样式的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 下面我们就给...

使用CSS更改图标的颜色

使用CSS更改图标的颜色

我们经常在很多网站上见到更改网站的主题时,图标的颜色也改变了,我们总是觉的这一项功能非常伟大,因为我们知道使用CSS是无法完成更改图片的颜色的。那么,网站上随心所欲的图标颜色是采用N多个...

css背景颜色如何铺满屏幕

解决背景图片无法撑满屏幕的问题:   background-size: cover;   height:&nb...