＆lt; link＆gt;をどのように使用しますか 外部CSSスタイルシートにリンクするタグ？

<link>タグを使用して、外部CSSスタイルシートにリンクしますか？

<link>タグを使用して外部CSSスタイルシートにリンクするには、HTMLドキュメントのセクションに含める必要があります。 CSSファイルをリンクするための<link>タグの基本構造は次のとおりです。

 <code class="html"> <link rel="stylesheet" type="text/css" href="path/to/yourstylesheet.css"> </code>

この例で使用されている属性の内訳は次のとおりです。

• rel="stylesheet" ：この属性は、現在のドキュメントとリンクされたドキュメントとの関係を指定します。 CSSファイルの場合、これは常に「styleSheet」に設定する必要があります。
• type="text/css" ：この属性は、リンクされたドキュメントのmimeタイプを指定します。それはオプションであり、現代のHTMLで使用されていないと考えられていますが、明確さや後方の互換性のために含めることができます。
• href="path/to/yourstylesheet.css" ：この属性は、HTMLドキュメントに対するCSSファイルの場所を指定します。絶対的または相対パスを使用できます。

この方法を使用して、外部CSSファイルからHTMLドキュメントにスタイルを適用して、複数のページでスタイルを管理および再利用しやすくすることができます。

CSSの<link>タグで使用される一般的な属性は何ですか？

CSSファイルにリンクするときに、いくつかの属性が<link>タグで一般的に使用されます。これが最も頻繁に使用されるものです：

• rel ：現在のドキュメントとリンクされたドキュメントとの関係を指定します。 CSSの場合、「StyleSheet」に設定する必要があります。
• type ：リンクリソースのMIMEタイプを示します。 CSSファイルの場合、これは通常「テキスト/CSS」になりますが、ブラウザがrel属性から推測できるため、最新のHTML5で省略されていることがよくあります。
• href ：リンクリソースのURLを指定します。これは、CSSファイルへの相対的または絶対的なパスにすることができます。
• media ：リンクリソースが表示されるデバイスを指定します。一般的な値には、「スクリーン」、「印刷」、「すべて」が含まれます。 media="screen and (max-width: 600px)"などのメディアクエリも使用することもできます。
• title ：リンクされたリソースに関する追加情報を提供するために使用されます。別のスタイルシートがあり、名前を指定したい場合に特に便利です。
• integrity ：SubResource Integrity（SRI）に使用され、ブラウザが指定された暗号化ハッシュに対してファイルを確認して、改ざんされていないことを確認できます。
• crossorigin ：リソースをCorsでフェッチするかどうかを指定します。 「匿名」または「ユースクレデンス」に設定できます。

これらの属性の一部を含む例は次のとおりです。

 <code class="html"> <link rel="stylesheet" type="text/css" href="styles.css" media="screen" title="Default Styles"> </code>

<link>タグを使用して複数のCSSファイルをリンクできますか？

はい、 <link>タグを使用して複数のCSSファイルをリンクできます。これを行うには、HTMLドキュメントのセクション内に複数の<link>タグを含めるだけで、それぞれが異なるCSSファイルを指しています。複数のCSSファイルをリンクする方法の例は次のとおりです。

 <code class="html"> <link rel="stylesheet" href="styles1.css"> <link rel="stylesheet" href="styles2.css"> <link rel="stylesheet" href="styles3.css"> </code>

各<link>タグは、関連するCSSファイルをロードし、さまざまなコンポーネントのスタイルを分離したり、さまざまなメディアタイプに異なるスタイルを使用したりするなど、ニーズに基づいてスタイルをさまざまなファイルに整理できます。

複数の<link>タグを使用している場合、CSSファイルのロードの正しい注文を確認するにはどうすればよいですか？

複数の<link>タグを使用して異なるCSSファイルをロードする場合、HTMLドキュメントのタグの順序により、スタイルが適用される順序が決まります。カスケードの後半に表示されるCSSルールは、同じ特異性がある場合、以前のルールを上書きします。

CSSファイルの読み込みとアプリケーションの正しい順序を確認するには、スタイルを適用したい順序でセクションに<link>タグを配置する必要があります。 styles1.cssが最初に適用される例を次に示し、次にstyles2.css 、そして最後にstyles3.css続きます。

 <code class="html"> <link rel="stylesheet" href="styles1.css"> <link rel="stylesheet" href="styles2.css"> <link rel="stylesheet" href="styles3.css"> </code>

この構成では、 styles2.cssのルールと競合するstyles1.cssで定義されているルールは、 styles1.cssのルールを無効にし、 styles3.cssのルールを最も優先します。これにより、CSSルールの特異性を効果的にオーバーライドすることができます。

以上が＆lt; link＆gt;をどのように使用しますか 外部CSSスタイルシートにリンクするタグ？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。