SS3 @font-face 规则

以前CSS3的版本，网页设计师不得不使用用户计算机上已经安装的字体。

使用CSS3，网页设计师可以使用他/她喜欢的任何字体。

当你发现您要使用的字体文件时，只需简单的将字体文件包含在网站中，它会自动下载给需要的用户。

您所选择的字体在新的CSS3版本有关于@font-face规则描述。

您"自己的"的字体是在 CSS3 @font-face 规则中定义的。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

Internet Explorer 9+, Firefox, Chrome, Safari, 和 Opera 支持 WOFF (Web Open Font Format) 字体.

Firefox, Chrome, Safari, 和 Opera 支持 .ttf(True Type字体)和.otf(OpenType)字体字体类型）。

Chrome, Safari 和 Opera 也支持 SVG 字体/折叠.

Internet Explorer 同样支持 EOT (Embedded OpenType) 字体.

注意： Internet Explorer 8 以及更早的版本不支持新的 @font-face 规则。

使用您需要的字体

在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。

如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称 (myFirstFont)：

实例

<style> @font-face{font-family:myFirstFont; src:url(sansation_light.woff);}div{font-family:myFirstFont;}</style>

使用粗体文本

您必须添加另一个包含粗体文字的@font-face规则：

实例

@font-face{font-family:myFirstFont; src:url(sansation_bold.woff); font-weight:bold;}

该文件"Sansation_Bold.ttf"是另一种字体文件，包含Sansation字体的粗体字。

浏览器使用这一文本的字体系列"myFirstFont"时应该呈现为粗体。

这样你就可以有许多相同的字体@font-face的规则。

CSS3 字体描述

下表列出了所有的字体描述和里面的@font-face规则定义：

提示：

• normal

• condensed

• ultra-condensed

• extra-condensed

• semi-condensed

• expanded

• semi-expanded

• extra-expanded

• ultra-expanded

• normal

• italic

• oblique

可选。定义字体的样式。默认是 "normal"。

• normal

• bold

• 100

• 200

• 300

• 400

• 500

• 600

• 700

• 800

• 900

可选。定义字体的粗细。默认是 "normal"。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

先,我们来看一下什么是瀑布流布局效果,比如电商网站 蘑菇街

原理图:

在一个大盒子里，放置多个小盒子，小盒子的大小可以不一致，长短不一样，呈现一种瀑布流的效果。

使用CSS3S实现只需要如下4步:

1. 准备图片素材

2. 书写相应HTML结构

3. 了解CSS 多栏(Multi-column) 属性

4. 使用CSS 多栏属性完成瀑布流布局

理了工作中用过的CSS3属性。

选择器

• value1~value2

p~ul 选择p元素里面的ul

• [attribute^=value]

a[src^="https"]	选择其 src 属性值以 "https" 开头的每个 <a> 元素

• [attribute$=value]

a[src$=".pdf"]	选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素

• [attribute*=value]

a[src*="abc"]选择其 src 属性中包含 "abc" 子串的每个 <a> 元素

• :first-of-type

p:first-of-type	选择属于其父元素的首个 <p> 元素的每个 <p> 元素

• :last-of-type

p:last-of-type选择属于其父元素的最后 <p> 元素的每个 <p> 元素

• :only-of-type

p:only-of-type选择属于其父元素唯一的 <p> 元素的每个 <p> 元素

• :only-child

p:only-child选择属于其父元素的唯一子元素的每个 <p> 元素

• :nth-child(n)

p:nth-child(2)选择属于其父元素的第二个子元素的每个 <p> 元素

• :nth-last-child(n)

p:nth-last-child(2)同上，从最后一个子元素开始计数

• :nth-of-type(n)

p:nth-of-type(2)选择属于其父元素第二个 <p> 元素的每个 <p> 元素

• :nth-last-of-type(n)

p:nth-last-of-type(2)	同上，但是从最后一个子元素开始计数

• :last-child

p:last-child选择属于其父元素最后一个子元素每个 <p> 元素

• :root

:root	选择文档的根元素

• :empty

p:empty	选择没有子元素的每个 <p> 元素（包括文本节点）

• :target

#news:target选择当前活动的 #news 元素

• :enabled

input:enabled	选择每个启用的 <input> 元素

• :disabled

input:disabled选择每个禁用的 <input> 元素

• :checked

input:checked选择每个被选中的 <input> 元素

• :not(selector)

:not(p)选择非 <p> 元素的每个元素

• ::selection

::selection选择被用户选取的元素部分

动画 animation

@keyframes 让开发者通过指定动画中特定时间点必须展现的关键帧样式，来控制CSS动画的中间环节

animation: name duration timing-function delay iteration-count direction;
animation-name	规定需要绑定到选择器的 keyframe 名称。。
animation-duration	规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function	规定动画的速度曲线。
animation-delay	规定在动画开始之前的延迟。
animation-iteration-count	规定动画应该播放的次数。
animation-direction	规定是否应该轮流反向播放动画。

• @keyframes animation-name {keyframes-selector {css-styles;}}

animationname 定义动画的名称
keyframes-selector 动画时长的百分比。合法的值：0-100%from（与 0% 相同）to（与 100% 相同） 
css-styles 必需。一个或多个合法的 CSS 样式属性

• animation-fill-mode

- none 默认值，回到初始状态
- forwards 当动画完成后，保持最后一个属性值
- both 根据animation-direction轮流应用forwards和backwards规则
- backwards 在 animation-delay所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。

• animation-play-state

- running 播放
- paused 暂停

2D/3D 转换属性

• 2D变形（translate）
• translate 第一个参数指定X轴的位移，第二个参数指定Y轴的位移

translateX 指定X轴的位移
translateY 指定Y轴的位移
translateZ 指定Z轴的位移
translate3D 第一个参数指定X轴的位移, 第二个参数指定Y轴的位移, 第三个参数指定Z轴的位移

• 3D变形（transform）
• translate 位移
• rotate 旋转

rotate3D(): 3D旋转，必须指定四个参数，前3个参数分别表示旋转的方向x y z, 第4个参数表示旋转的角度;
rotateX(): 指定X轴的旋转角度;
rotateY(): 指定Y轴的旋转角度;
rotateZ(): 指定Z轴的旋转角度;

• scale 缩放

scale(x,y) 定义 2D 缩放转换。 
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX 通过设置 X 轴的值来定义缩放转换。 
scaleY 通过设置 Y 轴的值来定义缩放转换。 
scaleZ 通过设置 Z 轴的值来定义 3D 缩放转换

• skew 斜切