展会信息港展会大全

HTML超链接a标记CSS样式写法示例
来源:互联网   发布日期:2016-03-25 15:51:48   浏览:2600次  

导读:下面我们介绍对于css初学者会有一点帮助了,主要告诉你HTML超链接a标记CSS样式写法,这里简单举了一个实例。定义链接样式的四个伪类 1 :link 2...

下面我们介绍对于css初学者会有一点帮助了,主要告诉你HTML超链接a标记CSS样式写法,这里简单举了一个实例。

定义链接样式的四个伪类

1 :link

2 :visited

3 :hover

4 :active

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

1 a:link,定义正常链接的样式;

2 a:visited,定义已访问过链接的样式;

3 a:hover,定义鼠标悬浮在链接上时的样式;

4 a:active,定义鼠标点击链接时的样式

样式表CSS中定义链接 A 的顺序,可能会对大家有一些帮助:

A:link { color: #000000; TEXT-DECORATION: none}

A:visited { COLOR: #000000; TEXT-DECORATION: none}

A:hover { COLOR: #ff7f24; text-decoration: underline;}

A:active { COLOR: #ff7f24;text-decoration: underline;}

a :link、a:hover、a:visited这几个元素,定义CSS时候的顺序不同,也会直接导致链接显示的效果不同。

我想,原因就在于浏览器解释CSS时遵循的“就近原则”。

代码如下

复制代码

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<style type="text/css">

<!--

A.mytest:link {

FONT-SIZE: 12px; COLOR: #5b5b5b; TEXT-DECORATION: none

}

A.mytest:visited {

FONT-SIZE: 12px; COLOR: #969696; TEXT-DECORATION: none

}

A.mytest:active {

FONT-SIZE: 12px; COLOR: #0099ff; TEXT-DECORATION: none

}

A.mytest:hover {

FONT-SIZE: 12px; COLOR: #ff6102; TEXT-DECORATION: none

}

--></style>

<title>Insert title here</title>

</head>

<body>

<A href="#" class="mytest">test</A>

</body>

</html>

赞助本站

人工智能实验室

相关热词: 开发 编程 android

AiLab云推荐
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港