《图解CSS3》读书笔记
LeeSir 发表于 2015年05月19日 09:42

CSS3是CSS规范的最新版本,它被划分成几个模块组,这样能够让各个模块的发布不受其他模块的影响。

按照目录总结CSS3的新变化有:CSS3选择器、CSS3边框、CSS3背景、CSS3文本、CSS3颜色特性、CSS3盒模型、CSS3伸缩布局盒模型、CSS3多列布局、CSS3渐变、CSS3变形、CSS3过渡、CSS3动画、媒体特性与Responsive设计、嵌入式web字体。

在讲新变化之前,大漠给我们介绍了“渐进增强与优雅降级”(progressive enhancement、graceful degradation):渐进增强是指在编写页面的时候,首先保证最核心功能的实现,让任何低(I)端(E)的浏览器都能看到站点内容,然后考虑使用高级但非必要的CSS和Javascript等增强功能,为当前和未来的浏览器提供最好的支持,给用户带来更好的体验;优雅降级是指在设计的时候先考虑低端设备用户能否看到所有内容、然后在此基础上为高端用户进行设计,不仅为高端用户提供一个完美的应用,也要为不同性能级别设备的用户设计不同级别的并不完美的应用。

渐进增强与优雅降级有一个共同点就是放弃了在低端浏览器上实现某些高端效果,在低端浏览器上能做到“简陋但无妨“就可以了。

一、选择器

根据所获取页面种元素的不同,把CSS3选择器分为5类:基本选择器、层次选择器、伪类选择器、伪元素和属性选择器。其中伪元素选择器又分为六种:动态伪类选择器、目标伪类选择器、语言伪类、UI元素状态选择器、结构伪类选择器和否定伪类选择器。

基本选择器:*通配选择器、E元素选择器、#id选择器、.class选择器、select1,select2群组选择器。

层次选择器:E F后代选择器、E>F子选择器、E+F相邻兄弟选择器、E~F通用兄弟选择器

动态伪类选择器:E:link链接伪类选择器、E:visited链接伪类选择器、E:active用户行为伪类选择器、E:hover用户行为伪类选择器、E:focus用户行为伪类选择器

目标伪类选择器:E:target

语言伪类选择器::lang(language)

UI元素状态伪类选择器:E:checked、E:enabled、E:diabled

结构伪类选择器:E:first-child、E:last-child、E:root、E F:nth-child(n)、E F:nth-last-child(n)、E:nth-of-type(n)、E:nth-last-of-type(n)、E:first-of-type、E:last-of-type(n)、E:only-child、E:only-of-type、E:empty

否定伪类选择器::not()

伪元素:::first-letter、::first-line、::before、::after、::selection

属性选择器:E[attr]、E[attr=val]、E[attr|=val]匹配开头、E[attr~=val]匹配多个属性值中的一个、E[attr*=val]匹配包含、E[attr^=val]匹配开头、E[attr$=val]匹配结尾

二、CSS3边框