CSSの記述方法は3種類
- １．style要素として記述
- ２．style属性として記述
- ３．拡張子.cssの外部ファイルに記述
##１．style要素として記述
###ポイント
head要素、body要素のどちらに記述してもいいけど、head内が推奨されてる。
###メモ
＜style type="text/css"＞の「type="text/css"」は付けなくても問題なし。
例）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>style要素として記述</title>
<!--ここから-->
<style>
h2 {
color: red;
}
</style>
<!--ここまで-->
</head>
<body>
ここに記述しても適用される
<h1>テキスト</h1>
<h2>テキスト</h2>
</body>
</html>
##２．style属性として記述
###ポイント
html内の要素に直接記述する。変更があると全部の要素を書き直さないといけないので大変。
例）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>style属性として記述</title>
</head>
<body>
<!--ここから-->
<p style="font-size: 25px;">
テキストテキストテキスト
</p>
<p style="font-weight: bold;">
テキストテキストテキスト
</p>
<!--ここまで-->
</body>
</html>
##３．拡張子.cssの外部ファイルに記述
###ポイント
head要素にlink要素で追加する。
cssファイルの中身は先頭に「@charset "utf-8";」などの文字コードを追加する以外は1のstyle要素の記述方法と同じ。
例）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>拡張子.cssの外部ファイルに記述</title>
<!--ここから-->
<link rel="stylesheet" href="ファイル名.css">
<!--ここまで-->
</head>
<body>
<h1>テキスト</h1>
<h2>テキスト</h2>
</body>
</html>
例）「ファイル名.css」の中身
@charset "utf-8";
h2 {
color: red;
}
SAMURAI ENGINEER Plus + https://www.sejuku.net/plus/programs/4/chapters/26