HTML 5与CSS 3权威指南（第2版·下册）

出版时间：2013-3-31  出版社：机械工业出版社华章公司  作者：陆凌牛  
Tag标签：无  

前言

前言为何写作本书如果要盘点2010年IT届的十大热门技术，云计算、移动开发、物联网等无疑会在其中，HTML 5肯定也是少不了的。2010年，随着HTML 5的迅猛发展，各大浏览器开发公司如Google、微软、苹果、Mozilla和Opera的浏览器开发业务都变得异常繁忙。在整个2010年度，无论是Mozilla的Firefox、Google的Chrome、苹果的Safari，还是微软的Internet Explorer，以及Opera都处于不断地推陈出新的状态当中。2010年3月，在微软的MIX2010大会上，微软的工程师在介绍Internet Explorer 9浏览器的同时，从前端技术的角度把互联网的发展分为了三个阶段：第一阶段：Web 1.0的以内容为主的网络，前端主流技术是HTML和CSS；第二阶段：Web 2.0的Ajax应用，热门技术是JavaScript/DOM/异步数据请求；第三阶段：即将迎来的HTML 5时代，亮点是富图形和富媒体内容（Graphically-Rich and Media-Rich）。前端技术将进入一个崭新的时代，至少已经开启了这扇门。在这种局势下，学习HTML 5无疑成为Web开发者的一个重要任务，谁先学会HTML 5，谁就掌握了迈向未来Web平台的一把钥匙。因此，我希望能够借助此书帮助国内的Web开发者更好地学习HTML 5以及与之相伴随的CSS 3技术，使他们能够早日运用这些技术开发出一个具有现代水平的、在未来的Web平台上能够流畅运行的Web网站或Web应用程序。第2版与第1版的区别自2011年上半年本书第1版出版以来，一直受到广大读者的欢迎，笔者在这里首先感谢广大读者的支持。自2011年之后，HTML 5与CSS 3标准处于不断发展中，各主流浏览器也以最快的速度对HTML 5中各种最新公布的API提供了支持，其中包括各种新增元素、IndexedDB API、FileSystem API、Server-Sent Events API、扩展的XMLHttpRequest API等。因此，本书第2版以第1版的内容为基础，添加2011年到2012年之间HTML 5中新增的各种元素及API，同时更新各主流浏览器CSS 3的最新支持情况，以使读者能够学习到截至2012年HTML 5与CSS 3标准中的各种知识，了解各种最新的浏览器对HTML 5与CSS 3标准的最新支持情况，能够早日用这些新的知识打造一个HTML 5时代的功能强大的Web网站或Web应用程序。具体来说，第2版在第1版的基础上，做出如下主要修改：“第2章 HTML 5与HTML 4的区别”中新增部分元素属性。“第3章 HTML 5的结构”中扩充“3.3.1大纲”一节中的内容。“第4章 表单及其他新增和改良元素”中新增大量表单元素与页面元素，移除“4.4文件API”一节与“4.5拖放API”一节。新增“第5章 HTML编辑API”一章（原“第5章绘制图形”修改为第6章，原“第6章多媒体播放”修改为“第15章多媒体相关API”中“15.1多媒体播放”一节）。新增“第7章 HistoryAPI”一章（原“第7章本地存储”章修改为“第8章本地存储”，原“第8章离线应用程序”修改为“第9章离线应用程序”）。“第8章 本地存储”中新增“8.1.4利用storage事件实时监视Web Storage中的数据”小节，新增“8.3 indexedDB数据库”一节。新增“第10章 文件API”一章。原“第9章 通信API”修改为“第11章通信API”，“11.1 跨文档消息传输”中新增“11.1.3 通道通信”小节，“11.2 Web Sockets通信”中新增“11.2.5 发送与接收原始二进制数据”、“11.2.6 实现Web Sockets API的开发框架”、“11.2.7 WebSocket 协议”与“11.2.8 Web Sockets API的适用场景”等小节，新增“11.3 Server-Sent Events API”一节。新增“第12章 扩展的XMLHttpRequest API”。原“第10章 使用Web Workers处理线程”修改为“第13章 使用Web Workers处理线程”，新增“13.5 适用场合”一节和“13.6 SharedWorker”一节。原“第11章 获取地理位置信息”修改为“第14章 获取地理位置信息”。新增“第15章 多媒体相关API”一章。新增“第16章 与页面显示相关的API”一章。新增“第17章 拖放API与通知API”（“17.1 拖放API”一节中内容为原“第4章表单及其他新增和改良元素”一章中“4.5 拖放API”一节内容）。原“第12章 CSS 3概述”修改为“第18章CSS 3概述”。“第19章 选择器”中“19.4 UI元素状态伪类选择器”一节中新增“19.4.6 E:invalid伪类选择器与E:valid伪类选择器”小节、“19.4.7 E:required伪类选择器与E:optional伪类选择器”小节与“19.4.8 E:in-range伪类选择器与E:out-of-range伪类选择器”小节。“第22章 盒相关样式”与“第23章背景与边框相关样式”的样式代码及其说明中移除部分浏览器供应商前缀。重新编写“第29章 综合实例”一章中两个代码示例，“29.2 实例2：使用HTML 5+CSS 3来构建Web应用程序”中添加了使用indexedDB API将数据书写到indexedDB数据库中的代码示例部分。本书面向的读者 本书主要适合如下人群阅读：具有一定基础的Web前端开发工程师。具有一定美术功底的Web前端设计师和UI设计师。Web项目的项目管理人员。开设了Web开发等相关专业的高等院校师生和相关培训机构的学员及教师。如何阅读本书相较于第1版，第2版有了很大的变化，篇幅也大量增加，于是我们将第2版分成上下两册。上册对HTML 5中新增的语法与标记方法、新增元素、新增API以及这些元素与API到目前为止受到了哪些浏览器的支持等进行了详细的介绍。在对它们进行介绍的同时将其与HTML 4中的各种元素与功能进行了对比，以帮助读者更好地理解为什么需要使用HTML 5、使用HTML 5有什么好处、HTML 5中究竟增加了哪些目前HTML 4不具备而在第3代Web平台上将会起到重要作用的功能与API，以及这些功能与API的详细使用方法。下册详细介绍了CSS 3中各种新增样式与属性，其中主要包括CSS 3中的各种选择器、文字与字体、背景与边框、各种盒模型、CSS 3中的布局方式、CSS 3中的变形与动画、CSS 3中与媒体类型相关的一些样式与属性等。在介绍的同时也详细讲述了这些样式与属性目前为止受到了哪些浏览器的支持，以及针对各种浏览器应该怎样在样式代码中进行各种属性的正确书写。最后，详细讲解了两个实例，第一个实例展示了如何在一个用HTML 5语言编写而成的页面中综合运用HTML 5中新增的各种结构元素，如何对这些结构元素综合使用CSS 3样式；第二个实例展示了如何使用HTML 5中新增的表单元素，以及操作本地数据库的功能来实现一个具有现代风格的Web应用程序，如何在这个利用HTML 5语言及其功能编写而成的Web应用程序中综合使用CSS 3样式来完成页面的布局以及视觉效果的美化工作。上下两册一共351个示例页面，每个页面都经过笔者上机实践，确保运行结果正确无误。每个页面的详细代码及其使用到的脚本文件、各种资源文件都可在华章公司的官方网站本书的相应页面上下载，因为是由HTML 5编写而成的网页，所以可直接在各种浏览器中打开该文件并查看运行结果（少量页面需要首先建立网站，然后通过访问网站中该页面的方式来进行查看，少量页面使用服务器端PHP脚本语言，可在Apache服务器中运行）。同时，对于HTML 5中的各种元素和各种API，以及CSS 3中的各种属性和样式受到了哪些浏览器的支持在书中都进行了详细介绍，读者可以针对不同的页面选择正确的浏览器来查看其正确的运行结果。致谢在本书的写作过程中，策划编辑杨福川先生和姜影女士给予了很大的帮助和支持，并提出了很多中肯的建议，在此表示感谢。同时，还要感谢机械工业出版社的所有编审人员为本书的出版所付出的辛勤劳动。本书的成功出版是大家共同努力的结果，谢谢你们。另外，在本书的写作过程当中，由于时间及水平上的原因，有可能存在一些对HTML 5及CSS 3上认识不全面或疏漏的地方，敬请读者批评更正，谨以最真诚的心希望能与读者共同交流，共同成长。陆凌牛

内容概要

第1版2年内印刷近10次，累计销量超过50000册，4大网上书店的读者评论超过4600条，98%以上的评论都是五星级的好评。不仅是HTML 5与CSS 3图书领域当之无愧的领头羊，而且在整个原创计算机图书领域也是佼佼者。本书已经成为HTML 5与CSS 3图书领域的一个标杆，被读者誉为“系统学习HTML 5与CSS 3技术的最佳指导参考书之一”和“Web前端工程师案头必备图书之一”。第2版首先从技术的角度结合最新的HTML 5和CSS 3标准对内容进行了更新和补充，其次从结构组织和写作方式的角度对原有的内容进行了进一步优化，使之更具价值且更便于读者阅读。
全书共29章，本书分为上下两册：上册（1～17章）全面系统地讲解了HTML 5相关的技术，以HTML 5对现有Web应用产生的变革开篇，顺序讲解了HTML 5与HTML 4的区别、HTML 5的结构、表单元素、HTML编辑API、图形绘制、History API、本地存储、离线应用、文件API、通信API、扩展的XML HttpRequest API、Web Workers、地理位置信息、多媒体相关的API、页面显示相关的API、拖放API与通知API等内容；下册（18～29章）全面系统地讲解了CSS 3相关的技术，以CSS 3的功能和模块结构开篇，顺序讲解了各种选择器及其使用、文字与字体的相关样式、盒相关样式、背景与边框相关样式、布局相关样式、变形处理、动画、颜色相关样式等内容。上下两册共351个示例页面，所有代码均通过作者上机调试。下册的最后有2个综合案例，以迭代的方式详细讲解了整个案例的实现过程，可操作性极强。

作者简介

陆凌牛，资深Web开发工程师、软件开发工程师和系统设计师。从事Web开发多年，对各种Web开发技术（包括前端和后端）都有非常深入的研究，经验极其丰富。HTML 5和CSS 3等新技术的先驱者和布道者，不仅对HTML 5与CSS 3有非常深入的研究，而且对Sencha Touch等移动应用开发框架也有非常深刻的认识，并且付诸了大量实践。同时，他还擅长微软与Java的相关技术，在C#、VB.NET、ASP.NET、SQL Server、Oracle、Java、Struts、Spring、Hibernate等方面也积累大量的实战经验。此外，他还是一位颇有影响力的技术作家：（1）处女作《HMTL 5与CSS 3权威指南》凭借优质的内容获得了读者广泛的好评，印刷近10次，销量超过50000册，被读者誉为“系统学习HTML 5与CSS 3的最佳选择”和“Web前端工程师案头必备图书之一”，不仅是HTML 5与CSS 3领域的领头羊和标杆，而且是近年来原创计算机图书领域的一面旗帜；（2）第2本著作《HTML 5开发精要与案例详解》不仅在内容上延续了前一本书的精彩，而其同样也取得了非常好的口碑和销量，已经两次重印，销量万余册。（3）第3本著作《Sencha Touch权威指南》是该领域的第一本著作，也是唯一一本著作，内容非常全面，且极具实战性，销售势头也非常不错。

书籍目录

前言上册第1章 Web时代的变迁 11.1 迎接新的Web时代 21.1.1 HTML 5时代即将来临 21.1.2 HTML 5的目标 41.2 HTML 5会深受欢迎的理由 41.2.1 世界知名浏览器厂商对HTML 5的支持 41.2.2 第一个理由：时代的要求 51.2.3 第二个理由：Internet Explorer 8 61.3 可以放心使用HTML 5的三个理由 61.4 HTML 5要解决的三个问题 7第2章 HTML 5与HTML 4的区别 82.1 语法的改变 92.1.1 HTML 5的语法变化 92.1.2 HTML 5中的标记方法 102.1.3 HTML 5确保了与之前HTML版本的兼容性 102.1.4 标记示例 122.2 新增的元素和废除的元素 122.2.1 新增的结构元素 122.2.2 新增的其他元素 142.2.3 新增的input元素的类型 182.2.4 废除的元素 182.3 新增的属性和废除的属性 192.3.1 新增的属性 192.3.2 废除的属性 212.4 全局属性 222.4.1 contentEditable属性 222.4.2 designMode属性 242.4.3 hidden属性 242.4.4 spellcheck属性 242.4.5 tabindex属性 25第3章 HTML 5的结构 263.1 新增的主体结构元素 273.1.1 article元素 273.1.2 section元素 293.1.3 nav元素 313.1.4 aside元素 /323.1.5 time元素与微格式 343.1.6 pubdate属性 353.2 新增的非主体结构元素 353.2.1 header元素 363.2.2 hgroup元素 373.2.3 footer元素 373.2.4 address元素 383.3 HTML 5结构 393.3.1 大纲 393.3.2 大纲的编排规则 443.3.3 对新的结构元素使用样式 47第4章 表单及其他新增和改良元素 484.1 新增元素与属性 494.1.1 新增属性 494.1.2 大幅度地增加与改良input元素的种类 614.1.3 对新的表单元素使用样式 714.1.4 output元素的追加 724.2 表单验证 734.2.1 自动验证 734.2.2 取消验证 734.2.3 显式验证 744.3 增强的页面元素 744.3.1 新增的figure元素与figcaption元素 754.3.2 新增的details元素与summary元素 764.3.3 新增的mark元素 774.3.4 新增的progress元素 804.3.5 新增的meter元素 814.3.6 改良的ol列表 824.3.7 改良的dl列表 834.3.8 加以严格限制的cite元素 854.3.9 重新定义的small元素 854.3.10 安全性增强的iframe元素 864.3.11 增强的script元素 89第5章 HTML编辑API 945.1 Range对象与Selection对象 955.1.1 基本概念 955.1.2 Range对象的属性与方法 975.1.3 Selection对象的属性与方法 1185.2 命令 1285.2.1 基本概念 1285.2.2 execCommand方法 1285.2.3 queryCommandSupported方法 1295.2.4 queryCommandState方法 1305.2.5 queryCommandIndeterm方法 1315.2.6 queryCommandEnabled方法 1335.2.7 queryCommandValue方法 1355.2.8 可以在各种浏览器中运行的所有命令 136第6章 绘制图形 1366.1 canvas元素的基础知识 1386.1.1 在页面中放置canvas元素 1386.1.2 绘制矩形 1396.2 使用路径 1416.2.1 绘制圆形 1416.2.2 如果没有关闭路径会怎么样 1436.2.3 moveTo与lineTo 1456.2.4 使用bezierCurveTo绘制贝济埃曲线 1466.3 绘制渐变图形 1486.3.1 绘制线性渐变 1486.3.2 绘制径向渐变 1506.4 绘制变形图形 1516.4.1 坐标变换 1516.4.2 坐标变换与路径的结合使用 1536.4.3 矩阵变换 1546.5 图形组合 1586.6 给图形绘制阴影 1606.7 使用图像 1626.7.1 绘制图像 1626.7.2 图像平铺 1646.7.3 图像裁剪 1666.7.4 像素处理 1686.8 绘制文字 1706.9 补充知识 1726.9.1 保存与恢复状态 1726.9.2 保存文件 1736.9.3 简单动画的制作 174第7章 History API 1777.1 History API的基本概念 1787.2 History API使用示例 1797.2.1 使用History API 1797.2.2 结合使用Canvas API与History API 188第8章 本地存储 1938.1 Web Storage 1948.1.1 Web Storage概述 1948.1.2 简单Web留言本 1978.1.3 作为简易数据库来利用 2008.1.4 利用storage事件实时监视Web Storage中的数据 2028.2 本地数据库 2048.2.1 本地数据库的基本概念 2048.2.2 用executeSql来执行查询 2058.2.3 使用数据库实现Web留言本 2068.2.4 transaction方法中的处理 2098.3 indexedDB数据库 2118.3.1 indexedDB数据库的基本概念 2118.3.2 连接数据库 2118.3.3 数据库的版本更新 2138.3.4 创建对象仓库 2188.3.5 创建索引 2228.3.6 索引的multiEntry属性值 2268.3.7 使用事务 2278.3.8 保存数据 2298.3.9 获取数据 2328.3.10 根据主键值检索数据 2358.3.11 根据索引属性值检索数据 2418.3.12 复合索引 2468.3.13 统计对象仓库中的数据数量 2508.3.14 使用indexedDB API制作Web留言本 252第9章 离线应用程序 2599.1 离线Web应用程序详解 2609.1.1 新增的本地缓存 2609.1.2 本地缓存与浏览器网页缓存的区别 2609.2 manifest文件 2619.3 浏览器与服务器的交互过程 2639.4 applicationCache对象 2649.4.1 swapCache方法 2659.4.2 applicationCache对象的事件 267第10章 文件API 27010.1 FileList对象与file对象 27110.2 ArrayBuffer对象与ArrayBufferView对象 27210.2.1 基本概念 27210.2.2 ArrayBuffer对象 27210.2.3 ArrayBufferView对象 27310.2.4 DataView对象 27410.3 Blob对象与BlobBuilder对象 27810.3.1 Blob对象 27810.3.2 BlobBuilder对象 28010.3.3 Blob对象的slice方法 28310.4 FileReader对象 28410.4.1 FileReader对象的方法 28410.4.2 FileReader对象的事件 28510.4.3 FileReader对象的使用示例 28510.5 FileSystem API 29210.5.1 FileSystem API概述 29210.5.2 FileSystem API的适用场合 29210.5.3 请求访问文件系统  29310.5.4 申请磁盘配额 29610.5.5 创建文件 30010.5.6 写入文件 30210.5.7 在文件中追加数据 30510.5.8 读取文件 30710.5.9 复制磁盘中的文件 30910.5.10 删除文件 31110.5.11 创建目录 31210.5.12 读取目录中的内容 31610.5.13 删除目录 31910.5.14 复制文件或目录 32110.5.15 移动文件或目录与重命名文件或目录 32310.5.16 filesystem:URL前缀 32610.5.17 综合案例 32810.6 Base64编码支持 33610.6.1 Base64编码概述 33610.6.2 在HTML 5中支持Base64编码 338第11章 通信API 34211.1 跨文档消息传输 34311.1.1 跨文档消息传输的基本知识 34311.1.2 跨文档消息传输示例 34411.1.3 通道通信 34611.2 WebSockets通信 35011.2.1 WebSockets通信的基本知识 35011.2.2 使用WebSockets API 35011.2.3 WebSockets API使用示例 35111.2.4 发送对象 35311.2.5 发送与接收原始二进制数据 35411.2.6 实现WebSockets API的开发框架 35511.2.7 WebSocket 协议 35511.2.8 WebSockets API的适用场景 35611.3 Server-Sent Events API 35611.3.1 Server-Sent Events API的基本概念 35611.3.2 Server-Sent Events API的实现方法 35611.3.3 事件ID的使用示例 363第12章 扩展的XMLHttpRequest API 36612.1 从服务器端获取二进制数据 36712.1.1 ArrayBuffer响应 36812.1.2 Blob响应 37312.2 发送数据 37412.2.1 发送字符串 37412.2.2 发送表单数据 37612.2.3 上传文件 37812.2.4 发送Blob对象 37912.2.5 发送ArrayBuffer对象 38112.3 跨域数据请求 385第13章 使用Web Workers处理线程 38813.1 基础知识 38913.2 与线程进行数据的交互 39213.3 线程嵌套 39413.3.1 单层嵌套 39513.3.2 在多个子线程中进行数据的交互 39713.4 线程中可用的变量、函数与类 39813.5 适用场合 39913.6 SharedWorker 39913.6.1 基础知识 39913.6.2 实现前台页面与后台线程之间的通信 40013.6.3 定义页面与共享的后台线程开始通信时的处理 40013.6.4 SharedWorker的使用示例 401第14章 获取地理位置信息 40614.1 Geolocation API的基本知识 40714.1.1 取得当前地理位置 40714.1.2 持续监视当前地理位置的信息 40914.1.3 停止获取当前用户的地理位置信息 40914.2 position对象 40914.3 在页面上使用google地图 411第15章 多媒体相关API 41415.1 多媒体播放 41515.1.1 video元素与audio元素的基础知识 41515.1.2 属性 41715.1.3 方法 42115.1.4 事件 42315.2 Web Audio API 42615.2.1 AudioContext对象 42615.2.2 加载声音 42715.2.3 播放声音 42815.2.4 将声音加载处理封装在类中 42915.2.5 控制节奏 43115.2.6 控制音量 43315.2.7 两个声音的交叉混合 43615.2.8 多个音频文件之间的平滑过渡 43915.2.9 对音频使用滤波处理 443第16章 与页面显示相关的API 44716.1 Page Visibility API 44816.1.1 Page Visibility API概述 44816.1.2 Page Visibility API的使用场合 44816.1.3 实现Page Visibility API 44816.2 Fullscreen API 45116.2.1 Fullscreen API概述 45116.2.2 实现Fullscreen API 45116.2.3 Fullscreen API代码使用示例 454第17章 拖放API与通知API 45717.1 拖放API 45817.1.1 实现拖放的步骤 45817.1.2 DataTransfer对象的属性与方法 46117.1.3 设定拖放时的视觉效果 46117.1.4 自定义拖放图标 46217.2 通知API 46317.2.1 通知API的基础知识 46317.2.2 通知API的代码使用示例 465下  册第18章 CSS 3概述 46718.1 概要介绍 46818.1.1 CSS 3是什么 46818.1.2 CSS 3的历史 46818.2 使用CSS 3能做什么 46918.2.1 模块与模块化结构 46918.2.2 一个简单的CSS 3示例 470第19章 选择器 47319.1 选择器概述 47519.2 属性选择器 47519.2.1 属性选择器概述 47519.2.2 CSS3中的属性选择器 47719.2.3 灵活运用属性选择器 47819.3 结构性伪类选择器 47919.3.1 CSS中的伪类选择器及伪元素 47919.3.2 选择器root、not、empty和target 48319.3.3 选择器：first-child、last-child、nth-child和nth-last-child 48819.3.4 选择器：nth-of-type和nth-last-of-type 49219.3.5 循环使用样式 49419.3.6 only-child选择器 49619.4 UI元素状态伪类选择器 49819.4.1 选择器：E:hover、E:active和E:focus 49819.4.2 E:enabled伪类选择器与E:disabled伪类选择器 50019.4.3 E:read-only伪类选择器与E:read-write伪类选择器 50119.4.4 伪类选择器：E:checked、E:default和E:indeterminate 50219.4.5 E::selection伪类选择器 50519.4.6 E:invalid伪类选择器与E:valid伪类选择器 50619.4.7 E:required伪类选择器与E:optional伪类选择器 50719.4.8 E:in-range伪类选择器与E:out-of-range伪类选择器 50819.5 通用兄弟元素选择器 509第20章 使用选择器在页面中插入内容 51120.1 使用选择器来插入文字 51220.1.1 使用选择器来插入内容 51220.1.2 指定个别元素不进行插入 51320.2 插入图像文件 51420.2.1 在标题前插入图像文件 51420.2.2 插入图像文件的好处 51520.2.3 将alt属性的值作为图像的标题来显示 51720.3 使用content属性来插入项目编号 51820.3.1 在多个标题前加上连续编号 51820.3.2 在项目编号中追加文字 51920.3.3 指定编号的样式 51920.3.4 指定编号的种类 51920.3.5 编号嵌套 52020.3.6 中编号中嵌入大编号 52120.3.7 在字符串两边添加嵌套文字符号 523第21章 文字与字体相关样式 52521.1 给文字添加阴影—text-shadow属性 52621.1.1 text-shadow属性的使用方法 52621.1.2 位移距离 52821.1.3 阴影的模糊半径 52821.1.4 阴影的颜色 52921.1.5 指定多个阴影 52921.2 让文本自动换行—word-break属性 53021.2.1 依靠浏览器让文本自动换行 53021.2.2 指定自动换行的处理方法 53021.3 让长单词与URL地址自动换行—word-wrap属性 53221.4 使用服务器端字体—Web Font与@font-face属性 53221.4.1 在网页上显示服务器端字体 53221.4.2 定义斜体或粗体字体 53421.4.3 显示客户端本地的字体 53621.4.4 属性值的指定 53721.5 修改字体种类而保持字体尺寸不变—font-size-adjust属性 53821.5.1 字体不同导致文字大小的不同 53821.5.2 font-size-adjust属性的使用方法 54021.5.3 浏览器对于aspect值的计算方法 54021.5.4 font-size-adjust属性的使用示例 541第22章 盒相关样式 54322.1 盒的类型 54422.1.1 盒的基本类型 54422.1.2 inline-block类型 54522.1.3 inline-table类型 55222.1.4 list-item类型 55422.1.5 run-in类型与compact类型 55522.1.6  表格相关类型 55622.1.7 none类型 55822.1.8 各种浏览器对于各种盒类型的支持情况 55922.2 对于盒中容纳不下的内容的显示 56022.2.1 overflow属性 56022.2.2 overflow-x属性与overflow-y属性 56222.2.3 text-overflow属性 56322.3 对盒使用阴影 56522.3.1 box-shadow属性的使用方法 56522.3.2 将参数设定为0 56622.3.3 对盒内子元素使用阴影 56722.3.4 对第一个文字或第一行使用阴影 56822.3.5 对表格及单元格使用阴影 56822.4 指定针对元素的宽度与高度的计算方法 57022.4.1 box-sizing属性 57022.4.2 为什么要使用box-sizing属性 572第23章 背景与边框相关样式 57423.1 与背景相关的新增属性 57523.1.1 指定背景的显示范围—background-clip属性 57523.1.2 指定绘制背景图像的绘制起点—background-origin属性 57723.1.3 指定背景图像的尺寸—background-size属性 57923.2 在一个元素中显示多个背景图像 58223.3 圆角边框的绘制 58323.3.1 border-radius属性 58323.3.2 在border-radius属性中指定两个半径 58423.3.3 不显示边框时 58523.3.4 修改边框种类时 58523.3.5 绘制四个角不同半径的圆角边框 58523.4 使用图像边框 58623.4.1 border-image属性 58623.4.2 border-image属性的最简单的使用方法 58723.4.3 使用border-image属性来指定边框宽度 58923.4.4 中央图像的自动拉伸 59023.4.5 指定四条边中图像的显示方法 59123.4.6 使用背景图像 594第24章 CSS 3中的变形处理 59624.1 transform功能的基础知识 59724.1.1 如何使用transform功能 59724.1.2 transform功能的分类 59824.2 对一个元素使用多种变形的方法 60224.2.1 两个变形示例 60224.2.2 指定变形的基准点 604第25章 CSS 3中的动画功能 60725.1 Transitions功能 60825.1.1 Transitions功能的使用方法 60825.1.2 使用Transitions功能同时平滑过渡多个属性值 60925.2 Animations功能 61225.2.1 Animations功能的使用方法 61225.2.2 实现多个属性值同时改变的动画 61425.2.3 实现动画的方法 61625.2.4 实现网页的淡入效果 618第26章 布局相关样式 61926.1 多栏布局 62026.1.1 使用float属性或position属性的缺点 62026.1.2 使用多栏布局方式 62226.2 盒布局 62526.2.1 盒布局的基础知识 62526.2.2 弹性盒布局 629第27章 Media Queries相关样式 64127.1 根据浏览器的窗口大小来选择使用不同的样式 64227.2 在iPhone中的显示 64627.3 Media Queries的使用方法 647第28章 CSS 3的其他重要样式和属性 /65028.1 颜色相关样式 65128.1.1 利用alpha通道来设定颜色 65128.1.2 alpha通道与opacity属性的区别 65328.1.3 指定颜色值为transparent 65528.2 用户界面相关样式 65628.2.1 轮廓相关样式 65628.2.2 resize属性 65928.3 取消对元素的样式指定—initial属性值 66028.3.1 取消对元素的样式指定 66028.3.2 使用initial属性值并不等于取消样式设定的特例 662第29章 综合实例 66429.1 实例1：使用HTML 5中新增结构元素来构建网页 66529.1.1 组织网页结构 66529.1.2 构建网页标题 66729.1.3 构建侧边栏 67029.1.4 构建主体内容 67229.1.5 构建版权信息 67829.2 实例2：使用HTML 5+CSS 3来构建Web应用程序 67829.2.1 HTML 5页面代码分析 67929.2.2 CSS 3样式代码分析 68229.2.3 JavaScript脚本代码分析 685附录A 可以在各种浏览器中运行的所有命令 698附录B 2012年7月五大浏览器的最新版对HTML 5的支持情况 706

章节摘录

第18章 CSS 3概述18.1  概要介绍18.2  使用CSS 3能做什么从2010年开始，HTML 5与CSS 3就一直是互联网技术中最受关注的两个话题。2010年MIX10大会上微软的工程师在介绍IE9时，从前端技术的角度把互联网的发展分为三个阶段：第一阶段是Web 1.0的以内容为主的网络，前端主流技术是HTML和CSS；第二阶段是Web 2.0的Ajax应用，热门技术是JavaScript/DOM/异步数据请求；第三阶段是即将迎来的HTML 5+CSS 3的时代，这两者相辅相成，使互联网又进入了一个崭新的时代。本章将对CSS 3进行一个全面的、概要的介绍，使大家对CSS 3有一个初步的、总体上的认识。学习内容：掌握CSS 3的基础知识，知道什么是CSS 3，了解CSS 3的发展历史。掌握CSS 3的模块化结构，了解CSS 3中包含了哪些结构。了解CSS 3与CSS 2有什么主要区别，了解CSS 3将对下一代Web平台上的界面设计做出哪些重大贡献。18.1  概要介绍18.1.1  CSS 3是什么首先，我们对CSS 3做一个概要的介绍。什么是CSS 3？CSS 3是CSS技术的一个升级版本，是由Adobe Systems、Apple、Google、HP、IBM、Microsoft、Mozilla、Opera、Sun Microsystems等许多Web界的巨头联合组成的一个名为“CSS Working Group”的组织共同协商策划的。虽然目前很多细节还在讨论之中，但它还是不断地朝前发展着。2010年在HTML 5成为IT界人士关注的焦点的同时，它也开始慢慢地普及开来。18.1.2  CSS 3的历史 接下来，我们从总体上看一下CSS的发展历史。CSS 1。1996年12月，CSS 1（Cascading Style Sheets,level 1）正式推出。在这个版本中，已经包含了font的相关属性、颜色与背景的相关属性、文字的相关属性、box的相关属性等。CSS 2。1998年5月，CSS 2（Cascading Style Sheets,level 2）正式推出。在这个版本中开始使用样式表结构。CSS 2.1。2004年2月，CSS 2.1（Cascading Style Sheets,level 2 revision 1）正式推出。它在CSS 2的基础上略微做了改动，删除了许多诸如text-shadow等不被浏览器所支持的属性。现在所使用的CSS基本上是在1998年推出的CSS 2的基础上发展而来的。10年前在Internet刚开始普及的时候，就能够使用样式表来对网页进行视觉效果的统一编辑，确实是一件可喜的事情。但是在这10年间CSS可以说是基本上没有什么很大的变化，一直到2010年终于推出了一个全新的版本—CSS 3。18.2  使用CSS 3能做什么18.2.1  模块与模块化结构在CSS 3中，并没有采用总体结构，而是采用了分工协作的模块化结构，这些模块如表18-1所示。表18-1CSS 3中的模块 模块名称 功能描述basic box model 定义各种与盒相关的样式Line 定义各种与直线相关的样式Lists 定义各种与列表相关的样式Hyperlink Presentation 定义各种与超链接相关的样式。譬如锚的显示方式、激活时的视觉效果等Presentation Levels 定义页面中元素的不同的样式级别Speech 定义各种与语音相关的样式。譬如音量、音速、说话间歇时间等属性Background and border 定义各种与背景和边框相关的样式Text 定义各种与文字相关的样式Color 定义各种与颜色相关的样式Font 定义各种与字体相关的样式Paged Media 定义各种页眉、页脚、页数等页面元数据的样式Cascading and inheritance 定义怎样对属性进行赋值Value and Units 将页面上各种各样的值与单位进行统一定义，以供其他模块使用Image Values 定义对image元素的赋值方式2D Transforms 在页面中实现2维空间上的变形效果3D Transforms 在页面中实现3维空间上的变形效果Transitions 在页面中实现平滑过渡的视觉效果Animations 在页面中实现动画CSSOM View 查看管理页面或页面的视觉效果，处理元素的位置信息Syntax 定义CSS样式表的基本结构、样式表中的一些语法细节、浏览器对于样式表的分析规则Generated and Replaced Content 定义怎样在元素中插入内容Marquee 定义当一些元素的内容太大，超出了指定的元素尺寸时，是否以及怎样显示溢出部分Ruby 定义页面中ruby元素（用于显示拼音文字）的样式Writing Modes 定义页面中文本数据的布局方式Basic User Interface 定义在屏幕、纸张上进行输出时页面的渲染方式Namespaces 定义使用命名空间时的语法Media Queries 根据媒体类型来实现不同的样式‘Reader’ Media Type 定义用于屏幕阅读器之类的阅读程序时的样式Multi-column Layout 在页面中使用多栏布局方式Template Layout 在页面中使用特殊布局方式Flexible Box Layout 创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局Grid Position 在页面中使用网格布局方式Generated Content for Paged Media 在页面中使用印刷时使用的布局方式，那么，为什么需要分成这么多模块来进行管理呢？这是为了避免产生浏览器对于某个模块支持不完全的情况。如果只有一个总体结构，这个总体结构会过于庞大，在对其支持的时候很容易造成支持不完全的情况。如果把总体结构分成几个模块，各浏览器可以选择对于哪个模块进行支持、对哪个模块不进行支持，支持的时候也可以集中把某一个模块全部支持完了再支持另一个模块，以减少支持不完全的可能性。例如，台式计算机、笔记本和手机上用的浏览器应该针对不同的模块进行支持。如果采用模块分工协作的话，不仅是台式计算机，各种设备上所用的浏览器都可以选用不同模块进行支持。

编辑推荐

《实战系列:HTML 5与CSS 3权威指南(第2版•下册)》编辑推荐：畅销书全新升级，第1版上市后已印刷近10次，累计销量超过50000册，是该领域公认的标杆之作，销量和口碑都极佳。资深专家撰写，内容系统而全面，详尽讲解了HTML 5与CSS 3的所有功能和特性；注重实战，不仅包含大量辅助理解的小案例，而且还包含两个综合性案例，可操作性极强。