How to set CSS style for the body of a web page?

In web design, we often use CSS to control the style of web pages. Among them, setting styles for the body of a web page is a very basic operation. This operation can not only change the appearance attributes such as the background color and font style of the web page, but also affect the layout and typesetting of the web page. This article will give you an in-depth understanding of how to set CSS styles for the body of a web page.

1. What is the body of a web page?

Before introducing how to set CSS styles for the body of a web page, you first need to understand what the body of a web page is. In layman's terms, the body is the main content of the web page and the root container of all web page elements we see. On an HTML page, the body tag is located after the head tag and within the html tag.

2. How to set CSS style for the body of the web page?

By setting the CSS style of the body, we can control most of the appearance and layout properties of the web page. Below, we introduce how to set different properties one by one.

1. Set the background color

In CSS, in order to set the background color for the body, we need to set the background-color attribute to a color value. For example, to set the background color to gray, you can use the following code:

body {
  background-color: gray;
}

You can find that the "body" here refers to the body element in the web page, and the code within the curly brackets is the definition of the style. Among them, background-color refers to the background color attribute, and gray is the color value.

2. Set the background image

If you want to set the background image for the web page, we can use the background-image attribute. For example, we can set the background image of the web page to a picture named "background.jpg":

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

As you can see, the background image here needs to be specified using a URL address. In this example, we use single quotes to wrap the image address.

3. Set font

In order to set the font in the web page, we need to use the font-family attribute. In this property, we can specify one or more font names as the default font for the web page. For example, the following code sets the default font for a web page to Arial:

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

Here, we use commas to separate multiple font names. The browser will try to load these fonts in the order we list them. If the first font fails to load, the browser will try to use the second font.

4. Set font size

If you want to change the size of the font in the web page, you can use the font-size attribute. Here, we can set an absolute pixel value, or use a more abstract relative size. For example, the following code sets the font size in the web page to 16 pixels:

body {
  font-size: 16px;
}

Alternatively, you can also use the following code to set the font size to a relative size:

body {
  font-size: medium;
}

In this example, we Set the font size to a relative size of "medium". In this way, we can ensure that the font size is suitable for most people's reading habits.

5. Set line height

If you want to change the spacing between lines of text in the web page, you can use the line-height attribute. In this property we can set an absolute pixel value or use a relative size calculated from the font size. For example, the following code sets the line height to 1.6 times the font size:

body {
  line-height: 1.6;
}

6. Set text color

To change the color of text in a web page, you can use the color attribute. This property accepts a color value as an input parameter. For example, the following code sets the text color in the web page to black:

body {
  color: black;
}

7. Change text alignment

If you need to align the text in the web page to the left, center, or right To align, you can use the text-align attribute. For example, the following code can center the text in a web page horizontally:

body {
  text-align: center;
}

8. Set page padding

If you need some space around the web page so that the content fits in with the view To create some distance between the browser window, you can use the padding attribute. For example, the following code will leave 100 pixels of white space around the web page:

body {
  padding: 100px;
}

3. Summary

By setting the CSS style of the body of the web page, we can control the appearance and layout of the web page. Among them, we can change the background color, font style, text color, alignment, filling and other attributes of the web page. Through these basic CSS style settings, we can create a unique appearance for the web page and improve the user's access experience.

The above is the detailed content of How to set CSS style for the body of a web page?. For more information, please follow other related articles on the PHP Chinese website!