HTMLでのCSSの使い方-フロントエンドQ&A-php.cn

HTMLでのCSSの使い方

WBOY

リリース： 2023-05-14 21:25:08

オリジナル

945 人が閲覧しました

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

CSS ファイルの導入

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

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

ログイン後にコピー

CSS を HTML 要素に適用する

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

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

ログイン後にコピー

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

ネストされたスタイル

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

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

ログイン後にコピー

さあ、すべて  タグ内にあります。 タグは斜体で表示され、青色になります。
カテゴリセレクター
カテゴリセレクターは、同じタイプの複数の要素のスタイルを設定するために使用できるセレクターです。クラス名付きの CSS スタイルセレクターを使用すると、カテゴリ内のすべての要素に同じスタイルを適用できます。カテゴリセレクターの例を次に示します。 
.blue-text { color: blue; }
ログイン後にコピー
このスタイルセレクターは、「blue-text」というクラスを定義します。このタイプのスタイルを適用するには、このクラスを必要な要素に付与するだけです: 
这段文字会变成蓝色的。
ログイン後にコピー
注: 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 サイトの他の関連記事を参照してください。