图解CSS3:核心技术与案例实战

图解CSS3:核心技术与案例实战

暂无评价综合评分的显示会考虑用户真实性等多项因素,每部作品出现综合评分的时间不定。
7.095 评价豆瓣读书
免费试读

作品简介

本书是CSS3领域的标准性著作,由资深Web前端工程师根据CSS3的最新技术标准撰写。内容极为全面、丰富和翔实,由浅入深地讲解了CSS3新特性的语法、功能和使用技巧,涵盖选择器、边框、背景、文本、颜色、UI、动画、新型盒模型、媒体查询、响应式设计等各种模块;写作方式创新,有趣且易懂,用图解的方式来描述CSS3的每一个特性甚至每一个步骤都配有实战效果图;包含大量案例,实战性强,每个特性都有作者从实践中精心归纳和挑选出来的案例辅助讲解,同时还包含一个综合性的大案例。无论你是完全没有经验的准前端工程师,还是已经有一定经验的前端工程师,如果你想系统学习CSS3,那么本书将会是你的最佳选择;如果你是一位成熟的前端开发工程师,但时常为如何合理地使用某些特性而费时去查阅相关资料,那么本书也是你的不二选择。

廖伟华(网名:大漠), 资深Web前端工程师,W3cplus创始人,目前就职于Ctrip UED。中国Drupal社区核心成员之一。对HTML5、CSS3、XHTML和Sass等前端脚本语言有非常深入的认识和丰富的实践经验,尤其专注对CSS3的研究,是国内最早研究和使用CSS3技术的一批人。现在还关注Web产品策划、交互设计、SEO以及移动端开发。2012年4月刊的《程序员》杂志上发表文章“Twitter Bootstrap:前端框架利器”。

作品目录

  1. 前言
  2. 为什么要写这本书
  3. 本书面向的读者
  4. 本书的特色
  5. 本书的内容
  6. 如何阅读本书
  7. 本书中使用的约定
  8. 勘误和支持
  9. 致谢
  10. 第1章 揭开CSS3的面纱
  11. 1.1 什么是CSS3
  12. 1.1.1 CSS3的新特性
  13. 1.1.2 CSS3的发展状况
  14. 1.1.3 现在能使用CSS3吗
  15. 1.1.4 使用CSS3有什么好处
  16. 1.2 浏览器对CSS3的支持状况
  17. 1.2.1 经典回顾:图说浏览器大战
  18. 1.2.2 浏览器的市场份额
  19. 1.2.3 主流浏览器对CSS3支持状况
  20. 1.3 渐进增强
  21. 1.3.1 渐进增强与优雅降级
  22. 1.3.2 渐进增强的优点
  23. 1.4 CSS3的现状及未来
  24. 1.4.1 谁在使用CSS3
  25. 1.4.2 CSS3的未来
  26. 1.5 本章小结
  27. 第2章 CSS3选择器
  28. 2.1 认识CSS选择器
  29. 2.1.1 CSS3选择器的优势
  30. 2.1.2 CSS3选择器分类
  31. 2.2 基本选择器
  32. 2.2.1 基本选择器语法
  33. 2.2.2 浏览器兼容性
  34. 2.2.3 实战体验:使用基本选择器
  35. 2.2.4 通配选择器
  36. 2.2.5 元素选择器
  37. 2.2.6 ID选择器
  38. 2.2.7 类选择器
  39. 2.2.8 群组选择器
  40. 2.3 层次选择器
  41. 2.3.1 层次选择器语法
  42. 2.3.2 浏览器兼容性
  43. 2.3.3 实战体验:使用层次选择器选择元素
  44. 2.3.4 后代选择器
  45. 2.3.5 子选择器
  46. 2.3.6 相邻兄弟选择器
  47. 2.3.7 通用兄弟选择器
  48. 2.4 动态伪类选择器
  49. 2.4.1 动态伪类选择器语法
  50. 2.4.2 浏览器兼容性
  51. 2.4.3 实战体验:美化按钮
  52. 2.5 目标伪类选择器
  53. 2.5.1 目标伪类选择器语法
  54. 2.5.2 浏览器兼容性
  55. 2.5.3 实战体验:制作手风琴效果
  56. 2.6 语言伪类选择器
  57. 2.6.1 语言伪类选择器语法
  58. 2.6.2 浏览器兼容性
  59. 2.6.3 实战体验:定制不同语言版本引文风格
  60. 2.7 UI元素状态伪类选择器
  61. 2.7.1 UI元素状态伪类选择器语法
  62. 2.7.2 浏览器兼容性
  63. 2.7.3 实战体验:Bootstrap的表单元素UI状态
  64. 2.8 结构伪类选择器
  65. 2.8.1 重温HTML的DOM树
  66. 2.8.2 结构伪类选择器语法
  67. 2.8.3 浏览器兼容性
  68. 2.8.4 结构伪类选择器中的n是什么
  69. 2.8.5 结构伪类选择器的使用方法详解
  70. 2.8.6 实战体验:CSS3美化表格
  71. 2.9 否定伪类选择器
  72. 2.9.1 否定伪类选择器语法
  73. 2.9.2 浏览器兼容性
  74. 2.9.3 实战体验:改变图片效果
  75. 2.10 伪元素
  76. 2.10.1 伪元素::first-letter
  77. 2.10.2 伪元素::first-line
  78. 2.10.3 伪元素::before和::after
  79. 2.10.4 伪元素::selection
  80. 2.11 属性选择器
  81. 2.11.1 属性选择器语法
  82. 2.11.2 浏览器兼容性
  83. 2.11.3 属性选择器的使用方法详解
  84. 2.11.4 实战体验:创建个性化链接样式
  85. 2.12 本章小结
  86. 第3章 CSS3边框
  87. 3.1 CSS3边框简介
  88. 3.1.1 边框的基本属性
  89. 3.1.2 边框的类型
  90. 3.1.3 谁在使用CSS3边框
  91. 3.2 CSS3边框颜色属性
  92. 3.2.1 border-color属性的语法及参数
  93. 3.2.2 浏览器兼容性
  94. 3.2.3 border-color属性的优势
  95. 3.2.4 实战体验:立体渐变边框效果
  96. 3.3 CSS3图片边框属性
  97. 3.3.1 border-image属性的语法及参数
  98. 3.3.2 border-image属性使用方法
  99. 3.3.3 浏览器兼容性
  100. 3.3.4 border-image属性的优势
  101. 3.3.5 实战体验:按钮圆角阴影效果
  102. 3.4 CSS3圆角边框属性
  103. 3.4.1 border-radius属性的语法及参数
  104. 3.4.2 border-radius属性使用方法
  105. 3.4.3 浏览器兼容性
  106. 3.4.4 border-radius属性的优势
  107. 3.4.5 实战体验:制作特殊图形
  108. 3.5 CSS3盒子阴影属性
  109. 3.5.1 box-shadow属性的语法及参数
  110. 3.5.2 box-shadow属性使用方法
  111. 3.5.3 浏览器兼容性
  112. 3.5.4 box-shadow属性的优势
  113. 3.5.5 实战体验:制作3D搜索表单
  114. 3.6 本章小结
  115. 第4章 CSS3背景
  116. 4.1 CSS3背景属性简介
  117. 4.1.1 背景的基本属性
  118. 4.1.2 与背景相关的新增属性
  119. 4.2 CSS3背景原点属性
  120. 4.2.1 background-origin属性的语法及参数
  121. 4.2.2 background-origin属性使用方法
  122. 4.2.3 浏览器兼容性
  123. 4.3 CSS3背景裁切属性
  124. 4.3.1 background-clip属性的语法及参数
  125. 4.3.2 background-clip属性使用方法
  126. 4.3.3 浏览器兼容性
  127. 4.4 CSS3背景尺寸属性
  128. 4.4.1 background-size属性的语法及参数
  129. 4.4.2 background-size属性使用方法
  130. 4.4.3 浏览器兼容性
  131. 4.4.4 实战体验:制作全屏背景
  132. 4.5 内联元素背景图像平铺循环方式
  133. 4.6 CSS3多背景属性
  134. 4.6.1 CSS3多背景语法及参数
  135. 4.6.2 CSS3多背景的优势
  136. 4.6.3 浏览器兼容性
  137. 4.6.4 实战体验:制作花边框
  138. 4.7 本章小结
  139. 第5章 CSS3文本
  140. 5.1 CSS3文本简介
  141. 5.2 CSS3文本阴影属性
  142. 5.2.1 text-shadow属性的语法及参数
  143. 5.2.2 浏览器兼容性
  144. 5.2.3 实战体验:制作立体文本
  145. 5.3 CSS3溢出文本属性
  146. 5.3.1 text-overflow属性的语法及参数
  147. 5.3.2 浏览器兼容性
  148. 5.3.3 text-overflow属性使用方法
  149. 5.3.4 实战体验:制作固定区域的博客列表
  150. 5.4 CSS3文本换行
  151. 5.4.1 word-wrap属性
  152. 5.4.2 word-break属性
  153. 5.4.3 white-space属性
  154. 5.4.4 文本换行技巧
  155. 5.4.5 文本换行技术对比
  156. 5.5 本章小结
  157. 第6章 CSS3颜色特性
  158. 6.1 网页中的色彩特性
  159. 6.1.1 网页色彩的表现原理
  160. 6.1.2 Web页面的安全色
  161. 6.1.3 色彩模式
  162. 6.2 CSS3透明属性
  163. 6.2.1 opacity属性的语法及参数
  164. 6.2.2 opacity浏览器兼容性
  165. 6.2.3 实战体验:制作透明过渡色块
  166. 6.3 CSS3颜色模式
  167. 6.3.1 RGBA颜色模式
  168. 6.3.2 HSL颜色模式
  169. 6.3.3 HSLA颜色模式
  170. 6.3.4 RGBA和HSLA颜色模式之间的选择
  171. 6.3.5 RGBA/HSLA的IE兼容方案
  172. 6.3.6 RGBA/HSLA滤镜格式
  173. 6.4 本章小结
  174. 第7章 CSS3盒模型
  175. 7.1 CSS盒模型简介
  176. 7.1.1 什么是盒模型
  177. 7.1.2 重置盒模型解析模式
  178. 7.2 CSS3盒模型属性
  179. 7.2.1 box-sizing属性的语法及参数
  180. 7.2.2 浏览器兼容性
  181. 7.2.3 实战体验:box-sizing拯救了布局
  182. 7.3 CSS3内容溢出属性
  183. 7.3.1 overflow-x和overflow-y属性的语法及参数
  184. 7.3.2 浏览器兼容性
  185. 7.4 CSS3自由缩放属性
  186. 7.4.1 resize属性的语法及参数
  187. 7.4.2 浏览器兼容性
  188. 7.4.3 实战体验:修改文本域随意调整大小的功能
  189. 7.5 CSS3外轮廓属性
  190. 7.5.1 outline属性的语法及参数
  191. 7.5.2 浏览器兼容性
  192. 7.5.3 outline和border的对比
  193. 7.5.4 实战体验:模仿边框效果
  194. 7.6 本章小结
  195. 第8章 CSS3伸缩布局盒模型
  196. 8.1 Flexbox模型基础知识
  197. 8.1.1 CSS中的布局模式
  198. 8.1.2 Flexbox模型的功能
  199. 8.1.3 Flexbox模型中的术语
  200. 8.1.4 Flexbox模型规范状态
  201. 8.1.5 Flexbox模型浏览器兼容性
  202. 8.1.6 Flexbox模型语法变更
  203. 8.2 旧版本Flexbox模型的基本使用
  204. 8.2.1 伸缩容器设置display
  205. 8.2.2 伸缩流方向box-orient
  206. 8.2.3 布局顺序box-direction
  207. 8.2.4 伸缩换行box-lines
  208. 8.2.5 主轴对齐box-pack
  209. 8.2.6 侧轴对齐box-align
  210. 8.2.7 伸缩性box-flex
  211. 8.2.8 显示顺序box-ordinal-group
  212. 8.2.9 实战体验:box制作自适应的三列等高布局
  213. 8.3 混合版本Flexbox模型的基本使用
  214. 8.3.1 伸缩容器设置display
  215. 8.3.2 伸缩流方向flex-direction
  216. 8.3.3 伸缩换行flex-wrap
  217. 8.3.4 伸缩流方向与换行flex-flow
  218. 8.3.5 主轴对齐flex-pack
  219. 8.3.6 侧轴对齐flex-align
  220. 8.3.7 堆栈伸缩行flex-line-pack
  221. 8.3.8 伸缩性flex
  222. 8.3.9 显示顺序flex-order
  223. 8.4 新版本Flexbox模型的基本使用
  224. 8.4.1 伸缩容器display
  225. 8.4.2 伸缩流方向flex-direction
  226. 8.4.3 伸缩换行flex-wrap
  227. 8.4.4 伸缩流方向与换行flex-flow
  228. 8.4.5 主轴对齐justify-content
  229. 8.4.6 侧轴对齐align-items和align-self
  230. 8.4.7 堆栈伸缩行align-content
  231. 8.4.8 伸缩性flex
  232. 8.4.9 显示顺序order
  233. 8.5 综合案例:跨浏览器的三列布局
  234. 8.6 本章小结
  235. 第9章 CSS3多列布局
  236. 9.1 CSS3多列布局简介
  237. 9.1.1 浏览器兼容性
  238. 9.1.2 CSS3多列布局的属性
  239. 9.2 CSS3多列布局基本属性
  240. 9.2.1 columns属性的语法及参数
  241. 9.2.2 浏览器兼容性
  242. 9.2.3 实战体验:Web页面的多列布局
  243. 9.3 CSS3多列布局列宽属性
  244. 9.3.1 column-width属性的语法及参数
  245. 9.3.2 实战体验:浏览器根据窗口宽度变化调整列数
  246. 9.4 CSS3多列布局列数属性
  247. 9.4.1 column-count属性的语法及参数
  248. 9.4.2 实战体验:显示固定列数
  249. 9.5 CSS3多列布局列间距属性
  250. 9.5.1 column-gap属性的语法及参数
  251. 9.5.2 实战体验:设置列间距
  252. 9.6 CSS3多列布局列边框样式属性
  253. 9.6.1 column-rule属性的语法及参数
  254. 9.6.2 实战体验:设置列边框
  255. 9.7 CSS3多列布局跨列属性
  256. 9.7.1 column-span属性的语法及参数
  257. 9.7.2 实战体验:文章标题跨列显示
  258. 9.8 CSS3多列布局列高度属性
  259. 9.9 本章小结
  260. 第10章 CSS3渐变
  261. 10.1 CSS3渐变简介
  262. 10.1.1 什么是色标
  263. 10.1.2 浏览器兼容性
  264. 10.2 CSS3线性渐变
  265. 10.2.1 CSS3线性渐变语法与参数
  266. 10.2.2 CSS3线性渐变的基本用法
  267. 10.2.3 自定义CSS3线性渐变
  268. 10.2.4 实战体验:CSS3制作渐变按钮
  269. 10.3 CSS3径向渐变
  270. 10.3.1 CSS3径向渐变语法
  271. 10.3.2 CSS3径向渐变的属性参数
  272. 10.3.3 CSS3径向渐变的基本用法
  273. 10.3.4 实战体验:CSS3径向渐变制作圆形图标按钮
  274. 10.4 CSS3重复渐变
  275. 10.4.1 CSS3重复线性渐变
  276. 10.4.2 CSS3重复径向渐变
  277. 10.4.3 实战体验:制作记事本纸张效果
  278. 10.5 综合案例:CSS3渐变制作纹理背景
  279. 10.6 本章小结
  280. 第11章 CSS3变形
  281. 11.1 CSS3变形简介
  282. 11.1.1 CSS变形属性及函数
  283. 11.1.2 浏览器兼容性
  284. 11.2 CSS变形属性详解
  285. 11.2.1 transform属性
  286. 11.2.2 transform-origin属性
  287. 11.2.3 transform-style属性
  288. 11.2.4 perspective属性
  289. 11.2.5 perspective-origin属性
  290. 11.2.6 backface-visibility属性
  291. 11.3 CSS3 2D变形
  292. 11.3.1 2D位移
  293. 11.3.2 2D缩放
  294. 11.3.3 2D旋转
  295. 11.3.4 2D倾斜
  296. 11.3.5 2D矩阵
  297. 11.4 CSS3 3D变形
  298. 11.4.1 3D位移
  299. 11.4.2 3D缩放
  300. 11.4.3 3D旋转
  301. 11.4.4 3D矩阵
  302. 11.5 多重变形
  303. 11.5.1 2D多重变形制作立方体
  304. 11.5.2 3D多重变形制作立方体
  305. 11.6 综合案例:3D变形制作产品信息展示
  306. 11.7 本章小结
  307. 第12章 CSS3过渡
  308. 12.1 CSS3过渡简介
  309. 12.1.1 如何创建简单的过渡
  310. 12.1.2 浏览器兼容性
  311. 12.1.3 CSS3过渡属性
  312. 12.2 CSS3过渡子属性详解
  313. 12.2.1 指定过渡属性transition-property
  314. 12.2.2 指定过渡所需时间transition-duration
  315. 12.2.3 指定过渡函数transition-timing-function
  316. 12.2.4 指定过渡延迟时间transition-delay
  317. 12.2.5 多个CSS3过渡效果
  318. 12.3 CSS3触发过渡
  319. 12.3.1 伪元素触发
  320. 12.3.2 媒体查询触发
  321. 12.3.3 JavaScript触发
  322. 12.4 CSS3过渡技巧
  323. 12.4.1 一个完整的过渡
  324. 12.4.2 可过渡的属性
  325. 12.4.3 优先的过渡属性
  326. 12.4.4 过渡的开始和结束为auto
  327. 12.4.5 隐式过渡
  328. 12.4.6 开关状态的不同过渡方式
  329. 12.4.7 几乎无限延迟的过渡
  330. 12.4.8 通过硬件加速过渡更加流畅
  331. 12.4.9 过渡和伪元素
  332. 12.5 综合案例:纯CSS3制作CSS Dock导航效果
  333. 12.6 本章小结
  334. 第13章 CSS3动画
  335. 13.1 CSS3动画简介
  336. 13.1.1 浏览器兼容性
  337. 13.1.2 CSS3动画属性
  338. 13.2 关键帧
  339. 13.2.1 @keyframes的作用
  340. 13.2.2 @keyframes的语法
  341. 13.2.3 浏览器兼容性
  342. 13.3 CSS中为元素应用动画
  343. 13.3.1 使用@keyframes声明动画
  344. 13.3.2 调用@keyframes声明的动画
  345. 13.4 CSS3动画子属性详解
  346. 13.4.1 调用动画animation-name
  347. 13.4.2 设置动画播放时间animation-duration
  348. 13.4.3 设置动画播放方式animation-timing-function
  349. 13.4.4 设置动画开始播放的时间animation-delay
  350. 13.4.5 设置动画播放次数animation-iteration-count
  351. 13.4.6 设置动画播放方向animation-direction
  352. 13.4.7 设置动画的播放状态animation-play-state
  353. 13.4.8 设置动画时间外属性animation-fill-mode
  354. 13.5 综合案例:全屏Slidershow效果
  355. 13.6 本章小结
  356. 第14章 媒体特性与Responsive设计
  357. 14.1 媒体类型
  358. 14.1.1 Media Type设备类型
  359. 14.1.2 媒体类型引用方法
  360. 14.2 媒体特性
  361. 14.2.1 Media Query和CSS属性集合
  362. 14.2.2 常用Media Query设备特性
  363. 14.2.3 浏览器兼容性
  364. 14.2.4 Media Query使用方法
  365. 14.3 Responsive布局概念
  366. 14.3.1 Responsive设计特点
  367. 14.3.2 Responsive中的术语
  368. 14.3.3 Responsive布局技巧
  369. 14.3.4 meta标签
  370. 14.4 本章小结
  371. 第15章 嵌入Web字体
  372. 15.1 @font-face模块介绍
  373. 15.1.1 浏览器兼容性
  374. 15.1.2 @font-face语法
  375. 15.1.3 使用字体图标的优势
  376. 15.2 实现@font-face
  377. 15.2.1 使用@font-face自定义字体
  378. 15.2.2 声明字体来源
  379. 15.2.3 创建各种字体
  380. 15.2.4 调用字体
  381. 15.3 综合案例:将图标转换成Web字体
  382. 15.3.1 创建一个图标字体
  383. 15.3.2 准备插图
  384. 15.3.3 导入到IcoMoon
  385. 15.3.4 从IcoMoon中导出字体
  386. 15.3.5 下载字体文件
  387. 15.3.6 调用字体
  388. 15.4 本章小结
载入中

喜欢这本书的人也喜欢