CSS 链接

链接样式

   链接的样式可以用任何CSS属性(如颜色,字体,背景等)

   特别的链接,可以有不同的样式,这取决于他们是什么状态。

   这四个链接状态是:

   ·a:link -- 正常,未访问过的链接

   ·a:visited--用户已经访问过的链接

   ·a:hover---当用户鼠标放在链接上时

   ·a:active--链接被点击的那一刻

<!DOCTYPE html>
<html>  
<head>  
    <meta charset="utf-8">  
    <title>自学教程(如约智惠.com)</title>  
	<style>
		a:link {color:#000000;}
		a:visited {color:#00FF00;}
		a:hover {color:#FF00FF;}
		a:active {color:#0000FF;}
	</style>
</head>  
<body >  
	<p><b><a href="http://www.baidu.com" target="_blank">这是一个链接</a></b></p>
	<p><b>注意:</b> a:hover 必须在 a:link 和 a:visited 之后,需要严格按顺序才能看到效果。</p>
	<p><b>注意:</b> a:active 必须在 a:hover 之后。</p>
</body>  
</html>

文本修饰

   text-decoration 属性主要用于删除链接中的下划线:

<!DOCTYPE html>
<html>  
<head>  
    <meta charset="utf-8">  
    <title>自学教程(如约智惠.com)</title>  
	<style>
		a:link {color:#000000;text-decoration:none;}
		a:visited {color:#00FF00;text-decoration:none;}
		a:hover {color:#FF00FF;text-decoration:underline;}
		a:active {color:#0000FF;text-decoration:underline;}
	</style>
</head>  
<body >  
	<p><b><a href="http://www.baidu.com" target="_blank">这是一个链接</a></b></p>
	<p><b>注意:</b> a:hover 必须在 a:link 和 a:visited 之后,需要严格按顺序才能看到效果。</p>
	<p><b>注意:</b> a:active 必须在 a:hover 之后。</p>
</body>  
</html>

背景颜色

   背景颜色属性指定链接背景色:

<!DOCTYPE html>
<html>  
<head>  
    <meta charset="utf-8">  
    <title>自学教程(如约智惠.com)</title>  
	<style>
		a:link {background-color:#B2FF99;}
		a:visited {background-color:#FFFF85;}
		a:hover {background-color:#FF704D;}
		a:active {background-color:#FF704D;}
	</style>
</head>  
<body >  
	<p><b><a href="http://www.baidu.com" target="_blank">这是一个链接</a></b></p>
	<p><b>注意:</b> a:hover 必须在 a:link 和 a:visited 之后,需要严格按顺序才能看到效果。</p>
	<p><b>注意:</b> a:active 必须在 a:hover 之后。</p>
</body>  
</html>

实例

  添加不同样式的超链接

<!DOCTYPE html>
<html>  
<head>  
    <meta charset="utf-8">  
    <title>自学教程(如约智惠.com)</title>  
	<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%;}

		a.three:link {color:#ff0000;}
		a.three:visited {color:#0000ff;}
		a.three:hover {background:#66ff66;}

		a.four:link {color:#ff0000;}
		a.four:visited {color:#0000ff;}
		a.four:hover {font-family:Georgia, serif;}

		a.five:link {color:#ff0000;text-decoration:none;}
		a.five:visited {color:#0000ff;text-decoration:none;}
		a.five:hover {text-decoration:underline;}
	</style>
</head>  
<body >  
	<p>将鼠标移至链接上改变样式.</p>
	
	<p><b><a class="one" href="http://www.baidu.com" target="_blank">这个链接改变颜色</a></b></p>
	<p><b><a class="two" href="http://www.baidu.com" target="_blank">这个链接改变字体大小</a></b></p>
	<p><b><a class="three" href="http://www.baidu.com" target="_blank">这个链接改变背景颜色</a></b></p>
	<p><b><a class="four" href="http://www.baidu.com" target="_blank">这个链接改变字体类型</a></b></p>
	<p><b><a class="five" href="http://www.baidu.com" target="_blank">这个链接改变文字修饰</a></b></p>
</body>  
</html>

  高级--创建链接框

<!DOCTYPE html>
<html>  
<head>  
    <meta charset="utf-8">  
    <title>自学教程(如约智惠.com)</title>  
	<style>
		a:link, a:visited
		{
			display:block;
			font-weight:bold;
			color:#FFFFFF;
			background-color:#98bf21;
			width:120px;
			text-align:center;
			padding:4px;
			text-decoration:none;
		}
	</style>
</head>  
<body > 
	<p><b><a  href="http://www.baidu.com" target="_blank">这是一个链接</a></b></p>
</body>  
</html>
阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/lengyuezuixue/article/details/80349038
文章标签: CSS 链接
个人分类: CSS
上一篇CSS 字体
下一篇CSS 列表
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭