HTMLにCSSを埋め込むにはどうすればいいですか？-CSSチュートリアル-php.cn

CSS スタイルを HTML に埋め込むには、主に 3 つの方法があります:

1. タグの # # を設定します。 # 属性、インライン スタイルと呼ばれます;

2. HTML の 93f0f5c25f18dab9d176bd4f6de5d30e タグで c9ccee2e6ea535a969eb3f532ad9fe89 タグを使用し、埋め込みスタイルと呼ばれます;

3. 外部 CSS ファイルの作成とリンク、外部スタイルシートと呼ばれます。

基本スタイル シートは通常、6c04bd5ca3fcae76e30b72ad730ca86d や e388a4556c0f65e1904146cc1a846bee などの HTML タグの外観を変更します。ヘッダー ファイルで CSS ファイルまたはスタイルシートを使用する場合、スタイル クラスを定義し、 class="?" 属性を使用して任意の要素に適用することもできますが、これはこの簡単なガイドの範囲を超えています。

インライン スタイル

機能:

1) インライン スタイルは、コード内の HTML 要素に配置されます。

2) インライン スタイルを使用する場合、スタイルは選択した要素にのみ影響します。

3)、インライン スタイルにはセレクターはありません

注: HTML で定義されたインライン スタイルは、追加先のタグにのみ適用されます。 Some red text

利点:

1. 変更をテストしてプレビューする場合に非常に便利です。

2. 迅速な修復に非常に役立ちます。

3. HTTP リクエストを減らします。

欠点:

インライン CSS はすべての要素に適用する必要があります。

埋め込みスタイル

機能:

1)、スタイルタグ687c2c06e5a4995392a66a2c50c231d2 &lt ;/に配置されます。 style> は Web ページの head セクションに記述されます。

2)、記述されたスタイルは、それを使用する Web ページでのみ使用されます。

3)、埋め込みスタイルは「内部スタイル」とも呼ばれます。

ヘッダーで定義されたスタイルは、ページ全体に適用されます。以下の例では、ページ内のすべての h1 タグにタイトルが赤色で表示されます。 h1 { color: red; }

利点:

1. スタイル シートは 1 ページにのみ影響します。

2. 内部スタイル シートではクラスと ID を使用できます。

3. 複数のファイルをアップロードする必要はありません。 HTML と CSS は同じファイル内に含めることができます。

欠点:

1. ページの読み込み時間が長くなります。

2. 影響するのは 1 ページのみなので、複数のドキュメントで同じ CSS を使用する場合は役に立ちません。

外部スタイル シート

HTML ファイルと同様、CSS ファイルはプレーン テキストであり、通常は .css ファイル拡張子が付いており、特定のタグを介して HTML ファイルにリンクできます。 。

機能:

1)、別のドキュメントに記述され、さまざまな Web ドキュメントに添付されます

2)、これを変更すると、 # と呼び出すすべてのページに影響を与える可能性があります。 ##3)、変更が簡単です

たとえば、style.css ファイルの内容は次のようになります。

body { background-color: beige; color: #000080;} h1 { color: red;} その後、be98b57125ed9b2d8fbe917c785e8d94 を使用できます。ヘッダーが導入されて有効になります。

利点:

1. HTML ページのサイズが小さくなり、構造がより明確になります。

2. 読み込み速度が速くなります。

3. 同じ .css ファイルを複数のページで使用できます。

欠点:

外部 CSS が読み込まれるまで、ページは正しくレンダリングされない可能性があります。