CSSの使い方

CSS は Web デザインにおいて非常に重要なテクノロジーであり、Web ページのスタイルやレイアウトを変更して、Web ページをより美しく、読みやすくすることができます。この記事では、初心者が CSS の使い方を理解できるように、CSS の基本構文とよく使用されるスタイル プロパティを紹介します。

1. CSS の基本文法

CSS を使用する前に、いくつかの基本的な文法規則を理解する必要があります。 CSS の構文構造は、以下に示すように、セレクター、属性、値の 3 つの部分で構成されます。

选择器 {
    属性1: 值1;
    属性2: 值2;
    属性3: 值3;
}

このうち、セレクターはスタイルを設定する HTML 要素を指定するために使用され、属性はスタイルを設定する HTML 要素を記述するために使用されます。変更する特性、値は変更する属性値です。各属性とその値を区切るにはコロン (:) を使用し、各属性とその値はセミコロン (;) で区切ります。最後の属性の末尾にセミコロンを追加する必要はありません。

たとえば、HTML のすべての段落 (p) のテキストの色を赤に変更するには、次の CSS スタイルを使用できます:

p {
    color: red;
}

2. CSS スタイル属性

CSS には、Web ページの視覚スタイルを変更するために使用できるプロパティが多数あります。以下は、一般的に使用されるスタイル プロパティの一部です。

1. フォント属性

• font-size: フォント サイズ。単位はピクセル (px)、パーセンテージ (%)、または em などです。
• font-family: フォント名。一般的な英語フォントまたは中国語フォントを使用できます。

例:

p {
    font-size: 16px;
    font-family: "Microsoft Yahei", Arial, sans-serif;
}

2. テキスト属性

• color: フォントの色。
• text-align: テキストの配置。左、右、中央、両端揃えなどを指定できます。

例:

p {
    color: #333;
    text-align: center;
}

3. 背景属性

• background-color: 背景色。
• background-image: 背景画像。
• background-repeat: 背景画像を繰り返すかどうか、repeat、repeat-x、repeat-y、no-repeat などにすることができます。
• background-position: 背景画像の位置。左上、中央中央、右下などです。

例:

body {
    background-color: #fff;
    background-image: url(bg.jpg);
    background-repeat: no-repeat;
    background-position: center center;
}

4. 境界線属性

##border-width: 境界線の幅。
• border-style: 実線、破線、点線、二重などの境界線スタイル。
• border-color: 境界線の色。

例:

div {
    border-width: 1px;
    border-style: solid;
    border-color: #ccc;
}

ボックス モデル属性

##width: 要素の幅。

• height: 要素の高さ。
• パディング: パディング。
• マージン: マージン。
• 例:

div {
    width: 200px;
    height: 150px;
    padding: 10px;
    margin: 20px;
}

3. CSS セレクター

CSS セレクターは、HTML 要素を照合するために使用されるパターンであり、特定の要素のスタイルを設定するために使用できます。 。以下に、一般的に使用されるセレクターをいくつか示します。

要素セレクター

1. 要素セレクターは、p、div、h1 などの HTML 内の任意の要素と一致します。

例:

p {
    color: #333;
}

クラス セレクター

2. クラス セレクターはピリオド (.) で始まり、HTML スタイルの複数の要素に指定できます。 。

例:

.highlight {
    background-color: yellow;
}

ID セレクター

3. ID セレクターはポンド記号 (#) で始まり、一意の HTML 要素と一致するために使用されます。

例:

#logo {
    width: 100px;
    height: 80px;
}

子孫セレクター

4. 子孫セレクターは、スペース ( ) で区切られた他の HTML 要素内にネストされた要素と一致します。

例:

#nav li {
    display: inline-block;
}

隣接兄弟セレクター

5. 隣接兄弟セレクターは、前に指定した要素の直後の兄弟要素と一致します。プラス記号を使用します。 ( ) で示します。

例:

h1 + p {
    font-size: 14px;
}

4. CSS スタイルの継承

CSS スタイルは、継承を通じて子要素に渡すことができます。親要素が特定のスタイルを設定すると、子要素が独自のスタイルを設定しない限り、その子要素は自動的にそのスタイルを継承します。

例:

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

この例では、すべての HTML 要素がフォント サイズと色を自動的に継承します。

結論

この記事の紹介により、初心者でも CSS を使用して Web ページのスタイルやレイアウトを変更できるようになります。利用可能な CSS プロパティとセレクターは多数ありますが、基本的な構文と共通のスタイル プロパティを理解することは基本です。継続的な学習と実践を通じて、CSS の使用に習熟し、より複雑な Web デザインを作成できるようになります。

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