《CSS网络大讲堂》主要介绍CSS的概念、类型、文本样式、边框样式、块样式、位置样式、列表和滤镜，同时介绍了关于CSS的高级应用，例如CSS和XML的整合以及和JavaScript的结合。《CSS网络大讲堂》为实例配备了视频教学文件，读者可以通过视频文件更加直观地学习CSS网页设计知识。
　　《CSS网络大讲堂》具有知识全面、实例精彩、指导性强的特点，力求以全面的知识及丰富的实例来指导读者透彻地学习CSS各个方面的知识。

    第5章  背 景 属 性
网页除了向大家展示信息，还应具有可观赏的美观性。漂亮美观的网页离不开背景的修饰以及丰富的色彩。也就是说，一个漂亮的网站不仅需要页面布局合理，还应该注意色彩视觉和颜色的搭配。这样才能够使网页更加精美，具有表现力，使网站更具有吸引力。
功能强大的CSS可以为页面增加更多的色彩以及背景选择，还可以统一页面元素的色彩配置，使网站具有相近的风格。在本章中就为大家介绍这些背景属性。

5.1
背景颜色不显示
5.1.1  问题描述
我在使用div+CSS设计网页时，遇到过这样的问题。假设代码如下所示：

    

在div1中包含了div2和div3，如果div1不设定height属性，它的背景颜色就显示不出来，这是为什么？而且如果div2与div3不设置靠左或靠右，直接写在里面，背景就会显示出来，求原因，谢谢！
5.1.2  解决办法
那是因为前面的样式没有清除的原因，你只要加一行代码就可以了。在使用float属性的时候，为了不影响下面的样式，记得要使用clear属性的both属性值清除。代码如下所示：

    
5.1.3  知识扩展——background-color属性
background-color属性用于设置指定对象的背景色。其语法格式如下所示：

     background-color : transparent | color

该属性默认值为transparent（透明），和color属性一样，可以接受任何有效的颜色值。如下段代码所示：

     p { background-color: silver }
     div { background-color: rgb(223,71,177) }
     .td1{ background-color: #98AB6F }
     .td2{ background-color: transparent; }

在HTML中应用以上样式规则，并在浏览器中查看运行效果，如图5-1所示。

图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 }
    
    

在以上代码中，需要说明图片路径问题。在URL中指定要引用的图片，该路径既可以是绝对路径，也可以是相对路径，还可以使用链接方式直接引用网络上的图片。在浏览器中打开该页面，运行结果如图5-3所示。

图5-3  背景图片
背景图片的显示与对象的尺寸有关。例如，在上述代码中，设置div的长度为400px，宽度为600px。如果该图片的尺寸小于对象尺寸，则在显示时以空白或重复图片来填充。如果该图片尺寸大于对象尺寸，则多余的部分在显示时将被截掉。
任何页面元素都可以应用背景图片，例如，下面例子中，将在段落标记中使用背景图片，代码如下所示：

    

以上代码中，在p标签中引用名为http_imgload25的图片，然后再浏览器中打开该页面，运行结果如图5-4所示。

图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-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"); }
……

第0章 绪论
0.1 CSS简介
0.2 CSS的历史
0.3 CSS的特点
0.4 CSS的优势
0.5 使用CSS
0.6 常用的开发工具
0.7 记事本
0.8 Front Page
0.9 Dreamweaver
0.10 CSS跨浏览器支持技术
0.11 给特定浏览器提供不同的样式
0.12 解决空白边叠加问题
0.13 选择合适的DOCTYPE
0.14 CSSBug
0.15 校验CSSBug
0.16 Bug捕捉基本步骤
0.17 CSS建议

第一篇 CSS基础篇
第1章 CSS快速入门
1.1 使用HTML定义页面样式时的一些问题
1.1.1 问题描述
1.1.2 解决办法
1.1.3 知识扩展-CSS的语法
1.1.4 网络课堂
1.2 CSS的几种使用方式是什么
1.2.1 问题描述
1.2.2 解决办法
1.2.3 知识扩展——内嵌样式表
1.2.4 知识扩展——内部样式表
1.2.5 知识扩展——链入样式表
1.2.6 知识扩展——导入样式表
1.2.7 触类旁通
1.2.8 网络课堂
1.3 CSS代码中的注释问题
1.3.1 问题描述
1.3.2 解决办法
1.3.3 知识扩展——使用注释
1.3.4 网络课堂
1.4 CSS中的单位有哪些
1.4.1 问题描述
1.4.2 解决办法
1.4.3 知识扩展——长度单位
1.4.4 知识扩展——百分比单位
1.4.5 知识扩展——颜色单位
1.4.6 知识扩展——url
1.4.7 网络课堂
1.5 各种CSS用法的执行顺序是什么
1.5.1 问题描述
1.5.2 解决办法
1.5.3 知识扩展-CSS的后来居上原则
1.5.4 知识扩展-CSS的继承性
1.5.5 知识扩展-CSS的选择符优先级
1.5.6 知识扩展-：important声明强制优先
1.5.7 网络课堂
第2章 CSS选择符
2.1 统一设置同一标签样式
2.1.1 问题描述
2.1.2 解决办法
2.1.3 知识扩展——什么是CSS选择符
2.1.4 知识扩展——类型选择符以及属性选择符
2.1.5 网络课堂
2.2 CSS中的ID选择符怎么用
2.2.1 问题描述
2.2.2 解决办法
2.2.3 知识扩展-ID选择符以及包含选择符
2.2.4 网络课堂
2.3 CSS中的类选择符
2.3.1 问题描述
2.3.2 解决办法
2.3.3 知识扩展——类选择符
2.3.4 网络课堂
2.4 CSS中的伪类能应用在按钮中吗
2.4.1 问题描述
2.4.2 解决办法
2.4.3 知识扩展-CSS中的伪类
2.4.4 网络课堂
2.5 设置首字下沉问题
2.5.1 问题描述
2.5.2 解决办法
2.5.3 知识扩展-CSS中的伪对象
2.5.4 网络课堂
2.6 不同标签的相同样式
2.6.1 问题描述
2.6.2 解决办法
2.6.3 知识扩展——选择符分组
2.6.4 网络课堂
2.7 选择符组的优先级问题
2.7.1 问题描述
2.7.2 解决办法
2.7.3 知识扩展——选择符组的优先级
2.7.4 网络课堂
第3章 伪类和伪元素
3.1 超链接伪类的用法
3.1.1 问题描述
3.1.2 解决办法
3.1.3 知识扩展——超链接伪类的用法
3.1.4 网络课堂
3.2 IE是否支持：focus伪类
3.2.1 问题描述
3.2.2 解决办法
3.2.3 知识扩展——：focus伪类的用法
3.2.4 网络课堂
3.3 ：first-child伪类的用法
3.3.1 问题描述
3.3.2 解决办法
3.3.3 知识扩展-:first-child伪类的用法
3.3.4 网络课堂
3.4 可适用于@page规则的伪类
3.4.1 问题描述
3.4.2 解决办法
3.4.3 知识扩展——可适用于@page规则的伪类
3.4.4 网络课堂
3.5 ：lang伪类的用法
3.5.1 问题描述
3.5.2 解决办法
3.5.3 知识扩展——:lang伪类的用法
3.5.4 网络课堂
3.6 伪元素：first-letter和：first-line的用法
3.6.1 问题描述
3.6.2 解决办法
3.6.3 知识扩展——伪元素：first-letter和：first-line的用法
3.6.4 网络课堂
3.7 如何解决Firefox检测不到div高度问题
3.7.1 问题描述
3.7.2 解决办法
……

第二篇 CSS中级篇
第三篇 CSS高级篇
第四篇 实例应用篇