1-4 外部スタイルシートの記述方法
CSSはHTMLにも直接書き込めますが、外部から呼び出す事も出来ます。これを利用すると一括で全てのHTMLページのデザインを変更する事が出来て改装等をする際に非常に重宝致します。
1-4-1 記述方法
a:link {color:#990000;} /* リンク未訪問 */
a:active {color:#ff9999;} /* クリック時 */
a:visited {color:#cc6666;} /* 訪問済リンク */
a:hover {color:#ff9999;} /* マウスポイント時 */
- メモ帳もしくはTerapadなどのテキストエディタを起動させる。
- セレクタ { プロパティ : 値 ; } のみを記述する。
(↑上記の点線内を参照して下さい)。
<style type="text/css"><!-- と --></style> は省いて下さい。 - そのまま名前(半角の英数字)をつけて保存して下さい。
(その際、拡張子を「.txt」から「.css」に変更させる事をお忘れなく)。 - あとはCSSを適用させたいHTMLページの
<head> ~ </head> 内に <link type="text/css" rel="stylesheet" href="名前.css"> と記述すれば使用出来ます。(「名前.css」の部分は相対パスでも絶対パス[http://~]でもどちらでも構いません)
- もし名前を付ける際に失敗をして
二重拡張子(「名前.txt.css」等)になってしまった場合、 そのままFTPソフトでサーバーにアップして下さい。その後、FTPソフトに付随している 『名前を変更する』 機能を選び、使用したい名前(「stylesheet.css」 や 「link.css」等)に変更すればOKです。 - W3C (World Wide Web Consortium →
ダブリュースリーシー : インターネット上で用いられる技術の標準化を管理・勧告している団体) でも、 HTMLには論理的な文章構造を、CSSにはレイアウトやデザイン面をといった形で 双方分けて記載すべきだと提唱されております。