スタイルシートを定義する
■HTMLファイルにスタイルシートを定義する
■例
<HTML>
<HEAD>
<TITLE>タイトル</TITLE>
<STYLE TYPE="text/css">
<!--
BODY{スタイル}
DIV{スタイル}
DIV.名{スタイル}
DIV#名{スタイル}
-->
</STYLE>
</HEAD>
<BODY>
<DIV>
</DIV>
<DIV
class="
名">
</DIV>
<DIV
id="
名">
</DIV>
</BODY>
</HTML>
スタイルシートをHTMLファイルに直接記述する場合<HEAD>〜</HEAD>内に記述します。
スタイルシート非対応ブラウザではスタイル定義部分が表示されてしまうので、スタイルシートを記述している部分は<!--コメントタグ-->で囲みます。
<HEAD>
<STYLE TYPE="text/css">
<!--
スタイル定義部分
-->
</STYLE>
</HEAD>
■タグに適用
スタイルシートをHTMLタグに対して定義しするには、タグ{スタイル}の様に記述します。
複数スタイルを記述する場合は;セミコロンで区切り、異なるタグに同じスタイルを適用する場合は,カンマでタグを区切って記述します。
BODY { color:red ; background-color:white }
INPUT,TEXTAREA,OPTION { color:#000099 }
■class指定とid指定
指定した複数のタグに同じスタイルを適用させる場合や、指定したタグにのみスタイルを適用させる場合、タグに「class=」で任意の名前を指定し、スタイル定義部分には「.名前」で記述します。
<STYLE><!--
DIV { 全てのDIVタグに適用 }
.1 { 全てのclass="1"に適用 }
DIV.1 { DIVタグのclass="1"にのみ適用 }
--></STYLE>
<DIV>
クラス指定無し</DIV>
<DIV class="1">
クラス名="1"</DIV>
<P class="1">
クラス名="1"</P>
■外部からスタイルシートファイルを読み込む
■例
<HTML>
<HEAD>
<TITLE>タイトル</TITLE>
<LINK REL="StyleSheet" HREF="CSSファイルURL">
</HEAD>
<BODY>
</BODY>
</HTML>
■インポート
外部CSSファイルを、そのページのスタイル定義部分に埋め込む事もできます。
この場合、そのページのスタイルを同時に定義する事ができます。
※両方に重複する指定があった場合、インポートされたスタイルが優先されます。
<HEAD>
<STYLE TYPE="text/css">
<!--
@inport url(CSSファイルURL);
DIV{スタイル}
DIV.名{スタイル}
DIV#名{スタイル}
-->
</STYLE>
</HEAD>
■スタイルシートファイル
CSSファイルには<HEAD>や<STYLE TYPE="text/css">は書かずに、スタイル定義部分のみを記述し、拡張子「.css」で保存します。
BODY {border-style:solid}
DIV { width:200px }
P{ color:red }
■タグに直接スタイルを定義する
■例
<タグ STYLE="スタイルを定義">〜</タグ>
■STYLE属性
殆どのタグにSTYLE属性があり、その要素にスタイルシートを定義します。
■入力例
<DIV
STYLE="color:red">文字</DIV>
■スタイルを定義する為のタグ
■例
<SPAN STYLE="スタイルを定義">〜</SPAN>
■<SPAN>タグ
<SPAN>タグは、スタイルを定義する為だけのタグです。
その他のタグの様に、タグ自体に意味はありません。
■入力例
<SPAN STYLE="color:red">文字</SPAN>
Presented by
HTML辞典