ホームページ > 記事 > ウェブフロントエンド > HTMLにCSSや画像を埋め込む方法
HTMLにCSSや画像を埋め込む方法
- coldplay.xixiオリジナル
- 2021-03-03 16:07:374173ブラウズ
CSS と画像を HTML に埋め込む方法: 1. HTML の style 要素を使用して、ドキュメント内の CSS スタイルを定義します; 2. 各 HTML 要素には、スタイルを直接定義できる style 属性が含まれています; 3外部 CSS ファイルを動的に参照すると、ドキュメントのプレゼンテーションが定義されます。
HTML に CSS や画像を埋め込む方法:
1. 埋め込み
HTML の style 要素を使用して、定義します。ドキュメント内の 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>Any @ 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 要素内) の優先度。
関連する学習に関する推奨事項:
以上がHTMLにCSSや画像を埋め込む方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。