ホームページ > ウェブフロントエンド > フロントエンドQ&A > CSSスタイルにはどのような種類があるのでしょうか?

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

青灯夜游
リリース: 2023-01-04 09:35:26
オリジナル
14358 人が閲覧しました

CSS スタイルには 3 つのタイプがあります: 1. インライン スタイル (埋め込みスタイル)、style 属性を使用して CSS コードを HTML タグに直接追加します; 2. 内部スタイル (インライン スタイル)、CSS スタイルを記述します。 styleタグ内; 3.外部スタイル(外部スタイル)では、cssスタイルを別の「.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 サイトの他の関連記事を参照してください。

関連ラベル:
css
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート