HTML は一部の情報しか表示できず、ページをより美しくするには CSS と組み合わせて使用する必要があります。 Web ページでは、すべてのスタイル コードを HTML ドキュメントから別のスタイル シートに移動できます。
CSS スタイルは、HTML 文書内に別ファイル (.css 形式のファイル) として導入する方法と、HTML 文書内に直接記述する方法があります。大きく分けて、次の 4 つの方法があります。
1. 埋め込みスタイルシート
埋め込み: Web ページの <head></head> タグ ペアの <style></style> タグ ペアに CSS スタイルを集中させます。
HTML の <head> タグ内の <style> タグに CSS スタイルを追加します。埋め込みスタイル シートを使用して定義された CSS スタイルは、現在の Web ページ内でのみ使用できます。
<!DOCTYPEhtml><html><head><title>インライン スタイル</title><style>body{background-color:linen;}h1{color:maroon;margin-left:40px;}</style>< / head><body><h1>スタイル</h1></body></html>埋め込みスタイル シートは HTML ドキュメント内で CSS スタイルを定義する必要があるため、ドキュメントのサイズが大きくなります。また、他のドキュメントでも埋め込みスタイル シートで同じスタイルを使用する必要がある場合、他のドキュメントに CSS スタイルを導入できず、他のドキュメントで再定義すると、コードの冗長性が生じ、後のメンテナンスに役立ちません。
2. インラインスタイル
インライン: インラインとも呼ばれ、CSS スタイルはタグの style 属性に設定されます。このアプローチは CSS の利点を反映していません。
インラインスタイルは、HTMLタグのstyle属性に直接スタイル情報を定義するもので、タグ内で定義されるため、そのタグ内でのみ有効となります。
<!DOCTYPEhtml><html><head><title>インライン</title></head><body><h1style=color:maroon;margin-left:40px>インライン</h1></body ></html >インラインスタイルはHTMLタグに簡単にCSSスタイルを与えることができますが、欠点も非常に明らかなので、あまり使用することはお勧めできません。
(1) インライン スタイルを定義するには、各 HTML タグで style 属性を定義する必要があり、非常に不便です。
(2) インライン スタイルで二重引用符または一重引用符を使用する場合は特に注意してください。HTML タグの属性では、通常、<input type=text> などの属性値を囲むために二重引用符が使用されるためです。
(3) インライン スタイルで定義されたスタイルは、他の場所では再利用できません。
(4) インライン スタイルは、通常、Web サイトは多くのページで構成されており、ページ スタイルを変更する場合はページを 1 つずつ変更する必要があるため、後のメンテナンスで非常に不便です。
(5) インライン スタイルを追加しすぎると、HTML ドキュメントのサイズが大きくなります。
3. 外部スタイルシート
リンク タイプ: 4 番目のインポート タイプと同様、外部 CSS ファイルを参照するにはリンクを使用します。
外部スタイル シートは、CSS を参照する最も一般的で推奨される方法です。CSS スタイルを .css 形式ファイルで定義し、HTML の <link> タグを使用して .css 形式のスタイル ファイルを HTML に適用するだけです。文書。
<!DOCTYPEhtml><html><head><title></title><linkrel=stylesheetthref=./style.css></head><body><h1>外部スタイルシート</h1></body>< / html>
CSS スタイルは別の .css 形式ファイルで定義されているため、Web ページのスタイルを変更する場合は、この CSS スタイル ファイルを変更するだけで済み、非常に便利です。
4. スタイルシートをインポートする
インポート済み: @import を使用して外部 CSS ファイルを参照します。
@import を使用して外部スタイル シートを参照することもできます。これは、<link> タグを使用する場合と同様です。まず一般的な style.css を作成し、最初にすべてのスタイルを style.css にインポートします。
HTML:
<!DOCTYPEhtml><html><head><title></title><linkrel=stylesheetthref=style.css></head><body><h1>外部スタイル シート</h1></body></html >
スタイル.css:
@import1.css;@import2.css;@import3.css;@import4.css;
1.css：（1から4までのCSSは同じで、すべてスタイルを追加します）
.top1{リストスタイルタイプ:なし;マージン:0;パディング:0;}