css3学习总结一
先解释一下css3是css2.1的扩展,在2.1的基础上增加了很多的强大功能。css3被划分成几个模块。在http://www.w3.org/Style/CSS/current-work这个网页里包含了所有模块的列表。
接下来说一下学习了css3的主要几个新特性:
特性一:不以来图片的视觉效果。比如圆角、阴影、半透明背景、渐变以及图片边框等。
特性二:盒容器变形。比如旋转、缩放或者移动等。
特性三:独一无二的字体。引入了@font-face规则。
特性四:强大的选择器。新增的选择器,大部分是伪类和属性选择强。可以用它们选取HTML结构中的特定片段而无需增加特定的ID或类
特性五:过渡和动画。css3的过渡(transition);动画(animation)
特性六:媒体信息查询(Media Queries)。介绍了如何根据用户的显示终端或设备特征来提供样式。
特性七:多列布局。
针对css3可以提升页面的性能:减少HTTP请求数。
浏览器要增加前缀,当然在使用前缀属性的时候,把无前缀的属性放到最后。确保无前缀属性不被重载。在css中要加注释指出属性被哪种浏览器所使用。方便以后的移除。
针对IE可以使用条件表达式过滤。
例如:<!--[if IE 7]><link rel="stylesheeet" href="ie7.css"><![endif]-->
在[if IE 7]这个里面可以使用lte(<=),lt(<),gte(>=),gt(>),!是对ie不可见的,这些表达式。但是条件注释也有缺点:
缺点1. 额外的HTTP请求。缺点2. 对单一对象的规则定义将会分散在多个位置。 缺点3. 阻塞资源文件在IE8下的并行下载。
也可以在html标签上添加IE版本类。例如:
<!--[if lt IE 7]><html lang="en" class="ie6"><![endif]-->
<!--[if IE 7]><html lang="en" class="ie7"><![endif]-->
<!--[if IE 8]><html lang="en" class="ie8"><![endif]-->
<!--[if IE 9]><html lang="en" class="ie9"><![endif]-->
<!--[if gt IE 9]><html lang="en"><![endif]-->
<!--[if !IE]>--><html lang="en"><!--<![endif]-->
当然可能会有疑问为什么会放到html标签上。其实,也可放到body或者某个包裹的div上去。但html标签的优点:不会阻塞ie8下面的样式表的并行下载。在html5中类是可以加到html标签上的。但在html4和xhtml1不支持。
浙公网安备 33010602011771号