|
|
51CTO旗下网站
|
|
移动端

3.1.1 CSS3新特性

《前端程序员面试笔试宝典》第3章CSS基础,本章介绍的是CSS的基础知识,包括CSS的定义、目标和标准化等。本节为大家介绍CSS3新特性。

作者:平文来源:机械工业出版社|2018-11-09 16:36

3.1.1  CSS3新特性

CSS同HTML一样,也是由W3C进行标准化。CSS规范出现过几个版本,分别是CSS1(已废弃)、CSS2(CSS2.1为推荐标准)和CSS3。CSS2经历了9年时间才达到推荐状态,主要是由于CSS2是一个整体规范,其中有部分比较纠结,就会拖慢整体的发布进度。CSS3规范的制定与CSS2不同,它被划分成多个模块(module),互不干扰,每个模块都可以独立更新版本,有些概念从CSS2延续过来的就升级到版本3(例如选择器、背景、文本和字体等),而有些是全新概念,版本号就从1开始(例如阴影、过渡、弹性布局等)。CSS3可以理解为一个规范集合,包括升级到版本3的CSS规范以及版本号还是1的新规范,下面列举一些CSS3中的新特性,具体如下所示。

(1)CSS3完善了选择器(包括属性、关系、伪类和伪元素),其书写方式与jQuery的选择器类似,既能避免添加多余的HTML元素属性名(例如id、name、class等),还能保持页面的整洁。

(2)CSS3新增的阴影、圆角、Web字体、渐变能替代以往得用图像才能实现的效果,这样既能减少HTTP请求数,还能提升页面加载速度。

(3)CSS3对背景不再仅局限于颜色、填充方式、定位,现在可以一次性使用多张背景图(以往要实现这个效果就需要额外的HTML元素)、控制背景尺寸、裁剪背景图像等。

(4)CSS3引入了过渡和动画两个属性,可处理简单或复杂的样式变化,不仅能让页面生动真实,还能摆脱对Flash的依赖,远离大段的JavaScript脚本。

(5)CSS3有两种全新的布局:多列布局(Multi-column Layout)和伸缩盒(Flexible Box,也称为弹性盒)。多列布局可轻松地让文本呈现出报纸杂志那样的多列排版,以往是用浮动或定位(需进行复杂的计算)来实现的。伸缩盒是一种响应式的布局,能轻易实现各种复杂布局(尤其在移动端),使上下居中、多列等高、宽度自适应、绝对底部(让部分信息一直在下面,即使中间没有内容也不会塌陷上去)的实现变得非常简单,只需几个属性即可。

(6)CSS3可让元素进行2D或3D变形,包括旋转、移动、缩放和扭曲。在动画中使用3D的变形会新增一个渲染层,将重绘(页面渲染的一个环节)减少到一次,提升动画性能。

上面所列的只是CSS3新特性的一部分,还有一些诸如图像边框、颜色的透明度、媒体查询等,都在为网页的设计锦上添花。


喜欢的朋友可以添加我们的微信账号:

51CTO读书频道二维码


51CTO读书会第9群:808517103

【责任编辑:book TEL:(010)68476606】

回书目   上一节   下一节
点赞 0
分享:
大家都在看
猜你喜欢

订阅专栏+更多

活学活用 Ubuntu Server

活学活用 Ubuntu Server

实战直通车
共35章 | UbuntuServer

218人订阅学习

Java EE速成指南

Java EE速成指南

掌握Java核心
共30章 | 51CTO王波

83人订阅学习

Mysql DBA修炼之路

Mysql DBA修炼之路

MySQL入门到高阶
共24章 | 武凤涛

471人订阅学习

读 书 +更多

基于Project2003的项目管理

本书的上一版本《基于Project 2002的项目管理》上市以后得到了读者的欢迎,为了更好地将Project 2003新版本的应用介绍给读者,我们重新进行...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊

51CTO服务号

51CTO播客

博聚网