スタイルシートの記述の仕方は通常、以下の３つです。
(1)外部スタイルシート
(2)style要素
(3)style属性
外部スタイルシート
HTML/XHTML文書とCSSファイルに分けて記述するので、サイト全体で同じデザインを使うならこの方法がいいでしょう。
デザインを変える場合もCSSファイルだけを変更するだけで、サイト全体が変わるので変更が楽です。
ページが変わってもCSSファイルはキャッシュされるので通信のトラフィックも減ります。
（MacのIEなどはページの更新をしてもCSSファイルはキャッシュを読むので、サイト製作時には気をつけてください。）
CSSファイル
通常、拡張子は.cssです。
画像を読み込むときはHTML文書基準ではなく、このファイル基準で記載します。
（Netscape4ではHTML文書基準です。）
style.css
color: #333;
background-color: #fff;
}
h1 {
margin: 0px;
padding: 0px;
}
HTMLファイル
ヘッダータグの中にCSSファイルを読み込むように書きます。
相対URLでも絶対URLでも使えます。
（実はヘッダータグ以外の場所に書いてもよい）
HTML4では
…………
<meta http-equiv="content-style-type" content="text/css">
<link rel="stylesheet" href="./style.css" type="text/css">
</head>
XHTML1.0/1.1では
…………
<link rel="stylesheet" href="./style.css" type="text/css" />
<?xml-stylesheet href="./style.css" type="text/css" ?>
</head>
style要素
ヘッダータグの中に直接スタイルを書きます。
（実はヘッダータグ以外の場所に書いてもよい）
このページだけにしか使われてないスタイルを書くときに便利です。
キャッシュされないのでサイト製作時にはこの方法がいいと思います。
HTML4では
…………
<meta http-equiv="content-style-type" content="text/css">
<style type="text/css">
<!--
body{
color: #333;
background-color: #fff;
}
h1 {
margin: 0px;
padding: 0px;
}
-->
</style>
</head>
XHTML1.0/1.1では
…………
<meta http-equiv="content-style-type" content="text/css" />
<style type="text/css">
body{
color: #333;
background-color: #fff;
}
h1 {
margin: 0px;
padding: 0px;
}
</style>
</head>
style属性
スタイルを適用したい要素の開始タグに属性としてスタイルを書きます。
デザインの変更が面倒になります。
プログラムでHTML文書を書き出す場合でヘッダータグを簡単に変更できないときなどに使います。
…………
<h1 style="margin: 0px;padding: 0px">テスト</h1>
</p>
</body>
style属性はなるべく使わないほうがよいです。
FireFox、Operaでは次のような指定もできます。
cursor: pointer;
}
『inputタグにtype="submit"属性が付いていたら』という指定です。
Internet Explorer6以前が対応してないので実際には使えません。
Internet Explorer7は対応しています。
