第3章+开启CSS的大门.ppt

1、第3章 开启CSS的大门,从本章开始，我们将正式进入CSS的大门，系统地学习这方面的知识。对于学习一种新的技能来说，最自然的方法就是从最简单的开始学起。我们这章就是这样，简单但是非常重要。下面就让我们出发，一步一步走进CSS的殿堂。,3.1 背景让HTML页面更漂亮,我们在前面的章节中已经对HTML的样子有了大概的了解，知道了它是如何发布出来，而我们又是如何去访问它从而得到所需要的信息的过程。还是用同样的类比，HTML就好比我们每天要看的报纸或者手机订阅的新闻短信，如果总是白底黑字，岂不是非常单调，提不起我们阅读的兴趣？如果页面能够更丰富多彩一些，肯定更吸引人，从而能将信息更有效地发送到每一个

2、需要它的人的眼中。一句话，为了吸引眼球，HTML必须更漂亮。 我们都有这样的经验，在报亭中，几乎所有的报纸都是白色的，但是有那么几种报纸，纸张是某种黄色的，一下子就能让我们从一堆报纸中看到。这就是颜色的作用之一。对于HTML网页，这样的窍门同样适用。我们的第一个任务，也就是让我们的网页背景颜色发生变化，从而在众多的网页中脱颖而出。,3.1.1 控制网页的背景,网页的背景可以是一种颜色，也可以是一张背景图片。我们首先来看控制网页的背景颜色。 【设置HTML背景为预定义颜色】 其实很简单，简单的只要几个字符就可以了。请看代码 代码 HTML增加背景颜色：background.html 网页增加背景

3、颜色 同事周末爬山 ,3.1.2 HTML的颜色表示方法,HTML语言中对于颜色不限于上面和附录中所列出的有限种类，它可以用如下的方法来表示：颜色名称：也就是我们介绍过的，red，black等等。 #RRGGBB方式：使用两位十六进制数字表示颜色中的红，绿，蓝含量。R是Red的简称，G是Green的简称，B是Blue的简称。比如我想表示红色（red），那么用这种方法就是#FF0000。F是十六进制中最大的数，表示最多的程度，0是十六进制中最小的数，表示没有。我们知道，每一种颜色都是由三元色（红色、绿色、蓝色）按照一定比例互相调和而来的，那么在红色的方面最多，而其它的两种颜色都没有，这自然就是代

4、表红色了。其他的颜色同样可以这样表示。绿色就是#00FF00，蓝色就是#0000FF。如果一种颜色不是那么红，也不是那么绿，也不是那么蓝，那么就是按照各自的比例形成色号，比如#CA2712。 RGB（rrr,ggg,bbb）：这种表示颜色的方法在网页制作中实际是比较少用的，倒是编程的时候用的多些，实际上它和第二种方法是一样的，不过是将代表每一种三原色的两位十六进制数字变成了十进制数字进行表示。为了方便起见，表3-1列出了十六进制数字和十进制数字的转换表。 RGB（rrr%,ggg%,bbb%）：这种表示颜色的方式实际上是对第三种方法的进一步变化，rrr%代表了红色占整个颜色的百分比。比如RGB

5、（50%,0,50%）则相当于RGB（128,0,128）。,3.1.3 如何获取屏幕颜色,我们在某个网页上看到一种颜色很喜欢，那么如何得到它的色号呢？我们可以用这样一款免费的软件 - 颜色采集器。 颜色采集器v1.0的安装和使用方法都很简单：运行即可。 如果我们想自己寻找一种合适的颜色，则可以通过系统的调色板或者软件来获取。下面介绍一下这两种方法： （1）用系统的调色板察看颜色的方法。 我们单击开始程序附件，选择画图程序（我们也可以通过开始运行输入mspaint直接打开画图程序）。在界面的菜单中选择颜色编辑颜色，就会看到Windows系统的颜色对话框。 （2）用Fireworks或者Phot

6、oshop等图像处理软件来察看颜色的方法。这里举Fireworks为例。这种方法只能取得当前已经用图像处理软件打开文件中某点的色号。,3.1.4 网页文件的路径,前面介绍网页背景可以是颜色，也可以是图片。那么，该如何浏览器背景图片的位置呢？,文件属性中的物理路径,3.1.5 控制页面上的文字,有关网页的背景和颜色前面已经介绍的不少了。网页由内容和格式组成，下面就来学习一下网页最重要却又最容易被忽视的一部分文字。 控制页面上的文字显示效果主要是通过控制文字的字体，大小，风格，颜色这几个方面。那么,在网页中常用的字体有哪些呢？,英文字体中的衬线 第一种没有衬线的字体Futura字体,3.1.6 给

7、文字增加更多效果,在代码3-5中，我们做到了在页面上显示一定大小，一定颜色的文字，如果只能做到这一点，那还是非常不够的。文字效果还可以更加丰富，比如： 粗体。 斜体。 添加下划线。 添加删除线。 所谓粗体，就是指文字的每一比划比标准的要粗。粗体文字主要用来表示段落的题目，章节的开始等重要内容，笔划加粗是为了吸引读者的注意力。我们如果使用过Word的话，可以看到在工具栏中有图的按钮。,Word中对文字进行加粗，倾斜和添加装饰线的工具栏,3.2 文本的排版,一个网页也类似于一张报纸，内容的排版非常重要。既然要对内容进行排列，就要需要很多处理段落文字的实际问题，比如，文字是否居中，段落之间的间隔大概

8、多少，图片和内容如何排列，等等。我们首先学习如何设置文字内容的位置。,3.2.1 文本的缩进,上小学的时候，老师教过我们写信的格式。一般来说，中文书信或者书籍等任何文档每一段的开头都是要缩进两个汉字的，这样在空间上就可以和上一段落隔开，由于每一个段落一般表达同一个思想，从而有利于读者转换一下思维，休息一下，以达到更好的阅读效果。 在HTML中也是同样。文本的缩进有几种方法： 空格法：空格法应该是最直接的方法了，那就是利用在内容中插入两个汉字长度的空格，来实现段落文本的首行缩进。空格，在HTML语言中属于特殊符号，用来组成。 CSS样式控制法：通过CSS样式控制段落首行缩进如代码所示。,3.2.

9、2 文本的对齐,在前面一节的末尾已经稍微涉及到一点文本的对齐问题，下面我们将学习利用CSS使文本居中、左对齐和右对齐的方法，正如可以在Word中可以做到的那样。 文字的对齐是通过text-align属性来设置的。 【文字的居中】 令text-align属性的值为center，就可以使应用此样式的文字居中。代码3-8是一个包含标题和内容的网页，通过内部样式表使内容文字居中，通过行内样式表使得标题居中，并且加粗。我们可以通过这个示例复习行内样式表、内部样式表的写法以及HTML标签中字体加粗的实现。,3.2.3 改变文本字符间距,有的时候，我们需要将文本内容每行或者每个字、单词之间的距离加以改变以实

10、现特殊效果。行间距相当于上下两行字符之间的垂直距离，而字间距则是相邻两个字符之间的水平距离，因此它们都可以归为一类。改变文本字符间距的方法如代码所示。,改变行间距、字间距，单词间距,3.2.4 文字的其他设置,除了前面几节在实际工作中可能经常遇到的情况之外，我们对文字样式还可以有更多的修改，比如： 对于英文文字内容来说，设置一段文字首字母的大小写。 对于英文和中文内容来说，创建引用文字。 当然，还可能遇到其他的情况，不过在读者了解了更多的CSS知识后自己不难找到解决办法。 【设置段落首字母大写】,设置更美观的段落首字母大写,3.3 关于HTML的链接,截至目前为止，我们已经了解了不少关于HTM

11、L和CSS的知识，能够写出一个简单的网页。但是，光有网页内容，彼此独立，就能构成一个网站吗？换句话说，网页和网页之间如何联系起来才能形成一个整体呢？这个问题引出了网页中最重要的一个标签，链接标签，或者叫做a标签。有了它，孤立的网页才能够组织起来，串在一起，形成形形色色的网站。,3.3.1 链接和A标签,HTML的主要功能并不在于提供单个文档，而在于它可以从文档的某一部分（包括图像），连接到另外一个文档，从而构成一个虚拟的世界。默认情况下，浏览器用蓝颜色并且加下划线来表示单击当前位置可以连接到别处。这样的链接也叫超文本链接（之所以称为“超”，是因为它不光提供了文字内容，还提供了链接信息），英文名

12、称为hyperlinks或就叫做links。 HTML网页中超文本链接标签是, 意思是anchor，中文名为锚。我们知道锚可以使船和码头相连接，A标签也可以使当前网页和其他的网页相连接。识别网页上的链接也是比较直观的，由于有的时候链接应用了样式表，不再具有蓝色的下划线，我们在绝大多数情况下依然可以通过鼠标放在链接位置时候的形状变成一只手的样子来判断，如图所示。,鼠标停留在链接上的样子,3.3.2 A标签的实例,介绍了很多文字，下面具体来看两个文件，我们的目标是把这两个文件用超级链接联系起来。,代码3-12在浏览器中的显示 单击第二个链接返回404错误,3.3.3 A标签的几种状态,有的时候，当

13、我们单击网页上某个链接会发现，链接文字能随着鼠标的动作发生一些变化，很有意思。比如，当鼠标停在链接的位置时，链接文字会加上一条下划线；当鼠标滑过链接文字时，文字会变颜色等等。实际上，这就是链接的几种状态，可以通过不同的状态显示不同的链接样式，来给用户以更加丰富的信息和体验。 用类似黑客帝国中的动作分解方法，回想整个鼠标靠近链接，单击链接和离开链接的全过程，我们能够列举出A标签的几种状态应该如下： 链接正常状态。这时鼠标并未单击它。 链接被掠过的状态。鼠标运动过程中某时刻处于链接之上，但尚未单击。 链接被单击的状态。单击鼠标左键，链接产生作用，根据链接的设置，打开目标网页。 链接单击后的状态。假

14、如目标网页在新建窗口中打开，当前链接的状态。,3.4 利用图片丰富HTML外观,本章第一节就讲到了如何给网页增加背景图片，那么是否图片只能出现在背景上呢？答案肯定是否定的，在现在这个读图时代，网页如果失去了图片，肯定是干巴巴的，没有多少人愿意浏览。本节就来介绍如何在网页中插入图片，另外，如何插入Flash动画也是内容之一。,3.4.1 在网页中插入图片,浏览器刚发明的时候并不支持图片，那时候的网页也都是文本的，直到20世纪90年代，浏览器的先驱Netscape实现了图片的显示。说一句题外话，只支持文本的古董级浏览器，比如Lynx，现在依然有人在更新和使用（主要是面向残障人士等），而Netsca

15、pe浏览器则已经由于后来竞争的激烈等原因，停止开发新版本了。,代码在浏览器中的效果,3.4.2 网页中能显示所有的图片吗？,我们知道，日常的电脑处理中离不开各种各样的文件，而文件之间的区别又是靠它们记录信息的方法，也就是文件格式来区分的。这些格式都是人为定义的，可以是组织、公司，有的最后还形成了标准。文件格式体现在我们普通人看到的外观上，就是不同文件的后缀名不同，或者它们在文件夹中显示的图标不同。而不同后缀名的文件往往需要不同的软件来打开。比如大家所熟悉的文件格式.doc或.docx，一般用Word才能打开。 图片也是一样，有很多种图像格式，比如我们用Windows自带的画笔程序保存的Bmp文

16、件，用Photoshop保存的Psd文件等。随着IT业和网络的发展，有一些图像文件格式由于自身的特点，网络环境的特点等诸多原因，渐渐得被绝大多数的人所接受，被众多厂商的浏览器所支持，成为网络世界里通用的图片文件格式,3.4.3 改进图片的显示-给图片镶边,网页中加入图片就是为了提供更多的信息，丰富页面的效果，如果都如图3-22那样，未免非常单调。本节将介绍一些CSS技巧，使得网页上的图片更吸引人，达到更好的宣传效果。 现实生活中家里摆放的照片，绘画作品外边都有一个画框，就是中国传统的水墨画，没有画框也要用卷轴等装裱起来，网页图片也是一样。,各种边框式样，通过border值指定,3.4.4 防止

17、图片被盗用的一个技巧,我们知道，在浏览网页的时候，遇到图片，可以单击右键，选择“图片另存为”就可以将图片保存到本地指定的一个文件夹中。有时候，我们可能不希望别人很轻易地就这样把辛苦制作出来的图片拷贝到别处使用，可以采取代码的方法。,防止图片被盗用的一种方法,3.4.5 实验：制作一页包含图文的电子简历,为了复习本章学习的知识，我们来做一个小实验：为张三制作一页包含图文的电子简历。 （1）确认一下手中的材料是否准备齐全：简历的内容，张三的照片。 （2）确定简历的总体结构，外观，图片的位置等，这需要和张三进行一定程度的沟通，既照顾到张三的个人喜好，能够反映出他的个性，也要考虑到简历浏览者的习惯，做到信息清楚，一目了然，有利于招聘单位对张三的全面了解。目前，我们假定这个步骤已经结束。张三的要求就是： 网页最上方是粗体的简历二字。 简历二字左下方是个人信息，右下方是张三的个人照片。 紧接着是教育背景、工