HTMLにCSSや画像を埋め込む方法-htmlチュートリアル-php.cn

HTMLにCSSや画像を埋め込む方法

coldplay.xixi

リリース： 2023-01-03 09:27:26

オリジナル

4177 人が閲覧しました

CSS と画像を HTML に埋め込む方法: 1. HTML の style 要素を使用して、ドキュメント内の CSS スタイルを定義します; 2. 各 HTML 要素には、スタイルを直接定義できる style 属性が含まれています; 3外部 CSS ファイルを動的に参照すると、ドキュメントのプレゼンテーションが定義されます。

HTMLにCSSや画像を埋め込む方法

#このチュートリアルの動作環境: Windows7 システム、html5 バージョン、DELL G3 コンピューター。

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 ビデオチュートリアル

以上がHTMLにCSSや画像を埋め込む方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。