《网页制作与开发教程 教学课件 ppt 作者 张强 高建华 温谦 第11章 CSS网页样式设》由会员分享，可在线阅读，更多相关《网页制作与开发教程 教学课件 ppt 作者 张强 高建华 温谦 第11章 CSS网页样式设（98页珍藏版）》请在金锄头文库上搜索。
1、第11章 CSS网页样式设置,通过前章节的学习，读者对HTML语言已经比较熟悉，它是所有网页制作的基础。但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。,在本书第2章中，简单介绍了CSS的用法，但是CSS在网页设计中的作用远远不止于此。本章从CSS的概念出发，介绍CSS语言的特点，以及如何在网页中引入CSS，然后重点介绍CSS的基本语法。,11.1 CSS的概念,CSS（Cascading Style Sheet），中文译为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标签性语言。CSS是1996年由W3C审
2、核通过并推荐使用的。简单地说，CSS的引入就是为了使HTML能够更好地适应页面的美工设计。,它以HTML为基础，提供了丰富的格式化功能，如字体、颜色、背景、整体排版等，并且网页设计者可以针对各种可视化浏览器设置不同的样式风格，包括显示器、打印机、打字机、投影仪、PDA等。CSS的引入随即引发了网页设计的一个又一个新高潮，使用CSS设计的优秀页面层出不穷。,11.1.1 传统HTML的缺点,在CSS还没有被引入页面设计前，传统的HTML要实现页面美工上的设计是十分麻烦的 。,其在IE中的显示效果如图11-1所示，四个标题都变成了蓝色黑体字。这时如果希望将这四个标题改成红色，在这种传统的HTML中
3、就需要对每个标题的“”标签都进行修改，倘若是整个网站，这样的工作量是没法让设计者接受的。,其实传统HTML的缺陷远不止例11-1中所反映的这一个方面，相比CSS为基础的页面设计方法，其所体现出的劣势主要有以下几点。,图11-1 给标题添加效果,（1）维护困难。 （2）标签不足。 （3）网页过胖。 （4）定位困难。,11.1.2 CSS的引入,对于上例，倘若引入CSS对其中的标签进行控制，那么情况将完全不同，如例11-2所示。,图11-2 CSS的引入,网上的浏览器各式各样，绝大多数浏览器对CSS都有很好的支持，因此设计者往往不用担心其设计的CSS文件不被用户所支持。但目前的问题在于，各个浏览器
4、之间对CSS很多细节的处理上存在差异，设计者在一种浏览器上设计的CSS效果，在其他浏览器上的结果很可能大相径庭。,就目前主流的两大浏览器IE与Firefox而言，在某些细节的处理上就不尽相同。IE本身在IE6与发布不久的IE7之间，对相同页面的浏览效果都存在一些差异。例如例11-3所示的代码。,【例11-3】 浏览器的差异 页面标题 ,list-style-type:none; display:inline; , 浏览器区别1 浏览器区别2 ,这是一段很简单的HTML代码，并用CSS对标签进行了样式上的控制。而这段代码在IE7中的效果与Firefox中的显示效果就存在差别，如图11-3所示。,
5、图11-3 IE与Firefox的效果区别,11.2 使用CSS控制页面,在对CSS有了大致的了解后，便希望使用CSS对页面进行全方位的控制。本节主要介绍如何使用CSS控制页面，以及其控制页面的各种方法，包括行内样式、内嵌式、链接式、导入式等。,11.2.1 行内样式,行内样式是所有样式方法中最为直接的一种，它直接对HTML的标签使用style属性，然后将CSS代码直接写在其中，如例11-4所示。,【例11-4】 行内样式 标题在这里 ,CSS内容1 正文CSS2 CSS正文内容3 ,图11-4 行内样式,11.2.2 内嵌式,内嵌式样式表就是将CSS写在与之间，并且用和标签进行声明，如例11
6、-5所示。,【例11-5】 内嵌样式 页面标题 ,color:#FF00FF; text-decoration:underline; font-weight:bold; font-size:25px; , 紫色、粗体、下划线、25px的效果1 紫色、粗体、下划线、25px的效果2 紫色、粗体、下划线、25px的效果3 ,其显示效果如图11-5所示，从上例中可以看到，所有CSS的代码部分被集中在了同一个区域，方便了后期的维护，页面本身也大大瘦身。但如果是一个网站，拥有很多的页面，对于不同页面上的“”标签都希望采用同样的风格时，内嵌式的方法就显得略微麻烦，维护成本也不低。因此内嵌式仅适用于对特殊的
7、页面设置单独的样式风格。,图11-5 内嵌式,11.2.3 链接式,链接式样式表是使用频率最高，也是最为实用的方法。它将HTML页面本身与CSS样式风格分离为两个或者多个文件，实现了页面框架HTML代码与美工CSS代码的完全分离，使得前期制作和后期维护都十分方便，网站后台的技术人员与美工设计者也可以很好地分工合作。,而且对于同一个CSS文件，可以链接到多个HTML文件中，乃至整个网站的所有页面中，使得网站整体风格统一、协调，并且后期维护的工作量也大大减少。链接式CSS样式表的使用如例11-6所示。,【例11-6】 链接式样式 首先创建HTML文件，如下所示： 标题在这里 ,第一行标题1 紫红色
8、、斜体、下划线、28px的效果1 第二行标题2 紫红色、斜体、下划线、28px的效果2 ,然后创建文件1.css，如下所示： h2 color:#0000FF; p color:#FF33CC; text-decoration:underline; font-style:italic; font-size:28px; ,从上例中可以看到，文件1.css将所有的CSS代码从HTML文件中分离出来，然后在“”和“”标签之间加上“”语句，将CSS文件链接到页面中，对其中的标签进行样式控制。其显示效果如图11-6所示。,图11-6 链接式,11.2.4 导入式,导入式样式表与上节提到的链接式样式表功能
9、上基本相同，只是语法和运作方式上略有区别。采用import方式导入的样式表，在HTML文件初始化时，会被导入到HTML文件内，作为其一部分，类似内嵌式的效果。而链接式样式表则是在HTML的标签需要格式时才以链接的方式引入。,在HTML文件中导入样式表，常用的有如下几种“import”语法，可以任意选择一种放在“”与“”标签之间：,（1）import url(sheet1.css); （2）import url(“sheet1.css“); （3）import url(sheet1.css); （4）import sheet1.css; （5）import “sheet1.css“; （6）im
10、port sheet1.css;,例如例11-7所示的代码。 【例11-7】 导入式样式 标题在这里 ,import url(1.css); 第一行标题1 紫红色、斜体、下划线、28px的效果1,第二行标题2 紫红色、斜体、下划线、28px的效果2 第三行标题3 紫红色、斜体、下划线、28px的效果3 ,例11-7在例11-6的基础上进行了修改，加入了“”的标题，前两行的效果与例11-6中显示完全相同，如图11-7所示。可以看到新引入的“”标签由于没有设置样式，因此保持着默认的风格。,图11-7 导入样式,11.3 复合CSS选择器,选择器（Selector）是CSS中的一个很重要的概念，所有
11、HTML语言中的标签都是通过不同的CSS选择器进行控制的。用户只需要通过选择器对不同的HTML标签进行控制，并赋予各种样式声明，即可实现各种效果。,在本书的前面章节中，介绍了3种基本的选择器标签选择器、类别选择器和ID选择器。这里在介绍两种更为深入的选择器使用方法。,11.3.1 选择器集体声明,在声明各种CSS选择器时，如果某些选择器的样式风格是完全相同的，或者部分相同，这时便可以利用集体声明的方法，将风格相同的CSS选择器同时声明，如例11-8所示。,图11-8 集体声明,11.3.2 选择器的嵌套,在CSS选择器中，还可以通过嵌套的方式，对特殊位置的HTML标签进行声明，例如当“”与“”
12、之间包含“”标签时，就可以使用嵌套选择器进行相应的控制。具体如例11-9所示。,图11-9 嵌套选择器,11.4 CSS设置文字效果,文字是网页设计中永远不可缺少的元素，各种各样的文字效果遍布在整个Internet中。本节从基础的文字设置出发，讲解CSS设置各种文字效果的方法，然后再进一步讲解段落排版的相关内容。,11.4.1 CSS文字样式,使用过Word编辑文档的用户一定对会注意到，Word可以对文字的字体、大小、颜色等各种属性进行设置。CSS同样可以对HTML页面中的文字进行全方位的设置。本节主要介绍CSS设置文字各种属性的基本方法。,在CSS中文字都是通过“font”的相关属性进行设置
13、的，例如通过“font-family”属性来控制文字的字体，通过“font-size”属性来控制文字的大小，通过“color”属性设置文字的颜色，通过“font-weight”属性来设置文字的粗细，通过设置“font-style”属性来控制文字是否为斜体，通过设置文字的text-decoration属性来实现文字的下划线、顶划线、删除线等,图11-10 CSS设置文字效果,11.4.2 CSS文字段落,段落是由一个个文字组合而成的，同样是网页中最重要的组成部分之一，因此前面提到的文字属性，对于段落同样适用。但CSS针对段落也提供了很多样式属性，本节将通过实例进行详细介绍。,在使用Word编辑文
14、档时，可以很轻松的设置行间距，在CSS中通过“line-height”属性同样可以轻松地实现行距的设置。在CSS中“line-height”的值表示的是两行文字之间基线的距离。如果给文字加上下划线，那么下划线的位置就是文字的基线。,“line-height”的值跟CSS中所有设定具体数值的属性一样，可以设定为相对数值，也可以设定为绝对数值。在静态页面中，文字大小固定时常常使用绝对数值，达到统一的效果。而对于论坛、博客这些可以由用户自定义字体大小的页面，通常设定为相对数值，可以随着用户自定义的字体大小而改变相应的行距。CSS对于文字段落的设置示例如例11-11所示。,图11-11 行间距示例,1
15、1.4.3 课堂练习：制作首字下沉效果,许多报刊、杂志的文章第一个字都很大，并且向下浮动，这种首字放大的效果，同样可以方便地应用在网页中。在CSS中首字下沉的效果是通过对第一个字进行单独设置样式风格来实现的，具体方法如例11-12所示。,图11-12 首字放大,11.5 CSS设置图片效果,在五彩缤纷的网络世界中，各种各样的图片组成了丰富多彩的页面，能够让人们更直观地感受网页所要传达给用户的信息。本节介绍CSS设置图片风格样式的方法，包括图片的边框、图文混排等，并通过实例综合文字、图片的各种运用。,11.5.1 图片的边框,图11-13 HTML控制边框,图11-14 语法提示,图11-15
16、设置各种图片边框,11.5.2 课堂练习：制作图文混排网页,Word中文字与图片有很多排版方式，在网页中同样可以实现各种图文混排的效果。,图11-16 文字环绕,11.6 CSS设置页面背景,11.6.1 背景颜色 在CSS中页面的背景颜色就是简单的通过设置“body”标签的“background-color”属性来实现的，这在前些章节的例子中也反复用到。 “background-color”属性不仅仅可以设置页面的背景颜色，几乎所有HTML元素的背景色都可以通过它来设定。因此很多网页都通过设定不同HTML元素的各种背景色来实现分块的目的，如例11-15所示。,图11-17 背景色给页面分块,11.6.2 背景图片,图11-18 背景图案,图11-19 背景图片,11.6.3 背景图的重复,在例11-14和例11-15中，背景图案都是直接重复地铺满整个页面，这种方式并不适用于大多数页面。在CSS中可以通过“background-repeat”属性设置图片的重复方式，包括水平重复、竖直重复以及不重复等。以竖直方向重复为例，如例11-17所示。
