前言
一、缩小前端和设计之间的距离
近年来，得益于HTML5、ECMAScript 2015规范的发布和移动设备的普及，Web应用越来越复杂，Web前端也取得了突飞猛进的发展。在开发流程上，前端介于设计和后端之间，前端负责把后端数据展示在从设计稿转换来的页面元素上。这些年前端的发展离后端越来越近了，前端不仅通过Ajax和MV*框架完全实现了前后端分离，使后端工程师不用再把精力放在UI界面上，而且还用Node.js“侵入”了原本属于后端的业务逻辑开发领域，前端工程师已经变得越来越像后端工程师了。但是，前端本应该站在设计和后端的中间，现在却离设计越来越远了。
是否还有人记得，16年前的2003年，CSS Zen Garden（中文译为CSS禅意花园）网站提供了一个固定的HTML文件，仅凭更换CSS文件就可以让网站呈现完全不同的风格。那些CSS作者大多身兼两职，他们既是设计师，也是网页工程师，正是他们推动了CSS和Web标准的普及。时至今日，JavaScript在网页开发中的比重越来越大，已经鲜见设计师去写代码。这诚然是行业成熟分工细化的结果，但是相比前端工程师正在不断从后端的工程化中借鉴经验，把诸如设计模式、单元测试、持续集成这些概念引入前端开发中，前端工程师与设计师之间的借鉴、影响和促进却少得多。
尽管CSS3规范已经推出，但是大多数前端工程师仍然仅使用CSS2.1的特性，在实际工作中对CSS3的运用并不充分，CSS3的潜力远没有被发掘出来。
以手机为代表的电子消费品的普及，对应用程序的交互体验提出了越来越高的要求，可是前端工程师的视觉表现能力贫乏，设计师被JavaScript挡在应用开发的大门之外。他们之间缺少充分的交流，难以在交互设计和用户体验上获得突破，最终的结果是不论是什么应用，看起来都是千篇一律，缺乏美与个性。
如何促进前端向设计方向靠拢，增进前端与设计的融合，是每个Web开发者都应该思考的问题。要想缩小前端与设计之间的距离，就要从CSS着手，让设计师与前端工程师能使用相同的技术语言进行沟通。
二、更有效的CSS学习方法
CSS不像是JavaScript那样的通用编程语言，更像是SQL（用于查询数据库的专门语言）这样的特定领域的描述语言。因为CSS专门用于解决页面视觉问题，所以它具有很强的视觉表达能力。
写CSS和写JavaScript程序需要完全不同的语法，也有着完全不一样的设计思路。笔者个人的经验是先靠模仿掌握语法，再逐步升级理论知识。而要模仿，首先要有合适的项目和代码，在反复练习中熟悉和掌握基本知识。用于练习的项目，应该满足两点要求，一是项目本身是有趣的，是美的，当你完成一个项目之后，可以把它展示在公众面前，获得朋友的称赞；二是它不能太复杂，每个项目的代码量宜在50～100行，每次练习大约需要半小时。代码量再多一点儿，有可能一天消化不完，影响学习的积极性。当你学习一个新的CSS特性时，可以模仿一个项目，就像学习写字一样，多练习几遍，从临摹到默写，从形似到神似，仔细观察，体会其中的技巧与方法，锻炼自己的思维方式。
三、本书针对的读者
本书适合所有对网页设计和网页开发感兴趣的读者阅读。
设计师 本书不涉及JavaScript代码，而且所有实战项目都是使用CSS创作的艺术作品，设计师可以把CSS当作一种艺术创作工具。
前端工程师 前端工程师通过学习用CSS表现复杂视觉效果的技巧，能够深刻理解CSS特性，在开发商业网站和交互组件时将变得游刃有余。
后端工程师 几乎所有的后端开发工程师都对CSS感兴趣，但又对CSS感到陌生和无力，通过阅读本书，将能领略到CSS的魅力，从全新的角度重新理解CSS。
四、本书的讲解方式
本书以CSS3为基础，细致地剖析与视觉效果相关的重要语法。但只懂语法是远远不够的，就像学习绘画，不仅要学习色彩、透视或构图这些理论知识，还必须通过大量的练习把理论知识融入实践中。本书不会面面俱到地讲解全部CSS属性，即使书中讲到的属性，也不会讲解它的所有语法细节。我不想让读者变成五金店的伙计——那种知道了所有配件的规格，却不会做家具的伙计。相反，我想让大家先享受作品带来的喜悦，再进一步把这种喜悦转化成学习的动力。
书中的章节也不完全按照语法来组织，例如伪元素一般是放在选择器的章节里，但本书把它独立成章，因为伪元素对于实现语义化作用重大，有必要单独讨论；另外，一些稍有跳跃的安排还有drop-shadow()滤镜被放到“阴影”一章，outline属性被放在了“边框”一章等。
本书没有讨论厂商前缀和浏览器兼容问题，因为这些问题都会随着时间的推移，随着厂商对规范的实现而自动解决。
本书分为13章，第1章回顾了CSS的基础知识，第2章～第10章每章讨论一个主题内容，第11章～第13章探讨CSS艺术作品的设计思路。如果把这本书比作一本旅行手册的话，相当于是先介绍旅行目的地的风土人情，然后再单独解说各个景点，最后把本次旅程的点滴记忆制作成精美的纪念页。
在讲解过程中，本书提供了一百多个基于视觉艺术设计的实例，这些实例的演示文件可以在电子资源中找到。
哪怕你不是刚刚学习CSS，也建议你从第1章读起，因为即使是简单的知识点，它们的示例也是很有意思的。为了避免出现无法理解的色值，示例中尽量使用颜色名称，你可以通过附录查看颜色名称对应的色彩。
除讲解过程中给出的实例之外，本书提供了30个实战项目，你可以通过“本书实战项目一览表”找到感兴趣的项目所在的章节，这些项目还配有同步讲解的视频，帮助你找到新的灵感。
书中的实战项目都有一定的难度。当我演示一种特性的实际用途时，也许要结合其他特性一起使用才能实现一种视觉效果。有的特性可能你还不熟悉，你要先把还不熟悉的部分暂时跳过，在学习过后面的知识之后，再转回头来，慢慢地加以理解。
五、本书资源
扫描下面的“资源下载”二维码，就可以获取本书配套电子资料包的下载方式。
资源下载
扫描下面的“云课”二维码，可以观看全书视频。你也可以扫描正文中的二维码观看对应章节的视频。
云课
我们精彩的CSS艺术之旅就要正式开始了，祝你旅途愉快！
张偶
2019年8月