CSS网页样式设置.ppt

第11章CSS网页样式设置 通过前章节的学习，读者对HTML语言已经比较熟悉，它是所有网页制作的基础。但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。 在本书第2章中，简单介绍了CSS的用法，但是CSS在网页设计中的作用远远不止于此。本章从CSS的概念出发，介绍CSS语言的特点，以及如何在网页中引入CSS，然后重点介绍CSS的基本语法。 11.1 CSS的概念 CSS（Cascading Style Sheet），中文译为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标签性语言。CSS是1996年由W3C审核通过并推荐使用的。简单地说，CSS的引入就是为了使HTML能够更好地适应页面的美工设计。 它以HTML为基础，提供了丰富的格式化功能，如字体、颜色、背景、整体排版等，并且网页设计者可以针对各种可视化浏览器设置不同的样式风格，包括显示器、打印机、打字机、投影仪、PDA等。CSS的引入随即引发了网页设计的一个又一个新高潮，使用CSS设计的优秀页面层出不穷。 11.1.1 传统HTML的缺点 在CSS还没有被引入页面设计前，传统的HTML要实现页面美工上的设计是十分麻烦的 。 其在IE中的显示效果如图11-1所示，四个标题都变成了蓝色黑体字。这时如果希望将这四个标题改成红色，在这种传统的HTML中就需要对每个标题的“font”标签都进行修改，倘若是整个网站，这样的工作量是没法让设计者接受的。 其实传统HTML的缺陷远不止例11-1中所反映的这一个方面，相比CSS为基础的页面设计方法，其所体现出的劣势主要有以下几点。 （1）维护困难。 （2）标签不足。 （3）网页过胖。 （4）定位困难。 11.1.2 CSS的引入 对于上例，倘若引入CSS对其中的h2标签进行控制，那么情况将完全不同，如例11-2所示。 网上的浏览器各式各样，绝大多数浏览器对CSS都有很好的支持，因此设计者往往不用担心其设计的CSS文件不被用户所支持。但目前的问题在于，各个浏览器之间对CSS很多细节的处理上存在差异，设计者在一种浏览器上设计的CSS效果，在其他浏览器上的结果很可能大相径庭。 就目前主流的两大浏览器IE与Firefox而言，在某些细节的处理上就不尽相同。IE本身在IE6与发布不久的IE7之间，对相同页面的浏览效果都存在一些差异。例如例11-3所示的代码。 【例11-3】 浏览器的差异 html head title页面标题/title style !-- ul{ list-style-type:none; display:inline; } -- /style /head body ul li浏览器区别1/li li浏览器区别2/li /ul /body /html 这是一段很简单的HTML代码，并用CSS对ul标签进行了样式上的控制。而这段代码在IE7中的效果与Firefox中的显示效果就存在差别，如图11-3所示。 11.2 使用CSS控制页面 在对CSS有了大致的了解后，便希望使用CSS对页面进行全方位的控制。本节主要介绍如何使用CSS控制页面，以及其控制页面的各种方法，包括行内样式、内嵌式、链接式、导入式等。 11.2.1 行内样式 行内样式是所有样式方法中最为直接的一种，它直接对HTML的标签使用style属性，然后将CSS代码直接写在其中，如例11-4所示。 【例11-4】 行内样式 html head title标题在这里/title /head body p style=color:#0000FF; font-size:18px; font-weight:bold;CSS内容1/p p style=color:#000000; text-decoration:underline; font-style:italic;正文CSS2/p p style=color:#FF33CC; font-size:28px; font-weight:bold;CSS正文内容3/p /body /html 11.2.2 内嵌式 内嵌式样式表就是将CSS写在head与/head之间，并且用style和/style标签进行声明，如例11-5所示。 【例11-5】