ホームページ > 記事 > ウェブフロントエンド > 外部リンクCSSとは何ですか？
外部リンクCSSとは何ですか？
- 青灯夜游オリジナル
- 2022-09-01 18:43:323325ブラウズ
外部リンク CSS とは、「.css」形式のファイルで CSS スタイルを定義し、HTML リンク タグを使用して CSS ファイルを HTML ドキュメントにリンクすることを指します。外部リンク CSS は、Web ページ ファイル本体が読み込まれる前に CSS ファイルを読み込むため、表示される Web ページは最初からスタイルが設定されます。最初にスタイルのない Web ページを表示してから、インポートされた Web ページのようにスタイル付きの Web ページを表示することはありません。 css.Webページ。
このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。
外部リンク CSS とは、HTML リンク タグを使用して CSS ファイルを HTML ドキュメントにリンクすることを指します。
CSSファイルは一般にCSS外部スタイルシートと呼ばれるもので、CSSコードを配置するためのテキストファイルであり、CSSコードは一定の規則を持ったテキストコードで構成されています。メモ帳を使用して拡張子を変更して CSS ファイルにします。
css ファイルには、サフィックスとして .css が付いています。サフィックスとして .css が付いているファイルは CSS ファイルであることがわかります。
link タグは、ページの
セクションに配置する必要があります。リンク タイプでは、Web ページ ファイルの本体を読み込む前に CSS ファイルが読み込まれるため、表示される Web ページには最初からスタイル効果が適用されます。 import タイプを選択し、スタイル付きの Web ページを表示できるのがリンク スタイルの利点です。
以下、具体例を挙げて説明します。
まず、以下に示すように、.css 形式 (style.css など) でスタイル ファイルを定義する必要があります。
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}次に、この style.css ファイルを HTML ドキュメントに導入します。表示:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<h1>PHP中文网</h1>
<p>https://www.php.cn/</p>
</body>
</html>
リンクタグの各属性の説明:
href 属性は、外部のアドレスを設定します。スタイル シート ファイル。相対アドレスは絶対アドレスにすることもできます。
rel 属性は、関連するドキュメントを定義します。ここでは、関連するドキュメントがスタイル シートであることを示します。
type 属性はインポートされるファイルのタイプを定義します。style 要素と同様に、text/css は CSS テキスト ファイルを示します。
通常、 タグを定義する場合、3 つの基本属性を定義する必要があり、そのうちの href は必ず設定する属性です。
リンク要素に title 属性を追加して、オプションのスタイル シートのタイトルを設定することもできます。つまり、Web ドキュメントが複数のスタイル シートをインポートするときに、適用するスタイル シート ファイルを選択できます。タイトル属性値。
ヒント: Firefox ブラウザでは、メニューで [表示 --> ページ スタイル] オプションを選択すると、サブメニューにタイトル属性値が表示されます。別のタイトル属性を選択するだけです。必要なスタイル シート ファイルを選択して適用します。 IE ブラウザはこの機能をサポートしていません。
さらに、title 属性は rel 属性に関連しています。W3C 組織の計画によると、将来の Web ドキュメントでは、スタイル シート ファイル、スクリプトなどのさまざまな外部ファイルをインポートするために複数の 要素が使用される予定です。ファイル、テーマ ファイル、さらにその他のカスタマイズされた補足ファイルを含めることもできます。さまざまな種類や名前のファイルを多数インポートした後、title 属性を使用して選択できます。このとき、rel 属性の役割が明らかになります。Web ページ ファイルが最初に表示されるときに適用されるインポートされたファイルの種類を指定できます。現在、CSS スタイル シート タイプにのみ関連付けることができます。
注:
リンク タグを使用して CSS 外部スタイル シートを導入するほかに、@import を使用することもできます。
外部リンク (link) とインポート (@import) の違い:
link は XHTML タグであり、CSS の読み込みに加えて、RSS を定義することもできますおよびその他のトランザクション; @import は CSS カテゴリに属しており、CSS のみをロードできます;
link が CSS を参照している場合、ページのロードと同時にロードされます。インポートにはページが完全にロードされる必要があります。
link は XHTML タグであり、互換性の問題はありませんが、@import は CSS2.1 で提案されたものであり、以前のバージョンのブラウザではサポートされていません。
ink は、JavaScript を使用して DOM を制御してスタイルを変更することをサポートしていますが、@import はサポートしていません。
@import は他のスタイル シートを CSS ファイルに導入できますが、リンクはそれをサポートしていません。
(学習ビデオ共有: Web フロントエンド)
以上が外部リンクCSSとは何ですか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。