 |
 |
スタイルシート見習所
スタイルシート記述方法
■スタイルシートの読み込み
| <link rel=stylesheet href="スタイルシートのURL" type="text/css"> |
たとえば、「top.html」にスタイルシート「style1.css」を読み込むとします。
●「top.html」
<link rel=stylesheet href="style1.css" type="text/css">
<body>
<H1>外部のスタイルシートが読み込まれ、青字、イタリックになっています。</H1>
<p>きちんと表示されています</p>
何も設定されていない部分です。
</body> |
●「style1.css」
H1 {color:blue; font-style:italic;}
P {font-size:24px} |
以上の見本はこちら。
■HTML内への記述
<style type="text/css">
<!--
-->
</style> |
「type="text/css"」 は必須です。また、スタイルシートに対応していないブラウザで設定部分が本文として表記されないように「<!-- --> 」（コメント）で囲んでおきます。
■インラインの記述
一つのタグ内だけのスタイル設定の場合は、タグ自身にスタイル設定をします。
■スタイルの設定優先順位
階層が上位のタグで設定されたスタイルは、下位のタグにも使用されます。これを「継承」と言います。下位のタグで改めて書式を設定すれば、そちらが優先されます。
上記、３パターンでは「インラインの記述」＞「HTML内の記述」＞「スタイルシートの読み込み」となります。
<body style="background-color:#ffffff;font-size:18px;">
<p>bodyで、背景色白と、フォントサイズ18pxが設定されています。</p>
<p style="background-color:#009933;color:#00ffff;font-size:24px;">
下位のタグ（p）で設定されたスタイルが優先されます。
</p>
<ul style="background-color:#ff9999;font-size:12px;">
<li>ULとLIの関係も上位と下位です。
<li>したがってULで設定したスタイルはそのままLI（リスト）に適用されます。
</ul>
</body> |
以上のスタイルシートの見本はこちら。
スタイルシート一覧
みつけたきせきブログ大作戦
このほか、みつけたききのブログにて、スタイルシートの一覧を表示しています。
⇒みつけたブログ大作戦
|
|
|
 |
