ホームページ > 記事 > ウェブフロントエンド > CSS外部リンクの形式は何ですか?
CSS外部リンクの形式は何ですか?
- 青灯夜游オリジナル
- 2022-07-27 20:27:315879ブラウズ
CSS 外部リンクには 2 つの形式があります: 1. リンク タグを使用して CSS 外部スタイルを HTML ページにリンクします。リンク タグは head タグ領域に配置する必要があり、構文は "< ;link type="text/css" rel="styleSheet" href="CSS ファイル パス" />"; 2. 構文「@import url(」を使用して、style タグの「@import」ルールを介してリンクします。 css ファイルのパス");"。
このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。
CSS スタイルが Web ページ ドキュメントの外部のファイルに配置されている場合、それは外部スタイル シートと呼ばれます。CSS スタイル シート ドキュメントは外部スタイル シートを表します。
実際、外部スタイル シートは拡張子 .css を持つテキスト ファイルです。 CSS スタイル コードをテキスト ファイルにコピーし、.css ファイルとして保存すると、それは外部スタイル シートになります。
以下に示すように、これは外部スタイル シートです:
それでは、CSS 外部スタイル シートを HTML ドキュメントにリンクするにはどうすればよいでしょうか? 外部スタイル シートを使用するには 2 つの方法があります:
1)、リンクを使用する
リンク スタイルは、CSS スタイル シートを外部で定義し、それを形成することを指します。 .CSS ファイル拡張子として、ページ内の <link> リンク タグを介してページにリンクし、リンク ステートメントはページの
構文:
<link type="text/css" rel="styleSheet" href="CSS文件路径" />
2)、@importを使用します
インポートは、
タグでの宣言の構文:
<style type="text/css">
@import url("css文件路径");
</style>簡単な例:
css 外部スタイル シート style.css
h1{
color:red;
}
p{
font-size:14px;
color:green;
}HTML ドキュメント
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link type="text/css" rel="styleSheet" href="style.css" />
<!-- <style>
@import url("style.cs");
</style> -->
</head>
<body>
<h1>link标签或@import的应用</h1>
<p>外部定义CSS样式表以.CSS为扩展名文件，然后在页面中通过link标签或@import链接到页面中。</p>
</body>
</html> 実装効果:
#1所属の違い
@import は CSS が提供する構文規則で、スタイルシートをインポートする機能のみを持ちます; link は HTML が提供するタグで、CSS ファイルを読み込むだけでなく RSS を定義することもできます、rel 接続属性など。 2. 読み込み順序の違いページ読み込み時にlinkタグで導入されたCSSも同時に読み込まれますが、@importで導入されたCSSはページの後に読み込まれます。ロードされています。 3. 互換性の違い@import は CSS2.1 でのみ使用できる構文であるため、IE5 でのみ認識できます; link タグは HTML 要素であり、互換性の問題はありません。 4. DOM 制御性の違いJS で DOM を操作し、リンクタグを挿入してスタイルを変更できますが、DOM メソッドはドキュメントに基づいているため、@import を使用して挿入することはできませんスタイル。 (学習ビデオ共有:Web フロントエンドの入門
)以上がCSS外部リンクの形式は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。