ホームページ > 記事 > ウェブフロントエンド > CSSファイルをHTMLに導入する場合のlinkと@importの違いは何ですか？
CSSファイルをHTMLに導入する場合のlinkと@importの違いは何ですか？
- yuliaオリジナル
- 2018-09-17 14:02:173462ブラウズ
以前紹介した CSS ファイルを HTML に導入する方法 CSS を HTML にインポートするには、インライン スタイル、埋め込みスタイル、外部スタイルという 4 つの方法があります。外部スタイルは、インポート スタイルとリンク スタイルに分かれています。これも外部スタイルですが、link と @import の違いは何ですか? 知りたい方は以下を読み進めてください。
1. インポート方法の違い
link リンク タイプ:
<link rel="stylesheet" type="text/css" href="css/green.css"/>
import インポート タイプ:
<style type="text/css">
@import url("css/green.css");
</style>2 , ブラウザの違い
リンクによって互換性の問題が発生することはありませんが、@import は IE5 以降で実装する必要があります。
ページの読み込みプロセス中に、リンクによってインポートされた CSS スタイル ファイルの場合、CSS スタイルはコンテンツと同時に読み込まれます。 @import で導入された CSS ファイルの場合、ページの読み込み後にスタイルが読み込まれます。
3. 依存関係の違い
@import は CSS が提供する構文規則であり、スタイルシートをインポートする機能のみを持ちます。 Link は HTML で提供されるタグで、CSS ファイルを読み込むだけでなく、RSS や rel 接続属性などを定義することもできます。
4. DOM コントロール スタイルの違い
スタイルを変更するために DOM をコントロールするために JavaScript が必要な場合、 @import は使用できないため、リンク タグのみを使用できます。 DOM によって制御されます。
5. CSS の優先度の違い
同じ重みを持つ CSS スタイルの優先度は、インライン スタイル、インライン スタイル、外部スタイルです。スタイルをインポートします。外部リンク スタイルとインポートされたスタイルの両方に div{color:XX} がある場合、最終的な div スタイルは、外部リンク スタイルで定義された div スタイルになります。
例: div のインライン スタイル、インライン スタイル、外部スタイル、インポートされたスタイルをそれぞれ指定して、最終的にどのような効果があるかを確認します。
<link rel="stylesheet" type="text/css" href="css/green.css"/> have a nice day
レンダリング:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{background: yellow;}
@import url("css/red.css");
</style>
</head>
<body>
<div style="width: 150px;height: 150px;">have a nice day </div>
</body>
</html>レンダリング:
CSS におけるリンクとインポートの違いについて説明しています。 一般に、インポートによって読み込まれるスタイルが比較的大きい場合は、インポート インポート スタイルを使用しないことをお勧めします。 、読み込みが遅くなり、画面がちらつきやすくなります。もちろん、将来的に CSS をモジュール化する必要がある場合は、状況に応じて @import を使用することになります。
以上がCSSファイルをHTMLに導入する場合のlinkと@importの違いは何ですか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。