CSS3—CSS3和现代Web设计

1.1 现代Web设计理念

1.1.1 可访问性第一

    同样一段内容, 可以用成千上万的方法为其设计样式, 但全世界的用户应该依然可以访问它们, 不管他们用什么方式去访问Web——无论手机、键盘控制器还是屏幕阅读器. 因此关于锁定那些没有使用矫正光泽水准的设备的用户是很重要的.

1.1.2 可用性其次

    当用户访问网站中的内容和服务的时候, 他们能理解并且找到他们想要的信息吗?
    为什么人们不多思考：对于浏览他们网站的用户来说, 什么信息是最有用的, 然后如何展现这些信息才能让用户更容易消化吸收?
    一个简洁、书写良好和明确提供的副本远比堆砌浮华、夸张和专业性的只是来得更有效.

1.1.3 优雅降级和渐进增强

    优雅降级和渐进增强两者都是用来解决当浏览器不支持构建内容所需的所有特性时, 内容如何去表现的问题.
    优雅降级指的是简化网站内容的一些特效但仍能完美地保证其可访问性和可用性.
    渐进增强指的是首先保证内容可被所有浏览器访问, 在这个基础上为那些高级浏览器添加对可用性和样式增强的支持. 幸运的是, CSS3可以很容易做到渐进增强和优雅降级, 并且在旧版浏览器也能正常工作.
    如果大部分的特性能够得到合理使用, 它们就优雅地降级从而达到基本内容不支持的浏览器里依然可以访问的目的. 另外, 如果需要的话, 还有一些机制润徐你构件支持或者提供可替代的内容.

1.2 对内容的思考过程

    当在网站界面中实现闪亮的特性时, 一下良好的思考过程应当贯穿其中.
    1)创建一个基本的可访问的HTML内容. 基于内容的样式和行为应该尽可能可用和样式增强, 但他们不是作为访问内容的必须条件.
    2)思考你是否有必要使用所有炫目和先进的技术, 还是单纯只因为你是个想要众人捧的酷酷小孩所以想使用而已.
    3)检查用你所对剑的实施方案是否做到了优雅降级, 同时留有可访问的基本内容.
    4)测试内容是否可访问并且在多个设备上能正常显示(例如不同屏幕尺寸、控制机制)
    5)在没有CSS3和WebGL的情况下或者任何情况下, 对于特定用户, 内容是否可访问. 你最好建立一个提供内容入口的后背机制.
    让内容被尽可能多的用户所访问到, 这是你一直要关注的宗旨.
    1)牢记优雅降级/渐进增强.
    2)使用内置特性向不可访问的内容提供备选方案(例如, alt文本、视频的字幕).
    3)当没有任何内置机制时建立你个人的备选方案(例如, 用Modernizr来检测特性并提供替换样式).
    4)用补丁方案向那些不存在的特性提供支持.

1.3 CSS3模块

    很多模块还未完成, 但这不影响你使用其中的一些特性. 很多特性已经得到浏览器支持, 不过你需要增加厂商前缀.
    1)CSS颜色. 在CSS3中CSS颜色有许多方法定义来指定颜色, 包括RGB(红、绿、蓝), HSL(色相、饱和度、亮度), RGBA和HSLA(分别和前面两个一样但是引入了定义透明度的alpha通道), 以及一个单独opacity属性来控制选区元素的透明度.
    2)CSS3字体. 该模块不但包括对于可下载的Web字体的定义,而且包括其他影响字体的属性定义(比如, font-feature-settings).
    3)CSS3文本. 它与能让文字变得光彩夺目的CSS3字体相辅相成. CSS3文本包括CSS2所熟悉的条目, 比如letter-spacing和text-transform, 并且引入新的条目, 比如hyphenation(断字)和text-shadow(文字阴影).
    4)CSS3选择器. 对比CSS2中现有的选择器, CSS3选择器定义一个更强大、更健壮的机制. 它润徐你在所指定的元素上应用样式. 这些选择器几乎都有良好的跨现代浏览器支持.
    5)媒体查询. 媒体查询是目前你为不同浏览器设备(宽屏和窄屏)提供相同内容不同最佳布局的主要方法.
    6)CSS3背景和边框. 背景和边框定义任何与背景和边框有关的样式, 包括圆角(border-radius)、阴影效果(box-shadow)和花哨的边框效果(border-image).
    7)CSS多栏布局. CSS多栏布局通过定义一个简单的方法来将内容分为多栏布局. 比起不精确的且有hack的浮动, 它能更好的重排.
    8)CSS变形. 这两个规范(2D变形和3D变形)适用于元素在二维和三维中改变尺寸、位置和形状.
    9)CSS过渡. CSS过渡提供了一种状态变化的平滑过渡方式, 比如链接颜色的改变或者鼠标悬停时增加横幅(banner)的尺寸.
    10)CSS动画. CSS动画实现Flash式的声明式动画, 你可以使用关键帧详细地设置不同属性值, 然后浏览器会在关键帧之间自动生成"补间动画".
    11)CSS弹性盒模型布局. 它主要应用于行和列的等宽或等高分配, 该模块为display属性定义了新值来实现更强大的布局技术. 虽然这个属性在现代浏览器中得到了不同程度的支持, 但它确实值得一提.
    12)CSS图片值和替换内容. 这个模块包括一些控制背景图片和替换内容等有用特性, 其中一些特性已经开始得到跨浏览器的支持.

1.4 常用CSS3特性

1.4.1 厂商前缀

    其想法是这样的, 在一个CSS特性完全"完成"之前(举例来说, 规范不是十分确定, 并可能在最终的版本前做出修改), 它仍然可以再各个浏览器中实现. 在这个阶段, 浏览器厂商在特性的开头添加他们自己的厂商前缀并支持前缀版本的特性. 加入规范发生变化和未来版本间工作方式不同, 也不会让一个属性在不同浏览器间表现不同.

 a:link{
     background-color: #;
     -webkit-transition: 1s all;
     -moz-transition: 1s all;
     -ms-transition: 1s all;
     -o-transition: 1s all;
     transition: 1s all;
 }

 a:hover{
     background-color: #ffffff;
 }

    这个过渡简写属性告诉浏览器, 当链接状态在1秒间隔改变时, 平滑地过渡每个属性的变化.
    写下五个属性确保当浏览器开始支持不带前缀的属性而不再是他们各自特定的前缀的属性时, 代码依然有效. 不必去更新它们.
    ● Chrome和其他基于WebKit的浏览器(-webkit)
    ● FireFox和其他基于Gecko浏览器(-moz-)
    ● IE(-ms-)
    ● Opera(-o-)
    ● 不带有前缀

1.4.2 CSS3颜色

    新CSS3颜色单位非常实用, 尤其是他们允许通过编程方式定义颜色的透明度. 这允许你创建高级的图形和特性, 并且他们彼此之间及其背景都能很好地互相融合. 这样你就不需要一直创建大量的PNG. 

    ● RGB和RGBA
      RGB用数字0～255而不是十六进制数字来定义红、绿和蓝色通道.
        RGB(255, 0, 0) 等同于#ff000000或者red
        RGB(255, 255, 255) 等同于#ffffff或者white
      RGBA在RGB基础上, 加入了第四个值. 它用来指定alpha通道或者颜色的不透明度, 其值范围是0~1. 0是完全透明, 1是完全不透明.
        RGBA(255, 0, 0, 1) 全红, 不透明.
        RGBA(255, 0, 0, 0.5) 全红, 50%透明.
        RGBA(255, 0, 0, 0.2) 全红, 20%透明.

    ● HSL和HSLA
      HSL是色调(H)、饱和度(S)和亮度(L)的首字母缩写.
        HSL(0, 100%, 50%) 等同于#ff0000或者red.
        HSL(0, 0%, 100%) 等同于#ffffff或者white.
      第一个值：色调. 取值范围：0~360. 这基本上是一个标准色轮里的一个点.
      第二个值：饱和度. 它指颜色的鲜艳程度(纯度), 取值范围：0~100%; 100%是全彩色, 0%是灰度.
      第三个值：亮度. 它指颜色的明亮度, 取值范围：0~100%. 100%是完全亮/白, 0%是完全暗/黑.
      HSL在很多方面上都是有意义的. 你可以选择互补的红色阴影搭配前面的红色, 只要通过变化亮度：
        HSL(0, 100%, 30%)
        HSL(0, 100%, 40%)
        HSL(0, 100%, 50%)
        HSL(0, 100%, 60%)
      HSLA的工作方式与RGBA一样.
        HSLA(0, 100%, 50%, 0.5) 等同于50%透明的全红.

    ● 不透明度
      CSS3中, 现有的opacity是一个单独的属性. 可以对任何元素添加opacity, 这样给整个元素以及元素内的所有子元素设置透明度级别.取值范围：0~1.
        opacity : 0;
      这条规则会让元素完全消失.
      内容在DOM下还是可以访问的, 只是从视觉上隐藏了(类似于display:none等)

由于旧版IE不支持透明的CSS颜色或opacity, 对这种情况需要预先增加支持或者后备方案.

1.4.3 用rem调整文本大小

    CSS3引入了一些新的尺寸单位, 特别需要指出的是rem(或根em).由于所有用rem定义的字体大小相对于根元素文本的大小, 这使得文本风格化更容易. em和百分比相对于其父元素来设置字体大小, 因此, 对于嵌套的元素, 你经常就要做各种计算来算出索要字体的大小值, 而rem摆脱了这样的并发症：

 <h1>Example <em>rem</em> exploration</h1>

 <p>
     This example is written to show why the new CSS3 rem unit
     is useful. It allows you to much more easily size text and
     boxes, as rem sizing is always relative to the size of the
     <code>&lt;html&gt;</code> eement.
 </p>

 html{
     font-size : 62.5%;
 }

 h1{
     font-size : 3em;
 }

 p{
     font-size : 1.4em;
 }

    开始时你用久经考验的62.5%的字体设置使得整个文档的基准字体大小为10px(16px的62.5%, 16px为所有浏览器中正文文本默认的标准字体大小). 然后你再设置<h1>为基准字体大小的3倍, 换算之后就是30px;</h1>为基准字体大小的1.4倍, 也就是14px. 但是当你尝试调整那些元素里的子元素时,问题开始出现了. 例如, 如果你希望<code>元素的字体大小为11px, 那么你用em就要基于14px(<code>的父元素的字体大小)的1.1em. 事实上, 11/14=0.786em才是你所需要的值. 以此类推, 如果是更复杂和更精确的设计, 你就需要大量复杂的计算. 如果用rem替换, 一切都相对于的font-size. 因此, 如果你想要得到11px的code字体：

 code{
     font-size : 1.1rem;
 }

    美中不足的是IE从9才开始支持rem. 需要对旧版IE提供像素大小的后备方案, 尽管它的灵活度较小, 但至少保证字体大小是一样的.

 code{
     font-size : 11px;
     font-size : 1.1rem;
 }

提示：IE6和IE7不会调整以像素为单位的文本. 那么, 如果处于对可访问性的考虑, 你打算采用rem作为文本字体大小单位, 你可能要通过IE条件注释样式为IE6和IE7这两个浏览器增加文本字体大小.

1.4.4 CSS3选择器

    CSS3提供了一整套完备的新选择器.以下列举一些最强大和最有趣的选择器.

选择器	例子	描述	浏览器支持
通配符选择器	*	匹配页面上的任何元素	所有浏览器都支持
属性选择器	img[alt]	匹配具有指定属性的所有指定元素【如果你想突出显示有无alt属性的图片, 该选择器是理想的可访问测试】	IE6及早期版本不支持
	img[src="alert.gif"]	匹配具有指定属性并且属性值是指定值的所有元素【当指定的图片或者其他元素没有额外的ID或者class, 该选择器非常有用】	IE6及早期版本不支持
	img[src^="alert"]	匹配以指定的字符串开头的属性值的所有元素	IE6及早期版本不支持
	img[src$="gif"]	匹配以指定的字符串结束的属性值的所有元素	IE6及早期版本不支持
	a[href*="uk"]	匹配包含指定字符串的属性值的所有元素【上述选择器对给指定的内容添加特殊样式或icons非常有用】	IE6及早期版本不支持
	article[class~="feature"]	匹配属性值为一用空格分隔的值列表且其中一个值等于指定字符串的所有元素	IE6及早期版本不支持
	article[id|="feature"]	匹配属性值为以连字符分隔的值列表里包含指定字符串的单一值的元素	IE6及早期版本不支持
后代选择器	nav a	匹配右边的元素F, 只要F嵌套在左边的元素S的某处. 你可以附加两个或多个元素, 例如, nav li a	所有浏览器都支持
子元素选择器	body>header	匹配右边的元素F, 只要F是左边的元素S的直系子元素. 你可以附加两个或多个元素, 例如, body>header>p	IE6及早期版本不支持
相邻兄弟元素选择器	h1 + p	匹配右边的元素F, 只要在源代码顺序里F是紧跟左边的元素S之后且他们是同一嵌套级别的兄弟	IE6及早期版本不支持
通用兄弟元素选择器	h1 ~ img	匹配右边的元素F, 只要F是左边的元素S的兄弟(在同一嵌套级别)	IE6及早期版本不支持
UI元素伪类选择器	a:link	定义默认状态的链接的样式	所有浏览器都支持
	a:visited	定义已访问的链接的样式	所有浏览器都支持
	img:hover	定义鼠标指针悬停在元素上方时元素的样式	所有浏览器都支持
	img:focus	定义获得焦点的元素样式(例如, 键盘输入)	所有浏览器都支持
	a:active	定义被激活的链接样式(例如, 用户现在单击它)	所有浏览器都支持
	input:valid	定义表单输入框的数据有效时的样式【这些类型的选择器对于提示用户他们的表单数据是否有效非常有用】	IE不支持
	input:invalid	定义表单输入框的数据无效时的样式	IE不支持
	input:enable	定义表单输入框处于可用状态时的样式	所有浏览器都支持
	input:disabled	定义表单输入框处于不可用状态时的样式	所有浏览器都支持
	input:in-range	定义表单输入框的数据在有效范围之内时的样式	IE不支持
	input:out-of-range	定义表单输入框的数据在有效范围之外时的样式	IE不支持
否定式选择器	input:not([type="submit"])	定义所有不匹配括号内的简单选择器的指定元素的样式【多个不想匹配的选择器, 例如, input:not([type="submit"],[type="file"])	IE8及早期版本不支持
语言选择器	p:lang(en-US)	定义包含圆括号内lang属性设置的语言的指定元素的样式	IE6及早期版本不支持
目标伪类选择器	article:target	定义链接的目标元素的样式【通过单击一个按钮且让内容出现, 比如遮盖层、信息盒子或选项卡式界面中不同选项卡】	IE8及早期版本不支持
结构伪类选择器	:root	定义文档根元素的样式, 基本上永远是<html>	IE8及早期版本不支持
	li:nth-child(2n+1)	在一系列子元素中, 你可以给那些符合圆括号内公式的指定元素定义样式【奇数项等, 适合做斑马条纹效果】	IE8及早期版本不支持
	li:nth-last-child(2n+1)	与nth-child工作方式一样, 不过它是从最后一个子元素开始, 然后倒数算起	IE8及早期版本不支持
	p:nth-of-type(3)	与nth-child工作方式一样, 但是它将忽略那些不是指定类型的元素【通常用来匹配单一或者某一特定类型的子元素】	IE8及早期版本不支持
	:nth-last-of-type(1)	与nth-of-type工作方式一样, 不过它是从最后一个子元素开始倒数	IE8及早期版本不支持
	p:first-child	匹配一系列子元素中的第一个, 如果它是指定的类型	IE8及早期版本不支持
	p:last-child	匹配一系列子元素中的最后一个, 如果它是指定的类型	IE8及早期版本不支持
	p:first-of-type	匹配一系列该类型子元素中的第一个	IE8及早期版本不支持
	p:last-of-type	匹配一系列该类型子元素中的最后一个	IE8及早期版本不支持
	li:only-child	匹配属于父元素中唯一子元素【如果想给只有一个子项的列表项一个特别的样式.	IE8及早期版本不支持
	section p:only-of-type	匹配属于父元素下同类型中的唯一元素	IE8及早期版本不支持
	:empty	匹配没有任何子元素的元素	IE8及早期版本不支持
伪对象	p:first-letter	匹配元素里的首字母【用该选择器来制作首字下沉效果非常完美	IE6及早期版本不支持
	p:fiest-line	匹配元素里的首行文本【该选择器对给前言实现好看的效果很好用, 例如, 把首行改成小型大写字幕	IE6及早期版本不支持
	a:before	允许在指定的元素之前插入生成内容, 例如, 在特定内容之前添加图标	IE7及早期版本不支持
	a:after	允许在指定的元素之后插入生成内容, 例如, 在某系内容片段放置版权符号	IE7及早期版本不支持

注意：从表中看出, 大部分项目中, 你将有可能需要支持所有浏览器.

    ● CSS3 属性选择器
      CSS3 扩展了基本属性选择器的功能, 它允许匹配包含特定字符串的属性的元素.
      例如, 可以使用下面这行规则匹配<img src="alert.gif">, 并给它设置样式：

 img[src^="alert"]{
     border: 1px solid #000000;
 }

      字符^意味着浏览器将匹配src属性中包含以字符串"alert"开头的<img>元素.

      可以这样给<img src="alert.gif">设置样式：

 img[src$="gif"]{
     border: 1px solid #000000;
 }

      字符$意味着浏览器将匹配src属性中包含以字符串gif结尾的<img>元素.

      也可以这样给<img src="alert.gif">设置样式：

 img[src*="ert"]{
     border: 1px solid #000000;
 }

      字符*以为这浏览器将匹配src属性中位于任意位置且包含字符串ert的<img>元素.

    ● 否定式伪类
      否定式伪类可以用来明确地为所有不匹配简单选择符的元素应用样式.
      比如, 要给submit类型意以外的所有表单元素应用一个指定高度：

 input[type="text"], input[type="url"], input[type="email"], select, textarea, etc, etc{
     width: 15em;
 }

 /* :not 选择器允许这样写 */
 input:not(type="submit"){
     width: 15em;
 }

 /*  可以将多个简单选择器放入圆括号并用逗号隔开 */
 input:not([type="submit"], [type="file"])

    ● CSS3伪类
      伪类不仅仅用来匹配元素, 也可以用来匹配某些状态的元素, 例如, a{}匹配链接, 但是a:hover{}匹配鼠标指针处于悬浮状态的链接.
      CSS3又引进了一些新的伪类,:target, 它用来匹配当前页面URL中的目标元素. 它能有效地为单击状态的链接设置样式. 例如：

 <a href="#target">Click me</a>
 <div id="target">Woot!</div>

 /*  当单击链接时, 页面会定位到<div>. 可以利用这个规则给这个状态的<div>设置样式 */
 div:target{
     ...
 }

      input:valid { color: green; }
      input:invalid { color: red; }

      :nth-child匹配一些列连续元素S中具有重复特征的元素E.
      例如, 紧挨的几个列表项或者几个段落或者文章.

 <ul>
     <li>First</li>
     <li>Second</li>
     <li>Third</li>
     <li>Fourth</li>
     <li>Firth</li>
     <li>Sixth</li>
     <li>Seventh</li>
     <li>Eighth</li>
     <li>Ninth</li>
     <li>Tenth</li>
 </ul>

      如果匹配列表项, 可以这样写(其中n是一个公式、数字或者关键字)：
        li:nth-child(n)
      如果只想匹配需要为技术或者偶数的列表项, 可以这样写：
        li:nth-child(odd)
        li:nth-child(even)
      再或者,
        li:nth-child(2n+1)
        li:nth-child(2n)

      其他公式例子：
        nth-child(5)    匹配第5项相邻列表项
        nth-child(4n+1) 匹配每4项列表项, 然后在得到的每个结果基础上加上1, 因此数字是5和9.
        nth-child(3n-2) 匹配每3项列表项, 然后在得的到每个结果基础上减去2, 因此数字是1, 4和7.

      nth-last-child与nth-child的工作方式一样, 不同的是它从序列的最后一个元素开始倒数.
      nth-of-type与nth-last-of-type非常类似, 但有一个重要的区别：of-type忽略那些穿插在重复元素序列中的人和流氓元素, 因为该选择器匹配的是元素类型而非子序号.
      例如：

 </div>
     1. <article class="abstract"> ... </article>
     2. <article class="abstract"> ... </article>
     3. <article class="abstract"> ... </article>
     4. <article class="abstract"> ... </article>
     5. <article class="abstract"> ... </article>
     6. <blockquote><p> ... </p></blockquote>
     7. <article class="abstract"> ... </article>
     8. <article class="abstract"> ... </article>
     9. <article class="abstract"> ... </article>

      <blockquote>的子序号是全部9行中的第6行. 如果以article:nth-child(2n), 则匹配<div>下的第2, 4, 8行偶数项子元素<article>. 而该选择器不会匹配<blockquote>(位置在第6行), 因为它不是<article>.
      如果以article:nth-of-type(2n), 则匹配结果是第2, 4, 7, 9行的<artcile>. 理由是选择器匹配的是元素类型而非子序号. 因此, 这个例子中选择器完全忽略了<blockquote>并且匹配偶数项的<article>. 没错, 如果按照原始序号配置, 有两个<article>的序号是奇数. 因为<blockquote>确切存在并且占用他们的位置. 但是article:nth-of-type(2n)将忽略<blockquote>.

      only-child: 匹配父元素中唯一子元素, 例如, 前面例子里article:only-child将不匹配任何元素, 因为父元素下有多个<article>子元素.
      only-of-type: 匹配属于父元素下同类型中的唯一兄弟元素. 例如, 前面例子里的blockquote:onlyof-type将匹配<blockquote>, 因为它是当前此类型里的唯一元素.
      empty: 匹配没有任何子元素(包括文本节点)的元素. 例如, div:empty 将匹配<div></div>而不会匹配<div>1</div>或<div>Hi!</div>

    ● 伪元素
      不同于伪类, 伪元素不匹配元素的状态, 他们匹配元素里的各个部分.
      first-letter and first-line. 可以使用first-letter伪元素匹配给定元素里的首字母, first-line匹配首行文本.

 #main>article>p:first-of-type:first-line{
     font-variant: small-caps;
 }

 #main>article>p:first-of-type:first-letter{
     font-size: 400%;
     float: left;
 }

      使用:before和:after生成内容. 可以使用:before和:after伪元素在选中的元素之前和之后插入指定的内容.

 a:after{
     content: " " url(flower.gif);
 }

 /*  也可以使用attr()函数来在元素之后插入其元素的属性值 */
 a:after{
     content: " " "(" attr(href) ")";
 }

      这对于打印样式表而言是一个非常不错的技术, 可以吧文档里的URL显示出来而不是藏在链接里. 

    ● CSS3 伪元素双冒号语法

注意：CSS3新伪元素的书写方式是使用双冒号, 例如, a::after{...}, 用于将他们与伪类区分开.

    ● 让新一代的选择器兼容旧版浏览器
      为了添加浏览器的支持,请下载Selectivizr并应用到你的站点, 然后确认你也将一个Selectivizr站点列出的兼容程序库应用到页面.

<script src="http://s3.amazonaws.com/nwapi/nwmatcher/nwmatcher-1.2.5-min.js"></script>

<!--[if (gte IE 6)&(lte IE 8)]>
    <script type="text/javascript" src="script/selectivizr-min.js"></script>
<!--[endif]-->

      以上代码让IE6~IE8也能支持CSS3选择器.

注意：Selectivizr只适用于外部样式表中的CSS, 对内联和内部的CSS无效.

---

---