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

编辑推荐: 掘金是一个高质量的技术社区,从 CSS 到 Vue.js,性能优化到开源类库,让你不错过前端开发的每一个技术干货。 点击链接查看最新前端内容,或到各大应用市场搜索「 掘金」下载APP,技术干货尽在掌握中。

本书是国内著名的Web前端专家历时2载的心血之作,根据最新的CSS3撰写,融入了作者在CSS领域多年的使用经验,旨在将本书打造成为CSS3领域最权威和实用的专业著作,供没有经验的读者系统学习,供有经验的读者参考备查。

本书理论知识系统全面,详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性,所有这些都巧妙地融入到案例中,而不是枯燥的理论讲解;讲解方式直观易懂,以图解的方式巧妙地展示了这些新特性;实战性强,既为每个知识点精心设计了小案例,也有综合性的大案例,所有案例都非常详尽,有功能需求分析、设计思路和完整代码,还有最终的效果展示。

下载示例源码下载插图勘误

Kindle电子书互动出版网京东网当当网亚马逊

大纲

前 言
第1章 揭开css3的面纱 1
  • 1.1 什么是css3 1
    • 1.1.1 css3的新特性 2
    • 1.1.2 css3的发展状况 4
    • 1.1.3 现在能使用css3吗 5
    • 1.1.4 使用css3有什么好处 5
  • 1.2 浏览器对css3的支持状况 6
    • 1.2.1 经典回顾:图说浏览器大战 7
    • 1.2.2 浏览器的市场份额 8
    • 1.2.3 主流浏览器对css3支持状况 9
  • 1.3 渐进增强 11
    • 1.3.1 渐进增强与优雅降级 11
    • 1.3.2 渐进增强的优点 12
  • 1.4 css3的现状及未来 13
    • 1.4.1 谁在使用css3 13 -1.4.2 css3的未来 14
  • 1.5 本章小结 14
第2章 css3选择器 15
展开阅读

前言

为什么要写这本书

CSS3是在CSS2.1基础上扩展而来,事实上,它还没有完全成熟。有些专家会告诉你,CSS3现在还用不上,甚至几年之后都不会有成熟的规范发布。

目前为止CSS3还没有一套成熟的规范,其中的模块也在不断更新,特别是浏览器对CSS3特性的支持也在不断变化,同时没有足够的时间去学习和研究W3C官方文档和规范,致使我们学习CSS3变得更为复杂。

为什么会选择这个时候编写这样一本图书呢?原因很简单。对于希望Web应用开发者而言,CSS3可以说是众望所归,这也是技术变更的硬性需求。在实际Web应用中新标准的采纳程度正在以令人目眩的速度不断地变更着,众多浏览器厂商也在不断加快对CSS3新特性的支持。在编写这本图书的过程中,我也被迫不断更新书中的浏览器支持表格。

面对自己正在使用的浏览器,大多数用户并不真正了解其具备的功能有多强大。当然,他们在浏览器自动更新后可能会发现一些细微的界面变化。但他们可能不知道,新版的浏览器对哪些CSS3特性有所支持。

本书的目标是帮助开发者更好地掌握CSS3的特性,并且将新技术运用到实际的开发当中,提高自己开发Web程序的水平。

本书面向的读者

  • 有一定CSS3开发经验的前端工程师。
    • 本书能帮助你系统掌握CSS3的各项知识,提升技术水平和业务能力。
  • 从事CSS3开发的前端工程师。
    • 由于CSS3涵盖的新特性非常多,在开发过程中将本书作为速查手册,提高开发效率。
  • 前端开发爱好者。
    • 如果还不是一名前端工程师,但是对前端开发非常感兴趣,本书也能让你对最新的CSS标准和规范有一个系统和全面的认识,为学习前端知识打下基础。

本书的特色

本书最大的特色就是将CSS3特性按模块功能分类,通过理论、图解、实战的方式向大家阐释CSS3每个特性功能。

  • 内容全面、丰富、翔实。
    • 由浅到深地讲解了CSS3新特性的语法、特性以及使用技巧。本书涵盖了CSS3众多功能模块,如CSS3选择器特性、边框模块、文本模块、颜色模块、UI界面模块、CSS3动画模块、CSS新型盒模型以及CSS媒体查询、响应式设计等。
  • 图解方式,直观易懂。
    • 图解的方式是本书的最大特色之一,在描述每一个CSS3特性过程都配了生动的实战效果,甚至每一步骤都配有相应的效果图。就算是你对文字理解或者代码理解有所误差,实战效果图能辅助你更好地理解CSS3每个特性。
  • 案例丰富,实战性强。
    • 每个CSS3特性都配有实战体验,部分案例来自于实际开发之中。同时在每个知识点之后,还提供了综合案例。通过实践加强动手能力,更好地掌握CSS3中的每个知识点。
展开阅读

书摘

第1章 揭开CSS3的面纱

如果关注前端方面的技术,那么对CSS一定不会陌生,你肯定听说过CSS3。在使用CSS3之前,应该对这个新一代样式表语言的来龙去脉有个基本了解。

在本章中,你将知道CSS3与CSS2.1的区别,以及当前市面上主流浏览器、移动端浏览器对CSS3支持的情况。对于尚不完全支持CSS3的浏览器,将会为大家引入一个渐进增强的概念,用一些CSS方法来模拟CSS3的实现方法。最后给大家简单介绍一些CSS3引入的新特性及其未来的前景。

1.1什么是CSS3

CSS3并不是一门新的语言。如果接触过CSS就知道,CSS是创建网页的另一个独立但并非不重要的一部分。CSS是种层叠样式表,是一种样式语言,用来告诉浏览器如何渲染你的Web页面。

CSS3是CSS规范的最新版本,在CSS2.1的基础上增加了很多强大的新功能,以帮助开发人员解决一些问题,并且不再需要非语义标签、复杂的JavaScript脚本以及图片,例如圆角功能、多背景、透明度、阴影等功能等。CSS2.1是单一的规范,而CSS3被划分成几个模块组,每个模块组都有自己的规范。这样的好处是整个CSS3的规范发布不会因为部分难缠的部分而影响其他模块的推进。

现在先来看看CSS3激动人心的新特性。

1.1.1CSS3的新特性

CSS3规范并不是独立的,它重复了CSS的部分内容,但在其基础上进行了很多的增补与修改。CSS3与之前的几个版本相比,其变化是革命性的,虽然它的部分属性还不能够被浏览器完美的支持,但却让我们看到网页样式发展的前景,让我们更具有方向感、使命感。

CSS3新特性非常多,这里挑选一些被浏览器支持较为完美、更具实用性的新特性。

1.强大的CSS3选择器

使用过jQuery的人都知道,jQuery的选择器功能强大,使用方便,CSS3选择器和jQuery选择器非常类似。允许设计师通过选择器直接指定需要的HTML元素,而不需要在HTML中添加不必要的类名、ID等。使用CSS3选择器,能在Web的制作中更完美地做到结构与表现分离,设计师能轻松地设计出简洁、轻量级的Web页面,并且能更好地维护和修改样式。

2.抛弃图片的视觉效果

Web中最常见的效果包括圆角、阴影、渐变背景、半透明、图片边框等。而这样的视觉效果在CSS中都是依赖于设计师制作图片或者JavaScript脚本来实现的。CSS3的一些新特性可以用来创建一些特殊的视觉效果,后面的章节将为大家展现这些新特性是如何实现这些视觉效果。

3.背景的变革

如果说CSS中的背景给你带来太多的限制,那么CSS3将带来革命性的变化。CSS3不再局限于背景色、背景图像的运用,新特性中添加了多个新的属性值,例如background-origin、background-clip、background-size,此外,还可以在一个元素上设置多个背景图片。这样,如果要设计比较复杂的Web页面效果,就不再需要使用一些多余标签来辅助实现了。举个例子,要实现CSS中的滑动门效果,在CSS中基本上要添加2~3个额外的标签来辅助实现,那么CSS3中的这些新特性能够在一个标签中完成同等的效果。

4.盒模型变化

盒模型在CSS中是重中之重,CSS中的盒模型只能实现一些基本的功能,对于一些特殊的功能需要基于JavaScript来实现。而在CSS3中这一点得到了很大的改善,设计师可以直接通过CSS3来实现。例如,CSS3中的弹性盒子,这个属性将给大家引入一种全新的布局概念,能轻而易举实现各种布局,特别是在移动端的布局,它的功能更是强大。大家将在第7章、第8章见识它的神功。

5.阴影效果

展开阅读

插图

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

展开阅读

在线预订

Kindle电子书互动出版网京东网当当网亚马逊

注:如果需要预定签名版本,请将你的地址,收件人,电话号码发致w3cplus(at)hotmail.com邮箱。谢谢!

资源下载

下载示例源码下载插图

返回顶部