《CSS3秘籍》（第三版）-读书笔记(3)

第9章 装饰网站导航

1、  选择要定义样式的链接

大部分浏览器都支持4种基本的链接状态：未访问的链接、已访问的链接、访问者的鼠标正悬停在上方的链接，以及正被单击的链接。CSS提供了与这些状态对应的4个伪类选择器，分别是:link、:visited、:hover和:active。

在大多数情况下，样式表中至少要包括一个通用的a样式、:visited样式以及:hover样式。为了实现最大程度的设计控制，也可以对所有不同的访问状态都定义样式。但是要让这些样式有效，必须以这个特定的顺序指定链接，即link、visited、hover和active。用一个简单的方法记住它：LoVe/Hate（爱/恨）。

如果要用一种方法来定义某些链接的样式，再用另一种方法来定义另一些链接的样式，这时，可以给特定的链接标签应用一个类。

2、  给链接定义样式

（1）给链接添加下划线

• 完全取消下划线，可以使用text-decoration: none;
• 在鼠标经过链接时添加下划线，利用伪类:hover
• 使用底部边框线border-bottom属性来设置链接下划线的颜色、宽度或样式
• 使用背景图片，如background: url(images/underline.gif) repeat-x left bottom;来定制链接的展现效果

（2）创建按钮

利用border、background-color和padding可以创建各种方框型的按钮。

一种常见的设计方法是：利用4种不同的边框颜色给按钮添加浮雕效果。

还可以（或许是应该）给按钮创建一种:hover状态。在浮雕的例子中，是利用各种颜色的反差（使深色的背景变浅，使浅色的边框变深，等等），效果非常显著。

利用线性渐变和圆角、方框和文本阴影可以为按钮添加有深度的视觉效果。

（3）利用图片

给链接添加图片是装饰网站导航中最容易、最具视觉效应的一种方式。你可以利用CSS的background-image属性，轻松地给任何链接添加引人瞩目且信息翔实的图片。

以下对链接使用图片时需要牢记的一些东西：

• 别忘了设置no-repeat（不重复），以防止平铺
• 用background-position控制位置
• 用padding添加空间
• 利用伪类:hover和:visited，可以添加很棒的动态效果，并能提供关于链接的有用反馈。

如果决定对链接的:hover状态使用图片，注意图片的延迟问题。

3、  CSS式的预载替换法

利用伪类:hover和一张背景图片，使一个图片型链接在鼠标经过时变成另一张图片存在一个问题：除非访问者已经下载了这张替换图片，否则浏览器在接收和显示新图片时就会有一个很明显的延迟。

为避免延迟问题，有一个CSS式的预载方法，称作CSS精灵（CSS Sprites）。它用一张图片就可以创建同一个按钮的不同状态。

以下是实施步骤：

1)        在图像编辑软件中创建一张带有不同按钮版本的图片。

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

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

4)        创建:hover样式，技巧是利用background-position属性使图片的方向转成朝上，因此第一张图片消失，替换图片变成可见。

除了防止下载延迟外，这种方法也有助于帮助你将导航图片放在一个单独的文件夹里面。

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

• 如果需要创建只对使用绝对URL的链接有影响的样式，可以使用这个选择器：

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

^=意为“以···开头”

• 给邮箱链接设定样式时可以创建这样的选择器：

a[href^=’mailto:’]

• 给PDF文件的链接创建样式时，可以使用这个选择器：

a[href$=’.pdf’]

$=意思是“以···结尾”

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

1、  transform

CSS3引入了几个可以对网页元素进行变换的属性，比如对它进行旋转、缩放、移动，或者沿着它的水平方向或者垂直方向扭曲（这个过程称作倾斜变换）。实现这些变化的基础CSS属性是CSS的transform属性。

需要给当前所有浏览器使用供应商前缀。IE8及其更早的版本则不支持。

CSS的transform属性有一项奇怪的特性，就是它们对于其周围的元素不会产生影响，这极有可能会覆盖掉其他的项目。。

transform属性有下列功能函数：

（1）rotate()：给它提供一个0~360之间的度数值，浏览器就会将该元素绕着圆圈旋转指定度数。指定度数值时，数字后面要带deg。

（2）scale()：利用scale（缩放）功能调整元素的尺寸，让它变得更大或者更小。括号中提供的数字据说缩放倍率，它要乘以元素的当前尺寸。元素及其里面的所有项目都会以这个数值进行缩放。

scale最常见的用法是让网页上的一个元素动态地发生视觉上的变化。例如，

当鼠标移动到一个按钮时，使该按钮突然变大。这种效果利用:hover状态就可以实现。

对于图片也是如此，显示一个包含很多小图片的相册，然后给它们添加一个:hover样式，使得当访问者的鼠标经过图片时，它会变大。为了更美观一些，应该在HTML中插入最终放大好的图片版本，但是要用CSS或<img>标签的width和height属性将它的尺寸设置小一些。

你甚至可以分别缩放水平方向和垂直方向的尺寸。这时，要在括号中提供两个值，中间用一个逗号隔开；第一个数表示水平缩放，第二个数表示垂直缩放。

CSS3还为水平缩放和垂直缩放分别提供了功能：scale沿着X轴缩放，scale沿着Y轴缩放。

缩放功能还有一个可视化的优点：可以让一个元素来回翻转。如果给scale使用负数值，实际上是让元素翻转过来。如transform:scale(-1);  或者 transform:scale(-1,1);

（3）translate()：只是将一个元素从现有的位置向左或向右以及向上或向下移动一定的距离，它并没有对网页进行重新布局。

但是，当你想对鼠标的悬浮或单击状态做出细微的移动时，用translate就很方便了。

translate函数有两个值：第一个值指定水平距离，负值是将元素向左移动；第二个值指定垂直距离。负值是将元素向上移动。

CSS3还有两个函数可以用来移动元素：translateX只是将元素向左或者向右移动，translateY则只是将元素向上或者向下移动。

（4）skew()：将元素倾斜是将它沿着X轴或Y轴倾斜，这样可以让元素产生一种三维的效果。

skew函数有两个值：第一个值是一个0deg~360deg之间的度数值，从元素的上方沿着逆时针方向进行；第二个值也是一个0deg~360deg之间的度数值，但它是沿顺时针方向从元素的右侧进行的。

CSS3还给skew函数也提供了X轴和Y轴函数：skewX和skewY。

多个transform函数共用，其用法是，在transform属性中添加所有的各个函数，并用一个空格隔开即可。

这些transform函数的先后顺序，也就是Web浏览器应用这些效果的顺序。

一般来说，当你对一个元素应用transform时，Web浏览器就会以元素的中心点作为变换点。通过设置transform-origin属性值可以改变在该元素中应用变换的位置。

2、  transition

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

为了使transition生效，需要做以下几件事情：

1)        两个样式。一个样式代表该元素最初的样子，第二个样式则代表最终的样子。

2)        transition属性。这正是使动画成为可能的秘诀所在。一般来说，是将transition属性应用到最初的样式中，即定义动画开始之前的元素外观的样式。

3)        触发器。在CSS中，可以利用几个伪类来触发动画。其中最常用的是伪类:hover。此外，还可以使用:active（当有鼠标单击元素时）、:target（当元素成为链接目标时）、:focus（当利用跳格进入某个链接，或者通过单击或跳格进入某个表单域时）。

当不再执行触发动作时（例如，当访问者的鼠标离开某个导航按钮时），浏览器就会将该标签返回到它的前一个样式，并以动画展示整个过程。

可以以动画形式模拟的属性有：rotate、scale、translate、skew、color、background-color、border-color、border-width、font-size、height、width、letter-spacing、line-height、margin、opacity、padding、word-spacing和定位属性top、left、right、bottom，以及许多其他属性。

transition也需要有供应商前缀才能生效。

CSS transitions的核心是用4个属性控制要以动画展现哪些属性、动画过程要多久、使用什么类型的动画。以及动画开始之前要不要延迟。

• transition-property定义了要以动画形式展现哪些属性。你可以指定一个属性；或者用关键字all，展现发生变化的所有CSS属性；或者利用一个逗号隔开的属性清单来指定多个（但并非全部）属性。
• 可以使用transition-duration属性来指定动画要持续多久才结束。这个属性值以秒或者毫秒为单位。甚至还可以针对每一个要以动画形式展现的属性分别定义时限，这里的时间排列顺序必须与对应属性的排列顺序完全一致。
• 利用transition-timing-function属性控制动画的速度。该属性值可为以下关键字之一：linear、ease、ease-in、ease-out以及ease-in-out，还可以使用一个称作cubic-bezier的值。

如果你没有定义一个定时函数，浏览器就会使用ease方法，它会使动画一开始很慢，中间逐渐加速，最后又逐渐减速，产生一种很有序的变化效果。

• 可以利用transition-delay属性阻止transition立即开始展示动画。

transition-delay也可以给每个属性定义不同的延迟值。时间的排列顺序必须与transition-property中属性的排列顺序完全一致。

有一种快速的方法可以创建transition，它就是transition属性。这个属性将所有其他属性都捆绑在一起了。其用法是，只要列出属性、持续时间、定时函数、延时时间，并用一个空格将它们隔开即可。

你需要列出all或者单个CSS属性值及其持续时间，但定时函数和延迟则是可选的。默认情况下，定时函数为ease-in，并且没有延迟。

如果希望多个（但并非全部）CSS属性中的变化展示动画，可以列出这些transition属性，并以逗号将它们隔开。

3、  animation

CSS3 animation可以从一组属性转变到另一种，再转变到另一组属性，等等。此外，也可以让一个动画重复，或者在有访问者的鼠标经过它时暂停。

CSS3 animation比transition要复杂一些，但它们与一个好处就是不需要触发动画。你可以给:hover状态添加一个动画，使得鼠标经过一个元素时播放该动画，也可以在载入网页时启动某个动画。

创建动画有两个步骤：

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

2)        将动画应用到元素上

定义关键帧的语法如下：

@keyframes animationName {

from {

/* list CSS properties here */

}

to {

/* list CSS properties here */

}

}

它以@keyframes开头，紧接着是一个名称。这个名称就是该动画的名称。随后，当你将动画应用给网页上的某个元素时，最终要用到这个名称。

关键字from和to用来创建起始关键帧（from）和结束关键帧（to）。在每个关键帧中，可以添加一个或者多个CSS属性。

当然，并非仅限于定于两个关键帧。你可以使用百分比值定义多个关键帧。百分比表示该变化在整个动画章应该发生多久。

CSS3 animation的一大缺点在于他们需要特定的供应商前缀。换句话说，需要给每一款浏览器重复编写关键帧。不需要针对IE的供应商前缀-ms-，因为IE 9及其更早的版本根本不支持CSS animation，IE 10则支持美欧供应商前缀的@keyframes语法。

一旦创建完关键帧，动画就准备好了，但是要想让它生效，还需要将它应用给网页上的某个元素上。

• 你可以给网页上任何元素的任何样式添加动画。
• 此外，还可以给伪类应用动画，包括:hover、:active、:target或者:focus。
• 最后，还可以给类样式应用动画，并利用JavaScript，对访问者单击按钮或者一些其他的网页元素做出响应，动态地应用这个类。

为了让一个动画运行，至少需要提供比给初始动画定义的名称，以及动画持续的时长。

animation-name属性只是告诉浏览器要使用哪一个动画

animation-duration属性是设置动画从开始到结束所花的事件

还可以给一个元素应用多个动画。只要列出它们的名称，并以逗号隔开即可。为了给动画定时，只要列出它们所需的时间，并用逗号隔开即可。这个时间的顺序要与动画名称的排列顺序一致。

要设置特定的定时函数来控制动画在整个过程中的速度，可以利用animation-timing-function控制整个动画或者特定的关键帧。

利用animation-delay属性来延迟动画的启动。

animation-iteration-count属性可以设置是否重复动画。如果希望动画无限次数地运行下去，使用关键字infinite。

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

无论让Web浏览器将一个动画运行多少次，一旦动画完成，浏览器都会以运行动画之前的初始状态来显示该元素。可以通过animation-fill-mode属性设为forwards，告诉浏览器要将给元素的格式保持为动画结束时的样子。

animation快捷方式。它将animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-fill-mode合并成了一个属性。

你应该根据下列所用的顺序列出属性值：名称、持续时间、计时功能、计数、运行方向、延迟时间以及填充模式。此外，还要确保每个值之间都要用一个空格隔开。其中，实际上只有名称和持续时间是必要的，其他是可选的。

如果想要给一个元素应用多个动画，只要列出要创建动画的属性并以逗号隔开即可。

当然，在实际应用中，还需要使用有供应商前缀的版本。

CSS3中还包括了另一个动画的属性：animation-play-state，用来控制动画的播放。它只接受这两个关键字：running或者paused。但是，使用CSS时，实际上只有一种方法能够应用它，即用一个伪类。

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

1、  给表格定义样式

• 添加padding。

对于表格而言，padding是在表格单元里的内容周围添加空间。

你可以对表格的标题或表格单元标签设定padding，但是不能给<table>标签本身设定padding。

• 调整垂直对齐和水平对齐

要控制内容在表格单元内的位置，可以利用text-align和vertical-align属性。

text-align可以被继承。

vertical-align属性不会被继承，因此只能把它用在直接应用到<th>和<td>标签的样式上。

• 创建边框

在格式化<table>标签的样式中设置border时，它只会给表格添加边框，而不会给任何表格单元添加边框。

对表格单元设置border时，会在表格单元之间留下一条明显可见的间隙。

l         CSS提供了border-spacing属性来控制这条间隙。将该属性应用到表格本身，并且如果希望删除在单元格之间显示的那部分空格，设置border-spacing: 0;

l         消除双边框，在格式化表格的样式中设定border-collapse: collapse;

如果将border-collapse属性值设为collapse，border-spacing就将不起作用。

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

如果将border-collapse属性值设为collapse，那么浏览器将会忽略为表格单元设置的所有border-radiu。

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