しかし、コーディング中に、すべての Web ページに同じ CSS プロパティを個別に含めることは困難です。そのため、単一のスタイル シートを作成し、複数のファイルから簡単にアクセスできるソリューションを使用する必要があります。
CSS の @import ルールとは何ですか?
CSS スタイル プロパティを含める最良の方法は、@import ルールを使用することです。 @import は、別のスタイル シートから CSS スタイルシートをインポートまたはアクセスするために使用されます。これにより、インポートされたスタイル シートに追加されたすべてのプロパティが @import とスタイル シートの正確な名前を記述するだけで直接実装されるため、開発者の労力が軽減されます。
@import ルールの構文
@import ルールを追加して、別のスタイルシートからスタイル シートにアクセスする構文は次のとおりです。
@輸入 「スタイルシート名.css」 ;
@import ルールは、次の方法でも追加できます。
@輸入 URL ( スタイルシート名.css ) ;
単純に、CSS スタイルシート ファイルの名前を逆コンマまたは丸括弧で囲み、' URL 「書いた後」 @輸入 」。
例: @import ルールの追加
@import ルールがどのように機能するかを理解するために、簡単なコード スニペットを記述します。
< h1 > これは簡単なテキストです！ < / h1 >上記のコード スニペットには、HTML ドキュメントに追加された単純な 1 行の文を含む
見出しがあります。この単純なコードは、次の出力を生成します。
スタイルシートを作成して、上記の Web ページ インターフェイスを作成するファイルから後でインポートできるいくつかの CSS プロパティを定義します。別のファイルを作成し、「 スタイルシート 」として宣言されたファイルタイプ CSS 」、そして
見出しと本文のいくつかのプロパティを追加するだけです: h1 {
色 : ミッドナイトブルー ;
背景色 : 紺碧 ;
テキスト整列 : 中心 ;
}
体 {
背景色 : ライトブルー ;
}
の見出しと本文のスタイル プロパティを含むスタイルシート ファイルにアクセスするには、スタイリングが必要な任意の CSS ファイルに @import ルールを追加するだけです。
単純な @import ルールを追加するだけで、すべてのスタイル プロパティが Web ページ インターフェイスに実装され、各 Web ページで個別にプロパティを入力する必要がなくなります。
したがって、@import ルールを次のように記述する必要があります。
@輸入 「スタイルシート.css」 ;「」と書いて @import ルールを追加する URL 」と丸括弧内の CSS ファイルの名前でも同じ結果が表示されます。
@輸入 URL ( stylesheet.css ) ;「で定義されたプロパティ スタイルシート 」ファイルは、単純な「 @輸入 」 ルール:
これは、追加の作業なしで CSS プロパティをファイルに含める最も簡単な方法です。
CSS での @import ルールの利点
@import ルールは、次の理由で一般的に使用されます。
- @import ルールを使用すると、@import の後にそのシートの名前を記述するだけで、特定のスタイル シートのすべてのプロパティが実装されるため、開発者の時間と労力が削減されます。
- 大規模で複雑な Web アプリでは、スタイル シート ファイルの名前を追加するだけで同じスタイル プロパティを複数のファイルに実装できる @import ルールが非常に有利であることがわかります。
- ヘッダー、フッター、本文などのスタイル シート要素は、個別のスタイル シート ファイルに保存できます。その後、@import ルールを使用することで、必要なスタイルをインポートできます。スタイル プロパティを追加、削除、コメントする必要はありません。ファイル。
これは @import ルールの使用を要約し、このルールが CSS を含める最良の方法であると考えられる理由を説明しています。
結論
CSS スタイル シートは、別のスタイル シートから直接インポートまたはアクセスできます。インポートされたスタイル シートのすべてのプロパティは、インポートされたファイルの Web ページに直接実装されます。 Web ページ インターフェイスごとに、すべての CSS プロパティを個別に記述する必要はありません。 @import で CSS スタイル シート ファイルの名前を追加するだけです。そして、これは CSS を追加する最良の方法と考えられています。