8.6　使用与媒体相关的样式表

可以指定一个只用于特定输出的样式表，如只用于打印，或只用于用浏览器在屏幕上查看。例如，可以创建一个具有打印和屏幕版本共有特征的通用样式表，再创建单独的打印样式表和屏幕样式表，分别包含只用于打印的属性和只用于屏幕显示的属性。

指定与媒体相关的样式表的步骤

  • 在link或style开始标记中添加media="output"，其中output可以是print、screen或all（尽管还有其他一些选项，但这些是最常见的），参见图8.6.1。多个值之间用逗号分隔。

  • 也可以在样式表中使用@media规则，参见图8.6.2。这种方法不需要在link元素中指定媒体类型。

  1. ...
  2. <head>
  3.      <meta charset="UTF-8" />
  4.      <title>El Palau de la Música</title>
  5.      <link rel="stylesheet" href="base.css" media="screen" />
  6.      <link rel="stylesheet" href="print.css" media="print" />
  7. </head>
  8. <body>
  9. ...
  10.      <img src="img/palau250.jpg" width="250" height="163" alt="El Palau de la Música" />
  11.      <img src="img/tickets.jpg" width="87" height="163" alt="The Ticket Window" />
  12. ...
  13. </body>
  14. </html>

图8.6.1　通过对link元素添加media属性，可以将样式表限制于某种特定的输出。在这个例子中，使用浏览器查看页面时，base.css会起作用（由于使用了media="screen"）；打印页面时，print.css会起作用（由于使用了media="print"）

　

提示　media属性的默认值是all，因此声明media="all"是多余的。换句话说，除非需要让样式表具有特殊的输出，否则可以将media属性留空。有的编码人员倾向于始终显式地包含media="all"。

提示　有9种可能的输出类型：all、aural、braille、handheld、print、projection、screen、tty和tv。浏览器对它们的支持程度各不相同（大多只有少量的支持）。实际上，用得上的只有screen和print（或许还应加上all），浏览器对它们的支持情况都很好。另一方面（可以这么说），设备对handheld的支持程度并不高，因此在为移动设备设计时，通常使用screen而不是handheld（参见第12章）。projection类型是为投影仪和其他类似的设备准备的，Opera的投影模式Opera Show支持这种类型。

  1. @charset "UTF-8";
  2. / 针对所有媒体的样式 /
  3. img {
  4.      border: 4px solid red;
  5. }
  6. p {
  7.      color: green;
  8.      font-style: italic;
  9. }
  10. / 打印样式表 /
  11. @media print {
  12.     img {
  13.        display: none;
  14.     }
  15. <b class="calibre3">p {</b>
  16.    <b class="calibre3">color: black;</b>
  17. <b class="calibre3">}</b>
  18. }

图8.6.2　样式表中的@media规则是指定其他媒体类型的另一种方式（参见第12章）。在这个例子中，上面是影响所有媒体类型（包括打印）的样式，下面是专门用于打印的样式。在页面的打印预览模式将看到，图片并未显示（display: none将它们隐藏了），段落文字是黑色的斜体文字。font-style: italic声明也应用于打印模式，因为打印样式表并未指定其他的font-style

提示　更多关于创建打印样式表的信息，参见Christian Krammer的文章：www.smashing-magazine.com/2011/11/24/how-to-set-up-a-print-style-sheet/。