ホームページ > 記事 > ウェブフロントエンド > HTML に CSS を埋め込むいくつかの方法 document_html/css_WEB-ITnose
HTML に CSS を埋め込むいくつかの方法 document_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:03:381649ブラウズ
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 要素内) 内のリンクよりも優先されます。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。