使用CSS能创建专业的网站，不过即使是有经验的Web设计师，也很难学会CSS的各种细节。本书在前几版的基础上做了全面升级，提供了近期新、很有用的提示和技巧，而且通过教程说明现今可用的CSS。本书会教你如何使用新工具（如弹性盒和Sass）构建外观精美的网页，而且在任何桌面设备或移动设备中都能快速运行。本书适合业余和有经验的设计师等阅读。
从基础知识入手。编写对CSS友好的HTML代码，包括现今的浏览器能识别的HTML5标签。
为移动设备设计。创建对移动设备友好的网页，以便访客随时随地浏览。
创建充满活力的网页。添加能吸引眼球的动画，创建用户体验好的表单。
控制页面的布局。使用专业的设计技术，例如浮动和定位。
让布局更灵活。使用弹性盒设计网站，适应不同的设备和屏幕宽度。
更有效地工作。使用Sass，减少编写的CSS代码量，以小型文件组织样式。

David Sawyer HcFarland是Web开发者、教师和作者。他从1995年开始开发网站，并设计了一份给通信专家阅读的在线杂志。David曾任教于加州大学伯利分校新闻研究生院、电子艺术中心、波特兰艺术学院和波特兰州立大学。现在他是在线教育网Treehouse的教学团队主管。

TheMissingManual团队.1
前言5
第一部分CSS基础知识
第1章HTML和CSS17
HTML的过去和现在17
编写HTML时兼顾CSS19
文档类型的重要性30
CSS的运作方式31
第2章编写样式和样式表33
剖析样式33
解读样式表36
内部样式表37
外部样式表38
教程：首次编写样式39
第3章选择符：标识要装饰的目标51
类型选择符：选取HTML标签51
类选择符：精确控制53
ID选择符：选取网页中具体的元素56
给标签组定义样式58
为标签里的标签定义样式60
伪类和伪元素64
属性选择符69
子代选择符71
同辈选择符77
:target选择符78
:not()选择符79
教程：选择符示例80
第4章继承样式，节省时间95
什么是继承？95
继承如何简化样式表96
继承的局限性98
教程：继承98
第5章管理多个样式：层叠105
样式层叠的方式106
特指度：确定哪个样式胜出110
控制层叠113
教程：层叠实战119
第二部分CSS实用技术第6章装饰文本129
使用字体129
使用Web字体134
使用Google提供的Web字体服务149
为文本着色156
修改字号160
装饰词语和字符165
为文本添加投影169
装饰整个段落170
装饰列表177
教程：装饰文本实战181
第7章外边距、内边距和边框193
理解盒模型193
使用内外边距控制空白195
添加边框201
添加背景色205
创建圆角206
添加投影208
确定高度和宽度211
把内容放在浮动元素里217
教程：边距，背景和边框222
第8章把图形添加到网页中233
使用CSS装饰＜img＞标签233
添加背景图234
控制平铺方式238
定位背景图240
使用简写的background属性250
使用多个背景图252
使用渐变背景254
教程：美化图像263
教程：创建相册268
教程：使用背景图271
第9章装饰网站的导航279
选择要装饰的链接279
装饰链接283
创建导航栏289
使用CSS创建预先加载图像的翻转效果298
装饰特定类型的链接299
教程：装饰链接301
教程：创建导航栏307
第10章CSS变形，过渡和动画317
变形317
过渡327
动画335
教程346
第11章装饰表格和表单353
表格的正确用途353
装饰表格355
装饰表单361
教程：装饰一个表格365
教程：装饰一个表单370
第三部分CSS页面布局第12章CSS布局简介379
网页布局的类型379
如何使用CSS布局381
布局策略385
第13章构建基于浮动的布局391
活用浮动布局394
解决浮动问题399
教程：多栏布局411
第14章定位网页中的元素423
定位属性的工作原理423
有效的定位策略436
教程：定位页面中的元素441
第15章响应式Web设计449
响应式Web设计基础449
为响应式Web设计设置网页451
媒体查询452
弹性栅格459
可变尺寸图像464
响应式Web设计教程468
第16章使用CSS栅格系统483
栅格的工作原理483
为栅格搭建HTML结构485
使用Skeleton栅格系统487
创建并划分列490
教程：使用栅格系统498
第17章Web布局新方法：弹性盒513
弹性盒简介513
弹性容器相关的属性516
弹性项目相关的属性525
教程：使用弹性盒构建布局539
第四部分CSS高级话题第18章改善编写CSS的习惯551
添加注释551
合理组织样式553
消除浏览器对样式的干扰560
使用后代选择符564
第19章使用Sass增强样式571
Sass是什么571
安装Sass573
Sass基础知识576
使用Sass局部文件组织样式580
Sass变量584
嵌套选择符588
继承（或扩展）属性593
混入598
处理媒体查询606
使用CSS源码映射诊断故障610
第五部分附录附录ACSS属性参考615
附录BCSS资源653

■ 预备知识
阅读本书之前要先具备一些HTML知识。你可能开发过一两个网站（或者至少写过一两个网页），因此熟悉超文本标记语言（Hypertext Markup Language，简称HTML）众多标签中的一部分，例如 、

、

和 。如果脱离HTML，CSS没有任何作用，所以，你至少要知道如何使用基本的HTML标签编写网页。
如果你以前用HTML写过网页，但是有点忘了，请阅读下一节，简单回顾一下。

如果刚开始学习HTML，可以使用这两个在线资源：HTML Dog（www.htmldog.com/ guides/htmlbeginner）和W3Schools（www.w3schools.com/html ）。如果喜欢纸质书，可以买一本《HTML5: The Missing Manual, Third Edition 》或《Head First HTML and CSS, Second Edition 》（均由 O’Reilly 出版）。
■HTML：网页的骨架结构
HTML使用标签（tag）定义组成网页的不同部分。例如，下述HTML代码表示一个简单的网页：


...Hey,.I.am.the.title.of.this.web.page
...

Hey,.I.am.a.paragraph.on.this.web.page..
这段代码没有什么让人兴奋的地方，不过却包含一个网页所需的全部基本元素。你可能注意到了，上述代码的开头是文档类型声明，随后是 标签（注意，两侧有尖括号）、头部和主体，主体部分是网页要显示的内容，最后是。
■ 文档类型
网页的开头都是文档类型，指明网页是使用哪种HTML编写的。HTML 4.01 和XHTML 1.0 这两种类型使用好多年了，而且各自都有两种风格：严格和过渡。例如，下述代码表示过渡的HTML 4.01 文档类型（严格的HTML 4.01 文档类型和XHTML 1.0的两种文档类型声明与此类似）：




各种不同的文档类型声明示例参见www.webstandards.org/learn/reference/templates 。
仔细看前一节的示例代码，你会发现那里使用的文档类型声明更简洁：

这行代码声明的是 HTML5 文档类型。与之前的版本相比，HTML5 更简单，更易于使用。本书都使用HTML5 文档类型，所有主流浏览器都支持这种文档类型（连古老的 Internet Explorer 6 都支持），因此没有任何理由不使用。

虽然旧版浏览器支持HTML5 文档类型，但是并不是所有浏览器都支持全部的HTML5 标签和功能。例如，Internet Explorer 8 及之前的版本就不能识别 HTML5 新添加的标签。若想在这些 IE 版本中使用CSS为新添加的标签编写样式，要借助一些JavaScript 代码。后文的“让IE8支持 HTML5”旁注会告诉你怎么做。
其实，关于文档类型最重要的一点是，记住始终要声明文档类型。如果不声明文档类型，网页在不同的浏览器中会有不同的表现，因为不知道文档类型的话，浏览器不知道如何解析CSS。
不同的文档类型对 HTML 的编写方式有不同的要求。例如，在HTML 4.01 中，表示换行的标签写成：
而在 XHTML 中，要写成：
在这方面，HTML5的优势又体现出来了，两种写法都可以。
■HTML标签的工作原理
所有网页的HTML代码都与前面的示例一样，大多数标签都成对出现，一对标签中可以直接写入内容，也可以包含其他标签。标签放在一对尖括号中，告诉Web 浏览器如何显示网页。标签是超文本标记语言中的“标记”部分。
标签对的起始标签告诉浏览器标记从哪里开始，结束标签告诉浏览器标记到哪里结束。结束标签在左尖括号（<）之后都有一个斜线（/）。
网页一般至少包含下述四个部分：

.前一节说过，网页的第一行是文档类型声明。

. 标签在网页开头出现一次，在网页末尾还会出现一次，不过这一次要加上斜线，写成 。这个标签的作用是告诉Web 浏览器，这个文档的内容是使用HTML编写的，而不是其他语言。网页中的所有内容，包括其他标签，都写在 标签对之间。

如果把网页视作树， 标签就是树的根。这棵树有两个枝杈，分别表示组成网页的两个主要部分：头部和主体。

.网页的头部包含网页的标题（例如“Izzie’s Mail-Order Pencils”），以及其他不可见的信息，例如浏览器和搜索引擎使用的网页内容描述。头部放在标签对中。

此外，头部区域还有其他信息，指明浏览器如何格式化页面的HTML，还可以添加交互。读到后文你会看到， 区域可以包含CSS 代码（就是本书教你编写的那种）或者链接，指向存储CSS信息的文件。

.主体放在 标签对中，里面的所有内容都会显示在浏览器中，例如标题、文本和图片等。


标签中一般有如下标签：
.

标签（段落的起始标签），告诉Web 浏览器一段文本从哪里开始；标签（段落的结束标签），告诉浏览器一段文本到哪里结束。

.标签，标记重要的文本。如果把文本放在标签对里，文本会以粗体显示。例如，Warning! 告诉Web 浏览器着重强调“Warning!”这个词。

.标签（也称锚记标签），在网页中创建超链接。单击超链接（或简称链接）后可以访问网络中的其他网页。链接指向的网址在起始标签中指定，例如Click.here!。


单击“Click here!”后，浏览器知道要访问The Missing Manual 网站。标签中的href 称为属性，那个URL（Uniform Resource Locator，意为“统一资源定位地址”，也称网址）是这个属性的值。在这个例子中，href 属性的值是http://www.missingmanuals.com 。
■HTML5：提供更多标签
HTML5 是HTML的当前版本，已经发布好几年了。有时，提到HTML5 并不是指HTML标签，而是指本地存储（把网站的数据保存在访客的电脑中）、地理定位（确定访客在世界上的位置）或者使用WebGL 在网页中绘图。严格来说，这些技术并不属于HTML，而是随着HTML5一起出现的浏览器新特性。


在本书中，HTML5 始终指代HTML5 文档类型，以及随HTML5 标准一起发布的新标签。HTML5 与之前的版本没有太大差别，因为制定这个标准时考虑了向前兼容性。HTML之前版本的内容基本没变，HTML5 只是根据当下Web 设计师开发网站的方式添加了一些新标签，例如，HTML5 新增了 标签，表示一般位于页头的内容，比如说徽标和站内导航链接；新增的 标签用于放置站内链接；标签表示一般会放在页脚的内容，比如说法律条款和电子邮件地址等。
除此之外，HTML5 还新增了用于插入视频和音频的标签；复杂的表单元素标签，例如滑动条和弹出式日期选择器；内置于浏览器中的表单验证功能（确保访客正确填写表单）。本书会大量使用HTML5，尤其是下一章。
■编写CSS的软件
编写由HTML和CSS组成的网页只需简单的文本编辑器，例如Notepad（Windows）或TextEdit（Mac ）。不过，在文本编辑器中编写几百行HTML和CSS之后，你可能想使用更适合用来编写网页的软件。本节列出一些常用的软件，有些是免费的，有些则是收费的。

其实，能协助我们编写网页的工具有几百个，所以本节给出的列表并不完整。本节列出的是最受CSS开发者喜爱的软件，只是抛砖引玉。
免费软件
用于编辑网页和样式表的免费软件有很多。如果一直使用Notepad 或TextEdit，不妨试试下面这些软件。下面是最受欢迎的几个软件：
.Brackets（Windows，Mac，Linux；http://brackets.io/）。Adobe 领头开发，免费开源，为编写HTML和CSS提供了很多工具。这个编辑器专为Web 设计师和开发者而开发。

.Atom（Windows，Mac，Linux；https://atom.io/）。也是免费开源的文本编辑器，由GitHub（最受欢迎的代码分享和协作网站）的员工开发。与Brackets 一样，这个文本编辑器的目标用户群也是Web 开发者。

.jEdit（Windows，Mac，Linux；http://jedit.org）。免费的文本编辑器，使用Java 开发，几乎在任何电脑中都能使用，而且提供了收费文本编辑器才有的很多功能，例如CSS句法高亮。

.Notepad++（Windows；http://notepad-plus.sourceforge.net）。很多人特别喜


前言9欢这个速度快的文本编辑。这个编辑器甚至还内置了便于编写HTML和CSS的功能，例如句法高亮——使用不同的颜色标记标签和特殊的关键字，便于识别网页中的HTML和CSS元素。


收费软件
收费的网站开发软件有便宜的，也有贵的，包含开发网站所需的各种工具：
.EditPlus（Windows；www.editplus.com）是便宜（35美元）的文本编辑器，支持句法高亮、FTP、自动补全和其他便利的功能。

.skEdit（Mac；www.skedit.com）是便宜的（30美元）网页编辑器，完全支持FTP/SFTP、代码提示和其他有用的功能。

.Coda2（Mac；www.panic.com/coda）是Web 开发套件（99美元），各种功能完善，包含文本编辑器、网页预览程序，支持FTP/SFTP，还提供了用于编写CSS 的图形化工具。

.Sublime Text（Windows，Mac，Linux；www.sublimetext.com）是一款强大


的文本编辑器（70 美元），深受众多 Web 开发者的喜爱。很多 Web 设计公司都使用这个编辑器。
.Dreamweaver（Mac和Windows；www.adobe.com/products/dreamweaver）
是一款可视化网页编辑器（每月19.99美元起）。使用Dreamweaver 编写网页的同时可以在Web 浏览器中查看网页。这个软件提供了强大的文本编辑器，以及编写和管理 CSS的工具。这个软件的完整使用说明参阅《Dreamweaver
CC: The Missing Manual 》。

本节给出的都是通用软件，既可以编辑HTML，也可以编辑CSS。从这些工具中选出一个就能满足Web 开发的需求。
■ 关于本书
万维网特别易于使用，全国各地，从老人到一年级的小学生每天都会使用网络。不过，网络的运作规则并不那么易于理解。编写官方文档的计算机科学家和其他电脑人才并不乐于向普通用户解释相关的概念，你可以访问www.w3.org/TR/css3-transforms，看看这些技术专家所写的文档是多么晦涩难懂。
想学习CSS的人往往不知道从哪开始，而且CSS有些微妙难解之处，有些熟练的Web 专家也搞不懂。本书的目的是填补空缺，为用户提供CSS使用手册，一步步说明如何使用CSS创建精美的网页。


本书适合各种技能水平的读者阅读。为了更好地理解本书内容，你要具有一些基本的HTML知识，可能还要对CSS有些基本的了解。如果你从未编写过网页，可以先看“教程：首次编写样式”一节。本书内容主要针对已经入门或中级读者。如果刚开始学习编写网页，可以阅读带有“加油站”标注的旁注，这些旁注是一些介绍性信息，能帮你更好地理解所讲的知识。如果你是高级的Web 开发者，请特别留意带有“高级用户门诊”标注的旁注，这些旁注为有经验的电脑高手提供了很多技术方面的小技巧和快捷方法。
本书大纲
本书分为五部分，前四部分各有几章内容，最后一部分是附录。
.第一部分介绍如何编写样式表，简要说明一些重要的CSS概念，例如继承、选择符和层叠。阅读这一部分的过程中，你会学到使用CSS时编写HTML的最佳实践。这一部分有很多教程，目的是加深你对主要概念的理解，也是为了让你一窥CSS的强大。

.第二部分实际动手，设计网页。这一部分教你最重要的CSS属性，用这些属性装饰文本，创建有用的导航，使用图片提升网页的外观；还会教你如何使用CSS制作简单的动画，说明如何制作吸引人的表格和表单。

.第三部分说明最难理解但最值得学习的CSS功能——控制网页的布局。这一部分会教你如何创建常见的布局（例如两栏和三栏），如何添加侧边栏，教你浮动和定位，这是控制网页布局最常使用的CSS技术。除此之外，还会教你如何编写适应桌面浏览器、平板电脑浏览器和移动设备浏览器的网页，以及一种网页布局的强大新方式——弹性盒模型（flexbox ）。

.第四部分涵盖一些改进CSS的高级技巧，还会介绍Sass，强大而高效的样式表编写方式。

.第五部分提供两份参考资料。一份是“CSS属性参考”，简要列出一些有用的CSS属性，以便参考。其中一些属性你可能没见过，阅读这份参考可以快速学习；有些属性则是你已经知道的，阅读这份参考可以巩固知识。另一个附录介绍一些编写及使 CSS的工具和资源。


■ 基础知识
为了能顺利阅读本书，其实也为了能正确使用电脑，你要知道一些基础知识。你要熟悉以下术语和概念：
.点击。说明如何使用电脑的鼠标或触控板时，本书会使用三种表达方式。
前言11“点击”的意思是，把箭头光标移到屏幕上的某个位置，停在那里不动，按鼠标（或笔记本电脑的触控板）上的左键，然后松开。“按右键”与“点击”的意思差不多，不过按的是鼠标上的右键（如果鼠标没有右键，而且使用的是Mac 电脑，可以同时按左键和Control 键）。


“双击”的意思是，快速连续点击两次，点击的过程中也不能移动光标。“拖动”的意思是，按住鼠标左键不放，移动光标。如果让你在PC上按Ctrl 键点击，或者在Mac 上按z键点击，意思是让你在点击的同时按住Ctrl 或z键。
.菜单。“菜单”是指屏幕或窗口顶部显示的文字，例如“文件”和“编辑”等。点击这些菜单后会显示一系列命令，不过这些命令在下拉窗口中显示。本书假定你知道如何打开程序，知道如何浏览网页，也知道如何下载文件。你应该知道如何使用Windows 系统的开始菜单，或者知道如何使用Mac OS X 系统的Dock 或Apple 菜单；也应该知道如何使用Windows 系统的控制面板或Mac OS X 系统的系统偏好设置。

.键盘快捷键。每次从键盘上移开手去握鼠标都会浪费时间，还可能会打断思路。因此，只要可能，很多有经验的电脑用户都会使用组合键，而不是点击菜单中的命令。让你使用 Ctrl+S（z-S）快捷键（保存当前文档的改动）时，你要按住Ctrl 或z键，再按S键，然后同时松开两个按键。


关于箭头符号（→）
本书以及The Missing Manual 系列的其他书都经常出现这样的句子：“打开‘系统
→库→字体’文件夹”。这是一种简述，表示要打开三个嵌套的文件夹，例如：“硬盘中有个名为‘系统’的文件夹，打开这个文件夹。在‘系统’文件夹中有个名为‘库’的文件夹，双击这个文件夹将其打开。在打开的文件夹里有个名为‘字体’的文件夹，再次双击，将其打开。”
这种带有箭头符号的简述还用于表示从菜单中选择命令，如图I-1所示。


■ 关于在线资源
购买The Missing Manual 系列的书之后，你不仅获得了一本可以阅读的书，还能在网上找到示例文件，以便自己动手操作，除此之外，网上还有一些技巧和文章，甚至可能还有一两个视频。你也可以联系The Missing Manual 的编辑团队，告诉我们你对本书的褒奖或批评。如果你需要在线资源，请访问www.missingmanuals. com，或者直接访问以下几节给出的网址。
实例
本书的目的是让你掌握专业知识，快速进入Web 开发领域。因此，本书的价值有一半都由在线资源提供。
本书有很多实例，使用一些原始素材（例如图片和网页半成品），一步步教你如何操作。这些素材可以从GitHub中下载，地址是https://github.com/sawmac/css_ mm_4e。如果你躺在玄关的吊床上阅读这些逐步讲解的教程，学不到多少知识；如果在电脑中跟着教程实操，能学到专业的设计师是如何开发网页的。
书中的教程还会给出成品的URL，以便与你实现的结果对比。也就是说，你不仅能看到成品网页的截图，还能看到网上真实可用的网页。
关于MissingManuals.com网站
www.missingmanuals.com 网站中有一些文章和技巧，还有本书的更新。其实，我们建议你提交修正和更新。为了尽量让本书的内容跟上技术的发展，保证准确性，每次加印时我们都会修正已经确认的勘误。这些勘误信息也会在本书网站上
前言13发布出来，以便读者更正自己手里这本书的错误（访问www.missingmanuals.com/ feedback，在弹出菜单中选择本书，然后单击“Go”按钮查看改动）。

“反馈”页面中还有专家为你解答阅读本书过程中遇到的问题，你可以在这个页面写书评，找到同样对 CSS 感兴趣的伙伴。
如果你觉得The Missing Manual 系列可以出版其他书，请告诉我们，missingma-nuals.com 网站中有相关的链接。你可以访问www.oreilly.com，注册这本书（可以直接访问www.oreilly.com/register 注册）。注册后你会收到本书的更新，还有资格以特价（例如，使用优惠）购买本书的后续版本。
勘误
为了尽量让本书的内容跟上技术的发展，保证准确性，每次加印我们都会修正已经确认的勘误。这些勘误信息也会在本书网站上发布出来，以便读者更正自己手里这本书的错误。如果想提交或查看勘误，请访问http://dwz.cn/css4e-mm 。
■ Safari. Books Online
Safari Books Online 是按需而变的数字图书馆，同时以图书和视频的形式出版世界顶级技术和商务作家的专业作品。
Safari Books Online 是技术专家、软件开发人员、Web 设计师、商务人士和创意人士开展调研、解决问题、学习和认证培训的第一手资料来源。
Safari Books Online 为企业、政府部门、教育机构和个人提供了多种套餐和价格。
订阅者可以在一个完全可搜索的全文数据库中访问上千种图书、培训视频和正式出版之前的书稿。这些内容由以下出版社提供：O'Reilly Media，Prentice Hall Professional，Addison-Wesley Professional，Microsoft Press，Sams，Que，Peachpit Press，Focal Press，Cisco Press，John Wiley &amp; Sons，Syngress，Morgan Kaufmann，IBM Redbooks，Packt，Adobe Press，FT Press，Apress，Manning，New Riders，McGraw-Hill，Jones &amp; Bartlett，Course Technology 等。关于Safari Books Online 的更多信息，请访问我们的网站。