CSSスタイルの呼び出し方法

インターネットの継続的な発展に伴い、Web ページのデザインと開発の重要性がますます高まっています。 CSS（Cascading Style Sheet）はWebページのスタイルを制御するための言語であり、Web開発において必ず習得しなければならない技術でもあります。しかし初心者の中にはCSSスタイルの呼び出し方が分からない人もいると思うので、この記事ではCSSスタイルの呼び出し方法を詳しく紹介します。

1. 埋め込みスタイル シート

HTML ファイルのスタイル タグを使用して、埋め込みスタイル シートを定義します。スタイル シートで定義されているスタイルは、現在のページでのみ有効です。

nbsp;html>


  <title>内嵌样式表</title>
  <style>
    body {
      background-color: #f0f0f0;
    }
    h1 {
      color: red;
    }
  </style>


  <h1 id="欢迎访问我的网站">欢迎访问我的网站</h1>
  <p>这里是我的个人主页，欢迎来逛逛。</p>

上の例では、スタイル タグを通じて 2 つのスタイルが内部的に定義されており、Web ページの背景色とタイトル フォントの色を設定するために使用されます。コードを実行すると、ページの背景色が灰色に変わり、タイトルのフォントの色が赤色に変化することがわかります。

2. 外部スタイルシート

HTML ファイルのリンクタグを使用して外部スタイルシートを導入します。スタイルシートは HTML ファイルに埋め込まれるのではなく、HTML ファイル内に独立して存在します。 CSS ファイル。複数の HTML ファイルで共有できるため、次のように HTML ファイルの構造がより簡潔になり、保守が容易になります。

nbsp;html>


  <title>外部样式表</title>
  <link>


  <h1 id="欢迎访问我的网站">欢迎访问我的网站</h1>
  <p>这里是我的个人主页，欢迎来逛逛。</p>

上の例では、style.css という名前の CSS ファイルが導入されています。このファイルでは複数のスタイルを定義でき、リンクを通じてスタイル シートを複数の HTML ファイルで共有してスタイルを再利用できます。 style.css でスタイルを定義する方法は、インライン スタイル シートに似ています。例:

body {
  background-color: #f0f0f0;
}
h1 {
  color: red;
}

この例では、body セレクターを使用して Web ページの背景色を設定し、h1 セレクターを使用します。タイトルのフォントの色を設定するために使用されます。このスタイル シートが複数の HTML ファイルで参照される場合、これらのスタイルは共有されます。

3. インライン スタイル

インライン スタイル シートは、HTML タグのスタイルを定義します。スタイルは、次のような特定のタグに直接適用できます:

nbsp;html>


  <title>内联样式表</title>


  <h1 id="欢迎访问我的网站">欢迎访问我的网站</h1>
  <p>这里是我的个人主页，欢迎来逛逛。</p>

上記の例h1タグ内にインラインスタイルシートを定義し、タイトルの文字色を赤色に設定しています。インライン スタイル シートは、インライン スタイル シートや外部スタイル シートとは異なり、現在のマークアップに対してのみ有効で再利用できません。スタイルの数が多いと、HTML コードが乱雑に表示され、メンテナンスに役立ちません。

要約:

要約すると、HTML ファイルで CSS スタイルを呼び出すには、埋め込みスタイル シート、外部スタイル シート、インライン スタイル シートの 3 つの方法があります。複雑な Web アプリケーションを開発する場合は、外部スタイル シートを使用すると、複数の HTML ファイルでスタイルを共有でき、開発と保守が容易になるため、外部スタイル シートを使用することをお勧めします。ただし、単純なアプリケーションの場合は、インライン スタイル シートとインライン スタイル シートも良い選択です。シナリオやニーズが異なれば、テクノロジーの選択も異なります。CSS スタイルを呼び出す上記の方法をマスターすると、Web 開発をより効率的かつ柔軟に行うことができます。

以上がCSSスタイルの呼び出し方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。