CSS スタイル シートを使用する 3 つの方法とは何ですか?

3 つの方法は次のとおりです。 1. インライン スタイル シート。style 属性を使用して CSS コードを HTML マークアップに直接追加します。 2. 内部スタイルシートの「

」タグ内にCSSスタイルを記述し、「

この記事の動作環境: Acer S40-51、HBuilderX.3.0.5&&css3 版、Windows10 Home 中国語版

(学習ビデオ共有: css ビデオ チュートリアル)

CSS スタイル シートを使用するには 3 つの方法があります:

• インライン スタイル シート

• 内部スタイルシート

• 外部スタイルシート

##インラインスタイルシート

##インライン スタイルは、style 属性を使用して、CSS コードを HTML タグに直接追加します。つまり、HTML タグの属性タグとして存在します。

例:

<h1 style="color:red;">style属性的应用</h1>

このメソッドを使用すると、要素のスタイルを個別に簡単に定義できます。

例:

インライン スタイル シートの長所と短所:

利点:

• スタイル シート ファイルがなければ、ある時点で効率が向上します;

• style 属性を使用したスタイル効果は最も強力です他の導入方法から同じスタイル効果を削除することを上書きします。

欠点:

• 複数の要素でスタイルを共有するのは難しく、コードの再利用には役立ちません;

• HTML と CSS コードが混在しているため、プログラマーや検索エンジンにとって読みにくくなっています。

##内部スタイル シート内部スタイル シートは、CSS スタイルを

タグに記述し、< を使用します。 ;style> 宣言するタグ

#例:

##内部スタイルシートのメリットとデメリット

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

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

外部スタイル シート

#CSS スタイルが Web ページ ドキュメントの外部のファイルに配置されている場合、それはCSS スタイル シート ドキュメントは外部スタイル シートを表します。 実際、外部スタイル シートは拡張子 .css を持つテキスト ファイルです。 CSS スタイル コードをテキスト ファイルにコピーし、.css ファイルとして保存すると、それは外部スタイル シートになります。 以下は外部スタイル シートです:

外部スタイル シートの導入方法: HTML ファイルは、リンク タイプとインポート タイプという 2 つの方法で、拡張子 .css を持つスタイル シートを参照します。

1. CSS リンク スタイルリンク スタイルとは、CSS スタイル シートを外部で定義し、拡張子 .CSS を持つファイルを形成し、 タグ領域に配置する必要があります。

構文:

<link type="text/css" rel="styleSheet"  href="CSS文件路径" />

2. CSS インポート タイプ

インポート タイプは、@import

を通じて

<style type="text/css">
  @import url("css文件路径");
</style>

簡単な例:

##外部スタイル シートの長所と短所

##利点:

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

#再利用やメンテナンスに便利

個別のファイルに分割されているため、HTMLファイルのサイズが大幅に削減され、プログラマーやネットワークが使いやすいページ構造になります クローラーが理解できる
検索エンジンに優しいため、検索エンジンがページをより高く評価できるため、ページの検索エンジンのランキングに役立ちます
外部スタイルシートはユーザーの最初の訪問後にユーザーのコンピュータにキャッシュされ、次回の訪問時にロードする必要はありません
欠点:
スタイルやCSSファイルが多いと非常に大きくなり、探すのが大変になります。さらに、CSS ファイルが 1 つ増えると HTTP リクエストが 1 つ増えることになり、アクセス数が多い Web サイトではサーバーへの負荷が増大します。
プログラミング関連の知識については、こちらをご覧ください。

プログラミング入門

をご覧ください! ！

以上がCSS スタイル シートを使用する 3 つの方法とは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。