CSSでスタイルを設定する

CSS (Cascading Style Sheets) は、Web ドキュメントの外観を記述するために使用されるテクノロジです。 CSS は、フォント、色、間隔、背景など、HTML ドキュメントのさまざまな要素にスタイルを適用できます。これにより、開発者は HTML 構造を変更せずにページの外観とレイアウトを変更できます。この記事では、CSS でスタイルを設定する方法を説明します。

1. セレクター

CSS では、スタイルを適用する要素を選択するためにセレクターが使用されます。次のようないくつかの異なるセレクター タイプがあります。

• タグ セレクター (例: p、h1、div、span)
• クラス セレクター (例: .red、.blue)
• ID セレクター (#header、#footer など)
• 属性セレクター ([type="text"] など)
• 疑似クラス セレクター (hover 、: など) focus)

スタイルを設定するには、1 つ以上の要素を選択する必要があります。これは 1 つ以上のセレクターを使用して実行できます。たとえば、クラス「red」の要素を選択するには、次の CSS コードを使用できます。

.red {
    color: red;
}

これにより、クラス「red」のすべての要素のテキストの色が赤に設定されます。

2. スタイル プロパティ

各セレクターは 1 つ以上のスタイル プロパティでスタイル設定されます。一般的なスタイル プロパティをいくつか示します。

• color: テキストの色を設定します。
• font-size: フォント サイズを設定します。
• font-family: フォント タイプを設定します。
• background-color: 背景色を設定します
• margin: 要素の外側のマージンを設定します
• padding: 要素の内側のマージンを設定します
• border: 要素の境界線を設定します
• width: 要素の幅を設定します
• height: 要素の高さを設定します
• text-align: テキストの配置を設定します

スタイル属性と属性値は通常、コロンで区切られ、属性はセミコロンで区切られます。例:

p {
    font-size: 16px;
    color: #333;
    font-family: sans-serif;
}

これにより、すべての段落のフォント サイズが 16 ピクセル、色がダーク グレー (#333)、フォントがサンセリフに設定されます。

3. カスケード

CSS におけるカスケードとは、スタイルの階層効果を指します。複数のスタイル ルールが同じ要素に適用される場合、ブラウザは特定のルールを使用してどのスタイルを適用するかを決定します。

スタイルは、要素のタグ、クラス、および ID 属性に適用できます。要素に複数のスタイル ルールが適用されている場合、CSS は次のように特定の階層を使用して、どのルールが最も優先されるかを決定します。

• ID style はスタイル (#id )
を指定します。
• クラススタイル(.class)で指定したスタイル
• 要素/タグで指定したスタイル(div、p、h1など)
• 一般的なスタイル(*)
• ブラウザのデフォルト スタイル

これは、いわゆる「スタイルのカスケード順序」です。まず、ID に基づいてスタイルが適用され、次にクラスと要素のスタイルが、クラスと要素のスタイルが表示される順序で適用されます。スタイルシート。ユニバーサル スタイルは、すべての要素に適用されるスタイルを指定します。ブラウザのデフォルト スタイルは、ブラウザがデフォルトで要素に適用するスタイルを指します。

4. ボックス モデル

CSS のボックス モデルは、HTML 要素のレイアウトを記述します。要素のボックス モデルは、コンテンツ領域、パディング、境界線、およびマージンの 4 つの部分で構成されます。

• コンテンツ領域: 要素内のテキストと画像。
• パディング: コンテンツ領域と要素の境界線の間のスペース。
• 境界線: 要素を囲む線。
• Margin: 要素の境界線と他の要素の間のスペース。

CSS の枠線のスタイル (実線、破線、点線など) や枠線の色を変更できます。

CSS のパディングとマージンは、ピクセル (px)、パーセンテージ (%)、およびその他の単位を使用して指定できます。

#結論

この記事では、CSS でのスタイル設定の基本について説明します。スタイルを設定するには、セレクターで要素を選択し、スタイル プロパティを使用し、必要に応じてカスケードを使用してスタイルの順序を決定します。また、CSS の要素のレイアウトと外観の基礎となる CSS ボックス モデルについても学びました。これらの基本をマスターすると、CSS を使用して美しい Web ページ レイアウトを作成できるようになります。

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