描述
开 本: 16开纸 张: 胶版纸包 装: 平装-胶订是否套装: 否国际标准书号ISBN: 9787302478089
作为网页开发与设计入门经典，《学习HTML5（第7版）》涵盖网页设计师必知必会的以下基础技术：
互联网概念
用HTML5创建Web页面
用层叠样式表（CSS）配置文本、颜色、页面布局
网页设计*实践
无障碍访问标准
网页开发流程
在页面上添加多媒体与交互式元素
CSS3新特性
网站性能提升与搜索引擎优化
电子商务与万维网
JavaScript
本书适合所有对网页设计感兴趣的读者阅读，是一本理想的入门参考。
前 言
这是一本网页开发的入门教程，内容涵盖了网页开发人员需要掌握的基础技术，具体如下所述：
互联网概念
用HTML5创建网页
用层叠样式表(CSS)配置文本、颜色、页面布局
网页设计实践
无障碍访问标准
网页开发流程
在页面上添加多媒体与交互式元素
CSS3新特性
网站性能提升与搜索引擎优化
电子商务与万维网
JavaScript
本书特别为读者提供了支持特性，即“网页开发者手册”，这是一系列附录资源的集合，包括HTML5 参考、XHTML参考、HTML5和XHTML的比较、特殊实体字符列表、CSS属性参考、WCAG2.0快速参考以及FTP教程。
本书第7版主要关注HTML5，这种聚焦重点的做法对网页开发初学者来说是有益的。本书综合讲解HTML与CSS主题，例如文本配置、颜色配置、页面布局，同时重点突出设计、无障碍访问、万维网标准等方面的内容。第7版中的新特性主要有以下几项：
增加了页面布局设计方面的内容
增加了针对移动设备进行设计的内容
增加了响应式网页设计技术与CSS媒体查询
介绍了新的CSS3弹性盒(Flexbox)——可变布局容器模块
更新了JavaScript相关内容，增加了针对jQuery的介绍
更新了XHTML、HTML5 和 CSS参考部分的内容
增加了供读者动手实践的练习
更新了学习案例
更新了代码示例、案例学习和网页资源
书中的学生文件可以到本书支持网站下载，网址为http://www.pearsonhighered.com/ felke-morris。这些文件包括了动手练习的解答和网站案例学习的入门文件。
认真完成本书学习之后，你就能够利用现有技术来设计网页了。此外，本书也为你将来运用新的HTML5与CSS3代码技术打下了基础。
本书的组织结构
本书的组织结构如下图所示。
图P.1 本书的组织比较灵活，读者可根据自己的需求选择阅读
本书广泛适用于各种教程与学习需求，读者可自行灵活掌握使用方法。第1章提供了一些介绍性的材料，视读者自身背景的不同可选择阅读或跳过。第2章至第4章介绍了HTML和CSS编码。第5章讨论了网页设计的实践，可以在学习完第3章之后马上跳转至此(或者与第3章配合起来学习)。第6章至第9章继续介绍HTML与CSS。
后续章节各自为独立的学习体系，均可以视学习时间与学习需求的不同选择阅读：第7章(更多有关链接、布局、移动性)、第10章(网页开发)、第11章(网页多媒体与交互性)、第12章(电子商务概览)、第13章(网页提升)、第14章(对JavaScript和 jQuery的简单介绍)。
各章概览如下所示。
第1章“互联网与万维网介绍”，本章简单介绍了一些与互联网和万维网有关的术语与概念，这些知识是网页开发人员需要了解的。对许多读者来说，可将某些内容视作回顾。第1章为本书其余章节的基础。
第2章“HTML基础”，在介绍HTML5的同时，我们还提供了一些示例与练习，以鼓励读者动手创建网页，从中获取有益经验。在学生文件中提供了动手实践环节的参考答案。
第3章“用CSS配置颜色和文本”，本章介绍用层叠样式表(Cascading Style Sheets t，CSS)配置网页颜色与文本的技术。我们建议读者在阅读的过程中动手练习实践。相关的参考答案在学生文件的动手实践部分可以找到。
第4章“视觉元素与图形”，本章讨论如何在网页上应用图形与视觉效果，包括图像优化、CSS边框、CSS图像背景、新的CSS3视觉效果以及新的HTML5元素等内容。我们建议读者在学习的过程中动手练习实践。相关的参考答案在学生文件的动手实践部分可以找到。
第5章“网页设计”，本章主要关注推荐的网页设计实践与无障碍访问，并对部分内容加以强化，因为某些推荐的网站设计实践需要与其他章节相结合。
第6章“页面布局”，本章继续之前已经开始的CSS学习，介绍了有关布放与浮动网页元素有关的技术，其中包括双栏式的CSS页面布局。新的HTML5语义元素与技术使得较早版本的浏览器也能兼容HTML5，我们将介绍相有关知识。学生文件的动手实践部分中提供了示例方案。
第7章“链接、布局与移动性的更多内容”，本章回顾之前的一些主题，然后介绍了超链接、CSS精灵(CSS sprites)的使用、三栏式页面布局、配置与打印有关的CSS、设计移动互联网网页、用CSS多媒体查询设计自适应网页、新的CSS3弹性盒布局模块等知识。读者在阅读的过程中可以动手练习实践。相关的参考答案在学生文件的动手实践部分可以找到。
第8章“表格”，本章主要关注用HTML元素创建表格。介绍了利用CSS来配置表格的方法。我们建议读者在阅读的过程中可以动手练习实践。相关的参考答案在学生文件的动手实践部分可以找到。
第9章“表单”，本章主要讲解如何用HTML元素创建表单。介绍了利用CSS来配置表单的方法，以及新的HTML5表单控制元素与属性。我们建议读者在阅读的过程中动手练习实践。相关的参考答案在学生文件的动手实践部分可以找到。
第10章“网页开发”，本章关注于网站开发过程，包括大规模项目的作业角色需求、网页设计过程以及网页寄存等内容。本章还介绍了网页主机检查表的有关知识。
第11章“网页多媒体与交互性”，我们可以在网页上添加多媒体、交互性等元素，本章简单介绍了相关内容。这些主题包括新的HTML5视频和音频、Flash动画、Javaapplets、CSS图片库(CSS Image Gallery)、新的CSS3变形与渐变属性、JavaScript、jQuery、Ajax以及新的HTML5 API等。我们建议读者在阅读的过程中动手练习实践。相关的参考答案在学生文件的动手实践部分可以找到。
第12章“电子商务概览”，本章介绍电子商务、安全性、网页上的订单处理流程等内容。
第13章“网页提升”，本章从网页开发人员的角度讨论网站性能的提升问题，并介绍搜索引擎的优化知识。
第14章“JavaScript
和 jQuery简介”，本章介绍利用JavaScript和 jQuery写客户端脚本的技术。相关的示例方案在学生文件的动手实践部分可以找到。
附录“网页开发者手册”，该附录包含读者在学习过程中需要的资源与教程，例如HTML5快速参考、特殊实体字符、CSS属性参考、HTML5与XHTML比较、WCAG 2.0快速参考、网页安全色彩调色板以及FTP教程。
本书具有如下特点。
题材选择广泛：本书既包含HTML5、CSS、JavaScript 等“硬技术”(第2、3、4、6、7、8、9章)，也包含网页设计(第5章)、网站提升(第13章)、电子商务(第12章)等软技能。这就能为读者打下扎实而全面的基础，从而为从事网页设计相关工作助一臂之力。老师和学生在教学中会发现这是个十分有趣的过程，因为大家可以在学习创建网页与网站时一边讨论、一边融会贯通地综合使用“硬技术”和“软技能”。
动手实践：网页开发是一项技能，任何技能都需要经过实践才能提升。本书强调了章节内部的动手实践环节，每一章结束还有练习，同时学习实际运行着的真实互联网网站案例。多种多样的练习内容便于老师根据课程或学期的需要灵活选择。
网站案例学习：从第2章起贯穿全书我们提供了针对四个网站的案例研究。另一个案例从第5章开始。案例研究有助于巩固每一章学习的内容。教师可以学期为周期循环安排案例，学生们也可以根据自己的兴趣来选择。案例学习的参考答案可以从本书的教师资源中心下载，地址是http://www.pearsonhighered.com/irc。
网页研究我们在每一章中都安排了网页研究环节，从而激励学生们进一步钻研该章主题。
关注网页设计本书中大多数章节里都设计了配套的活动，以深入探索与该章主题相关的网页设计技巧。这些活动将帮助学生巩固、拓展和提升课程中所学主题。
FAQ：在作者的网页开发课程中，学生们经常会问一些类似的问题。作者对此加以整理，在本书中增加了这一环节，并添加了FAQ标识。
自测题：每一章有两至三篇自测题，汇聚了若干问题，便于学生们在学习过程中及时总结自我评估。每组问题上都有特殊的自测题图标。
关注无障碍访问：开发易于访问的网站的重要性日益彰显，因此本书将对无障碍访问的关注贯穿始终。在有关无障碍访问的内容处我们设置了特殊图标以便于查找。
关注道德标准：本书中与网页开发有关的道德标准内容以高亮显示，并设置了特殊的图标。
参考材料：本书附录中提供了网页开发人员手册，内容包含HTML5快速参考、特殊实体字符、HTML5与XHTML比较、CSS属性参考、WCAG 2.0快速参考、FTP教程、网页安全色调色板等。
补 充 材 料
学生资源
编写网页练习中的学生文件、网站实例研究以及相关VideoNotes资源，都可以在本书的配套网站上获取，网址是http://www.pearsonhighered.com/felke-morris。如果书籍推出新版本，相应的资源仍能提供免费的访问。
教师资源
我们为教师提供了下列教学辅助资源。请访问Pearson的教学资源中心(http://www.pearsonhighered.com/irc)。我们提供的内容如下：
每章课后练习的答案
实例研究练习的答案
测试题
PPT展示资源
示例教学大纲
作者的个人网站
除了出版社的支持网站外，本书作者建有个人网站，网址为http://www.webdevfoundations.net。在这个站点上为读者提供了另外一些有用的资源，包括复习练习以及展示各章示例、链接、更新信息的页面。出版社不负责该网站的维护。
第3章 用层叠样式表CSS配置颜色与文本
本章学习目标
从打印媒介到万维网，样式表的发展历程
层叠样式表(Cascading Style Sheets，CSS)的优点
在网页上配置背景与文本颜色
创建用于配置通常颜色与文本属性的样式表
应用内联样式
使用内嵌的样式表
使用外部样式表
配置元素、类、id和派生选择器
在CSS中实现层叠(cascade)效果
验证CSS
现在你对HTML已经有所了解，是时候开始探索层叠样式表(Cascading Style Sheets，CSS)的奥秘了。网页设计师使用CSS，目的是将网页的样子与它所呈现的内容分离开来。CSS可用于文本、颜色以及网页布局的配置。它并不是新生事物——早在1996年，W3C就已经发布了首个CSS版本，并建议作为标准。到了1998年，另外一些有关如何放置网页元素的属性添加了进来，由此诞生了CSS2，这个版本用了十多年，直到2011年才被官方正式“推荐”(recommendation)。CSS继续向前发展，陆续增加了支持诸如嵌入字体、圆角、透明等效果的属性，也即CSS3的新特性。本章将介绍在写网页时如何使用CSS来配置颜色与文本。
3.1 层叠样式表概览
样式表已经在桌面发布上应用了多年，作用在于向印刷媒体说明字符样式与字符间距。CSS则为网页开发人员提供了这些功能(甚至更多)。我们可以利用CSS来进行网页显示样式排版(字体、字号等等)与页面布局说明。CSS Zen Garden(禅意花园)(http://www.csszengarden.com)向我们展示了CSS强大的功能与灵活性。可以访问这个网站，看看那些鲜活的CSS应用实例。请注意，访客选择的设计(CSS的作用)不同，网页所呈现的效果差别巨大。虽然CSS禅意花园里的作品都是由CSS高手完成的，但他们都曾经跟你一样，也是从基础学起的。
CSS是一种灵活的、交互式的、基于标准的语言，由W3C发布。我们可以访问http://www.w3.org/Style，了解官网上的CSS说明。请注意，虽然CSS已经使用多年，但它仍然被认为是一种新兴技术，并且不同浏览器对它的支持程度各不相同。在本书中我们主要关注于那些通用浏览器都能有较好支持的内容。
层叠样式表的优点
使用CSS有如下优点(图3.1)。
* 能更好地控制字体和页面布局。这些特性包括字号、行间距、字符间距、缩进、边距和元素排列等。
* 样式与结构分离。页面上的文本与颜色的格式可以单独配置与存储，从而使body部分独立开来，
* 样式可以存储。我们可以将样式单独保存为一个文件，然后在网页上引用即可。修改样式时，HTML保持不变。这就意味着，如果你的客户打算将若干网页的背景颜色从红色改为白色，你只需要修改包含样式的一个文件即可，而不用挨个去改每一张网页文档了。
* 文档可以变得更小。格式部分从文档中剥离出来了，因而实际的文档应该能变小。
* 维护更方便。同样的道理，如果要修改样式，只需单独修改样式表。
图3.1
单个CSS文件的强大功能
配置层叠样式表
使用CSS技术的方法有四种：内联、嵌入、外部以及导入。
* 内联样式：代码写在网页的body部分，作为HTML标签的属性。因此样式的作用范围仅限于包含该属性的特定元素。
* 嵌入样式(也称作内部样式)：在网页的head部分定义样式。这些样式说明对整张网页文档起作用。
* 外部样式：样式写在独立的一个文本文件中。在写网页时，通过在head部分配置链接元素与外部样式文本文件产生关联。
* 导入样式：与外部样式类似，样式也是写在外部文本文件中，网页中进行引用。通过使用@import指令将外部样式导入为嵌入样式，也可以导入到其他的外部样式表中。
样式选择器与声明
样式表由样式规则组成，这些规则说明了所应用的样式。每一个规则由两部分组成：选择器与声明。
* CSS样式规则选择器。选择器可以是一个HTML元素的名称、一个类名或一个id名称。稍后我们将讨论有关类选择器与id选择器的内容。
* CSS样式规则声明。声明指出你所设置的CSS属性(例如颜色)以及分配给该属性的值。
例如，如图3.2所示的CSS将某张网页上文本的颜色设置为蓝色。选择器是body标签，而声明将颜色属性的值设置为blue。
图3.2
使用样式将文本颜色设置为蓝色
背景颜色属性
CSS中的 background-color属性用于设置某个元素的背景颜色。下面的样式规则将会把某网页的背景色设置为黄色。请注意，声明是用大括号括起来的，而声明属性与声明值之间则用冒号分隔。
body { background-color: yellow }
颜色属性
CSS中的颜色属性(color)用于设置某个元素的文本颜色(前景)。下面的样式规则将把某网页的文本颜色设置为蓝色。
body { color: blue }
配置背景颜色与文本颜色
图3.3显示了文本为蓝色、背景为黄色的网页。如果要用一个选择器来配置多个属性，我们可以使用分号(;)将各项属性分隔开来：
body { color: blue; background-color: yellow; }
图3.3
文本为蓝色、背景为黄色的网页
各属性项之间的空格是可选的。结尾处的分号也是可选的，但如果之后还需要增加另外的样式规则，保留末尾的分号还是有必要的。下面的示例代码同样有效：
body {color:blue;background-color:yellow}
body { color: blue;
background-color: yellow; }
body {
color: blue;
background-color: yellow;
}
你可能会问：怎么才能知道哪些属性、哪些值可以用？本书的附录E即收录了CSS属性参考，为大家提供了详细的CSS属性清单。本章也将介绍一些常用的配置颜色与文本的CSS属性，如表3.1所示。接下来我们要学习如何在网页上使用颜色。
表3-1
本章中介绍的CSS属性
属性名称
说明
属性值
background-color
某个元素的背景色
任意有效的颜色
color
某个元素的前景(文本)色
任意有效的颜色
font-family
某个字体或字体系列的名称
任意有效的字体或字体系列，如serif、sansserif、fantasy、monospace或cursive
font-size
字符大小
有多种变化：
数字值，以pt为单位(磅)，或者以px为单位(像素)，或者以em为单位(对应于当前字体中大写的M所占的宽度)；
百分比数值；
文本值，xx-small、x-small、small、medium、large、x-large以及xx-large
font-style
字符样式
Normal、italic或oblique
font-weight
规定字体的粗细
有多种变化：
文本值：normal、bold、bolder以及lighter；
数值：100、200、300、400、500、600、700、800以及900
line-height
设置行高
通常也以百分比数值来呈现，例如200%对应的是两倍的间距。
margin
简写属性，用于配置某个元素的外边距属性。
一个数值(以px或em为单位)，例如body {margin: 10px}将页面边距设置为10像素。在消除边距时不要加上px或em单位，body {margin:0}即为正确的写法
margin-left
配置元素左外边距值
一个数值(以px或em为单位)，auto或0
margin-right
配置元素右外边距值
一个数值(以px或em为单位)，auto或0
text-align
规定文本的水平对齐方式
Center(居中)、justify(两端对齐)、left(左对齐)或right(右对齐)
text- decoration
确定文本是否需要加下划线；通常应用于超链接。
如果设置为”none”，那么浏览器显示的有超链接的文本就不像通常所做的那样带下划线了
text-indent
配置文本首行的缩进方式
一个数值(以px或em为单位)、auto或百分比
text-shadow
规定添加到文本的阴影效果。这是CSS3中的属性，目前所有的浏览器均不提供支撑
二到四个数值(以px或em为单位)，用于指定水平偏移、纵向偏移、模糊半径、扩散距离，再标一个颜色值
text-transform
控制文本的大小写
none(无，默认)、capitalize(首字母大写)、uppercase(全部大写)或lowercase(全部小写)
white-space
规定如何处理元素中的空白
normal(默认)、nowrap、pre、pre-line和pre-wrap
width
元素内容的宽度
一个数值(以px或em为单位)，auto(默认)或百分比
3.2 为网页配色
显示器显示出来的颜色是红、绿、蓝三色不同强度的各种组合，也即RGB色彩的概念。RGB强度是从0到255的数值。每种RGB色彩有三个值，分别代表红色、绿色、蓝色。这些值通常以相同的顺序(红、绿、蓝)列出，为每一种颜色设定一个数值(参见图3.4的示例)，一般用十六进制数来表示网页上的RGB颜色值。
图3.4
色卡与十六进制的颜色码值
十六进制的颜色码
Hexadecimal(十六进制)是一种满16进位的计数系统，它使用0、1、2、3、4、5、6、7、8、9、A、B、C、D、E和 F来表示数值。十六进制颜色码用从00到FF的十六进制数(在十进制里是从0到255)来对应RGB值。每个颜色码与所显示的红色、绿色、蓝色的强度相关。在这一体系里，红色表示为#FF0000，而#0000FF代表蓝色。#符号指出数值是十六进制的。颜色码对字母的大小写不敏感，也就是说#FF0000 和 #ff0000意思相同，都代表红色。别担心，我们不需要自己动手计算网页配色的数值，熟悉编号的方法就可以了。图3.5摘录了http://webdevfoundations.net/color上的部分配色表。
图3.5
配色表局部
网页安全色
在8位色彩显示器时代，网页的配色有点麻烦，因而确保使用的是网页安全色这点很重要(安全色一共有216种)，这样在Mac和PC上显示的颜色是相类似的。网页安全色用十六进制来表示分别为00、33、66、99、CC和FF。在附录H中，我们提供了216种网页安全色的调色板(也可访问http://webdevfoundations.net/color)。现在的显示器已经能显示数百万种颜色了，因此不用过于强调安全色概念。网页安全色调色板中的颜色数量相当有限，对于今天的设计师来说，选择有创意的颜色而不局限于调色板已经是司空见惯的做法了。
配色的CSS语法
在CSS中有多种配置颜色的方法，语法如下：
* 颜色名称
* 十六进制颜色码
* 简写的十六进制颜色码
* 十进制颜色码(RGB三原色)
* CSS3中新引入的HSL颜色码(色相、饱和度、明度)。详见http://www.w3.org/TR/css3-color/#hsl-color
请访问http://meyerweb.com/eric/css/colors/，该网页上有一张表，举例说明了如何使用不同标记法来配置颜色。在本书中，我们一般使用十六进制码。表3.2展示了在图像上使用红色文本的CSS语法示例。
表3.2
CSS配色语法示例
CSS语法
颜色类型
p{ color: red; }
颜色名称
p{ color: #FF0000; }
十六进制颜色码
p{ color: #F00; }
简写的十六进制颜色码(一个字符代表一种原色)
p { color: rgb(255,0,0); }
十进制颜色码(RGB三原色)
p { color: hsl(0, 100%, 50%); }
HSL颜色码
FAQ 是否可用别的CSS方法来配置颜色？
确实有。CSS3的颜色模块(CSS3 Color Module)不仅可以用来配置颜色，还能配置RGBA(红色、绿色、蓝色、Alpha透明度)和HSLA(色相、饱和度、明度、Alpha透明度)颜色的透明度。CSS3中引入了不透明度的属性以及CSS渐变背景。我们将在第4章中讲述相关内容。
FAQ 怎样选择网页配色方案？
在选择网站的配色方案时需要考虑多种因素。选定了颜色，也就定下了基调，契合公司或组织特质的网页配色有助于吸引目标群体。为了提高可读性，文本与背景的颜色需要有较鲜明的对比。在第5章中，我们将一起探索配色方案的选择技巧。
3.3 带样式属性的内联CSS
我们讲过有四种配置CSS的方法：内联、嵌入、外部以及导入。在这一节中，我们要重点介绍带样式属性的内联CSS。
样式属性(Style)
内联样式的使用方法是在相关标签中添加样式属性代码。样式属性的值写在样式规则声明中，根据需要配置。回忆一下，我们说过声明是由属性和值组成的。每个属性与值之间用冒号(：)分隔。下列代码使用内联样式将h1标题的文本设置成红色：
This is displayed as a red
heading
如果有多个属性，那么彼此之间用分号(；)隔开。下列代码将标题文本设置为红色字体、灰色背景。
This is displayed as a red heading on a gray background
动手实践3.1
在本小节中，将运用内联样式来设置一张网页，以达到如下效果。
* 全局主体标签样式为背景米黄色，文本蓝绿色。其余元素默认采用这种样式。示例为：
* h1标题的样式为蓝绿色背景，米黄色文本。这一设置将忽略主体元素中指定的全局样式。示例如下：
完成的示例如图3.6所示。启动文本编辑器，选择“文件”|“打开”，编辑学生文件中的chapter2/template.html模板。修改网页标题元素，在body节中增加标题与段落标签、样式属性和文本。代码如下，新增内容高亮显示：
Inline
CSS
This paragraph inherits the styles applied to the body
tag.
图3.6
运用了内联样式的页面
将文件以inline2.html为名保存到硬盘或可移动存储上。启动浏览器进行测试。页面看起来应该与图3.6所示类似。请注意，用于设置主体标签的内联样式自动被页面上其他元素继承了(如段落)，除非另外有显式指定(如h1标签中的代码)。你可以将自己的作业与学生文件中的参考答案(chapter3/inline.html)进行比较。
让我们继续添加另一个段落，文本颜色设置为深灰色：
This paragraph overrides the text
color style applied to the body tag.
图3.7
第二个段落中的内联样式忽略了主体标签中的全局样式设置
将文件另存为inline3.html。现在的页面看上去应该与图3.7所示类似。你可以将自己的作品与学生文件中的参考答案(chapter3/inlinep.html)进行比较。请注意，第二个段落中的内联样式已忽略了主体标签中的全局样式设置。
FAQ 是否推荐使用内联样式？
虽然内联样式在有些时候确实有用，但你会发现实际上它用得并不多，因为这样做效率不高，还会在页面文档中添加额外的代码，并且维护起来也不方便。当然，在某些场景中，内联样式还是挺趁手的，比如在将文章发布到内容管理系统或博客上时，需要稍稍调整网站的风格以恰如其分地表达自己的观点。
3.4 带样式元素的内嵌CSS
在之前的动手实践练习中，我们添加了样式属性代码，在段落元素上使用了内联样式。但是如果设置的是10个或20个段落而不是1个呢？用内联样式的话，得做许许多多重复的劳动！可以这么说：内联样式适用于HTML元素级，而嵌入样式则适用于页面级。
样式(Style)元素
嵌入样式是在页面的head节中设置的，写在元素中。在起始的标签和结束的标签之间，包含了一系列嵌入样式规则。使用XHMTL语法时，要为标签设定一个类型属性，值是“text”或“css”，以指明MIME类型。在HTML5中就不需要这个属性了。
如图3.8所示的网页就使用了嵌入样式来设置文本颜色与网页背景，用到了body元素选择器(the body element selector)。请参考学生文件中的chapter3/embed.html。具体代码如下：
body { background-color: #CCFFFF;
color: #000033;
}
Embedded CSS
This page uses embedded styles.
图3.8
使用嵌入样式的网页
请注意书写样式规则的方法，每一条规则自成一行。这种格式虽然并不是必须的，但与长长的一行文本相比，分秆的写法让代码更易读，也更易于维护。此处的样式设置对整个页面有效，因为通过使用主体样式选择器，它被应用到
元素。
动手实践3.2
启动文本编辑器，打开学生文件中的chapter3/starter.html文件，另存为embedded.html。在浏览器中测试该网页，它看起来应当与图3.9类似。
图3.9
不带任何样式设置的网页
在文本编辑器中再次打开该文件查看源码。请注意，网页代码中有
body { background-color: #e6e6fa; color: #191970; }
h1 { background-color: #191970; color: #e6e6fa; }
h2 { background-color: #aeaed4; color: #191970; }
保存文件，并在浏览器中进行测试。如图3.10所示，网页中的色彩已经发生了变化。我们选择了单色方案。需要注意的是数种颜色的重复使用，使整个页面的设计趋于统一。观察源代码，复习CSS与HTML的知识。可参考学生文件中的chapter3/embedded.html示例。你将发现所有的样式都集中在页面中的一处地方。由于嵌入样式代码放置的地方特殊，因此维护起来比内联样式更方便。同时，你也会看到我们仅为h2元素做了一次样式设置(在head节)，但在页面上所有的
元素处都生效了。毫无疑问，这比逐个在
元素中键入代码进行内联样式设置要高效得多。当然，只有一张页面的网站并不常见。因而在每张页面的head节中重复CSS样式不仅效率不高，维护起来也麻烦。在下一节中，我们将讨论另一种更高效的方法，配置外部样式表。
图3.10
应用了嵌入样式后的网页
FAQ 我设置了CSS，可它不起作用。我该怎么做？
写CSS代码时要格外注重细节。有几种常见错误会导致浏览器不能正确显示CSS样式。仔细检查代码，并遵循下列提示，应该能使CSS“起死回生”。
• 请确认冒号与分号用对了地方——它们很容易被搞混。冒号用来分隔
属性与值，而分号则用来分隔属性与值的组合。
• 检查一下，是否在属性与值之间错误地用了等号(＝)，而不是正确的冒号。
• 请确认是否用大括号({})括起了每个选择器的样式规则。
• 检查选择器、选择器属性、属性值的语法是否正确。
• 如果只有部分CSS起了作用，请通读CSS以找到条失效的规则。
通常错误发生在条失效规则之前。
• 使用验证程序来检查CSS代码。W3C提供了免费的CSS代码校验器，
网址是http://jigsaw.w3.org/css-validator。该校验器能帮助你发现语法错
误。先了解一下如何使用该工具。
自测题3.1
1. 列出在网页中使用CSS的三条理由。
2. 如果网页使用了不同于文本与背景默认值的颜色时，为什么好同时配置文本颜色与背景颜色？
3. 请描述嵌入样式相对于内联样式的优越之处。
3.5 用CSS配置文本
在第2章中，我们已经介绍了如何用HTML配置文本中的某些字符，包括使用之类的短语元素；还介绍了如何使用CSS颜色属性来设置文本的颜色。在这一节中，我们将讲述用CSS配置字体的方法。与HTML元素相比，用CSS能更灵活地设置文本(特别用外部样式表时。稍后将会介绍)。今天已经有越来越多的网页开发者选择CSS。
字体系列属性(font-family)
font-family属性用于指定字体系列。浏览器使用已经安装在用户本地计算机中的字库来显示文本。如果本地没有安装相应的字体，此时就会显示默认字体。绝大多数浏览器的默认显示字体是Times New Roman。图3.11展示了字体种类。
各台计算机安装的字库不尽相同。请访问http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html，了解一下网页安全字体。列出字体属性值的各个字体与种类，就创建了内置的备份计划。浏览器会根据这份清单的顺序依次尝试使用各字体。下面的CSS配置了某个段落元素选择器，依照Arial(如果已安装)、Helvetica(如果已安装)、sans-serif(默认安装)字体的顺序来显示文本。
p { font-family: Arial, Helvetica, sans-serif; }
字体名称
描述
示例
serif
有衬线字体。在字的笔画开始、结束的地方有额外的装饰；通常用作标题
Times New Roman；
Georgia；
Palatino
sans- serif
无衬线字体，通常用作网页文本
Arial；
Tahoma；
Helvetica；
Verdana；
monospace
等宽字体；通常用作代码示例
Courier New；
Lucida Console
cursive
手写字体；使用时须谨慎；在网页上可能难以辨识
Lucida handwriting；
Comic Sans MS
fantasy
较夸张的样式；使用时须谨慎；有时用作标题；在网页上可能难以辨识
Jokerman,
Impact,
Papyrus
图3.11 常见字体
FAQ 我听人提起，为了在网页上显示特殊字体，要用到“内置”字体，这是什么意思呢？
网页设计师只能在一组常见字体中选择，这种情况持续了很多年。CSS3引入了@font-face，这一规则使得设计师可以随心所欲地使用他们喜欢的任意字体，只需要提供字体的位置，浏览器在显示时会自动先下载到本地。例如，如果你有权免费发布名为MyAwesomeFont的字体，该字体存放在与网页相同文件夹下的myawesomefont.woff文件中，下面的CSS设置可使网页的访客看到显示为该字体的文本：
font-face { font-family:
MyAwesomeFont;
src:
url(myawesomefont.woff) format(“woff”); }
只要运用@font-face规则，为某个选择器设置非内置字体就没有啥特殊的，下述示例即以这种方法配置了h1元素：
h1 { font-family:
MyAwesomeFont, Georgia, serif; }
当前的浏览器支持@font-face规则，但可能会有版权问题。如果你购买某种字体只用于自己的计算机，就无需购买免费发布权。请访问http://www.fontsquirrel.com，该网站有免费商用字体可供下载。
Google Web Fonts提供了一系列免费托管的内嵌网页字体。请访问http://www.google.com/webfonts，挑选可用的字体。选定之后，接下来执行以下步骤。
1. 复制Google上提供的链接，粘贴到网页文档中。(链接标签在CSS文件与你的网页间建立了联系，当然这个CSS文件需要使用@font-face规则)。
2. 使用Google网页字体配置CSS中的字体属性。
如需了解更多入门知识，请访问https://developers.google.com/webfonts/
docs/getting_started。恰当选用合适的字体，不仅可以节约带宽，也可以减少网页上的字体数量。一个页面上只使用一种网页字体、再加上自己特有的字体，这是种不错的做法。这就为我们提供了在页面的标题以及(或者)导航区使用非常见字体的一种方法，不用专门创建图形。
更多的CSS字体属性
CSS提供了许多选项用于配置文本。在本节中，你将了解有关字符大小(font-size)、字符粗细(font-weight)、字符样式(font-style)、行高(line-height)、文本水平对齐方式(text-align)、文本的装饰效果(text-decoration)、文本的首行缩进(text-indent)以及文本的大小写(text-transform)等属性。
字符大小(font-size)属性
font-size属性用于设置字符的尺寸。表3.3列出了许多文本与数值，至可以说选择太多了，因此在提示列中我们给出了使用建议。
表3.3
配置字符大小
font-size值的类别
属性值
提示
文本值
xx-small、x-small、small、
medium(默认)、large、
x-large、xx-large
当浏览器里的文本大小发生变化时，能较好地缩放；为文本尺寸提供的选项有限
像素单位(px)
带单位的数值，如10px
相对于显示器屏幕分辨率而言；并不是每种浏览器都能随文本大小变化而很好地缩放
磅单位(pt)
带单位的数值，如10pt
用于配置网页的打印版本(参见第七章 )；并不是每种浏览器都能随文本大小变化而很好地缩放
Em单位(em)
带单位的数值，如.75em
W3C推荐；当文本在浏览器里大小发生变化时，能较好地缩放；为文本尺寸提供的选项较多
百分比值
百分比数值，如75%
W3C推荐；当文本在浏览器里大小发生变化时，能较好地缩放；为文本尺寸提供的选项较多
em是一种相对的字体单位，起源于印刷工业，可追溯到印刷工人手动排版设置字符块的年代。一em单位是某种特定字体与字号的方块字母(通常是大写的M)的宽度。在网页上，一em单位对应于父级元素(通常是主体元素)中字体与字号的宽度。因此，一em的大小取决于字体与默认尺寸。百分比值类似于em单位。例如，font-size: 100%和font-size: 1em在浏览器中代表的是相同的意思。你可以启动浏览器，打开学生文件中的chapter3/fonts.html页面来比较字体的大小。
字符粗细属性
font-weight属性用于设置文本字体的粗细。在CSS中配置规则font-weight: bold;的效果与使用 或 HTML元素类似。
字符样式属性
font-style属性通常用来将文本配置为斜体显示。有效的font-style值包括normal (默认值)、italic和oblique。CSS规则font-style: italic;在浏览器中的显示效果与使用 或 HTML元素相同。
行高属性
line-height属性用于指定文本中一行的高度，常用百分比值来设置。例如，代码line-height: 200%;表示文本行间距为当前字符尺寸的两倍。
文本水平对齐方式属性
默认状态下，HTML元素按左对齐方式排列，即从左边界处开始显示。CSS text-align属性配置了文本以及块显示元素中内联元素(如标题、段落、分区div等)的对齐方式。该属性的值包括left (左对齐，默认)、right(右对齐)和 center(居中)三种。下面的CSS代码示例将一个h1元素设置成居中显示：
h1 { text-align: center; }
虽然这一规则在设置页面上的标题元素时非常有效，但用它来设置段落中的文本居中时得注意。根据WebAIM (http://www.webaim.org/techniques/textlayout)的研究，文本在居中对齐时可读性不如左对齐。
文本的首行缩进属性
CSS text-indent属性用于设置元素中文本首行的缩进方式。它的值可以是数值(单位可以是px、pt或 em等)或者百分比。下面的CSS代码示例将所有段落的首行设置为缩进5em：
p { text-indent: 5em; }
文本的装饰效果属性
CSS text-decoration被用来修改文本的显示。该属性的常见值包括：none(无)、underline(下划线)、overline(上划线)以及line-through(穿过文本的线)。你是否想过为何有些超链接不带下划线？虽然超链接的默认显示方式是带下划线的，我们仍然可以通过设置text-decoration令其不显示下划线。下面的代码示例即实现了这一目标：
a { text-decoration: none; }
文本大小写属性
text-transform属性用于设置文本的大小写方式。有效值包括：none (无，默认)、capitalize(首字母大写)、uppercase(全部大写)或lowercase(全部小写)。下面的代码示例使某个h3元素中的文本全部显示为大写：
h3 { text-transform: uppercase; }
空白属性
white-space属性指定了浏览器显示空白(如空格字符、代码里的换行等)的方式。默认状态下，浏览器会将相邻的空白合并，从而显示为单个空格字符。该属性的常见值包括normal(忽略空白，默认)、nowrap(文本不换行)以及pre(空白会被浏览器保留)。
CSS3文本阴影属性
CSS3的text-shadow属性为网页上的文本添加了不同深度、多种维度的阴影显示效果。现在的常规浏览器，包括Internet Explorer (IE10及以上)支持这一属性。在设置文本阴影属性时，需要指定阴影的水平偏移、垂直偏移、模糊半径(可选)和颜色等值。
* 水平偏移：是一个像素值。正值时阴影在右，负值时阴影在左。
* 垂直偏移：是一个像素值。正值时阴影在下，负值时阴影在上。
* 模糊半径(可选)：是一个像素值。忽略时默认为0，表示一个尖锐的阴影。数值越大，阴影越模糊。
* 颜色值：有效的颜色值。
下面的代码效果为水平偏移3像素，垂直偏移3像素，模糊半径5像素的深灰色阴影：
text-shadow: 3px 3px 5px #666;
FAQ 为什么在IE9中文本阴影属性无效？
并非所有的浏览器或者所有的浏览器版本都支持text-shadow等CSS3新属性。随着新版本的推出，浏览器的支持度也会发生变化。除了全面测试网页外，别无他法。当然，在网上还是能找到列示CSS与支持的浏览器清单的资源：http://www.findmebyip.com/litmus、http://www.quirksmode.org/css/contents.html以及http://www.browsersupport.net/CSS。
动手实践3.3
现在你已经了解了一些CSS中字体与文本配置的新属性，让我们动手实践一把，先从修改embedded.html开始。启动文本编辑器，打开embedded.html文件。要增加一些CSS样式规则代码，以配置页面上的文本。
设置网页默认的字体属性
就像你已经看到的那样，为主体(body )选择器设置的CSS规则将对整个页面生效。修改主体选择器的CSS，让文本显示为一种sans-serif字体。新的字符样式规则由下列代码来设置，除非另外为某个选择器(如h1或p)、一个类、或一个id(后续章节将详细介绍类与id)专门指定了特殊样式规则，否则整个页面都遵循该规则：
body { background-color: #E6E6FA;
color: #191970;
font-family: Arial, Verdana,
sans-serif; }
将文件另存为embedded1.html，打开浏览器进行测试。你的页面看上去应当与图3.12所示类似。其实页面上所有的文本中只有一行改变了字体，你注意到了吗？
图3.12
CSS设置了页面上的字体
配置h1选择器
接下来将配置line-height、font-family、text-shadow等CSS属性。将line-height设置为200%；效果是标题文本上下的空白高度将增大。(在第4章和第6章中，我们还将讨论其他CSS属性，例如边距、边框、间距等，一般会用这些属性来设置元素周围环绕情况。)然后修改h1选择器，令其使用某种serif字体。当字体名称中包含空格时，要加上引号，如同下列代码中高亮显示部分那样。通常我们建议文本块使用sans-serif字体以提高可读性，而页面或节的标题则建议用serif字体。再设置水平偏移、垂直偏移均为3像素、模糊半径5像素的灰色(#CCCCCC)文本阴影。
h1 { background-color: #191970;
color: #E6E6FA;
line-height: 200%;
font-family: Georgia,
“Times New Roman”, serif;
text-shadow: 3px 3px 5px
#CCCCCC; }
保存文件。打开浏览器进行测试。如果发现“Trillium Media
Design”距离左边界过近，可以在页面的主体元素中的
标签后增加一个 不换行空格。
配置h2选择器
将h2选择器设置为与h1相同的字体，并居中显示。
h2 { background-color: #AEAED4;
color: #191970;
font-family: Georgia,
“Times New Roman”, serif;
text-align: center; }
配置段落
编辑HTML，去除每段行后的换行标签；因为用换行标签不够灵活。接着，将段落文本设置为比默认字号小一些的尺寸。将font-size属性设置为.90em。各段首行均缩进显示，将text-indent属性设置为3em。
p { font-size: .90em;
text-indent: 3em; }
配置无序列表
将无序列表设置为加粗显示。
ul { font-weight: bold; }
将文件另存为embedded2.html，打开浏览器进行测试。你的页面看起来应当与图3.13所示类似。可参考学生文件中的答案chapter3/embedded2.html。
图3.13
CSS配置了网页上的颜色与文本属性
CSS的功能相当强大，仅仅几行代码就能让网页彻底改观。你可能在考虑是否可以用它来实现更多的定制功能，例如让各段落显示不同的样式。虽然可以运用内联样式来达到这个目的，但无疑这不是好的方法。下一节将介绍CSS类与id选择器，它们广泛应用于页面指定元素的配置。
FAQ 我想为多个HTML标签或类设置相同的样式，是否有捷径？
确实有。只要在样式规则前列出多个选择器(如HTML元素、类、id等)，就能实现这一目标。每个选择器之间用逗号分隔。下面的代码完成了将段落与列表项元素的字号均设置为1em的功能：
p, li { font-size: 1em; }
3.6 CSS类、id与派生选择器
类选择器
当我们需要将某个CSS声明赋予多个指定的页面元素时，可以使用CSS类选择器，这样就不需要把样式与每一个HTML元素一一对应了。观察一下图3.14，你会发现无序列表的后两项颜色不同于其他项；这就是使用类的示例。为某个类设置样式时，类名就是选择器。在样式表的类名前，请放置一个点(也即英文的句号：“.”)。下面的代码在样式表中配置了一个名为feature的类，它的背景(文本)色为中红：
.feature { color: #C70000; }
图3.14
类与id的应用
新类中的样式设置可以应用于你想设置的任意元素。只需要使用类属性，如class=”feature”，就可实现这一效果。请注意，在应用类时，起始标签中类的属性值前不要加点。下面的代码展示了如何将
id选择器
使用CSS中的id选择器，我们可以设定一个CSS规则并将其统一应用到页面上的某个区域中。在相同页面上，类选择器可以使用多次，但id选择器与之不同，它在每个页面上只能使用一次。在设置id的样式时，请在样式表的id名称前加上井号(#)。id名称可以包括字母、数字、连字符、下划线等，但不能有空格。下面的代码为样式表的一部分，为一个名为main的id设置了样式：
#main { color: #333333; }
我们可以将名为main的id样式设置应用于任意元素，只要加上id属性id=”main”即可。起始标签中的id值前不要加井号。下面的代码展示了如何将某个div元素设置为main的样式：
styles configured in the main id.
动手实践3.4
在本小节中，你将修改Trillium Technologies页面上的CSS与HTML代码，重新设置导航区与页脚区。启动文本编辑器，打开embedded2.html文件。
配置导航区
将字号放大并加粗显示，能够让导航链接更加醒目。请为nav元素设置一个选择器，指定属性font-size与font-weight。
nav { font-weight: bold;
font-size: 1.25em; }
配置内容区域
如果能让网页的可用性与搜索引擎的性能得到提升与优化，Trillium
Technologies公司肯定很欢迎。让我们来创建一个名为feature的类，将该类的文本颜色设置为中深红(#C70000)。
.feature { color: #C70000; }
修改无序列表中后两项。在
配置页脚区
为页脚元素建一个选择器，对文本颜色、font-size与 font-style等属性进行设置。
footer { color: #333333;
font-size: .75em;
font-style: italic; }
将文件另存为embedded3.html，并在浏览器中进行测试。你的页面看上去应当与图3.14所示类似。可与学生文件中的参考答案chapter3/embedded3.html进行比较。请注意导航、页脚元素与类样式的使用方法。
FAQ 如何为类与id命名？
CSS类与id名称可以任意选择。不过，如果CSS类名注重对结构的描述而不是与特定格式有关的话，会更加灵活且更易于维护。例如，有一个名为largeBold的类，当改变设计使显示的样式变化时，它的名称就会失去意义；而如果是nav、header、footer、content或者subheading之类与结构有关的名称时，不管相应的区域设置发生何种变化，类名仍然有意义。下面我们给出一些命名的小建议。
• 使用简短但有描述性的名称。
• 以字母开头。
• 类名里避免出现空格。
• 除了字母以外，数字、连字符、下划线等字符也可用。
尽量避免出现过度使用类(Classitis)的情况，也即只是稍微修改文本样式也要创建一个新类。事先考虑好如何配置页面区域，然后再编辑类并应用它们。这样做的结果会令你的页面更紧凑、结构更优化。
下面两个网站上有常见的类与id名称：
•
http://code.google.com/webstats/2005-12/classes.html
•
http://dev.opera.com/articles/view/mama-common-attributes
派生选择器
为某个容器元素(父元素)里的元素设置样式时，可以使用CSS派生选择器。这样做的好处在于减少各种类与id的数量，但仍能为页面上的特定区域配置样式。先列出容器选择器(可以是元素选择器、类选择器或是id选择器)，再指定需要添加样式的特定选择器，即可实现派生选择器的配置。例如，如果打算将main元素里的段落文本设置为绿色，可键入下列样式规则：
main p { color: #00ff00; }
我们将在第4章与第6章中与你一起练习派生选择器的使用。下一节将介绍一种新的HTML元素，它在配置网页区域时特别有用。
评论
还没有评论。