ホームページ  >  記事  >  ウェブフロントエンド  >  CSS導入方法

CSS導入方法

PHPz
PHPzオリジナル
2023-05-09 10:16:075254ブラウズ

CSS (Cascading Style Sheets) は、Web デザインで一般的に使用されるスタイル シート言語です。フォント、色、サイズ、レイアウトなどを含む Web ページのスタイルを制御し、Web ページをより読みやすく、美しくすることができます。 CSS を使用するには、CSS ファイルを HTML ファイルに導入する必要があります。 CSSの導入方法を3つ紹介します。

1. インライン スタイル

インライン スタイルは、HTML 要素タグ内に CSS スタイルを直接記述する方法です。このアプローチの利点は、単一の HTML 要素でスタイルを設定できることですが、複数の要素に同じスタイルを適用する場合、非常に冗長で繰り返しが多くなる可能性があります。インライン スタイルの構文は次のとおりです:

<p style="color: red;">这是红色文本</p>

このうち、style 属性はスタイルを定義するために使用されます。style 属性と値はコロンで区切られ、複数の属性は区切られますセミコロンで区切ります。

2. 内部スタイルシート

内部スタイルシートは、93f0f5c25f18dab9d176bd4f6de5d30e タグの c9ccee2e6ea535a969eb3f532ad9fe89# に CSS スタイルを記述するものです。 HTML ファイルの ## タグ内。この方法は、HTML ファイル内の複数の要素がスタイルを共有する状況に適しています。内部スタイル シートの構文は次のとおりです:

<!DOCTYPE html>
<html>
    <head>
        <style>
            p {
                color: red;
            }
        </style>
    </head>
    <body>
        <p>这是红色文本</p>
    </body>
</html>

このうち、

c9ccee2e6ea535a969eb3f532ad9fe89 は、タグ内に CSS スタイルを記述します。スタイルはインライン スタイルに似ていますが、要素タグ内に記述する必要はなく、{ }の途中に複数の属性や値もセミコロンで区切って記述します。

3. 外部スタイル シート

外部スタイル シートは、

.css ファイルに CSS スタイルを別途記述し、 タグを使用して導入します。この方法は、複数の HTML ファイルが同じスタイルを共有する必要がある状況に適しています。外部スタイル シートの構文は次のとおりです。

  1. style.css などの .css ファイルを作成します。
  2. 導入する CSS スタイルを記述します。例:
  3. p {
      color: red;
    }
    次のコードを HTML の
  1. 93f0f5c25f18dab9d176bd4f6de5d30e タグに追加します。 file:
  2. <!DOCTYPE html>
    <html>
      <head>
        <link rel="stylesheet" href="style.css">
      </head>
      <body>
        <p>这是红色文本</p>
      </body>
    </html>
このうち、

2cdf5bf648cf2f33323966d7f58a7f3f タグは、.css ファイルのパスを指定するために使用され、 href 属性は、.css ファイルのパスとファイル名を指定するために使用されます。

CSS の導入方法は上記 3 つあり、それぞれに適用可能なシナリオがあり、ニーズに応じて選択して使用できます。

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

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