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

ホームページ

ウェブフロントエンド

フロントエンドQ&A

別の CSS を呼び出す

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 21, 2023 pm 12:01 PM

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 サイトの他の関連記事を参照してください。

声明

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

CSS：同じDOMで複数のIDを使用できますか？May 14, 2025 am 12:20 AM

いいえ、あなたはusemultipleidsinthemedom.1）idsmustbeuniqueperhtmlspecification、およびusingdusing cansistent browserbehavior.2）useclassesses forstylingmultipleElements、acturtorectorectorectorsectorgettributeurutuureのuseclasses forstyling forstyling forstyling forstyling forstyling forstyling rassess for -destendertantertorectorsutortortortruture

HTML5の目的：より強力でアクセス可能なWebを作成するMay 14, 2025 am 12:18 AM

html5aimstoenhancewebcapability、makingmoredynamic、interactive、およびaccessible.1）itupportsmultimediaelementslikeand、排除、2）semanticelementionmentionmentionmentionimementsimementionimementsimementsimbrovecessibilityandcodereadability.3）

HTML5の重要な目標：Web開発とユーザーエクスペリエンスの向上May 14, 2025 am 12:18 AM

html5aimstoenhancewebdevelymentanduserexperiencetheTheTheTheTheTheTheTheTheTructure、multimedieingegration、およびperformanceImprovements.1）semanticelementslike like like ,, and and requrovedababilityandaccessibility.2）andTagsallowseamlessmultimediaemdiding withoutplugins.3）

HTML5：安全ですか？May 14, 2025 am 12:15 AM

html5isnotinherecureを使用しますが、featurescanleadtosecurityrisksifmisusedorimpremented.1）usetheSsandboxattribution controlembeddeddeddeddedentandPreventvulnerabilitieslikeclickjacking.2）

HTML5は、古いHTMLバージョンと比較して目標を達成しますMay 14, 2025 am 12:14 AM

html5aimedtoeenhancewebdevelopmentbyintroducingsmanticelements、nativemultimediasupport、改善、およびオフリンの実行可能性、対照、html.1）itintroductuedsemantictagslike、nattructurcturcurean desieand.2）

CSS：IDセレクターを使用するのは悪いですか？May 13, 2025 am 12:14 AM

IDセレクターを使用することは、CSSでは本質的に悪くはありませんが、注意して使用する必要があります。 1）IDセレクターは、一意の要素またはJavaScriptフックに適しています。 2）一般的なスタイルの場合、クラスセレクターはより柔軟で保守可能であるため、使用する必要があります。 IDとクラスの使用のバランスをとることにより、より堅牢で効率的なCSSアーキテクチャを実装できます。

HTML5：2024年の目標May 13, 2025 am 12:13 AM

HTML5'SGOALSIN2024FOCUSONREFINIMINGANDOPTIMIZATION、notnewfeatures.1）強化された拡張性と拡張効率化されたレンダリング.2）

HTML5が改善しようとした主な領域は何ですか？May 13, 2025 am 12:12 AM

html5aimed toemprovewebdevelymentinfourkeyareas：1）multimediasupport、2）セマンティクス構造、3）フォームキャピリティ、および4）offlineandstorageoptions.1）html5introduededelements、simplifiedediaembedingemencemanteddim.2）

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、