」です。 2. styleタグに「@import」ルールを使用して導入します。構文は「@import url( "css ファイルのパス");」です。"/> 」です。 2. styleタグに「@import」ルールを使用して導入します。構文は「@import url( "css ファイルのパス");」です。">

ホームページ  >  記事  >  ウェブフロントエンド  >  CSSに外部スタイルシートを導入する方法

CSSに外部スタイルシートを導入する方法

青灯夜游
青灯夜游オリジナル
2021-11-10 15:08:3116684ブラウズ

導入方法: 1. link タグを使用して導入します。構文は "fa299b387c59b17ade16ded4c2e5283e タグを使用してインポートします。

2cdf5bf648cf2f33323966d7f58a7f3f タグを使用して、外部スタイル シート ファイルをインポートします。

<link href="外部样式表文件路径" rel="stylesheet" type="text/css" />

各属性の説明:

  • href この属性は、外部スタイル シート ファイルのアドレスを設定します。これは、相対アドレスまたは絶対アドレス。

  • #rel 属性は、関連するドキュメントを定義します。ここでは、関連するスタイル シートを意味します。

  • type 属性はインポートされるファイルのタイプを定義します。style 要素と同様に、text/css は CSS テキスト ファイルを示します。

通常、2cdf5bf648cf2f33323966d7f58a7f3f タグを定義する場合、3 つの基本属性を定義する必要があり、そのうちの href は必ず設定する属性です。

リンク要素に title 属性を追加して、オプションのスタイル シートのタイトルを設定することもできます。つまり、Web ドキュメントが複数のスタイル シートをインポートするときに、適用するスタイル シート ファイルを選択できます。タイトル属性値。

ヒント: Firefox ブラウザでは、メニューで [表示 --> ページ スタイル] オプションを選択すると、サブメニューにタイトル属性値が表示されます。別のタイトル属性を選択するだけです。必要なスタイル シート ファイルを選択して適用します。 IE ブラウザはこの機能をサポートしていません。

さらに、title 属性は rel 属性に関連しています。W3C 組織の計画によると、将来の Web ドキュメントでは、スタイル シート ファイル、スクリプトなどのさまざまな外部ファイルをインポートするために複数の 2cdf5bf648cf2f33323966d7f58a7f3f 要素が使用される予定です。ファイル、テーマ ファイル、さらにその他のカスタマイズされた補足ファイルを含めることもできます。さまざまな種類と名前の非常に多くのファイルをインポートした後、title 属性を使用して選択できます。このとき、rel 属性の役割が明らかになります。Web ページ ファイルが最初にインポートされるときに適用されるインポートされたファイルの種類を指定できます。表示されます。現在、CSS とのみ関連付けることができます。スタイル シート タイプ。

外部スタイルは、CSS アプリケーションに最適なソリューションです。スタイル シート ファイルは、複数の Web ページから参照できます。同時に、インポートするリンク要素を繰り返し使用することで、Web ページ ファイルに複数のスタイル シートをインポートできます。さまざまなスタイルシート、ドキュメント。

2. @import キーワードを使用してインポートします。

c9ccee2e6ea535a969eb3f532ad9fe89 で @import キーワードを使用します。 tag 外部スタイル シート ファイルをインポートします:

<style type="text/css">
@import url("外部样式表文件路径");
</style>

@import キーワードの後に​​、url() 関数を使用して、特定の外部スタイル シート ファイルのアドレスを含めます。

比較

スタイル シートをインポートする 2 つの方法の比較:

  • リンクは、 HTMLタグ、@importはCSSで提供されます。

  • ページが読み込まれると、リンクも同時に読み込まれ、@import によって参照される CSS はページが読み込まれるまで待機してから読み込みます。

  • @import は IE 5 以降でのみ認識でき、リンクは HTML タグであるため、互換性の問題はありません。

  • #リンク スタイル スタイルの重みは、@import の重みよりも高くなります。

スタイル シートをインポートするには、通常、リンクを使用することをお勧めします。@import は補助的な方法として使用できます。

(学習ビデオ共有: css ビデオ チュートリアル)

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

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