HTML の CSS はいくつかのカテゴリに分類されます-フロントエンドQ&A-php.cn

css は 3 つのカテゴリに分類できます。 1. インライン (インライン) スタイル。style 属性を使用して HTML タグ内に CSS コードを挿入します。構文 " ..< ;/タグ名>"; 2. 埋め込みスタイルシート。ドキュメントの先頭部分のスタイルタグペアに CSS コードを置きます。構文は ""; 3. 外部スタイルシート、配置 CSS コードを「.css」ファイルに配置し、リンクタグまたは「@import」ルールを使用して HTML ドキュメントに導入します。

HTML の CSS はいくつかのカテゴリに分類されます

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

HTML コードで何らかの効果を実現するには、多くの場合、CSS の変更を追加する必要があります。HTML には、インラインスタイル、埋め込みスタイルシート、外部スタイルシートの 3 種類の CSS があります。

1. インライン(インライン)スタイル

インラインスタイルとは、HTMLタグのstyle属性に直接スタイル情報を定義することです。インラインスタイルはタグ内で定義されるため、インラインスタイルが配置されているタグに対してのみ有効です。

<body style="background-color:black;">
    <h1 style="color:white;padding:30px;">Hostinger Tutorials</h1>
    <p style="color:white;">Something usefull here.</p>
</body>

ログイン後にコピー

HTML の CSS はいくつかのカテゴリに分類されます

インライン CSS は使用しないことをお勧めします。各 HTML タグは個別にスタイル設定する必要があり、インライン CSS のみを使用すると、HTML タグの管理が非常に困難になる可能性があるためです。 Webサイト。ただし、特定の状況では役立つ場合があります。たとえば、CSS ファイルにアクセスできない場合や、単一の要素にのみスタイルを適用する必要がある場合などです。

欠点:

インラインスタイルを定義するには、各 HTML タグで style 属性を定義する必要があり、非常に不便です。
HTML タグの属性では、通常、 ; ## のように、属性値を囲むために二重引用符が使用されるため、インラインスタイルで二重引用符または一重引用符を使用する場合は特に注意してください。
# インラインスタイルで定義されたスタイルは、他の場所では再利用できません。
Web サイトは通常、多くのページで構成されているため、インラインスタイルは後のメンテナンスに非常に不便です。、ページスタイルを変更する場合は、ページを 1 つずつ変更する必要があります。
インラインスタイルを追加しすぎると、HTML ドキュメントのサイズが大きくなります。

2. 埋め込みスタイルシート

ページにスタイルコードを記述します

タグ構造は、ページ<HTML>タグ内のどこにでも配置できます。複数出現します。通常、<style>...</style> 構造全体は、ページの <head>...</head> セクションに記述されます。この CSS 導入方法の特徴は、各ページの CSS コードを統一して計画的に作成できることで、ページ内での再利用やメンテナンスが容易ですが、複数のページ間での CSS コードの再利用はまだ不十分です。

<!DOCTYPE html>
<html>
	<head>
		<style>
			body {
				background-color: linen;
			}

			h1 {
				color: maroon;
				margin-left: 40px;
			}
		</style>
	</head>
	<body>
		<h1>PHP中文网</h1>
		<p>https://www.php.cn/</p>
	</body>
</html>

ログイン後にコピー

HTML の CSS はいくつかのカテゴリに分類されます

埋め込みスタイルシートはHTML文書内でCSSスタイルを定義する必要があるため、文書のサイズが大きくなり、他の文書がある場合には同じスタイルがスタイルシートに埋め込まれている場合、そのスタイルを他のドキュメントに導入することはできず、他のドキュメントで再定義する必要があるため、コードの冗長性が生じ、後のメンテナンスに役立ちません。

3. 実際の開発では外部スタイルシート

を使用します。さまざまなスタイルのシーンに適しています。スタイルは CSS ファイルに個別に記述され、CSS ファイルは HTML に導入されて使用されます。

1) link

リンクスタイルを使用するということは、CSS スタイルシートを外部で定義し、拡張子

.CSS を持つファイルを作成することを意味します。 リンクタグを介してページにリンクし、リンクステートメントはページの <head> タグ領域に配置する必要があります。

構文:

<link type="text/css" rel="styleSheet"  href="CSS文件路径" />

ログイン後にコピー

各属性の説明:

href 属性は、外部スタイルシートファイルのアドレスを設定します。これは相対アドレスにすることができます。または絶対アドレスです。
rel 属性は、関連するドキュメントを定義します。ここでは、関連するドキュメントがスタイルシートであることを示します。
type 属性はインポートされるファイルのタイプを定義します。style 要素と同様に、text/css は CSS テキストファイルを示します。

通常、タグを定義する場合、3 つの基本属性を定義する必要があり、そのうちの href は必ず設定する属性です。

リンク要素に title 属性を追加して、オプションのスタイルシートのタイトルを設定することもできます。つまり、Web ドキュメントが複数のスタイルシートをインポートするときに、適用するスタイルシートファイルを選択できます。タイトル属性値。

ヒント: Firefox ブラウザでは、メニューで [表示 --> ページスタイル] オプションを選択すると、サブメニューにタイトル属性値が表示されます。別のタイトル属性を選択するだけです。必要なスタイルシートファイルを選択して適用します。 IE ブラウザはこの機能をサポートしていません。

另外，title 属性与 rel 属性存在联系，按 W3C 组织的计划，未来的网页文档会使用多个元素导入不同的外部文件，如样式表文件、脚本文件、主题文件，甚至可以包括个人自定义的其他补充文件。导入这么多不同类型、名称各异的文件后，可以使用 title 属性进行选择，这时 rel 属性的作用就显现出来了，它可以指定网页文件初始显示时应用的导入文件类型，目前只能关联 CSS 样式表类型。

外部样式是 CSS 应用的最佳方案，一个样式表文件可以被多个网页文件引用，同时一个网页文件可以导入多个样式表，方法是重复使用 link 元素导入不同的样式表文件。

2）、使用@import

导入式是通过@import在