--------------------------------------------------------------------------------------
background:背景颜色 url(背景图片路径及名字) 重复方式 对齐方式或精确位置
--------------------------------------------------------------------------------------
1.背景色:#123456、rgb(128,230,30)、red、blue,省略不写则为transparent(无背景色透明);
2.url():里面写 背景图片路径及名字,如:images/test.gif;可省略直接写为:
background:red(指定红色为背景色,没有图片背景)
3.重复方式:
no-repeat(任何方向都不重复)
repeat(x、y横竖方向都重复)
repeat-x(横向重复)
repeat-y(竖着重复);
不带此以上参数直接写作:
background:url(bg.jpg)
则上句效果等于下句:
background:url(bg.jpg) repeat
4.对齐方式:
用left、top、right、bottom、center定义背景图在元素中的显示位置;
一旦定义了url()背景图,该图片默认为在区块的左、上位置开始显示,即:
background:url(bg.jpg)等于 background:url(bg.jpg) left top
例子:
background:url(bg.jpg) no-repeat center bottom
上一行的意思是:背景图不重复,在元素横向的中间及竖向的底部开始显示
还有直接写数字方法精确定位背景图位置:
background:url(bg.jpg) no-repeat 10px 10px
意思是定一个背景图,不重复,从元素的0坐标(左上角)开始,横竖方向各位移10像素后开始显示
更多例子:
--------------------------------------------------------------------------------
background:url(bg.jpg)
什么参数都没跟,这个背景图会从左上角开始往横竖两个方向不断重复平铺显示
background:url(bg.jpg) no-repeat
加了no-repeat,意思是这张背景图不往任何方向重复重复,位置在左上角,等于:
background:url(bg.jpg) no-repeat left top
background:url(bg.jpg) no-repeat right bottom
背景图不重复,出现位置在区块的右边、底部
背景默认是出现在左边、顶部:
background:url(bg.jpg) no-repeat相当于:background:url(bg.jpg) no-repeat left top
background:url(bg.jpg) repeat-y
背景图y方向重复。即竖着重复,横向不重复
background:url(bg.jpg) repeat-x
跟上面相反,x横向重复,竖向不重复
background:url(bg.jpg) repeat
后面没跟-x或-y,就是横竖都重复,等同于默认情况:background:url(bg.jpg)
background:url(bg.jpg) repeat-y right
竖向重复,横向不重复,靠右对齐
明白了么:no-repeat right 不等于 repeat-y right
一个是背景图不重复,从右上角开始显示对齐
一个是背景图竖着重复,从右上角开始显示对齐
恭喜你,你已经开始进入学习css相关知识的领域了。那个“.”是十分重要的,它是css最基础的部分:
选择器
选择器主要有3种:标签选择器、id选择器、类选择器
element、id、class
你说的“.”就是类选择器啦~
无论是哪种选择器,都是表示选择某一类别的html标签,为它们加上样式
.style1意思就是为所有 带有 class="style1" 的 html 标签加上相应的样式
要是去掉了“.”,那就变成 为所有 <style1>标签加上相应的样式(当然一般情况不会用这种自定义的标签)
区别很大哦~
CSS标准里,不仅重新定义了HTML原有的样式,如文字的大小、颜色等;更加入了重叠文字、区块变化及任意位置放置等多页新属性。通过CSS可以使用更丰富、更灵活的样式,更简单设计出更美观的网页。CSS是用来扩展HTML的,而不是用来替代HTML的。也就是CSS离不开HTML,他只是一项辅助工具。
到这里可以了解完整的CSS技术内容与发展现状:http://www.w3.org/style/
CSS的特点:
除了可扩展HTML的样式设定外,CSS还提供了多项新特点,让网页的设计与维护更有效率:
1、减少图形文件的使用
很多网页为求设计效果,而大量使用图形,以致网页的下载速度变得很慢。CSS提供了很多的文字样式设定,且再加上IE%内建的滤镜特效,因此可轻松取代原来图形才能表现的视觉效果。这样的设计方式以仅让修改网页内容变得更方便,也大大提高下载速度。
2、集中管理样式信息
CSS的基本概念在于可将网页要展示的内容与样式设定分开,也就是将网页的外观设定信息从网页内容独立出来,并集中管理。这样,当要改变网页外观时,只需更改样式设定的部分,HTML文件本身并不需要更改
3、共享样式设定
网页的样式设定和内容分离的好处,除了可集中管理外,如果进一步将CSS样式信息存成独立的文件,还可让多个网页文件共同使用它这样,可省却在每一个网页文件中重复设定的麻烦。
4、将样式分类使用
相对于多份HTML文件可套用同一个CSS样式文件,也可以在一份HTML网页文件上套用多个CSS样式文件。