HTML は Web ページの基本構造であり、CSS は Web ページのスタイルのサポートを提供します。 CSS 設定を通じて、Web ページを美しくカスタマイズすることができます。そのため、Web開発者にとってCSSの設定方法を知ることは非常に重要なステップとなります。この記事では、CSS を使用して HTML を設定する方法を説明します。
1. CSS スタイルの基本
CSS を使用して HTML スタイルを設定する前に、理解する必要のあるいくつかの基本概念があります:
CSS スタイル セレクター
CSS スタイル セレクターは、特定の HTML タグを選択するために使用される CSS コードを指します。一般的な CSS スタイル セレクターには、タグ セレクター、クラス セレクター、ID セレクター、属性セレクターなどが含まれます。
CSS プロパティとプロパティ値 CSS プロパティは、設定するスタイル プロパティを指します。 CSS 属性値は、属性の特定の値です。
たとえば、HTML テキストの色を設定するには、「color」属性を使用して設定できます。その属性値は、次のような特定のカラー コードです。「color: #ff0000;」は、次のことを意味します。テキストの色を赤に設定します。
CSS スタイルの優先度 同じ HTML タグに複数の CSS スタイル コードが設定されている場合、CSS スタイルの優先度に問題が発生します。
CSS では、優先度を 4 つのレベルに分けることができます。優先順位は高いものから低いものの順に、ID セレクター、クラス セレクター、ラベル セレクター、ユニバーサル セレクターです。つまり、ID セレクターで設定されたスタイルの優先度が最も高く、ユニバーサル セレクターで設定されたスタイルの優先度が最も低くなります。
同じレベルのラベル スタイルが複数ある場合、CSS スタイル コードの位置に基づいて優先順位が決定されます。
2. CSS スタイルで HTML を設定する方法
HTML タグ スタイルの設定 HTML スタイルを設定する最も簡単な方法の 1 つは、CSS スタイルを直接追加することです。 HTML タグ CSS スタイル プロパティを追加します。たとえば、h1 タグにスタイルを追加します。
<h1 style="color: #ff0000; font-size:28px;">Hello World!</h1> ログイン後にコピー
この方法は単純ですが、柔軟性が十分ではありません。複数のタグのスタイルを設定する必要がある場合、コードが冗長になりすぎる可能性があります。
内部スタイル シートを使用する 内部スタイル シートとは、HTML の先頭にある <style> タグに CSS スタイル コードを記述することを指します。ファイル では、タグ セレクターを使用して HTML タグのスタイルを設定します。例:
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS Example</title>
<style>
h1{
color: #ff0000;
font-size: 28px;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html> ログイン後にコピー
外部スタイル シートの使用 外部スタイル シートとは、CSS スタイル コードを別の CSS ファイルに記述し、## を使用することを指します。 HTML タグ # タグはそれを参照します。この方法により、Web ページのコードがより明確かつ簡潔になり、繰り返される可能性が低くなります。たとえば、
は、
index.html ファイル内の style.css スタイル ファイルを参照します。style 内の
<!DOCTYPE html>
<html>
<head>
<title>External CSS Example</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Hello World!</h1>
</body>
</html> ログイン後にコピー
。 css ファイルにスタイルを設定します:
h1{
color: #ff0000;
font-size: 28px;
} ログイン後にコピー
クラス セレクターを使用します
クラス セレクターとは、次の追加によって、指定された HTML タグの CSS スタイルを設定することを意味します。 class 属性を HTML タグに追加します。例:
<!DOCTYPE html>
<html>
<head>
<title>Class Selector Example</title>
<style>
.red-text{
color: #ff0000;
}
</style>
</head>
<body>
<h1 class="red-text">Hello World!</h1>
<p class="red-text">This is a test paragraph.</p>
</body>
</html> ログイン後にコピー
ID セレクターの使用
ID セレクターとは、HTML タグに id 属性を追加することによって、指定された HTML タグの CSS スタイルを設定することを指します。
<!DOCTYPE html>
<html>
<head>
<title>ID Selector Example</title>
<style>
#my-heading{
color: #ff0000;
}
</style>
</head>
<body>
<h1 id="my-heading">Hello World!</h1>
</body>
</html> ログイン後にコピー
属性セレクターの使用
属性セレクターとは、HTML タグで属性を指定することによって CSS スタイルを選択および設定することを指します。例:
<!DOCTYPE html>
<html>
<head>
<title>Attribute Selector Example</title>
<style>
a[href^="https"]{
color: blue;
}
</style>
</head>
<body>
<p>Visit my website at <a href="https://example.com">example.com</a>.</p>
<p>Visit my blog at <a href="http://blog.example.com">blog.example.com</a>.</p>
</body>
</html> ログイン後にコピー
上記のコードでは、
a[href^="https"]href 属性値が「https」で始まるタグをすべて選択します 、フォントの色を青に設定します。
擬似クラスおよび擬似要素セレクター
擬似クラス セレクターは、指定された HTML タグの状態の CSS スタイルの設定を指します。たとえば、
:hover は、指定されたラベルの上にマウスを置いたときにスタイル設定を追加できます。
擬似要素セレクターは、HTML タグ内のコンテンツの一部 (段落の最初の行など) の CSS スタイルを設定することを指します。
<!DOCTYPE html>
<html>
<head>
<title>Pseudo-class and Pseudo-element Selector Example</title>
<style>
a:hover{
color: blue;
}
p::first-line{
font-size: 24px;
}
</style>
</head>
<body>
<p>This is the first line.
This is the second line.
This is the third line.</p>
<a href="#">This is a link.</a>
</body>
</html> ログイン後にコピー
上記のコードでは、
:hoverselect を使用して、マウスを ラベル上に置いたときに青色のフォントを設定します。 ::first-line段落の最初の行のフォント サイズを 24px に設定します。
3. 概要
この記事では、HTML タグへの直接スタイルの追加、内部スタイル シートの使用、外部スタイル シートの使用、クラス セレクターの使用、およびID セレクター。属性セレクター、疑似クラス、疑似要素セレクターを使用します。さまざまな方法を選択することで、さまざまな状況でのスタイリングをより柔軟に行うことができます。同時に、CSS スタイルの優先順位の概念を理解することは、CSS スタイルを使用して HTML を設定するための基礎の 1 つでもあります。
以上がCSSを使用してHTMLを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
