CSS版リンクの基本。
リンク これがリンクです。
これはこのページへのリンクが貼ってあります。
訪問前の色は赤、訪問済みの色はピンク、訪問中の色は青、触れた時の色は緑、
そして、触れた時は下線が出るように設定しています。
CSSでの「リンク」というのは、「リンクをするときの設定をする」
ということになります。
リンクに触ったら色が付くだとか、文字が変わるだとか、
そのような設定を行います。
まず、基本となるのがこのタグです。
<![CDATA[
<style type=text/css>
<!--
a:link {
普通のリンクについて
}
a:visited {
訪問済みのリンクについて
}
a:active {
訪問中のリンクについて
}
a:hover {
触れた時のリンクについて;
}
-->
</style>
]]>
これを元に、様々な設定をしていきます。
例えば、リンクに色を設定したい時は
<![CDATA[
<style type=text/css>
<!--
a:link {
color:#普通の時のリンクの色;
}
a:visited {
color:#訪問済みのリンクの色;
}
a:active {
color:#訪問中のリンクの色;
}
a:hover {
color:#リンクに触れた時の色;
}
-->
</style>
]]>
このようなタグを書いて設定します。
また、色の変化の上に、文字のサイズが変わるように設定したい場合は
<![CDATA[
<style type=text/css>
<!--
a:link {
color:#普通時のリンクの色;
font-size:普通時の文字サイズpt;
}
a:visited {
color:#訪問済みのリンクの色;
font-size:訪問済みのリンクの文字サイズpt;
}
a:active {
color:#訪問中のリンクの色;
font-size:訪問中のリンクの文字サイズpt;
}
a:hover {
color:#リンクに触れた時の色;
font-size:リンクに触れた時の文字サイズpt;
}
-->
</style>
]]>
それぞれ「fon-size:」という項目が増えたのが分かりますか？
こんなふうに、次々と縦に「文字の色について」「文字のサイズについて」…と項目を順不同に並べていきます。
また、それぞれの「文字サイズ」という言葉のあとに、「pt」とありますが
これはウェブ上での単位を表します。
他にも「px」と「%」がありますが、この単位は好みで使い分けてください。
pt
1
3
5
7
9
11
13
15
px
1
3
5
7
9
11
13
15
%
1
3
5
7
9
11
13
15
と、こんな感じです。
ちなみに、文字サイズに「%」を使う人はあまり見かけないですね。