CSS3实战·开发与设计

前言

译 者 序    本书英文版书名《Practical CSS3：Develop and Design》，作者Chris Mills是一名杰出的Web技术专家、Web开放标准的布道者和Web教育变革者。他创立了Opera网络标准课程，是W3C网络教育社区组的联职主席。贯穿本书的一个核心就是Pratical，也就是我们说的“实战”。毕竟技术不是艺术作品，不能停留在纸面上，投入实际工作才是技术的最佳归宿。    CSS3是近两年在Web开发技术领域最热门的关键词之一，另一个当然就是HTML5了。CSS3带来的种种新特性与惊喜想必相当多的读者已经耳熟能详了，但就其实用化来说，我相信相当多的Web开发者选择了保留态度。大量的文章常常将CSS3与HTML5放在一起作为未来Web开发技术发展的方向，这也许给人们造成了错觉，但没有任何资料表明CSS3是一定要与HTML5配合运用或者CSS3就是针对HTML5的，事实上CSS3早在1999年就开始制订，而HTML5的前身草案直至2004年才提出。译者认为CSS3最有意思的改变不是引入了哪些强大的特性，而是它通过模块化的方式解决了与过去版本、未来版本的关系问题。例如CSS2上的特性被归为CSS二级模块，而CSS3基于这些特性发展出来的新特性则称为三级模块。模块的构建是可以跨级别的，对于未来的CSS来说，一些模块可以直接从二级模块上发展而来，成为四级模块，因此，未来很可能不会存在一个称为CSS4的独立模块，以后谈到的CSS4将指的是CSS四级模块的集合。正是由于模块化的管理方式，浏览器可以以模块为单位逐步完成对CSS3的支持。对于Web开发者来说，也鼓励我们采用新的CSS模块。我们完全有理由从现在起就以拥抱的姿态去迎接CSS3，而不是像电影《艺术家》中的默片大师那样在有声电影时代面前输给技术的进步、输给自己的骄傲、输给时代的车轮。    由于“实战”是本书的核心与目的，书中以大量的单独例子和一些贯穿全书的实例来让读者亲身实战CSS3。作者Chris Mills对谈及的每个模块的用途、用法、发展状况都做出了翔实的阐述，对支持性不足的模块还介绍了各种实用的后备方案和优雅降级，甚至引入了像CSS3PIE这样神奇的解决方案来让那些旧版浏览器在一定程度上支持CSS3的新特性。读完本书，相信你对CSS3的实用化会有全新的认识，作者贯穿全书的开发思想也一定能让读者在其他领域受益匪浅。    本书的翻译工作主要由韦剑宾和我两名译者完成，第6章由蔡述雄翻译。    感谢林小志和本书编辑团队中的秦健，没有你们，我们将与此书失之交臂。    感谢腾讯ISUX部门的前端同事们（特别是飞鱼）以及各位产品经理群的朋友们，谢谢你们教会我们很多知识。感谢于海洋，谢谢你在百忙之中为本书贡献了一份力！    感谢背后神秘人——翁彦骏，没有你的支持，我可能会胆怯不敢接下此翻译工作；也感谢你帮忙负责整理译稿的早期格式和符号校正工作。    最后将由衷的谢意献给亲爱的家人。因为我们将陪伴家人的时间抽出来贡献给翻译工作而忽略你们！我们深爱着你们！林雪玉

内容概要

Chris Mills　资深Web开发工程师、开放Web标准的布道者，从事Web开发多年，对各种Web开发技术都有非常深入的研究，尤其是HTML5与CSS3，经验极其丰富。目前就职于Opera公司，是Opera网络标准课程的创立者，同时也是W3C网络教育社区组的联职主席。他还为dev.opera.com、.net magazine、A List Apart等网站编写开放标准，并在高校和全球行业会议上发表相关演讲。

书籍目录

目　　录译者序CSS3欢迎你致　谢第1章　CSS3和现代Web设计 / 11.1　为什么要使用CSS3 / 21.2　现代Web设计理念 / 31.2.1　可访问性第一 / 31.2.2　可用性其次 / 51.2.3　优雅降级和渐进增强 / 51.3　对内容的思考过程 / 61.4　本书中的CSS3模块 / 71.5　常用CSS3特性 / 91.5.1　厂商前缀 / 91.5.2　CSS3颜色 / 111.5.3　用rem调整文本大小 / 131.5.4　CSS3选择器 / 15小结 / 24第2章　利用HTML5与JavaScript构建坚实的跨浏览器模板 / 252.1　从HTML5语义开始 / 262.1.1　为什么用HTML5 / 262.1.2　HTML5错误处理 / 272.2　建立模板 / 282.2.1　HTML5的DOCTYPE / 282.2.2　语言和基本文档纲要 / 292.2.3　定义文档字符集 / 292.2.4　XHTML5和代码风格 / 302.2.5　为HTML5语义元素添加跨浏览器支持性 / 302.3　校验HTML5 / 322.4　探索HTML5元素 / 332.4.1　与 / 342.4.2　与 / 362.4.3　与 / 382.4.4　 / 382.4.5　 / 392.4.6　 / 392.4.7　与 / 402.4.8　 / 402.4.9　 / 422.4.10　HTML5表单元素 / 422.4.11　 / 442.5　CSS重置和normalize.css / 452.6　JavaScript库综述 / 462.6.1　css3-mediaqueries-js / 462.6.2　CSS3PIE / 472.6.3　Modernizr / 482.6.4　Selectivizr / 482.7　IE条件注释 / 48小结 / 50第3章　让字体和文本变得有趣 / 513.1　蟒蛇来啦 / 523.2　使用Web字体 / 533.2.1　给示例使用Web字体 / 543.2.2　Web-Font问题 / 563.2.3　Windows渲染问题 / 593.2.4　商用字体服务 / 623.3　CSS3文本争执 / 643.3.1　文本阴影 / 653.3.2　控制文本溢出 / 673.3.3　word-wrap打破长单词 / 683.3.4　控制断字 / 693.4　CSS3排版 / 703.4.1　基于Web的连写和文本渲染优化 / 713.4.2　启用Web高级的字体特性font-feature-settings / 723.4.3　连写和自由连写 / 733.4.4　数字、分数和序数 / 733.4.5　小型大写字母和小号大写字母 / 753.4.6　字距调整 / 763.4.7　样式集和其他组合效果 / 763.4.8　font-feature用途的小贴士 / 77小结 / 78第4章　CSS3修饰的增强盒子 / 794.1　CSS3修饰的光明前景 / 804.2　border-radius：圆角的福音 / 824.3　使用box-shadow添加立体效果 / 854.4　用CSS渐变来修饰 / 884.4.1　线性渐变 / 884.4.2　径向渐变 / 924.4.3　为旧版IE提供渐变支持 / 984.5　多重背景 / 994.6　构思巧妙的盒子：border-image / 1014.7　box-decoration-break / 1064.8　给横幅广告添加修饰 / 1074.8.1　构建基础 / 1074.8.2　添加CSS3火花 / 1094.8.3　支持旧版浏览器 / 1104.8.4　改进广告 / 110小结 / 111第5章　用CSS3制作动画效果 / 1125.1　CSS动画 / 1135.2　变形 / 1145.2.1　2D变形 / 1155.2.2　3D变形 / 1215.3　过渡 / 1345.3.1　选择过渡的元素 / 1355.3.2　选择过渡持续时间 / 1365.3.3　过渡延迟时间 / 1365.3.4　过渡的速率变化 / 1365.3.5　过渡简写及多重过渡 / 1415.4　动画 / 1425.4.1　建立基本动画 / 1425.4.2　给元素应用动画 / 1445.4.3　设置动画持续时间 / 1455.4.4　调整动画的速率 / 1465.4.5　增加延迟时间 / 1475.4.6　选择animation-direction:back还是forth / 1475.4.7　animation-fill-mode / 1485.4.8　简写和多重动画 / 1485.5　用动画提升横幅广告 / 1495.6　用Modernizr提供备选方案 / 1535.6.1　给页面添加Modernizr / 1545.6.2　提供替换样式 / 1555.6.3　动画和脚本 / 157小结 / 163第6章　使用CSS生成图标 / 1646.1　翻滚吧，图标 / 1656.2　在页面上使用图标 / 1656.3　何时使用图标 / 1676.4　生成图标的基础 / 1686.4.1　内容生成图标 / 1706.4.2　CSS Sprite图 / 1706.4.3　更“防弹式”的图标 / 1716.4.4　多背景图片的修饰图标 / 1726.5　Web字体作为图标 / 1736.6　独特的纯CSS图标 / 176小结 / 179第7章　CSS3布局排版 / 1807.1　CSS3布局模块简介 / 1817.2　多栏布局 / 1827.2.1　设置分栏的数量 / 1837.2.2　根据宽度分栏而非数量 / 1847.2.3　定义分栏空隙 / 1857.2.4　定义分栏内容的填充方式 / 1857.2.5　内容的跨栏目布置 / 1877.2.6　控制栏目的划分 / 1887.2.7　实战多栏布局 / 1897.2.8　多栏布局的问题 / 1897.3　使用Flexbox / 1917.3.1　控制Flexbox的子项伸缩流的方向 / 1927.3.2　自定义子元素的显示顺序 / 1957.3.3　对齐Flexbox子项 / 1957.3.4　弹性的Flexbox / 1977.3.5　用Modernizr实现跨浏览器Flexbox / 2017.4　探索网格 / 2017.4.1　定义网格结构 / 2027.4.2　将内容嵌套在网格上 / 2037.4.3　一个真实的网格例子 / 2047.4.4　网格问题 / 2057.5　值得一提的其他布局模块 / 2067.5.1　区域 / 2067.5.2　排除 / 2087.5.3　GCPM / 210小结 / 211第8章　响应式和自适应设计 / 2128.1　网络浏览器简史 / 2138.2　响应式设计策略 / 2148.2.1　不做任何特殊处理 / 2158.2.2　不同的设备提供不同的内容 / 2158.2.3　为不同浏览器/设备优化网站 / 2188.3　弹性布局技术 / 2198.3.1　可伸缩的容器 / 2198.3.2　响应式媒体布局 / 2208.4　媒介查询 / 2238.4.1　一些媒介查询的例子 / 2258.4.2　移动设备优先 / 2308.5　媒介查询补丁 / 2318.6　提供响应式图片 / 2328.7　移动浏览器是个骗子 / 2338.8　高保真设备 / 2378.9　一个响应式的重金属横幅广告 / 2398.9.1　第一种选择：800px或者更小 / 2398.9.2　第二种选择：480px或者更小 / 239小结 / 241

编辑推荐

资深Web技术专家、Web开放标准布道者撰写，系统讲解最新CSS3标准中的各种功能和特性，Web前端工程师必备     注重实战，每个知识点都辅之以设计精巧的案例，可操作性极强

作者简介

全书共8章：第1章简单介绍了CSS3的重要更新、现代Web设计的理念以及常用的CSS3特性；第2章讲解了如何利用HTML5和JavaScript构建坚实的跨浏览器模板；第3章详细介绍了CSS3中新增的字体、文本、排版方面的特性；第4章讲解了CSS3新增的各种与盒子相关的特性；第5章和第6章分别讲解了CSS3的动画特性以及如何利用CSS3生成图标；第7章则介绍了CSS3中新增的与排版和布局相关的特性，以及如何利用CSS3进行排版和布局；第8章以迭代的方式完成了贯穿全书的一个完整案例，介绍了媒介查询、viewport、自适应图片和视频技术等内容，旨在帮助读者将理论知识贯穿于实践中，迅速成为新一代Web开发技术中的弄潮儿。

---

 CSS3实战·开发与设计下载

---