- CSS新特性掌握不系统:全面梳理CSS3及之后版本的上百个新特性,帮你建立完整的知识体系。
- 兼容性与渐进增强处理困难:详细讲解@supports规则、属性值语法差异等渐进增强技巧,让你放心使用新特性。
- 布局与定位痛点:深入剖析position:sticky、逻辑属性、尺寸关键字等,解决实际开发中的布局难题。
- 字体与排版细节不精:讲解system-ui、unicode-range、font-display等字体新特性,提升中文排版质量。
- 缺乏实战应用思路:通过大量实例展示新特性在真实项目中的应用场景与最佳实践。
- 有一定CSS基础的前端开发者:希望突破技能瓶颈,系统掌握CSS3新特性。
- 前端架构师与技术负责人:需要了解CSS新特性以制定团队技术选型与规范。
- 对CSS有深入兴趣的全栈工程师:希望提升前端样式开发能力,写出更优雅的代码。
- UI/UX设计师:想了解CSS新特性对设计实现的影响,更好地与开发协作。
- 先通读第1、2章:了解CSS3历史背景和数据类型、属性值语法等基础知识,为后续学习铺路。
- 重点精读第3、4、5章:这三章覆盖尺寸、定位、字体等高频新特性,是提升日常开发效率的关键。
- 结合配套网站实践:利用作者开发的配套网站查看实例效果,并动手修改代码观察变化。
- 按需查阅:本书知识点密集,可作为案头参考书,遇到具体问题时直接翻阅对应章节。
- 系统掌握CSS3新特性:全面了解上百个CSS新特性的语法、适用场景与兼容性处理方案。
- 提升布局与排版能力:熟练运用sticky定位、逻辑属性、尺寸关键字等解决复杂布局问题。
- 掌握渐进增强技巧:学会使用@supports、属性值语法差异等方法安全地使用新特性。
- 优化字体与文本渲染:能够利用font-display、unicode-range等提升网页字体加载与排版体验。
- 突破技能瓶颈:从会用CSS进阶到精通CSS,写出更简洁、高效、可维护的样式代码。
📖 书籍简介
基本信息
- 商品名称:CSS新世界
- 作者:张鑫旭|责编:刘雅思
- 定价:129.9
- 出版社:人民邮电
- 书号:9787115562845
其他参考信息(以实物为准)
- 出版时间:2021-08-01
- 印刷时间:2021-08-01
- 版次:1
- 印次:1
- 开本:16开
- 包装:平装
- 页数:580
- 字数:885千字
内容提要
本书是“CSS世界三部曲”
的 一部。这是一本关于
CSS的进阶读物,专门讲
CSS3及其之后版本的新特
性。在本书中,作者结合自
己多年的从业经验,讲解
CSS基础知识,并充分考虑
前端开发者的需求,以CSS
新特性的历史背景为线索,
去粗取精,注重细节,深入
浅出地介绍了上百个CSS新
特性。此外,作者专门还为
本书开发了配套网站,用于
书中实例效果的在线展示和
问题答疑。
本书的所有内容都是作
者经过深入思考和探索后提
炼出来的,知识点多且内容
丰富,注重技术细节、经验
分享和解决问题的思路。本
书的主要目标是帮助前端开
发者突破CSS技能提升的瓶
颈, 适合具有一定CSS
基础的前端开发者阅读。
作者简介
张鑫旭,前端开发工程师, 知名前端博客“鑫空间-鑫生活”博主,目前就职于阅文集团用户体验设计部(YUX),担任技术经理。2007年开始接触前端,10年来一直工作在前端开发一线,在HTML/CSS等与交互体验关系密切的领域花了大量的时间学习和研究,有比较多的心得体会。
目录
第1章 概述
1.1 CSS3出现的历史和背景
1.2 模块化的CSS新世界
第2章 需要提前了解的知识
2.1 互通互联的CSS数据类型
2.1.1 为什么要关注CsS数据类型
2.1.2 几个常见数据类型的简单介绍
2.2 学会看懂css属性值定义语法
2.2.1 学习css属性值定义语法的好处
2.2.2 CSS属性值定义语法详解
2.3 了解CSS全局关键字属性值
2.3.1 用过都说好的继承关键字inherit
2.3.2 可以一用的初始值关键字initial
2.3.3 了解一下不固定值关键字unset
2.3.4 我个人很喜欢的恢复关键字revert
2.4 指代所有CSS属性的all属性
2.5 CSS新特性的渐进增强处理技巧
2.5.1 直接使用CSS新特性
2.5.2 利用属性值的语法差异实现兼容
2.5.3 借助伪类或伪元素区分浏览器的技巧
2.5.4 @supports规则下的渐进增强处理
2.5.5 对CSS新特性渐进增强处理的总结
第3章 从增强已有的CSS属性开始
3.1 贯穿全书的尺寸体系
3.1.1 从width:fit-content声明开始
3.1.2 stretch、available和fill-available关键字究竟用哪个
3.1.3 深入了解min-content关键字
3.1.4 快速了解max-content关键字
3.2 深入了解CSS逻辑属性
3.2.1 CSS逻辑属性有限的使用场景
3.2.2 inline/block与stan/end元素
3.2.3 width/height属性与inline-size/block-size逻辑属性
3.2.4 由margin/padding/border演变而来的逻辑属性
3.2.5 text-align属性支持的逻辑属性值
3.2.6 有用的CSS逻辑属性inset
3.3 在CSS边框上做文章
3.3.1 昙花一现的CSS多边框
3.3.2 的border-image属性
3.3.3 border-image属性与渐变边框
3.4 Dosition属性的增强
3.4.1 深入了解sticky属性值与黏性定位
3.4.2 position:sticky声明的精彩应用——层次滚动
3.5 font-family属性和@font-face规则新特性
3.5.1 system-ui等全新的通用字体族
3.5.2 local()函数与系统字体的调用
3.5.3 unicode-range属性的详细介绍
3.5.4 woff/woff2字体
3.5.5 font-display属性与自定义字体的加载渲染
3.6 字符单元的中断与换行
3.6.1 使用keep-all属性值优化中文排版
📑 章节目录
- 概述:CSS3的历史背景与模块化新世界
- 需要提前了解的知识:数据类型、属性值语法与全局关键字
- 从增强已有的CSS属性开始:尺寸、逻辑属性与边框
- position属性的增强:sticky定位与层次滚动
- 字体与文本排版新特性:system-ui、unicode-range与font-display
- CSS选择器与伪类的新发展
- 颜色、渐变与背景的新特性
- 变形、过渡与动画的进阶应用
- 网格布局与弹性布局的深入实践
- CSS新特性综合实战与性能优化