Home >Web Front-end >CSS Tutorial >How to set page background color with CSS
How to set page background color with CSS
- 醉折花枝作酒筹Original
- 2021-04-20 09:51:295998browse
In CSS, you can use the "background-color" attribute to set the page background color, the syntax is "background-color: color value". The background-color property sets the background color of the element, which is the total size of the element, including padding and borders (but not margins).
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
Set the background color of the page
CSS is implemented by setting the background-color attribute of the body tag. The background color mainly highlights the theme of the page and is consistent with the color of the foreground text. Cooperate. The specific setting method is the same as the setting of text color value. Hexadecimal, RGB components, or English words of color can be used.
<span style="font-size:24px;"><html>
<head>
<title>
背景颜色
</title>
<style>
<!--
body{
background-color:#5b8a00;
margin:0px;
padding:0px;
color:#c4f762;
}
p{
font-size:15px;
padding-left:10px;
padding-top:8px;
line-height:120%;
}
span{
font-size:80px;
font-family:黑体;
float:left;
padding-right:5px;
padding-left:10px;
padding-top:8px;
}
-->
</style>
</head>
<body>
<img src="
http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg
"style="float:right;">
<span>春</span>
<p>季，地球的北半球开始倾向太阳，收到越来越多的太阳光直射，因而气温开始升高。随着冰雪消融，河流水位上涨。春季植物开始发芽生长，许多鲜花开放。冬眠的动物苏醒，许多以卵过冬的动物孵化，鸟类开始迁移，离开越冬地向繁衍地进发。许多动物在这段时间里发情，因此中国也将春季称为“万物复苏”的季节。春季气温和生物界的变化对人的心理和生理也有影响。</p>
<p>对农民来说，春季是播种许多农作物的季节。在春季，地球的北半球开始倾向太阳，收到越来越多的太阳光直射，因而气温开始升高。随着冰雪消融，河流水位上涨。春季植物开始发芽生长，许多鲜花开放。冬眠的动物苏醒，许多以卵过冬的动物孵化，鸟类开始迁移，离开越冬地向繁衍地进发。许多动物在这段时间里发情，因此中国也将春季称为“万物复苏”的季节。春季气温和生物界的变化对人的心理和生理也有影响。</p>
</body>
</html></span>The code is as above. You can see that the background color is dark green and the text color is bright green. Together with the picture and the text content itself, the resurrection of all things in spring is displayed.
Use background color to divide the page into blocks
The Background-color attribute can not only set the background color of the page, but also the background color of almost all HTML elements. set up. Therefore, many web pages achieve the effect of blocking by setting different background colors.
<span style="font-size:24px;"><html>
<head>
<title>
利用背景颜色分块
</title>
<style>
<!--
body{
padding:0px;
margin:0px;
background-color:#ffebe5;
}
.topbanner{
background-color:#fbc9ba;
}
.leftbanner{
width:22%;height:330px;
vertical-align:top;
background-color:#6d1700;
color:#FFFFFF;
text-align:left;
padding-left:40px;
font-size:14px;
}
.mainpart{
text-align:center;
}
-->
</style>
</head>
<body>
<table cellpadding="0"cellspacing="1" width="100%" border="0">
<tr>
<td colspan="2"class="topbanner"><img src="
http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg
"border="0"></td>
</tr>
<tr>
<td class="leftbanner">
<br><br>首页<br><br>分类讨论
<br><br>谈天说地<br><br>精华区
<br><br>我的信箱<br><br>休闲娱乐
<br><br>立即注册<br><br>离开本站
</td>
<td class="mainpart">正文内容……</td>
</tr>
</body>
</html></span>The code is as above. The top Banner, the left navigation bar and the middle text part use 3 different background colors respectively to achieve the purpose of page segmentation. This segmentation method is used in the web page. Often used in production.
Here, the Banner picture at the top can be a picture with a color gradient from left to right. The color transitions from the own picture to the background color of the page, which will appear very natural. This effect can be seen in Photoshop It is easy to implement and is also a common method for web page production.
Recommended learning: css video tutorial
The above is the detailed content of How to set page background color with CSS. For more information, please follow other related articles on the PHP Chinese website!