Home > Web Front-end > CSS Tutorial > css set background color

css set background color

藏色散人
Release: 2022-12-30 11:12:00
Original
31299 people have browsed it

How to set the background color in css: first create an HTML sample file; then add the style tag in the head; then define a p tag and h1 tag in the body; and finally set the corresponding settings through the background-color attribute background color.

The operating environment of this article: Acer S40-51, Windows10 Home Chinese Edition, HTML5&&CSS3&&HBuilderX.3.0.5

Recommended: "css video tutorial"

How to set background color in css

In CSS, you can use the background-color attribute to set the background color.

The background-color property sets the background color of an element. The background of an element is the total size of the element, including padding and borders (but not margins).

The background-color property sets a solid color for the element. This color fills the element's content, padding, and border areas, extending to the outer bounds of the element's border (but not the margins). If the border has transparent parts (such as a dotted border), the background color will show through these transparent parts.

The values ​​that the background-color attribute can be set to:

color_name: Specifies that the color value is the background color of the color name (such as red).

hex_number: Specifies the background color whose color value is a hexadecimal value (such as #ff0000).

rgb_number: Specifies that the color value is the background color of the rgb code (such as rgb(255,0,0)).

transparent: Default. The background color is transparent.

Although in most cases, there is no need to use transparent. However, if you don't want an element to have a background color, and you don't want the user's browser color settings to affect your design, then setting the transparent value is still necessary.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            background-color: pink;
        }

        h1 {
            background-color: #17c4ff;
        }

        p {
            background-color: rgb(255, 218, 51);
        }
    </style>
</head>
<body>
<h1>这是标题 1</h1>
<p>这是一个段落。</p>
</body>
</html>
Copy after login

Rendering:

css set background color

The above is the detailed content of css set background color. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
css
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template