关于怎么引入CSS至HTML文档,前面在HTML基础教程已经说过了,这里就不做介绍了,如果不了解,请点击:HTML基础教程之css层叠样式表
这里就直接进入CSS的属性定义以及作用介绍了。
在CSS中背景颜色是由background-color来定义的,实例如下:
body {background-color:#b0c4de;}body的标签选择器,代表的是整个页面,#b0c4de是颜色值,说到这里就需要介绍一下颜色值的定义了:
1、十六进制,如:#b0c4de;
2、RGB,如rgb(255,0,0);
3、颜色名称,如:"red"。
如果一个页面中很多标签定义了自己的样式,那么会覆盖处理。
在CSS背景中,使用图像作为背景是由background-image定义的。
body {background-image:url('bgdesert.jpg');}其中url('bgdesert.jpg')是图片路径以及名称。
在背景图像的使用中,你一定会遇到平铺的问题,比如说你定义的div宽度为1000px;但是图像只有100px;那么图像不够遮盖这个div背景的,那么可以设置图片在X方向重复这张图片,直至铺满。
在设置平铺的时候使用的是background-repeat属性,如果想要在x方向(水平方向)重复这张图片的话需要设置值为repeat-x。
body { background-image:url('gradient.png'); background-repeat:repeat-x; }但是请注意,这个属性需要先设置背景图片。
如果想要在y(垂直方向)重复图片的话,就设置值为repeat-y即可(PS:默认情况下是平铺的)。
如果不想图像重复平铺,可以设置值为:no-repeat.
在默认情况下,背景图片的显示会在左上角开始,但是我们可以通过background-position属性来改变位置。
body { background-image:url('img_tree.png'); background-repeat:no-repeat; background-position:right top; }这样背景图片就是从右上角的位置开始渲染。
在CSS背景属性中还有一个属性,叫做background-attachment,这个属性很有意思,是用来设置背景图片是否随浏览器滚动条滚动的,默认情况下,背景图片是会随着滚动条滚动的,就是当一个页面很长时,滚动浏览器滚动条图片会逐渐被拉出屏幕,如果想要图片固定在浏览器上,不随页面的滚动而移动的话,可以设置这个属性为:fixed。
body { background-image:url('smiley.gif'); background-repeat:no-repeat; background-attachment:fixed; }
在上述代码中,我们讲述了背景颜色以及背景图片等属性,我们都是使用的是background-X来定义的,其实还有一种综合的方式,如下:
body {background:#ffffff url('img_tree.png') no-repeat right top;}就是把所有的属性糅合到了一个属性里面定义。但是需要注意的是,使用background来同一定义的话,是有顺序限制的。
当使用简写属性时,属性值的顺序为::
1、background-color
2、background-image
3、background-repeat
4、background-attachment
5、background-position
以上属性无需全部使用,你可以按照页面的实际需要使用.
学习不止眼前的教程与笔记还需实践与创新——小伙伴们块动手试试吧~Javascript2020-04-06
python2019-10-25
HTML2020-01-19
HTML2020-03-31
HTML2020-03-24
python2019-11-10