CSS如何设置页面背景色


本文摘自PHP中文网,作者醉折花枝作酒筹,侵删。

在css中,可以使用“background-color”属性设置页面背景色,语法“background-color:颜色值”。background-color属性设置元素的背景颜色,元素背景是元素的总大小,包括填充和边界(但不包括边距)。

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

设置页面的背景色

CSS通过设置body标记的background-color属性来实现,背景色主要突出页面的主题,跟前景的文字颜色相配合。具体的设定方法和文字颜色值的设定一样,可以采用十六进制、RGB各分量,或者颜色的英文单词等。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

<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>

代码如上,可以看到背景颜色为深绿色,文字的颜色为亮绿色,再加上图片以及文字内容本身,将春天万物复苏显示了出来。

用背景色给页面分块

阅读剩余部分

相关阅读 >>

浅谈css grid比bootstrap更适合创建布局的原因

推荐一个chrome devtools实用小插件:css overview panel

怎么在head区域引入css

css怎么实现禁止拖动

css外链式基本写法是什么

什么是web安全色?

css怎么设置溢出隐藏

css哪个样式不推荐使用

css中清除浮动有哪几种方式

10个令人惊叹的非典型css套件

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...