CSS3之路

http://www.dowebok.com/demo/2014/98/  animated.css  演示网站

不同浏览器有不同的前缀（较新版本的浏览器不需要前缀，为了向前兼容）

css3简化设计过程，加快页面载入速度

css3强大的功能：

     

                    选择器

                    圆角效果

                    块阴影和文字阴影

                    色彩：支持更广泛的颜色定义

                    渐变效果

                    个性化字体：@Font-Face 定制字体

                    多背景图

                    边框背景图：边框应用背景图片

                    变形处理：旋转、缩放、倾斜、移动、动画等

                    多栏布局

                    媒体 查询

     圆角效果

     border-radius可以向元素添加圆角边框（不仅可以用px单位，还能使用百分比或em，但后两者兼容性还不太好）

          

     给所有角加相同的圆角： border-radius：10px；

     顺序为左上，右上，右下，左下，顺时针：border-radius：5px 4px 3px 2px；

     

      例子： 实心上半圆： 把高度设为宽度的一半，然后border-radius的值至少设置为高度的值

               实心圆：宽高设为一致，四个圆角值都设为他们值的一半

     阴影效果

     box-shadow可以向盒子添加阴影（支持添加一个或者多个）

       box-shadow：x轴偏移量  y轴偏移量  [阴影模糊半径]  [阴影扩展半径]  [阴影颜色]  [阴影方式];

     

     inset只能写在参数的第一个或最后一个。其他位置无效

     常用的阴影效果：#333

     添加多个阴影时用逗号分隔开：box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset;

      text-shadow 只能给文字加阴影。box-shadow，可以给图片加，所有元素都可以加

     阴影模糊半径和阴影扩展半径的区别：模糊半径值只能为正值，为0时表示不具有模糊效果，值越大边缘就越模糊

                                                            扩展半径值可以是正负，正值表示整个阴影扩大，反之则缩小

     x、y轴偏移量可以为负数，负数的话效果为原来相反方向

      边框背景图

     border-image

          

          边框图片： http://img.mukewang.com/52e22a1c0001406e03040221.jpg

            颜色

        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之间，不可为负值。

             渐变颜色

                   Gradient 分为线性渐变(linear)和径向渐变(radial)

                                线性渐变：

                                                  

                                        第一个参数是指定渐变方向：默认为180deg

                                                  

                                        第二和第三个参数表示颜色的起始点和结束点（可以有多个颜色值）：

                                                  background-image:linear-gradient(to left,  red,  orange, yellow, green, blue, indigo, violet);

          省略缩放

           text-overflow 与 word-wrap

                         text-overflow用来设置是否使用一个省略标记（...）表示对象内文本的溢出

                              

                              text-overflow只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号的效果，还须定义强制文本在一行内显示

                                   （white-space:nowrap）及 溢出内容为隐藏（overflow:hidden），只有这样才能实现 溢出文本显示省略号的效果

                              

                              

                                  word-wrap用来设置 文本行为，当前行超过指定容器的边界时是否断开转行

                              

                                   第一个是强制软换行，第二个是强制换行

                    嵌入字体

                    @font-face 能够加载服务器端的字体文件，让浏览器端可以显示用户电脑里没有安装的字体

                                   

                                   这么设置了之后就能像使用普通字体一样设置字体样式

                                   例子：

                                             

                    文本阴影

                    text-shadow 设置文本的阴影效果

                               

                              

X-Offset：表示阴影的水平偏移距离，其值为正值时阴影向右偏移，反之向左偏移；      

Y-Offset：是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移，反之向上偏移；

Blur：是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将Blur值设置为0；

Color：是指阴影的颜色，其可以使用rgba色。

设置背景图片起始位置

                background-origin：

                                                             

                          参数分别表示背景图片是从 边框，还是 内边距（默认值），或者是 内容区域开始显示。

                          如果背景不是no-repeat，这个属性无效，它会从边框开始显示

                    裁剪背景图片适应需要

                         background-clip:

                         

                                    参数分别表示从 边框、或 内填充，或者 内容区域向外裁剪背景。 no-clip表示不裁切，和 参数border-box显示同样的效果。 backgroud-clip默认值为 border-box

                         设置背景图片大小

                         background-size:

                           设置背景图片的大小，以 长度值或 百分比显示，还可以通过 cover和 contain来对图片进行伸缩

                                                                

1、auto：默认值，不改变背景图片的原始高度和宽度；

2、<长度值>：成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来 等比缩放；

3、<百分比>：0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值，当设置一个值时同上；

4、cover：顾名思义为 覆盖，即将背景图片等比缩放以 填满整个容器；

5、contain：容纳，即将背景图片等比缩放至 某一边紧贴容器边缘为止。

     多重背景

               

     属性选择器

     

         

结构伪类选择器

          ：root               匹配元素E所在文档的根元素

          

                    ： not     否定选择器

                    

                    ：empty  空标签选择器

                    

                          ：target     目标选择器，匹配文档（页面）的url的某个标志符的目标元素

                                       常用于href属性

               

                         

          

      ：first-child  选择父元素的第一个子元素的元素E

                         

     ：last-child  选择父元素最后一个子元素E

          

       :nth-child（n）  定位某个父元素的一个或多个特定的子元素

      “n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd、even)，但参数n的起始值始终是1，而不是0。

          也就是说，参数n的值为0时，选择器将选择不到任何匹配的元素。

               

          

         ：nth-last-child(n)      从某父元素的最后一个子元素开始计算

          

            :first-of-type                定位一个父元素下的某个类型的第一个子元素

                    .wrapper > div:first-of-type

             :nth-of-type(n)  

          :last-of-type

               .wrapper > div:last-of-type{

                           background: orange;

                              }

          

            : nth-last-of-type(n)选择器

          ：only-child选择器

                         父元素只有一个子元素，而且只有唯一的一个子元素

          ：only-of-type

                         

      ：enabled选择器和：disabled选择器

     例子：

               input[type="text"]:enabled {

               border: 1px solid #f36;

               box-shadow: 0 0 5px #f36;

                    }

               input[type="text"]:disabled{

               box-shadow: none;

                    }

     ：checked选择器  定义复选框效果

     ：：selection选择器  匹配突出显示的文本（用鼠标选择文本时的文本）

          可用来设置选中文本的颜色等等

          在火狐浏览器需要加前缀 ::-moz-selection

     :read-only选择器    指定处于只读状态元素的样式（元素中设置了readonly=‘readonly’）

        例：          textarea:-moz-read-only{

    border: 1px solid #ccc;

    height: 50px;

    resize: none;

    background: #eee;

} 

        ：read-write选择器      用于指定元素处于非只读状态时的样式

 

      例：          input[type="text"]:read-write{

                                border:2px solid red;

                               }   

          ：：before和：：after  给元素的前面或后面插入内容（常和‘content’配合使用，最多用的是清除浮动）

变形与动画

          变形

                   旋转 rotate（）          在二维空间进行操作 

                         设置一个角度值，指定旋转的幅度。值为正则相对原点中心顺时针旋转，值为负则相对原点中心逆时针旋转

                例如：         .wrapper div{

  width: 300px;

  height: 200px;

  line-height: 200px;

  text-align: center;

  background: green;

  color: #fff;

  -webkit-transform: rotate(-20deg);

  -moz-transform: rotate(-20deg);

  transform:rotate(-20deg);

}

扭曲skew（）  可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜

                         rotate（）只是旋转，不会改变元素形状。skew只是改变元素旋转，不会旋转

                   Skew（）具有三种情况：

                         1、skew（x，y）使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）

                         2、skew（x）     使元素在水平方向扭曲变形（X轴扭曲变形）

                         3、skew（y）     使元素在垂直方向扭曲变形（Y轴扭曲变形）

                                             

.wrapper div {

  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（）具有三种情况：

                         1、Scale（x，y）使元素在水平和垂直方向同时缩放（X轴和Y轴同时 缩放 ）

                         2、Scale（x）     使元素在水平方向 缩放 （X轴 缩放 ）

                         3、Scale（y）     使元素在垂直方向 缩放 （Y轴 缩放 ）

例子：

.wrapper div:hover {

  opacity: .5;

  -webkit-transform: scale(1.5);

  -moz-transform:scale(1.5)

  transform: scale(1.5);

}

                                                  位移  translate（） 让元素向指定方向移动（可以吧元素从原来的位置移动，而不影响在X、Y轴上的任何Web组件）

                                                                                可以指定px或者百分比

     translate（）具有三种情况：

                         1、 translate （x，y）使元素在水平和垂直方向同时 移动 （X轴和Y轴同时 移动 ）

                         2、 translate （x）     使元素在水平方向 移动 （X轴 移动 ）

                         3、 translate （y）     使元素在垂直方向 移动 （Y轴 移动 ）

     例子：

 -webkit-transform: translate(50px,100px);

  -moz-transform:translate(50px,100px);

  transform: translate(50px,100px);

矩阵  matrix（） 是一个含六个值的（a,b,c,d,e,f）变换矩阵，用来指定一个2D变换，相当于直接应用

                         一个[a b c d e f]变换矩阵。就是基于水平方向和处置方向重新定位此元素

        原点  transform-origin  任何一个元素都有一个中心点，默认情况中心点是居于元素X轴和Y轴的50%处

                              css变形进行的旋转、位移、缩放、扭曲等操作都是以元素自己中心位置改变

                         

               

                                                  

.transform-origin div {

  -webkit-transform-origin: left top;

  transform-origin: left top;

}

                        动画

               

                              过渡属性  transition

          

          transition-property属性

               

     例子：       div {

  width: 200px;

  height: 200px;

  background: red;

  margin: 20px auto;

  -webkit-transition-property: width;

  transition-property: width;

  -webkit-transition-duration:.5s;

  transition-duration:.5s;

  -webkit-transition-timing-function: ease-in;

  transition-timing-function: ease-in;

  -webkit-transition-delay: .18s;

      transition-delay:.18s;

}

div:hover {

  width: 400px;

}

                                                  transition-duration  过渡所需时间  主要设置一个属性过渡到另一个属性所需的时间

                                          transition-timing-function  过渡的“缓动函数”    

                                                                                          主要用于指定浏览器的过渡速度，以及过渡期间的操作进展情况

                                                                      

                                        transition-delay  过渡延迟时间(改变元素属性值后多久开始执行)

                                                                      

                                             Keyframes介绍  keyframes被称为关键帧     在CSS3中主要以'@keyframes'开头,后面紧跟着是动画名称加上一对花括号{....}

                                                                                                                              括号中就是一些不同时间段样式规则

                                                                 用于将一段动画分为几个时间段分别设置

                              

                                                                  在一个“@keyframes”中的样式规则可以由多个百分比构成的，如在“0%”到“100%”之间创建更多个百分比，

                                                                                分别给每个百分比中给需要有动画效果的元素加上不同的样式，从而达到一种在不断变化的效果

          

                                                                                 浏览器的支持情况： Chrome 和 Safari 需要前缀 -webkit-；Foxfire 需要前缀 -moz-

                                                                                                                                                     

<div>鼠标放到我身上</div>

                                                                                

@keyframes wobble {

  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: wobble 5s ease .1s;

}

设置为循环效果

-webkit-animation-iteration-count: infinite;     -ms-animation-iteration-count: infinite;     animation-iteration-count: infinite;用这个就可以循环，如果 “infinite”可以改成数字，就是你想循环多少次

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动画播放时间  就是元素播放动画所持续的时间长

                                          

div:hover {

  animation-name: toradius;

  animation-duration: 10s;

  animation-timing-function: ease-in-out;

  animation-delay: .1s;

}

animation-timing-function属性  设置动画播放方式

                                        

例子：     animation-timing-function:ease

animation-delay  动画开始播放时间     和transition-delay属性一样，定义浏览器开始执行动画之前等待的时间

               

                    animation-duration: 10s;

animation-iteration-count  动画播放次数                         

1、其值通常为 整数，但也可以使用带有小数的数字，其默认值为1，这意味着动画将从开始到结束只播放一次。

2、如果取值为 infinite，动画将会无限次的播放。

                                                                                    注意：Chrome或Safari浏览器，需要加入-webkit-前缀！ 

                                                              animation-direction属性  设置动画播放方向

                                                                                              属性值：

1、 normal是默认值，如果设置为normal时，动画的每次循环都是向前播放；

2、另一个值是 alternate，他的作用是，动画播放在 第偶数次向前播放， 第奇数次向反方向播放。

                                                                 animation-play-state属性  设置动画的播放状态

                                                                                               属性值： 其主要有两个值： running和 paused

                                                                                                                   

其中running是其默认值，主要作用就是类似于音乐播放器一样，可以通过paused将正在播放的动画停下来，也可以通过running将暂停的动画重新播放，

这里的重新播放不一定是从元素动画的开始播放，而是从暂停的那个位置开始播放。另外如果暂停了动画的播放，元素的样式将回到最原始设置状态

例如，页面加载时，动画不播放。代码如下：

animation-play-state:paused

animation-fill-mode属性  定义动画开始之前和结束之后发生的操作

                                             属性值：

                                                                      

          在默认情况之下，动画不会影响它的关键帧之外的属性，使用animation-fill-mode属性

可以修改动画的默认行为。简单的说就是告诉动画在第一关键帧上等待动画开始，或者在动画结束时停在最后一个关键帧上

而不回到动画的第一帧上。或者同时具有这两个效果

  布局样式相关

               Columns  多列布局

                                         为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个 多列布局模块。它主要应用在文本的 多列布局方面，

                                                 这种布局在报纸和杂志上都使用了几十年了，但要在Web页面上实现这样的效果还是有相当大的难度，庆幸的是，CSS3的多列布局可以轻松实现

     

语法：

columns：<column-width> || <column-count>

          

     例子：columns: 200px 2;    //显示两栏显示，每栏宽度为200px

                                        Column-width

                                                            

column-width的使用和CSS中的width属性一样，不过不同的是，column-width属性在定义元素列宽的时候，

既可以单独使用，也可以和多列属性中其他属性配合使用。其基本语法如下所示 ；

column-width: auto | <length>

Column-count属性  用来给元素指定想要的列数和允许的最大列数

                         

将列分成四列显示：column-count：4；

Column-gap属性  列间距

                              

        Colunm-rule属性     定义列与列之间的边框宽度、边框样式和边框颜色

                                                                            有点类似常用的border属性。但column-rule是不占用任何空间位置

                                                                           

                                             Column-span  跨列设置  用来定义一个分列元素中的子元素能跨多少列（使莫一子元素不进行分列，横跨所有列）

                                                              

                                             

                                   盒子模型

                                                        CSS中有一种基础设计模式叫盒模型，盒模型定义了Web页面中的元素中如何来解析。CSS中每一个元素都是一个盒模型，包括html和body

                                                                    标签元素。在盒模型中主要包括width、height、border、background、padding和margin这些属性，而且他们之间的层次关系可以相互影响

                                                                      

                                                                      

                                                       CSS3中新增了box-sizing属性，能够事先定义盒型的尺寸解析方式

                                                            box-sizing:content-box | border-box | inherit

                                                            

                                                  伸缩布局         Flexbox布局

                                                       Flexbox布局功能有以下几点：                                                           

第一，屏幕和浏览器窗口大小发生改变也可以灵活调整布局；

第二，可以指定伸缩项目沿着主轴或侧轴按比例分配额外空间（伸缩容器额外空间），从而调整伸缩项目的大小；

第三，可以指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之前、之后或之间；

第四，可以指定如何将垂直于元素布局轴的额外空间分布到该元素的周围；

第五，可以控制元素在页面上的布局方向；

第六，可以按照不同于文档对象模型（DOM）所指定排序方式对屏幕上的元素重新排序。也就是说可以在浏览器渲染中不按照文档流先后顺序重排伸缩项目顺序。

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; }

5、Flex项目移动到左边

flex项目称动到左边或右边也取决于主轴的方向。如果flex-direction设置为row，设置justify-content控制方向；如果设置为column，设置align-items控制方向。

.flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-justify-content: flex-start; justify-content: flex-start; }

6、Flex项目移动到右边

.flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-justify-content: flex-end; justify-content: flex-end; }

7、水平垂直居中

在Flexbox容器中制作水平垂直居中是微不足道的。设置justify-content或者align-items为center。另外根据主轴的方向设置flex-direction为row或column。

.flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; }

8、Flex项目实现自动伸缩

您可以定义一个flex项目，如何相对于flex容器实现自动的伸缩。需要给每个flex项目设置flex属性设置需要伸缩的值。

.bigitem{ -webkit-flex:200; flex:200; }  .smallitem{ -webkit-flex:100; flex:100; }

     Media Queries  媒体类型    使不同的终端设备的使用者有更好的体验（通过CSS3来查询媒体）

                    一、媒体类型

                                        

                                    媒体引用类型          

                                   媒体类型的引用方法也有多种，常见的有： link标签、 @import和CSS3新增的 @media几种：

                                   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" />

  @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>

       @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 （媒体特性）{你的样式}

媒体特性的书写方式和样式的书写方式非常相似，主要分为两个部分，第一个部分指的是媒体特性，

第二部分为媒体特性所指定的值，而且这两个部分之间使用冒号分隔。例如：

(max-width: 480px)

1. 最大宽度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”所指的是设备的实际分辨率，也就是指可视面积分辨率

5、not关键词

使用关键词“not”是用来排除某种制定的媒体类型，也就是用来排除符合表达式的设备。换句话说，not关键词表示对后面的表达式执行取反操作，如：

@media not print and (max-width: 1200px){样式代码}

上面代码表示的是：样式代码将被使用在除打印设备和设备宽度小于1200px下所有设备中

6、only关键词

only用来指定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的。其主要有：支持媒体特性的设备，正常调用样式，此时就当only不存在；表示不支持媒体特性但又支持媒体类型的设备，这样就会不读样式，因为其先会读取only而不是screen；另外不支持Media Queries的浏览器，不论是否支持only，样式都不会被采用。如

<linkrel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" />

Responsive设计

响应式设计要考虑元素布局的秩序，而且还需要做到“有求必应”，那就需要满足以下三个条件： 网站必须建立灵活的网格基础；

引用到网站的图片必须是可伸缩的； 不同的显示风格，需要在Media Queries上写不同的样式

1、流体网格

流体网格是一个简单的网格系统，这种网格设计参考了流体设计中的网格系统，将每个网格格子使用百分比单位来控制网格大小。

这种网格系统最大的好处是让你的网格大小随时根据屏幕尺寸大小做出相对应的比例缩放

2、弹性图片

弹性图片指的是不给图片设置固定尺寸，而是根据流体网格进行缩放，用于适应各种网格的尺寸。而实现方法是比较简单，一句代码就能搞定的事情

img {max-width:100%;}

3、媒体查询

4、分辨率

屏幕分辨简单点说就是用户显示器的分辨率，深一点说，屏幕分辨率指的是用户使用的设备浏览您的Web页面时的显示屏幕的分辨率，比如说智能手机浏览器、移动电脑浏览器、平板电脑浏览器和桌面浏览器的分辨率。Responsive设计利用Media Queries属性针对浏览器使用的分辨率来适配对应的CSS样式。因此屏幕分辨率在Responsive设计中是一个很重要的东西，因为只有知道Web页面要在哪种分辨率下显示何种效果，才能调用对应的样式

5、主要断点          很重要的一个部分

简单的描述就是，设备宽度的临界点。在Media Queries中，其中媒体特性“min-width”和“max-width”对应的属性值就是响应式设计中的断点值。简单点说，就是使用主要断点和次要断点，创建媒体查询的条件。而每个断点会对应调用一个样式文件（或者样式代码）

Responsive布局技巧

在Responsive布局中，可以毫无保留的丢弃：

第一，  尽量少用无关紧要的div；

第二， 不要使用内联元素（inline）；

第三， 尽量少用JS或flash；

第四， 丢弃没用的绝对定位和浮动样式；

第五， 摒弃任何冗余结构和不使用100%设置

重要的：

第一，使用HTML5 Doctype和相关指南；

第二， 重置好你的样式（reset.css）；

第三，一个简单的有语义的核心布局；

第四， 给重要的网页元素使用简单的技巧，比如导航菜单之类元素

使用这些技巧，无非是为了保持你的HTML简单干净，而且在你的页面布局中的关键部分（元素）不要过分的依赖现代技巧来实现，

比如说CSS3特效或者JS脚本。

快速测试的方法： 首先禁掉你页面中所有的样式（以及与样式相关的信息），在浏览器中打开，如果你的内容排列有序，方便阅读，

                              那么你的这个结构不会差到哪里去

Respinsive设计--meta标签

最后还有一个不可或缺的东东，那就是meta标签，可以说，在响应式设计中如果没有这个meta标签，你就是蹩脚的，响应式设计就是空谈。

个meta标签被称为可视区域meta标签，其使用方法如下。

<meta name=”viewport” content=”” />

content属性只要包括以下属性值，用来处理可视区域

为了让Responsive设计在智能设备中能显示正常，也就是浏览Web页面适应屏幕的大小，显示在屏幕上，可以通过这个可视区域的meta标签进行重置，告诉他使用设备的宽度为视图的宽度，也就是说禁止其默认的自适应页面的效果，具体设置如下：

               <meta name=”viewport” content=”width=device-width,initial-scale=1.0” />

               

Responsive设计——不同设备的分辨率设置

1、1024px显屏          

@media screen and (max-width : 1024px) {                   

/* 样式写在这里 */         

}   

     2、800px显屏

                                   

@media screen and (max-width : 800px) {             

/* 样式写在这里 */         

}     

     3、640px显屏

                              

@media screen and (max-width : 640px) {             

/* 样式写在这*/           

}  

    4、iPad横版显屏

@media screen and (max-device-width: 1024px) and (orientation: landscape) {             

/* 样式写在这 */           

}  

    5、iPad竖屏显屏

                              

@media screen and (max-device-width: 768px) and (orientation: portrait) {         

/* 样式写在这 */           

}    

    6、iPhone和Smartphones

                              

@media screen and (min-device-width: 320px) and (min-device-width: 480px) {             

/* 样式写在这 */           

}    

自由缩放属性resize

      为了增强用户体验，CSS3增加了很多新的属性，其中 resize就是一个重要的属性，它允许用户通过 拖动的方式来修改元素的尺寸来 改变元素的大小。

      到目前为止，可以使用overflow属性的任何容器元素

resize属性主要是用来改变元素尺寸大小的，其主要目的是增强用户体验。但使用方法却是极其的简单，先从其语法入手。

resize: none | both | horizontal | vertical | inherit

     CSS3外轮廓属性

外轮廓outline在页面中呈现的效果和边框border呈现的效果极其相似，但和元素边框border完全不同，外轮廓线不占用网页布局空间，不一定是矩形，外轮廓是属于一种动态样式，只有元素获取到焦点或者被激活时呈现

outline属性早在CSS2中就出现了，主要是用来在元素周围绘制一条轮廓线，可以起到突出元素的作用。但是并未得到各主流浏览器的广泛支持，在CSS3中对outline作了一定的扩展，在以前的基础上增加新特性。outline属性的基本语法如下：

outline: ［outline-color］ || [outline-style] || [outline-width] || [outline-offset] || inherit

从语法中可以看出outline和border边框属性的使用方法极其类似。outline-color相当于border-color、outline-style相当于border-style，而outline-width相当于border-width，只不过CSS3给outline属性增加了一个 outline-offset属性，其取值说明如下

CSS生成内容

     css3的伪类“：before”，“：after”和“：：before”、“：：after”

      

      

     perspective属性设置从多远的距离观看这个三D变化，值越小表示靠的越近

                         一般设置为1000px 2000px左右

transform-style属性 规定如何在 3D 空间中呈现被嵌套的元素

               属性值： flat  子元素不保留3D位置

                             preserve-3d子元素将保留3D位置

当使用内边距padding时候会导致盒子被撑大，css3提供了一个属性防止这个情况发生

               -moz-box-sizing: border-box; /*Firefox3.5+*/

               -webkit-box-sizing: border-box; /*Safari3.2+*/

               -o-box-sizing: border-box; /*Opera9.6*/

               -ms-box-sizing: border-box; /*IE8*/

               box-sizing: border-box; /*W3C标准(IE9+，Safari5.1+,Chrome10.0+,Opera10.6+都符合box-sizing的w3c标准语法)*/