HTML に CSS を導入するいくつかの方法の紹介

1. HTMLタグ要素にCSSスタイルを直接埋め込む

たとえば、<div style="font-size:14px; color:#FF0000;">I am div css test content-www.jb51.net support</div> 効果は次のようになります。

2. HTMLのheadセクションにおけるスタイル宣言

挿入コードは次のとおりです。

<スタイル タイプ="text/css"> 
<!-- 
.ceshi {font-size:14px; color:#FF0000;}/*ここにCSSスタイルのコンテンツがあります*/ 
--> 
</スタイル>

具体的な方法は以下の通りです。

3. @importを使用して外部CSSファイルを参照する

<!doctypehtml>
<html>
<ヘッド>
<メタ文字セット="utf-8">
<title>123WORDPRESS.COM テスト</title>
<スタイル タイプ="text/css"> 
<!-- 
@import url(wcss.css);/*ここに@importで参照されるCSSスタイルコンテンツがあります*/ 
--> 
</スタイル> 
</head>
<本文>
<div class="ceshi">私は div css テスト コンテンツ - www.jb51.net サポートです</div>
</本文>
</html>

Wcss.css ファイル内のコード.ceshi {font-size:14px; color:#FF0000;}

効果は以下のとおりです。

この方法の使用は、組み込みの CSS スタイルシート方法の使用に似ていることがわかります。どちらの方法も、外部 CSS を参照するために HTML ヘッド内のスタイルタグを使用する必要があります。

4. リンクを使用して外部 CSS ファイルを呼び出す

HTML 参照 CSS ファイルを実装するために外部の wcss.css ファイルを呼び出して <link rel="stylesheet" href="wcss.css" type="text/css" /> をヘッド内に配置する

詳細は下記をご覧ください

このメソッドはスタイルタグを必要とせず、スタイルをリンクすることで外部スタイルを直接参照します。通常、外部 CSS スタイルメソッドを参照するには、リンクを使用することをお勧めします。

外部CSSを参照するリンクを使用する利点

1. SEO に有利です。この方法を使用して外部 CSS ファイルを参照すると、CSS スタイルを直接追加するよりも HTML ページのソースコードが大幅に少なくなります。検索エンジンスパイダーは Web ページをクロールするときに CSS ファイルをクロールしないため、HTML ソースコードが非常に小さくなり、スパイダーのクロール速度が速くなり、処理が少なくなり、この Web ページの重量が増加してランキングに有利になります。
2. HTML を保存すると、ブラウザは、ページを読み込み、同時に 2 つのスレッドでページを開くのと同じように、Web ページを別々のスレッドでダウンロードできるため、Web ページが非常に速く開くようになります。（ユーザーがこのウェブページを閲覧すると、HTMLソースコードとCSSファイルが同時にダウンロードされるため、速度が速くなります）
3. Web ページのスタイルを変更するのに便利です。Web ページのアートスタイルを変更するには、CSS スタイルを変更するだけです。この方法を Web サイトプロジェクトで使用すると、サイト全体に共通の CSS 基本スタイルが適用されるため、サイト全体のスタイルを変更するのが迅速かつ便利です。

追加の

HTML では、CSS を導入する主な方法は、インライン、埋め込み、インポート、リンクの 3 つです。
インラインスタイル:つまり、タグのスタイル属性に CSS スタイルを設定します。この方法は本質的に CSS の利点を反映していないため、推奨されません。

例：

<html>
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" />
<title>テキストデモ</title>
</head>
<本文>
<h1 スタイル=色:白;背景色=青;>
これはテキストの行です。
</h1>
</本文>
</html>

埋め込み:埋め込みでは、ページ内のさまざまな要素の設定を <head> と </head> の間に書き込みます。この方法は、単一の Web ページの場合に非常に便利です。しかし、ページ数の多いウェブサイトの場合、各ページが埋め込み方式で独自のスタイルを設定すると、CSS がもたらす大きな利点が失われます。そのため、ウェブサイトでは通常、独立した CSS スタイルシートファイルを作成し、次の 2 つの方法のいずれかを使用して HTML ドキュメントに導入します。
例：

<html>
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" />
<title>テキストデモ</title>
<スタイル タイプ="text/css">
h1{
       色：白;
       背景色:boue;
       }
</スタイル>
       </head>
       <本文>
<h1>これはテキストの行です。</h1>
<h1>これは別のテキスト行です。</h1>
       </本文>
       </html>

インポートとリンク:インポートとリンクの目的は、どちらも独立した CSS ファイルを HTML ファイルに導入することであり、両者の間には対応する違いがあります。
実際、この 2 つの方法の最大の違いは、リンクメソッドでは HTML タグを使用して外部 CSS ファイルを導入するのに対し、インポートメソッドでは CSS ルールを使用して外部 CSS ファイルを導入することです。したがって、構文も異なります。
リンクスタイルを使用する場合は、次のステートメントを使用して外部 CSS ファイルをインポートする必要があります。

インポート方式を使用する場合は、次のステートメントを使用する必要があります。

<スタイルタイプ="text/css">
@import "mystyle.css";
</スタイル>

また、これら 2 つの方法を使用した後の表示効果は若干異なります。リンク方式を使用する場合、CSS ファイルはデバイスページの主要部分より先に読み込まれるため、表示される Web ページは最初からスタイル効果が得られます。インポート方式を使用する場合、CSS ファイルはページ全体が読み込まれた後に読み込まれます。一部のブラウザーでは、Web ページファイルが大きい場合、スタイル設定されていないページが最初に表示され、その後、点滅してからスタイル設定効果が表示される場合があります。視聴者の観点から見ると、これはインポート方法を使用する場合の欠点です。大規模な Web サイトでは、メンテナンスを容易にするために、すべての CSS スタイルを複数の CSS ファイルに分類する必要がある場合があります。この場合、リンクスタイルのインポートを使用すると、CSS ファイルを個別にインポートするための複数のステートメントが必要になります。 CSS ファイルの分類を調整する場合は、HTML ファイルも同時に調整する必要があります。これはメンテナンス作業にとって不利です。インポート方式を使用する場合は、メイン CSS ファイルを 1 つだけ導入し、そのファイルに他の独立した CSS ファイルをインポートできます。リンク方式にはこの機能はありません。

したがって、私の提案は、CSS ファイルをインポートする必要がある場合はリンクメソッドを使用し、複数の CSS ファイルをインポートする必要がある場合は、最初にリンクメソッドを使用して「ディレクトリ」CSS ファイルをインポートし、次にインポートメソッドを使用してこの「ディレクトリ」CSS ファイル内の他の CSS ファイルをインポートすることです。

JavaScript を使用して、どの CSS ファイルをインポートするかを動的に決定する場合は、リンクメソッドを使用する必要があります。

<<: シンプルなショッピングカート機能を実現するjs

>>: MySQL の遅いクエリの例