リンクを貼った文字や画像の装飾スタイルシートです。
いろいろできて、楽しいです♪
リンク用スタイルシートの使い方
</title>〜</head>に以下のタグを入れます。
<style type="text/css">
<!--
【スタイルシートの内容】
-->
</style>
|
リンクの装飾は、以下の4種類を別々に指定できます。
a:link{○○}
という風に書き、○○には装飾の内容を入れます。
4種類すべてを同じ指定にする場合は、
a:{○○}
と書きます。
|
a:link
|
クリック前
| |
a:hover
|
マウスをのせたとき
| |
a:active
|
クリックしたとき
| |
a:visited
|
クリック後
|
これを入れると、そのページのリンクすべてに適応します。
◆ページの特定のリンクだけに使いたい場合
それ用の名前を半角英数字でつけて、「 { 」の前に「. ( ピリオド )」に続けて【名前】に入れます。
上記のスタイルシートを使いたいリンクの<a href=〜>内に以下のタグを追加します。
【名前】は、上記と同じものを入れます。
リンクの下線
下線有りなら「underline」、無しなら「none」で。
リンク文字の色
リンク文字のサイズ
リンク文字のフォント
リンク文字・画像の背景色
画像は透過したものでないと、背景が見えませんｗ
リンク文字・画像の背景画像
画像は透過したものでないと、背景が見えませんｗ
リンク文字・画像の枠
枠は「border」の代わりに以下のタグを使って、上辺、下辺、左辺、右辺を別々に装飾することもできます。
|
上辺
|
border-top
|
左辺
|
border-left
| |
下辺
|
border-bottom
|
右辺
|
border-right
|
または、太さを「border-width」、色を「border-color」、スタイルを「border-style」として単独での指定もできます。
これを使うとき、半角スペースをあけて4つ並べると、「【上辺】 【右辺】 【下辺】 【左辺】」の順に指定できます。
行間や枠の太さによっては、枠がとび出たり重なったりするので、最小限がいいかと思います。
余白も同時に指定すると完璧ですが、そこまで凝っても…という気もしますｗ
リンク文字・画像の位置
これは「a:hover」、「a:active」以外で使うと変なことになるので、使わない方がいいと思います。
「active」だけに使えば、ボタンを押したような効果を狙えます(｀・ω・´)
【縦】は元の位置の上から、【横】は元の位置の左から何ピクセルの位置になるかを指定します。
|
position:relative;top:【縦】;left:【横】
|
※リンク用のスタイルシートは、<a href=〜>内に直接「style="○○"」と入れることもできます。
この場合は「a:{○○}」と同じになります。
「HTMLタグ」のトップに戻る
|
|
|
