From df821208c608de1b7cdc6fe69ae28724ac1f01a0 Mon Sep 17 00:00:00 2001 From: MDN Date: Thu, 14 Oct 2021 00:47:38 +0000 Subject: [CRON] sync translated content --- .../responsive/media_types/index.html | 390 --------------------- 1 file changed, 390 deletions(-) delete mode 100644 files/zh-cn/web/progressive_web_apps/responsive/media_types/index.html (limited to 'files/zh-cn/web/progressive_web_apps') diff --git a/files/zh-cn/web/progressive_web_apps/responsive/media_types/index.html b/files/zh-cn/web/progressive_web_apps/responsive/media_types/index.html deleted file mode 100644 index aed512780b..0000000000 --- a/files/zh-cn/web/progressive_web_apps/responsive/media_types/index.html +++ /dev/null @@ -1,390 +0,0 @@ ---- -title: 媒体 -slug: Web/Progressive_web_apps/Responsive/Media_types -translation_of: Web/Progressive_web_apps/Responsive/Media_types -original_slug: Web/Guide/CSS/Getting_started/Media ---- -

{{CSSTutorialTOC}} {{previousPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Tables", "表格")}}

- -

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

- -

为不同媒介提供的样式信息

- -

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

- -

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

- -

CSS通过使用 {{CSSXref("@media")}} 来对特定的媒介指定适配规则。

- -
-
示例
- -

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

- -

在标签语言中，导航区域父元素的 id 是 nav-area。（在 {{HTMLVersionInline(5)}}, 可以使用 {{HTMLElement("nav")}} 元素代替带有 id 属性的 {{HTMLElement("div")}}。）

- -

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

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

一些常见的媒介类型:

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

还有其它一些对 CSS 规则指定适用媒介类型的方式。

- -

有些标签语言可能允许在链接引用样式表时指定媒介类型。例如，在 HTML 中，你可以通过在 link 标签上添加 media 属性来指定媒介类型。

- -

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

- -

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

- -

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

- -

接下来将介绍更多 {{cssxref("display")}} 属性的例子: XML data.

-
- -

打印

- -

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

- -

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

- -

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

- -

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

- -
-
示例
- -

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

- -
@page {margin: 1in;} 
- -

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

- -
h1 {page-break-before: always;}
-
-
- -
-
更多细节
- -

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

- -

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

-
- -

用户界面

- -

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

- -

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

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SelectorSelects
E{{cssxref(":hover")}}当鼠标悬浮在此元素上
E{{cssxref(":focus")}}当元素获得键盘焦点
E{{cssxref(":active")}}当元素是当前的活动元素
E{{cssxref(":link")}}当元素超链接到一个 url 但是用户还没有访问过
E{{cssxref(":visited")}}当元素超链接到一个 url 但是用户已经访问过
- -
-

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

-
- -

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

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

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

- -

一些其他的用户界面特性通常会通过属性来应用。例如，禁用或者只读的元素可以设置 disabled 属性和 readonly 属性。选择器可以通过方括: {{mediawiki.external('disabled')}} 或者 {{mediawiki.external('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 MeClick MeClick Me
 
disablednormalactive
-
- -

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

-
- -
-
更多
- -

获取更多关于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. -
  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. -
  3. 在浏览器中查看文档，你会看到它使用的是默认样式。
    4. -
  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
    -
    -
    -
    -
    5. -
- - - - - - - - -
挑战
把指定打印样式的规则转移到单独的CSS文件。 -

学习 {{CSSXref("@import")}} 了解如何将新的指定打印 CSS 文件引用到 style4.css 样式表里去。

- -

当鼠标放在标题时，改变颜色为蓝色。

-
- -

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

- -

接下来?

- -

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

- -

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

-- cgit v1.2.3-54-g00ecf