关于本书

CSS日趋成熟。越来越多的Web开发人员意识到自己虽然“知道”CSS，但是理解得还不够深入。近年来，CSS语言不断发展，曾经精通CSS的开发人员现在也可能需要掌握很多新技能。本书旨在达成两个目标：帮你深度掌握CSS语言，并快速了解CSS的新进展和新特性。

本书名叫《深入解析CSS》，但它也是一本关于CSS广度的书。对于某些很难理解或通常被错误理解的CSS概念，我会详细地解释它们的工作原理及其展现某种行为的原因。对于有些话题，我不会面面俱到，但是介绍的内容足以让你高效地运用相关技术，并且会指出进一步学习的方向。总之，这本书能够填补你的知识盲区。

本书有些话题值得另外写一本书去单独介绍，比如：动画、排版，甚至是Flexbox和网格布局。我的目的是帮你扩展知识面、补齐短板，并让你爱上CSS。

本书读者

首先，本书的读者应该是那些疲于跟CSS较劲、想要真正理解CSS工作原理的开发人员。你可以是行业新手，也可以是从业十几年的老手。

本书的读者应该对HTML、CSS以及JavaScript有大致的了解。只要你熟悉CSS的基础语法，就能理解本书。不过，本书主要面向的是那些已经写过一些CSS，但遇到了困难，对CSS感到沮丧的开发人员。本书用到了少量JavaScript，我让这些JavaScript代码尽可能简单，因此只要你能理解一些简短的代码片段，就应该没有问题。

如果你是一位想要涉足Web设计的设计师，本书也会让你获益良多，尽管本书并没有特别针对设计师而写。这本书还能够让你了解即将共事的开发人员的想法。

本书结构

本书共16章，分为四部分。第一部分，“基础回顾”，会回顾基础知识，并重点关注几个很容易被忽视的细节。

❑ 第1章介绍层叠和继承。这些概念负责控制哪些样式会作用于哪些网页元素。

❑ 第2章讨论相对单位，重点介绍em和rem。相对单位很灵活，是CSS中的重要工具。这一章会让你熟悉它们的使用方法。

❑ 第3章介绍盒模型，包括控制网页元素大小和元素之间的间距。

第二部分，“精通布局”，会介绍网页布局的各种关键工具。

❑ 第4章深入探索浮动布局。我们将构建一个多列布局的页面，并学习如何处理浮动布局的一些棘手的特性。

❑ 第5章介绍Flexbox。这是一种比较新的布局方式。这一章先介绍基础概念，然后进入布局实践。

❑ 第6章介绍一种全新的布局工具——网格。它实现了之前CSS无法实现的布局。

❑ 第7章深入探索用position属性实现定位，包括绝对定位、固定定位等。定位是很多开发人员容易遇到麻烦的地方，所以加强对定位的理解至关重要。

❑ 第8章介绍响应式设计，具体会介绍在不同屏幕尺寸和设备类型上构建响应式网站的三大原则。

第三部分，“大型应用程序中的CSS”，会介绍新的最佳实践。让网页元素按照你的想法展现是一回事；随着Web应用程序的发展，为了将来可以理解和维护而组织代码则是另一回事。这一部分会介绍一些用于管理代码的重要技术。

❑ 第9章介绍如何用模块化的方式组织CSS，以便代码可以复用并且易于维护。

❑ 第10章介绍如何构建一个模式库。这是团队成员使用和维护CSS的一个关键部分。

第四部分，“高级话题”，会带你进入设计的世界。这一部分会探讨与设计师共事时需要考虑哪些重要因素，以及自己如何做一点设计工作——因为有时会派上用场。

❑ 第11章讨论阴影、渐变以及混合模式。它们搭配起来可以实现优雅的用户界面。

❑ 第12章介绍如何使用对比、颜色以及间距。当开始注意这些细节时，网页设计在从优秀到卓越的路上就迈出了一大步。

❑ 第13章介绍Web排版：使用在线字体文件为网站或者应用程序赋予独特的个性。

❑ 第14章介绍基于过渡的网页动效，用于改变网页元素的形状、颜色或大小。

❑ 第15章介绍变换，它是跟过渡和动画搭配使用的重要工具。这一章也会探讨在网页中实现动效的性能。

❑ 第16章讨论关键帧动画。你将学习如何使用复杂动效向用户传递信息。

最后还有两个附录。

❑ 附录A列举了目前所有的CSS选择器类型。

❑ 附录B介绍了预处理器。如果你对预处理器不是很熟悉的话，可以从这一附录开始。

我精心编排了本书。本书首先会介绍你必须了解的基础知识，后面的话题都是基于前面的话题展开的。我在很多地方会引用前面章节的内容和示例，并将它们联系起来。虽然我会在不同的地方列出有价值的参考资料，但是建议你按顺序阅读本书。

代码约定和代码库

本书包含了许多源码示例。有的是在编号了的代码清单中，有的是在正文里。所有源码都采用等宽字体，以便跟普通文字区分开。有时候代码还会加粗，以突出在前一步的基础上改动过的代码，例如当给已有的一行代码加上新特性时。

在很多情况下，书中出现的源码经过了重新格式化。我添加了换行并调整了缩进以适应本书版面。因为极少数情况下，这样还不够，所以代码清单会加入行继续标记（➥）。另外，如果正文中对代码做了解释，则会将代码清单中的注释删掉。许多代码清单中会写注解，以强调重要概念。

CSS需要跟HTML一起搭配使用。我通常会提供一份HTML和一份CSS代码清单。在大多数章节里，多份CSS清单会复用同一份HTML。我会指导你一步一步地编辑样式表，并会尽可能清晰地显示每一步之间的差异。

本书的源码放在git仓库（http://github.com/CSSInDepth/css-in-depth）以及Manning出版社网站（http://manning.com/books/css-in-depth）中。乍一看会觉得缺失了一些代码清单——因为可运行的示例同时需要HTML和CSS，所以我就将大部分的代码清单放在一份HTML中，用<style>标签放CSS代码。也就是说在代码库里，HTML和CSS合并到了一个文件中。

比如在第1章中，代码清单1-1是HTML代码，代码清单1-2是要应用到HTML上的CSS代码。在代码库里，我将它们合并到listing-1.2.html文件中了。代码清单1-3是对代码清单1-2的修改，放在了listing-1.3.html文件中，它也包含了代码清单1-1里的HTML代码。

浏览器版本

跨浏览器测试是Web开发中很重要的一部分。本书大多数代码在IE10、IE11、微软Edge、Chrome、Firefox、Safari、Opera，以及大多数移动浏览器中均支持。较新的特性不一定得到了所有浏览器的支持，遇到这种情况时我会及时说明。

不要仅仅因为某个浏览器不支持某个特性就不去使用它。通常可以为旧版的浏览器提供一个回退（fallback）方案。本书会在很多地方提供这种回退方案的示例。

如果你要在自己的计算机上运行书中的代码示例，我推荐使用最新版本的Firefox或者Chrome浏览器。

针对纸质书读者的说明

书中很多图片原本是彩色的。本书电子版能显示彩图，阅读时不妨参考。要获得本书电子版（PDF、mobi格式），请访问本书图灵社区主页http://www.ituring.com.cn/book/2583。

本书论坛

购买了本书英文版的读者可以免费访问一个由Manning出版社维护的私有论坛，你可以在论坛上评论本书，询问技术问题，并获得作者或其他用户的帮助。论坛地址是https://forums.manning.com/forums/css-in-depth。你还可以访问https://forums.manning.com/forums/，学习Manning论坛和行为规范的更多内容。

Manning向读者承诺提供一个供读者之间以及读者和作者之间交流的论坛。这并不代表硬性要求作者一定要投入多少精力参与到交流中，因为作者对论坛的贡献是志愿行为（并且是免费的）。我们建议读者询问富有挑战的问题，以免作者不感兴趣。只要本书还在印，论坛和之前的讨论归档都可以在出版社的网站找到。

关于作者

基思·J．格兰特目前是洲际交易所公司（Intercontinental Exchange, Inc., ICE）的一名高级Web开发人员，他为公司和纽约证券交易所的网站编写和维护CSS。他用HTML、CSS和JavaScript构建和维护Web应用程序和网站已经有11年的专业经验。他自学HTML和CSS，早年间在这门技术上还积累了好几年非正式经验。

他的经理因为他在CSS方面的专长而将其带入现在的网站团队，当时ICE需要实现新版的网站。CSS让公司能够通过构建独特而又富有创意的网站来树立品牌，并且能够帮助复杂的Web应用程序实现精巧的布局。

虽然基思的主要工作是JavaScript开发，但在就职过的每家公司，他都是一位重要的CSS指导者。

关于封面插图

本书的封面插图出自19世纪的一个众多艺术家作品的合集，该作品集由Louis Curmer编辑并于1841年在巴黎出版。这本合集名叫 Les Français peints par euxmêmes，翻译成英文是 The French People Painted by Themselves。每一张插图都画得很精致，并且是手工上色。这本合集里各种各样的绘画生动地展示了大约200年前的世界中，不同地域、城镇、村庄甚至是邻里之间的文化差异有多大。由于彼此隔离，人们说着不同的方言和语言。在城市的街道上或者乡村小路上，通过人们的穿着就能够轻易地判断他们住在哪里、做什么生意、有着什么样的身份。

如今的着装规范已经改变，那时巨大的地域差异性如今已经逐渐消逝。现在仅凭外表很难区分来自不同大陆的人，更不用说来自不同的城镇或者地域的人了。也许我们以文化多样性为代价，换来了更丰富的个人生活，当然还有更加丰富且迅速发展的技术生活。

当很难区分不同的计算机图书时，Manning出版社用两个世纪前反映不同地域生活的作品作为封面，象征计算机行业的独创性和主动性，用这本合集里的画作（如本书封面）将这种多样性再次呈现了出来。

电子书

扫描如下二维码，即可购买本书中文版电子版。