网页制作与开发教程 张强 高建华 温谦 第11章 CSS网页样式设

《网页制作与开发教程 张强 高建华 温谦 第11章 CSS网页样式设》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第11章CSS网页样式设置使用CSS控制页面11.2CSS设置文字效果11.4复合CSS选择器11.3CSS的概念11.1CSS设置图片效果11.5CSS设置页面背景11.6使用CSS设置超链接效果11.7使用CSS设置项目列表11.8实践与练习：CSS制作实用菜单11.9小结11.8通过前章节的学习，读者对HTML语言已经比较熟悉，它是所有网页制作的基础。但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。在本书第2章中，简单介绍了CSS的用法，但是CSS在网页

2、设计中的作用远远不止于此。本章从CSS的概念出发，介绍CSS语言的特点，以及如何在网页中引入CSS，然后重点介绍CSS的基本语法。11.1CSS的概念CSS（CascadingStyleSheet），中文译为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标签性语言。CSS是1996年由W3C审核通过并推荐使用的。简单地说，CSS的引入就是为了使HTML能够更好地适应页面的美工设计。它以HTML为基础，提供了丰富的格式化功能，如字体、颜色、背景、整体排版等，并且网页设计者可以针对各种可视化浏览器设置不同的样

3、式风格，包括显示器、打印机、打字机、投影仪、PDA等。CSS的引入随即引发了网页设计的一个又一个新高潮，使用CSS设计的优秀页面层出不穷。11.1.1传统HTML的缺点在CSS还没有被引入页面设计前，传统的HTML要实现页面美工上的设计是十分麻烦的。其在IE中的显示效果如图11-1所示，四个标题都变成了蓝色黑体字。这时如果希望将这四个标题改成红色，在这种传统的HTML中就需要对每个标题的“”标签都进行修改，倘若是整个网站，这样的工作量是没法让设计者接受的。其实传统HTML的缺陷远不止例11-1中所反映的这一个方面

4、，相比CSS为基础的页面设计方法，其所体现出的劣势主要有以下几点。图11-1给标题添加效果（1）维护困难。（2）标签不足。（3）网页过胖。（4）定位困难。11.1.2CSS的引入对于上例，倘若引入CSS对其中的

标签进行控制，那么情况将完全不同，如例11-2所示。图11-2CSS的引入网上的浏览器各式各样，绝大多数浏览器对CSS都有很好的支持，因此设计者往往不用担心其设计的CSS文件不被用户所支持。但目前的问题在于，各个浏览器之间对CSS很多细节的处理上存在差异，设计者在一种浏览器上设计的CSS效果，在其他浏览器上的结

5、果很可能大相径庭。就目前主流的两大浏览器IE与Firefox而言，在某些细节的处理上就不尽相同。IE本身在IE6与发布不久的IE7之间，对相同页面的浏览效果都存在一些差异。例如例11-3所示的代码。【例11-3】浏览器的差异

• 浏览器区别1
• 浏览器区别2

<

6、/html>这是一段很简单的HTML代码，并用CSS对

标签进行了样式上的控制。而这段代码在IE7中的效果与Firefox中的显示效果就存在差别，如图11-3所示。图11-3IE与Firefox的效果区别11.2使用CSS控制页面在对CSS有了大致的了解后，便希望使用CSS对页面进行全方位的控制。本节主要介绍如何使用CSS控制页面，以及其控制页面的各种方法，包括行内样式、内嵌式、链接式、导入式等。11.2.1行内样式行内样式是所有样式方法中最为直接的一种，它直接对HTML的标签使用style属性，然后将CSS代码直接写

7、在其中，如例11-4所示。【例11-4】行内样式CSS内容1

正文CSS2

8、bold;">CSS正文内容3

图11-4行内样式11.2.2内嵌式内嵌式样式表就是将CSS写在与之间，并且用标签进行声明，如例11-5所示。【例11-5】内嵌样式