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

适读人群 ：《CSS 实战手册（第四版）》广大读者

　　超级畅销书CSS专业指南的姊妹篇，介绍了从入门到精通的各种细节和技巧。

　　■ 预备知识
　　阅读本书之前要先具备一些HTML知识。你可能开发过一两个网站（或者至少写过一两个网页），因此熟悉超文本标记语言（Hypertext Markup Language，简称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的两种文档类型声明与此类似）：
　　仔细看前一节的示例代码，你会发现那里使用的文档类型声明更简洁：
　　这行代码声明的是 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 设计公司都使用这个编辑器。
　　是一款可视化网页编辑器（每月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所示。
　　■ 关于在线资源
　　……

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

The Missing Manual 团队.1
前言 5
第一部分 CSS 基础知识
第1章 HTML和CSS 17
HTML的过去和现在 17
编写HTML时兼顾CSS 19
文档类型的重要性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装饰 标签 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
安装Sass 573
Sass基础知识 576
使用Sass局部文件组织样式 580
Sass变量 584
嵌套选择符 588
继承（或扩展）属性 593
混入 598
处理媒体查询 606
使用CSS源码映射诊断故障 610
第五部分附录附录A CSS 属性参考 615
附录B CSS资源 653