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

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

青灯夜游
リリース: 2021-11-10 15:08:51
オリジナル
16700 人が閲覧しました

導入方法: 1. link タグを使用して導入します。構文は ""; 2. "@import" を使用します。スタイルタグのルールの導入、構文は「@import url("css file path");」です。

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

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

外部スタイル シートは、ブラウザーで認識および解析できるようにする前に、Web ドキュメントにインポートする必要があります。外部スタイル シート ファイルは、2 つの方法で HTML ドキュメントにインポートできます。

1. タグを使用してインポートします。

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

<link href="外部样式表文件路径" rel="stylesheet" type="text/css" />
ログイン後にコピー

各属性の説明:

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

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

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

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

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

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

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

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

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