CSSスタイルにはどのような種類があるのでしょうか？

CSS スタイルには 3 つのタイプがあります: 1. インライン スタイル (埋め込みスタイル)、style 属性を使用して CSS コードを HTML タグに直接追加します; 2. 内部スタイル (インライン スタイル)、CSS スタイルを記述します。 styleタグ内; 3.外部スタイル（外部スタイル）では、cssスタイルを別の「.css」ファイルに記述します。

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

CSS スタイルには主に次の 3 種類があります:

1. インライン スタイル (埋め込みスタイル): 構造内、つまりタグ内に記述されたスタイル。タグの先頭の style 属性内に記述されます。

#例:

<标记 style="样式的属性名1：样式的属性值1；属性名2：属性值2；......"></标记>

利点:

• スタイル シート ファイルを使用しないと、ある時点で効率を向上させることができます;

#style 属性を使用したスタイル効果は最も強力で、他の導入方法の同じスタイル効果をオーバーライドします。
欠点:

複数の要素でスタイルを共有するのは難しく、コードの再利用には役立ちません;
HTML と CSS コードが混在しているため、プログラマーや検索エンジンにとって読みにくくなっています。
2. 内部スタイル (インライン スタイル): HTML ページ内に記述され、head タグに格納され、スタイルは style タグに記述されます。

例:

<style>选择器 {属性名：属性值；属性名：属性值；......}</style>

利点: インターライン スタイル シートと同様、追加のリクエストは生成されず、最初に構造とスタイルの分離が実現されるため、単一ページの Web サイト アプリケーションにより適しています。

欠点: 内部スタイル シートが HTML ファイルに記述されているため、ページが不純で、ファイル サイズが大きく、Web クローラーが情報を取得しにくく、メンテナンスが困難です。ページ間でスタイルを共有することはできません

#3. 外部スタイル (外部スタイル): CSS ファイルに記述されます。

次に、 リンク タグを使用してページにリンクし、リンク ステートメントをページの タグ領域に配置する必要があります。

例:

<link type="text/css" rel="stylesheet" href="css/main.css" />

利点:

構造とパフォーマンス コードの完全な分離

• 次の場合に便利再利用とメンテナンス

• 別のファイルに分割されているため、HTML ファイルのサイズが大幅に削減され、プログラマや Web クローラーがページ構造を読みやすくなります

• 検索エンジンに優しく、検索エンジンがページをより高く評価できるため、ページの検索エンジンのランキングに有利です。

• #外部スタイル シートは、ユーザーの最初の訪問 これはユーザーのコンピュータにキャッシュされるため、次回ロードする必要はありません。

• 欠点:

スタイルの数が多いと、CSS ファイルが非常に大きくなり、探すのが不便になります。さらに、CSS ファイルが 1 つ増えると HTTP リクエストが 1 つ増えることになり、アクセス数が多い Web サイトのサーバーへの負荷が増大します

• (学習ビデオの共有:

  CSS ビデオ チュートリアル
)

以上がCSSスタイルにはどのような種類があるのでしょうか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。