CSS网络大讲堂

第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("http://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的从业人员。
　　除了封面署名人员之外，参与本书编写的人员还有胡家宏、李乃文、孙岩、马海军、张仕禹、夏小军、赵振江、李振山、李文采、吴越胜、李海庆、何永国、李海峰、陶丽、吴俊海、安征、张巍屹、崔群法、王咏梅、康显丽、辛爱军、牛小平、贾栓稳、王立新、苏静、赵元庆、郭磊、徐铭、李大庆、王蕾、张勇、郝安林等。在编写过程中难免会有漏洞，欢迎读者通过清华大学出版社与我们联系，帮助我们改正提高。