免费资源
享你所想

从零开始自学入门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
知乎专栏:进入专栏
酷安专栏:进入专栏

赞(0) 打赏
未经允许不得转载:无梦博客 » 从零开始自学入门CSS(3):css背景
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

无梦博客

币池塘关于本站

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏