首页 >web前端 >css教程 >给超级链接增加其他样式_CSS/HTML

给超级链接增加其他样式_CSS/HTML

PHP中文网
PHP中文网原创
2016-05-16 12:12:261685浏览

给超级链接增加其他样式

<html> 
<head> 
<style type="text/css"> 
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: monospace} 

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>Mouse over the links to see them change layout.</p> 

<p><b><a class="one" href="default.asp" target="_blank">This link changes color</a></b></p> 
<p><b><a class="two" href="default.asp" target="_blank">This link changes font-size</a></b></p> 
<p><b><a class="three" href="default.asp" target="_blank">This link changes background-color</a></b></p> 
<p><b><a class="four" href="default.asp" target="_blank">This link changes font-family</a></b></p> 
<p><b><a class="five" href="default.asp" target="_blank">This link changes text-decoration</a></b></p> 
</body> 

</html>

让文字的第一行特殊化

<html> 
<head> 
<style type="text/css"> 
p:first-line  
{ 
color: #ff0000; 
font-variant: small-caps 
} 
</style> 
</head> 

<body> 
<p> 
You can use the :first-line pseudo-element to 
 add a special effect to the first line of a text! 
</p> 
</body> 

</html>
声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn