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

本文由 躺赚乐 作者:躺赚乐 发表,其版权均为 躺赚乐 所有,文章内容系作者个人观点,不代表 躺赚乐 对观点赞同或支持。如需转载,请注明文章来源。
躺赚乐

发表评论