リンクと@inportの詳細説明とスクリプト実行の説明 order_html/css_WEB-ITnose

まず、この 2 つの類似点と相違点について話しましょう

現在、主流のブラウザは両方とも外部 CSS を参照できます (ps:@import は CSS2.1 で提案されました) が、確実な違いがあります:

1.link は XHTML タグであり、CSS をロードするだけでなく、他のトランザクションも定義できます。@import は CSS カテゴリに属し、CSS のみをロードし、CSS コードでのみ使用できます。

リンクタグは、ドキュメントと外部リソースとの関係を定義するもので、最も一般的な用途は、スタイルシートとブラウザのタブアイコンをリンクすることです。

主に利用可能な属性がいくつかあります

href: 接続された外部ドキュメントの場所のURL

メディア: リンクされたドキュメントが表示されるデバイスを指定します。主流のブラウザでサポートされている値は「screen」、「」です。 print" と "all"

rel: 現在のドキュメントとリンクされたドキュメント間の関係を指定します。現在、スタイルシートとアイコンのみが適切にサポートされており、アイコンは外部リンクされたドキュメントをブラウザーのラベル アイコンとして参照します。

サイズ: リンクされたリソースのサイズを指定する HTML5 の新機能。この属性は複数の値を受け入れることができ、値はスペースで区切られます。 rel="icon" にのみ適用されます。値は、any (アイコンがスケーラブルであることを指定) と高さ x 幅です。たとえば、次の例では、ラベル アイコン

<link rel="icon" href="http://www.w3school.com.cn/i/demo_icon.ico" type="image/gif" sizes="16x16">

を定義します。type: リンクされたドキュメントの MIME タイプを指定します。最も一般的な MIME タイプは「text/css」です。 MIME タイプのリファレンス

@import は CSS コード内の外部ドキュメントを参照し、コードの先頭にのみ配置できます。たとえば、次の例は機能しません

<style type="text/css">  .panel{    width:1000px;  }  @import url(extra.css);</style>

<style type="text/css">  @import url(extra.css);  .panel{    width:1000px;  }</style>

に変更する必要があります: リンクが CSS を参照している場合、ページの読み込みと同時に読み込まれます (読み込み時にリクエストの順序); @import ではページを完全にロードする必要があります。後でロードしてください。

これには概念が関係します。コード内で参照されるファイルは、ドキュメントが読み込まれた後に読み込まれます。以下の例のように

<style type="text/css">  @import url(extra.css);</style><script type="text/javascript">  document.write("<script src='extra.js'><\/script>");</script><script src="jquery.js"></script><link rel="stylesheet" type="text/css" href="test.css"><script type="text/javascript" src='test.js'></script> 

読み込み順は jquery.js->test.css->test.js->extra.css->extra.js です。このうち、extra.css と extra.js は、コード内で参照される代表的なファイルです。

注: extra.css は読み込み順序では test.css の後にありますが、ブラウザーは extra.css スタイル シートが test.css の前に定義されていると認識するため、ブラウザーは test.css のスタイルを使用します。 extra.css のスタイル。 js スクリプトについても同様です。

ここには原則があり、スクリプト（HTMLに埋め込まれているものでも、外部スクリプトに埋め込まれているものでも）の優先順位は、ロードの順番ではなく、参照の順番であり、コードの実行に必要な条件は、最初のスクリプトがロードされました (実際には、スクリプト内のコードはすべてのスクリプトがロードされた後に実行されますが、異なるスクリプト内のコードの実行コンテキストは異なります。これについては以下で詳しく分析します)。

例えば

<script type="text/javascript">    document.write("<script src='extra.js'><\/script>");</script><script type="text/javascript" src='test.js'></script> <script type="text/javascript">    a();</script><script src="new.js"></script>

//extra.jsfunction a(){    alert("extra")}alert("extra1")//test.jsfunction a(){    alert("test");}alert("test1");setTimeout(a,1000);//new.jsfunction a(){    alert("new")}alert("new1")

参照順序は

extra.js -> test.js -> new.js; です。

ポップアップボックスの実行順序は、

alert("extra1") ->alert("test1") -> alert(" test")

解析すると、コードの実行順序は参照順序と同じです

ブラウザ実行機能の原理は、スクリプトを順番にスキャンし、実行されるすべてのプロセスを処理キューに入れ、実行コンテキストを使用して順番に実行します。

例えば、ローカルjsでa()を実行する場合、コンテキスト内の関数aはfunction a(){alert("test")}となります。 setTimeout(a,1000) が実行されると、関数 a はコンテキスト (関数 a は function a(){alert("test")}) を引き継ぎ、別の場所に配置されます。時間間隔が期限切れになるため、最後にalert("test")が表示されます。

もう一度展開して、extra.js で関数 b(){a();} を定義し、ローカル js で a() を呼び出した後に b(); を実行すると、結果はalert("test") になります。 , なぜなら、このときのコンテキスト関数 a は function a(){alert("test")} であるからです。

cssのリクエスト順序と範囲も上記の説明で説明できます。上書き順序では、最初に参照されたものが、後で参照される同じスタイルによって上書きされます (もちろん、これはインライン スタイル以外のスタイル参照を指します)

3: リンクは、変更する DOM を制御するための Javascript の使用をサポートします。スタイルと @import はサポートされていません。

linkもDOM要素であり、@importはcssスタイルシートでサポートされているものなので

4: 使い方

@import

@import "style.css"@import url(style.css) @import url("style.css")

@import url(style.css)を使うことを推奨します

この記事が良いと思ったら右下の【おすすめ】をクリックしてください！