3. 共通の属性をマスターする

CSS には多くの属性がありますが、より一般的に使用される属性もあり、それらを十分にマスターする必要があります。以下に一般的な属性をいくつか示します。

1. 背景属性

背景属性は、色、画像、再現性など、要素の背景を制御するために使用されます。例:

body {
  background-color: #f1f1f1;
  background-image: url('background.jpg');
  background-repeat: no-repeat;
}

このスタイルは、background.jpg という名前の背景画像をページの右下隅に配置します。

2. フォント プロパティ

フォント プロパティは、テキストのフォント、フォント サイズ、色などを制御するために使用されます。例:

h1 {
  font-family: Arial;
  font-size: 24px;
  color: #333333;
}

このスタイルは、すべての

タイトル要素のフォントを Arial、フォント サイズを 24px、色を #333333 に設定します。

3. Border 属性

border 属性は、要素の境界線を制御するために使用されます。例:

div {
  border: 1px solid #e5e5e5;
  border-radius: 10px;
}

ログイン後にコピー

このスタイルは、

要素の境界線を幅 1 ピクセル、色を #e5e5e5、境界線の角の丸い境界線を 10 ピクセルに設定します。

4. サイズ属性

サイズ属性は、幅、高さ、外側の間隔、内側の間隔などを含む HTML 要素のサイズを制御するために使用されます。例:

img {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
  padding: 5px;
}

ログイン後にコピー

このスタイルでは、すべての画像の幅が 100%、高さが自動的に調整され、外側の下マージンが 10 ピクセル、内側マージンが 5 ピクセルに設定されます。

4. スタイル継承を使用する

CSS でスタイル継承を使用すると、コードの重複が減り、コードの保守性が向上します。例:

body {
  color: #333333;
  font-size: 16px;
}

h1 {
  font-size: 24px;
  font-weight: bold;
}

ログイン後にコピー

このスタイルは、すべてのテキストの色を #333333 に、フォント サイズを 16 ピクセルに定義します。

title 要素は同じ色を継承しますが、フォント サイズと太さは異なります。

5. 複合スタイルを使用する

CSS では、複数の属性値を組み合わせて複合スタイルを作成できます。これにより、コードの量が減り、コードがより簡潔になります。例:

border: 1px solid #e5e5e5;

ログイン後にコピー

このスタイルは、境界線の幅が 1px、境界線のスタイルが実線、境界線の色が #e5e5e5 という 3 つの属性値で構成される複合スタイルを定義します。

6. CSS プリプロセッサを使用する

CSS プリプロセッサは、CSS コードをより高度な CSS 言語にコンパイルするツールです。これらは変数、関数、ネストなどを含む CSS の機能を拡張し、CSS の作成をより便利かつ高速にします。現在、より一般的な CSS プリプロセッサには、Sass、Less、Stylus などが含まれます。

7. 概要

上記は、CSS を適切に記述するための基本的なポイントです。基本的な構文、セレクター、共通属性、スタイル継承、複合スタイルをマスターすると、簡潔で柔軟で保守が容易な CSS コードを作成できるようになります。

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