CSS3 章节详解

目录

第一章 CSS3概述

第二章 CSS3边框

第三章 CSS3圆角

第四章 CSS3背景

第五章 CSS3渐变

5.1、线性渐变

5.2、径向渐变

第六章 CSS3文本效果

第七章 CSS3字体

第八章 CSS3 2D 转换

8.1、translate() 方法​

8.2、rotate() 方法

8.3、scale() 方法

8.4、skew() 方法

8.5、matrix() 方法

2D 转换属性

2D 转换方法

第九章 CSS3 3D 转换

 9.1、rotateX() 方法

 9.2、rotateY() 方法

3D 转换属性

3D 转换方法

第十章 CSS3过渡

第十一章 CSS3动画

动画属性

第十二章 CSS3多列

CSS3 的多列属性

第十三章 CSS3用户界面

13.1、调整尺寸(resize)

13.2、方框大小调整(box-sizing)

13.3、外形修饰(outline-offset)

13.4、新的用户界面特性

第十四章 CSS3弹性盒子

第十五章 CSS3多媒体大小

15.1、多媒体概述

15.2、多媒体类型

15.3、多媒体功能

15.4、多媒体实例

---

第一章 CSS3概述

CSS 用于控制网页的样式和布局，CSS3 是最新的 CSS 标准。

对CSS3已完全向后兼容，所以你就不必改变现有的设计，浏览器将永远支持CSS2。

第二章 CSS3边框

通过 CSS3，您能够创建圆角边框，向矩形添加阴影，使用图片来绘制边框，并且不需使用设计软件，比如 PhotoShop。

属性	说明
border-image	设置所有边框图像的速记属性。
border-radius	一个用于设置所有四个边框- *-半径属性的速记属性
box-shadow	附加一个或多个下拉框的阴影

第三章 CSS3圆角

使用 CSS3 border-radius 属性，你可以给任何元素制作 “圆角”。

属性	描述
border-radius	所有四个边角 border-radius 属性的缩写。
border-top-left-radius	定义了左上角的弧度。
border-top-right-radius	定义了右上角的弧度。
border-bottom-right-radius	定义了右下角的弧度。
border-bottom-left-radius	定义了左下角的弧度。

第四章 CSS3背景

CSS3 中包含几个新的背景属性，提供更大背景元素控制。

顺序	描述
background-clip	规定背景的绘制区域。
background-origin	规定背景图片的定位区域。
background-size	规定背景图片的尺寸

第五章 CSS3渐变

CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。

以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的时间和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。

CSS3 定义了两种类型的渐变（gradients）：

•     线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
•     径向渐变（Radial Gradients）- 由它们的中心定义

5.1、线性渐变

为了创建一个线性渐变，你必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。

• 线性渐变 - 从上到下（默认情况下）

#grad {
    background-image: linear-gradient(#e66465, #9198e5);
}

• 线性渐变 - 从左到右

#grad {
    background-image: linear-gradient(to right, red, yellow);
}

• 线性渐变 - 对角变化

#grad {
    background-image: linear-gradient(to bottom right, red, yellow);
}

如果你想要在渐变的方向上做更多的控制，你可以定义一个角度，而不用预定义方向（to bottom、to top、to right、to left、to bottom right，等等）。语法如下：

    background-image: linear-gradient(angle, color-stop1, color-stop2);

角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。

但是，请注意很多浏览器（Chrome、Safari、firefox等）的使用了旧的标准，即 0deg 将创建一个从左到右的渐变，90deg 将创建一个从下到上的渐变。换算公式 90 - x = y 其中 x 为标准角度，y为非标准角度。

下面的实例演示了如何在线性渐变上使用角度：

#grad {
    background-image: linear-gradient(-90deg, red, yellow);
}

下面的实例演示了如何设置多个颜色节点：

#grad {
    background-image: linear-gradient(red, yellow, green);
}

下面的实例演示了如何创建一个带有彩虹颜色和文本的线性渐变：

#grad {
    background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}

下面的实例演示了从左边开始的线性渐变。起点是完全透明，慢慢过渡到完全不透明的红色：

#grad {
    background-image: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
}

下面的实例演示了一个重复的线性渐变：

#grad {
    background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

5.2、径向渐变

径向渐变由它的中心定义。为了创建一个径向渐变，你也必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。

• 径向渐变 - 颜色节点均匀分布（默认情况下）

#grad {
    background-image: radial-gradient(red, yellow, green);
}

• 径向渐变 - 颜色节点不均匀分布

  #grad {
      background-image: radial-gradient(red 5%, yellow 15%, green 60%);
  }

• 设置形状

shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。

形状为圆形的径向渐变：

#grad {
    background-image: radial-gradient(circle, red, yellow, green);
}

• 不同尺寸大小关键字的使用

size 参数定义了渐变的大小。它可以是以下四个值：

•     closest-side
•     farthest-side
•     closest-corner
•     farthest-corner

带有不同尺寸大小关键字的径向渐变：

#grad1 {
    background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}

#grad2 {
    background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}

• 重复的径向渐变

repeating-radial-gradient() 函数用于重复径向渐变：

#grad {
    background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}

第六章 CSS3文本效果

CSS3中包含几个新的文本特征。

属性	描述
hanging-punctuation	规定标点字符是否位于线框之外。
punctuation-trim	规定是否对标点字符进行修剪。
text-align-last	设置如何对齐最后一行或紧挨着强制换行符之前的行。
text-emphasis	向元素的文本应用重点标记以及重点标记的前景色。
text-justify	规定当 text-align 设置为 “justify” 时所使用的对齐方法。
text-outline	规定文本的轮廓。
text-overflow	规定当文本溢出包含元素时发生的事情。
text-shadow	向文本添加阴影。
text-wrap	规定文本的换行规则。
word-break	规定非中日韩文本的换行规则。
word-wrap	允许对长的不可分割的单词进行分割并换行到下一行。

第七章 CSS3字体

使用以前 CSS 的版本，网页设计师不得不使用用户计算机上已经安装的字体。

使用 CSS3，网页设计师可以使用它/她喜欢的任何字体。

当你发现您要使用的字体文件时，只需简单的将字体文件包含在网站中，它会自动下载给需要的用户。

您所选择的字体在新的 CSS3 版本有关于 @font-face 规则描述。

您"自己的"的字体是在 CSS3 @font-face 规则中定义的。

如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称 (myFirstFont)：

<style>
    @font-face {
        font-family: myFirstFont;
        src: url(sansation_light.woff);
    }

    div {
        font-family: myFirstFont;
    }
</style>

下表列出了所有的字体描述和里面的@font-face规则定义：

描述符	值	描述
font-family	name	必需。规定字体的名称。
src	URL	必需。定义字体文件的 URL。
font-stretch	normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded	可选。定义如何拉伸字体。默认是 “normal”。
font-style	normal italic oblique	可选。定义字体的样式。默认是 “normal”。
font-weight	normal bold 100 200 300 400 500 600 700 800 900	可选。定义字体的粗细。默认是 “normal”。
unicode-range	unicode-range	可选。定义字体支持的 UNICODE 字符范围。默认是 “U+0-10FFFF”。

第八章 CSS3 2D 转换

CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸。

在本章您将了解2D变换方法：

•     translate()
•     rotate()
•     scale()
•     skew()
•     matrix()

8.1、translate() 方法

translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。

translate(50px, 100px)是从左边元素移动50个像素，并从顶部移动100像素。

div {
    -webkit-transform: translate(50px, 100px);/*Safari/Chrome浏览器支持*/
    -moz-transform: translate(50px, 100px);/*Firefox浏览器支持*/
    -ms-transform: translate(50px, 100px);/*IE浏览器支持*/
    -o-transform: translate(50px, 100px);/*Opera浏览器支持*/
    transform: translate(50px, 100px);
}

8.2、rotate() 方法

rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

rotate(30deg)代表元素顺时针旋转30度。

div {
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    transform: rotate(30deg);
}

8.3、scale() 方法

scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数。

scale(2, 3)转变宽度为原来的大小的2倍，和其原始大小3倍的高度。

div {
    -webkit-transform: scale(2, 3);
    -moz-transform: scale(2, 3);
    -ms-transform: scale(2, 3);
    -o-transform: scale(2, 3);
    transform: scale(2, 3);
}

8.4、skew() 方法

skew() 方法包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。

skew(30deg, 20deg)元素在X轴和Y轴上倾斜20度30度。

div {
    -webkit-transform: skew(30deg, 20deg);
    -moz-transform: skew(30deg, 20deg);
    -ms-transform: skew(30deg, 20deg);
    -o-transform: skew(30deg, 20deg);
    transform: skew(30deg, 20deg);
}

8.5、matrix() 方法

matrix()方法和2D变换方法合并成一个。

matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。

div {
    -webkit-transform: matrix(0.866, 0.5, -0.5, 0.866, 0, 0);
    -moz-transform: matrix(0.866, 0.5, -0.5, 0.866, 0, 0);
    -ms-transform: matrix(0.866, 0.5, -0.5, 0.866, 0, 0);
    -o-transform: matrix(0.866, 0.5, -0.5, 0.866, 0, 0);
    transform: matrix(0.866, 0.5, -0.5, 0.866, 0, 0);
}

2D 转换属性

属性	描述
transform	适用于2D或3D转换的元素
transform-origin	允许您更改转化元素位置

2D 转换方法
 

函数	描述
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
translate(x,y)	定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n)	定义 2D 转换，沿着 X 轴移动元素。
translateY(n)	定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y)	定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n)	定义 2D 缩放转换，改变元素的宽度。
scaleY(n)	定义 2D 缩放转换，改变元素的高度。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle)	定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle)	定义 2D 倾斜转换，沿着 X 轴。
skewY(angle)	定义 2D 倾斜转换，沿着 Y 轴。

第九章 CSS3 3D 转换

CSS3 允许您使用 3D 转换来对元素进行格式化。

在本章中，您将学到其中的一些 3D 转换方法：

•     rotateX()
•     rotateY()

9.1、rotateX() 方法

rotateX()方法，围绕其在一个给定度数X轴旋转的元素。

div {
    -webkit-transform: rotateX(120deg);
    -moz-transform: rotateX(120deg);
    -ms-transform: rotateX(120deg);
    -o-transform: rotateX(120deg);
    transform: rotateX(120deg);
}

 9.2、rotateY() 方法

rotateY()方法，围绕其在一个给定度数Y轴旋转的元素。

div {
    -webkit-transform: rotateY(120deg);
    -moz-transform: rotateY(120deg);
    -ms-transform: rotateY(120deg);
    -o-transform: rotateY(120deg);
    transform: rotateY(120deg);
}

3D 转换属性

属性	描述
transform	向元素应用 2D 或 3D 转换。
transform-origin	允许你改变被转换元素的位置。
transform-style	规定被嵌套元素如何在 3D 空间中显示。
perspective	规定 3D 元素的透视效果。
perspective-origin	规定 3D 元素的底部位置。
backface-visibility	定义元素在不面对屏幕时是否可见。

3D 转换方法

函数	描述
matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z)	定义 3D 转化。
translateX(x)	定义 3D 转化，仅使用用于 X 轴的值。
translateY(y)	定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z)	定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y)	定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z)	定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿 X 轴的 3D 旋转。
rotateY(angle)	定义沿 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿 Z 轴的 3D 旋转。
perspective(n)	定义 3D 转换元素的透视视图。

第十章 CSS3过渡

CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

要实现这一点，必须规定两项内容：

•     指定要添加效果的CSS属性
•     指定效果的持续时间

应用于宽度属性的过渡效果，时长为 2 秒：

div {
    width: 100px;
    height: 100px;
    background: red;
    
    -webkit-transition: width 2s;
    -moz-transition: width 2s;
    -ms-transition: width 2s;
    -o-transition: width 2s;
    transition: width 2s;
}

    注意：如果未指定的期限，transition将没有任何效果，因为默认值是0。

指定的CSS属性的值更改时效果会发生变化。一个典型CSS属性的变化是用户鼠标放在一个元素上时：

div:hover {
    width: 300px;
}

    注意：当鼠标光标移动到该元素时，它逐渐改变它原有样式。

要添加多个样式的变换效果，添加的属性由逗号分隔：

div {
    width: 100px;
    height: 100px;
    background: red;
    
    -webkit-transition: width 2s, height 2s;
    -moz-transition: width 2s, height 2s;
    -ms-transition: width 2s, height 2s;
    -o-transition: width 2s, height 2s;
    transition: width 2s, height 2s;
}

div:hover {
    width: 300px;
    height: 300px;
}

过渡属性

属性	描述
transition	简写属性，用于在一个属性中设置四个过渡属性。
transition-property	规定应用过渡的 CSS 属性的名称。
transition-duration	定义过渡效果花费的时间。默认是 0。
transition-timing-function	规定过渡效果的时间曲线。默认是 “ease”。
transition-delay	规定过渡效果何时开始。默认是 0。

第十一章 CSS3动画

CSS3 可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。

要创建 CSS3 动画，你需要了解 @keyframes 规则。

@keyframes 规则是创建动画。

@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。

当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。

指定至少这两个CSS3的动画属性绑定向一个选择器：

•     规定动画的名称
•     规定动画的时长

把 “myfirst” 动画捆绑到 div 元素，时长：5 秒：

@keyframes myfirst {
    0% {background: red;}
    25% {background: yellow;}
    50% {background: blue;}
    100% {background: green;}
}

@-webkit-keyframes myfirst {
    0% {background: red;}
    25% {background: yellow;}
    50% {background: blue;}
    100% {background: green;}
}

@-moz-keyframes myfirst {
    0% {background: red;}
    25% {background: yellow;}
    50% {background: blue;}
    100% {background: green;}
}

@-ms-keyframes myfirst {
    0% {background: red;}
    25% {background: yellow;}
    50% {background: blue;}
    100% {background: green;}
}

@-o-keyframes myfirst {
    0% {background: red;}
    25% {background: yellow;}
    50% {background: blue;}
    100% {background: green;}
}

div {
    width: 300px;
    height: 300px;
    background: black;

    -webkit-animation: myfirst 5s;
    -o-animation: myfirst 5s;
    animation: myfirst 5s;
}

您可以改变任意多的样式任意多的次数。

请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。

0% 是动画的开始，100% 是动画的完成。

为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

动画属性

属性	描述
@keyframes	规定动画。
animation	所有动画属性的简写属性。
animation-name	规定 @keyframes 动画的名称。
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function	规定动画的速度曲线。默认是 “ease”。
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-delay	规定动画何时开始。默认是 0。
animation-iteration-count	规定动画被播放的次数。默认是 1。
animation-direction	规定动画是否在下一周期逆向地播放。默认是 “normal”。
animation-play-state	规定动画是否正在运行或暂停。默认是 “running”。

第十二章 CSS3多列

CSS3 可以将文本内容设计成像报纸一样的多列布局，如下实例：

CSS3 的多列属性

属性	描述
column-count	指定元素应该被分割的列数。
column-fill	指定如何填充列。
column-gap	指定列与列之间的间隙。
column-rule	所有 column-rule-* 属性的简写。
column-rule-color	指定两列间边框的颜色。
column-rule-style	指定两列间边框的样式。
column-rule-width	指定两列间边框的厚度。
column-span	指定元素要跨越多少列。
column-width	指定列的宽度。
columns	column-width 与 column-count 的简写属性。

第十三章 CSS3用户界面

在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸，框尺寸和外边框。

在本章中，您将了解以下的用户界面属性：

•     resize
•     box-sizing
•     outline-offset

13.1、调整尺寸(resize)

CSS3中，resize属性指定一个元素是否应该由用户去调整大小。

由用户指定一个div元素尺寸大小：

div {
    width: 300px;
    height: 300px;
    background: red;
    /*div右下角会多出一个小三角*/
    resize: both;
    overflow: auto;
}

13.2、方框大小调整(box-sizing)

box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容。

规定两个并排的带边框方框：

div {
    width: 300px;
    height: 300px;
    background: red;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

13.3、外形修饰(outline-offset)

outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。

轮廓与边框有两点不同：

•     轮廓不占用空间
•     轮廓可能是非矩形

  div {
      width: 300px;
      height: 300px;
      background: red;
  
      border: 2px solid black;
      outline: 2px solid blue;
      outline-offset: 15px;
  }

13.4、新的用户界面特性

属性	说明
resize	指定一个元素是否是由用户调整大小。
box-sizing	允许你以适应区域而用某种方式定义某些元素。
outline-offset	外轮廓修饰并绘制超出边框的边缘。

第十四章 CSS3弹性盒子

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。

弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

弹性容器内包含了一个或多个弹性子元素。

    注意：弹性容器外及弹性子元素内是正常渲染的，弹性盒子只定义了弹性子元素如何在弹性容器内布局。弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

下表列出了在弹性盒子中常用到的属性：
 

属性	描述
display	指定 HTML 元素盒子类型。
flex-direction	指定了弹性容器中子元素的排列方式。
justify-content	设置弹性盒子元素在主轴（横轴）方向上的对齐方式。
align-items	设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
flex-wrap	设置弹性盒子的子元素超出父容器时是否换行。
align-content	修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐。
flex-flow	flex-direction 和 flex-wrap 的简写。
order	设置弹性盒子的子元素排列顺序。
align-self	在弹性子元素上使用。覆盖容器的 align-items 属性。
flex	设置弹性盒子的子元素如何分配空间。

第十五章 CSS3多媒体大小

15.1、多媒体概述

CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想： 取代了查找设备的类型，CSS3 根据设置自适应显示。你可以针对不同的媒体类型(包括显示器、便携设备、电视机，等等)设置不同的样式规则。但是这些多媒体类型在很多设备上支持还不够友好。

目前很多针对苹果手机，Android 手机，平板等设备都会使用到多媒体查询。媒体查询可用于检测很多事情，例如：

•     viewport(视窗) 的宽度与高度
•     设备的宽度与高度
•     朝向 (智能手机横屏，竖屏) 。
•     分辨率

多媒体查询由多种媒体组成，可以包含一个或多个表达式，表达式根据条件是否成立返回 true 或 false。

@media not|only mediatype and (expressions) {
    CSS 代码...;
}

如果指定的多媒体类型匹配设备类型则查询结果返回 true，文档会在匹配的设备上显示指定样式效果。

除非你使用了 not 或 only 操作符，否则所有的样式会适应在所有设备上显示效果。

•     not: not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备）。
•     only: 用来定某种特别的媒体类型。对于支持Media Queries的移动设备来说，如果存在only关键字，移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设备但能够读取Media Type类型的Web浏览器，遇到only关键字时会忽略这个样式文件。
•     all: 所有设备，这个应该经常看到。

你也可以在不同的媒体上使用不同的样式文件：

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

15.2、多媒体类型

值	描述
all	用于所有多媒体类型设备
print	用于打印机
screen	用于电脑屏幕，平板，智能手机等。
speech	用于屏幕阅读器

15.3、多媒体功能

值	描述
aspect-ratio	定义输出设备中的页面可见区域宽度与高度的比率
color	定义输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0
color-index	定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0
device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的比率。
device-height	定义输出设备的屏幕可见高度。
device-width	定义输出设备的屏幕可见宽度。
grid	用来查询输出设备是否使用栅格或点阵。
height	定义输出设备中的页面可见区域高度。
max-aspect-ratio	定义输出设备的屏幕可见宽度与高度的最大比率。
max-color	定义输出设备每一组彩色原件的最大个数。
max-color-index	定义在输出设备的彩色查询表中的最大条目数。
max-device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的最大比率。
max-device-height	定义输出设备的屏幕可见的最大高度。
max-device-width	定义输出设备的屏幕最大可见宽度。
max-height	定义输出设备中的页面最大可见区域高度。
max-monochrome	定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。
max-resolution	定义设备的最大分辨率。
max-width	定义输出设备中的页面最大可见区域宽度。
min-aspect-ratio	定义输出设备中的页面可见区域宽度与高度的最小比率。
min-color	定义输出设备每一组彩色原件的最小个数。
min-color-index	定义在输出设备的彩色查询表中的最小条目数。
min-device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的最小比率。
min-device-width	定义输出设备的屏幕最小可见宽度。
min-device-height	定义输出设备的屏幕的最小可见高度。
min-height	定义输出设备中的页面最小可见区域高度。
min-monochrome	定义在一个单色框架缓冲区中每像素包含的最小单色原件个数
min-resolution	定义设备的最小分辨率。
min-width	定义输出设备中的页面最小可见区域宽度。
monochrome	定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0
orientation	定义输出设备中的页面可见区域高度是否大于或等于宽度。
resolution	定义设备的分辨率。如：96dpi, 300dpi, 118dpcm
scan	定义电视类设备的扫描工序。
width	定义输出设备中的页面可见区域宽度。

15.4、多媒体实例

以下实例中在屏幕可视窗口尺寸小于 480 像素的设备上修改背景颜色：

@media screen and (max-width: 480px) {
    body {
        background-color: lightgreen;
    }
}

以下实例在屏幕可视窗口尺寸大于 480 像素时将菜单浮动到页面左侧：

@media screen and (min-width: 480px) {
    #leftsidebar {width: 200px; float: left;}
    #main {margin-left:216px;}
}