CSS3

CSS3 知识量:11 - 43 - 138

1.1 什么是CSS3><

CSS3的特性- 1.1.1 -

CSS3是CSS的最新版本,用途上与CSS其他各版本没有什么区别,无非就是定义web页面的样式,即负责页面的视觉表现。CSS3目前还不是很成熟,但这并不影响其应用于具体的项目中,借助渐进增强思想和现代浏览器支持的不断完善,CSS3已经完全可以胜任许多工作,以十分简单的方式解决过去一些比较复杂且困难的问题。

CSS3的新特性主要包括以下几点:

  • 强大的CSS3选择器。与jQuery一样,CSS3的选择器同样简洁高效,因此,不必再在页面中添加不必要的类名或id,也可以随心所欲的选择元素,从而优化页面结构,实现内容与表现的分离。

  • 规范的盒模型。盒模型是CSS的核心概念,在页面的布局中具有重要的作用。CSS3增强了盒模型的功能,引入弹性计算,使得多列布局、弹性盒模型布局可以更加灵活的设置。

  • 增强视觉特效。圆角、背景渐变色、半透明、图片边框、盒子阴影、字体阴影等特效过去只能通过剪切图片和JavaScript共同完成,效率低下,不易修改。CSS3全面提供了简单的解决方案,实现视觉特效已经十分轻松。

  • 更多颜色与透明度设定。除了RGB和十六进制两种颜色模式外,CSS3引入了HSL、HSLA和RGBA等新模式,可以更方便的调节颜色的透明度。

  • 动画效果。CSS可以使用过渡特性实现动画效果,并且动画更加平滑,还可以通过设置参数,创造更加复杂的动画内容。

  • 支持响应式布局。利用CSS3的媒体特性,可以针对不同分辨率的不同设备进行页面渲染,从而实现响应式布局。

CSS3的优点- 1.1.2 -

CSS3的优点有:

  • 降低成本。采用CSS3的新特性后,要实现圆角、阴影等特效,再也不必剪切图片,编写JavaScript代码了,这将极大的提高工作效率,同时,显著的降低网站的开发及维护成本。

  • 降低难度。CSS3的采用将显著降低网站的开发难度,以往视觉特效需要熟练的JavaScript技能,而现在通过CSS3的一系列特性,简单的语句就可以建立起炫酷的页面,这不需要多么高深的技术。

  • 提高性能。加载图片需要更长时间,由CSS3特效取代图片将很大程度上加速页面的加载;更少的类名、id,更少的用于表现设置的标签同样可以提高页面性能;利用CSS3众多的新特性,给网站页面瘦身,减少HTTP请求次数,这些都将帮助我们建立一个高性能的web站点。