mozilla
您的搜索结果

    媒体

    本章节是 CSS Getting Started 指南的第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-afterpage-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 属性通过创建轮廓来表明获得键盘焦点。它的作用相当于 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。

    实践: 打印文档

    1. 创建一个新的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>
      
    2. 创建一个新的样式表, 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 */
      
    3. 在浏览器中查看文档,你会看到它使用的是默认样式。
    4. 打印(或者打印预览)文档;样式表的适配规则开始起作用,同时会显示每个页面的页眉和页脚,如果浏览器支持记数器,页码也会被显示出来。
      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 样式表里去。

    当鼠标放在页眉时,改变颜色为蓝色。

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

    接下来?

    如果你还是很难理解这个章节,或者你对它有一些意见或者建议,请在 讨论区 中不吝赐教。

    目前,本文所有的样式规则都可以在文件里面规定。这些规则及其值均是固定的。下面的篇章将会描述该如何使用程序语言 JavaScript 来动态地改变规则。

    文档标签和贡献者

    此页面的贡献者有: ziyunfei, yeol, Chajn, teoli
    最后编辑者: yeol,