css3选择器教辅，boder-images教辅；背景与渐变，字体；

CSS选择器教辅

css权重----
行内（1000） > id（100） > 类,伪类（10） >元素 ,伪元素（1） > *（0）

frist-child:父元素首个子元素：
列子如下：
first-child列子

常用的选择器：
常用选择器
:only-chid选择器匹配属于其父元素的唯一子元素的每个元素
:only-of-type选择器匹配属于其父元素的特定类型的唯一子元素的每个元素
only-chid和only-of-type的区别是：例如 div:only-child(父元素只能有一个儿子且他的儿子必须是div)和div:only-of-type (父元素可以有多个儿子，但是他的儿子中只能有一个div)

否定选择器（:not）:not(Element/Selecter)选择器匹配非指定元素/选择器的每个元素
语法格式：父元素：not（子元素/子选择器）
兼容性：IE9+、Firefox、Chorme、Safari、opera

a:not(:last-of-type){border-right:1px solid red;}表示最后一个红色右边框不要

—伪元素—
css伪元素用于向(某些选择器)设置(特殊效果)
语法格式：
元素：：伪元素

1. ：：first-line
   根据伪元素中的样式对(某一个元素)的（第一行文本）进行格式化
   说明：只能用于块级元素

---

2.::first-letter
用于向文本的首字母设置特殊样式
说明：同样只能用于块级元素

3.：：before
在元素的内容之前插入新的内容
说明：常用“content”配合使用；
特点：
1、第一个子元素
2、行级元素
3、内容用过conten填写入
4、支持所有css属性
5、标签中找不到对应标签，可以在浏览器查看F12开发者模式

boder-images教辅
border-images

vh,vw解释；
web常用单位

背景与渐变
1）background-size:设定背景图片的大小。
2）值可以是百分数或者数值或者关键字:cover contain.
3）只设定一个值第二个值默认为auto
4）cover:等比缩放以充满整个容器。
5）contain：将图片等比缩放至某一边紧贴容器边缘为止!

1.线性渐变-从上到下（默认）
background: linear-gradient(color-stop1,color-stop2,…);

2.线性渐变-从左到右（direction方向：left/right）：
background: -webkit-linear-gradient(begin-direction,color-stop1,color-stop2,…);
background: -moz-linear-gradient(end-direction,color-stop1,color-stop2,…);
background: -o-linear-gradient(end-direction,color-stop1,color-stop2,…);
background: linear-gradient(to end-direction,color-stop1,color-stop2,…);

3.线性渐变-对角（level 水平方向：left/right，vertical竖直方向：top/bottom）：
background: -webkit-linear-gradient(begin-level begin-vertical,color-stop1,color-stop2,…);
background: -moz-linear-gradient(end-level end-vertical,color-stop1,color-stop2,…);
background: -o-linear-gradient(end-level end-vertical,color-stop1,color-stop2,…);
background: linear-gradient(to end-level end-vertical,color-stop1,color-stop2,…);

，字体链接：
http://file.mukewang.com/class/assist/253/3661251/CSS3文本与字体%28教辅%29.pdf

字体创建链接

CSS3 @font-face的字体格式
1、TrueType（.ttf）格式：
.ttf字体是Windows和Mac的最常见的字体，是一种RAW（写入式）格式，因此它不为网站优化。

2、OpenType（.otf）格式：
.otf字体被认为是一种原始的字体格式，其内置在TrueType的基础上，所以也提供了更多的功能。（IE浏览器不兼容）

3、Web Open Font Format（.woff）格式：
.woff字体是Web字体中最佳格式，它是一个开放的TrueType/OpenType的压缩版，同时也支持元数据包的分离

4、Embedded Open Type（.eot）格式：
.eot字体是IE专用字体，可以从TrueType创建此格式字体
兼容性：IE4+

5、SVG（.svg）格式：
.svg字体是基于SVG字体渲染的一种格式

CSS3获取特殊字体网址：
https://www.fontsquirrel.com/tools/webfont-generator
使用步骤：先在网页中上传字体文件。然后勾选最后一个EXPERT…
选择 EOT Compressed（压缩版字体）和SVG
然后下载。
下载完成后需要把文件名更改一致。