リンクの特殊効果スタイルシート具体例

リンクの特殊効果スタイルシート具体例

リンクの特殊効果に関してのスタイシートの具体的な書き方です。
状態に応じて文字の色・太さ・背景色・枠等を帰ることができます。クリックする前とした後で文字の色を変えたり、リンク部にマウスカーソルが載った時背景色を変えたりできます。

損をしない自動車保険選び損をしないクレジットカード選び銀行の利用就職・アルバイト情報
TOPページに戻る文字サイズを変えるには Control キーを押しながらマウスのスクロールホイールを回してください

リンクの特殊効果に関してのスタイルシート具体例 ▲

リンクの場合は『どこに』と『何を』をまとめて覚えてしまいます。

リンクは4つの状態に分けて効果を設定できます。
A: link はクリックしていないリンクに対して効果を設定できます。
A: visited　はクリック済みのリンクに対して効果を設定します。
A: active　はクリックしている最中のリンクに対して効果設定になります。
A:hover　はリンク部にマウスカーソルが載ったときの効果設定です。

クリックしていないリンクへの効果

A:link { color: #006600;font-size:80%;text-decoration: none;}

A:link { }と書くと、クリックしていないリンク部が{ }内で指示した内容になります。{ }内には今迄やってきた color: 、background-color: 、text-decoration: 、font-size: 、border: 、等色々なものを指定することができます。

<HTML><HEAD><TITLE>　　</TITLE>
<STYLE TYPE="text/css">

</STYLE>
</HEAD>
<BODY>
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
ＡＶ感覚で気軽に使える<A href=".htm">マルチＡＶノート</A>誕生。
</BODY></HTML>

テレビも映画も音楽も、ワンタッチですばやく楽しめる。
ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。

クリック済みのリンクへの効果

A:visited { color: #aa0000; font-size:80%;text-decoration: none;}

A:visited { }と書くと、クリック済みのリンクに対し{ } 内の内容を適用します。

<HTML><HEAD><TITLE>　　</TITLE>
<STYLE TYPE="text/css">

</STYLE>
</HEAD>
<BODY>
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
ＡＶ感覚で気軽に使える<A href="aa.htm">マルチＡＶノート</A>誕生。
</BODY></HTML>

テレビも映画も音楽も、ワンタッチですばやく楽しめる。
ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。

リンク中のリンク部への効果

A:active { color: #FF0000; text-decoration: none;font-size:80%;}

A:active { }と書くと、リンク中のリンク部に対し{ } 内の内容を適用します。

<HTML><HEAD><TITLE>　　</TITLE>
<STYLE TYPE="text/css">

</STYLE>
</HEAD>
<BODY>
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
ＡＶ感覚で気軽に使える<A href="aa.htm">マルチＡＶノート</A>誕生。
</BODY></HTML>

テレビも映画も音楽も、ワンタッチですばやく楽しめる。
ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。

マウスカーソルが載ったときの効果

A:hover { color: #FFFFFF; background-color: red; text-decoration: none; font-size:80%;}

A:hover { }と書くと、リンク部にマウスカーソルが載ったとき、リンク部に{ } 内の内容を適用します。

<HTML><HEAD><TITLE>　　</TITLE>
<STYLE TYPE="text/css">

</STYLE>
</HEAD>
<BODY>
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
ＡＶ感覚で気軽に使える<A href="aa.htm">マルチＡＶノート</A>誕生。
</BODY></HTML>

テレビも映画も音楽も、ワンタッチですばやく楽しめる。
ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。

今迄の指定をまとめて<HEAD></HEAD>間に記入すると、すべての効果がリンク部に与えられます。

A:link { color: #006600;font-size:80%;text-decoration: none;}
A:visited { color: #aa0000; font-size:80%;text-decoration: none;}
A:active { color: #FF0000; text-decoration: none;font-size:80%;}
A:hover { color: #FFFFFF; background-color: red; text-decoration: none; font-size:80%;}

<HTML><HEAD><TITLE>　　</TITLE>
<STYLE TYPE="text/css">

</STYLE>
</HEAD>
<BODY>
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
ＡＶ感覚で気軽に使える<A href="aa.htm">マルチＡＶノート</A>誕生。
</BODY></HTML>

テレビも映画も音楽も、ワンタッチですばやく楽しめる。
ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。

上に戻る TOPページに戻る前に戻る順番に次を見ていく