目次
- style要素 : HTMLファイルに直接CSSを記述する方法①
- style属性 : HTMLファイルに直接CSSを記述する方法②
- link要素 : 外部ファイルにCSSを記述しHTMLファイルに読み込む方法
- @import : 外部ファイルにCSSを記述し別のCSSに読み込む方法
style要素 : HTMLファイルに直接CSSを記述する方法①
style要素でHTMLファイルに直接CSSを記述する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプル</title>
<style media="screen">
p {
color: white;
background-color: brown;
}
</style>
</head>
<body>
<p>これは本文です</p>
</body>
</html>- HTMLのstyle要素は、要素内容にCSSを記述することができる要素です。
- media属性を使って、適用対象の表示媒体（モニター、TV、紙など）、ページ幅や高さなどの適用条件（メディアクエリ）を指定することが可能です。
style属性 : HTMLファイルに直接CSSを記述する方法②
style属性でHTMLファイルに直接CSSを記述する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプル</title>
</head>
<body>
<p style="color: white;background-color: brown;">これは本文です</p>
</body>
</html>- HTMLのグローバル属性であるstyle属性は、その値にCSSを記述することができます。
- その適用対象は属性を記述した要素のみであるため、記述する値にセレクタと宣言ブロックは不要です（適用対象を指定する必要がありません）。
link要素 : 外部ファイルにCSSを記述しHTMLファイルに読み込む方法
外部ファイルにCSSを記述しlink要素でHTMLファイルに読み込む
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプル</title>
<link rel="stylesheet" href="css/master.css" media="screen">
</head>
<body>
<p>これは本文です</p>
</body>
</html>- HTMLのlink要素は、関連する別のファイルのURLやファイルパスをhref属性に指定することができる要素です。
- これはCSSファイルを読み込む場合にも利用することができます。
- media属性を使って、適用対象の表示媒体（モニター、TV、紙など）、ページ幅や高さなどの適用条件（メディアクエリ）を指定することが可能です。
@import : 外部ファイルにCSSを記述し別のCSSに読み込む方法
外部ファイルにCSSを記述し@importで別のCSSに読み込む
@charset "UTF-8";
@import "css/master.css" screen;
p {
color: white;
background-color: brown;
}- @importを利用することで、CSSの中から外部CSSファイルを読み込むことができます。
- @importの後ろには、ダブルクォーテーションやシングルクォーテーションで囲ったURLやファイルパスを記述します。
