@importで複数のCSSファイルを読み込む
複数のCSSファイルを読み込む場合、 HTMLファイルから複数のCSSファイルを読み込む方法と、 @importを使って、 1つのCSSファイルからまとめて読み込む方法があります。
Web開発において、後からCSSファイルが増えることは良くあることです。 ですから後々のメンテナンスを考えると、CSSファイルが複数ある場合は、 @importを使ってまとめて読み込むことをおすすめします。
@importの記述方法
@import url("style1.css");
@importの後に、url関数を使い、引数としてファイルパスを指定します。 ファイルパスは絶対パス、相対パスのどちらでも大丈夫です。
相対パスの場合の基準は？
ファイルパスを相対パスで記述する場合は、 読み込むCSSファイルからの相対パスを記述します。 HTMLファイルからのパスではありません。
例えば test.htmlが test.css を読み込んで、 test.cssがstyle1.css、style2.cssを読み込む場合、 test.cssを基準とした相対パスを記述します。
@importの記述例
test.cssからstyle1.css、style2.cssを読み込む場合は、 次のように記述します。
test.css
@charset "UTF-8";
@import url("style1.css");
@import url("style2.css");