@importルール
この方法は、スタイルシートの中から外部スタイルシートを読み込ませる方法です。
@importの方法で、各メディア環境に配慮したスタイルシートの設定を行います。
@imoprtの記述方法は、以下の通り5つの書き方があります。
@import url("style.css");
@import url('style.css');
@import url(style.css);
@import "style.css";
@import 'style.css';
※最後は必ず、;(セミコロン）を記述します。
@imoprtコードの使用方法
@imoprtコード記述の組み合わせがいくつかあります。
<style>間に@importを記述する
<head>間のstyleを書く箇所の中に記述します。
<style type="text/css">
@import url("style.css");
</style>
外部スタイルシートに記述
CSSファイルの一行目に書きます。
1行でも複数でも記述することができます。
@import url("style.css");
@import url("style.css");
@import url("style2.css");
外部スタイルシートにメディア環境も記述する
メディア環境も指定することもできます。
@import url("style.css") screen,handheld;
@import url("style2.css") print;
@importの後にスタイルを記述
@importの後にスタイルを記述することもできます。
ただし、@importの間にスタイルをはさんだり、@media間に@importをはさんだりすることはできません。
@import url("style.css") screen,handheld;
body{
background:#ffffff;
color:#000000;
}
@import url("style2.css") print;
@import url("style.css") screen,handheld;
@media print{
@import url("style2.css");
body{
background:#ffffff;
color:#000000;
}
}
@importを使ったブラウザ別にCSS条件分岐
この方法は、@importに対応していないブラウザを逆に利用することにより、
ブラウザ別にCSSの対策を取る方法です。
この方法は、別途「ブラウザ別CSS対策」の方に記述しているので、
そちらを参考にしてください。
ブラウザ別ＣＳＳ対策
ブラウザ別ＣＳＳ対策に関する記事一覧です。
(2 votes, average: 3.5 out of 5)
Loading ...
