CSS3秘笈第三版涵盖HTML5学习笔记9~12章

第9章，装饰网站导航

限制访问，处于隐私方面考虑，浏览器已经开始限制可以对伪类:visited应用哪些CSS属性了。其中包括对已访问过的链接定义color、background-color、border-color等样式（除非已经为那些链接的正常状态定义了颜、背景色和边框色）

对于<a>标签可以对所有不同的访问状态设置样式，但要让样式有效，必须以特定的顺序指定链接：link、visited、hover、active

CSS3按钮生成器：http://css3button.net

CSS3按钮优秀示例：http://hellohappy.org/css3-buttons/和http://webdesignerwall.com/tutorials/css3-gradient-buttons

垂直导航栏

1、把链接当成块显示

2、限制按钮宽度

水平导航栏

方法1、使用display:inline-block属性，但是会在按钮之间留下一条小缝隙。

消除空格方法1：把上一个</li>与下一个<li>放同一行，不过，代码都不这样写

<ul>
   <li><a href="#">one</a></li><li>
   <a href="#">two</a></li><li>
   <a href="#">three</a></li>
</ul>

效果：

消除空格方法2：对项目列表添加负值的right margin，不过不同的文本长度，会使这个值不同，需要去实验

    <style type="text/css">
        li {
            display: inline-block;
            border: 1px solid #999;
            margin-right: -9px;
        }
    </style>

效果：

对水平导航栏使用浮动

1、浮动列表项目

2、为链接添加display:block

3、给链接定义样式

4、添加一个宽度

5、在<ul>标签样式中添加overflow:hidden

关于创建导航栏方面的帮助

将普通列表变成非凡导航元素：http://css.maxdesign.com.au/listutorial/

基于列表的导航设计教程：http://css.maxdesign.com.au/listamatic/

不想费力自己创建可以试试List-O-Matic向导：www.accessify.com/tools-and-wizards/developer-tools/list-o-matic

CSS式的预载替换法

使用CSS可以很简单的给图形链接在鼠标经过时变成另一张图片，不过有个问题，除非已下载了图片，否则浏览器在接收和显示新图片时会有一个很明显的延迟，为避免延迟，可以采用CSS精灵（CSS Sprites），可以用一张图片创建不同的按钮状态

1、使用图片编辑软件创建带有不同按钮版本的图片

2、测量从整张图片顶部到每张图片顶部之间的距离

3、给普通的链接创建一个CSS样式

4、创建:hover样式

给特殊的链接类型定义样式

使用属性选择器

a[href^='http://']

第10章，CSS的transform、transition和animation属性

transform（变形）

CSS3引入了几个可以对网页元素进行变换的属性，比如对它进行旋转、缩放、移动，或者沿着它的水平方向或垂直方向扭曲（斜切变换）

IE9，Safari，Chrome，Firefox，Opera支持2D变换，IE8及更早不支持，transform需要使用供应商前缀

transform功能：

1、rotate（旋转）

.testClass{
    transform:rotate(20deg);          /* 提供一个0~360的度数值，正值顺时针方向旋转，负值逆时针 */
}

2、scale（缩放）

.testClass{
    transform:scale(2);                    /* 接受单个参数：放大或缩小，0~1之间的数是缩小，大于1的数是放大，负数会将元素倒过来缩放 */
    transform:scale(x,y);                  /* 接受两个参数：第一个表示水平缩放，第二个表示垂直缩放 */
/*单方向缩放：*/
    transform:scaleX(num);/*沿X轴缩放*/
    transform:scaleY(num);/*沿Y轴缩放*/
}

3、translate（平移）

transform的translate函数只是将一个元素从它现有位置向左或向右以及向上或向下移动一定距离

translate函数有两个值：第一个指定水平距离（正数向右移，负数向左），第二个指定垂直距离（正数向下，负数向上）

还可以单方向使用：translateX水平方向，translateY垂直方向

都可以使用pixel，em以及percentage值

4、skew（倾斜）

.testClass{
    transform:skew(45deg,0);          /* 第一个指沿X轴倾斜（正数向左倾斜<从元素上方沿逆时针进行>，负数向右），*/
                 /*第二个指沿Y轴倾斜（正数往右边向下<沿顺时针从元素右侧进行>，负数往左边向下），这个理解不够，表达不明白 */
}

多个函数共用：

.testClass{
    transform:skew(45deg,0deg) scale(.5) translate(400px,500px) rotate(90deg);
}

这些函数的应用顺序就是浏览器应用这些效果的顺序

5、origin

一般来说，都是相对于元素的中心作变换点，但CSS3允许使用transform-origin属性，改变这个点，与background-position属性一样，可以提供关键字、pixel为单位的绝对值、em和percentage为单位的相对值

transform-origin:left top;

transform-origin:0 0;

transform-origin:0% 0%;

transform-origin:right bottom ==> transform-origin:100% 100%

第一个指水平，第二个指垂直

3D变形，CSS3还提供了一种更加复杂的变换类型：3D变形（3D transform）

transition

实际上是在一定时间内，一组CSS属性变换到另一组属性的动画展示过程。

为了使transition生效，需要做以下几件事：
1、两个样式，一个开始，一个结束

2、transition属性。CSS3新增，使动画成为可能的秘诀所在。一般应用到最初开始的样式中

3、触发器

浏览器无法以动画形式模拟所有CSS属性，但还是有很多可选择。具体请看：www.w3.org/TR/css3-transitions/#animatable-properties

添加transition

.navButton{
     background-color:orange;
     transition-property:background-color;
     transition-duration:1s;
}
.navButton:hover{
     background-color:blue;
}

transition-property用于定义要以动画显示哪些属性，可以指定一个或多个，也可以使用all关键字。

transition-duration用于定义动画要持续多久结束，可以使用秒或毫秒作单位transition-duration:.5s，transition-duration:500ms

还可以针对每个需要动画展示的属性分别定义时限：

.testClass{
    transition-property:color,background-color,border-color;
    transition-duration:.5s,.75s,2s;
}

时间与属性是一一对应的

注：必须提供供应商前缀，并不需要提供IE供应商前缀，IE9及之前不支持，IE10可支持前缀版本

给transition定时

transition-timing-function属性可控制动画速度。并不是控制动画时间长短，而是控制动画期间的速度。可以使用关键字：linear、ease、ease-in、ease-out、ease-in-out，浏览器默认以ease方法。

还可以使用cubic-bezier值。Bezier曲线。

.testClass{
     transition-timing-function:cubic-bezier(.20,.96,.74,.07);
}

可以使用在线工具创建和测试不同的定时函数，Mathew Lein的Ceasar工具就是其中之一：http://matthewlein.com/ceaser/

延时启动transition

利用transition-delay属性阻止立即开始动画。

需要使用供应商前缀：

.testClass{
    -webkit-transition-delay: .5s;
    -moz-transition-delay: .5s;
    -o-transition-delay: .5s;
    -ms-transition-delay: .5s;
    transition-delay: .5s;
}

在使用CSS下拉菜单时，如果不小心让鼠标离开了菜单，则下拉菜单很快就消失了，可以使用如下做法：
在初始样式添加：transition-delay: 5s;

在:hover样式添加：transition-delay: 0;

这么做不合常理就是了

注：js改动CSS属性，也会启动transition

transition快捷方法

使用transition属性。只需要列出属性、延时时间、定时函数，并用空格分开即可。

.testClass{
    transition:all 1s ease-in .4s;
}

还可以分开定义多个，只需要逗号分隔：

.testClass{
    transition:color 1s,background-color .5s 1s;
}

需要提供供应商前缀

animation

创建动画

1、定义动画，包括创建关键帧，即列出要创建动画的CSS属性

2、将动画应用到元素上，可以应用给任意数量的元素

定义关键帧

@keyframes animationName{
    from{
        /*  list   CSS   properties   here   */
    }
    to{
        /*   list   CSS    properties   here   */
    }
}

@keyframes并不是CSS属性，应该称之为at规则，CSS其他at规则还包括@import，@media

还可以使用多个百分比定义多个关键帧：

@keyframes backgroundGlow{
    from{
        backgorund-color:yellow;
    }
    50%{
        background-color:blue;
    }
    to{
        background-color:red;
    }
}

以上表示，蓝色背景会在动画进行到50%时出现，可以用0%代替from关键字，100%代替to关键字

还可以这么设置：

@keyframes glow{
    from{
        backgorund-color:yellow;
    }
    25%,75%{
        background-color:blue;
    }
    to{
        background-color:red;
    }
}

表示在动画进行25%-75%之间要显示持续显示蓝色背景

还有这个：

@keyframes glow{
    from{
        backgorund-color:yellow;
    }
    20%,60%{
        background-color:blue;
    }
    40%,80%{
        background-color:orange;
    }
    to{
        background-color:red;
    }
}

表示在20%显示blue，在40%显示orange，在60%显示blue，在80%显示orange，跳来跳去

CSS3 animation一大缺点：需要特定的供应商前缀：

@-webkit-keyframes fadeIn{
    from{
        opacity:0;
    }
    to{
        opacity:1;
    }
}
@-moz-keyframes fadeIn{
    from{
        opacity:0;
    }
    to{
        opacity:1;
    }
}
@-o-keyframes fadeIn{
    from{
        opacity:0;
    }
    to{
        opacity:1;
    }
}
@keyframes fadeIn{
    from{
        opacity:0;
    }
    to{
        opacity:1;
    }
}

注：不需要为IE提供，IE9及更早版本不支持，IE10支持无供应商前缀版本

应用animation

可以给元素的任何样式添加动画，也可以给伪类应用动画，js改动也会启动动画

1、用@keyframes规则创建淡入动画：

@keyframes fadeIn{
    from{    opacity: 0;    }
    to{    opacity: 1;    }
}

2、将动画应用给<div>标签的样式：

.announcement{
    animation-name: fadeIn;          /*设置动画名称，前面创建的*/
    animation-duration: 1s;          /* 设置动画从开始到结束所花时间 */
}

可以将非动画属性也一起放入样式中

animation-name，animation-duration也需要使用供应商前缀

给animation定时

使用animation-duration定时，可以像transition一样定义多个，只要用逗号分开，一一对应。

使用animation-timing-function函数控制整个动画或特定关键帧，可以使用Cubic Bezier曲线也可以使用关键字，关键字与transition-timing-function函数关键字一样（linear、ease、ease-in、ease-out、ease-in-out）

定义了多个关键帧，还可以在关键帧之间应用不同的函数：

@keyframes growAndGlow{
    from{
        background-color: yellow;
        animation-timing-function: cubic-bezier(1, .3, 1, .115);
    }
    50%{
        transform:scale(1.5);
        background-color:blue;
        animation-timing-function: linear;
    }
    to{
        transform:scale(3);
        background-color: red;
    }
}

还可以使用延时启动：animation-delay可以设置等待时间，与transition-delay属性一样。

完成animation

使用animation-iteration-count可以设置动画运行的次数。使用infinite可以不限次数的运行下去

为了使一个动画在奇数次时超前运行，在偶数次时反向运行，可以使用animation-direction属性和关键字alternate。

为了让一个动画在运行后回归最初的状态，可以使用偶数迭代次数，并将animation-direction设为alternate

可以使用animation-fill-mode:forwards;将动画固定在最后的样子，以免使得web浏览器在动画结束时，将元素突兀的变回初始状态

使用animation快捷方式

.fade{
    animation-name: fadeOut;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 2;
    animation-direction: alternate;
    animation-delay: 5s;
    animation-fill-mode: forwards;
}

改写：

.fade{
    animation : fadeOut 2s ease-in-out 2 alternate 5s forwards;
}

只有名称和持续时间是必要的，其他都是可选，应用多个动画，只需每个动画用逗号隔开即可。

.fade{
    animation : fadeOut 2s ease-in-out 2 alternate 5s forwards，
                glow 5s;
}

实际应用还需给定供应商前缀：

.fade{
    -webkit-animation : fadeOut 2s ease-in-out 2 alternate 5s forwards，
                        glow 5s;
    -moz-animation : fadeOut 2s ease-in-out 2 alternate 5s forwards，
                     glow 5s;
    -o-animation : fadeOut 2s ease-in-out 2 alternate 5s forwards，
                   glow 5s;
    animation : fadeOut 2s ease-in-out 2 alternate 5s forwards，
                glow 5s;
}

暂停animation

使用animation-play-state属性，只接受两个关键字：running、paused，要暂停只需这样：animation-play-state:paused;但，在使用CSS时只有一种方法可以应用它，那就是伪类。

第11章，表格和表单格式化

使用text-align和vertical-align调整垂直对齐和水平对齐

text-align接受：left、right、center、justify四个值，可继承

vertical-align接受：top、baseline、middle、bottom四个值，不可继承，top：把内容推到表格单元顶部；middle：让内容居中；bottom：把内容底边推到单元格底部；baseline（基准线）作用和top类似，不过基本看不出来baseline有啥作用。

创建边框

在<table>标签中设置border时，只会给表格添加边框，并不会给单元格添加，当给单元格设置border时，将会在单元格之间留下一个间隙

控制表格单元之间的空格

CSS提供了border-spacing属性用来控制表格单元之间的空隙。

消除双边框

即使消除了间隙，表格单元的边框也会变成双边框。使用border-collapse属性，接受两个值：spearate（默认显示方式）、collapse（消除单元间隔和边框）

注：如果将border-collapse设置为collapse，border-spacing将不起作用

圆角

利用border-radius可以给表格单元（而不是表格本身）添加圆角。

还可以给表格和表格单元应用box-shadow属性。

可以使用nth-of-type选择器，给表格奇数行和偶数行添加不同的样式。

注：浏览器通常会显示出空白表格单元的边框和背景色，若要隐藏可以使用empty-cells:hide：

table{
     empty-cells:hide;
}

但，如果border-collapse设为collapse，则浏览器忽略empty-cells属性，依然显示空白单元格边框和背景色

给表单定义样式

HTML表单元素

1、fieldset，<fieldset>标签用来集中相关表单问题

2、legend，<legend>标签就在<fieldset>标签的HTML代码之后，它给一组域提供一个标签

3、text fields（文本域）

4、buttons（按钮），表单按钮：提交，重置或其他动作

5、drop-down menus（下拉菜单），<select>

6、checkbox（复选框）和radio button（单选按钮）

第三部分----CSS页面布局

第12章，CSS布局简介

网页布局类型

1、固定宽度，参看www.alistapart.com，www.espn.go.com，www.nytimes.com

2、流式布局，参看http://maps.google.com

3、响应式Web设计（Responsive Web Desin，RWD）

HTML5的分区元素

<article>标签用于组成一个自包含结构的内容，例如一篇博客文章。

<header>标签用于给网页或者网页的分区提供标题、导航目标以及其他介绍性材料

<footer>标签用于包含版权声明、网站创始人的名字、网页的发布日期等等

CSS布局方法

绝大多数网页均采用CSS的float属性进行布局

布局策略

1、从内容入手

2、Mobile First（移动设备优先）

3、先设计草图

Yahoo提供了一个免费的Stencil Kit（http://developer.yahoo.com/ypatterns/wireframes），可在Illustrator、Visio、OmniGraffle以及其他图形处理软件中使用它来创建网页草图

4、找出方框

5、顺应页面流

6、记住背景图片的使用

7、拼图中的小部件

8、给元素设计层次

9、margin和padding的使用