欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  web前端

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

程序员文章站 2022-04-20 11:34:36
...
给超级链接增加其他样式
<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>
相关标签： 给超级链接增加其他样式

上一篇： PHPExcel（一）- 导出功能

下一篇： CSS如何使用图像拼合技术？

推荐阅读