从零开始自学入门CSS(3)：css背景

css开篇到现在，我们已经知道css的格式很简单，只有两部分：选择器和声明。

关于选择器，我们在上一篇文章中已经详细的介绍过了，也已经介绍完了，接下来的文章中都是关于声明的。

声明的作用是改变html文档的样式，以键值对的形式包含在{}中，且每个声明用;隔开。

整个html文档的样式都需要声明来一一改变，其中包含的样式声明何其多，所以接下来的文章都是属于样式声明的。

好了，废话不多说，今天就讲讲html文档及各个元素的背景如何改变！

背景颜色 background-color

背景，background，在网页中背景主要被用于改变元素的背景颜色和背景图片。

颜色，color。

背景+颜色就是background-color，使用它就可以改变任意元素的背景颜色。

如：

样式表

div {background-color: #FF9400;}
h1 {background-color: red;}
p {background-color: blue;}

html代码

<div>
<h1>给我来个红色</h1>
<h2>原生态</h2>
<p>绿油油的帽子</p>
<h3>不改变</3>
</div>

代码效果展示：

可以看到，整个<div>标签背景颜色是橘黄色，然后我们将其包含的<h1>和<p>标签背景颜色设置为红色和黄色。而<h2>和<h3>标签我们并未设置，自动继承了div标签的颜色，也是橘黄色。

背景图片 background-image

背景图片和背景颜色一样，都是为了改变背景，只不过背景颜色是改变背景的颜色，无外乎赤橙黄绿青蓝紫七种颜色的变种。而背景图片则是将背景更改为自定义图片，可以将背景更改为自己拍的照片或网上下载的图片。逼格满满的！

div {background-image:url("图片地址");}

这里继续使用上面的代码，只不过将div标签的背景更改为图片，当然，我这里只为显示如何使用，并没有考虑美观。

好了，关于背景就讲到这里，更多关于背景样式的知识可以看进阶书籍、速查手册。

<<=========================>>
<<=========================>>
同步更新：
个人网站：无梦博客
微信公众号：zxcvb492
知乎专栏：进入专栏
酷安专栏：进入专栏