ホームページ > 記事 > ウェブフロントエンド > CSS外部スタイルシートの参照方法は2つありますが、何ですか?
CSS外部スタイルシートの参照方法は2つありますが、何ですか?
- 青灯夜游オリジナル
- 2021-02-22 15:10:4816015ブラウズ
方法: 1. style タグの「@import」による参照、構文は「@import url(URL)」です; 2. link タグによる参照、構文「99abf950edb1cac34c8f8b068a119687"。
このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
CSS 外部スタイル シート
CSS スタイルが Web ページ ドキュメントの外部のファイルに配置されている場合、それは外部スタイル シートと呼ばれます。外部スタイルシートを表します。
実際、外部スタイル シートは拡張子 .css を持つテキスト ファイルです。 CSS スタイル コードをテキスト ファイルにコピーし、.css ファイルとして保存すると、それは外部スタイル シートになります。
外部スタイルシートの導入方法:
HTML ファイルは、拡張子 .css のスタイルシートを参照します。リンク型とインポート型の 2 つの方法があります。 . .
1. @import ディレクティブによる概要
@import ディレクティブは CSS 言語の一部です。使用する場合は、このディレクティブを HTML の c9ccee2e6ea535a969eb3f532ad9fe89 タグに追加します。 ;
外部 CSS ファイルに関連付けるには、href の代わりに URL を使用し、パスをかっこで囲む必要があります;
<html>
<head>
<style type="text/css">
@import url(css/styles.css);
</style>
<!--此处的type属性是针对HTML4.01的，若在HTML5中则不需要加-->
</head>
<body>
......
</body>
</html[推奨チュートリアル: CSS ビデオ チュートリアル ]
2. 2cdf5bf648cf2f33323966d7f58a7f3f タグによる導入 (最も一般的な方法)
<link type="text/css" href="style.css" rel="stylesheet" /> <!--同理，type属性是针对HTML4.01的-->
2 つの方法の違い
2cdf5bf648cf2f33323966d7f58a7f3f タグによる導入 (最も一般的な方法) link> タグは html タグに属し、@import は css によって提供されるメソッドです。2cdf5bf648cf2f33323966d7f58a7f3f タグは css を導入するだけでなく他のこともできますが、@import は css を導入することしかできません;
読み込み順序の違い: ページが閲覧されると、リンクによって導入された CSS は同期的に読み込まれますが、@import によって参照される CSS は、他のすべての要素がダウンロードされるまで読み込まれません;
互換性の違い: @import は CSS2.1 が提案されただけなので、IE5 以降でのみサポートされています。それより低いバージョンのブラウザではサポートされていません。2cdf5bf648cf2f33323966d7f58a7f3f タグにはこの問題はありません。
JavaScript を使用する場合@import は DOM によって制御できないため、DOM を制御してスタイルを変更するには 2cdf5bf648cf2f33323966d7f58a7f3f タグのみを使用できます。
プログラミング関連の知識について詳しくは、プログラミング ビデオをご覧ください。 ！
以上がCSS外部スタイルシートの参照方法は2つありますが、何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。