HTMLとCSSを接続する方法

HTML と CSS はフロントエンド テクノロジの重要なコンポーネントであり、この 2 つを連携させることで、ページの外観とインタラクティブなエクスペリエンスを向上させることができます。この記事では、HTML と CSS を関連付けてページ スタイルの制御を実現する方法を紹介します。

1. HTML と CSS について

HTML は Web ページの基本構造であり、家の骨格として理解できます。ウェブページ。 CSS は家の装飾として理解できるスタイル シートで、Web ページの外観、レイアウト、色を制御します。

2. HTML への CSS の追加

CSS スタイル シートを HTML ドキュメントに追加するには、内部スタイルと外部スタイルの 2 つの方法があり、以下に説明します。

内部スタイル

1. 内部スタイルは、HTML ドキュメントの タグと タグの間に

<title>My Website</title>
<style>
body {
  background-color: #f2f2f2;
  font-family: Arial, sans-serif;
}
h1 {
  color: #333333;
}
</style>


<h1 id="Welcome-to-my-website">Welcome to my website</h1>
<p>This is the home page of my website</p>

上記のコードでは、

2. 外部スタイル

外部スタイルでは、CSS コードを別の CSS ファイルに配置し、その CSS ファイルを HTML の タグを通じて HTML ドキュメントにインポートします。書類。例:

<title>My Website</title>
<link>


<h1 id="Welcome-to-my-website">Welcome to my website</h1>
<p>This is the home page of my website</p>

上記のコードでは、 タグは「style.css」という名前の CSS ファイルを指しており、HTML コードはこのファイルを使用して Web ページのスタイルを制御します。

3. CSS セレクター

CSS スタイルの作成方法を理解するには、まず CSS セレクターを理解する必要があります。セレクターは、スタイルを設定する HTML 要素を指定する方法です。以下は一般的な CSS セレクターの一部です:

1. 要素セレクター

要素セレクターは、タグ名をセレクターとして使用する方法です。たとえば、次の CSS コードは、すべての段落要素の色を赤に設定します:

p {
  color: red;
}

2. クラス セレクター

クラス セレクターは、クラス名を HTML 要素に割り当てます。これらのクラス名は、次の中で使用できます。スタイルを指定するためのスタイルシート。たとえば、次の CSS コードは、クラス属性「my-class」を持つすべての要素を背景色が赤、フォント サイズが 16 pt に設定します。

.my-class {
  background-color: red;
  font-size: 16pt;
}

HTML コードでは、 class 属性要素へのメソッドは次のとおりです:

<div>
  <p>Hello, this is a paragraph</p>
</div>

ID セレクター

3. ID セレクターは、HTML 要素の一意の ID 名を指定します。 ID 要素に対してスタイル設定できるスタイル シート名。たとえば、次の CSS コードは、ID 属性値が「my-id」である要素を青色の背景と 18 ポイントのフォント サイズに設定します。

#my-id {
  background-color: blue;
  font-size: 18pt;
}

HTML コードでは、このスタイルを On the

<div>
  <p>Hello, this is a paragraph</p>
</div>

4. 概要

CSS スタイル シートを HTML に追加すると、ページの外観とスタイルを簡単に制御できます。および外部スタイルシートを実行します。 CSS スタイルを記述するときは、スタイルを適用する HTML 要素を指定する方法である CSS セレクターを理解する必要があります。これらのテクニックを組み合わせることで、美しく管理しやすいページを作成できます。

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