ホームページ > 記事 > ウェブフロントエンド > HTML ドキュメントに CSS を埋め込む 3 つの一般的な方法
HTML ドキュメントに CSS を埋め込む 3 つの一般的な方法
- 高洛峰オリジナル
- 2017-02-23 13:33:562326ブラウズ
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.スタイルシート処理命令文を使用する
HTML文書の先頭にスタイルシートに関する命令処理文を記述します
<?xml-stylesheet type="text/css" href="mystyle.css" ?> <html> 指令语句 </html>
ただし、この命令の使用をサポートしているのはxml構文形式で記述されたHTML文書のみです。ブラウザ コンバータは xhtml または xml 形式で保存された場合にのみ有効であり、JS はこの種の CSS を処理できないため、その使用はお勧めできません。
2. @import コマンドを使用します
スタイル要素の間で @import コマンドを使用して、外部 CSS ファイルをインポートします
<head>
<style type="text/css">
<!--下面两行代码效果一样
@import "mystyle.css";
@import url("mystyle.css");
-->
</style>
</head>
@import ルールはすべてのルールの前に指定する必要があります。パラメータは CSS ファイルの URL アドレスです。 CSS ファイルで @import ディレクティブを使用して、別の CSS ファイルをインポートすることもできます。
3. リンク要素を使用します
<head> <link rel="stylesheet" href="css的url" type="text/css" > </head>
4. HTTP メッセージ ヘッダーを使用してスタイル シートにリンクします。
HTTP メッセージ ヘッダーのリンク フィールドを使用して、外部スタイル シートにリンクできます。
link:<mystyle.css>;rel=stylesheet; //等同于<link rel="stylesheet" href="css的url" type="text/css" >
HTTP ヘッダー内で複数のリンクを使用して複数のスタイル シートをリンクできます。HTTP ヘッダー内のリンクは、HTML ドキュメント (head 要素内) 内のリンクよりも優先されます。
CSS を HTML ドキュメントに埋め込む 3 つの一般的な方法に関するその他の関連記事については、PHP 中国語 Web サイトに注目してください。