スタイルシートの基礎

スタイルシートの構造

スタイルシートの記入は2つの方法があります。
@ <BODY> 〜 </BODY> に記述(個別指定)
A <HEAD> 〜 </HEAD> に記述(一括指定)

<BODY> 間のスタイルシート

<BODY> 間のスタイルシートは各タグに「style」を付け加えて記入します。
(例)
記述
<div style = " font-size:16pt; padding:5px; background-color:#FFFFCC; > テスト文章 </div>
           ↓
表示
テスト文章

<HEAD> 間のスタイルシート

<HEAD> 間のスタイルシートは、
<style>
<!--
スタイルシート記述
-->
</style>
と記述されます。

1.同じタグ全てにスタイルシートを適用する
スタイルシートの記述
 タグ名 {スタイル要素1 ; スタイル要素2 ; }
上記のように記述すると<BODY> 間で使用された指定タグ全てにスタイルシートが適用されます。
(例)
スタイルシート記述
div { font-size:16pt; padding:5px; background-color:#FFFFCC; }
           ↓
本文記述
<div> テスト文章 </div>

2.指定した部分全てに同じスタイルを適用する
<HEAD> 間で、
 .クラス名 {スタイル要素1 ; スタイル要素2 ; }
  または
 #クラス名 {スタイル要素1 ; スタイル要素2 ; }
のように記述すると、本文中(<BODY> 間)の
 <タグ名 class="クラス名">〜<タグ名>
  または
 <タグ名 id="クラス名">〜<タグ名>
の部分に反映される。(.(ピリオド) は class、# は id に適用)
(例)
スタイルシートで以下のように記述
 .spantest {color:red;font-size:150%;}
<BODY> 間で以下のように記述
 <span class="spantest">テスト文字</span>
とすると、『テスト文字』が『テスト文字』と表示される。
id は一回のみ適用、class は複数回使用可。
他タグ部分でも class="クラス名"を付け加えると同じスタイルが適用される。

※タグ一覧は使用頻度の高いもののみ抜粋。