Web Developer's Room
HOME > スタイルシート講座 > スタイルシートで動きをつける(1)     

スタイルシートで動きをつける(1)

以下のように同じフォルダ内test.csstest.htmというファイルを作ります。

ファイル名:test.css
A:link { color: #0000FF; }
A:visited { color: #00FF00; }
A:active { color: #FF00000; }
A:hover { color: #FFFFFF; background-color:#000000}

【説明】
A:link・・・訪問されていないリンク→color#0000FFにする。
A:visited・・・訪問済みのリンク→color#00FF00にする。
A:active・・・読み出し中のリンク→color#FF0000にする。
A:hover・・・マウスがリンクの上にきた時→color#000000に、background-color#ccccccにする。

ファイル名:test.htm
<html>
<head>

<link rel="stylesheet" type="text/css" href="test.css">

<body>
<A>リンクのテストです。</A>
</body>
</html>

ページ内に多少動きがでてきます。

 サンプル

関連リンク
  • スタイルシートとは
  • スタイルシートの作り方
  • スタイルシートで使用できる属性
  • スタイルシートで複数の属性を設定する
  • スタイルシートでクラスを設定する
  • スタイルシートで動きをつける(2)




  • スポンサードリンク


    (C) Web Developer's Room All rights reserved.