1. 埋め込みスタイル シート
HTML head の<style>タグ ( <head>タグ内) で CSS スタイルを定義できます. 埋め込まれたスタイル シートで定義された CSS スタイルは、現在の Web ページでのみ使用できます. サンプル コードは次のとおりです. :
<!DOCTYPE html>
<html>
<head>
<title>IT基礎</title>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>IT基礎</h1>
<p>https://it-kiso.com/</p>
</body>
</html> 実行中の効果を次の図に示します。
埋め込みスタイル シートは HTML ドキュメント内で CSS スタイルを定義する必要があるため、ドキュメントのサイズが大きくなり、他のドキュメントも埋め込みスタイル シートで同じスタイルを使用する必要がある場合、他のドキュメントにインポートすることはできません。他のドキュメントでの再定義はコードの冗長性につながり、後のメンテナンスに役立ちません。
2. インライン スタイル
インラインスタイルは HTML タグの style 属性にスタイル情報を直接定義するものですが、インラインスタイルはタグ内で定義されるため、配置されたタグのみ有効です。サンプルコードは次のとおりです。
<!DOCTYPE html>
<html>
<head>
<title>IT基礎</title>
</head>
<body>
<h1 style="color: maroon; margin-left: 40px">IT基礎</h1>
<p style="color: blue;">https://it-kiso.com/</p>
</body>
</html> 実行中の効果を次の図に示します。
インライン スタイルは HTML タグに CSS スタイルを簡単に与えることができますが、その欠点も非常に明白であるため、あまり使用しないことをお勧めします。
- インライン スタイルを定義するには、HTML タグごとに style 属性を定義する必要があり、不便です。
- インライン スタイルで二重引用符または一重引用符を使用する場合は特に注意してください。HTML タグの属性は通常
<input type="text">のように属性の値を囲むために二重引用符を使用するためです。 - インライン スタイルで定義されたスタイルは、他の場所では再利用できません。
- Web サイトは通常多くのページで構成されており、ページ スタイルを変更する場合はページを 1 つずつ変更する必要があるため、インライン スタイルは後のメンテナンスに非常に不便です。
- インライン スタイルを追加しすぎると、HTML ドキュメントのサイズが大きくなる可能性があります。
3. 外部スタイルシート
外部スタイル シートは、CSS を参照する最も一般的で推奨される方法です.CSS スタイルを .css ファイルで定義し、HTML <link>タグを使用して .css スタイル ファイルを HTML に適用するだけです。書類。
以下では、特定の例を使用して、外部スタイル シートの使用方法を示します。まず、次のように、スタイル ファイルを .css 形式 (style.css など) で定義する必要があります。
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
} 次に、次のように、この style.css ファイルを HTML ドキュメントにインポートします。
<!DOCTYPE html>
<html>
<head>
<title>IT基礎</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<h1>IT基礎</h1>
<p>https://it-kiso.com/</p>
</body>
</html> 実行中の効果を次の図に示します。
CSSスタイルは別の.cssファイルに定義されているため、複数のページ間で参照することができ、Webページのスタイルを変更したい場合は、CSSスタイルファイルを変更するだけで済み、非常に便利です。
<link>タグを使用する場合と同様に、 @importを使用して外部スタイル シートを参照することもできます。 @importを使用して外部スタイル シートを参照するための構文は次のとおりです。
@import “URL”;
また
@import url(“URL”);
URL は、外部スタイル シートの保存パスです。
上で定義した style.css スタイル シートも使用する場合、 @importを介して HTML ドキュメントを参照するコードは次のとおりです。
<!DOCTYPE html>
<html>
<head>
<title>IT基礎</title>
<style>
@import url("./style.css");
/*@import "./style.css";*/
</style>
</head>
<body>
<h1>IT基礎</h1>
<p>https://it-kiso.com/</p>
</body>
</html> 実行中の効果を次の図に示します。
@import使用して CSS を参照する場合は、いくつかの注意事項があります。
- HTML ドキュメントで
@import使用する場合、@import<style>タグで定義する必要があります。<style>タグに他の CSS スタイルがある場合は、すべてのスタイルの先頭に@importを定義する必要があります。 @import.css 形式のファイルでも使用できますが、すべてのスタイルの前に定義する必要もあります。@importCSS2.1 の新機能であるため、以前のバージョンのブラウザーではサポートされていない場合があります。- ページが読み込まれると、
<link>タグで参照されるスタイル ファイルはページと同時に読み込まれますが、@importで参照されるスタイル ファイルはページが読み込まれた後に読み込まれます。@importで参照されるスタイル ファイルが大きすぎて、読み込み時間が長すぎると、ページが読み込まれた後にスタイルがなくなり、ユーザー エクスペリエンスに影響を与えます。
![2021 年に Raspberry Pi Web サーバーをセットアップする方法 [ガイド]](https://i0.wp.com/pcmanabu.com/wp-content/uploads/2019/10/web-server-02-309x198.png?w=1200&resize=1200,0&ssl=1)
