CSSを記述する場所のサンプルです。
目次
1.外部のファイルにCSSを記述する
<link href="style.css" rel="stylesheet" > |
- linkタグは、head部に記述します。
- hrefは、外部のCSSファイルのURLを指定します。
- relは、リンクのタイプです。スタイルシートなので"stylesheet"と記述します。
- 1つの外部のCSSファイルは、複数のHTMLファイルにCSSを適用できます。
コード
6行目は、link要素の中で外部のCSSファイルを指定しています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>CSSのサンプル</title>
<link href="style.css" rel="stylesheet" >
<style>
</style>
</head>
<body >
<p class="t1">テスト1</p>
<p class="t2">テスト2</p>
<p>テスト3</p>
</body>
</html>
6行目で指定した、sytle.cssファイルです。
1行目の@charasetは、ファイルの文字コードを指定しています。
@charset "UTF-8";
.t1{
color:blue;
}
.t2{
background-color:Lavender;
}
上記コードの実行結果です。
テスト1
テスト2
テスト3
2.内部でCSSを記述する
<style> CSSを記述 </style> |
- styleタグは、head部に記述します。
- styleタグの間にCSSを記述します。
- CSSは、sytleタグを記述したhtmlだけに適用されます。
コード
6-13行目は、styleタグで囲っています。その中にCSSを記述しています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>CSSのサンプル</title>
<style>
.t3{
color:red;
}
.t5{
background-color:Khaki;
}
</style>
</head>
<body >
<p class="t3">テスト3</p>
<p>テスト4</p>
<p class="t5">テスト5</p>
</body>
</html>
上記コードの実行結果です。
テスト3
テスト4
テスト5
3.タグ内でCSSを記述する
<タグ style="CSSを記述"> |
- タグの中にstyle属性を追加しそこにCSSを記述します。
- インラインスタイルといいます。
- CSSは、style属性があるタグ内に適用されます。
コード
8,9行目では、p要素の中にstyleタグを追加してCSSを記述しています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>CSSのサンプル</title>
</head>
<body >
<p style="color:Crimson;">テスト6</p>
<p style="background-color:PaleGreen;">テスト7</p>
<p>テスト8</p>
</body>
</html>
上記コードの実行結果です。
テスト6
テスト7
テスト8
HTML5で不要になったmetaタグ
HTML5で不要になったmetaタグです。
<meta http-equiv="Content-Style-Type" content="text/css"> |
HTML4.01では、このmetaタグはデフォルトのスタイルシートの言語を指定していました。
HTML5では、CSSがデフォルトのスタイルシートになっているため不要です。
関連の記事
CSSを適用する優先順序のサンプル
CSS スタイルの継承のサンプル(inherit)
カラーコードの一覧表(Webページの色)