不要局限于制作平淡无奇的网页！借助CSS，你可以掌控色彩、布局和排版，让网页不仅功能出众，还富有美感。对于前端开发者和设计师来说，CSS是一项必须掌握的技能。本书将帮助你以正确的方式入门，迈出坚实的第一步。
本书将引导你完成12个CSS创意项目，并帮助你逐步提升CSS技能。每个有趣的挑战都以可下载的HTML框架开始。你将运用自己的设计理念来完善它们，并在探索过程中逐渐掌握CSS中的关键概念，包括过渡效果、布局和表单样式等。你还将深入研究一些强大的特性，如Flexbox和网格布局。你从本书中学到的所有技能都可以轻松应用到大型应用程序中。学完本书后，你将收获一系列炫酷的作品，可随时将其用于你的下一个项目。
主要内容：
利用关键帧创建动画；
使用网格和Flexbox等布局技巧；
对表单元素进行样式化，包括单选按钮；
嵌入字体以及与排版相关的样式；
利用伪元素和媒体查询进行条件样式化。

玛蒂娜·道登（Martine Dowden）是一位作家、国际演讲者，同时是Andromeda Galactic Solutions公司的首席技术官，曾多次获奖。她的专业领域涵盖心理学、设计、艺术、可访问性、教育、咨询以及软件开发。本书是她关于Web技术的第四本著作，是她在Web界面设计领域15年经验的结晶。她所创建的Web界面不仅美观、功能出色，而且易于访问。因其对开发社区的贡献，Martine被认定为Microsoft MVP开发者技术专家以及Google Web技术和Angular开发者专家。

第1章 CSS介绍
1.1 CSS概述
1.1.1 关注点分离
1.1.2 什么是CSS
1.2 通过创建文章布局开始学习CSS
1.3 向HTML添加CSS
1.3.1 内联CSS
1.3.2 嵌入式CSS
1.3.3 外部CSS
1.4 CSS中的层叠
1.4.1 用户代理样式表
1.4.2 作者样式表
1.4.3 用户样式表
1.4.4 CSS重置
1.4.5 标准化器
1.4.6 !important注释
1.5 CSS中的特异性
1.6 CSS选择器
1.6.1 基本选择器
1.6.2 组合器
1.6.3 伪类选择器和伪元素选择器
1.6.4 属性值选择器
1.6.5 通用选择器
1.7 编写CSS的不同方式
1.7.1 简写属性
1.7.2 格式化
1.8 本章小结
第2章 使用CSS网格设计布局
2.1 CSS网格
2.2 显示网格
2.3 网格轨道和线条
2.3.1 重复列
2.3.2 minmax()函数
2.3.3 auto关键词
2.3.4 分数(fr)单位
2.4 网格模板区域
2.4.1 grid-area属性
2.4.2 gap属性
2.5 媒体查询
2.6 无障碍性考虑因素
2.7 本章小结
第3章 制作响应式动画加载界面
3.1 设置
3.2 SVG基础
3.2.1 SVG元素的位置
3.2.2 视口
3.2.3 视图框
3.2.4 SVG中的形状
3.3 对SVG应用样式
3.4 在CSS中为元素添加动画效果
3.4.1 关键帧和动画名称
3.4.2 duration属性
3.4.3 iteration-count属性
3.4.4 动画的简写属性
3.4.5 animation-delay属性
3.4.6 transform-origin属性
3.5 无障碍性和prefers-reduced-motion媒体查询
3.6 对HTML进度条进行样式设置
3.6.1 对进度条进行样式设置
3.6.2 为-webkit-浏览器的进度条设置样式
3.6.3 样式化-moz-浏览器的进度条
3.7 本章小结
第4章 创建响应式新闻网站布局
4.1 设置主题
4.1.1 字体
4.1.2 font-weight属性
4.1.3 字体的简写属性
4.1.4 视觉层次结构
4.1.5 内联元素与块级元素
4.1.6 引号样式
4.2 使用CSS计数器
4.2.1 symbols描述符
4.2.2 system描述符
4.2.3 后缀描述符
4.2.4 全面总结
4.2.5 @counter与list-style-image
4.3 对图像进行样式设置
4.3.1 使用filter属性
4.3.2 处理加载失败的图片
4.3.3 格式化图像标题
4.4 使用CSS多列布局模块
4.4.1 创建媒体查询
4.4.2 对列进行定义和样式化
4.4.3 使用column-rule属性
4.4.4 使用column-gap属性调整间距
4.4.5 使内容跨越多个列
4.4.6 控制内容的分割
4.5 添加最后的润色
4.5.1 文本两端对齐和断词
4.5.2 使文本环绕在图像周围
4.5.3 将max-width和margin的值设置为auto
4.6 本章小结
第5章 悬停互动的摘要卡片
5.1 开始项目
5.2 使用网格进行页面布局
5.2.1 使用网格布局
5.2.2 媒体查询
5.3 使用background-clip属性对标题进行样式化
5.3.1 设置字体
5.3.2 使用background-clip
5.4 对卡片进行样式化
5.4.1 外部卡片容器
5.4.2 内部容器及其内容
5.5 在悬停和焦点内状态下使用过渡效果
5.6 本章小结
第6章 制作个人资料卡片
6.1 开始项目
6.2 设置CSS自定义属性
6.3 创建全高度背景
6.4 使用Flexbox对卡片进行样式化
6.5 美化和放置头像图片
6.5.1 object-fit属性
6.5.2 负边距
6.6 设置背景大小和位置
6.7 对内容进行样式化
6.7.1 姓名和职务
6.7.2 space-around和gap属性
6.7.3 flex-basis和flex-shrink属性
6.7.4 flex-direction属性
6.7.5 段落
6.7.6 flex-wrap属性
6.8 对动作进行样式化
6.9 本章小结
第7章 充分利用浮动特性
7.1 添加首字下沉效果
7.1.1 行距
7.1.2 对齐方式
7.1.3 第一个字母
7.2 对引文进行样式化
7.3 让文本环绕罗盘图片
7.3.1 添加shape-outside：circle属性
7.3.2 添加裁剪路径
7.3.3 使用border-radius创建形状
7.4 使文本环绕小狗图像
7.4.1 关于path()的使用
7.4.2 浮动图像
7.4.3 添加shape-margin
7.5 本章小结
第8章 设计结账购物车
8.1 开始项目
8.2 主题设计
8.2.1 排版设计
8.2.2 链接和按钮
8.2.3 输入文本框
8.2.4 表格
8.2.5 描述列表
8.2.6 卡片
8.3 移动端布局
8.3.1 表格移动端视图
8.3.2 描述列表
8.3.3 调用动作的链接
8.3.4 内边距、外边距以及外边距折叠
8.4 中等尺寸屏幕的布局
8.4.1 右对齐的数字
8.4.2 使前两列左对齐
8.4.3 使输入文本框中的数字右对齐
8.4.4 单元格内边