HTMLでのCSSの使い方

HTML と CSS は、最新の Web デザインの 2 つのコア テクノロジです。HTML は Web ページのコンテンツの作成に使用され、CSS はスタイルとレイアウトに使用されます。この記事では、CSS を HTML ページに適用して、Web サイトに美しくパーソナライズされたタッチを追加できるようにする方法を学びます。

1. CSS ファイルの導入

HTML ページで CSS を使用する最初のステップは、CSS ファイルを HTML ファイルに導入することです。これは、HTML ヘッダーにリンク要素を追加することで実現できます。この要素は、次のように CSS ファイルの場所を指す必要があります。

<link rel="stylesheet" type="text/css" href="style.css">

2. CSS を HTML 要素に適用する

CSS ファイルが適切に取り込まれたら、 HTML ページでは、HTML 要素への CSS スタイルの適用を開始できます。さまざまなセレクターを使用して要素を選択し、それらにスタイル属性を適用できます。次に例を示します。

h1 {
  color: red;
  text-align: center;
  font-size: 36px;
}

この CSS スタイル セレクターは、ページ上のすべての h1 要素に適用されます。要素のテキストの色を赤に変更し、テキストを中央に配置し、要素のフォント サイズを変更します。

3. ネストされたスタイル

ある要素のスタイル宣言を別の要素のスタイル宣言内にネストすることで、任意の要素にスタイルを追加できます。たとえば、段落内のすべての強調されたテキストを斜体にして、その色を青に変更できます。

p em {
  font-style: italic;
  color: blue;
}

さあ、すべて e388a4556c0f65e1904146cc1a846bee タグ内にあります。 907fae80ddef53131f3292ee4f81644b タグは斜体で表示され、青色になります。

カテゴリ セレクター

カテゴリ セレクターは、同じタイプの複数の要素のスタイルを設定するために使用できるセレクターです。クラス名付きの CSS スタイル セレクターを使用すると、カテゴリ内のすべての要素に同じスタイルを適用できます。カテゴリ セレクターの例を次に示します。

.blue-text {
  color: blue;
}

このスタイル セレクターは、「blue-text」というクラスを定義します。このタイプのスタイルを適用するには、このクラスを必要な要素に付与するだけです:

<p class="blue-text">这段文字会变成蓝色的。</p>

注: class 属性を使用すると、同じページ内に複数の異なるクラスを設定し、それらを異なるクラスに割り当てることができます。必要に応じて HTML 要素。複数のクラスを組み合わせて、より複雑なスタイルを設定することもできるので、上手に活用してください。

その他のセレクター

CSS には、ID セレクター、子孫セレクター、子セレクター、疑似クラス セレクターなど、他にも多くのセレクターがあります。これらのセレクターは、特定の要素をスタイルする必要がある場合に役立ちます。以下は他のセレクターの紹介です:

ID セレクター: ID を定義することで、ページ上の特定の要素のスタイルを設定できます。
• 子孫セレクター: 指定された要素の子孫要素を選択するために使用されます。
• 子セレクター: 子孫セレクターに似ていますが、直接の子要素のみを選択します。
• 疑似クラス セレクター: ホバー、アクセス、選択状態などの特定の状態にある要素を選択するために使用されます。

CSS ボックス モデル

CSS ボックス モデルは、Web ページ要素をレイアウトおよび配置するための基本概念です。このモデルは、コンテンツ領域、パディング、境界線、マージンなどのさまざまな部分を含む HTML 要素の周囲のボックスを記述します。

各ボックスのサイズと位置を設定することで、HTML 要素のレイアウトを正確に制御できます。 CSS ボックス モデルのいくつかの共通プロパティを次に示します。

box-sizing: 要素のボックス モデルを設定します。
• width: 要素の幅を設定します。
• height: 要素の高さを設定します。
• margin: 要素のマージンを設定します。
• padding: 要素のパディングを設定します。
• border: 要素の境界線を設定します。

これらのプロパティを使用して、Web ページ上のさまざまな要素を配置および調整し、目的のスタイルとレイアウトを実現できます。

概要

この記事では、CSS を使用して HTML 要素のスタイルを設定する方法を紹介しました。 CSS ファイルを作成し、それを HTML ページにリンクすることで、CSS を使用できます。その後、セレクターを使用して、各要素に異なるスタイルを適用できます。 CSS ボックス モデルを使用して、ページ上の要素をレイアウトおよび制御することもできます。これらのスキルをマスターすると、美しくパーソナライズされた Web サイト デザインで自慢できる Web ページを作成できるようになります。

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