HTML と CSS は、最新の Web デザインの 2 つのコア テクノロジです。HTML は Web ページのコンテンツの作成に使用され、CSS はスタイルとレイアウトに使用されます。この記事では、CSS を HTML ページに適用して、Web サイトに美しくパーソナライズされたタッチを追加できるようにする方法を学びます。
HTML ページで CSS を使用する最初のステップは、CSS ファイルを HTML ファイルに導入することです。これは、HTML ヘッダーにリンク要素を追加することで実現できます。この要素は、次のように CSS ファイルの場所を指す必要があります。
CSS ファイルが適切に取り込まれたら、 HTML ページでは、HTML 要素への CSS スタイルの適用を開始できます。さまざまなセレクターを使用して要素を選択し、それらにスタイル属性を適用できます。次に例を示します。
h1 { color: red; text-align: center; font-size: 36px; }
この CSS スタイル セレクターは、ページ上のすべての h1 要素に適用されます。要素のテキストの色を赤に変更し、テキストを中央に配置し、要素のフォント サイズを変更します。
ある要素のスタイル宣言を別の要素のスタイル宣言内にネストすることで、任意の要素にスタイルを追加できます。たとえば、段落内のすべての強調されたテキストを斜体にして、その色を青に変更できます。
p em { font-style: italic; color: blue; }
さあ、すべて
这段文字会变成蓝色的。 以上がHTMLでのCSSの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。タグ内にあります。
タグは斜体で表示され、青色になります。
カテゴリ セレクター
カテゴリ セレクターは、同じタイプの複数の要素のスタイルを設定するために使用できるセレクターです。クラス名付きの CSS スタイル セレクターを使用すると、カテゴリ内のすべての要素に同じスタイルを適用できます。カテゴリ セレクターの例を次に示します。
このスタイル セレクターは、「blue-text」というクラスを定義します。このタイプのスタイルを適用するには、このクラスを必要な要素に付与するだけです: .blue-text { color: blue; }
ログイン後にコピー
注: class 属性を使用すると、同じページ内に複数の異なるクラスを設定し、それらを異なるクラスに割り当てることができます。必要に応じて HTML 要素。複数のクラスを組み合わせて、より複雑なスタイルを設定することもできるので、上手に活用してください。
ログイン後にコピー
その他のセレクター
CSS には、ID セレクター、子孫セレクター、子セレクター、疑似クラス セレクターなど、他にも多くのセレクターがあります。これらのセレクターは、特定の要素をスタイルする必要がある場合に役立ちます。以下は他のセレクターの紹介です:
ID セレクター: ID を定義することで、ページ上の特定の要素のスタイルを設定できます。
CSS ボックス モデル
CSS ボックス モデルは、Web ページ要素をレイアウトおよび配置するための基本概念です。このモデルは、コンテンツ領域、パディング、境界線、マージンなどのさまざまな部分を含む HTML 要素の周囲のボックスを記述します。 各ボックスのサイズと位置を設定することで、HTML 要素のレイアウトを正確に制御できます。 CSS ボックス モデルのいくつかの共通プロパティを次に示します。
box-sizing: 要素のボックス モデルを設定します。
これらのプロパティを使用して、Web ページ上のさまざまな要素を配置および調整し、目的のスタイルとレイアウトを実現できます。 概要この記事では、CSS を使用して HTML 要素のスタイルを設定する方法を紹介しました。 CSS ファイルを作成し、それを HTML ページにリンクすることで、CSS を使用できます。その後、セレクターを使用して、各要素に異なるスタイルを適用できます。 CSS ボックス モデルを使用して、ページ上の要素をレイアウトおよび制御することもできます。これらのスキルをマスターすると、美しくパーソナライズされた Web サイト デザインで自慢できる Web ページを作成できるようになります。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
