编辑推荐
作者张鑫旭,前端开发工程师,国内知名前端博客“鑫空间-鑫生活”博主。
-茫茫星海中鲸鱼永不犯错的航行,
-那是因为有星辰的指引;
-芸芸CSS世界中想要不断突破瓶颈,
-需要有本书的指引。
CSS入门简单深入难,无数人遇到“天花板”,本书是打破能力上升瓶颈之作。
前端开发行业潜心近10年一直研究看似简单的CSS的人可谓是凤毛麟角,作者从2009年开始写原创技术文章,现在其博客已经成为国内访问量巨大的个人前端博客之一,可以说众多前端初学者是看着作者的博客成长的。
本书几乎所有内容都是经过作者自我思考和认知提炼后的产物,都是其他地方难得一见的“干货”。本书不会像传统书籍一样,一个知识点就是一节,因为CSS的各个属性的表现和行为相互间是参杂在一起的,很难一个一个分开,为了把错综复杂的CSS知识点讲好,本书以独特的“世界观”的视角去看待CSS。
为了拓展和更直观演示各个特性的效果,书中每个案例都有对应的在线demo演示页面,以二维码形式放在书中,方便读者扫码查看,快速体验。
内容简介
本书从前端开发人员的需求出发,以“流”为线索,从结构、内容到美化装饰等方面,全面且深入地讲解前端开发人员必须了解和掌握的大量的CSS知识点。同时,作者结合多年的从业经验,通过大量的实战案例,详尽解析CSS的相关知识与常见问题。作者还为本书开发了专门的配套网站,进行实例展示、问题答疑。
作为一本CSS深度学习的书,书中介绍大量许多前端开发人员都不知道的CSS知识点。通过阅读本书,读者会对CSS世界的深度和广度有一个全新的认识。
作者简介
张鑫旭,前端开发工程师,国内知名前端博客“鑫空间-鑫生活”博主,目前就职于阅文集团用户体验设计部(YUX),担任技术经理。2007年开始接触前端,10年来一直工作在前端开发一线,在HTML/CSS等与交互体验关系密切的领域花了大量的时间学习和研究,有比较多的心得体会。
目录
第 1章 概述 1
1.1 CSS世界的“世界观” 1
1.2 世界都是创造出来的 3
1.3 CSS完胜SVG的武器—流 4
1.3.1 何为“流” 5
1.3.2 流是如何影响整个CSS世界的 6
1.3.3 什么是流体布局 6
1.4 CSS世界的开启从IE8开始 6
1.5 table自己的世界 7
1.6 CSS新世界—CSS3 7
第 2章 需提前了解的术语和概念 8
2.1 务必了解的CSS世界的专业术语 8
2.2 了解CSS世界中的“未定义行为” 11
第3章 流、元素与基本尺寸 13
3.1 块级元素 13
3.1.1 为什么list-item元素会出现项目符号 15
3.1.2 display:inline-table的盒子是怎样组成的 16
3.1.3 width/height作用在哪个盒子上 16
3.2 width/height作用的具体细节 16
3.2.1 深藏不露的width:auto 17
3.2.2 width值作用的细节 24
3.2.3 CSS流体布局下的宽度分离原则 27
3.2.4 改变width/height作用细节的box-sizing 29
3.2.5 相对简单而单纯的height:auto 33
3.2.6 关于height:100% 33
3.3 CSS min-width/max-width和min-height/max-height二三事 37
3.3.1 为流体而生的min-width/max-width 38
3.3.2 与众不同的初始值 38
3.3.3 超越!important 39
3.3.4 任意高度元素的展开收起动画技术 40
3.4 内联元素 42
3.4.1 哪些元素是内联元素 42
3.4.2 内联世界深入的基础—内联盒模型 42
3.4.3 幽灵空白节点 44
第4章 盒尺寸四大家族 45
4.1 深入理解content 45
4.1.1 content与替换元素 45
4.1.2 content内容生成技术 57
4.2 温和的padding属性 73
4.2.1 padding与元素的尺寸 73
4.2.2 padding的百分比值 77
4.2.3 标签元素内置的padding 79
4.2.4 padding与图形绘制 80
4.3 激进的margin属性 81
4.3.1 margin与元素尺寸以及相关布局 82
4.3.2 margin的百分比值 87
4.3.3 正确看待CSS世界里的margin合并 87
4.3.4 深入理解CSS中的margin:auto 94
4.3.5 margin无效情形解析 97
4.4 border属性 100
4.4.1 为什么border-width不支持百分比值 100
4.4.2 了解各种border-style类型 101
4.4.3 border-color和color 105
4.4.4 border与透明边框技巧 106
4.4.5 border与图形构建 108
4.4.6 border等高布局技术 109
第5章 内联元素与流 111
5.1 字母x—CSS世界中隐匿的举足轻重的角色 111
5.1.1 字母x与CSS世界的基线 111
5.1.2 字母x与CSS中的x-height 112
5.1.3 字母x与CSS中的ex 113
5.2 内联元素的基石line-height 114
5.2.1 内联元素的高度之本—line-height 114
5.2.2 为什么line-height可以让内联元素“垂直居中” 119
5.2.3 深入line-height的各类属性值 121
5.2.4 内联元素line-height的“大值特性” 124
5.3 line-height的好朋友vertical-align 126
5.3.1 vertical-align家族基本认识 127
5.3.2 vertical-align作用的前提 129
5.3.3 vertical-align和line-height之间的关系 131
5.3.4 深入理解vertical-align线性类属性值 135
5.3.5 深入理解vertical-align文本类属性值 141
5.3.6 简单了解vertical-align上标下标类属性值 142
5.3.7 无处不在的vertical-align 143
5.3.8 基于vertical-align属性的水平垂直居中弹框 144
第6章 流的破坏与保护 147
6.1 魔鬼属性float 147
6.1.1 float的本质与特性 147
6.1.2 float的作用机制 151
6.1.3 float更深入的作用机制 154
6.1.4 float与流体布局 155
6.2 float的天然克星clear 157
6.2.1 什么是clear属性 157
6.2.2 成事不足败事有余的clear 158
6.3 CSS世界的结界—BFC 160
6.3.1 BFC的定义 160
6.3.2 BFC与流体布局 160
6.4 结界overflow 164
6.4.1 overflow剪裁界线border box 165
6.4.2 了解overflow-x和overflow-y 166
6.4.3 overflow与滚动条 166
6.4.4 依赖overflow的样式表现 169
6.4.5 overflow与锚点定位 170
6.5 float的兄弟position:absolute 177
6.5.1 absolute的包含块 178
6.5.2 具有相对特性的无依赖absolute定位 184
6.5.3 absolute与text-align 191
6.6 absolute与overflow 193
6.7 absolute与clip 195
6.7.1 重新认识的clip属性 196
6.7.2 深入了解clip的渲染 198
6.8 absolute的流体特性 199
6.8.1 当absolute遇到left/top/right/bottom属性 199
6.8.2 absolute的流体特性 200
6.8.3 absolute的margin:auto居中 202
6.9 position:relative才是大哥 202
6.9.1 relative对absolute的限制 203
6.9.2 relative与定位 203
6.9.3 relative的zui小化影响原则 206
6.10 强悍的position:fixed固定定位 207
6.10.1 position:fixed不一样的“包含块” 207
6.10.2 position:fixed的absolute模拟 208
6.10.3 position:fixed与背景锁定 209
第7章 CSS世界的层叠规则 211
7.1 z-index只是CSS层叠规则中的一叶小舟 211
7.2 理解CSS世界的层叠上下文和层叠水平 212
7.2.1 什么是层叠上下文 212
7.2.2 什么是层叠水平 212
7.3 理解元素的层叠顺序 212
7.4 务必牢记的层叠准则 214
7.5 深入了解层叠上下文 214
7.5.1 层叠上下文的特性 214
7.5.2 层叠上下文的创建 214
7.5.3 层叠上下文与层叠顺序 217
7.6 z-index负值深入理解 219
7.7 z-index“不犯二”准则 223
第8章 强大的文本处理能力 225
8.1 line-height的另外一个朋友font-size 225
8.1.1 font-size和vertical-align的隐秘故事 225
8.1.2 理解font-size与ex、em和rem的关系 227
8.1.3 理解font-size的关键字属性值 229
8.1.4 font-size:0与文本的隐藏 231
8.2 字体属性家族的大家长font-family 232
8.2.1 了解衬线字体和无衬线字体 233
8.2.2 等宽字体的实践价值 234
8.2.3 中文字体和英文名称 236
8.2.4 一些补充说明 237
8.3 字体家族其他成员 238
8.3.1 貌似粗犷、实则精细无比的font-weight 238
8.3.2 具有近似姐妹花属性值的font-style 241
8.3.3 不适合国情的font-variant 242
8.4 font属性 242
8.4.1 作为缩写的font属性 242
8.4.2 使用关键字值的font属性 243
8.4.3 font关键字属性值的应用价值 246
8.5 真正了解@font face规则 247
8.5.1 @font face的本质是变量 247
8.5.2 @font face与字体图标技术 255
8.6 文本的控制 258
8.6.1 text-indent与内联元素缩进 258
8.6.2 letter-spacing与字符间距 261
8.6.3 word-spacing与单词间距 263
8.6.4 了解word-break和word-wrap的区别 264
8.6.5 white-space与换行和空格的控制 265
8.6.6 text-align与元素对齐 267
8.6.7 如何解决text-decoration下划线和文本重叠的问题 271
8.6.8 一本万利的text-transform字符大小写 273
8.7 了解:first-letter/:first-line伪元素 274
8.7.1 深入:first-letter伪元素及其实例 274
8.7.2 故事相对较少的:first-line伪元素 277
第9章 元素的装饰与美化 280
9.1 CSS世界的color很单调 280
9.1.1 少得可怜的颜色关键字 280
9.1.2 不支持的transparent关键字 282
9.1.3 不支持的currentColor变量 282
9.1.4 不支持的rgba颜色和hsla颜色 282
9.1.5 支持却鸡肋的系统颜色 283
9.2 CSS世界的background很单调 285
9.2.1 隐藏元素的background-image到底加不加载 285
9.2.2 与众不同的background-position百分比计算方式 286
9.2.3 background-repeat与渲染性能 287
9.2.4 外强中干的background-attachment:fixed 288
9.2.5 background-color背景色永远是很低的 289
9.2.6 利用多背景的属性hack小技巧 290
9.2.7 渐变背景和rgba背景色的兼容处理 290
第 10章 元素的显示与隐藏 292
10.1 display与元素的显隐 294
10.2 visibility与元素的显隐 296
10.2.1 不仅仅是保留空间这么简单 296
10.2.2 了解visibility:collapse 301
第 11章 用户界面样式 302
11.1 和border形似的outline属性 302
11.1.1 万万不可在全局设置outline:0 none 302
11.1.2 真正的不占据空间的outline及其应用 304
11.2 光标属性cursor 307
11.2.1 琳琅满目的cursor属性值 307
11.2.2 自定义光标 314
第 12章 流向的改变 315
12.1 改变水平流向的direction 315
12.1.1 direction简介 315
12.1.2 direction的黄金搭档unicode-bidi 318
12.2 改变CSS世界纵横规则的writing-mode 320
12.2.1 writing-mode原本的作用 321
12.2.2 writing-mode不经意改变了哪些规则 324
12.2.3 writing-mode和direction的关系 328
《CSS艺术:视觉世界的构建师》 内容简介 在数字浪潮席卷全球的今天,网页不仅仅是信息的载体,更是一种沉浸式的视觉体验。而在这个构建精彩视觉世界的幕后,CSS(层叠样式表)无疑是那位技艺精湛的艺术家和建筑师。本书《CSS艺术:视觉世界的构建师》并非一本简单的技术手册,它是一次深入的探索之旅,旨在揭示CSS的强大力量,引导读者从初学者蜕变为精通视觉设计的行家,掌握构建响应式、美观且用户友好的网页界面的核心技能。 本书以循序渐进的方式,系统性地阐述了CSS的方方面面,从最基础的语法规则、选择器原理,到复杂的布局技术、动画效果,再到前端开发的最佳实践和性能优化,力求为读者构建一个全面而深刻的CSS知识体系。我们坚信,理解CSS的本质,掌握其精髓,是成为一名优秀前端开发者的必经之路。 第一部分:CSS的基石——理解与运用 我们从CSS的根基入手。首先,本书会详细讲解CSS的工作原理,包括样式表的加载方式、优先级机制(如重要性、特异性、源顺序)以及继承的概念。理解这些基础知识,是避免日后陷入样式冲突和不可预测行为的关键。接着,我们将深入探讨CSS的选择器,从基本的元素选择器、类选择器、ID选择器,到更强大的属性选择器、伪类和伪元素,甚至复合选择器和后代选择器,每一类选择器都配以丰富的实例,演示其在实际应用中的强大威力。读者将学会如何精确地定位页面元素,实现对页面视觉的精细控制。 颜色、字体、背景和文本的样式化,是构建网页视觉风格的直接手段。本书会带领读者领略CSS在这些方面的丰富选项。关于颜色,我们将不仅介绍RGB、HEX、HSL等颜色表示法,还会探讨颜色名称、透明度(RGBA, HSLA)以及更高级的颜色函数,并提供关于色彩搭配和无障碍设计的建议。对于字体,我们将深入讲解 `font-family`、`font-size`、`font-weight`、`font-style` 等属性,介绍Web字体的使用,以及如何在不同设备上实现一致的字体渲染。背景属性,如 `background-color`、`background-image`、`background-repeat`、`background-position` 和 `background-size`,将以生动的方式呈现,指导读者如何创建富有层次感的背景效果。文本样式化方面,我们不仅关注 `text-align`、`text-decoration`,更会深入 `line-height`、`letter-spacing`、`word-spacing`、`text-shadow` 等属性,帮助读者优化文本的可读性和视觉美感。 第二部分:布局的艺术——从浮动到Flexbox与Grid 页面布局是网页设计的灵魂。本书将带领读者穿越布局技术的演变史,从早期的浮动(Float)和定位(Positioning)模型,到现代CSS布局的强大工具——Flexbox和CSS Grid。我们将详细讲解浮动带来的清除浮动(Clearfix)技巧,以及其在早期布局中的应用局限。随后,篇幅将大量聚焦于Flexbox。读者将学会如何使用 `display: flex`、`flex-direction`、`justify-content`、`align-items`、`flex-grow`、`flex-shrink`、`flex-basis` 等属性,轻松实现从简单的导航栏到复杂的卡片式布局,将元素在容器内实现灵活的对齐和分布。 紧接着,我们将深入探索CSS Grid布局。Grid是实现二维布局的革命性工具,本书将详细讲解 `display: grid`、`grid-template-columns`、`grid-template-rows`、`grid-gap`、`grid-area` 等属性,指导读者如何创建响应式的网格系统,实现复杂页面的精准布局,如杂志式的排版、仪表盘式的界面等。通过对比Flexbox和Grid在不同场景下的优劣,以及讲解如何将两者结合使用,读者将掌握构建任何复杂网页布局的信心和能力。 第三部分:响应式设计与移动优先 在多设备、多屏幕的时代,响应式设计已经成为前端开发的标配。本书将系统阐述响应式设计的核心理念,即“移动优先”(Mobile-First)的策略。我们从媒体查询(Media Queries)入手,详细讲解如何根据屏幕尺寸、分辨率、设备方向等条件应用不同的CSS样式。读者将学习如何使用断点(Breakpoints)来调整布局、字体大小、元素可见性等,确保网页在桌面、平板和手机等各种设备上都能提供最佳的浏览体验。 本书还将探讨视口(Viewport)设置的重要性,以及如何使用相对单位(如百分比、em、rem、vw、vh)来创建灵活且可伸缩的元素。通过一系列实战案例,读者将学会如何设计一套能够自适应不同屏幕尺寸的导航菜单、图片列表、表单等,真正做到“一次编写,多处可用”。 第四部分:交互与动画——赋予网页生命 静态的页面早已无法满足用户对交互性和趣味性的需求。本书将深入讲解CSS的交互和动画能力,赋予网页生命。我们从 `:hover`、`:active`、`:focus` 等伪类开始,展示如何通过简单的样式变化来增强用户体验。 随后,我们将重点介绍CSS Transitions(过渡)和Animations(动画)。读者将学习如何使用 `transition-property`、`transition-duration`、`transition-timing-function`、`transition-delay` 来实现属性值的平滑变化,例如按钮悬停时的颜色渐变、元素淡入淡出等。更进一步,我们将深入CSS Animations,讲解 `@keyframes` 规则、`animation-name`、`animation-duration`、`animation-iteration-count`、`animation-timing-function`、`animation-fill-mode` 等属性,指导读者创建更复杂、更精细的动画效果,如元素的平移、旋转、缩放,甚至自定义的加载动画和页面切换效果。 本书还将探讨如何将CSS动画与JavaScript结合,创造出更加动态和富有表现力的用户界面。 第五部分:高级主题与最佳实践 为了让读者真正成为CSS领域的专家,本书还涵盖了一些高级主题和前端开发中的最佳实践。 CSS预处理器 (Sass/Less):虽然本书的重点是纯CSS,但为了与时俱进,我们将简要介绍CSS预处理器(如Sass、Less)的概念和优势,例如变量、嵌套、混合(mixin)和继承等特性,它们能够极大地提高CSS的可维护性和开发效率。 CSS框架与方法论:我们将探讨当下流行的CSS框架(如Bootstrap、Tailwind CSS)的优缺点,以及一些重要的CSS方法论(如BEM、SMACSS),帮助读者理解如何组织和管理大型CSS项目,提高代码的可读性和复用性。 性能优化:慢速加载的网页会严重影响用户体验。本书将提供一系列CSS性能优化的技巧,包括如何最小化和压缩CSS文件,如何合理使用媒体查询,如何避免冗余的CSS选择器,以及如何利用浏览器缓存等。 无障碍设计 (Accessibility):构建包容性的网页至关重要。我们将讲解如何在CSS层面实现无障碍设计,例如为元素提供足够的对比度,使用 `aria-` 属性,以及确保键盘导航的顺畅性。 CSS变量 (Custom Properties):本书将详细介绍CSS变量的强大功能,如何定义和使用变量来管理主题颜色、间距、字体等,实现全局样式的统一控制和动态修改,为组件化开发和主题切换提供了极大的便利。 总结 《CSS艺术:视觉世界的构建师》不仅仅是一本关于CSS语法的书,它更是一本关于如何用CSS来解决实际问题、创造优美界面的实战指南。本书的内容涵盖了从零基础入门到精通高级特性的全过程,配以大量的代码示例、清晰的图示和深入的解释,旨在帮助读者理解CSS的强大潜力,掌握构建现代、响应式、交互式网页的必备技能。无论您是渴望踏入前端开发领域的新手,还是希望提升CSS技艺的资深开发者,本书都将是您不可或缺的参考。通过阅读本书,您将能够自信地驾驭CSS,成为真正意义上的“视觉世界的构建师”。