別の 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 までご連絡ください。

HTMLとReactの統合：実用的なガイドApr 21, 2025 am 12:16 AM

HTMLとReactは、JSXを介してシームレスに統合して、効率的なユーザーインターフェイスを構築できます。 1）JSXを使用してHTML要素を埋め込み、2）仮想DOMを使用してレンダリングパフォーマンスを最適化し、3）コンポーネントを通じてHTML構造を管理およびレンダリングします。この統合方法は直感的であるだけでなく、アプリケーションのパフォーマンスを向上させます。

ReactおよびHTML：レンダリングデータと取り扱いイベントApr 20, 2025 am 12:21 AM

React Reactは、状態および小道具を介してデータを効率的にレンダリングし、合成イベントシステムを介してユーザーイベントを処理します。 1）Counterの例など、UseStateを使用して状態を管理します。 2）イベント処理は、ボタンクリックなどのJSXに関数を追加することにより実装されます。 3）トドリストコンポーネントなどのリストをレンダリングするには、重要な属性が必要です。 4）フォーム処理の場合、FormコンポーネントなどのuseStateおよびe.preventdefault（）。

バックエンド接続：Reactがサーバーとどのように相互作用するかApr 20, 2025 am 12:19 AM

Reactは、HTTP要求を介してサーバーと対話し、データを取得、送信、更新、削除します。 1）ユーザー操作はイベントをトリガーします。2）HTTP要求を開始する、3）サーバーの応答をプロセス、4）コンポーネントのステータスと再レンダリングを更新します。

React：ユーザーインターフェイスに焦点を当てる（Frontend）Apr 20, 2025 am 12:18 AM

Reactは、コンポーネント開発と仮想DOMを通じて効率を向上させるユーザーインターフェイスを構築するためのJavaScriptライブラリです。 1。コンポーネントとJSX：JSX構文を使用してコンポーネントを定義して、コードの直感性と品質を高めます。 2。仮想DOMおよびレンダリング：仮想DOMおよびDIFFアルゴリズムを介してレンダリングパフォーマンスを最適化します。 3。状態管理とフック：UseStateやUseefectなどのフックは、状態管理と副作用の取り扱いを簡素化します。 4。使用例：基本形式から高度なグローバルな州管理まで、Contextapiを使用します。 5.一般的なエラーとデバッグ：不適切な状態管理とコンポーネントの更新の問題を避け、ReactDevtoolsを使用してデバッグします。 6。パフォーマンスの最適化と最適性

Reactの役割：フロントエンドまたはバックエンド？区別を明確にしますApr 20, 2025 am 12:15 AM

ReactisaFrontendLibrary、focusedonbuildinguserinterfaces.itmanagesUistateandupdateSeSefiedlyusingingingingualdod、およびinteractswithbackendservicesviaapisfordatahandling、butdoesnotprocessorstoredatoredaitaits

HTMLで反応する：インタラクティブなユーザーインターフェイスを構築しますApr 20, 2025 am 12:05 AM

ReactをHTMLに組み込み、従来のHTMLページを強化または完全に書き換えることができます。 1）Reactを使用するための基本的な手順には、HTMLにルートDIVを追加し、ReactDom.Render（）を介してReactコンポーネントをレンダリングすることが含まれます。 2）より高度なアプリケーションには、UseStateを使用して状態を管理し、カウンターやTo Doリストなどの複雑なUI相互作用を実装することが含まれます。 3）最適化とベストプラクティスには、コードセグメンテーション、怠zyな読み込み、React.memoとusememoを使用してパフォーマンスを向上させることが含まれます。これらの方法を通じて、開発者はReactの力を活用して、動的で応答性の高いユーザーインターフェイスを構築できます。

React：現代のフロントエンド開発の基礎Apr 19, 2025 am 12:23 AM

Reactは、最新のフロントエンドアプリケーションを構築するためのJavaScriptライブラリです。 1.パフォーマンスを最適化するために、コンポーネントおよび仮想DOMを使用します。 2。コンポーネントJSXを使用して、データを管理するために定義、状態、および属性を定義します。 3.フックはライフサイクル管理を簡素化します。 4. Contextapiを使用して、グローバルステータスを管理します。 5.一般的なエラーには、デバッグステータスの更新とライフサイクルが必要です。 6。最適化手法には、メモ、コード分割、仮想スクロールが含まれます。

Reactの未来：Web開発におけるトレンドと革新Apr 19, 2025 am 12:22 AM

Reactの未来は、究極のコンポーネント開発、パフォーマンスの最適化、および他のテクノロジースタックとの深い統合に焦点を当てます。 1）Reactは、コンポーネントの作成と管理をさらに簡素化し、究極のコンポーネント開発を促進します。 2）特に大規模なアプリケーションでは、パフォーマンスの最適化が焦点になります。 3）Reactは、開発エクスペリエンスを改善するために、GraphQLやTypeScriptなどのテクノロジーと深く統合されます。

See all articles

ホットAIツール

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

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

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

DVWA

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

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティングサービスをチェックしてください。

SublimeText3 中国語版

中国語版、とても使いやすい

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。