ＣＳＳを使って、ＨＴＭＬ文書にスタイルシートを適用する方法には、大きく分けて３つの方法があります。
- ピンポイントで適用する（要素にstyle属性を追加）
- ＨＴＭＬ単位で適用する（<style>要素）
- 外部CSSファイルを呼び出して適用する（<link>要素）
ピンポイントで適用する（要素にstyle属性を追加）
ＨＴＭＬ本文中に直接スタイルを記述します。
部分的にスタイルを設定したい場合に便利です。
※<meta>要素内の記述は、誤動作防止のため。
HTMLの記述方法
<html>
<head>
<meta name=”Content-Style-Type” content=”text/css”>
</head>
<body>
<p style=”color: #F00;”>本文</p>
</body>
</html>
ＨＴＭＬ単位で適用する（<style>要素）
文書単位でスタイルシートを設定する方法です。
ＨＴＭＬ文書の<head>要素内に<style>要素を記述します。
HTMLの記述方法
<html>
<head>
<style type=”text/css”>
.color {
color: #F00;
}
</style>
</head>
<body>
<p class=”color”>本文</p>
</body>
</html>
外部CSSファイルを呼び出して適用する（<link>要素）
ＨＴＭＬとは別に、スタイルシートを記述した専用のCSSファイルをHTMLファイルを作成する方法です。
ＨＴＭＬのファイルから呼び出して利用します。
外部ＣＳＳファイルの呼び出し方法は、ＨＴＭＬ文書の<head>要素内に<link>要素を記述。
HTMLの記述方法
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”xxx.css“>
</head>
<body>
<p class=”color2″>本文</p>
</body>
</html>
外部ＣＳＳファイル(xxx.css)の記述方法
@charset “utf-8”;
.color2 {
color: #00F;
}
