ホームページ > 記事 > ウェブフロントエンド > HTMLファイルにCSSを入れる方法
HTMLファイルにCSSを入れる方法
- 藏色散人オリジナル
- 2021-03-22 11:22:4229780ブラウズ
HTML ファイルに CSS を入れる方法: 1. HTML タグの style 属性に直接 CSS を追加する; 2. HTML ヘッダーの style タグの下に CSS を記述する; 3. head タグを使用して外部を導入するCSS ファイル; 4. CSS ルールを使用して外部 CSS ファイルを導入します。
この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、DELL G3 コンピューター
HTML に CSS を導入する方法
HTML に CSS を導入するには 4 つの方法があります。そのうち 2 つは CSS コードを HTML ファイルに直接追加するもので、他の 2 つは外部 CSS ファイルを導入するものです。これらの方法とその長所と短所を見てみましょう。
インライン メソッド
インライン メソッドとは、CSS を HTML タグの style 属性に直接追加することを指します。
例:
<div style="background: red"></div>
これは通常、悪い書き方であり、現在のタグのスタイルのみを変更できます。複数の dc6dce4a544fdca2df29d5ac0ea9906b に同じスタイルを持たせたい場合は、同じスタイルを各 dc6dce4a544fdca2df29d5ac0ea9906b に繰り返し追加する必要があります。スタイルを変更したい場合は、すべてのスタイルのコードを変更する必要があります。 CSS コードをインラインで導入すると、HTML コードが冗長になり、Web ページの保守が困難になるのは明らかです。
埋め込みメソッド
埋め込みメソッドとは、HTML ヘッダーの c9ccee2e6ea535a969eb3f532ad9fe89 タグの下に CSS コードを記述することを指します。
例:
<head>
<style>
.content {
background: red;
}
</style>
</head>埋め込み CSS は、現在の Web ページでのみ有効です。 CSS コードは HTML ファイル内にあるため、コードがより集中的になり、テンプレート Web ページを作成する際に通常は有利になります。テンプレートのコードを見れば、HTML の構造と CSS スタイルが一目で分かるからです。埋め込み CSS は現在のページでのみ有効であるため、複数のページで同じ CSS コードを導入する必要がある場合、この方法で記述するとコードの冗長性が生じ、メンテナンスに役立ちません。
リンク方法
リンク方法とは、HTML ヘッダーの 93f0f5c25f18dab9d176bd4f6de5d30e タグを使用して外部 CSS ファイルを導入することを指します。
例:
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>これは、CSS を導入する最も一般的で推奨される方法です。このアプローチを使用すると、すべての CSS コードが 1 つの CSS ファイル内にのみ存在するため、保守性が高くなります。また、すべての CSS コードは CSS ファイル内にのみ存在します。CSS ファイルは初めて読み込まれるときに導入されます。今後ページを切り替えるときは、HTML ファイルを読み込むだけで済みます。
インポート メソッド
インポート メソッドは、CSS ルールを使用して外部 CSS ファイルを導入することを指します。
例:
<style>
@import url(style.css);
</style>リンク メソッドとインポート メソッドの比較
リンク メソッド (以下のリンクに置き換えられます) とインポート メソッド (以下の @import に置き換えられます) の両方外部 CSS ファイルを使用する方法を紹介します。これら 2 つの方法を比較し、@import が推奨されない理由を説明します。
link は HTML に属し、外部ファイルは 2cdf5bf648cf2f33323966d7f58a7f3f タグの href 属性によって導入されますが、@import は CSS に属するため、import ステートメントは CSS で記述する必要があります。 import ステートメントは表の先頭のスタイルで記述する必要があります。そうしないと、外部ファイルを正しくインポートできません。
@import は CSS2.1 でのみ登場した概念なので、ブラウザのバージョンが低い場合は、 、外部スタイル ファイルは正しくインポートできません;
When HTML ファイルが読み込まれると、link によって参照されるファイルは同時に読み込まれますが、@import によって参照されるファイルはページが読み込まれるまで読み込まれません。は完全にダウンロードされています。
要約: 2cdf5bf648cf2f33323966d7f58a7f3f タグを使用してインポートする必要があります。外部 CSS ファイルの場合は、他の 3 つの方法を避けるか、あまり使用しません。
【推奨学習: css ビデオ チュートリアル 】
以上がHTMLファイルにCSSを入れる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。