关 于 本 书

本书通过12个项目逐步引导设计师和开发者学习CSS。

本书目标读者

本书适合已掌握HTML和前端开发基础知识的读者。读者不需要具备CSS经验。无论是初学者还是经验丰富的编码人员，都可以通过本书深入理解CSS。与其呈现CSS的理论视角，不如在每一章中将CSS的不同部分应用到一个个不同的项目中，以实际演示CSS的工作原理。

本书组织结构：路线图

本书共有12章，每一章涵盖一个独立的项目。

● 第1章，“CSS介绍”——该章的项目引导读者了解CSS的基础知识，并探讨层叠、特异性和选择器。

● 第2章，“使用CSS 网格设计布局”——该章通过为一篇文章设计布局来探索CSS网格，同时深入研究网格轨道、minmax()、repeat函数和分数单位等概念。

● 第3章，“制作响应式动画加载界面”——该项目利用CSS制作了一个响应式的动画加载界面，并使用可伸缩的矢量图形和动画效果来美化HTML进度条。

● 第4章，“创建响应式新闻网站布局”——该章重点是设计一个多列响应式新闻网站布局。该章深入探讨CSS多列布局模块、计数样式、图像加载失败处理，以及如何通过媒体查询来调整布局。

● 第5章，“悬停互动的摘要卡片”——该项目通过利用背景图像创建一系列卡片，使用悬停效果来展示内容，并通过媒体查询来检查功能和浏览器窗口大小。

● 第6章，“制作个人资料卡片”——该章的项目旨在制作一张个人资料卡片，涉及自定义属性、背景渐变等，同时探索如何设置图像大小以及使用Flexbox进行布局。

● 第7章，“充分利用浮动特性”——该章展示了CSS浮动的强大功能，该功能用于放置图像，围绕CSS形状排列内容，以及创建首字母大写效果。

● 第8章，“设计结账购物车”——该章的重点是设计一个结账购物车，涉及样式化响应式表格、使用CSS网格进行布局、格式化数字，以及基于视口大小使用媒体查询有条件地设置CSS。

● 第9章，“创建虚拟信用卡”——该章专注于创建虚拟信用卡，并通过在鼠标悬停时翻转卡片来实现3D效果。

● 第10章，“样式化表单”——该章涵盖了设计表单的内容，包括单选按钮、输入框和下拉菜单，同时强调可访问性的重要性。

● 第11章，“社交媒体分享链接的动画效果”——该项目利用CSS过渡效果来实现社交媒体分享链接的动画效果，并探讨CSS架构选项，如OOCSS、SMACSS和BEM。

● 第12章，“使用预处理器”——最后一章展示在编写CSS时如何使用预处理器，并介绍Sass语法。

关于代码和彩图

本书包含许多源代码示例，这些示例既以编号代码清单的形式呈现，又以嵌入正文的方式出现。在两种情况下，源代码都采用等宽体，以便与普通文本区分开来。有时，代码也会以粗体显示，以突出显示对本章前面步骤的更改，比如当新功能添加到现有代码行时，新增的代码将以粗体显示。

许多情况下，原始代码已被重新格式化；我们添加了换行符并重新调整了缩进，以使其适应书中可用的页面空间。在某些情况下，即使这样也不行，此时代码清单中包含行继续标记( )。许多代码清单中都包含注释，以突出显示重要概念。

扫描本书封底二维码，即可获取书中示例的完整代码。

另外，可扫描封底二维码以下载彩图。