ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSファイルをHTMLに導入する場合のlinkと@importの違いは何ですか?
以前紹介した 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
レンダリング:
##図からわかるように、div は最終的に紫色で表示され、紫色は最も高いインライン スタイルによって設定されます。優先度。インライン スタイルとインポート スタイルの場合、どのような影響があるかを見てみましょう。<!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>レンダリング: 明らかに、div は最終的に黄色で表示されます。黄色はインライン スタイルであり、インポートされたスタイルよりも優先されます。 。 概要: 上記は、
CSS におけるリンクとインポートの違いについて説明しています。 一般に、インポートによって読み込まれるスタイルが比較的大きい場合は、インポート インポート スタイルを使用しないことをお勧めします。 、読み込みが遅くなり、画面がちらつきやすくなります。もちろん、将来的に CSS をモジュール化する必要がある場合は、状況に応じて @import を使用することになります。
以上がCSSファイルをHTMLに導入する場合のlinkと@importの違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。