"; 2. 構文「@import url("css file path");」を使用して、style タグの「@import」ルールを介してリンクします。"/> "; 2. 構文「@import url("css file path");」を使用して、style タグの「@import」ルールを介してリンクします。">

ホームページ  >  記事  >  ウェブフロントエンド  >  CSS外部リンクの形式は何ですか?

CSS外部リンクの形式は何ですか?

青灯夜游
青灯夜游オリジナル
2022-07-27 20:27:315895ブラウズ

CSS 外部リンクには 2 つの形式があります: 1. リンク タグを使用して CSS 外部スタイルを HTML ページにリンクします。リンク タグは head タグ領域に配置する必要があり、構文は "< ;link type="text/css" rel="styleSheet" href="CSS ファイル パス" />"; 2. 構文「@import url(」を使用して、style タグの「@import」ルールを介してリンクします。 css ファイルのパス");"。

CSS外部リンクの形式は何ですか?

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

CSS スタイルが Web ページ ドキュメントの外部のファイルに配置されている場合、それは外部スタイル シートと呼ばれます。CSS スタイル シート ドキュメントは外部スタイル シートを表します。

実際、外部スタイル シートは拡張子 .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>

実装効果:

CSS外部リンクの形式は何ですか?

##link と @import の違い:

#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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。