cssの読み込み方法でこの二つの違いはなんですか？

質問

よろしくお願いいたします。
ＣＳＳを読み込むときに
<link rel="Stylesheet" typ ="text/css" href ="○○.css" />
と
@import url(○○.css);
と二つの方法がありますが、
この二つに何か違いがあるのでしょうか？
たぶん基本的な事で申し訳ないのですが、ご存知の方よろしくお願いいたします。

回答No.1

meenie · ベストアンサー

結果はどちらも同じですが使用目的が少し変わってくるかもしれません。
特にcssの部品化を行っている方だと使い分けが顕著に見られるのではないでしょうか。

私の場合を紹介しますと、
各ページhtmlではlinkタグを用いてそのページ用のcssファイルを読み込みます。
各ページ用cssの先頭部分でそのページに用いられていて、かつ他のページでも使用される共通cssを複数importする形を取っています。
この方式の一番の利点は、共通部分をまとめることで変更が生じたときの手間を減らせることにあります。

また、@import "abc.css" という書き方は一部の古いブラウザでは動作しません。
これを利用してブラウザによって適応させるcssを変えるという、通称cssハックと呼ばれる技法にも使われています。

回答No.4

koutarou504

そもそも
link 要素は HTML の要素であり type での指定の様にスタイルシートのタイプを指定出来ます。
（といっても、ほとんど CSS しかないので・・・）

そして @import は CSS の規則であり、少なくとも HTML から CSS を読み込むのには用いる事は出来ません。STYLE 要素などで CSS を記述する中で新たに CSS を読み込む様に記述する事などには用いる事はできますが・・・。

機能の面ですが、link 要素は IE3,NS4 でも機能するが @import は機能しないとか、
複数の link 要素を記述した場合は IE3 は最後に記述した link 要素だけが適用されるとか、
link 要素で media 属性 に screen 以外を指定すると適用されないとか、
link 要素で title 属性を用いると、一部のブラウザ側でスタイルシートの切り替えが行えるとか・・・。
@import 規則で url()関数 を用いると IE4 では適用されないとか、
@import 規則で URI を単引用符で括ると IE5 では適用されないとか。

結果、
ブラウザによって振り分けたいとか考えない限り
あまり違いを意識する事もなく・・・・・。
先に記述した通り、HTML の要素と CSS の規則という
根本が違う程度かと。

回答No.3

suzuko

大きなお節介。

Netscape 4.xとWindows版IE4に○○.cssを適用させないやり方として、

****** ××.css ****************
@import url("○○.css");

****** html ********
<link href="××.css" rel="stylesheet" type="text/css" media="screen,print"/>

と××.cssを○○.cssの前にかませて、mediaを追加する方法がありますよ。

回答No.2

partita

#１さんがほとんど答えているので、補足。

＞ＣＳＳを読み込むときに

HTMLファイルでCSSファイルを読み込みますが、CSSファイルからCSSファイルを読み込むことも可能です。
その際はurl(・・・)の書き方になります。