
下載亞米應用
意見反饋

第5章 背 景 属 性
网页除了向大家展示信息,还应具有可观赏的美观性。漂亮美观的网页离不开背景的修饰以及丰富的色彩。也就是说,一个漂亮的网站不仅需要页面布局合理,还应该注意色彩视觉和颜色的搭配。这样才能够使网页更加精美,具有表现力,使网站更具有吸引力。
功能强大的CSS可以为页面增加更多的色彩以及背景选择,还可以统一页面元素的色彩配置,使网站具有相近的风格。在本章中就为大家介绍这些背景属性。
5.1
背景颜色不显示
5.1.1 问题描述
我在使用div+CSS设计网页时,遇到过这样的问题。假设代码如下所示:
图5-1 不同对象应用背景属性
如果在body标签中定义了背景色,则该背景色将应用于整个页面中,如下面代码所示:
body{background-color: #002779 }
使用以上代码,将背景色#002779应用于body标签中,效果如图5-2所示。
图5-2 登录页面
5.1.4 知识扩展——layer-background-color属性
layer-background-color属性用于设置对象整个区域的背景颜色,其语法格式如下所示:
layer-background-color : transparent | color
该属性默认值为transparent(透明),取值方式和background-color属性一样。layer-background- color属性是NS4+的专有属性。例如下段代码所示:
div { layer-background-color: transparent; }
5.2
如何设置背景图片
5.2.1 问题描述
做网站时必须有图片,尤其是背景图片。可是关于图片路径问题一直是个头疼的问题,例如下段代码。使用url指定了一张背景图片的路径,表示从本地获得该背景图片,可是总显示不出来该背景图片,这是为什么呢?代码如下所示:
background-image:url("file:///F:\LVZUOYIN.NET\WebSite1\image\夏天.jpg");
5.2.2 解决办法
如果该背景图片是从本地获取的,那么绝对路径的书写方法如下所示:
background-image:url("F:\LVZUOYIN.NET\WebSite1\image\夏天.jpg")
相对路径的属性方法如下所示:
background-image:url("../../image/夏天.jpg");
如果该图片是从服务器端获取的,书写方式如下所示:
background-image: url("https://yourPath/images/bg.gif");
5.2.3 知识扩展——background-image属性
background-image属性用于设置对象的背景图片,其语法格式如下所示:
background-image : none | url ( url )
url表示指向背景图片的相对或绝对路径。如果同时设置了背景颜色和背景图片时,背景图片将覆盖到背景颜色之上。
例如在下面的例子中,div中定义添加背景图片,这样在该div中将会应用到该图片,部分代码如下所示:
.div1{ background-image: url(http_imgload18.jpg); width:600px; height:400px }
月落乌啼霜满天,
江枫渔火对愁眠。
姑苏城外寒山寺,
夜半钟声到客船。
图5-3 背景图片
背景图片的显示与对象的尺寸有关。例如,在上述代码中,设置div的长度为400px,宽度为600px。如果该图片的尺寸小于对象尺寸,则在显示时以空白或重复图片来填充。如果该图片尺寸大于对象尺寸,则多余的部分在显示时将被截掉。
任何页面元素都可以应用背景图片,例如,下面例子中,将在段落标记中使用背景图片,代码如下所示:
月落乌啼霜满天,
江枫渔火对愁眠。
姑苏城外寒山寺,
夜半钟声到客船。
图5-4 在段落中使用背景图片
例如,下面例子的CSS样式表中定义关于某博客的背景样式,具体代码如下所示:
#contentHeader {
margin: 15px auto;
width: 710px;
height: 182px;
background-image: url(header.gif) ; /*设置背景图片*/
background-repeat:no-repeat; /*背景图片不平铺*/
border: 1px solid #44434c; /*边框样式*/
position: relative;
}
在CSS中,规定了该博客背景div的宽度、高度、背景图片以及边框样式,在HTML中应用该样式,代码如下所示:
我的博客:边缘地带
图5-5 博客样式
5.2.4 知识扩展——layer-background-image属性
layer-background-image属性用于设置对象整个区域内的背景图片,其语法格式如下所示:
layer-background-image : none | url (url)
layer-background-image属性默认值为none,url表示要引用的背景图片的相对路径或绝对路径,该属性为NS4+专有属性。代码如下所示:
code {
position: absolute; top: 100px;
left: 300px;
width: 200px;
border: thin solid black;
background-image: url("comet.jpg");
layer-background-image: url("bb_comet.jpg"); }
……
前 言
CSS是级联样式表(Cascading Style Sheet)的简称,通常又称为“风格样式表(Style Sheet)”。CSS目前最新的版本为CSS 3,能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言,CSS能够对网页中对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象盒模型的能力,并能够进行初步交互设计,是目前基于文本展示的最优秀的表现设计语言。
本书内容
本书主要介绍了CSS的概念、类型、文本样式、边框样式、块样式、位置样式、列表和滤镜,同时还介绍了关于CSS的一些高级应用,例如CSS和XML的整合以及和JavaScript的结合。本书对于初学者而言是一本很好的入门教程,对于资深的网页开发人员来说,也可以使技能得到提升。
本书共分为4篇,分别是CSS基础篇、CSS中级篇、CSS高级篇、实例应用篇。各篇的主要内容如下:
第一篇:CSS基础篇(第1~3章)。本篇主要介绍了CSS的概念、CSS文件的导入方法、CSS中的注释、CSS中的单位,还介绍了CSS的选择符以及CSS中的伪类和伪元素。
第二篇:CSS中级篇(第4~8章)。本篇着重介绍了CSS的文本属性、背景属性、边框属性、块属性和位置属性。
第三篇:CSS高级篇(第9~14章)。本篇主要介绍了CSS的列表属性、滚动条属性、改善页面中表格的样式和改善页面中表单的样式,还介绍了关于滤镜以及鼠标指针样式和CSS与XML的整合。
第四篇:实例应用篇(第15、16章)。本篇主要介绍CSS和JavaScript结合的相关实例,还通过一个完整的案例综合介绍了CSS的应用。
本书特色
本书引用大量来自一线论坛的问题来进行讲解,力求通过读者实际操作时的问题方法,使读者更容易地掌握CSS的操作。本书难度适中,内容由浅入深,实用性强,覆盖面广,条理清晰。
· 结构独特
每个知识点都按照“问题描述→解决方法→知识扩展→触类旁通→网络课堂”的模式进行讲解,非常符合科学的学习思维,很容易掌握。
· 形式新颖
用准确的语言总结概念、用直观的图示演示过程、用详细的注释解释代码、用形象的比喻帮助记忆。
· 内容丰富
涵盖了使用CSS设计网页时的开发工具、CSS基础性知识、CSS的高级应用、CSS与XML以及和JavaScript的整合等多方面的技术。
· 随书光盘
本书为实例配备了视频教学文件,读者可以通过视频文件更加直观地学习CSS的使用 知识。
· 网站技术支持
读者在学习或者工作的过程中,如果遇到实际问题,可以直接登录与我们取得联系,作者会在第一时间内给予帮助。
· 贴心的提示
为了便于读者阅读,全书还穿插着一些技巧、提示等小贴士,体例约定如下:
提示:通常是一些贴心的提醒,让读者加深印象或提供建议,或者解决问题的方法。
注意:提出学习过程中需要特别注意的一些知识点和内容,或者相关信息。
技巧:通过简短的文字,指出知识点在应用时的一些小窍门。
读者对象
本书具有知识全面、实例精彩、指导性强的特点,力求以全面的知识性及丰富的实例来指导读者透彻地学习CSS各方面的知识。本书可以作为CSS的入门书籍,也可以帮助中级读者提高技能。
本书适合以下人员阅读学习:
· CSS初学者以及在校学生。
· 网页开发人员或应用程序开发人员。
· 各大中专院校的相关授课老师。
· 其他使用CSS的从业人员。
除了封面署名人员之外,参与本书编写的人员还有胡家宏、李乃文、孙岩、马海军、张仕禹、夏小军、赵振江、李振山、李文采、吴越胜、李海庆、何永国、李海峰、陶丽、吴俊海、安征、张巍屹、崔群法、王咏梅、康显丽、辛爱军、牛小平、贾栓稳、王立新、苏静、赵元庆、郭磊、徐铭、李大庆、王蕾、张勇、郝安林等。在编写过程中难免会有漏洞,欢迎读者通过清华大学出版社与我们联系,帮助我们改正提高。
| 品牌 | 京東圖書 |
| 品牌屬地 | 中國 |