HTML ドキュメントに CSS を埋め込む 3 つの一般的な方法-htmlチュートリアル-php.cn

HTML ドキュメントに CSS を埋め込む 3 つの一般的な方法

高洛峰

リリース： 2017-02-23 13:33:56

オリジナル

2368 人が閲覧しました

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 サイトに注目してください。