リンク文字の装飾

前回でマウスポイントが乗ったリンクpに文字色を変えるスタイルを紹介しました。

こちらから

ほかにも様々な装飾があります。

 

html

 
<div class="sample2">
<p><a href="http://dcs-nagoya.com/">名古屋駅前ウェブデザインスクールはこちら</a></p>
</div>

css

div.sample2{
	width:100%;
	height:50px;
	border:solid 1px black;
	margin-bottom:10px
}


div.sample2 p a:hover{
          background-color:#ffc0cb;  ←背景色を指定
}

表示

div.sample3 p a:hover{
          font-weight:bold;   ←太さを指定
 }  

表示

div.sample4 p a:hover{
          font-style:italic;   ←斜体に
 }  

表示