4.7
用户推荐指数
计算机 类型
8.3 豆瓣评分
可以朗读 语音朗读
566千字 字数
2021-07-01 发行日期
展开全部

主编推荐语

本书是“CSS世界三部曲”的最后一部。

内容简介

这是一本关于CSS的进阶读物，专门讲CSS3及其之后版本的新特性。在本书中，作者结合自己多年的从业经验，讲解CSS基础知识，并充分考虑前端开发者的需求，以CSS新特性的历史背景为线索，去粗取精，注重细节，深入浅出地介绍了上百个CSS新特性。此外，作者专门还为本书开发了配套网站，用于书中实例效果的在线展示和问题答疑。

本书的所有内容都是作者经过深入思考和探索后提炼出来的，知识点多且内容丰富，注重技术细节、经验分享和解决问题的思路。本书的主要目标是帮助前端开发者突破CSS技能提升的瓶颈，非常适合具有一定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与start/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 position属性的增强
  • 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属性值优化中文排版
  • 3.6.2 break-all属性值的问题和line-break属性
  • 3.6.3 hyphens属性与连字符
  • 3.6.4 <wbr>与精确换行的控制
  • 3.6.5 overflow-wrap:anywhere声明有什么用
  • 3.7 text-align属性相关的新特性
  • 3.7.1 match-parent等新属性值
  • 3.7.2 text-align属性的字符对齐特性
  • 3.8 text-decoration属性全新升级
  • 3.8.1 text-decoration属性现在是一种缩写
  • 3.8.2 text-decoration属性的累加特性
  • 3.8.3 唯一实用的wavy波浪线
  • 3.8.4 可能需要text-underline-position:under声明
  • 3.8.5 更需要text-underline-offset属性
  • 3.8.6 讲一讲text-decoration-skip属性的故事
  • 3.9 color属性与颜色设置
  • 3.9.1 148个颜色关键字
  • 3.9.2 transparent关键字
  • 3.9.3 currentColor关键字
  • 3.9.4 RGB颜色和HSL颜色的新语法
  • 3.10 必学必会的background属性新特性
  • 3.10.1 最实用的当属background-size属性
  • 3.10.2 background属性最成功的设计——多背景
  • 3.10.3 background-clip属性与背景显示区域限制
  • 3.10.4 background-clip:text声明与渐变文字效果
  • 3.10.5 background-origin属性与背景定位原点控制
  • 3.10.6 space和round平铺模式
  • 3.10.7 可以指定background-position的起始方位了
  • 3.11 outline相关新属性outline-offset
  • 3.12 cursor属性新增的手形效果
  • 3.12.1 放大手形zoom-in和缩小手形zoom-out简介
  • 3.12.2 抓取手形grab和放手手形grabbing简介
  • 第4章 更细致的样式表现
  • 4.1 透明度控制属性opacity
  • 4.1.1 opacity属性的叠加计算规则
  • 4.1.2 opacity属性的边界特性与应用
  • 4.2 深入了解圆角属性border-radius
  • 4.2.1 了解border-radius属性的语法
  • 4.2.2 弄懂圆角效果是如何产生的
  • 4.2.3 border-radius属性渲染border边框的细节
  • 4.2.4 border-radius属性的高级应用技巧
  • 4.3 box-shadow盒阴影
  • 4.3.1 inset关键字与内阴影
  • 4.3.2 不要忽略第四个长度值
  • 4.3.3 多阴影特性与图形绘制
  • 4.3.4 box-shadow动画与性能优化
  • 4.4 CSS 2D变换
  • 4.4.1 从基本的变换方法说起
  • 4.4.2 transform属性的若干细节特性
  • 4.4.3 元素应用transform属性后的变化
  • 4.4.4 深入了解矩阵函数matrix()
  • 4.4.5 常常被遗忘的transform-origin属性
  • 4.4.6 scale()函数缩放和zoom属性缩放的区别
  • 4.4.7 了解全新的translate、scale和rotate属性
  • 4.5 简单实用的calc()函数
  • 4.5.1 关于calc()函数
  • 4.5.2 了解min()、max()和clamp()函数
  • 第5章 更强的视觉表现
  • 5.1 CSS渐变
  • 5.1.1 深入了解linear-gradient()线性渐变
  • 5.1.2 深入了解radial-gradient()径向渐变
  • 5.1.3 了解conic-gradient()锥形渐变
  • 5.1.4 重复渐变
  • 5.2 CSS 3D变换
  • 5.2.1 从常用的3D变换函数说起
  • 5.2.2 必不可少的perspective属性
  • 5.2.3 用translateZ()函数寻找透视位置
  • 5.2.4 指定perspective透视点的两种写法
  • 5.2.5 理解perspective-origin属性
  • 5.2.6 transform-style:preserve-3d声明的含义
  • 5.2.7 backface-visibility属性的作用
  • 5.2.8 值得学习的旋转木马案例
  • 5.2.9 3D变换与GPU加速
  • 5.3 CSS过渡
  • 5.3.1 你可能不知道的transition属性知识
  • 5.3.2 了解三次贝塞尔时间函数类型
  • 5.3.3 transition与visibility属性的应用指南
  • 5.4 CSS动画
  • 5.4.1 初识animation属性
  • 5.4.2 @keyframes规则的语法和特性
  • 5.4.3 动画命名与<custom-ident>数据类型
  • 5.4.4 负延时与即时播放效果
  • 5.4.5 reverse和alternate关键字的区别和应用
  • 5.4.6 动画播放次数可以是小数
  • 5.4.7 forwards和backwards属性值究竟是什么意思
  • 5.4.8 如何暂停和重启CSS动画
  • 5.4.9 深入理解steps()函数
  • 5.4.10 标签嵌套与动画实现的小技巧
  • 第6章 全新的布局方式
  • 6.1 分栏布局
  • 6.1.1 重点关注columns属性
  • 6.1.2 column-gap和gap属性的关系
  • 6.1.3 了解column-rule、column-span和column-fill属性
  • 6.1.4 分栏布局实现两端对齐布局
  • 6.1.5 break-inside属性与元素断点位置的控制
  • 6.1.6 box-decoration-break属性与元素断点装饰的控制
  • 6.2 弹性布局
  • 6.2.1 设置display:flex声明发生了什么
  • 6.2.2 flex-direction属性与整体布局方向
  • 6.2.3 flex-wrap属性与整体布局的换行表现
  • 6.2.4 熟练使用flex-flow属性
  • 6.2.5 CSS全新的对齐特性综述
  • 6.2.6 justify-content属性与整体布局的水平对齐
  • 6.2.7 垂直对齐属性align-items与align-self
  • 6.2.8 align-content属性与整体布局的垂直对齐
  • 6.2.9 order属性与单个子项的顺序控制
  • 6.2.10 必读：深入理解flex属性
  • 6.2.11 应该在什么时候使用flex:0/1/none/auto
  • 6.2.12 详细了解flex-basis属性与尺寸计算规则
  • 6.2.13 弹性布局最后一行不对齐的处理
  • 6.3 网格布局
  • 6.3.1 grid-template-columns和grid-template-rows属性简介
  • 6.3.2 了解网格布局专用单位fr
  • 6.3.3 详细介绍minmax()和fit-content()函数
  • 6.3.4 repeat()函数的详细介绍
  • 6.3.5 了解grid-template-areas属性
  • 6.3.6 缩写属性grid-template
  • 6.3.7 了解grid-auto-columns和grid-auto-rows属性
  • 6.3.8 深入了解grid-auto-flow属性
  • 6.3.9 缩写属性grid
  • 6.3.10 间隙设置属性column-gap和row-gap（grid-column-gap和grid- row-gap）
  • 6.3.11 缩写属性gap（grid-gap）
  • 6.3.12 元素对齐属性justify-items和align-items
  • 6.3.13 缩写属性place-items
  • 6.3.14 整体对齐属性justify-content和align-content
  • 6.3.15 缩写属性place-content
  • 6.3.16 区间范围设置属性grid-column-start/grid-column-end和grid-row-start/ grid-row-end
  • 6.3.17 缩写属性grid-column和grid-row
  • 6.3.18 缩写属性grid-area外加区域范围设置
  • 6.3.19 grid子项对齐属性justify-self和align-self
  • 6.3.20 缩写属性place-self
  • 6.4 CSS Shapes布局
  • 6.4.1 详细了解shape-outside属性
  • 6.4.2 了解shape-margin属性
  • 6.4.3 了解shape-image-threshold属性
  • 6.4.4 CSS Shapes布局案例
  • 第7章 不同设备的适配与响应
  • 7.1 @media规则
  • 7.1.1 @media规则的详细介绍
  • 7.1.2 对深色模式和动画关闭的支持检测
  • 7.1.3 对鼠标行为和触摸行为的支持检测
  • 7.2 环境变量函数env()
  • 7.3 rem和vw单位与移动端适配最佳实践
  • 7.3.1 了解视区相对单位
  • 7.3.2 calc()函数下的最佳实践
  • 7.3.3 适合新手的纯vw单位的布局
  • 7.4 使用touch-action属性控制设备的触摸行为
  • 7.4.1 touch-action属性的常见应用
  • 7.4.2 了解touch-action属性各个属性值的含义
  • 7.5 image-set()函数与多倍图设置
  • 第8章 CSS的变量函数var()与自定义属性
  • 8.1 CSS变量的语法、特性和细节
  • 8.1.1 CSS自定义属性的命名
  • 8.1.2 var()函数的语法和特性
  • 8.1.3 CSS自定义属性的作用域
  • 8.1.4 CSS自定义属性值的细节
  • 8.2 CSS自定义属性的设置与获取
  • 8.2.1 在HTML标签中设置CSS自定义属性
  • 8.2.2 在JavaScript中设置和获取CSS自定义属性
  • 8.3 使用content属性显示CSS自定义属性值的技巧
  • 8.4 CSS变量的自定义语法技术简介
  • 8.4.1 使用CSS变量自定义全新的CSS语法
  • 8.4.2 CSS变量模拟CSS新特性
  • 第9章 文本字符处理能力的升级
  • 9.1 文字的美化与装饰
  • 9.1.1 文字阴影属性text-shadow
  • 9.1.2 文字描边属性text-stroke
  • 9.1.3 文字颜色填充属性text-fill-color
  • 9.1.4 学会使用text-emphasis属性进行强调装饰
  • 9.2 文字的旋转与阅读方向
  • 9.2.1 文字方向控制属性text-orientation
  • 9.2.2 文字横向合并属性text-combine-upright
  • 9.2.3 了解unicode-bidi属性的新属性值
  • 9.3 文本字符的尺寸控制
  • 9.3.1 text-size-adjust属性到底有没有用
  • 9.3.2 使用ch新单位换个心情
  • 9.3.3 使用tab-size属性控制代码缩进的大小
  • 9.4 文字渲染与字体呈现
  • 9.4.1 了解text-rendering属性
  • 9.4.2 了解文字平滑属性font-smooth
  • 9.4.3 font-stretch属性与字符胖瘦控制
  • 9.4.4 font-synthesis属性与中文体验增强
  • 9.5 字体特征和变体
  • 9.5.1 升级后的font-variant属性
  • 9.5.2 了解字距调整属性font-kerning
  • 9.5.3 font-feature-settings属性的定位
  • 9.6 可变字体
  • 9.6.1 什么是可变字体
  • 9.6.2 可变字体与font-variation-settings属性
  • 9.6.3 了解font-optical-sizing属性
  • 第10章 图片等多媒体的处理
  • 10.1 图片和视频元素的内在尺寸控制
  • 10.1.1 超级好用的object-fit属性
  • 10.1.2 理解object-position属性的作用规则
  • 10.2 使用image-orientation属性纠正图片的方向
  • 10.3 image-rendering属性与图像的渲染
  • 10.4 不常用的图像类型函数
  • 10.4.1 实现图像半透明叠加的cross-fade()函数
  • 10.4.2 神奇的element()函数
  • 第11章 更绚丽的视觉表现
  • 11.1 深入了解CSS滤镜属性filter
  • 11.1.1 filter属性支持的滤镜函数详解
  • 11.1.2 更进一步的滤镜技术
  • 11.1.3 引用SVG滤镜技术
  • 11.2 姐妹花滤镜属性backdrop-filter
  • 11.2.1 backdrop-filter属性与filter属性的异同
  • 11.2.2 backdrop-filter属性与毛玻璃效果
  • 11.3 深入了解CSS混合模式
  • 11.3.1 详细了解各种混合模式效果
  • 11.3.2 滤镜和混合模式的化合反应
  • 11.4 混合模式属性background-blend-mode
  • 11.4.1 background-blend-mode属性的常见应用
  • 11.4.2 深入了解background-blend-mode属性的作用细节
  • 11.5 使用isolation: isolate声明隔离混合模式
  • 11.5.1 isolation属性
  • 11.5.2 isolation:isolate声明的作用原理
  • 第12章 更丰富的图形处理
  • 12.1 超级实用的CSS遮罩
  • 12.1.1 mask-image属性的详细介绍
  • 12.1.2 mask-mode属性的简单介绍
  • 12.1.3 mask-repeat属性的简单介绍
  • 12.1.4 mask-position属性的简单介绍
  • 12.1.5 mask-clip属性的详细介绍
  • 12.1.6 mask-origin属性的简单介绍
  • 12.1.7 mask-size属性的简单介绍
  • 12.1.8 了解mask-type属性
  • 12.1.9 mask-composite属性的详细介绍
  • 12.1.10 CSS遮罩的一些经典应用示例
  • 12.1.11 了解-webkit-mask-box-image和mask-border属性
  • 12.2 同样实用的CSS剪裁属性clip-path
  • 12.2.1 快速了解clip-path属性的各个属性值
  • 12.2.2 深入了解nonzero和evenodd填充规则
  • 12.2.3 clip-path属性的精彩应用示例
  • 12.3 -webkit-box-reflect属性与倒影效果的实现
  • 12.3.1 -webkit-box-reflect属性的简单介绍
  • 12.3.2 Firefox浏览器实现投影效果的解决方案
  • 12.4 使用offset属性实现元素的不规则运动
  • 12.4.1 了解offset属性演变的历史
  • 12.4.2 offset-anchor属性的简单介绍
  • 12.4.3 offset-distance属性的简单介绍
  • 12.4.4 offset-path属性的详细介绍
  • 12.4.5 快速了解offset-position属性
  • 12.4.6 理解offset-rotate属性
  • 第13章 用户行为与体验增强
  • 13.1 滚动行为相关
  • 13.1.1 scroll-behavior属性与页面平滑滚动
  • 13.1.2 使用overscroll-behavior属性实现当滚动嵌套时终止滚动
  • 13.1.3 了解overflow-anchor属性诞生的背景
  • 13.1.4 CSS Scroll Snap简介
  • 13.1.5 CSS Scrollbars与滚动条样式的自定义
  • 13.2 点击行为相关
  • 13.2.1 你不知道的pointer-events:none声明
  • 13.2.2 触摸行为设置属性touch-action
  • 13.3 拉伸行为相关
  • resize属性应用指南
  • 13.4 输入行为相关
  • 使用cater-color属性改变插入光标的颜色
  • 13.5 选择行为相关
  • 13.5.1 聊聊user-select属性
  • 13.5.2 使用::selection改变文字被选中后的颜色
  • 13.6 打印行为相关
  • 13.6.1 快速了解color-adjust属性
  • 13.6.2 page-break系列属性与分页的控制
  • 13.6.3 orphans/widows属性与内容行数的限制
  • 13.6.4 了解@page规则
  • 13.7 性能增强
  • 13.7.1 慎用will-change属性提高动画性能
  • 13.7.2 深入了解contain属性
  • 13.7.3 content-visibility属性
  • 第14章 SVG元素的CSS控制
  • 14.1 使用CSS属性直接绘制SVG图形
  • SVG图形CSS化的意义何在
  • 14.2 CSS属性下的填充设置
  • 14.2.1 fill属性在Web开发中的应用
  • 14.2.2 快速了解fill-opacity和fill-rule属性
  • 14.3 CSS属性下的描边设置
  • 14.3.1 使用stroke属性实现全兼容的文字描边效果
  • 14.3.2 使用stroke-dasharray属性实现伸缩自如的虚线效果
  • 14.3.3 stroke-dashoffset属性的经典Web应用举例
  • 14.4 CSS属性下的标记设置
  • 14.4.1 了解marker-start/marker-end属性与起止点的标记
  • 14.4.2 了解marker-mid属性与转折点的标记
  • 14.5 其他常见的SVG CSS属性
  • 14.5.1 使用paint-order属性实现外描边效果
  • 14.5.2 使用vector-effect属性让描边不会缩放
  • 14.5.3 使用text-anchor属性让文字块水平居中显示
  • 14.5.4 使用dominant-baseline属性让文字块垂直居中显示
  • 14.5.5 alignment-baseline和dominant-baseline属性的区别
  • 第15章 Houdini是CSS新的未来
  • 15.1 了解CSS Paint API
  • 15.1.1 CSS变量让CSS Paint API如虎添翼
  • 15.1.2 简单的总结
  • 15.2 了解CSS Properties & Values API
  • 15.3 了解CSS Parser API
  • 15.4 详细了解CSS Layout API
  • 15.4.1 layout()函数的参数之间的逻辑关系
  • 15.4.2 文本居中同时一侧对齐的布局案例
  • 15.5 快速了解CSS Typed OM
  • 15.6 简单了解Animation Worklet
  • 15.7 了解Font Metrics API
展开全部

评分及书评

4.7
3个评分

出版方

人民邮电出版社

人民邮电出版社是工业和信息化部主管的大型专业出版社，成立于1953年10月1日。人民邮电出版社坚持“立足信息产业、面向现代社会、传播科学知识、服务科教兴国”，致力于通信、计算机、电子技术、教材、少儿、经管、摄影、集邮、旅游、心理学等领域的专业图书出版。