初始CSS3
什么是CSS3？
CSS3是CSS2的升级版本，3只是版本号，它在CSS2.1的基础上增加了很多强大的新功能。 目前主流浏览器chrome、safari、firefox、opera、甚至360都已经支持了CSS3大部分功能了，IE10以后也开始全面支持CSS3了。
在编写CSS3样式时，不同的浏览器可能需要不同的前缀。它表示该CSS属性或规则尚未成为W3C标准的一部分，是浏览器的私有属性，虽然目前较新版本的浏览器都是不需要前缀的，但为了更好的向前兼容前缀还是少不了的。
CSS3能做什么？
选择器、圆角效果、块阴影与文字阴影、色彩、渐变效果、个性化字体、多背景图、边框背景图、变形处理、多栏布局、媒体查询（针对不同屏幕分辨率，应用不同的样式）
边框、颜色、文字字体、背景相关的样式
- border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */ 不要以为border-radius的值只能用px单位，你还可以用百分比或者em，但兼容性目前还不太好。
- box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
注意：inset 可以写在参数的第一个或最后一个，其它位置是无效的。
以上的语法的介绍，就这么简单，如果添加多个阴影，只需用逗号隔开即可。如：
.box_shadow{
box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset;
}
-
border-image的语法：
52e2201a0001b1e004720260.jpg - background-color:rgba(100,120,60,0.5);
- 颜色渐变：background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);
第一个参数省略时，默认为“180deg”，等同于“to bottom”。
第二个和第三个参数，表示颜色的起始点和结束点，可以有多个颜色值。 - CSS3文字与字体 text-overflow 与 word-wrap
但是text-overflow只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号的效果，还须定义强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果，代码如下：
text-overflow:clip(表示剪切)|ellipsis(表示显示省略标记);
overflow:hidden; //(规定段落中的文本不进行换行)overflow 属性规定当内容溢出元素框时发生的事情。
white-space:nowrap; //(规定段落中的文本不进行换行)white-space 属性设置如何处理元素内的空白
同时，word-wrap也可以用来设置文本行为，当前行超过指定容器的边界时是否断开转行。
word-wrap:normal(默认)|break-word(内容将在边界处换行);
normal为浏览器默认值，break-word设置在长单词或 URL地址内部进行换行，此属性不常用，用浏览器默认值即可。
- 嵌入字体@font-face
@font-face {
font-family : 字体名称;
src : 字体文件在服务器上的相对或绝对路径;
}
- text-shadow可以用来设置文本的阴影效果。
text-shadow: X-Offset Y-Offset blur color;
Blur：是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将Blur值设置为0； - background:url(xx.jpg) 10px 20px no-repeat;
- background-origin 元素背景图片的原始起始位置
background-origin ： border-box | padding-box | content-box;
需要注意的是，如果背景不是no-repeat，这个属性无效，它会从边框开始显示。 - background-clip ： border-box | padding-box | content-box | no-clip
- background-size: auto | <长度值> | <百分比> | cover | contain
1、auto：默认值，不改变背景图片的原始高度和宽度；
2、<长度值>：成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放；
3、<百分比>：0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值，当设置一个值时同上；
4、cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器；
5、contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。 - multiple backgrounds
CSS3选择器(上)
-
属性选择器56653eba0001b07004610215.jpg
- CSS3 结构性伪类选择器—root
:root选择器，从字面上我们就可以很清楚的理解是根选择器，他的意思就是匹配元素E所在文档的根元素。在HTML文档中，根元素始终是<html>。 - CSS3 结构性伪类选择器—not
:not选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。就拿form元素来说，比如说你想给表单中除submit按钮之外的input元素添加红色边框，CSS代码可以写成
input:not([type="submit"]){
border:1px solid red;
}
- CSS3 结构性伪类选择器—empty
:empty选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。 - CSS3 结构性伪类选择器—target
:target选择器称为目标选择器，用来匹配文档(页面)的url的某个标志符的目标元素。我们先来上个例子，然后再做分析
HTML代码
<h2><a href="#brand">Brand</a></h2>
<div class="menuSection" id="brand">
content for Brand
</div>
CSS代码：
.menuSection{
display: none;
}
:target{/*这里的:target就是指id="brand"的div对象*/
display:block;
}
1、具体来说，触发元素的URL中的标志符通常会包含一个#号，后面带有一个标志符名称，上面代码中是：#brand
2、：target就是用来匹配id为“brand”的元素（id="brand"的元素）,上面代码中是那个div元素。
- CSS3 结构性伪类选择器—first-child
“:first-child”选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。 - CSS3 结构性伪类选择器—last-child
不同的是“:last-child”选择器选择的是元素的最后一个子元素。例如，需要改变的是列表中的最后一个“li”的背景色，就可以使用这个选择器，
ul>li:last-child{background:blue;} - CSS3 结构性伪类选择器—nth-child(n)
“:nth-child(n)”选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd、even)，但参数n的起始值始终是1，而不是0。也就是说，参数n的值为0时，选择器将选择不到任何匹配的元素。 - CSS3 结构性伪类选择器—nth-last-child(n)
“:nth-last-child(n)”选择器和前面的“:nth-child(n)”选择器非常的相似，只是这里多了一个“last”，所起的作用和“:nth-child(n)”选择器有所区别，从某父元素的最后一个子元素开始计算，来选择特定的元素。 - CSS3 first-of-type选择器
“:first-of-type”选择器类似于“:first-child”选择器，不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。 - CSS3 nth-of-type(n)选择器
“:nth-of-type(n)”选择器和“:nth-child(n)”选择器非常类似，不同的是它只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不单单是同一种类型的子元素时，使用“:nth-of-type(n)”选择器来定位于父元素中某种类型的子元素是非常方便和有用的。在“:nth-of-type(n)”选择器中的“n”和“:nth-child(n)”选择器中的“n”参数也一样，可以是具体的整数，也可以是表达式，还可以是关键词。 - CSS3 last-of-type选择器
“:last-of-type”选择器和“:first-of-type”选择器功能是一样的，不同的是他选择是父元素下的某个类型的最后一个子元素。 - CSS3 nth-last-of-type(n)选择器
“:nth-last-of-type(n)”选择器和“:nth-of-type(n)”选择器是一样的，选择父元素中指定的某种子元素类型，但它的起始方向是从最后一个子元素开始，而且它的使用方法类似于上节中介绍的“:nth-last-child(n)”选择器一样。 - CSS3 only-child选择器
“:only-child”选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。也就是说，匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素。 - CSS3 only-of-type选择器
CSS3选择器(下)
- CSS3选择器 :enabled选择器
在Web的表单中，有些表单元素有可用（“:enabled”）和不可用（“:disabled”）状态，比如输入框，密码框，复选框等。在默认情况之下，这些表单元素都处在可用状态。那么我们可以通过伪选择器“:enabled”对这些表单元素设置样式。 - CSS3选择器 :disabled选择器
- CSS3选择器 :checked选择器
- CSS3选择器 ::selection选择器
“::selection”伪元素是用来匹配突出显示的文本(用鼠标选择文本时的文本)。浏览器默认情况下，用鼠标选择网页文本是以“深蓝的背景，白色的字体”显示的，不过在Firefox浏览器还需要添加前缀::-moz-selection - CSS3选择器 :read-only选择器
“:read-only”伪类选择器用来指定处于只读状态元素的样式。简单点理解就是，元素中设置了“readonly=’readonly’” - CSS3选择器 :read-write选择器
“:read-write”选择器刚好与“:read-only”选择器相反，主要用来指定当元素处于非只读状态时的样式。 - CSS3选择器 ::before和::after
::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常和"content"配合使用，使用的场景最多的就是清除浮动。
CSS3变形与动画
- CSS3变形--旋转 rotate()
- CSS3中的变形--扭曲 skew()
这与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变元素的形状。skew()函数不会旋转，而只会改变元素的形状。 - CSS3中的变形--缩放 scale()
- CSS3中的变形--位移 translate()
- CSS3中的变形--矩阵 matrix()
- CSS3中的变形--原点 transform-origin
- CSS3中的动画--过渡属性 transition-property
transition-property:指定过渡或动态模拟的CSS属性
transition-duration:指定完成过渡所需的时间
transition-timing-function:指定过渡函数
transition-delay:指定开始出现的延迟时间
transition: background-color .5s ease .1s; - Keyframes介绍
Keyframes被称为关键帧，其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。
@keyframes changecolor{
0%{
background: red;
}
100%{
background: green;
}
}
div:hover {
animation: changecolor 5s ease-out .2s;
}
animation-name:move;
animation-duration: 10s;
animation-timing-function:ease;
animation-delay:2s;
animation-iteration-count:infinite;
animation-iteration-count:5;//如果取值为infinite，动画将会无限次的播放
animation-direction:alternate;
1、normal是默认值，如果设置为normal时，动画的每次循环都是向前播放；
2、另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。
animation-play-state:running和paused;
animation-fill-mode:none、forwards、backwords和both
CSS3的布局样式
- CSS3 多列布局——Columns
columns：<column-width> || <column-count>
column-width: auto | <length>
column-count：auto | <integer>
column-gap: normal || <length> //列间距，默认值，默值为1em（如果你的字号是px，其默认值为你的font-size值）。
column-rule: 2px dotted green; //列边框(竖线)
column-span: none | all //跨列设置 -
CSS3 盒子模型
box-sizing: content-box | border-box | inherit
5365d98000018fa606460416.jpg - CSS3 伸缩布局（一）
伸缩布局详情看这里
CSS3引入了一种新的布局模式——Flexbox布局，即伸缩布局盒模型（Flexible Box），用来提供一个更加有效的方式制定、调整和分布一个容器里项目布局，即使它们的大小是未知或者动态的，这里简称为Flex。
1.创建一个flex容器
任何一个flexbox布局的第一步是需要创建一个flex容器。为此给元素设置display属性的值为flex。在Safari浏览器中，你依然需要添加前缀-webkit，
.flexcontainer{ display: -webkit-flex; display: flex; }
2.Flex项目显示
Flex项目是Flex容器的子元素。他们沿着主要轴和横轴定位。默认的是沿着水平轴排列一行。你可以通过flex-direction来改变主轴方向修改为column，其默认值是row。
3.Flex项目列显示
.flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; }
4.Flex项目移动到顶部
如何将flex项目移动到顶部，取决于主轴的方向。如果它是垂直的方向通过align-items设置；如果它是水平的方向通过justify-content设置。
.flexcontainer{ -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: flex-start; justify-content: flex-start; }
.flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: flex-start; align-items: flex-start; }
5.Flex项目移到左边
flex项目称动到左边或右边也取决于主轴的方向。如果flex-direction设置为row，设置justify-content控制方向；如果设置为column，设置align-items控制方向。
6.Flex项目移动右边
7.水平垂直居中
在Flexbox容器中制作水平垂直居中是微不足道的。设置justify-content或者align-items为center。另外根据主轴的方向设置flex-direction为row或column。
Media Queries——媒体类型
在彻底的了解Media Queries我们需要了解其中的两个重要部分，第一个是媒体类型，第二个是媒体特性。下面的内容我们简单的来了解这两个部分：
一、媒体类型
媒体类型（Media Type）在CSS2中是一个常见的属性，也是一个非常有用的属性，可以通过媒体类型对不同的设备指定不同的样式。
在CSS2中常碰到的就是all(全部)、screen(屏幕)、print(页面打印或打印预览模式)，其实媒体类型远不止这三种，W3C总共列出了10种媒体类型。
二、媒体类型的引用方法也有多种，常见的有：link标签、@import和CSS3新增的@media几种：
1、link方法
link方法引入媒体类型其实就是在<link>标签引用样式的时候，通过link标签中的media属性来指定不同的媒体类型。如下所示。
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
2、@import方法
@import可以引用样式文件，同样也可以用来引用媒体类型。@import引入媒体类型主要有两种方式，一种是在样式中通过@import调用另一个样式文件；另一种方法是在<head></head>标签中的<style></style>中引入，但这种使用方法在IE6~7都不被支持，如样式文件中调用另一个样式文件时，就可以指定对应的媒体类型。
@importurl(reset.css) screen;
@importurl(print.css) print;
在<head>中的<style>标签中引入媒体类型方法。
<head>
<style type="text/css">
@importurl(style.css) all;
</style>
</head>
3、@media方法
@media是CSS3中新引进的一个特性，被称为媒体查询。在页面中也可以通过这个属性来引入媒体类型。@media引入媒体类型和@import有点类似也具有两方式。
（1）在样式文件中引用媒体类型：
@media screen {
选择器{/你的样式代码写在这里…/}
}
（2）使用@media引入媒体类型的方式是在<head>标签中的<style>中引用。
<head>
<style type="text/css">
@media screen{
选择器{/你的样式代码写在这里…/}
}
</style>
</head>
三、怎么使用
Media Queries的使用方法如下。
@media 媒体类型and （媒体特性）{你的样式}
注意：使用Media Queries必须要使用“@media”开头，然后指定媒体类型（也可以称为设备类型），随后是指定媒体特性（也可以称之为设备特性）。媒体特性的书写方式和样式的书写方式非常相似，主要分为两个部分，第一个部分指的是媒体特性，第二部分为媒体特性所指定的值，而且这两个部分之间使用冒号分隔。例如：
(max-width: 480px)
- 最大宽度max-width
“max-width”是媒体特性中最常用的一个特性，其意思是指媒体类型小于或等于指定的宽度时，样式生效。如：
@media screen and (max-width:480px){
.ads {
display:none;
}
}
上面表示的是：当屏幕小于或等于480px时,页面中的广告区块（.ads）都将被隐藏。
2.最小宽度min-width
“min-width”与“max-width”相反，指的是媒体类型大于或等于指定宽度时，样式生效。
@media screen and (min-width:900px){
.wrapper{width: 980px;}
}
上面表示的是：当屏幕大于或等于900px时，容器“.wrapper”的宽度为980px。
3.多个媒体特性使用
Media Queries可以使用关键词"and"将多个媒体特性结合在一起。也就是说，一个Media Query中可以包含0到多个表达式，表达式又可以包含0到多个关键字，以及一种媒体类型。
当屏幕在600px~900px之间时，body的背景色渲染为“#f5f5f5”，如下所示。
@media screen and (min-width:600px) and (max-width:900px){
body {background-color:#f5f5f5;}
}
4.设备屏幕的输出宽度Device Width
在智能设备上，例如iPhone、iPad等，还可以根据屏幕设备的尺寸来设置相应的样式（或者调用相应的样式文件）。同样的，对于屏幕设备同样可以使用“min/max”对应参数，如“min-device-width”或者“max-device-width”。
<link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" />
上面的代码指的是“iphone.css”样式适用于最大设备宽度为480px，比如说iPhone上的显示，这里的“max-device-width”所指的是设备的实际分辨率，也就是指可视面积分辨率。
- not关键词
@media not print and (max-width: 1200px){样式代码}
6.only关键词
<linkrel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" />
四、Responsive设计——meta标签、可视区域meta标签
在实际项目中，为了让Responsive设计在智能设备中能显示正常，也就是浏览Web页面适应屏幕的大小，显示在屏幕上，可以通过这个可视区域的meta标签进行重置，告诉他使用设备的宽度为视图的宽度，也就是说禁止其默认的自适应页面的效果，具体设置如下：
<meta name=”viewport” content=”width=device-width,initial-scale=1.0” />
用户界面的其他属性
- 自由缩放属性resize
resize: none | both | horizontal | vertical | inherit - CSS3外轮廓属性
外轮廓outline在页面中呈现的效果和边框border呈现的效果极其相似，但和元素边框border完全不同，外轮廓线不占用网页布局空间，不一定是矩形，外轮廓是属于一种动态样式，只有元素获取到焦点或者被激活时呈现。
outline: red solid 20px; - CSS生成内容
在Web中插入内容，在CSS2.1时代依靠的是JavaScript来实现。但进入CSS3进代之后我们可以通过CSS3的伪类“:before”，“:after”和CSS3的伪元素“::before”、“::after”来实现，其关键是依靠CSS3中的“content”属性来实现。不过这个属性对于img和input元素不起作用。content配合CSS的伪类或者伪元素，一般可以做以下四件事情：1、none。2、attr。3、url。4、string。
