Web ページの本文に CSS スタイルを設定するにはどうすればよいですか?

Web デザインでは、CSS を使用して Web ページのスタイルを制御することがよくあります。その中でも、Web ページの本文のスタイルの設定は非常に基本的な操作であり、この操作は Web ページの背景色やフォント スタイルなどの外観属性を変更するだけでなく、Web のレイアウトや組版にも影響を与えることができます。ページ。この記事では、Web ページの本文に CSS スタイルを設定する方法を詳しく説明します。

1. Web ページの本文とは何ですか?

Web ページの本文に CSS スタイルを設定する方法を紹介する前に、まず Web ページの本文とは何かを理解する必要があります。平たく言えば、本文は Web ページの主要なコンテンツであり、目に見えるすべての Web ページ要素のルート コンテナーです。 HTML ページでは、body タグは head タグの後ろ、html タグ内に配置されます。

2. Web ページの本文に CSS スタイルを設定するにはどうすればよいですか?

本文の CSS スタイルを設定することで、Web ページの外観とレイアウトのプロパティのほとんどを制御できます。以下、プロパティの設定方法を一つ一つ紹介していきます。

1. 背景色の設定

CSS で本文の背景色を設定するには、background-color 属性を色の値に設定する必要があります。たとえば、背景色をグレーに設定するには、次のコードを使用できます。

body {
  background-color: gray;
}

ここでの「body」は、Web ページの body 要素と、curly 内のコードを参照していることがわかります。括弧はスタイルの定義です。このうち、background-color は背景色の属性を指し、gray は色の値を表します。

2. 背景画像の設定

Web ページの背景画像を設定したい場合は、background-image 属性を使用できます。たとえば、Web ページの背景画像を「background.jpg」という名前の画像に設定できます。

body {
  background-image: url('background.jpg');
}

ご覧のとおり、ここでの背景画像は URL アドレスを使用して指定する必要があります。この例では、一重引用符を使用して画像アドレスをラップします。

3. フォントの設定

Web ページにフォントを設定するには、font-family 属性を使用する必要があります。このプロパティでは、Web ページのデフォルトのフォントとして 1 つ以上のフォント名を指定できます。たとえば、次のコードは、Web ページのデフォルト フォントを Arial に設定します。

body {
  font-family: SimSun, Arial, sans-serif;
}

ここでは、カンマを使用して複数のフォント名を区切ります。ブラウザは、リストされている順序でこれらのフォントをロードしようとします。最初のフォントのロードに失敗した場合、ブラウザは 2 番目のフォントの使用を試みます。

4. フォント サイズの設定

Web ページのフォント サイズを変更する場合は、font-size 属性を使用できます。ここでは、絶対ピクセル値を設定することも、より抽象的な相対サイズを使用することもできます。たとえば、次のコードは、Web ページのフォント サイズを 16 ピクセルに設定します。

body {
  font-size: 16px;
}

あるいは、次のコードを使用して、フォント サイズを相対サイズに設定することもできます。

body {
  font-size: medium;
}

この例では、フォント サイズを相対サイズ「中」に設定します。このようにして、ほとんどの人の読書習慣に適したフォント サイズを確保できます。

5. 行の高さの設定

Web ページ内のテキストの行間の間隔を変更する場合は、line-height 属性を使用できます。このプロパティでは、絶対ピクセル値を設定することも、フォント サイズから計算された相対サイズを使用することもできます。たとえば、次のコードは行の高さをフォント サイズの 1.6 倍に設定します。

body {
  line-height: 1.6;
}

6. テキストの色の設定

Web ページのテキストの色を変更するには、次のようにします。 color 属性を使用できます。このプロパティは、入力パラメーターとして色の値を受け入れます。たとえば、次のコードは Web ページのテキストの色を黒に設定します。

body {
  color: black;
}

7. テキストの配置を変更する

Web ページのテキストを配置する必要がある場合左、中央、右に揃えるには、text-align 属性を使用できます。たとえば、次のコードは、Web ページ内のテキストを水平方向の中央に配置できます。

body {
  text-align: center;
}

8. Set page padding

Web ページの周囲にスペースが必要な場合は、コンテンツがビューに適合する ブラウザ ウィンドウ間に距離を置くには、padding 属性を使用できます。たとえば、次のコードは Web ページの周囲に 100 ピクセルの空白を残します。

body {
  padding: 100px;
}

3. 概要

Web ページの本文の CSS スタイルを設定することで、次のことを制御できます。 Web ページの外観とレイアウト。その中で、Web ページの背景色、フォント スタイル、テキストの色、配置、塗りつぶしなどの属性を変更できます。これらの基本的な CSS スタイル設定を通じて、Web ページに独自の外観を作成し、ユーザーのアクセス エクスペリエンスを向上させることができます。

以上がWeb ページの本文に CSS スタイルを設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。