|
- <HEAD>〜</HEAD>間にSTYLE要素を記述する場合に使います。
<STYLE type="text/css">
<!--
スタイルの記述
-->
</STYLE>
- 以下、スタイルの記述内容のみ記載します。
- 1. 文字でリンクした場合の下線をはずす方法
-
a { text-decoration : none; }
と記述すると、Aタグのテキストの飾りをなくします。
- 2. リンクの色の指定方法
-
a { text-decoration : none; font-size : 12pt; font-weight : bold;
}
a:link { color: #FFFFFF;} /* まだ訪れていないリンク */
a:visited { color: #FF0000;} /*すでに訪れたリンク*/
a:active { color: #0000FF;} /*選択中のリンク*/
これは、Aタグのテキストの飾りをなくし、フォントを太字にしフォントサイズを12ポイント(font-sizeを指定しとけば、画面でフォントのサイズ(大、中etc)関係なしにいつも同じ12ポイントで表示されます。)にし、
Aタグのまだ訪れてないリンクの色は白で、
Aタグのすでに訪れたリンクの色は赤で、
Aタグの選択中のリンクの色は青で表示されます。
- 3. リンクの上にマウスが来ると色が変わる方法
-
a:hover { color: red; }
と記述すると、マウスが上に来れば色が赤に変わります。
(従来の font color= と一緒には使わないでください。)
- 4. 文字の基本設定
-
body { font-size: 12pt; font-weight: bold; color:blue;
line-height: 150% }
と記述すると、フォントサイズは12ポイントで固定、太字で青色の文字に
なります。また、文字列の行間を広げると見やすくなります。
(他の要素(p、h1、など)ごとに設定が可能です。)
- 5. その他の設定例
-
複数の要素(一般にはセレクタ)に同一のスタイルを適用する場合,要素(セレクタ)を
半角カンマ( , )で区切って並べて、宣言を書くことができます。
H1, H2 { color: red; }
- ⇒ CSSのプロパティ
⇒ テキスト関連のCSSの例
⇒ 枠線のスタイル
⇒ クラス (CLASS)
|