介绍开发新技术，带你紧跟H5技术变化潮流。
电子书
编辑推荐
本书是“CSS世界三部曲”的最后一部。
内容简介
本书是“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
展开全部
CSS新世界是2021年由人民邮电出版社出版,作者张鑫旭。
版权说明：本电子书已获得正版授权，由出版社通过知传链发行。
得书感谢您对《CSS新世界》关注和支持，如本书内容有不良信息或侵权等情形的，请联系本网站。
电子书
介绍开发新技术，带你紧跟H5技术变化潮流。
电子书
本书将带领读者循序渐进地探寻更优雅的解决方案，攻克每天都会遇到的各种网页样式难题。
电子书
网页制作实践：HTML、Web标准、CSS布局、JavaScript特效及HTML5和CSS3。适合各类人群阅读。
电子书
通俗易懂案例简洁形象，生动剖析晦涩难懂的知识点。 直击要点规避思维误区，为初学者打牢基础保驾护航。 全面培养讲透基础知识，亦注重开发技巧与思维锻炼。 精简浓缩精炼核心...
电子书
畅销图书全新升级——经久不衰的经典教程震撼升级，诠释网页制作的新技术。实例典型轻松易学——以实例方式讲解理论知识，直观、具体，有助于快速上手。边学边做学以致用——涵盖网页制作中...
电子书
站在完全零基础读者的角度，详尽介绍了HTML5和CSS3的基础知识、新技术及各种高级开发技巧。