ホームページ >ウェブフロントエンド >CSSチュートリアル >他のスタイル CSS/HTML をハイパーリンクに追加する

他のスタイル CSS/HTML をハイパーリンクに追加する

PHP中文网
PHP中文网オリジナル
2016-05-16 12:12:261683ブラウズ

ハイパーリンクに追加のスタイルを追加します

<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 までご連絡ください。