简单自学web前端——CSS3新特性

CSS3新特性

　　css3中增添了很多新的选择器，以及阴影设计和很多样式设计，在此记录下希望对各位初学css3的同学有用，如果有错误可以指出来，大家共同学习。
　　

1、新增加的选择器
（1）属性选择器
[att*=val]{}
[att^=val]{}
[att$=val]{}
att代表属性，可以是id、name、class、herf等等。
如果这里的att表示id,这三个分别表示为
id包含val的标签
id以val开头的标签
id以val结尾的标签
这样就可以通过自己起的属性名字，来同时修改很多。

（2）伪元素选择器
类选择器我们可以随意的起名字，伪类选择器是css中已经定义好的，比如a：link的选择器。
伪元素选择器针对css中已经定义好的伪元素使用的选择器。
注意类选择器、伪类选择器、伪元素选择器是不同的。
格式：     选择器：伪元素{}    选择器.类名：伪元素{}

1）first-line伪元素选择器
用于向某个元素中的第一行文字使用的样式
例如：  h1：first-line{color：red}    表示h1标签的第一行文字的颜色为红色。
2）first-letter伪元素选择器
用于向某个元素中的首单词或者第一个字使用的样式
3）before
用于在某个元素之前插入一些元素，可以插入文字或者图片。
插入内容的话用content属性来定义
例如：  h1：before{content："标题："}  表示在h1标签前面加上 标题：这两个字。
4）after
用于在某个元素之后插入一些元素，可以插入文字或者图片。
插入图片，例如： h1：after{content：url("")}
before和after这两个选择器很重要，会经常用到！！！

（3）结构性伪类选择器
1）root选择器
将样式绑定到页面的根元素中
格式： root：{}
2）not选择器
相对某个结构元素式样样式，但是排除这个结构元素下面的子结构元素让它不使用这个样式
格式： 例如：body*：not（h1）{}
即：body内的所有元素都使用这个css，但h1元素除外。
3）empty
指定当元素中的内容为空时使用的样式
格式： 例如：p：empty{}   当p标签里的内容为空时使用
一般用于table表格，某个格子为空时，给它设置一个颜色。
4）target
用于选取当前活动的目标元素，突出显示活动的 HTML 锚。

（4）选择器
1）first-child选择器
单独指定第一个子元素的样式
例如：  li：first-child{}
2）last-child选择器
单独指定最后一个子元素的样式
3）nth-child（n）
单独指定第n个字元素的样式
nth-child（odd）指定第奇数个子元素的样式
nth-child（even）指定第偶数个子元素的样式

这几个很好用，可以用于ul、ol、li、table等，很灵活很方便！！！

4）nth-last-child（）
上面那些倒着数
5）nth-child（An+B）
循环使用样式
A表示每次循环中共包括几种样式，B表示指定的样式在循环中的位置，即第几种。
例如：
tr：nth-child（4n+1）{color：red;}
tr：nth-child（4n+2）{color：green;}
tr：nth-child（4n+3）{color：yellow;}
tr：nth-child（4n+4）{color：blue;}
很好用的！！！

（5）UI元素状态伪类选择器
就是指定的样式只有当元素处于某种状态下时才能起作用。
1）hover              鼠标移动到元素时      例子：input[type="text"]:hover{}
2）active             指定元素被激活时
3）focus              主要是文本框获得焦点并进行文字输入时
4）enabled            元素处于可用状态
5）disabled           元素处于不可用状态
6）read-only          元素处于只读状态
7）read-write         元素处于不只读状态
8）checked            单选多选选取状态
9）default            默认的单选多选状态
10）indeterminate     没有选中状态

2、新属性
（1）文字阴影
text-shadow： length length length color
分别是阴影离开文字的横向距离、纵向距离、模糊半径、阴影颜色。
（2）在页面上显示服务端的字体
@face-family{
font-family： web Font;  //声明使用的是服务端字体
src：url（）;            //字体的相对路径
}
（3）块状元素并列显示
display：inline-block;
默认情况下使用inline-block并列显示的元素的垂直对齐方式是底部对齐，
为了实现顶部对齐，给div样式加入vertical-align：top属性。

3、变形动画功能
这个功能很重要，在许多网页中都可以用得到，包括旋转、移动、缩放、扭曲、渐变等等，
css3中实现方法很简单，而且实现效果很好。
有很多浏览器可能多某些功能还不兼容，所以要在属性前面加上前缀属性：
谷歌、Opera：-webkit-
火狐：-moz-
IE：-ms-

变形功能
（1）transform功能
1）旋转 rotate
transform：rotate（角度）      单位是deg
rotate（x, y） 使元素在x轴和y轴上同时旋转
rotate(x)    使元素只在x轴上旋转
rotate（y）   使元素只在y轴上旋转
2）缩放 scale
transform：scale（值）         值：0.5、1.5这样的数值
scale（x, y） 使元素在x轴和y轴上同时缩放
scaleX(x)    使元素只在x轴上缩放
scaleY（y）   使元素只在y轴上缩放
3）倾斜扭曲 skew
transform：skew（角度, 角度）    单位是deg
skew（x, y）  使元素在x轴和y轴上同时倾斜扭曲
skewX（x）    使元素只在x轴上倾斜扭曲
skewY（y）    使元素只在y轴上倾斜扭曲
4）移动  translate
transform：translate（值）       值：移动的距离
translate（x, y） 使元素在x轴和y轴上同时移动
translate（x）    使元素只在x轴上移动
translate（y）    使元素只在y轴上移动
5）对一个元素使用多个变形的方法
使用方法：
transform：方法1  方法2  方法3;
例子：
.block:hover{
transform: translate(300px, 300px) rotate(30deg);
}
当鼠标放到这个div上时，div先在x轴y轴分别移动300px、300px，然后旋转30deg

动画功能
transition功能支持从一个属性值平滑到另一个属性值。
animations功能支持通过关键帧的指定来在页面上产生更复杂的动画效果。
1）transition功能
css中transition允许css的属性值在一定的时间区间内平滑的过度这种效果，
可以在鼠标移动、点击、获得焦点等等时触发。
语法： transition：property  duration  trming-function  delay
分别代表：
执行变换的属性：
none         没有属性获得过度效果
all          所有
prooperty    定义应用过度效果的css属性名，以逗号隔开。
变换延续的时间   单位s
变换的速率变化
ease         逐渐变慢（默认值）
linear       匀速
ease-in      加速
ease-out     减速
ease-in-out  先加速后减速
变换的延迟时间    单位s
例子：
div{
width:500px;
height:500px;
background-color: #000;
transition:background 5s linear;
}
div:hover{
background-color: #fff;
}
这个div当鼠标放上去时，背景颜色将在5s内匀速的由黑色变成白色。

2）animations功能
用法：以下例子来自（w3school）
//先申明一个关键帧集合名称
@keyframes myfirst
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
//div调用这个关键帧集合名称
div
{
width:100px;
height:100px;
animation:myfirst 5s;    //四个属性：名称、延续时间、变换速率、循环次数
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}
这个功能有可能不兼容所以都加上浏览器前缀。

这个动画功能真的很好用，可以实现许多炫酷的动画！！而且很简单方便！！
以上如果有错误可以指出来，大家共同学习。