HTML に CSS を埋め込むいくつかの方法 document_html/css_WEB-ITnose

HTML で CSS を定義するには、次の 3 つの方法が一般的に使用されます: 埋め込み、リンク、インライン

1. 埋め込み

ドキュメントで HTML スタイル要素を使用します。 CSS スタイルを定義します。

<style type="text/css">h1{color:red}p{color:blue}</style>

2. インライン

すべての HTML 要素には、スタイルを直接定義できる style 属性が含まれています。このスタイルは、この要素のコンテンツにのみ適用でき、同じ名前の別の要素には影響しません。

<p style="color:#FFF;font-weight:bold;">内联样式</p>

3. 外部参照

外部参照とは、HTML ドキュメント自体には CSS スタイルが含まれていないが、ドキュメントのプレゼンテーションを定義するために外部 CSS ファイルを動的に参照することを意味します。

使用方法 1. スタイル テーブルのスタイル指示ステートメントを使用します。ほとんどのブラウザは xhtml または xml 形式で保存された場合にのみ有効であり、JS はこの種の CSS を処理できないため、使用することはお勧めできません。

2. @import コマンドを使用します

style 要素の間に @import コマンドを使用して、外部 CSS ファイルをインポートします

<?xml-stylesheet type="text/css" href="mystyle.css" ?>指令语句

@import ルールはすべてのルールより前に指定する必要があります。パラメータは CSS ファイルの URL アドレスです。 CSS ファイルで @import ディレクティブを使用して、別の CSS ファイルをインポートすることもできます。

3. link 要素を使用します

<style type="text/css"><!--下面两行代码效果一样@import "mystyle.css";@import url("mystyle.css");--></style>

これも最も一般的に使用される方法です。

4. HTTP メッセージ ヘッダーを使用してスタイル シートにリンクします

HTTP メッセージ ヘッダーのリンク フィールドを使用して、外部スタイル シートにリンクできます。

<link rel="stylesheet" href="css%E7%9A%84url" type="text/css">

HTTP ヘッダー内で複数のリンクを使用して複数のスタイル シートをリンクできます。HTTP ヘッダー内のリンクは、HTML ドキュメント (head 要素内) 内のリンクよりも優先されます。