第2部分HTML设计基础.ppt

《第2部分HTML设计基础.ppt》由会员分享，可在线阅读，更多相关《第2部分HTML设计基础.ppt（119页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第第2章章HTML设计的基础设计的基础n本章学习目标本章学习目标n本本章章主主要要讲讲解解HTML语语言言、CSS和和xml语语言。通过本章学习，读者应该掌握以下内容：言。通过本章学习，读者应该掌握以下内容：nHTML语言基本知识语言基本知识nCSS12.1 HTML语言语言n2.1.1HTML语言的结构语言的结构nHTML（超文本标记语言）是一种描述文档结构的标注语言n它使用一些约定的标记对WWW上的各种信息进行标注。nHTML的优点是其跨平台性。22.1 HTML语言语言n2.1.1HTML语言的结构语言的结构nHTML文件是标准的ASCII文件，且其后缀名为htm或html的文件。nHT

2、ML文件看起来像是加入了许多被称为链接签（tag）的特殊字符串的普通文本文件。32.1 HTML语言语言n2.1.1HTML语言的结构语言的结构n从结构上讲，HTML文件由元素（element）组成，组成HTML文件的元素有许多种，用于组织文件的内容和指导文件的输出格式。n绝大多数元素是“容器”，即它有起始标记和结束标记。n中间叫元素体。每个元素都有名称和许多可选择的属性。42.1 HTML语言语言n下面来看一个HTML文件结构实例，5nn n 武汉工业学院n n n 这是一HTML的测试文件n n6nHTML文件仅由一个HTML元素组成。即文件以开始，以结尾，文件其余部分都是 HTML的元素

3、体。n而 HTML元 素 的 元 素 体 又 由 头 元 素、体元素和一些注释组成。n头元素和体元素的元素体又由其它的元素、文本及注释组成。2.1 HTML语言语言7n链接签的格式为：n 内容 n例如：n 这是一HTML的测试文件n 2.1 HTML语言语言8n在HTML中有三个字符具有特殊的意义，即：n 表示一个标签的结束。n&表示转义序列的开始。每个转义字符都 “&”开始，以分号“；”结束。（解决二义性问题）n例如：“<”表示“”符号。“ ”表示空格。2.1 HTML语言语言9n元素名也叫链接签名。需要注意的是：n（1）和起始链接签之间不能有空格。n（2）元素名称不区分大小

4、写。n（3）一个元素可以有多个属性，属性及其属性值不区分大小写，且各个属性用空格分开。2.1 HTML语言语言10n在头元素中的元素表示的是该HTML文件的一般信息，n这些元素书写的次序是无关紧要的，它只表明该HTML有还是没有该属性。n出现在体元素中的元素是次序敏感的，改变元素在HTML文件中的次序会改变该HTML文件的输出形式。2.1 HTML语言语言11n1.标记标记n标记用来给网页命名，显示在浏览器的标题栏中。n例如，在图2-1中所示的浏览器页面中，其标题栏所显示的“武汉工业学院”。2.1.2构成网页的基本元素构成网页的基本元素12n2.标记标记n到标题元素有6种，用于表示文章中的各种

5、题目。字体大小到顺序减小。n下面这个例子中分别使用了到的标题。2.1.2构成网页的基本元素构成网页的基本元素13nn n 这是一个测试网页n n n标题测试n标题测试n标题测试n标题测试n标题测试n标题测试n n1415n3.预格式化文本标记预格式化文本标记nHTML的输出是基于窗口的，因而HTML文件在输出时都是要重新排版的，即把文本上任何额外的字符（如空格、制表符和回车符）都忽略，若确实不需要重新排版的内容，可以用通知浏览器。n下面是图2-3和图2-4的HTML源文件。2.1.2构成网页的基本元素构成网页的基本元素16nnn这是一个测试网页nnnn HTML是一种描述文档结构的标注语n言，

6、它使用一些约定的标记对各种信息n进行标注。n nn17n4.和和标记标记n用于强制换行。表示一个段落的开始。一般可不用。n5.标记标记 n 这几个标记都是用来修饰所包含文档的。标记使文本加粗；标记使文本倾斜；标记给文本加下划线；标记给文本加删除线；标记使文本字体加重。n下面给出一个这几个元素的HTML源文件。2.1.2构成网页的基本元素构成网页的基本元素18nn n 这是一个测试网页n n n HTML是一种n 描述文档结构的n 标注语言，n 它使用一些n 约定的标记对各种信息进行n 标注。n n19n6.标记标记n用来修改字体和颜色。其中nCOLOR属性：指定文字颜色，颜色的表示可以用6位十

7、六进制代码，如；nSIZE属性：指定相对尺寸。2.1.2构成网页的基本元素构成网页的基本元素20nn n 这是一个测试网页n n n HTML是一种n描述文档结构的n标注语言，n它使用一些n约定的标记对各种信息进行n标注。n n21n如果用户想要设置网页的背景色和文字颜色，可以将标记扩充为：n2.1.2构成网页的基本元素构成网页的基本元素22 表2-1 设置背景景色和文字颜色标记说明Bgcolor设置网页背景颜色Text设置网页非可链接文字的颜色Link设置网页可链接文字的颜色Alink设置网页正被点击的可链接文字的颜色Vlink设置网页已经点击的可链接文字的颜色Background设置网页背

8、景图案ImageURL设置网页背景图案的URL地址#代表颜色RGB值（格式为rrggbb）。它是用16进制的红-绿-蓝（red-green-blue，RGB）值来表示。各种常见的颜色的RGB值如表9-2所示。23颜色RGB颜色RGB黑色（Black）000000橄榄色（Olive）808000红色（Red）FF0000深表色（Teal）008080绿色（Green）008000灰色（Gray）808080蓝色（Blue）0000FF深蓝色（Navy）000080白色（White）FFFFFF浅绿色（Lime）00FF00黄色（Yellow）FFFF00紫红色（Fuchsia）FF00FF银色（

9、Silver）C0C0C0紫色（Purple）800080浅色（Aqua）00FFFF茶色（Maroon）800000 表表2-2 常见颜色常见颜色RGB值值24n例如要将网页背景颜色设置为蓝色，n2.1.2构成网页的基本元素构成网页的基本元素25n超文本链接指针可以使顺序存放的文件具有一定程度上随机访问的能力，这更加符合人类的踊跃思维方式。n超文本链接指针是指把并不连续的两段文字或两个文件联系起来。2.1.3超文本链接指针超文本链接指针26n1.统一资源定位器统一资源定位器URLn统一资源定位器（UniformResourceLocator）是文件名的扩展。n它的构成为：nprotocol:

10、/machine.name:portdirectoryfilename2.1.3超文本链接指针超文本链接指针27n其中：nprotocol是访问该资源所采用的协议，即访问该资源的方法，它可以是：n HTTP：超文本传输协议，该资源是HTML文件；n FTP：文件传输协议，用ftp访问该资源；n MAILTO：采用简单邮件管理传输协议SMTP，提供电子邮件服务。2.1.3超文本链接指针超文本链接指针28nmachine.name是存放该资源主机的IP 地址，通常以字符形式出现,如 。nport（端口号）是服务器在其主机所使用的端口号。一般情况下端口号不需要指定，只有当服务器所使用的端口号不是默认

11、的端口号时才指定。ndirectory和filename 是该资源的路径和文件名。2.1.3超文本链接指针超文本链接指针29n一个典型的URL为：http:/ ；n主机的名字是；但它并没有指出访问的目录和哪个文件，其实这时表示访问的是根目录下的默认主页文件。2.1.3超文本链接指针超文本链接指针30n与单机系统绝对路径、相对路径的概念类似，统一资源定位器也有绝对URL和相对URL之分。n绝对URL、相对URL是相对于最近访问的URL而言。2.1.3超文本链接指针超文本链接指针31n当协议（http:/）被省略时，就认为与当前页面的协议相同。n当主机域名被省略时，就认是当前主机域名。n当目录路径

12、被省略时，就认是当前目录。n当文件名被省略时，就认是当前文件。2.1.3超文本链接指针超文本链接指针322.2.建立一个链接建立一个链接n（1 1）链接到其它站点）链接到其它站点n在HTML文件中用链接指针指向一个目标。其基本格式为：n zzz n其中zzz可以是文字或图片并显示在网页中，n href中的h表示超文本，而ref表示“访问”或“引用”的意思。332.2.建立一个链接建立一个链接n例如：n武汉工业学院n在这个例子中，充当指针的是“武汉工业学院”。34n在编写HTML文件时，需要知道目标的URL。那么如何才能得到目标的URL呢？n在编写HTML文件时，对能确定关系的一组资源（例如在同

13、一个目录中）应采用相对URL。2.2.建立一个链接建立一个链接35n（2）同一个文件中的链接）同一个文件中的链接n超链可以指向自己的计算机中的某一个文件这种链接方式叫做本地链接。n对于同一文件的不同部分，我们怎样来标识呢？2.2.建立一个链接建立一个链接36n下面的内容将介绍链接指针元素的另外的一个用途，标识目标。标识一个目标的方法为：n.nNAME属性将放置该标记的地方标记为“KKK”，n指针：n转向下一处 2.2.建立一个链接建立一个链接372.1.4 在HTML文件中使用图像n1.在在HTML文件中显示图像文件中显示图像n在浏览器上显示的图像必须有特定的格式，目前使用的浏览器通常支持GI

14、F和JPEG格式的图像。n在HTML网页中加图像是通过标记实现的.例如：n n 381.在在HTML文件中显示图像文件中显示图像n标记有几个较为重要的属性。其中：n SRC属性：指明图形的URL地址；n HEIGHT属性：决定图形的高度；n WIDTH属性：决定图形的宽度；n BORDER属性：决定边框线的宽度，0表示无边框；n ALT属性：指明图像显示的备用文本；n下面通过一个示例来说明标记的使用。39nn n测试页n n n n n n n 40图2-6HTML文件举例412.在在HTML文件中利用图像建立链接文件中利用图像建立链接如果在链接标记和的中间放置一个标记，这个图像将会成为一个可

15、击点，产生一个链接。例如：n n n422.1.5框架结构的使用框架结构的使用n框架能够将页面分成多个独立变化的窗口，每个窗口可以显示不同的Web页面，并可以不断更换显示的对象。有关框架内容的HTML语法为：nn n nn43nn n 武汉工业学院n n n n n n n n n n nn44图2-7 框架结构示意图452.1.5框架结构的使用框架结构的使用n说明：nn把浏览器窗口分成两列，其中“*”表示除了明确的值以外剩下的值。n如果浏览器窗口的大小为640*480像素，那么框架中右面一列的宽度为 个像素，n左面一列的宽度为 个像素。462.1.5框架结构的使用框架结构的使用nn该句的含义

16、是 。n下面一行的高度为 像素；n上面一行的高度为 像素。472.1.5框架结构的使用框架结构的使用nn标记有以下主要属性：nSRC属性：指定框架单元的URL源，即在此框中显示“a.htm”的内容。nNAME属性：为该框架单元起个标识名，主要用来为以后改变框架内容提供入口。482.1.5框架结构的使用框架结构的使用nSCROLLING属性:设置框架是否使用滚动条。n 有YES、NO和AUTO三个值，分别表示强制使用滚动条，禁止使用滚动条和自动判断使用滚动条。492.1.5框架结构的使用框架结构的使用ntarget:_blank 打开新窗口。ntarget:_self 在当前框架结构中打开，会覆

17、盖当前内容。ntarget:_top 在当前窗口打开，覆盖所有的框架内容。ntarget:框架名 指定框架打开.n例w7-1.asp502.1.6表单的应用表单的应用n1.什么是表单什么是表单nHTML提供的表单是用来将用户数据从浏览器传递给Web服务器的。n表单的操作是与服务器进行交互的操作，而服务器端的操作是通过服务器端的程序来实现的。512.1.6表单的应用表单的应用n是在服务器端工作程序，通过服务器端的编译动态地送出HTML文件给客户端，它负责处理HTML文件与运行在服务器端的程序之间的数据交换。n当用户输入信息（这个信息可以是查询条件，也可以是传送给服务器的某些内容）并提交给服务器后

18、，便激活了一个服务器端程序。n该服务器程序又可以调用操作系统下的其他程序（例如数据库管理系统）完成读者的查询任务，当操作系统下的程序完成查询之后，便把查询结果传给服务器，通过服务器传给Web服务器。52图2-8 表单示例532.表单的标记表单的标记n表单就是为Internet网络用户在浏览器上建立一个交互接口，使Internet网络用户可以在这个接口上输入自己的信息，然后使用提交按钮，将Internet网络用户的输入信息传送给Web服务器。n表单的HTML格式如下nnn542.表单的标记表单的标记nFORM标记有以下主要属性：n（1）ACTION属性：是用来指出，当这个FORM提交后需要执行的

19、驻留在Web服务器上的程序名（包括路径）是什么。例如：n n n552.表单的标记表单的标记n（2）METHOD属性：用来说明从客户端浏览器将Internet网络用户输入的信息传送给Web服务器时所使用的方式，它有两种方式：POST和GET。n默认的方式是GET，这两者的区别是什么？562.表单的标记表单的标记n在与之间，可以使用除以外的任何HTML标识，这将使FORM变得非常灵活。573.HTML中的中的INPUT标记标记n下面是INPUT标记的标准格式：n n其中TYPE属性是用来说明提供给用户进行信息输入的类型是什么。：nTYPE=“TEXT”表示在表单中使用单行文本框n =“PASSW

20、ORD”表示在表单中为用户提供密码输入框58n =“RADIO”表示在表单中使用单选按钮n =“CHECKBOX”表示在表单中使用多选按钮n =“SUBMIT”表示在表单中使用提交按钮n =“RESET”表示在表单中使用重置按钮3.HTML中的中的INPUT标记标记59n（1）文字输入和密码输入）文字输入和密码输入n用一个例子说明文字输入和密码输入的制作。请看下例：n 3.HTML中的中的INPUT标记标记60n这是个测试页nnn请输入您的真实姓名:nn您的主页的网址:nnn密码:nnnn61图2-9 文字输入和密码输入的例子62n请输入您的真实姓名:3.HTML中的中的INPUT标记标记63

21、n（2）复复选选框框（Checkbox）和和单单选选框框（Radio Button）n单选框和复选框的格式如下：n单选框：nn多选框：n3.HTML中的中的INPUT标记标记64n下面来看一个例子，具体来体会一下。n这是个测试页nn n 选择一种你喜爱的水果:n 香蕉n 草莓n 橘子nnn 65n 这是个测试页nn n选择你所喜爱的运动:n 足球n篮球n排球nn 66图2-10 单选框实例67n（3）按钮的制作）按钮的制作n其实“发送”按钮真正的含义叫“提交”。即当Internet网络用户用鼠标单击这个按钮后，用户输入的信息便提交给一个驻留在Web服务器上的程序，让服务器进行处理.n其典型的格

22、式：。nVALUE属性：如果缺省出现“SUBMIT”的字样，n 改变按钮上的提示。例如：VALUE=“提交”。3.HTML中的中的INPUT标记标记68n另一种在浏览器常用的按钮叫“重置”按钮，当Internet网络用户用鼠标单击这个按钮后，网络用户输入的信息被清除，让网络用户重新输入信息。n其典型的格式：n ，nVALUE属性：缺省VALUE属性为“RESET”的字样。n 改变按钮上的提示，例如：VALUE=“重新输入”。3.HTML中的中的INPUT标记标记69n设置下拉式菜单或带有滚动条的菜单，下拉菜单的标准格式如下所示：nn 选项一n .n4.HTML中的中的SELECT标记标记70n

23、NAME属性是当Internet网络用户将表单提交时作为输入信息的名字。nSIZE属性控制在浏览器窗口中这个菜单选项的显示条数。nMULTIPLE属性允许读者一次可选多个选项，如果缺省MULTIPLE，一次只能选一项，类似于单选。nOPTION带有SELECTED属性，若在SELECT标记中设定MULTIPLE属性的话，可以在多个OPTION标记中带有SELECTED属性，表示这些选项已经预选。4.HTML中的中的SELECT标记标记71nn 武汉工业学院nn请从下面课程中选择几门选择课:nnn网络技术n书法n音乐欣赏n多媒体技术nnnn72图2-11 设置下拉菜单732.1.7HTML中的表

24、格中的表格n从这个例子可以看出一个表格有一个标题（Caption），它表明表格的主要内容，并且一般位于表的上方；表格中由行和列分割成的单元叫做“表元”（Cell），它又分为表头（用TH标记来表示）和表数据（用TD标记来表示）；表格中分割表示的行列线称为“框线”（Border）。74n一个表格的基本框架如下所示：nnnnnnnn1.表格的标记表格的标记75nnnnnnnnnn1.表格的标记表格的标记76（1）TABLE标记标记n一个表格至少一个TABLE标记，由它来决定一个表格的开始和结束，而且TABLE标记可以嵌套。TABLE标记有以下五种属性：nBORDER属性，指定围绕表格的框的宽度（只能

25、用像素）。nCELLSPACING属性，指定框线的宽度nCELLPADDING属性，用于设置表元内容与边框线之间的间距。nALIGN属性用来控制表格本身在页面上的对齐方式。其取值可是LEFT（左对齐）、CENTER（居中对齐）、RIGHT（右对齐）。nWIDTH属性，用来设置表格的宽度，可以以像素为单位，也可用占浏览器窗口的百分比来定义。77（2）CATION标记标记nCATION标记用来标注表格标题的。CATION标记必须紧接在TABLE开始标记之后放在第一个TR标记之前。通过该标记所定义的表格标题一般显示在表格的上方，而且其水平方向是居中对齐。另外，如需要对表格的标题突出显示，可以在CAT

26、ION标记之间加入其它对字体进行加重显示的标记。如：78nnn 表格标题强调nnn.nn79n定义表格的一行。TR标记中有两个属性:nALIGN属性，用来设置表行中的每个表元在水平方向的对齐方式，其取值可以是LEFT（左对齐）、CENTER（居中对齐）、RIGHT（右对齐）；nVLIGN属性，用来设置表行中的每个表元在垂直方向的对齐方式，其取值可以是TOP（向上对齐）、CENTER（居中对齐）、BOTTOM（向下对齐）。（3）TR标记标记80n例如，要使表行中各单元的内容水平方向右对齐、垂直方向居中对齐，可使用如下源代码：n（3）TR标记标记81（4）TH标记标记nTH标记用来表示一个表行中的

27、各个单元。同样具有ALIGN和VALIGN属性，TH标记还有两个属性:nWIDTH属性，用来设置表元的宽度，nHEIGHT属性，用来设置表元的高度。82n2.2.表格使用实例表格使用实例n在这个实例中，通过制作一个登记表格来给大家来说明如何制作一个比较复杂的表格。在表格中经常会出现跨多行、多列的表元，这就要利用TD标记另外两个属性，即COLSPAN和ROWSPAN属性。例如n 登记照 表示这个表项标题将横跨三个表项的位置；83n 登记照 表示这个表项标题将纵跨三个表项的位置；n另外每个表元还可以设置其背景颜色。例如 n 登记照n还可以在表格中插入超级链接或在表格中插入图片，如果能对这个例子举一

28、反三的话，那么仅需制作一个无框线的表格，就可以把各种数据按照自己所希望的形式在页面进行布置。n下面就给出一个具体的实例（其页面效果如图2-13所示）：84图2-13 综合表格实例85nnnn n大奖赛登记表nnn 报名号n757n性别n女nnnnn n姓名nn江小丽n nn推荐单位n宇宙公司nnnnn862.2 级联式样式表（级联式样式表（CSS）n级联式样式表（CSS）为 HTML 文档提供美观而一致的外观。n使用CSS样式定义HTML页和Web窗体中元素和文本的外观和位置。可将style属性以内联方式添加到许多HTML元素上，还可将CSS样式嵌入到块中或存储在外部级联式样式表（.css）文

29、件中。872.2.1定义定义CSSnCSS样式定义元素的显示方式以及在页中放置元素的位置。n可以创建一个通用规则，只要Web浏览器遇到一个元素实例，或是一个分配给某个样式 CLASS的元素，该规则就立刻应用属性，而不是将属性逐个分配给页中的每个元素。881.在在 STYLE 块内定义块内定义 CSS 样式规则样式规则n每个CSS样式规则都有两个主要部分：n 选择器、声明（包括属性和属性的值）n例如一条说明“将标记内包含的所有文本设置为居中，并采用红色字体颜色”的简单 CSS 样式规则可以写成：nH1 text-align:center;color:red;891.在在 STYLE 块内定义块内

30、定义 CSS 样式规则样式规则nCSS 样式规则可以在 HTML 文档 部分的 块内定义。以下是一个示例（运行结果如图2-14所示），它定义了一条 CSS 样式规则，并将该规则应用到 Web 页上的所有 元素：90n n HTML 4.0 CSS 举例n n H1 text-align:center;color:red;n n n n This text is centered and redn This text isnt centered and redn n91图2-14 CSS示例922.CSS 样式规则的优先级样式规则的优先级nCSS 样式规则从一定意义上讲是“级联”的，即全局样式规

31、则会一直应用于 HTML 元素，直到有局部样式规则将其取代为止。n在局部样式应用于HTML元素之后，全局样式规则中不与局部CSS样式规则冲突的部分继续应用于这些元素。933.将将 HTML 元素分配给元素分配给 CSS 样式样式 CLASSn每当文本出现在分配给特定 CLASS 的 HTML 标记中时，就会自动应用 CSS 样式。在 块中，CLASS 样式规则的选择器以一个句点开始。例如：n.head2 font-size:14pt;text-align:center;color:red;font-weight:bold;font-style:italic;n若要以内联方式应用这种类型的样式，

32、请向支持内联样式的标记添加 CLASS 属性：nn作为 CLASS 属性值输入的字符串，应与该页所应用样式规则的选择器相匹配。以下是一个页示例，它定义和应用了名为 head2 的 CSS 样式 CLASS：94nn n HTML 4.0 CSS Style Class Examplen n n BODY background:#FBFBFB;font-family:Verdana,Arial,Helvetica,sans-serif;font-size:9pt;n A:link color:blue;text-decoration:nonen A:active color:red;text-d

33、ecoration:nonen A:visited color:green;text-decoration:nonen .head2 font-size:14pt;text-align:center;color:red;font-weight:bold;font-style:italic;n n nn n This text is centered,large,red and green,bold,and italicn n954.外部外部 CSS 样式表样式表n外部 CSS 样式表文档是只包含样式规则、以.css 为扩展名的纯文本文件。语句nn表示将外部 CSS 样式表“mystyles.c

34、ss”中的样式规则应用到该页。下例中，“Mystyles.css”是一个外部 CSS 样式表文档，它包含 标记的样式规则。96n n 调用外部CSSn n n n n This text is redn n974.外部外部 CSS 样式表样式表n外部 CSS 样式表中列出的样式规则的写法与在 块中的写法一样，只是两边没有 标记：nH1 text-align:center;color:red;n.head2 font-size:14pt;text-align:center;color:red;font-weight:bold;font-style:italic;n一个外部 CSS 样式表可链接到

35、许多 HTML 页，从而在整个 Web 站点内应用一致的样式。CSS 样式表将格式设置规则与内容分开，从而大大方便了样式规则的定位和编辑。块还可以用于公开文档，以通过可扩展标记语言（XML）对该文档进行处理。985.CSS的注释n注释的好处?nCSS用C/C+的标记进行注释的，“/*”放在注释的开始处，“*/”在结束处。下例说明如何进行注释：99nn CSS例子n n H1 font-size:x-large;color:red/*这是一个CSS的定义*/n H2 font-size:large;color:blue n n1002.2.2CSS属性分类属性分类nCSS属性分为包括字体、颜色和

36、背景、文本、边框、用户界面、表和视觉效果。1011.字体字体n字体格式属性确定格式化文本在 Web 浏览器中将如何显示。n可设置首选字体系列、字体大小和颜色，以及文本是否显示为粗体、斜体或带下划线。n可将字体格式设置属性添加到在外部 CSS 样式表中定义的 CSS 样式规则，或添加到 Web 页HEAD部分的STYLE块中定义的 CSS 样式规则。1021.字体字体n若要将样式规则应用于Web页的BODY节中的某个特定HTML元素，需要将CLASS或ID属性添加到其值为所需CSS样式规则选择器的元素的开始标记中。n也可将CSS字体属性直接添加到支持STYLE属性的HTML元素中。n注意：如果定

37、义了BODY样式，则该页上所有未由内联样式格式化的文本都将以指定样式显示。103 表2-3字体属性属性属性含义属性值font-family选择字体所有字体font-size选择字体大小|font-weight字体加粗normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900font-variant字体变形normal(普通)|small-caps(小型大写字母)font-style字体风格normal(普通)|italic(斜体)|oblique(倾斜)104105nn字体样式测试 nn n 1062.颜色和背景颜色和背景n背景

38、属性通过更改颜色或包含图像来控制背景。如果采用图像作为 Web 页的背景，也可指定其位置和平铺属性。通过组合使用这两种属性，可确定背景图像在页面上的位置以及图像显示的频率。表2-4中列出了CSS的颜色和背景属性。107 表2-4CSS的颜色和背景属性属性属性含义属性值属性书写格式color定义前景色颜色如：H2 color:#000080 background-color定义背景色|transparent(透明)如：BODY background-color:white background-image背景图象图片路径如：BODY background-image:url(http:/ bas

39、eline（使元素和上级元素的基线对齐）n middle（纵向对齐元素基线加上上级元素的x-高度字母 x 的高度的一半的中点）n sub（下标）n super（上标）n text-top（使元素和上级元素的字体向上对齐）n text-bottom（使元素和上级元素的字体向下对齐）n 影响相对于元素行的位置的关键字有 n top（使元素和行中最高的元素向上对齐）n bottom（使元素和行中最低的元素向下对齐）110111n文本样式测试nnn武汉工业学院WEB服务器的域名为：；n武汉工业学院FTP服务器的域名为：FTP；nn1124.鼠标属性鼠标属性n当把鼠标移动到不同的地方时；当鼠标需要执行不

40、同的功能时；当系统处于不同的状态时，都会使鼠标的形状发生改变。n用CSS来改变鼠标的属性，就是当鼠标移动到不同的元素对象上面时，让鼠标以不同的形状、图案显示。113n在CSS当中，这种样式是通过“cursor”属性来实现的。Cursor属性有很多的属性值，详细列表如下：属性值说明Auto自动，根据默认状态自行改变Crossshair 十字线光标。Default默认光标，通常为箭头光标。Hand手型光标。Help“帮助”光标，它是箭头和问号的组合。Move移动E-resize箭头朝右方。Ne-resize箭头朝右上方。Nw-resize箭头朝左上方。n-resize箭头朝上方。Se-resize

41、箭头朝右下方。Sw-resize箭头朝左下方。s-resize箭头朝下方。text文本“I”型wait等待114n下面来看一段鼠标指针在不同文字对象对应于不同显示的代码：nchangemousen鼠标效果nn 请把鼠标移到相应的位置观看效果。nn手的形状n 移动n 反方向n 等待n 求助nnnn1152.2.3CSS的单位的单位n1.长度单位长度单位n一个长度的值由可选的正号“”或负号“”、接着的一个数字、还有标明单位的两个字母组成。在一个长度的值之中是没有空格的，例如，1.3 em就不是一个有效的长度的值，但1.3em就是有效的。一个为零的长度不需要两个字母的单位声明。n无论是相对值还是绝对

42、值长度，CSS1都支持。相对值单位确定一个相对于另一长度属性的长度，因为它能更好地适应不同的媒体，所以是首选的。以下是有效的相对单位：nem（em，元素的字体的高度)nex（x-height，字母“x”的高度）1162.2.3CSS的单位的单位npx（像素，相对于屏幕的分辨率）n绝对长度单位视输出介质而定，所以逊色于相对单位。以下是有效的绝对单位:nin（英寸，1英寸=2.54厘米）ncm（厘米，1厘米=10毫米）nmm（米）npt（点，1点=1/72英寸）npc（帕，1帕=12点）1172.2.3CSS的单位的单位n2.百分比单位百分比单位n一个百分比值由可选的正号“”或负号“”、接着的一个

43、数字，还有百分号“%”。在一个百分比值之中是没有空格的。n百分比值是相对于其它数值，同样地用于定义每个属性。最经常使用的百分比值是相对于元素的字体大小。n3.颜色单位颜色单位n颜色值是一个关键字或一个RGB格式的数字。nWindows VGA(视频图像阵列)形成了16个关键字:aqua，black，blue，fuchsia，gray，green，lime，maroon，navy，olive，purple，red，silver，teal，white，and yellow。1182.2.3CSS的单位的单位nRGB颜色可以有四种形式：n#rrggbb（如，#00cc00）n#rgb（如，#0c0）nrgb（x,x,x），其中x是一个介乎0到255之间的整数（如，rgb（0,204,0）nrgb（y%,y%,y%）y是一个介乎0.0到100.0之间的整数（如，rgb（0%,80%,0%）n上述的例子指定同一颜色。119