第一章初识CSS3
第一节什么是CSS3？
CSS3是CSS2的升级版本，3只是版本号，它在CSS2.1的基础上增加了很多强大的新功能。目前主流浏览器chrome、safari、firefox、opera、MicrosoftEdge、IE10+，国内的浏览器如360、QQ等都支持。
在编写CSS3样式时，不同的浏览器可能需要不同的前缀。它表示该CSS属性或规则尚未成为W3C标准的一部分，是浏览器的私有属性，虽然目前较新版本的浏览器都是不需要前缀的，但为了更好的向前兼容前缀还是少不了的。
前缀 浏览器 -webkit chrome和safari -moz firefox -ms IE -o opera
IE党注意了：此课程不支持IE9版本以下，建议使用?chrome、safari、firefox、opera浏览器的最高版本学习本课程。
第二节CSS3能做什么？
CSS3给我们带来了什么好处呢？简单的说，CSS3把很多以前需要使用图片和脚本来实现的效果、甚至动画效果，只需要短短几行代码就能搞定。比如圆角，图片边框，文字阴影和盒阴影，过渡、动画等。
CSS3简化了前端开发工作人员的设计过程，加快页面载入速度。
CSS3都有哪些强大功能呢？各位小伙伴们先来一睹为快吧！
选择器
以前我们通常用class、ID或tagname来选择HTML元素，CSS3的选择器强大的难以置信。它们可以减少在标签中的class和ID的数量更方便的维护样式表、更好的实现结构与表现的分离。
?
圆角效果
以前做圆角通常使用背景图片，或繁琐的元素拼凑，现在很简单了border-radius帮你轻松搞定。
?
块阴影与文字阴影
可以对任意DIV和文字增加投影效果。
?
色彩
CSS3支持更多的颜色和更广泛的颜色定义。新颜色CSS3支持HSL，CMYK，HSLAandRGBA。
?
渐变效果
以前只能用Photoshop做出的图片渐变效果，现在可以用CCS写出来了。IE中的滤镜也可以实现。
?
个性化字体
网页上的字体太单一？使用@Font-Face轻松实现定制字体。
?
多背景图
一个元素上添加多层背景图片。
?
边框背景图
边框应用背景图片。
?
变形处理
你可以对HTML元素进行旋转、缩放、倾斜、移动、甚至以前只能用JavaScript实现的强大动画。
?
多栏布局可以让你不用使用多个div标签就能实现多栏布局。浏览器解释这个属性并生成多栏，让文本实现一个仿报纸的多栏结构。
?
媒体查询
针对不同屏幕分辨率，应用不同的样式。
等等……
很神奇吧！CSS3使代码更简洁、更高效。可以极大的提高工作效率，打造更高级的用户体验。使web应用的界面设计进入一个新的台阶。
第二章边框
第一节圆角效果border-radius
?border-radius：指定每一个圆角。
如果你在border-radius属性中只指定一个值，那么将生成4个圆角。
但是，如果你要在四个角上一一指定，可以使用以下规则：
四个值:第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
三个值:第一个值为左上角,第二个值为右上角和左下角，第三个值为右下角
两个值:第一个值为左上角与右下角，第二个值为右上角与左下角
一个值：四个圆角值相同
使用方法：
border-radius:10px;?/所有角都使用半径为10px的圆角/?
border-radius:5px4px3px2px;?/四个半径值分别是左上角、右上角、右下角和左下角，顺时针/?
不要以为border-radius的值只能用px单位，你还可以用百分比或者em，但兼容性目前还不太好。
1、实心上半圆：
方法：把高度(height)设为宽度（width）的一半，并且只设置左上角和右上角的半径与元素的高度一致（大于也是可以的）。
div{
height:50px;/是width的一半/
width:100px;
background:#9da;
border-radius:50px50px00;/半径至少设置为height的值/
}
2、实心圆：方法：把宽度（width）与高度(height)值设置为一致（也就是正方形），并且四个圆角值都设置为它们值的一半。如下代码：
div{
height:100px;/与width设置一致/
width:100px;
background:#9da;
border-radius:50px;/四个圆角值都设置为宽度或高度值的一半/
}
拓展练习：
实心左半圆怎么实现
实心右半圆怎么实现
三角形怎么实现
第二节阴影box-shadow（一）
box-shadow是向盒子添加阴影。支持添加一个或者多个。
很简单的一段代码，就实现了投影效果，酷毙了。我们来看下语法：
box-shadow:X轴偏移量Y轴偏移量[阴影模糊半径][阴影扩展半径][阴影颜色][投影方式];
参数介绍：
注意：inset可以写在参数的第一个或最后一个，其它位置是无效的。
1、为元素设置外阴影：
示例代码：
.box_shadow{box-shadow:4px2px6px#333333;}
效果：
2、为元素设置内阴影：
示例代码：
.box_shadow{box-shadow:4px2px6px#333333inset;}
效果：
3、添加多个阴影：
以上的语法的介绍，就这么简单，如果添加多个阴影，只需用逗号隔开即可。如：
.box_shadow{
box-shadow:4px2px6px#f00,-4px-2px6px#000,0px0px12px5px#33CC00inset;
}
效果：
拓展练习
1、给一个div盒子添加内阴影与外阴影,内阴影为红色，外阴影为绿色
第三节阴影box-shadow（二）
1、阴影模糊半径与阴影扩展半径的区别
阴影模糊半径：此参数可选，其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；
阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；
2、X轴偏移量和Y轴偏移量值可以设置为负数
X轴偏移量为负数：
效果图：
Y轴偏移量为负数：
效果图：
第四节为边框应用图片border-image
顾名思义就是为边框应用背景图片，它和我们常用的background属性比较相似。例如：
background:url(xx.jpg)10px20pxno-repeat;
但是又比背景图片复杂一些。
想象一下：一个矩形，有四个边框。如果应用了边框图片，图片该怎么分布呢？图片会自动被切割分成四等分。用于四个边框。
可以理解为它是一个切片工具，会自动把用做边框的图片切割。怎么切割呢？为了方便理解，做了一张特殊的图片，由9个矩形（7070像素）拼成的一张图（210210像素），并标注好序号，是不是像传说中的九宫图，如下：
我们把上图当作边框图片来应用一下，看一看是什么效果
根据border-image的语法：
#border-image{
background:#F4FFFA;
width:210px;height:210px;border:70pxsolid#ddd;border-image:url(borderimg.png)70repeat
}
效果：
从序号可以看出div的四个角分别对应了背景图片的四个角。而2,4,6,8被重复。5在哪？因为是从四周向中心切割图片的所以，5显示不出来。而在chrome浏览器中5是存在的，下图的样子：
repeat的意思就是重复，目前因为是刚好被整除，效果看不出来。如果改下DIV的宽高，再来看重复的效果：
边角部分为裁掉了，可见repeat就是一直重复，然后超出部分剪裁掉，而且是居中开始重复。
Round参数：Round可以理解为圆满的铺满。为了实现圆满所以会压缩（或拉伸）；
#border-image{
width:170px;
height:170px;
border:70pxsolid;
border-image:url(borderimg.png)70round;
}
效果：
可见图片被压扁了。
Stretch很好理解就是拉伸，有多长拉多长。有多远“滚”多远。
border-image:url(borderimg.png)70stretch
看一下效果：
2,4,6,8分别被拉伸显示。
注意：Chrome下，中间部分也会被拉伸，webkit浏览器对于round属性和repeat属性似乎没有区分，显示效果是一样的。
Firefox26.0下是可以准确区分的。
第三章颜色
第一节颜色之RGBA
RGB是一种色彩标准，是由红(R)、绿(G)、蓝(B)的变化以及相互叠加来得到各式各样的颜色。RGBA是在RGB的基础上增加了控制alpha透明度的参数。
语法：
color：rgba(R,G,B,A)
以上R、G、B三个参数，正整数值的取值范围为：0-255。百分数值的取值范围为：0.0%-100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。A为透明度参数，取值在0~1之间，不可为负值。
代码示例：
background-color:rgba(100,120,60,0.5);
?
第二节渐变色彩
CSS3?Gradient?分为线性渐变(linear)和径向渐变(radial)。由于不同的渲染引擎实现渐变的语法不同，这里我们只针对线性渐变的W3C标准语法来分析其用法，其余大家可以查阅相关资料。W3C语法已经得到了IE10+、Firefox19.0+、Chrome26.0+和Opera12.1+等浏览器的支持。
这一小节我们来说一下线性渐变：
?
参数：
第一个参数:指定渐变方向，可以用“角度”的关键词或“英文”来表示：
（单击图片可放大）
第一个参数省略时，默认为“180deg”，等同于“to?bottom”。
第二个和第三个参数，表示颜色的起始点和结束点，可以有多个颜色值。
background-image:linear-gradient(toleft,red,orange,yellow,green,blue,indigo,violet);
第四章文字与字体
第一节text-overflow与word-wrap
text-overflow用来设置是否使用一个省略标记（...）标示对象内文本的溢出。
语法：
但是text-overflow只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号的效果，还须定义强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果，代码如下：
text-overflow:ellipsis;?
overflow:hidden;?
white-space:nowrap;?
同时，word-wrap也可以用来设置文本行为，当前行超过指定容器的边界时是否断开转行。
语法：
normal为浏览器默认值，break-word设置在长单词或?URL地址内部进行换行，此属性不常用，用浏览器默认值即可。
第二节嵌入字体@font-face
@font-face能够加载服务器端的字体文件，让浏览器端可以显示用户电脑里没有安装的字体。
语法：
@font-face{
font-family:字体名称;
src:字体文件在服务器上的相对或绝对路径;
}
?
这样设置之后，就可以像使用普通字体一样在（font-）中设置字体样式。
比如：
p{
font-size:12px;
font-family:"MyFont";
/必须项，设置@font-face中font-family同样的值/
}
第三节文本阴影text-shadow
text-shadow可以用来设置文本的阴影效果。
语法：
text-shadow:X-OffsetY-Offsetblurcolor;
X-Offset：表示阴影的水平偏移距离，其值为正值时阴影向右偏移，反之向左偏移；??????
Y-Offset：是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移，反之向上偏移；
Blur：是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将Blur值设置为0；
Color：是指阴影的颜色，其可以使用rgba色。
比如，我们可以用下面代码实现设置阴影效果。
text-shadow:01px1px#fff
?
第五章背景
第一节background-origin
设置元素背景图片的原始起始位置。
语法：
background-origin：border-box|padding-box|content-box;
参数分别表示背景图片是从边框，还是内边距（默认值），或者是内容区域开始显示。
效果如下：
需要注意的是，如果背景不是no-repeat，这个属性无效，它会从边框开始显示。
第二节background-clip
用来将背景图片做适当的裁剪以适应实际需要。
语法：
background-clip：border-box|padding-box|content-box|no-clip
参数分别表示从边框、或内填充，或者内容区域向外裁剪背景。no-clip表示不裁切，和参数border-box显示同样的效果。backgroud-clip默认值为border-box。
第三节background-size
设置背景图片的大小，以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩。
语法：
background-size:auto|<长度值>|<百分比>|cover|contain
取值说明：
1、auto：默认值，不改变背景图片的原始高度和宽度；
2、<长度值>：成对出现如200px50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放；
3、<百分比>：0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值，当设置一个值时同上；
4、cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器；
5、contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。
提示：大家可以在右边的编辑窗口输入自己的代码尝试不同取值的效果。
第四节multiplebackgrounds
多重背景，也就是CSS2里background的属性外加origin、clip和size组成的新background的多次叠加，缩写时为用逗号隔开的每组值；用分解写法时，如果有多个背景图片，而其他属性只有一个（例如background-repeat只有一个），表明所有背景图片应用该属性值。
语法缩写如下：
background：[background-color]|[background-image]|[background-position][/background-size]|[background-repeat]|[background-attachment]|[background-clip]|[background-origin],...
可以把上面的缩写拆解成以下形式：
background-image:url1,url2,...,urlN;
background-repeat:repeat1,repeat2,...,repeatN;
backround-position:position1,position2,...,positionN;
background-size:size1,size2,...,sizeN;
background-attachment:attachment1,attachment2,...,attachmentN;
background-clip:clip1,clip2,...,clipN;
background-origin:origin1,origin2,...,originN;
background-color:color;
注意：
1、用逗号隔开每组background的缩写值；
2、如果有size值，需要紧跟position并且用"/"隔开；
3、如果有多个背景图片，而其他属性只有一个（例如background-repeat只有一个），表明所有背景图片应用该属性值。
1、background-color?只能设置一个。
举例：
有三张单独的图片：
第五节制作导航菜单综合练习题
小伙伴们，根据所学知识，使用CSS3实现下图的导航菜单效果
1、制作导航圆角
提示：使用border-radius实现圆角
2、制作导航立体风格
提示：使用box-shadow实现立体风格
3、制作导航分隔线
提示：使用渐变与伪元素制作
4、删除第一个和最后一个导航分隔线
提示：使用伪元素删除第一个和最后一个分隔线
第六章选择器（一）
第一节属性选择器
??在HTML中，通过各种各样的属性可以给元素增加很多附加的信息。例如，通过id属性可以将不同div元素进行区分。
??在CSS2中引入了一些属性选择器，而CSS3在CSS2的基础上对属性选择器进行了扩展，新增了3个属性选择器，使得属性选择器有了通配符的概念，这三个属性选择器与CSS2的属性选择器共同构成了CSS功能强大的属性选择器。
?实例展示：
html代码：
我链接的是PDF文件
我类名是icon
我的title是more
css代码??
a[class^=icon]{
background:green;
color:#fff;
}
a[href$=pdf]{
background:orange;
color:#fff;
}
a[title=more]{
background:blue;
color:#fff;
}
第二节结构性伪类选择器—root
:root选择器，从字面上我们就可以很清楚的理解是根选择器，他的意思就是匹配元素E所在文档的根元素。在HTML文档中，根元素始终是。
示例演示：
通过“:root”选择器设置背景颜色
HTML代码：
:root选择器的演示
CSS代码：
:root{
background:orange;
}
第三节结构性伪类选择器—not
:not选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。就拿form元素来说，比如说你想给表单中除submit按钮之外的input元素添加红色边框，CSS代码可以写成：
form{
width:200px;
margin:20pxauto;
}
div{
margin-bottom:20px;
}input:not([type="submit"]){
border:1pxsolidred;
}
相关HTML代码：
TextInput:
PasswordInput:
?
第四节结构性伪类选择器—empty
:empty选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。
示例显示：
比如说，你的文档中有三个段落p元素，你想把没有任何内容的P元素隐藏起来。我们就可以使用“:empty”选择器来控制。
HTML代码：
我是一个段落
?
CSS代码：
p{
background:orange;
min-height:30px;
}
p:empty{
display:none;
}?
第五节结构性伪类选择器—first-child
“:first-child”选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。
示例演示
通过“:first-child”选择器定位列表中的第一个列表项，并将序列号颜色变为红色。
HTML代码：
- Link1
- Link2
- link3
CSS代码：
ol>li{
font-size:20px;
font-weight:bold;
margin-bottom:10px;
}
ola{
font-size:16px;
font-weight:normal;
}
ol>li:first-child{
color:red;
}
第六节结构性伪类选择器—last-child
“:last-child”选择器与“:first-child”选择器作用类似，不同的是“:last-child”选择器选择的是元素的最后一个子元素。例如，需要改变的是列表中的最后一个“li”的背景色，就可以使用这个选择器，
ul>li:last-child{background:blue;}
示例演示
在博客的排版中，每个段落都有15px的margin-bottom，假设不想让博客“post”中最后一个段落不需要底部的margin值，可以使用“:last-child”选择器。
HTML代码：
第一段落
第二段落
第三段落
第四段落
第五段落
?
CSS代码：
.post{
padding:10px;
border:1pxsolid#ccc;
width:200px;
margin:20pxauto;
}
.postp{
margin:0015px0;
}
.postp:last-child{
margin-bottom:0;
}
第七节结构性伪类选择器—nth-child(n)
“:nth-child(n)”选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd、even)，但参数n的起始值始终是1，而不是0。也就是说，参数n的值为0时，选择器将选择不到任何匹配的元素。
经验与技巧:当“:nth-child(n)”选择器中的n为一个表达式时，其中n是从0开始计算，当表达式的值为0或小于0的时候，不选择任何匹配的元素。如下表所示：
案例演示
?通过“:nth-child(n)”选择器，并且参数使用表达式“2n”，将偶数行列表背景色设置为橙色。
HTML代码：
- item1
- item2
- item3
- item4
- item5
- item6
- item7
- item8
- item9
- item10
?
CSS代码：
ol>li:nth-child(2n){
background:orange;
}
第八节结构性伪类选择器—target
:target选择器称为目标选择器，用来匹配文档(页面)的url的某个标志符的目标元素。我们先来上个例子，然后再做分析。
示例展示
点击链接显示隐藏的段落。
HTML代码：
Brand
contentforBrand
CSS代码：
.menuSection{
display:none;
}:target{/这里的:target就是指id="brand"的div对象/
display:block;
}
演示结果：
分析：
1、具体来说，触发元素的URL中的标志符通常会包含一个#号，后面带有一个标志符名称，上面代码中是：#brand
2、：target就是用来匹配id为“brand”的元素（id="brand"的元素）,上面代码中是那个div元素。
多个url（多个target）处理：
就像上面的例子，#brand与后面的id="brand"是对应的，当同一个页面上有很多的url的时候你可以取不同的名字，只要#号后对的名称与id=""中的名称对应就可以了。如下面例子：html代码：?
Brand
contentforBrand
Brand
contentforjake
Brand
contentforaron
css代码：
#brand:target{
background:orange;
color:#fff;
}#jake:target{
background:blue;
color:#fff;
}#aron:target{
background:red;
color:#fff;
}
上面的代码可以对不同的target对象分别设置不的样式。
第九节结构性伪类选择器—nth-last-child(n)
“:nth-last-child(n)”选择器和前面的“:nth-child(n)”选择器非常的相似，只是这里多了一个“last”，所起的作用和“:nth-child(n)”选择器有所区别，从某父元素的最后一个子元素开始计算，来选择特定的元素。
案例演示
选择列表中倒数第五个列表项，将其背景设置为橙色。
HTML代码：
- item1
- item2
- item3
- item4
- item5
- item6
- item7
- item8
- item9
- item10
- item11
- item12
- item13
- item14
- item15
?
CSS代码：
ol>li:nth-last-child(5){
background:orange;
}
第十节first-of-type选择器
“:first-of-type”选择器类似于“:first-child”选择器，不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。
示例演示：
通过“:first-of-type”选择器，定位div容器中的第一个p元素（p不一定是容器中的第一个子元素），并设置其背景色为橙色。
HTML代码：
我是一个块元素，我是.wrapper的第一个子元素
我是一个段落元素，我是不是.wrapper的第一个子元素，但是他的第一个段落元素
我是一个段落元素
我是一个块元素
CSS代码：
.wrapper{
width:500px;
margin:20pxauto;
padding:10px;
border:1pxsolid#ccc;
color:#fff;
}
.wrapper>div{
background:green;
}
.wrapper>p{
background:blue;
}/我要改变第一个段落的背景为橙色/
.wrapper>p:first-of-type{
background:orange;
}
演示结果：
第十一节nth-of-type(n)选择器
“:nth-of-type(n)”选择器和“:nth-child(n)”选择器非常类似，不同的是它只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不单单是同一种类型的子元素时，使用“:nth-of-type(n)”选择器来定位于父元素中某种类型的子元素是非常方便和有用的。在“:nth-of-type(n)”选择器中的“n”和“:nth-child(n)”选择器中的“n”参数也一样，可以是具体的整数，也可以是表达式，还可以是关键词。
示例演示
通过“:nth-of-type(2n)”选择器，将容器“div.wrapper”中偶数段数的背景设置为橙色。
HTML代码：
我是一个Div元素
我是一个段落元素
我是一个Div元素
我是一个段落
我是一个Div元素
我是一个段落
我是一个Div元素
我是一个段落
我是一个Div元素
我是一个段落
我是一个Div元素
我是一个段落
我是一个Div元素
我是一个段落
我是一个Div元素
我是一个段落
CSS代码：
.wrapper>p:nth-of-type(2n){
background:orange;
}
演示结果：
第十二节last-of-type选择器
“:last-of-type”选择器和“:first-of-type”选择器功能是一样的，不同的是他选择是父元素下的某个类型的最后一个子元素
通过“:last-of-type”选择器，将容器“div.wrapper”中最后一个段落元素背景设置为橙色
（提示：这个段落不是“div.wrapper”容器的最后一个子元素）。
HTML代码：
我是第一个段落
我是第二个段落
我是第三个段落
我是第一个Div元素
我是第二个Div元素
我是第三个Div元素
CSS代码：
.wrapper>p:last-of-type{
?background:orange;
}
演示结果：
?
第十三节nth-last-of-type(n)选择器
“:nth-last-of-type(n)”选择器和“:nth-of-type(n)”选择器是一样的，选择父元素中指定的某种子元素类型，但它的起始方向是从最后一个子元素开始，而且它的使用方法类似于上节中介绍的“:nth-last-child(n)”选择器一样。
示例演示
通过“:nth-last-of-type(n)”选择器将容器“div.wrapper”中的倒数第三个段落背景设置为橙色。
HTML代码：
我是第一个段落
我是第二个段落
我是第三个段落
我是第四个段落
我是第五个段落
我是一个Div元素
我是第六个段落
我是第七个段落
CSS代码：
.wrapper>p:nth-last-of-type(3){
background:orange;
}
演示结果：
第十四节only-child选择器
“:only-child”选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。也就是说，匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素。
示例演示
通过“:only-child”选择器，来控制仅有一个子元素的背景样式，为了更好的理解，我们这个示例通过对比的方式来向大家演示。
HTML代码：
我是一个段落
我是一个段落
我是一个段落
CSS代码：
.postp{
background:green;
color:#fff;
padding:10px;
}
.postp:only-child{
background:orange;
}
演示结果：
第十五节only-of-type选择器
“:only-of-type”选择器用来选择一个元素是它的父元素的唯一一个相同类型的子元素。这样说或许不太好理解，换一种说法。“:only-of-type”是表示一个元素他有很多个子元素，而其中只有一种类型的子元素是唯一的，使用“:only-of-type”选择器就可以选中这个元素中的唯一一个类型子元素。
示例演示
通过“:only-of-type”选择器来修改容器中仅有一个div元素的背景色为橙色。
HTML代码：
我是一个段落
我是一个段落
我是一个段落
我是一个Div元素
我是一个Div
我是一个段落
CSS代码：
.wrapper>div:only-of-type{
background:orange;
}
演示结果：
???
第七章选择器（二）
第一节:enabled选择器
在Web的表单中，有些表单元素有可用（“:enabled”）和不可用（“:disabled”）状态，比如输入框，密码框，复选框等。在默认情况之下，这些表单元素都处在可用状态。那么我们可以通过伪选择器“:enabled”对这些表单元素设置样式。
示例演示
通过“:enabled”选择器，修改文本输入框的边框为2像素的红色边框，并设置它的背景为灰色。
HTML代码:
?
??TextInput:
??
?
??
??TextInput:
??
?
?
CSS代码：
div{
?margin:20px;
}
input[type="text"]:enabled{
?background:#ccc;
?border:2pxsolidred;
}
结果演示
第二节:disabled选择器
“:disabled”选择器刚好与“:enabled”选择器相反，用来选择不可用表单元素。要正常使用“:disabled”选择器，需要在表单元素的HTML中设置“disabled”属性。
示例演示
通过“:disabled”选择器，给不可用输入框设置明显的样式。
HTML代码：
CSS代码
form{
margin:50px;
}
div{
margin-bottom:20px;
}
input{
background:#fff;
padding:10px;
border:1pxsolidorange;
border-radius:3px;
}
input[type="text"]:disabled{
background:rgba(0,0,0,.15);
border:1pxsolidrgba(0,0,0,.15);
color:rgba(0,0,0,.15);
}
结果演示：
第三节:checked选择器
在表单元素中，单选按钮和复选按钮都具有选中和未选中状态。（大家都知道，要覆写这两个按钮默认样式比较困难）。在CSS3中，我们可以通过状态选择器“:checked”配合其他标签实现自定义样式。而“:checked”表示的是选中状态。
示例演示：
通过“:checked”状态来自定义复选框效果。
HTML代码
√
我是选中状态
√
我是未选中状态
CSS代码：
form{
border:1pxsolid#ccc;
padding:20px;
width:300px;
margin:30pxauto;
}
.wrapper{
margin-bottom:10px;
}
.box{
display:inline-block;
width:20px;
height:20px;
margin-right:10px;
position:relative;
border:2pxsolidorange;
vertical-align:middle;
}
.boxinput{
opacity:0;
position:absolute;
top:0;
left:0;
}
.boxspan{
position:absolute;
top:-10px;
right:3px;
font-size:30px;
font-weight:bold;
font-family:Arial;
-webkit-transform:rotate(30deg);
transform:rotate(30deg);
color:orange;
}
input[type="checkbox"]+span{
opacity:0;
}
input[type="checkbox"]:checked+span{
opacity:1;
}
结果演示
第四节::selection选择器
“::selection”伪元素是用来匹配突出显示的文本(用鼠标选择文本时的文本)。浏览器默认情况下，用鼠标选择网页文本是以“深蓝的背景，白色的字体”显示的，效果如下图所示：
从上图中可以看出，用鼠标选中“专注IT、互联网技术”、“纯干货、学以致用”、“没错、这是免费的”这三行文本中，默认显示样式为：蓝色背景、白色文本。
有的时候设计要求,不使用上图那种浏览器默认的突出文本效果，需要一个与众不同的效果，此时“::selection”伪元素就非常的实用。不过在Firefox浏览器还需要添加前缀。
示例演示:
通过“::selection”选择器，将Web中选中的文本背景变成红色，文本变成绿色。
HTML代码：
“::selection”伪元素是用来匹配突出显示的文本。浏览器默认情况下，选择网站文本是深蓝的背景，白色的字体，
CSS代码：
::-moz-selection{
background:red;
color:green;
}
::selection{
background:red;
color:green;
}
结果演示：
注意：
1、IE9+、Opera、GoogleChrome以及Safari中支持::selection选择器。
2、Firefox支持替代的::-moz-selection。
第五节:read-only选择器
“:read-only”伪类选择器用来指定处于只读状态元素的样式。简单点理解就是，元素中设置了“readonly=’readonly’”
示例演示
通过“:read-only”选择器来设置地址文本框的样式。
HTML代码：
姓名:
地址:
CSS代码：
form{
width:300px;
padding:10px;
border:1pxsolid#ccc;
margin:50pxauto;
}
form>div{
margin-bottom:10px;
}
input[type="text"]{
border:1pxsolidorange;
padding:5px;
background:#fff;
border-radius:5px;
}
input[type="text"]:-moz-read-only{
border-color:#ccc;
}
input[type="text"]:read-only{
border-color:#ccc;
}
结果演示
第六节:read-write选择器
“:read-write”选择器刚好与“:read-only”选择器相反，主要用来指定当元素处于非只读状态时的样式。
示例演示
使用“:read-write”选择器来设置不是只读控件的文本框样式。
HTML代码：
姓名:
地址:
CSS代码：
form{
width:300px;
padding:10px;
border:1pxsolid#ccc;
margin:50pxauto;
}
form>div{
margin-bottom:10px;
}
input[type="text"]{
border:1pxsolidorange;
padding:5px;
background:#fff;
border-radius:5px;
}
input[type="text"]:-moz-read-only{
border-color:#ccc;
}
input[type="text"]:read-only{
border-color:#ccc;
}
input[type="text"]:-moz-read-write{
border-color:#f36;
}
input[type="text"]:read-write{
border-color:#f36;
}
结果演示：
第七节::before和::after
::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常和"content"配合使用，使用的场景最多的就是清除浮动。
.clearfix::before,
.clearfix::after{
content:".";
display:block;
height:0;
visibility:hidden;
}
.clearfix:after{clear:both;}
.clearfix{zoom:1;}
当然可以利用他们制作出其他更好的效果，比如右侧中的阴影效果，也是通过这个来实现的。
关键代码分析：
.effect::before,.effect::after{
???content:"";
???position:absolute;
???z-index:-1;
???-webkit-box-shadow:0020pxrgba(0,0,0,0.8);
???-moz-box-shadow:0020pxrgba(0,0,0,0.8);
???box-shadow:0020pxrgba(0,0,0,0.8);
???top:50%;
???bottom:0;
???left:10px;
???right:10px;
???-moz-border-radius:100px/10px;
???border-radius:100px/10px;
}
上面代码作用在class名叫.effect上的div的前（before）后(after)都添加一个空元素，然后为这两个空元素添加阴影特效。
第八节切换背景图像综合练习题
同学们，根据所学知识，使用CSS3知识，实现背景图片的切换效果（不依赖js，点击小图切换大的背景图）
给每个列表定义不同的背景颜色
提示：使用结构伪类选择器:nth-of-type()
设置缩略图外形效果
提示：使用伪元素::after制作圆形效果
1、给每个缩略图设置不同的图片
提示：使用伪结构选择器:nth-of-type()，并且配合::after
2、给每个缩略图添加透明度蒙板效果
提示：使用伪类选择器::before给缩略图添加蒙板效果
3、鼠标悬浮在缩略图上时，修改缩略图上蒙板的透明度
提示：通过:hover和::before配合修改opacity的值为0
4、点击缩略图，切换背景图片
提示：通过目标选择器:target进行背景图片的切换
5、控制不是被点击图片的层级大小，让其不显示
提示：通过“否定选择器:not()”和“目标选择器:target”来控制不是被切换的背景图像不显示
第八章变形与动画（一）
第一节变形--旋转rotate()
旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转。如下图所示：
HTML代码：
CSS代码：
.wrapper{
width:200px;
height:200px;
border:1pxdottedred;
margin:100pxauto;
}
.wrapperdiv{
width:200px;
height:200px;
background:orange;
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
}
演示结果
?
拓展练习：
在右侧CSS编辑器中第20-22行，补充正确的代码，将文本旋转回到原来水平位置。
效果图如下：
第二节变形--扭曲skew()
扭曲skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变元素的形状。skew()函数不会旋转，而只会改变元素的形状。
Skew()具有三种情况：
1、skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）；
第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则值为0，也就是Y轴方向上无斜切。
2、skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）；
3、skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）
示例演示：
通过skew（）函数将长方形变成平行四边形。
HTML代码：
我变成平形四边形
CSS代码：
.wrapper{
width:300px;
height:100px;
border:2pxdottedred;
margin:30pxauto;
}
.wrapperdiv{
width:300px;
height:100px;
line-height:100px;
text-align:center;
color:#fff;
background:orange;
-webkit-transform:skew(45deg);
-moz-transform:skew(45deg)?
transform:skew(45deg);
}
演示结果
?
第三节变形--缩放scale()
缩放scale()函数?让元素根据中心原点对对象进行缩放。
缩放scale具有三种情况：
1、?scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）
例如：
div:hover{
-webkit-transform:scale(1.5,0.5);
?-moz-transform:scale(1.5,0.5)
transform:scale(1.5,0.5);
}
注意：Y是一个可选参数，如果没有设置Y值，则表示X，Y两个方向的缩放倍数是一样的。
2、scaleX(x)元素仅水平方向缩放（X轴缩放）
3、scaleY(y)元素仅垂直方向缩放（Y轴缩放）
HTML代码：
我将放大1.5倍
CSS代码：
.wrapper{
width:200px;
height:200px;
border:2pxdashedred;
margin:100pxauto;
}
.wrapperdiv{
width:200px;
height:200px;
line-height:200px;
background:orange;
text-align:center;
color:#fff;
}
.wrapperdiv:hover{
opacity:.5;
-webkit-transform:scale(1.5);
?-moz-transform:scale(1.5)
transform:scale(1.5);
}
演示结果
注意：?scale()的取值默认的值为1，当值设置为0.01到0.99之间的任何值，作用使一个元素缩小；而任何大于或等于1.01的值，作用是让元素放大。
第四节变形--位移translate()
translate()函数可以将元素向指定的方向移动，类似于position中的relative。或以简单的理解为，使用translate()函数，可以把元素从原来的位置移动，而不影响在X、Y轴上的任何Web组件。
translate我们分为三种情况：
1、translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）
2、translateX(x)仅水平方向移动（X轴移动）
3、translateY(Y)仅垂直方向移动（Y轴移动）
实例演示：通过translate()函数将元素向Y轴下方移动50px,X轴右方移动100px。
HTML代码：
我向右向下移动
CSS代码：
.wrapper{
width:200px;
height:200px;
border:2pxdottedred;
margin:20pxauto;
}
.wrapperdiv{
width:200px;
height:200px;
line-height:200px;
text-align:center;
background:orange;
color:#fff;
-webkit-transform:translate(50px,100px);
?-moz-transform:translate(50px,100px);
transform:translate(50px,100px);
}
演示结果
第五节变形--矩阵matrix()
matrix()?是一个含六个值的(a,b,c,d,e,f)变换矩阵，用来指定一个2D变换，相当于直接应用一个[abcdef]变换矩阵。就是基于水平方向（X轴）和垂直方向（Y轴）重新定位元素,此属性值使用涉及到数学中的矩阵，我在这里只是简单的说一下CSS3中的transform有这么一个属性值，如果需要深入了解，需要对数学矩阵有一定的知识。
示例演示：通过matrix()函数来模拟transform中translate()位移的效果。HTML代码：
CSS代码：
.wrapper{
width:300px;
height:200px;
border:2pxdottedred;
margin:40pxauto;
}
.wrapperdiv{
width:300px;
height:200px;
background:orange;-webkit-transform:matrix(1,0,0,1,50,50);
-moz-transform:matrix(1,0,0,1,50,50);
transform:matrix(1,0,0,1,50,50);
}
演示结果：
第六节变形--原点transform-origin
任何一个元素都有一个中心点，默认情况之下，其中心点是居于元素X轴和Y轴的50%处。如下图所示：
在没有重置transform-origin改变元素原点位置的情况下，CSS变形进行的旋转、位移、缩放，扭曲等操作都是以元素自己中心位置进行变形。但很多时候，我们可以通过transform-origin来对元素进行原点位置改变，使元素原点不在元素的中心位置，以达到需要的原点位置。
transform-origin取值和元素设置背景中的background-position取值类似，如下表所示：
示例展示：
通过transform-origin改变元素原点到左上角，然后进行顺时旋转45度。
HTML代码：
原点在默认位置处
原点重置到左上角
CSS代码：
.wrapper{
width:300px;
height:300px;
float:left;
margin:100px;
border:2pxdottedred;
line-height:300px;
text-align:center;
}
.wrapperdiv{
background:orange;
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
}
.transform-origindiv{
-webkit-transform-origin:lefttop;
transform-origin:lefttop;
}
演示结果：
第七节动画--过渡属性transition-property
早期在Web中要实现动画效果，都是依赖于JavaScript或Flash来完成。但在CSS3中新增加了一个新的模块transition，它可以通过一些简单的CSS事件来触发元素的外观变化，让效果显得更加细腻。简单点说，就是通过鼠标的单击、获得焦点，被点击或对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值。
在CSS中创建简单的过渡效果可以从以下几个步骤来实现：
第一，在默认样式中声明元素的初始状态样式；
第二，声明过渡元素最终状态样式，比如悬浮状态；
第三，在默认样式中通过添加过渡函数，添加一些不同的样式。
CSS3的过度transition属性是一个复合属性，主要包括以下几个子属性：
transition-property:指定过渡或动态模拟的CSS属性
transition-duration:指定完成过渡所需的时间
transition-timing-function:指定过渡函数
transition-delay:指定开始出现的延迟时间
先来看transition-property属性
transition-property用来指定过渡动画的CSS属性名称，而这个过渡属性只有具备一个中点值的属性（需要产生动画的属性）才能具备过渡效果，其对应具有过渡的CSS属性主要有：
HTML:
CSS:
div{
width:200px;
height:200px;
background-color:red;
margin:20pxauto;
-webkit-transition:background-color.5sease.1s;
transition:background-color.5sease.1s;
}
div:hover{
background-color:orange;
}
演示结果:
鼠标移入
鼠标移出
特别注意：当“transition-property”属性设置为all时，表示的是所有中点值的属性。
用一个简单的例子来说明这个问题：
假设你的初始状态设置了样式“width”,“height”,“background”,当你在终始状态都改变了这三个属性，那么all代表的就是“width”、“height”和“background”。如果你的终始状态只改变了“width”和“height”时，那么all代表的就是“width”和“height”。
第八节动画--过渡所需时间transition-duration
transition-duration属性主要用来设置一个属性过渡到另一个属性所需的时间，也就是从旧属性过渡到新属性花费的时间长度，俗称持续时间。
案例演示：
在鼠标悬停（hover）状态下，让容器从直角慢慢过渡到圆角，并让整个动画持续0.5s。
HTML:
CSS:
div{
width:300px;
height:200px;
background-color:orange;
margin:20pxauto;
-webkit-transition-property:-webkit-border-radius;
transition-property:border-radius;
-webkit-transition-duration:.5s;
transition-duration:.5s;
-webkit-transition-timing-function:ease-out;
transition-timing-function:ease-out;
-webkit-transition-delay:.2s;
transition-delay:.2s;
}
div:hover{
border-radius:20px;
}
演示结果：
鼠标移入
鼠标移出
?
第九节动画--过渡函数transition-timing-function
transition-timing-function属性指的是过渡的“缓动函数”。主要用来指定浏览器的过渡速度，以及过渡期间的操作进展情况，其中要包括以下几种函数：
案例展示：
在hover状态下，让容器从一个正方形慢慢过渡到一个圆形，而整个过渡是先加速再减速，也就是运用ease-in-out函数。
HTML代码:
CSS代码:
div{
width:200px;
height:200px;
background:red;
margin:20pxauto;
-webkit-transition-property:-webkit-border-radius;
transition-property:border-radius;
-webkit-transition-duration:.5s;
transition-duration:.5s;
-webkit-transition-timing-function:ease-in-out;
transition-timing-function:ease-in-out;
-webkit-transition-delay:.2s;
transition-delay:.2s;
}
div:hover{
border-radius:100%;
}
演示结果
鼠标移入：
鼠标移出：
第十节动画--过渡延迟时间transition-delay
transition-delay属性和transition-duration属性极其类似，不同的是transition-duration是用来设置过渡动画的持续时间，而transition-delay主要用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行。
有时我们想改变两个或者多个css属性的transition效果时，只要把几个transition的声明串在一起，用逗号（“，”）隔开，然后各自可以有各自不同的延续时间和其时间的速率变换方式。但需要值得注意的一点：第一个时间的值为transition-duration，第二个为transition-delay。
例如：a{?transition:background0.8sease-in0.3,color0.6sease-out0.3;}
示例演示：
通过transition属性将一个200px200px的橙色容器，在鼠标悬浮状态时，过渡到一个300px300px的红色容器。而且整个过渡0.1s后触发，并且整个过渡持续0.28s。
HTML代码:
鼠标放到我的身上来
CSS代码:
.wrapper{
width:400px;
height:400px;
margin:20pxauto;
border:2pxdottedred;
}
.wrapperdiv{
width:200px;
height:200px;
background-color:orange;
-webkit-transition:all.28sease-in.1s;
transition:all.28sease-in.1s;
}
.wrapperdiv:hover{
width:300px;
height:300px;
background-color:red;
}
演示结果
鼠标移入：
鼠标移出：
第九章动画与变形（二）
第一节Keyframes介绍
Keyframes被称为关键帧，其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。
@keyframeschangecolor{
0%{
background:red;
}
100%{
background:green;
}
}
在一个“@keyframes”中的样式规则可以由多个百分比构成的，如在“0%”到“100%”之间创建更多个百分比，分别给每个百分比中给需要有动画效果的元素加上不同的样式，从而达到一种在不断变化的效果。
经验与技巧：在@keyframes中定义动画名称时，其中0%和100%还可以使用关键词from和to来代表，其中0%对应的是from，100%对应的是to。
浏览器的支持情况：
Chrome?和?Safari?需要前缀?-webkit-；Foxfire?需要前缀?-moz-。
案例演示
通过“@keyframes”声明一个名叫“wobble”的动画，从“0%”开始到“100%”结束，同时还经历了一个“40%”和“60%”两个过程。“wobble”动画在“0%”时元素定位到left为100px，背景色为green，然后在“40%”时元素过渡到left为150px,背景色为orange,接着在“60%”时元素过渡到left为75px，背景色为blue，最后“100%”时结束动画，元素又回到起点left为100px处，背景色变为red。
HTML:
鼠标放到我身上
CSS:
@keyframeswobble{
0%{
margin-left:100px;
background:green;
}
40%{
margin-left:150px;
background:orange;
}
60%{
margin-left:75px;
background:blue;
}
100%{
margin-left:100px;
background:red;
}
}
div{
width:100px;
height:100px;
background:red;
color:#fff;
}
div:hover{
animation:wobble5sease.1s;
}
?
第二节调用动画
animation-name属性主要是用来调用?@keyframes?定义好的动画。需要特别注意:animation-name调用的动画名需要和“@keyframes”定义的动画名称完全一致（区分大小写），如果不一致将不具有任何动画效果。
语法：
animation-name:none|IDENT[,none|DENT];
1、IDENT是由?@keyframes?创建的动画名，上面已经讲过了（animation-name调用的动画名需要和“@keyframes”定义的动画名称完全一致）；
2、none为默认值，当值为none时，将没有任何动画效果,这可以用于覆盖任何动画。
注意：需要在Chrome和Safari上面的基础上加上-webkit-前缀，Firefox加上-moz-。
第三节设置动画播放时间
animation-duration主要用来设置CSS3动画播放时间，其使用方法和transition-duration类似，是用来指定元素播放动画所持续的时间长，也就是完成从0%到100%一次动画所需时间。单位：S秒
语法规则
animation-duration: |
|
