別の CSS を呼び出す-フロントエンドQ&A-php.cn

別の CSS を呼び出す

WBOY

リリース： 2023-05-21 12:01:07

オリジナル

402 人が閲覧しました

Web 開発の重要な部分である HTML は、ページのコンテンツのキャリアであるだけでなく、構造とスタイルの定義者でもあります。 CSS は、ページの外観やスタイルを操作するための言語として、Web ページのコンテンツをよりカラフルで美しくすることができます。

実際の開発では、ページごと、パーツごとに異なるスタイルを使用することがよくありますが、その際には異なるCSSファイルを呼び出す必要があります。この記事では、さまざまな CSS ファイルを呼び出す方法と、スタイルを多様化するためにページ内で CSS ファイルを使用する方法を紹介します。

1. さまざまな CSS ファイルを呼び出す方法

リンクタグを介した呼び出し

リンクを介して HTML ヘッダー内の外部 CSS ファイルを呼び出すことができます。鬼ごっこ。リンクタグには、href、rel、type の 3 つの属性が含まれている必要があります。

具体的な形式は次のとおりです:

Among呼び出される CSS ファイルのパスを指定するには、href が使用されます。rel は、ドキュメントとリンクされたドキュメントの間の関係を定義するために使用され、通常はスタイルシートに設定されます。 type は、リンクされたドキュメントの MIME タイプを指定します。通常は text/css に設定されます。

たとえば、次のコードを使用して、HTML ヘッダーで 2 つの異なる CSS ファイルを呼び出すことができます:

<!DOCTYPE html>
<html>
<head>
  <link href="style1.css" rel="stylesheet" type="text/css" />
  <link href="style2.css" rel="stylesheet" type="text/css" />
  <title>调用不同CSS文件示例</title>
</head>
<body>
  <!-- 页面内容 -->
</body>
</html>

ログイン後にコピー

現時点では、style1.css ファイルと style2.css ファイルを使用できます。ファイルで異なるスタイルを定義し、異なるページで呼び出して、スタイルの多様化を実現します。

@import 経由の呼び出し

リンクタグの使用に加えて、@import メソッドを使用して CSS ファイルを呼び出すこともできます。 CSS ファイルでは、@import ステートメントを使用して別の CSS ファイルを呼び出すことができ、呼び出されたファイル内のスタイルはメインファイル内のスタイルとマージされます。

具体的な構文は次のとおりです:

@import url("file path");

たとえば、メインのスタイルシート style.css では、次のように使用できます。次のコードサブスタイルシート style2.css を読み込みます:

@import url("style2.css");

ログイン後にコピー

このようにして、HTML ページで style.css が呼び出されるとき、style2.css のスタイルが自動的にマージされ、それによってスタイルが実現されます。多様化。

2. さまざまな CSS スタイルを適用する

複数の CSS ファイルを呼び出した後、いくつかの特定の方法でさまざまなスタイルを使用できます。一般的に使用される 2 つの方法を以下に紹介します。

id セレクターの使用

HTML ページでは、要素に id 属性を設定して、要素に特別な CSS スタイルを設定できます。

たとえば、style1.css ファイルでは、次の CSS スタイルを定義できます:

#box {
  width: 200px;
  height: 200px;
  background-color: red;
}

ログイン後にコピー

style2.css ファイルでは、次の CSS スタイルを定義できます:

#box {
  width: 100px;
  height: 100px;
  background-color: blue;
}

ログイン後にコピー

次に、HTML ページで次のコードを使用して、これら 2 つのスタイルを呼び出すことができます:

<!DOCTYPE html>
<html>
<head>
  <link href="style1.css" rel="stylesheet" type="text/css" />
  <link href="style2.css" rel="stylesheet" type="text/css" />
  <title>调用不同CSS文件示例</title>
</head>
<body>
  <div id="box">样式设置示例</div>
</body>
</html>

ログイン後にコピー

この時点で、ページを開くと、ボックス要素の背景色が変更されていることがわかります。色は青ではなく赤です。これは、HTML では ID セレクターがラベルセレクターよりも優先されるため、box 要素は style1.css で定義されたスタイルを使用します。

クラスセレクターの使用

ID セレクターと同様に、クラスセレクターを使用して要素のスタイルを設定することもできます。クラスセレクターを使用する場合、CSS ファイルでスタイルを定義するときにセレクターの前に「.」記号を追加する必要があります。

たとえば、style1.css ファイルでは、次の CSS スタイルを定義できます:

.red-box {
  width: 200px;
  height: 200px;
  background-color: red;
}

ログイン後にコピー

style2.css ファイルでは、次の CSS スタイルを定義できます:

.blue-box {
  width: 100px;
  height: 100px;
  background-color: blue;
}

ログイン後にコピー

次に、HTML ページで次のコードを使用して、これら 2 つのスタイルを呼び出すことができます:

<!DOCTYPE html>
<html>
<head>
  <link href="style1.css" rel="stylesheet" type="text/css" />
  <link href="style2.css" rel="stylesheet" type="text/css" />
  <title>调用不同CSS文件示例</title>
</head>
<body>
  <div class="red-box">样式设置示例</div>
  <div class="blue-box">样式设置示例</div>
</body>
</html>

ログイン後にコピー

この時点で、ページを開くと、最初のボックスの背景色が表示されます。要素は赤、2 番目のボックス要素の背景色は青です。これは、HTML ではクラスセレクターの優先順位が ID セレクターよりも低いものの、ラベルセレクターよりも高いため、最初のボックス要素は style1.css で定義されたスタイルを使用し、2 番目のボックス要素は style2 で定義されたスタイルを使用するためです。 css。

3. 概要

Web 開発では、スタイル設定によりページをより美しく、識別しやすくすることができます。異なる CSS ファイルを呼び出すことで、異なるページで異なるスタイルを使用して、多様な効果を実現できます。複数の CSS ファイルを呼び出した後、ID セレクターまたはクラスセレクターを使用して、さまざまな要素のスタイルのニーズを満たすさまざまなスタイルを使用できます。したがって、CSS ファイルの適切な呼び出しと使用は、Web 開発における重要な知識ポイントの 1 つです。

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