a:link 




    
{color:#FF0000;}      /* unvisited link */ 
a:visited {color:#00FF00;}  /* visited link */ 
a:hover {color:#FF00FF;}  /* mouse over link */ 
a:active {color:#0000FF;}  /* selected link */

当设置为若干链路状态的样式，也有一些顺序规则：

a:link {text-decoration:none;} 
a:visited {text-decoration:none;} 
a:hover {text-decoration:underline;} 
a:active {text-decoration:underline;}

a:link {background-color:#B2FF99;} 
a:visited {background-color:#FFFF85;} 
a:hover {background-color:#FF704D;} 
a:active {background-color:#FF704D;}

ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}

width:250px;        
padding:10px;        
border:5px solid gray;        
margin:10px;

width:220px; 
padding:10px; 
border:5px solid gray; 
margin:0px;

五. CSS Border(边框)

p.one 
border-style:solid; 
border-width:5px; 
p.two 
border-style:solid; 
border-width:medium; 
3.边框颜色
border-color属性用于设置边框的颜色，它一次可以接受最多 4 个颜色值。可以设置的颜色：
name - 指定颜色的名称，如 "red"
RGB - 指定 RGB 值, 如 "rgb(255,0,0)"
Hex - 指定16进制值, 如 "#ff0000"
您还可以设置边框的颜色为"transparent"。
注意： border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式。3.
4.边框-单独设置各边
在CSS中，可以指定不同的侧面不同的边框：
border-top-style:dotted; 
border-right-style:solid; 
border-bottom-style:dotted; 
border-left-style:solid; 
border-style属性可以有1-4个值：
border-style:dotted solid double dashed;
上边框是 dotted
右边框是 solid
底边框是 double
左边框是 dashed
border-style:dotted solid double;
上边框是 dotted
左、右边框是 solid
底边框是 double
border-style:dotted solid;
上、底边框是 dotted
左、右边框是 solid
border-style:dotted;
四面边框是 dotted
上面的例子用了border-style。然而，它也可以和border-width 、 border-color一起使用。
5.透明边框
CSS2 引入了边框颜色值 transparent，这个值用于创建有宽度的不可见边框。
透明样式的定义如下：
a:link, a:visited {
  border-style: solid;
  border-width: 5px;
 border-color: transparent;
a:hover {border-color: gray;}
利用 transparent，使用边框就像是额外的内边距一样；此外还有一个好处，就是能在你需要的时候使其可见。这种透明边框相当于内边距，因为元素的背景会延伸到边框区域（如果有可见背景的话）。
6.边框-简写属性
上面的例子用了很多属性来设置边框。
你也可以在一个属性中设置边框。
你可以在"border"属性中设置：
border-width
border-style (required)
border-color
border:5px solid red;
六.CSS 轮廓（outline）属性

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
轮廓（outline）属性指定了样式，颜色和外边框的宽度。
轮廓（outline）属性的位置让它不像边框那样参与到文档流中，因此轮廓出现或消失时不会影响文档流，即不会导致文档的重新显示。
Padding（填充）
当元素的 Padding（填充）（内边距）被清除时，所"释放"的区域将会受到元素背景颜色的填充。
单独使用填充属性可以改变上下左右的填充。缩写填充属性也可以使用，一旦改变一切都改变。
length
定义一个固定的填充(像素, pt, em,等)
提示：CSS padding 属性可以使用长度值或百分比值，但与 margin 属性不同，它不允许使用负值。
内边距的百分比数值
CSS padding 属性的百分比数值是相对于其父元素的 width 计算的，如果改变了父元素的 width，则它们也会改变。
以下是将段落的内边距设置为父元素 width 的 20% 的示例：
p {padding: 20%;}
假设一个段落的父元素是 div 元素，那么它的 padding 的 width 计算是根据 div 进行的：
<div style="width: 200px;"> 
<p>This paragragh is contained within a DIV that has a width of 200 pixels.</p> 
注意：上下内边距与左右内边距一致，即上下内边距的百分数会相对于父元素宽度设置，而不是相对于高度。
填充- 单边内边距属性
在CSS中，它可以指定不同的侧面不同的填充：
padding-top:25px; 
padding-bottom:25px; 
padding-right:50px; 
padding-left:50px;
Padding属性，可以有一到四个值。
padding:25px 50px 75px 100px;
上填充为25px
右填充为50px
下填充为75px
左填充为100px
padding:25px 50px 75px;
上填充为25px
左右填充为50px
下填充为75px
padding:25px 50px;
上下填充为25px
左右填充为50px
padding:25px;
所有的填充都是25px
九.CSS 分组和嵌套

CSS 分组 和 嵌套 选择器
CSS 分组可以将具有相同样式的选择器进行分组，减少代码量。
CSS 嵌套适用于选择器内部的选择器的样式。
1.Grouping Selectors
在样式表中有很多具有相同样式的元素。
color:green;
color:green;
color:green;
为了尽量减少代码，你可以使用分组选择器。
每个选择器用逗号分隔.
在下面的例子中，我们对以上代码使用分组选择器：
h1,h2,p 
color:green; 
提示：您可以对任意多个选择器进行分组，CSS 对此没有任何限制。
2.嵌套选择器
它可能适用于选择器内部的选择器的样式。
在下面的例子，为所有p元素指定一个样式，为所有元素指定一个class="marked"的样式，并仅用于class="标记"，类内的p元素指定第三个样式：
color:blue; 
text-align:center; 
.marked 
background-color:red; 
.marked p 
color:white; 
十.CSS组合选择符
CSS 组合选择符
CSS 组合选择符可以让你直观的明白选择器与选择器之间的关系。 
CSS 组合选择符
组合选择符说明了两个选择器直接的关系。
3.相邻兄弟选择器
相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。
以下实例选取了所有位于 <div> 元素后的第一个 <p> 元素:
div+p 
background-color:yellow; 
4.普通相邻兄弟选择器
普通兄弟选择器选取所有指定元素的相邻兄弟元素。
以下实例选取了所有 <div> 元素之后的所有相邻兄弟元素 <p> : 
div~p 
background-color:yellow; 
CSS伪类是用来添加一些选择器的特殊效果。
由于状态的变化是非静态的，所以元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。 
伪类的语法：
selector:pseudo-class {property:value;}
CSS类也可以使用伪类：
selector.class:pseudo-class {property:value;}
anchor伪类
在支持 CSS 的浏览器中，链接的不同状态都可以以不同的方式显示
a:link {color:#FF0000;} /* 未访问的链接 




    
*/ 
a:visited {color:#00FF00;} /* 已访问的链接 */ 
a:hover {color:#FF00FF;} /* 鼠标划过链接 */ 
a:active {color:#0000FF;} /* 已选中的链接 */
注意： 在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
注意： 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
注意：伪类的名称不区分大小写。
伪类和CSS类
伪类可以与 CSS 类配合使用：
a.red:visited {color:#FF0000;}       
<a class="red" href="css-syntax.html">CSS Syntax</a>
CSS - :first - child伪类
您可以使用 :first-child 伪类来选择元素的第一个子元素
注意：在IE8的之前版本必须声明<!DOCTYPE> ，这样 :first-child 才能生效。
匹配第一个 <p> 元素
在下面的例子中，选择器匹配作为任何元素的第一个子元素的 <p> 元素：
<style> 
p:first-child 
color:blue; 
</style> 
</head> 
<p>I am a strong man.</p> 
<p>I am a strong man.</p> 
</body> 
</html>
匹配所有<p> 元素中的第一个 <i> 元素
在下面的例子中，选择相匹配的所有<p>元素的第一个 <i>元素：
<style> 
p > i:first-child 
color:blue; 
</style> 
</head> 
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p> 
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p> 
</body> 
</html>
匹配所有作为第一个子元素的<p> 元素中的所有 <i> 元素
在下面的例子中，选择器匹配所有作为元素的第一个子元素的<p> 元素中的所有 <i> 元素：
<style> 
p:first-child i 
color:blue; 
</style> 
</head> 
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p> 
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p> 
</body> 
</html>
CSS - :lang 伪类
:lang 伪类使你有能力为不同的语言定义特殊的规则
注意：IE8必须声明<!DOCTYPE>才能支持;lang伪类。
在下面的例子中，:lang 类为属性值为 no 的q元素定义引号的类型：
<style> 
q:lang(no) {quotes: "~" "~";} 
</style> 
</head> 
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p> 
</body> 
</html>
为超链接添加不同样式 
这个例子演示了如何为超链接添加其他样式。
使用 :focus 
这个例子演示了如何使用 :focus伪类。
所有CSS伪类/元素
选择器示例示例说明
:link
a:link
选择所有未访问链接
 selector:pseudo-element {property:value;}
CSS类也可以使用伪元素：
 selector.class:pseudo-element {property:value;}

1.:first-line 伪元素

"first-line" 伪元素用于向文本的首行设置特殊样式。

在下面的例子中，浏览器会根据 "first-line" 伪元素中的样式对 p 元素的第一行文本进行格式化：

p:first-line 
color:#ff0000;
font-variant:small-caps;
注意："first-line" 伪元素只能用于块级元素。
注意： 下面的属性可应用于 "first-line" 伪元素：
font properties
color properties 
background properties
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear
:first-letter 伪元素
"first-letter" 伪元素用于向文本的首字母设置特殊样式：
p:first-letter 
color:#ff0000;
font-size:xx-large;
注意： "first-letter" 伪元素只能用于块级元素。
注意： 下面的属性可应用于 "first-letter" 伪元素： 
font properties
color properties 
background properties
margin properties
padding properties
border properties
text-decoration
vertical-align (only if "float" is "none")
text-transform
line-height
float
clear
提示：有关 first-letter 伪元素的相关描述，你可以参考本站的CSS :first-letter 伪元素一节。
伪元素和CSS类
伪元素可以结合CSS类： 
p.article:first-letter {color:#ff0000;}

 <p class="article">A paragraph in an article</p>
上面的例子会使所有 class 为 article 的段落的首字母变为红色。
Multiple Pseudo-elements
可以结合多个伪元素来使用。
在下面的例子中，段落的第一个字母将显示为红色，其字体大小为 xx-large。第一行中的其余文本将为蓝色，并以小型大写字母显示。
段落中的其余文本将以默认字体大小和颜色来显示：
p:first-letter
color:#ff0000;
font-size:xx-large;
p:first-line 
color:#0000ff;
font-variant:small-caps;
CSS - :before 伪元素
":before" 伪元素可以在元素的内容前面插入新内容。
下面的例子在每个 <h1>元素前面插入一幅图片：
h1:before 
content:url(smiley.gif);
CSS - :after 伪元素
":after" 伪元素可以在元素的内容之后插入新内容。
下面的例子在每个 <h1> 元素后面插入一幅图片：
h1:after
content:url(smiley.gif);
所有CSS伪类/元素
选择器示例示例说明
:link
a:link
选择所有未访问链接
:visited
a:visited
选择所有访问过的链接
:active
a:active
选择正在活动链接
:hover
a:hover
把鼠标放在链接上的状态
:focus
input:focus
选择元素输入后具有焦点
:first-letter
p:first-letter
选择每个<p> 元素的第一个字母
:first-line
p:first-line
选择每个<p> 元素的第一行
:first-child
p:first-child
选择器匹配属于任意元素的第一个子元素的 <]p> 元素
:before
p:before
在每个<p>元素之前插入内容
:after
p:after
在每个<p>元素之后插入内容
:lang(language)
p:lang(it)
为<p>元素的lang属性选择一个开始值
<li><a href="default.asp">Home</a></li> 
<li><a href="news.asp">News</a></li> 
<li><a href="contact.asp">Contact</a></li> 
<li><a href="about.asp">About</a></li> 
从列表中删除边距和填充：
list-style-type:none; 
margin:0; 
padding:0; 
例子解析：
list-style-type:none - 移除列表前小标志。一个导航栏并不需要列表标记
移除浏览器的默认设置将边距和填充设置为0
上面的例子中的代码是垂直和水平导航栏使用的标准代码。
垂直导航栏
上面的代码，我们只需要 元素的样式，建立一个垂直的导航栏：
display:block; 
width:60px; 
示例说明：
display:block - 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度
width:60px - 块元素默认情况下是最大宽度。我们要指定一个60像素的宽度
提示：查看完全样式的垂直导航栏的示例.
注意： 请务必指定 元素在垂直导航栏的的宽度。如果省略宽度，IE6可能产生意想不到的效果。
水平导航栏
有两种方法创建横向导航栏。使用内联或浮动的列表项。
这两种方法都很好，但如果你想链接到具有相同的大小，你必须使用浮动的方法。




    

内嵌列表项
建立一个横向导航栏的方法之一是指定
元素， 上述代码是标准的内嵌:
display:inline; 
实例解析：
display:inline - 默认情况下，<li>元素是块元素。在这里，我们删除换行符之前和之后每个列表项，以显示一行。
提示: 查看完全样式的水平导航栏的示例.
浮动列表项
在上面的例子中链接有不同的宽度。
对于所有的链接宽度相等，浮动
元素，并指定为 元素的宽度：
float:left; 
display:block; 
width:60px; 
实例解析：
float:left - 使用浮动块元素的幻灯片彼此相邻
display:block - 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度
width:60px - 块元素默认情况下是最大宽度。我们要指定一个60像素的宽度
display:inline; -默认情况下，
元素是块元素。在这里，我们删除换行符之前和之后每个列表项，以显示一行 。
Tip:查看完全样式的横向导航栏的示例..
十四.CSS 下拉菜单

CSS 下拉菜单
使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果。
基本下拉菜单
当鼠标移动到指定元素上时，会出现下拉菜单。
<style>
.dropdown {
    position: relative;
    display: inline-block;
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
.dropdown:hover .dropdown-content {
    display: block;
</style>
<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
    <p>Hello World!</p>
HTML 部分： 
我们可以使用任何的 HTML元素来打开下拉菜单，如：<span>, 或 a <button> 元素。
使用容器元素 (如： <div>) 来创建下拉菜单的内容，并放在任何你想放的位置上。
使用 <div> 元素来包裹这些元素，并使用 CSS 来设置下拉内容的样式。 
CSS 部分：
.dropdown 类使用 position:relative, 这将设置下拉菜单的内容放置在下拉按钮 (使用 position:absolute) 的右下角位置。
.dropdown-content 类中是实际的下拉菜单。默认是隐藏的，在鼠标移动到指定元素后会显示。 注意 min-width 的值设置为 160px。你可以随意修改它。 注意: 如果你想设置下拉内容与下拉按钮的宽度一致，可设置 width 为 100% ( overflow:auto 设置可以在小尺寸屏幕上滚动)。
我们使用 box-shadow 属性让下拉菜单看起来像一个"卡片"。
:hover 选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单。
创建下拉菜单，并允许用户选取列表中的某一项：
这个实例类似前面的实例，当我们在下拉列表中添加了链接，并设置了样式：
<style>
/* 下拉按钮样式 */
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
/* 容器 <div> - 需要定位下拉内容 */
.dropdown {
    position: relative;
    display: inline-block;
/* 下拉内容 (默认隐藏) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
/* 下拉菜单的链接 */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
/* 鼠标移上去后修改下拉菜单链接颜色 */
.dropdown-content a:hover {background-color: #f1f1f1}
/* 在鼠标移上去后显示下拉菜单 */
.dropdown:hover .dropdown-content {
    display: block;
/* 当下拉内容显示后修改下拉按钮的背景颜色 */
.dropdown:hover .dropbtn {
    background-color: #3e8e41;
</style>
<div class="dropdown">
  <button class="dropbtn">下拉菜单</button>
  <div class="dropdown-content">
    <a href="#">W3Cschool教程 1</a>
    <a href="#">W3Cschool教程 2</a>
    <a href="#">W3Cschool教程 3</a>
下拉内容对齐方式
float:left;
float:right;
如果你想设置右浮动的下拉菜单内容方向是从右到左，而不是从左到右，可以添加以下代码 right: 0;
.dropdown-content {
    right: 0;
图片下拉
该实例演示了如何如何在下拉菜单中添加图片。
导航条下拉
该实例演示了如何在导航条上添加下拉菜单。
十五.CSS图片廓

以下是使用CSS创建图片廊：
<style>
div.img
  margin:2px;
  border:1px solid #0000ff;
  height:auto;
  width:auto;
  float:left;
  text-align:center;
div.img img
  display:inline;
  margin:3px;
  border:1px solid #ffffff;
div.img a:hover img
  border:1px solid #0000ff;
div.desc
  text-align:center;
  font-weight:normal;
  width:120px;
  margin:2px;
</style>
</head>
<div class="img">
  <a target="_blank" href="klematis_big.htm">
  <img src="klematis_small.jpg" alt="Klematis" width="110" height="90">
  <div class="desc">Add a description of the image here</div>
</div>
<div class="img">
  <a target="_blank" href="klematis2_big.htm">
  <img src="klematis2_small.jpg" alt="Klematis" width="110" height="90">
  <div class="desc">Add a description of the image here</div>
</div>
<div class="img">
  <a target="_blank" href="klematis3_big.htm">
  <img src




    
="klematis3_small.jpg" alt="Klematis" width="110" height="90">
  <div class="desc">Add a description of the image here</div>
</div>
<div class="img">
  <a target="_blank" href="klematis4_big.htm">
  <img src="klematis4_small.jpg" alt="Klematis" width="110" height="90">
  <div class="desc">Add a description of the image here</div>
</div>
</body>
</html>

十六.图片透明与不透明

实例1 - 创建一个透明图像
CSS3中属性的透明度是 opacity.
 opacity:0.4;
 filter:alpha(opacity=40); /* For IE8 and earlier */
IE9，Firefox，Chrome，Opera，和Safari浏览器使用透明度属性可以将图像变的不透明。 Opacity属性值从0.0 - 1.0。值越小，使得元素更加透明。
IE8和早期版本使用滤镜：alpha（opacity= x）。 x可以采取的值是从0 - 100。较低的值，使得元素更加透明。
提示：在本站的CSS参考手册中对 CSS opacity 属性有详细介绍。
实例2 - 图像的透明度 - 悬停效果
 opacity:0.4;
 filter:alpha(opacity=40); /* For IE8 and earlier */
 img:hover
 opacity:1.0;
 filter:alpha(opacity=100); /* For IE8 and earlier */
第一个CSS块是和例1中的代码类似。此外，我们还增加了当用户将鼠标悬停在其中一个图像上时发生什么。在这种情况下，当用户将鼠标悬停在图像上时，我们希望图片是清晰的。
此CSS是：opacity=1.
IE8和更早版本使用： filter:alpha(opacity=100).
当鼠标指针远离图像时，图像将重新具有透明度。
实例3 - 透明的盒子中的文字
<style>
div.background  
width:500px;  
height:250px;  
background:url(klematis.jpg) repeat; 
border:2px solid black;  
div.transbox  
width:400px;  
height:180px;  
margin:30px 50px;  
background-color:#ffffff;  
border:1px solid black;  
opacity:0.6;  
filter:alpha(opacity=60); /* For IE8 and earlier */  
div.transbox p  
margin:30px 40px;  
font-weight:bold;  
color:#000000;  
</style>
</head>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.This is some text that is placed in the transparent box.This is some text that is placed in the transparent box.This is some text that is placed in the transparent box.This is some text that is placed in the transparent box.</p>
</div>
</div>
</body>
</html>

首先，我们创建一个固定的高度和宽度的div元素，带有一个背景图片和边框。然后我们在第一个div内部创建一个较小的div元素。 这个div也有一个固定的宽度，背景颜色，边框 - 而且它是透明的。透明的div里面，我们在P元素内部添加一些文本。
十七.图片拼合技术

CSS 图像拼合技术
图像拼合就是单个图像的集合。
有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求。
使用图像拼合会降低服务器的请求数量，并节省带宽。
图像拼合 - 简单实例
与其使用三个独立的图像，不如我们使用这种单个图像（"img_navsprites.gif"）：
img.home
width:46px;
height:44px;
background:url(img_navsprites.gif) 0 0;
实例解析：
<img class="home" src="img_trans.gif" /> -因为不能为空,src属性只定义了一个小的透明图像。显示的图像将是我们在CSS中指定的背景图像
宽度：46px;高度：44px; - 定义我们使用的那部分图像
background:url(img_navsprites.gif) 0 0; - 定义背景图像和它的位置（左0px，顶部0px）
这是使用图像拼合最简单的方法，现在我们使用链接和悬停效果。
图像拼合 - 创建一个导航列表
我们想使用拼合图像 ("img_navsprites.gif")，以创建一个导航列表。
我们将使用一个HTML列表，因为它可以链接，同时还支持背景图像：
#navlist{
position:relative;
#navlist li{
margin:0;padding:0;
list-style:none;
position:absolute;top:0;
#navlist li, #navlist a{
height:44px;
display:block;
#home{l
eft:0px;width:46px;
#home{
background:url('img_navsprites.gif') 0 0;
#prev{
left:63px;width:43px;
#prev{
background:url('img_navsprites.gif') -47px 0;
#next{
left:129px;width:43px;
#next{
background:url('img_navsprites.gif') -91px 0;
实例解析：
#navlist{position:relative;} - 位置设置相对定位，让里面的绝对定位
#navlist li{margin:0;padding:0;list-style:none;top:0;} - margin和padding设置为0，列表样式被删除，所有列表项是绝对定位
#navlist li, #navlist a{height:44px;display:block;} - 所有图像的高度是44px
现在开始每个具体部分的定位和样式：
#home{left:0px;width:46px;} - 定位到最左边的方式，以及图像的宽度是46px
#home{background:url(img_navsprites.gif) 0 0;} - 定义背景图像和它的位置（左0px，顶部0px）
#prev{left:63px;width:43px;} - 左外边距定位63px（＃home宽46px+项目之间的一些多余的空间），宽度为43px。
#prev{background:url('img_navsprites.gif') -47px 0;} - 定义背景图像向右侧定位47px（＃home宽46px+分隔线的1px）
#next{left:129px;width:43px;}- 左外边距定位129px(#prev 63px + #prev宽是43px + 剩余的空间), 宽度是43px.
#next{background:url('img_navsprites.gif') no-repeat -91px 0;} - 定义背景图像向右侧定位91px（＃home 46px+1px的分割线+＃prev宽43px+1px的分隔线）
图像拼合 - 悬停效果
现在，我们希望我们的导航列表中添加一个悬停效果。
:hover 选择器用于鼠标悬停在元素上的显示的效果

提示： :hover 选择器可以运用于所有元素。在本站CSS参考手册的CSS:hover选择器一节，你可以更加了解该选择器的用法。
我们的新图像 ("img_navsprites_hover.gif") 包含三个导航图像和三幅图像：
因为这是一个单一的图像，而不是6个单独的图像文件，当用户停留在图像上不会有延迟加载。
我们添加悬停效果只添加三行代码：
#home a:hover{background: url('img_navsprites_hover.gif') 0 -45px;}
#prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;}
#next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;}
实例解析：
由于该列表项包含一个链接，我们可以使用：hover伪类
#home a:hover{background: transparent url(img_navsprites_hover.gif) 0 -45px;} - 对于所有三个悬停图像，我们指定相同的背景位置，只是每个再向下45px
@media 规则允许在相同样式表为不同媒体设置不同的样式。
在下面的例子告诉我们浏览器屏幕上显示一个14像素的Verdana字体样式。但是如果页面打印，将是10个像素的Times字体。请注意，font-weight在屏幕上和纸上设置为粗体：
<style>
@media screen
    p.test {font-family:verdana,sans-serif;font-size:14px;}
@media print
    p.test {font-family:times,serif;font-size:10px;}
@media screen,print
    p.test {font-weight:bold;}
</style>
</head>
</body>
</html>
你可以自己尝试看看 ! 如果您使用的是Mozilla / Firefox或IE5+打印此页，你会看到，"Media Types"将使用另一种比其他文本字体大小小点的字体显示。
提示：有关 @media 规则的更多信息，请参考CSS参考手册的CSS @media 查询部分。
其他媒体类型
注意：媒体类型名称不区分大小写。
媒体类型描述
用于所有的媒体设备。
aural
用于语音和音频合成器。
braille
用于盲人用点字法触觉回馈设备。
embossed
用于分页的盲人用点字法打印机。
handheld
用于小的手持的设备。
print
用于打印机。
projection
用于方案展示，比如幻灯片。
screen
用于电脑显示器。
用于使用固定密度字母栅格的媒体，比如电传打字机和终端。
用于电视机类型的设备。