精通 CSS 高级 Web 标准解决方案

🌙
手机阅读
本文目录结构

精通 CSS 高级 Web 标准解决方案

编辑推荐

  • ● 给网页添加样式的基础知识
  • ● 基本的网页排版技术
  • ● 通过背景、阴影、边框等属性美化元素盒子
  • ● 常见内容布局技术及其应用场景
  • ● 页面布局的系统方法及网格的使用
  • ● 响应式 Web 设计细节剖析
  • ● 表单与表格的样式化,让网页交互和复杂数据展示助力 Web 应用
  • ● 在空间和时间维度上操作元素:变换、过渡与动画
  • ● 混合模式、滤镜、蒙版等特效
  • ● CSS 开发实践中的质量控制与流程

内容简介

本书是 CSS 设计经典图书升级版,结合 CSS 近年来的发展,尤其是 CSS3 和 HTML5 的特性,对内容进行了全面改写。本书介绍了涉及字体、网页布局、响应式 Web 设计、表单、动画等方面的实用技巧,并讨论了如何实现稳健、灵活、无障碍访问的 Web 设计,以及在技术层面如何实现跨浏览器方案和后备方案。本书还介绍了一些鲜为人知的高级技巧,让你的 Web 设计脱颖而出。

作者简介

安迪 巴德(Andy Budd) 数字设计咨询公司 Clearleft 联合创始人,Web 标准倡导者。目前专注于用户体验设计领域。

埃米尔 比约克隆德 数字设计咨询公司 inUse 技术总监,拥有十余年专业 Web 开发经验,从客户端 JavaScript 到服务器端 Python 都有深入研究。

李松峰 360 奇舞团高级前端开发工程师、前端 TC 委员、W3C AC 代表,360 Web 字体服务“奇字库”作者,翻译出版过 40 余部技术及交互设计专著,如《JavaScript 高级程序设计》《简约至上》等。

目录

第 1 章 基础知识 1

  • 1.1 组织代码 1
  • 1.1.1 可维护性 2
  • 1.1.2 HTML 简史 2
  • 1.1.3 渐进增强 5
  • 1.2 创建结构化、语义化富 HTML 7
  • 1.2.1 ID 和 class 属性 9
  • 1.2.2 结构化元素 10
  • 1.2.3 div 和 span 12
  • 1.2.4 重新定义的表现性文本元素 12
  • 1.2.5 扩展 HTML 语义 13
  • 1.2.6 验证 15
  • 1.3 小结 16

第 2 章 添加样式 17

  • 2.1 CSS 选择符 17
  • 2.1.1 子选择符与同辈选择符 18
  • 2.1.2 通用选择符 20
  • 2.1.3 属性选择符 21
  • 2.1.4 伪元素 22
  • 2.1.5 伪类 23
  • 2.1.6 结构化伪类 25
  • 2.1.7 表单伪类 27
  • 2.2 层叠 28
  • 2.3 特殊性 29
  • 2.3.1 利用层叠次序 30
  • 2.3.2 控制特殊性 30
  • 2.3.3 特殊性与调试 32
  • 2.4 继承 33
  • 2.5 为文档应用样式 34
  • 2.5.1 link 与 style 元素 35
  • 2.5.2 性能 36
  • 2.6 小结 37

第 3 章 可见格式化模型 38

  • 3.1 盒模型 38
  • 3.1.1 盒子大小 39
  • 3.1.2 最大值和最小值 43
  • 3.2 可见格式化模型 43
  • 3.2.1 匿名盒子 45
  • 3.2.2 外边距折叠 45
  • 3.2.3 包含块 47
  • 3.2.4 相对定位 48
  • 3.2.5 绝对定位 48
  • 3.2.6 固定定位 49
  • 3.2.7 浮动 50
  • 3.2.8 格式化上下文 54
  • 3.2.9 内在大小与外在大小 56
  • 3.3 其他 CSS 布局模块 56
  • 3.3.1 弹性盒布局 57
  • 3.3.2 网格布局 57
  • 3.3.3 多栏布局 57
  • 3.3.4 Region 57
  • 3.4 小结 58

第 4 章 网页排版 59

  • 4.1 CSS 的基本排版技术 59
  • 4.1.1 文本颜色 61
  • 4.1.2 字体族 61
  • 4.1.3 字型大小与行高 63
  • 4.1.4 行间距、对齐及行盒子的构造 65
  • 4.1.5 文本粗细 68
  • 4.1.6 字体样式 69
  • 4.1.7 大小写变换和小型大写变体 69
  • 4.1.8 控制字母和单词间距 70
  • 4.2 版心宽度、律动和毛边 71
  • 4.2.1 文本缩进与对齐 72
  • 4.2.2 连字符 74
  • 4.2.3 多栏文本 74
  • 4.3 Web 字体 79
  • 4.3.1 许可 80
  • 4.3.2 @font-face 规则 81
  • 4.3.3 Web 字体、浏览器与性能 84
  • 4.3.4 使用 JavaScript 加载字体 85
  • 4.4 高级排版特性 87
  • 4.4.1 数字 89
  • 4.4.2 字距选项及文本渲染 90
  • 4.5 文本特效 91
  • 4.5.1 合理使用文本阴影 91
  • 4.5.2 使用 JavaScript 提升排版品质 93
  • 4.6 寻找灵感 95
  • 4.7 小结 95

第 5 章 漂亮的盒子 96

  • 5.1 背景颜色 96
  • 5.2 背景图片 99
  • 5.2.1 背景图片与内容图片 99
  • 5.2.2 简单的背景图片示例 100
  • 5.2.3 加载图片(以及其他文件) 102
  • 5.2.4 图片格式 103
  • 5.3 背景图片语法 104
  • 5.3.1 背景位置 104
  • 5.3.2 背景裁剪与原点 107
  • 5.3.3 背景附着 108
  • 5.3.4 背景大小 108
  • 5.3.5 背景属性简写 110
  • 5.4 多重背景 111
  • 5.5 边框与圆角 113
  • 5.5.1 边框半径:圆角 113
  • 5.5.2 创建正圆和胶囊形状 115
  • 5.5.3 边框图片 117
  • 5.6 盒阴影 118
  • 5.6.1 扩展半径:调整阴影大小 119
  • 5.6.2 内阴影 119
  • 5.6.3 多阴影 120
  • 5.7 渐变 121
  • 5.7.1 浏览器支持与浏览器前缀 122
  • 5.7.2 线性渐变 122
  • 5.7.3 放射渐变 124
  • 5.7.4 重复渐变 125
  • 5.7.5 把渐变当作图案 126
  • 5.8 为嵌入图片和元素添加样式 129
  • 5.8.1 可伸缩的图片模式 129
  • 5.8.2 控制对象大小的新方法 130
  • 5.8.3 可保持宽高比的容器 131
  • 5.8.4 减少图片大小 133
  • 5.9 小结 134

第 6 章 内容布局 135

  • 6.1 定位 135
  • 6.1.1 绝对定位的应用场景 136
  • 6.1.2 定位与 z-index:堆叠内容的陷阱 140
  • 6.2 水平布局 141
  • 6.2.1 使用浮动 142
  • 6.2.2 行内块布局 144
  • 6.2.3 使用表格显示属性实现布局 150
  • 6.2.4 不同技术优缺点比较 151
  • 6.3 Flexbox 152
  • 6.3.1 浏览器支持与语法 152
  • 6.3.2 理解 Flex 方向:主轴与辅轴 152
  • 6.3.3 对齐与空间 154
  • 6.3.4 可伸缩的尺寸 158
  • 6.3.5 Flexbox 布局 163
  • 6.3.6 列布局与个别排序 167
  • 6.3.7 嵌套的 Flexbox 布局 170
  • 6.3.8 Flexbox 不可用怎么办 171
  • 6.3.9 Flexbox 的 bug 与提示 172
  • 6.4 小结 173

第 7 章 页面布局与网格 174

  • 7.1 布局规划 174
  • 7.1.1 网格 174
  • 7.1.2 布局辅助类 175
  • 7.1.3 使用现成的框架 176
  • 7.1.4 固定、流动还是弹性 177
  • 7.2 创建灵活的页面布局 178
  • 7.2.1 包装元素 179
  • 7.2.2 行容器 181
  • 7.2.3 创建列 181
  • 7.2.4 流式空距 186
  • 7.2.5 增强列:包装与等高 190
  • 7.2.6 作为网页布局通用工具的 Flexbox 193
  • 7.3 二维布局:CSS Grid Layout 194
  • 7.3.1 网格布局的术语 195
  • 7.3.2 定义行和列 196
  • 7.3.3 添加网格项 198
  • 7.3.4 自动网格定位 201
  • 7.3.5 网格模板区 204
  • 7.4 小结 206

第 8 章 响应式 Web 设计与 CSS 207

  • 8.1 一个例子 207
  • 8.1.1 简单上手 207
  • 8.1.2 媒体查询 208
  • 8.1.3 加入更多断点 210
  • 8.2 响应式 Web 设计的起源 212
  • 8.3 浏览器视口 214
  • 8.3.1 视口定义的差别 214
  • 8.3.2 配置视口 216
  • 8.4 媒体类型与媒体查询 218
  • 8.4.1 媒体类型 218
  • 8.4.2 媒体查询 218
  • 8.5 响应式设计与结构化 CSS 221
  • 8.5.1 移动优先的 CSS 221
  • 8.5.2 媒体查询放在何处 224
  • 8.6 几种响应式设计模式 224
  • 8.6.1 响应式文本列 224
  • 8.6.2 没有媒体查询的响应式 Flexbox 225
  • 8.6.3 响应式网格与网格模板区 227
  • 8.7 响应式布局之外 231
  • 8.7.1 响应式背景图片 231
  • 8.7.2 响应式嵌入媒体 233
  • 8.7.3 响应式排版 239
  • 8.8 小结 243

第 9 章 表单与数据表 244

  • 9.1 设计数据表 244
  • 9.1.1 表格专有元素 245
  • 9.1.2 为表格应用样式 247
  • 9.1.3 响应式表格 250
  • 9.2 表单 254
  • 9.2.1 简单的表单 255
  • 9.2.2 表单反馈与帮助 264
  • 9.2.3 高级表单样式 267
  • 9.3 小结 276

第 10 章 变换、过渡与动画 277

  • 10.1 概述 277
  • 10.2 二维变换 278
  • 10.2.1 变换原点 281
  • 10.2.2 平移 282
  • 10.2.3 多重变换 283
  • 10.2.4 缩放和变形 286
  • 10.2.5 二维矩阵变换 287
  • 10.2.6 变换与性能 288
  • 10.3 过渡 289
  • 10.3.1 过渡计时函数 291
  • 10.3.2 使用不同的正向和反向过渡 294
  • 10.3.3 “粘着”过渡 294
  • 10.3.4 延迟过渡 294
  • 10.3.5 过渡的能与不能 295
  • 10.4 CSS 关键帧动画 297
  • 10.4.1 动画与生命的幻象 297
  • 10.4.2 曲线动画 301
  • 10.5 三维变换 303
  • 10.5.1 透视简介 304
  • 10.5.2 创建三维部件 306
  • 10.5.3 高级三维变换 310
  • 10.6 小结 311

第 11 章 高级特效 312

  • 11.1 CSS Shapes 314
  • 11.2 剪切与蒙版 320
  • 11.2.1 剪切 320
  • 11.2.2 蒙版 325
  • 11.2.3 透明 JPEG 与 SVG 蒙版 327
  • 11.3 混合模式与合成 330
  • 11.3.1 给背景图片上色 331
  • 11.3.2 混合元素 332
  • 11.4 CSS 中的图像处理:滤镜 336
  • 11.4.1 调色滤镜 336
  • 11.4.2 高级滤镜与 SVG 341
  • 11.5 应用特效的次序 344
  • 11.6 小结 344

第 12 章 品控与流程 345

  • 12.1 外部代码质量:调试 CSS 345
  • 12.1.1 浏览器如何解析 CSS 346
  • 12.1.2 优化渲染性能 349
  • 12.2 内部代码质量:以人为本 353
  • 12.2.1 理解 CSS 353
  • 12.2.2 代码质量的例子 354
  • 12.2.3 管理层叠 357
  • 12.2.4 结构命名与 CSS 方法论 357
  • 12.2.5 管理复杂性 360
  • 12.2.6 代码是写给人看的 363
  • 12.3 工具与流程 364
  • 12.4 工作流工具 367
  • 12.4.1 静态分析及 Linter 367
  • 12.4.2 构建工具 367
  • 12.5 未来的 CSS 语法与结构 370
  • 12.5.1 CSS 变量:自定义属性 370
  • 12.5.2 HTTP/2 与服务器推送 371
  • 12.5.3 Web 组件 372
  • 12.5.4 CSS 与可扩展的 Web 373
  • 12.6 小结 374

AXIHE / 精选教程

浏览全部教程

HTML

CSS

JS

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

安邦的私人微信

微信号: yaolushan

Anbang

Bilibili(B站)

朱安邦

Anbang