CSSスタイルの呼び出し方法-フロントエンドQ&A-php.cn

ホームページ

ウェブフロントエンド

フロントエンドQ&A

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

PHPz

Apr 21, 2023 am 11:26 AM

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

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

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

<!DOCTYPE html>
<html>
<head>
  <title>内嵌样式表</title>
  <style>
    body {
      background-color: #f0f0f0;
    }
    h1 {
      color: red;
    }
  </style>
</head>
<body>
  <h1>欢迎访问我的网站</h1>
  <p>这里是我的个人主页，欢迎来逛逛。</p>
</body>
</html>

ログイン後にコピー

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

2. 外部スタイルシート

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

<!DOCTYPE html>
<html>
<head>
  <title>外部样式表</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <h1>欢迎访问我的网站</h1>
  <p>这里是我的个人主页，欢迎来逛逛。</p>
</body>
</html>

ログイン後にコピー

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

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

ログイン後にコピー

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

3. インラインスタイル

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

<!DOCTYPE html>
<html>
<head>
  <title>内联样式表</title>
</head>
<body>
  <h1 style="color:red">欢迎访问我的网站</h1>
  <p>这里是我的个人主页，欢迎来逛逛。</p>
</body>
</html>

ログイン後にコピー

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

要約:

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

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

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。