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

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

WBOY

リリース： 2016-06-24 12:03:38

オリジナル

1680 人が閲覧しました

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

1. 埋め込み

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

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

ログイン後にコピー

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" ?><html>指令语句</html>

ログイン後にコピー

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

3. link 要素を使用します

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

ログイン後にコピー

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

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

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

<head><link rel="stylesheet" href="css的url" type="text/css" ></head>

ログイン後にコピー

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