css的全教程

1.什么是css3？
在编写CSS3样式时，不同的浏览器可能需要不同的前缀。它表示该CSS属性或规则尚未成为W3C标准的一部分，是浏览器的私有属性，虽然目前较新版本的浏览器都是不需要前缀的，但为了更好的向前兼容前缀还是少不了的。

2.css3边框 圆角效果border-radius
3.css3边框 阴影 box-shadow
box-shadow是向盒子添加阴影。支持添加一个或者多个。
box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

注意：inset 可以写在参数的第一个或最后一个，其它位置是无效的。
阴影模糊半径与阴影扩展半径的区别
阴影模糊半径：此参数可选，其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；
阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；
X轴偏移量和Y轴偏移量可以设置为负数
box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
4.css3边框 为边框应用图片border-image

5.CSS3颜色 颜色之RGBA
RGB是一种色彩标准，是由红®、绿(G)、蓝(B)的变化以及相互叠加来得到各式各样的颜色。RGBA是在RGB的基础上增加了控制alpha透明度的参数。

background-color:rgba(120,100,10,0.5)

6.CSS3颜色 渐变色彩
CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial)。由于不同的渲染引擎实现渐变的语法不同，这里我们只针对线性渐变的 W3C 标准语法来分析其用法，其余大家可以查阅相关资料。W3C 语法已经得到了 IE10+、Firefox19.0+、Chrome26.0+ 和 Opera12.1+等浏览器的支持。


background-image:linear-gradient(to left,red,orange,yellow,green,blue,indigo,violet)
第一个参数省略时，默认“to bottom”，第二个和第三个参数，表示颜色的起始点和结束点，可以有多个颜色值。
径向渐变
background:radial-gradient(center,shape,size,start-color,…,last-color)
center:渐变起点的位置，可以分为百分比，默认是图形的正中心
shape:渐变的形状，ellipse表示椭圆形，circle表示圆形。默认为ellipse，如果元素形状为正方形的元素，则ellipse和cirlce显示一样。
size:渐变的大小，即渐变到哪里停止，它有4个值。closest-side:最近边；fathest-side:最远边；closest-corner:最近角；fathest-corner:最远角。
默认是fathest-corner

background-image:radial-gradient(red, yellow,green)
径向渐变-颜色结点不均匀分布
background-image:radial-gradient(red 5%,yellow 15%,green 60%)

设置形状
它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。
background-image:radial-gradient(circle, red, yellow,green)

不同尺寸大小关键字的使用
background-image:radial-gradient(closest-side at 60% 55%,red, yellow,black)
background-image:radial-gradient(farthest-side at 60% 55%,red, yellow,black)
closest-corner
farthest-corner

重复的径向渐变
background-image:repeating-radial-gradient(red, yellow 10%,green 15%)

7.CSS3文字与字体text-overflow与word-wrap

但是text-overflow只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号的效果，还须定义强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果，代码如下：

text-overflow:ellipsis; 
overflow:hidden; 
white-space:nowrap; 

8.css3文字与字体 嵌入字体@font-face

@font-face {font-family : 字体名称;src : 字体文件在服务器上的相对或绝对路径;
}

这样设置之后，就可以像使用普通字体一样在(font-*)中设置字体样式。

p {font-size :12px;font-family : "My Font";/*必须项，设置@font-face中font-family同样的值*/
}

@font-face {font-family: "MOOC Font";src: url("http://www.imooc.com/Amaranth-BoldItalic.otf");
}
.demo {width: 340px;padding: 30px;    color: #566F89;background: #000;font-size:58px;font-family: "MOOC Font";
}

9.css3文字与字体 文体阴影text-shadow
text-shadow：X-Offset Y-Offset blur color
X-Offset：表示阴影的水平偏移距离，其值为正值时阴影向右偏移，反之向左偏移；
Y-Offset：是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移，反之向上偏移；
Blur：是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将Blur值设置为0；
Color：是指阴影的颜色，其可以使用rgba色。
10.css3背景 background-origin
设置元素背景图片的原始起始位置
background-origin ： border-box | padding-box | content-box;
参数分别是表示背景图片是从边框，还是内边距(默认值)，或者是内容区域开始显示。

.wrap {width:220px; border:20px dashed #000; padding:20px; font-weight:bold; color:#000; background:#ccc url(http://static.mukewang.com/static/img/logo_index.png) no-repeat; background-origin: content-box;position: relative;
}
.wrap span { position: absolute; left:0; top:0;
}
.content {height:80px; border:1px solid #333;
}

11.css3背景 background-clip
background-clip ： border-box | padding-box | content-box | no-clip

12.css3背景 background-size
background-size: auto | <长度值> | <百分比> | cover | contain
1、auto：默认值，不改变背景图片的原始高度和宽度；
2、<长度值>：成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放；
3、<百分比>：0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值，当设置一个值时同上；
4、cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器；
5、contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。
13.css3选择器 属性选择器

a[class^=“icon”]{background: green;color:#fff;
}
a[href$=“pdf”]{background: orange;color: #fff;
}
a[title*=“more”]{background: blue;color: #fff;
}

14.css3结构性伪类选择器—root
:root选择器，从字面上我们就可以很清楚的理解是根选择器，他的意思就是匹配元素E所在文档的根元素。在HTML文档中，根元素始终是。

:root {background:orange;
}

15.css3结构性伪类选择器—not
:not选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。就拿form元素来说，比如说你想给表单中除submit按钮之外的input元素添加红色边框，CSS代码可以写成：

form {width: 200px;margin: 20px auto;
}
div {margin-bottom: 20px;
}
input:not([type="submit"]){border:1px solid red;
}

16.css3结构性伪类选择器—empty
:empty选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。

p{background: orange;min-height: 30px;
}
p:empty {display: none;
}​

css3结构性伪类选择器—target
:target选择器称为目标选择器，用来匹配文档(页面)的url的某个标志符的目标元素。我们先来上个例子，然后再做分析。

<h2><a href="#brand">Brand</a></h2>
<div class="menuSection" id="brand">content for Brand
</div>
.menuSection{display: none;
}
:target{/*这里的:target就是指id="brand"的div对象*/display:block;
}

就像上面的例子，#brand与后面的id=“brand"是对应的，当同一个页面上有很多的url的时候你可以取不同的名字，只要#号后对的名称与id=”"中的名称对应就可以了。

除此之外还可以用如下的方式：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<title>结构性伪类选择器—target</title>
<link href="style.css" rel="stylesheet" type=