別の CSS を呼び出す
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 サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
1669
14
1428
52
1329
25
1273
29
1256
24
Reactのエコシステム：ライブラリ、ツール、およびベストプラクティス
Apr 18, 2025 am 12:23 AM
Reactエコシステムには、状態管理ライブラリ（Reduxなど）、ルーティングライブラリ（Reactrouterなど）、UIコンポーネントライブラリ（材料-UIなど）、テストツール（JESTなど）、およびビルディングツール（Webpackなど）が含まれます。これらのツールは、開発者がアプリケーションを効率的に開発および維持し、コードの品質と開発効率を向上させるのを支援するために協力します。
Reactの未来：Web開発におけるトレンドと革新
Apr 19, 2025 am 12:22 AM
Reactの未来は、究極のコンポーネント開発、パフォーマンスの最適化、および他のテクノロジースタックとの深い統合に焦点を当てます。 1）Reactは、コンポーネントの作成と管理をさらに簡素化し、究極のコンポーネント開発を促進します。 2）特に大規模なアプリケーションでは、パフォーマンスの最適化が焦点になります。 3）Reactは、開発エクスペリエンスを改善するために、GraphQLやTypeScriptなどのテクノロジーと深く統合されます。
Reactを使用したフロントエンド開発：利点とテクニック
Apr 17, 2025 am 12:25 AM
Reactの利点は、その柔軟性と効率性であり、これは以下に反映されています。1）コンポーネントベースの設計により、コードの再利用性が向上します。 2）仮想DOMテクノロジーは、特に大量のデータ更新を処理する場合、パフォーマンスを最適化します。 3）リッチエコシステムは、多数のサードパーティライブラリとツールを提供します。 Reactがどのように機能し、例を使用するかを理解することにより、そのコアコンセプトとベストプラクティスをマスターして、効率的で保守可能なユーザーインターフェイスを構築できます。
React：Web開発のためのJavaScriptライブラリの力
Apr 18, 2025 am 12:25 AM
Reactは、メタがユーザーインターフェイスを構築するために開発したJavaScriptライブラリであり、そのコアはコンポーネント開発と仮想DOMテクノロジーです。 1。コンポーネントと状態管理：Reactは、コンポーネント（関数またはクラス）とフック（UseStateなど）を介して状態を管理し、コードの再利用性とメンテナンスを改善します。 2。仮想DOMとパフォーマンスの最適化：仮想DOMを介して、実際のDOMを効率的に更新してパフォーマンスを向上させます。 3.ライフサイクルとフック：フック（使用効果など）は、関数コンポーネントがライフサイクルを管理し、副作用操作を実行できるようにします。 4。使用例：基本的なHelloworldコンポーネントから高度なグローバル州管理（USECONTEXTおよび
Reactの主要な機能を理解する：フロントエンドの視点
Apr 18, 2025 am 12:15 AM
Reactの主な機能には、コンポーネント思考、国家管理、仮想DOMが含まれます。 1）コンポーネント化のアイデアにより、UIを再利用可能な部分に分割して、コードの読みやすさと保守性を向上させることができます。 2）状態管理は、状態および小道具を通じて動的データを管理し、変更を変更しますUIの更新をトリガーします。 3）仮想DOM最適化パフォーマンス、メモリ内のDOMレプリカの最小操作の計算を通じてUIを更新します。
反応とフロントエンドの開発：包括的な概要
Apr 18, 2025 am 12:23 AM
Reactは、ユーザーインターフェイスを構築するためにFacebookが開発したJavaScriptライブラリです。 1. UI開発の効率とパフォーマンスを改善するために、コンポーネントおよび仮想DOMテクノロジーを採用しています。 2。Reactのコア概念には、コンポーネント化、状態管理（UseStateやUseEffectなど）、および仮想DOMの作業原則が含まれます。 3。実際のアプリケーションでは、基本的なコンポーネントレンダリングから高度な非同期データ処理へのReactサポートがサポートされます。 4.主要な属性の追加や誤ったステータスの更新を忘れるなどの一般的なエラーは、ReactDevtoolsとログを介してデバッグできます。 5.パフォーマンスの最適化とベストプラクティスには、React.Memo、コードセグメンテーション、コードの読み取り可能な状態を維持し、信頼性を維持することが含まれます
HTMLの反応の力：現代のWeb開発
Apr 18, 2025 am 12:22 AM
HTMLでのReactの適用により、コンポーネントと仮想DOMを通じてWeb開発の効率と柔軟性が向上します。 1）反応コンポーネントのアイデアは、UIを再利用可能なユニットに分解して、管理を簡素化します。 2）仮想DOM最適化パフォーマンス、拡散アルゴリズムを介してDOM操作を最小限に抑えます。 3）JSX構文により、JavaScriptでHTMLを作成して開発効率を向上させることができます。 4）UseStateフックを使用して状態を管理し、動的なコンテンツの更新を実現します。 5）最適化戦略には、React.memoとusecallbackを使用して不必要なレンダリングを減らすことが含まれます。
React vs.他のフレームワーク：比較と対照オプション
Apr 17, 2025 am 12:23 AM
Reactは、大規模で複雑なアプリケーションに適したユーザーインターフェイスを構築するためのJavaScriptライブラリです。 1. Reactのコアはコンポーネント化と仮想DOMであり、UIレンダリングパフォーマンスを向上させます。 2。Vueと比較して、Reactはより柔軟性がありますが、大規模なプロジェクトに適した急な学習曲線があります。 3。Angularと比較して、Reactはより軽く、コミュニティの生態学に依存し、柔軟性を必要とするプロジェクトに適しています。
