当前位置：文江博客知识库简体中文文档 Web Guide CSS Getting_Started Media

媒体 - Web 开发者指南编辑

Go to Previous Section:
表格

本章节是 CSS入门教程指南的第14章也是最后一部分。这本指南主要描述了用来展示文档的CSS的属性及其值，本章节依旧着眼于这个目标，同时也会介绍CSS样式表的结构。

信息: Media

CSS的作用是将网页文档以更友好的展现方式呈现给用户。

例如，假设你现在正用一台显示设备来阅读这篇文章，同时你也想把它投影到屏幕上，或者打印出来，而显示设备、屏幕投影和打印等这些媒介都有自己的特点，CSS就是为文档提供在不同媒介上展示的适配方法。

CSS通过使用@media 的格式来对特定的媒介指定适配规则。

示例

我们的站点上有一个导航区域允许用户浏览。

在标签语言中，导航区域父元素的id是 nav-area.(在 HTML5中, 可以使用 <nav> 元素代替带有id属性的 <div>。)

为了网页在被打印的时候去掉无用的信息，我们在样式表中加一条适配规则，使导航区域在打印时是被隐藏起来的:

@media print {
  #nav-area {display: none;}
  }

一些常见的媒介类型:

`screen`	彩色计算机显示
`print`	打印（分页式媒体）
`projection`	投影
`all`	所有媒体 (默认)

一些其他指定媒介类型的规则。

类型可以在样式表通过link方式加到文档时被指定，这是文档的标签语言允许的。例如，在HTML中，你可以通过在 LINK 标签上添加media属性来指定媒介类型。

在CSS中，你可以在样式表开头使用 @import 一个url来引入另外的样式表，同时指定其媒介类型。

根据这些知识，你可以区分在不同的文件中定义不同媒介的样式规则。有时这也是结构化样式表的好方法。

想获取媒介类型更多细节，请参考CSS规范中的 Media 部分。

接下来将介绍更多 display 属性的例子: XML data.

打印

CSS有一些特性能够支持打印和分页媒体。

@page 规则能够设置页间距，对于双面打印，还可以分开设置 @page:left 和 @page:right。

对于打印媒介，可以使用适当的长度单位，像是英寸(in)、点（1pt = 1/72 inch）、厘米（cm）还有毫米（mm）。这等同于使用em来配合字体大小和百分比。

可以通过使用 page-break-before, page-break-after 和 page-break-inside 属性来控制文档内容的分页边界。

示例

这个规则把四个方向的页边距都设置为1 inch:

@page {margin: 1in;}

这个规则确保每个H1元素都从新的一页开始:

h1 {page-break-before: always;}

更多细节

想获取更多细节，请参考CSS规范中的 Paged media 部分。

像CSS的其他特性一样，打印也依赖于你的浏览器及其设置。例如，在打印的时候Mozilla浏览器支持默认的间距，页眉和页脚。而当其他用户打印你的文档时，你无法预知他会使用的什么样的浏览器和设置，因此你也不能完全控制打印情况。

用户界面

CSS有一些特殊的属性能够支持设备的用户界面，像电脑显示器。这使得文档的展示随着用户界面的情况而动态地变化。

并没有针对用户界面设备的特殊媒介类型。

下面有五种特殊的选择器:

Selector	Selects
`E:hover`	当鼠标悬浮任何E元素上
`E:focus`	当元素获得键盘焦点
`E:active`	当元素是当前的活动元素
`E:link`	当元素超链接到一个url但是用户还没有访问过
`E:visited`	当元素超链接到一个url但是用户已经访问过

注意: 在 Gecko 2.0 中可获得的 :visited 选择器信息是有限的。更过细节请参照 Privacy and the :visited selector 。

cursor 属性指定鼠标的形状：一些常见的形状如下表所示。把你的鼠标放在列表的选项上来看浏览器中实际显示的鼠标形状:

Selector	Selects
`pointer`	指示超链接
`wait`	表明程序无法接受输入
`progress`	表明程序正在运行，但是仍可以接受输入
`default`	默认（通常是箭头）

outline 属性通过创建轮廓来表明获得键盘焦点。只有在父元素使用 relative, fixed or absolute 时才有效。你可以为任何父元素指定 position: relative;因为它不会产生移动。
它的作用相当于 border 属性，但与其不同的是它不能指明个别方向。

一些其他的用户界面特性通常会通过属性来应用。例如，禁用或者只读的元素可以设置 disabled 属性和 readonly 属性。选择器可以通过方括: [disabled] 或者 [readonly]来指定这些属性。

示例

这些规则规定了按钮在用户使用时动态变化的样式:

.green-button {
  background-color:#cec;
  color:#black;
  border:2px outset #cec;
  }

.green-button[disabled] {
  background-color:#cdc;
  color:#777;
  }

.green-button:active {
  border-style: inset;
  }

这个wiki不支持页面上的用户界面，所以这些按钮不能点击。下面用一些静态图片来举例说明:

Click Me	Click Me	Click Me

disabled	normal	active

当一个功能性按钮初始化的时候，它的周围会围绕着一条黑色的轮廓。当它获取键盘焦点时，从表面上看有一条虚线轮廓。同时当鼠标悬浮在它上面时也有一些悬浮效果。

获取更多关于CSS用户界面的信息，请参考CSS规范中的 User interface 部分。

本文的第二部分列举了Mozilla的用户界面标签语言的例子，XUL。

实践: 打印文档

创建一个新的HTML文档, doc4.html. 把下面的HTML代码粘贴过去:

<!DOCTYPE html>
<html>
  <head>
    <title>Print sample</title>
    <link rel="stylesheet" href="style4.css">
  </head>
  <body>
    <h1>Section A</h1>
    <p>This is the first section...</p>
    <h1>Section B</h1>
    <p>This is the second section...</p>
    <div id="print-head">
      Heading for paged media
    </div>
    <div id="print-foot">
      Page:
    </div>
</body>
</html>

创建一个新的样式表, style4.css. 把下面的HTML代码粘贴过去:

/*** Print sample ***/

/* defaults  for screen */
#print-head,
#print-foot {
  display: none;
  }

/* print only */
@media print {

h1 {
  page-break-before: always;
  padding-top: 2em;
  }

h1:first-child {
  page-break-before: avoid;
  counter-reset: page;
  }

#print-head {
  display: block;
  position: fixed;
  top: 0pt;
  left:0pt;
  right: 0pt;

  font-size: 200%;
  text-align: center;
  }

#print-foot {
  display: block;
  position: fixed;
  bottom: 0pt;
  right: 0pt;

  font-size: 200%;
  }

#print-foot:after {
  content: counter(page);
  counter-increment: page;
  }

} /* end print only */

在浏览器中查看文档，你会看到它使用的是默认样式。
打印（或者打印预览）文档；样式表的适配规则开始起作用，同时会显示每个页面的页眉和页脚，如果浏览器支持记数器，页码也会被显示出来。
Heading for paged media Section A This is the first section... Page: 1
Heading for paged media Section B This is the second section... Page: 2

挑战
把指定打印样式的规则转移到单独的CSS文件。学习 `@import` 了解如何将新的指定打印 CSS 文件引用到 `style4.css` 样式表里去。当鼠标放在标题时，改变颜色为蓝色。

查看这些挑战的解决方案。