From 310fd066e91f454b990372ffa30e803cc8120975 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:56:40 +0100 Subject: unslug zh-cn: move --- files/zh-cn/web/guide/api/dom/index.html | 33 - files/zh-cn/web/guide/api/dom/storage/index.html | 542 ---------------- .../dom/the_structured_clone_algorithm/index.html | 108 ---- .../css/consistent_list_indentation/index.html | 106 --- files/zh-cn/web/guide/css/counters/index.html | 120 ---- .../web/guide/css/css_image_sprites/index.html | 49 -- .../css/css\345\237\272\347\241\200/index.html" | 57 -- .../web/guide/css/getting_started/boxes/index.html | 331 ---------- .../cascading_and_inheritance/index.html | 125 ---- .../web/guide/css/getting_started/color/index.html | 333 ---------- .../guide/css/getting_started/content/index.html | 160 ----- .../css/getting_started/how_css_works/index.html | 121 ---- .../zh-cn/web/guide/css/getting_started/index.html | 59 -- .../css/getting_started/javascript/index.html | 172 ----- .../guide/css/getting_started/layout/index.html | 368 ----------- .../web/guide/css/getting_started/lists/index.html | 324 ---------- .../web/guide/css/getting_started/media/index.html | 391 ----------- .../css/getting_started/readable_css/index.html | 167 ----- .../guide/css/getting_started/selectors/index.html | 414 ------------ .../css/getting_started/svg_and_css/index.html | 191 ------ .../guide/css/getting_started/tables/index.html | 509 --------------- .../css/getting_started/text_styles/index.html | 158 ----- .../css/getting_started/what_is_css/index.html | 115 ---- .../css/getting_started/why_use_css/index.html | 105 --- files/zh-cn/web/guide/css/media_queries/index.html | 412 ------------ .../guide/css/scaling_background_images/index.html | 114 ---- .../web/guide/css/testing_media_queries/index.html | 90 --- .../adding_z-index/index.html | 158 ----- .../web/guide/css/understanding_z_index/index.html | 47 -- .../stacking_and_float/index.html | 158 ----- .../stacking_context_example_1/index.html | 133 ---- .../stacking_context_example_2/index.html | 142 ---- .../stacking_context_example_3/index.html | 190 ------ .../stacking_without_z-index/index.html | 161 ----- .../the_stacking_context/index.html | 240 ------- .../web/guide/css/using_css_gradients/index.html | 717 --------------------- .../css/using_multi-column_layouts/index.html | 130 ---- .../using_the__colon_target_selector/index.html | 68 -- .../guide/css/visual_formatting_model/index.html | 282 -------- .../web/guide/html/content_editable/index.html | 219 ------- .../rich-text_editing_in_mozilla/index.html | 272 -------- .../web/guide/html/editable_content/index.html | 219 +++++++ .../rich-text_editing_in_mozilla/index.html | 272 ++++++++ files/zh-cn/web/guide/html/email_links/index.html | 86 --- .../zh-cn/web/guide/html/forms_in_html/index.html | 144 ----- files/zh-cn/web/guide/html/html/index.html | 181 ------ .../guide/html/html5/html5_element_list/index.html | 591 ----------------- .../html5/html5_thematic_classification/index.html | 169 ----- .../index.html | 377 ----------- .../index.html | 213 ------ .../guide/html/using_data_attributes/index.html | 80 --- .../html/using_html5_audio_and_video/index.html | 275 -------- .../using_html_sections_and_outlines/index.html | 377 +++++++++++ .../introduction_to_web_development/index.html | 28 + files/zh-cn/web/guide/woff/index.html | 61 ++ 55 files changed, 957 insertions(+), 10707 deletions(-) delete mode 100644 files/zh-cn/web/guide/api/dom/index.html delete mode 100644 files/zh-cn/web/guide/api/dom/storage/index.html delete mode 100644 files/zh-cn/web/guide/api/dom/the_structured_clone_algorithm/index.html delete mode 100644 files/zh-cn/web/guide/css/consistent_list_indentation/index.html delete mode 100644 files/zh-cn/web/guide/css/counters/index.html delete mode 100644 files/zh-cn/web/guide/css/css_image_sprites/index.html delete mode 100644 "files/zh-cn/web/guide/css/css\345\237\272\347\241\200/index.html" delete mode 100644 files/zh-cn/web/guide/css/getting_started/boxes/index.html delete mode 100644 files/zh-cn/web/guide/css/getting_started/cascading_and_inheritance/index.html delete mode 100644 files/zh-cn/web/guide/css/getting_started/color/index.html delete mode 100644 files/zh-cn/web/guide/css/getting_started/content/index.html delete mode 100644 files/zh-cn/web/guide/css/getting_started/how_css_works/index.html delete mode 100644 files/zh-cn/web/guide/css/getting_started/index.html delete mode 100644 files/zh-cn/web/guide/css/getting_started/javascript/index.html delete mode 100644 files/zh-cn/web/guide/css/getting_started/layout/index.html delete mode 100644 files/zh-cn/web/guide/css/getting_started/lists/index.html delete mode 100644 files/zh-cn/web/guide/css/getting_started/media/index.html delete mode 100644 files/zh-cn/web/guide/css/getting_started/readable_css/index.html delete mode 100644 files/zh-cn/web/guide/css/getting_started/selectors/index.html delete mode 100644 files/zh-cn/web/guide/css/getting_started/svg_and_css/index.html delete mode 100644 files/zh-cn/web/guide/css/getting_started/tables/index.html delete mode 100644 files/zh-cn/web/guide/css/getting_started/text_styles/index.html delete mode 100644 files/zh-cn/web/guide/css/getting_started/what_is_css/index.html delete mode 100644 files/zh-cn/web/guide/css/getting_started/why_use_css/index.html delete mode 100644 files/zh-cn/web/guide/css/media_queries/index.html delete mode 100644 files/zh-cn/web/guide/css/scaling_background_images/index.html delete mode 100644 files/zh-cn/web/guide/css/testing_media_queries/index.html delete mode 100644 files/zh-cn/web/guide/css/understanding_z_index/adding_z-index/index.html delete mode 100644 files/zh-cn/web/guide/css/understanding_z_index/index.html delete mode 100644 files/zh-cn/web/guide/css/understanding_z_index/stacking_and_float/index.html delete mode 100644 files/zh-cn/web/guide/css/understanding_z_index/stacking_context_example_1/index.html delete mode 100644 files/zh-cn/web/guide/css/understanding_z_index/stacking_context_example_2/index.html delete mode 100644 files/zh-cn/web/guide/css/understanding_z_index/stacking_context_example_3/index.html delete mode 100644 files/zh-cn/web/guide/css/understanding_z_index/stacking_without_z-index/index.html delete mode 100644 files/zh-cn/web/guide/css/understanding_z_index/the_stacking_context/index.html delete mode 100644 files/zh-cn/web/guide/css/using_css_gradients/index.html delete mode 100644 files/zh-cn/web/guide/css/using_multi-column_layouts/index.html delete mode 100644 files/zh-cn/web/guide/css/using_the__colon_target_selector/index.html delete mode 100644 files/zh-cn/web/guide/css/visual_formatting_model/index.html delete mode 100644 files/zh-cn/web/guide/html/content_editable/index.html delete mode 100644 files/zh-cn/web/guide/html/content_editable/rich-text_editing_in_mozilla/index.html create mode 100644 files/zh-cn/web/guide/html/editable_content/index.html create mode 100644 files/zh-cn/web/guide/html/editable_content/rich-text_editing_in_mozilla/index.html delete mode 100644 files/zh-cn/web/guide/html/email_links/index.html delete mode 100644 files/zh-cn/web/guide/html/forms_in_html/index.html delete mode 100644 files/zh-cn/web/guide/html/html/index.html delete mode 100644 files/zh-cn/web/guide/html/html5/html5_element_list/index.html delete mode 100644 files/zh-cn/web/guide/html/html5/html5_thematic_classification/index.html delete mode 100644 files/zh-cn/web/guide/html/sections_and_outlines_of_an_html5_document/index.html delete mode 100644 files/zh-cn/web/guide/html/tips_for_authoring_fast-loading_html_pages/index.html delete mode 100644 files/zh-cn/web/guide/html/using_data_attributes/index.html delete mode 100644 files/zh-cn/web/guide/html/using_html5_audio_and_video/index.html create mode 100644 files/zh-cn/web/guide/html/using_html_sections_and_outlines/index.html create mode 100644 files/zh-cn/web/guide/introduction_to_web_development/index.html create mode 100644 files/zh-cn/web/guide/woff/index.html (limited to 'files/zh-cn/web/guide') diff --git a/files/zh-cn/web/guide/api/dom/index.html b/files/zh-cn/web/guide/api/dom/index.html deleted file mode 100644 index e09b7ab597..0000000000 --- a/files/zh-cn/web/guide/api/dom/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: DOM 开发者指南 -slug: Web/Guide/API/DOM -tags: - - API - - DOM - - Guide - - NeedsTranslation - - TopicStub -translation_of: Web/API/Document_Object_Model -translation_of_original: Web/Guide/API/DOM ---- -

{{draft}}

- -

文档对象模型（ Document Object Model） 是为 HTML 和XML 文档编写的应用程序接口。它为文档提供了结构化的描述, 使得开发者能够修改它们的内容和展现方式. 更重要的是, 它可以将网页与脚本或编程语言连接起来。

- -

开发者能用来修改和创建网页的所有性质、方法和事件都被组织到对象( objects)中， (例如, document 对象代表着文档本身，table 对象代表 一个 HTML 表格元素等等)。在较新的网络浏览器中，这些对象都可以用脚本语言获取。

- -

DOM模型常被用来与 JavaScript交互。然而，DOM是独立于任何编程语言之外而设计的，这使得文档的结构化描述可以从一个单个、兼容的接口获取，尽管我们青睐于Javascript,但我们可以为任何语言创建DOM的引用接口。

- -

万维网联盟组织（ World Wide Web Consortium ）为DOM建立了一套标准， 叫做 W3C DOM。它被如今大多数主流浏览器所支持，使得可以开发出强大的跨浏览器应用。

- -

为什么DOM很重要？

- -

"动态超文本链接语言" (DHTML) 是一个被一些开发者们用来描述结合HTML、样式表、脚本而使文档富有动态效果技术的名词。 W3C DOM工作组致力于开发可操作的、不受语言限制并被大家所认同的解决方案 (可参见 W3C 问答).

- -

正如 Mozilla 的标题"网络应用程序平台”所强调的, 对DOM的支持是核心的特点，也是Mozilla能取代其它浏览器所必需的特点。更为重要的事实是--Mozilla（包括Firefox和Thunderbird）的用户界面都是用XUL创建的，并且用DOM修改自己的用户界面。

- -

更多关于DOM的内容

- -

{{LandingPageListSubpages}}

- -

 

diff --git a/files/zh-cn/web/guide/api/dom/storage/index.html b/files/zh-cn/web/guide/api/dom/storage/index.html deleted file mode 100644 index 194b71a94a..0000000000 --- a/files/zh-cn/web/guide/api/dom/storage/index.html +++ /dev/null @@ -1,542 +0,0 @@ ---- -title: Storage -slug: Web/Guide/API/DOM/Storage -translation_of: Web/API/Web_Storage_API -translation_of_original: Web/Guide/API/DOM/Storage ---- -

- 概述

-

- DOM存储是一套在Web Applications 1.0 规范中首次引入的与存储相关的特性的总称, 现在已经分离出来,单独发展成为独立的W3C Web存储规范. DOM存储被设计为用来提供一个更大存储量,更安全,更便捷的存储方法,从而可以代替掉将一些不需要让服务器知道的信息存储到cookies里的这种传统方法.该特性在Firefox 2 和 Safari 4中首次引入.

-
- 注意: DOM存储有别于mozStorage (Mozilla的XPCOM接口,用来访问SQLite) 也有别于Session store API (一个XPCOM 存储工具,主要为扩展程序使用).
-

- 描述

-

- DOM存储的机制是通过存储字符串类型的键/值对,来提供一种安全的存取方式.这个附加功能的目标是提供一个全面的,可以用来创建交互式应用程序的方法(包括那些高级功能,例如可以离线工作一段时间).

-

- 基于Mozilla的浏览器, Internet Explorer 8+, Safari 4+ 以及 Chrome 都提供了自己的DOM存储规范的实现. (如果你想让自己的代码兼容多个浏览器,则你需要照顾一下老版本的IE浏览器,IE下有一个类似的特性,在IE8之前版本也可以使用,叫做"userData behavior",它允许你在多重浏览器会话中永久地保存数据.)

-

- DOM存储很有用，因为在浏览器端没有好的方法来持久保存大量数据。浏览器cookie的能力有限，而且不支持组织持久数据，其他方法（如flash本地存储）需要外部插件支持。

-

- 由Aaron Boodman编写的halfnote（笔记类应用程序）是第一批使用新的DOM存储功能（不包括internet explorer的userData behavior）开发的公开应用程序之一。在这个应用里，Aaron同时将笔记保存到服务器（当网络可用时）和本地，这允许使用者即使在不稳定的网络环境下也能安全的记录备注事项。

-

- 虽然halfnote的理念和实现比较简单，但是halfnote的创新展示了一种在线上和线下都可用的新型web应用的可能性。

-

- 参考

-

- 以下所提到的对象都是全局对象，作为 window 对象 的属性存在。这意味着可以以 sessionStorage 或者 window.sessionStorage 的形式访问这些对象。(这点很重要，因为可以使用iframe来存储、访问除了直接包含在页面的数据之外的附加数据。)

-

- Storage

-

- 它是所有Storage实例（sessionStorage和globalStorage[location.hostname]）的构造函数，设置Storage.prototype.removeKey = function(key) { this.removeItem(this.key(key)) }，可通过localStorage.removeKey 和 sessionStorage.removeKey访问到。

-

- globalStorage对象不是Storage的实例，而是StorageObsolete的一个实例。

-

- Storage被定义在WhatWG Storage Interface 中,如下:

-
interface Storage {
-  readonly attribute unsigned long length;
-  [IndexGetter] DOMString key(in unsigned long index);
-  [NameGetter] DOMString getItem(in DOMString key);
-  [NameSetter] void setItem(in DOMString key, in DOMString data);
-  [NameDeleter] void removeItem(in DOMString key);
-  void clear();
-};
-
-
- 注意：虽然可以直接通过标准的 JavaScript 属性访问方法来设置和读取值，但是推荐的做法是使用 getItem 和 setItem 方法。
-
- 注意：需要时刻注意的一点是，所有数据在被保存到下面将要介绍的任何一个存储器之前，都将通过它的 .toString 方法被转换成字符串。所以一个普通对象将会被存储为 "[object Object]"，而不是对象本身或者它的 JSON 形式。使用浏览器自身提供的 JSON 解析和序列化方法来存取对象是比较好的，也是比较常见的方法。
-

- sessionStorage

-

- sessionStorage 是个全局对象，它维护着在页面会话(page session)期间有效的存储空间。只要浏览器开着，页面会话周期就会一直持续。当页面重新载入(reload)或者被恢复(restores)时，页面会话也是一直存在的。每在新标签或者新窗口中打开一个新页面，都会初始化一个新的会话。 

-
// 保存数据到当前会话的存储空间
-sessionStorage.setItem("username", "John");
-
-// 访问数据
-alert( "username = " + sessionStorage.getItem("username"));
-
-

- 当浏览器被意外刷新的时候，一些临时数据应当被保存和恢复。sessionStorage 对象在处理这种情况的时候是最有用的。

-

- {{ fx_minversion_note("3.5", "在Firefox 3.5之前的版本中,如果浏览器意外崩溃,则在重启后,sessionStorage中保存的数据不会被恢复.之后的版本中,会恢复上次崩溃前的sessionStorage数据.") }}

-

- 例子:

-

- 自动保存一个文本域中的内容，如果浏览器被意外刷新，则恢复该文本域中的内容，所以不会丢失任何输入的数据。

-
 // 获取到我们要循环保存的文本域
- var field = document.getElementById("field");
-
- // 查看是否有一个自动保存的值
- // (只在浏览器被意外刷新时)
- if ( sessionStorage.getItem("autosave")) {
-    // 恢复文本域中的内容
-    field.value = sessionStorage.getItem("autosave");
- }
-
- // 每隔一秒检查文本域中的内容
- setInterval(function(){
-    // 并将文本域的值保存到session storage对象中
-    sessionStorage.setItem("autosave", field.value);
- }, 1000);
-
-

- 更多信息:

- -

- localStorage

-

- localStorage is the same as sessionStorage with same same-origin rules applied but it is persistent. localStorage was introduced in Firefox 3.5.

-
- 注意：当浏览器进入私人模式(private browsing mode，Google Chrome 上对应的应该是叫隐身模式)的时候，会创建一个新的、临时的、空的数据库，用以存储本地数据(local storage data)。当浏览器关闭时，里面的所有数据都将被丢弃。
-

- 兼容性

-

- 这些 Storage 对象最近刚被加入标准当中，所以并不是所有的浏览器都支持。如果你想在没有原生支持 localStorage 对象的浏览器中使用它，可以在你编写的 JavaScript 代码的首部插入下面两段代码中的任意一段。

-

- This algorithm is an exact imitation of the localStorage object, but making use of cookies.

-
if (!window.localStorage) {
-  Object.defineProperty(window, "localStorage", new (function () {
-    var aKeys = [], oStorage = {};
-    Object.defineProperty(oStorage, "getItem", {
-      value: function (sKey) { return sKey ? this[sKey] : null; },
-      writable: false,
-      configurable: false,
-      enumerable: false
-    });
-    Object.defineProperty(oStorage, "key", {
-      value: function (nKeyId) { return aKeys[nKeyId]; },
-      writable: false,
-      configurable: false,
-      enumerable: false
-    });
-    Object.defineProperty(oStorage, "setItem", {
-      value: function (sKey, sValue) {
-        if(!sKey) { return; }
-        document.cookie = escape(sKey) + "=" + escape(sValue) + "; path=/";
-      },
-      writable: false,
-      configurable: false,
-      enumerable: false
-    });
-    Object.defineProperty(oStorage, "length", {
-      get: function () { return aKeys.length; },
-      configurable: false,
-      enumerable: false
-    });
-    Object.defineProperty(oStorage, "removeItem", {
-      value: function (sKey) {
-        if(!sKey) { return; }
-        var sExpDate = new Date();
-        sExpDate.setDate(sExpDate.getDate() - 1);
-        document.cookie = escape(sKey) + "=; expires=" + sExpDate.toGMTString() + "; path=/";
-      },
-      writable: false,
-      configurable: false,
-      enumerable: false
-    });
-    this.get = function () {
-      var iThisIndx;
-      for (var sKey in oStorage) {
-        iThisIndx = aKeys.indexOf(sKey);
-        if (iThisIndx === -1) { oStorage.setItem(sKey, oStorage[sKey]); }
-        else { aKeys.splice(iThisIndx, 1); }
-        delete oStorage[sKey];
-      }
-      for (aKeys; aKeys.length > 0; aKeys.splice(0, 1)) { oStorage.removeItem(aKeys[0]); }
-      for (var iCouple, iKey, iCouplId = 0, aCouples = document.cookie.split(/\s*;\s*/); iCouplId < aCouples.length; iCouplId++) {
-        iCouple = aCouples[iCouplId].split(/\s*=\s*/);
-        if (iCouple.length > 1) {
-          oStorage[iKey = unescape(iCouple[0])] = unescape(iCouple[1]);
-          aKeys.push(iKey);
-        }
-      }
-      return oStorage;
-    };
-    this.configurable = false;
-    this.enumerable = true;
-  })());
-}
-
-
- Note: The maximum size of data that can be saved is severely restricted by the use of cookies. With this algorithm, use the functions localStorage.setItem() and localStorage.removeItem() to add, change or remove a key. The use of methods localStorage.yourKey = yourValue; and delete localStorage.yourKey; to set or delete a key is not a secure way with this code. You can also change its name and use it only to manage a document's cookies regardless of the localStorage object.
-

- Here is another, less exact, imitation of the localStorage object. It is simpler than the previous one, but it is compatible with old browsers, like Internet Explorer < 8. It also makes use of cookies.

-
if (!window.localStorage) {
-  window.localStorage = {
-    getItem: function (sKey) {
-      if (!sKey || !this.hasOwnProperty(sKey)) { return null; }
-      return unescape(document.cookie.replace(new RegExp("(?:^|.*;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*"), "$1"));
-    },
-    key: function (nKeyId) { return unescape(document.cookie.replace(/\s*\=(?:.(?!;))*$/, "").split(/\s*\=(?:[^;](?!;))*[^;]?;\s*/)[nKeyId]); },
-    setItem: function (sKey, sValue) {
-      if(!sKey) { return; }
-      document.cookie = escape(sKey) + "=" + escape(sValue) + "; path=/";
-      this.length = document.cookie.match(/\=/g).length;
-    },
-    length: 0,
-    removeItem: function (sKey) {
-      if (!sKey || !this.hasOwnProperty(sKey)) { return; }
-      var sExpDate = new Date();
-      sExpDate.setDate(sExpDate.getDate() - 1);
-      document.cookie = escape(sKey) + "=; expires=" + sExpDate.toGMTString() + "; path=/";
-      this.length--;
-    },
-    hasOwnProperty: function (sKey) { return (new RegExp("(?:^|;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie); }
-  };
-  window.localStorage.length = (document.cookie.match(/\=/g) || window.localStorage).length;
-}
-
-
- Note: The maximum size of data that can be saved is severely restricted by the use of cookies. With this algorithm, use the functions localStorage.getItem(), localStorage.setItem() and localStorage.removeItem() to get, add, change or remove a key. The use of method localStorage.yourKey in order to get, set or delete a key is not permitted with this code. You can also change its name and use it only to manage a document's cookies regardless of the localStorage object.
-
- 与 globalStorage 的关系的兼容性
-

- localStorage is also the same as globalStorage[location.hostname], with the exception of being scoped to an HTML5 origin (scheme + hostname + non-standard port) and localStorage being an instance of Storage as opposed to globalStorage[location.hostname] being an instance of StorageObsolete which is covered below. 例如，在 http://example.com 中不能访问 https://example.com 中的 localStorage 对象，但是它们都可以访问同一个 globalStorage。 localStorage 是个标准接口，但 globalStorage 是非标准的。所以你的代码最好不要依赖这些关系。

-

- Please note that setting a property on globalStorage[location.hostname] does not set it on localStorage and extending Storage.prototype does not affect globalStorage items, only extending StorageObsolete.prototype does.

-

- globalStorage

-

- {{ Non-standard_header() }}{{ obsolete_header("13.0") }}globalStorage is obsolete since Gecko 1.9.1 (Firefox 3.5) and unsupported since Gecko 13 (Firefox 13). Just use {{ Anch("localStorage") }} instead. This proposed addition to HTML 5 has been removed from the HTML 5 specification in favor of <code>localStorage</code>, which is implemented in Firefox 3.5. This is a global object (globalStorage) that maintains multiple private storage areas that can be used to hold data over a long period of time (e.g. over multiple pages and browser sessions).

-
- Note: globalStorage is not a Storage instance, but a StorageList instance containing StorageObsolete instances.
-
// Save data that only scripts on the mozilla.org domain can access
-globalStorage['mozilla.org'].setItem("snippet", "<b>Hello</b>, how are you?");
-
-

- Specifically, the globalStorage object provides access to a number of different storage objects into which data can be stored. For example, if we were to build a web page that used globalStorage on this domain (developer.mozilla.org) we'd have the following storage object available to us:

- -

- 例子:

-

- All of these examples require that you have a script inserted (with each of the following code) in every page that you want to see the result on.

-

- Remember a user's username for the particular sub-domain that is being visited:

-
 globalStorage['developer.mozilla.org'].setItem("username", "John");
-
-

- Keep track of the number of times that a user visits all pages of your domain:

-
 // parseInt must be used since all data is stored as a string
- globalStorage['mozilla.org'].setItem("visits", parseInt(globalStorage['mozilla.org'].getItem("visits") || 0 ) + 1);
-
-

- 存储位置以及清除数据

-

- In Firefox the DOM storage data is stored in the webappsstore.sqlite file in the profile folder (there's also chromeappsstore.sqlite file used to store browser's own data, notably for the start page - about:home, but potentially for other internal pages with "about:" URLs).

- -

- See also clearing offline resources cache.

-

- 更多信息

- -

- 例子

- -

- 浏览器兼容性

-

- {{ CompatibilityTable() }}

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Feature - Chrome - Firefox (Gecko) - Internet Explorer - Opera - Safari (WebKit)
- localStorage - 4 - 3.5 - 8 - 10.50 - 4
- sessionStorage - 5 - 2 - 8 - 10.50 - 4
- globalStorage - {{ CompatNo() }} - 2-13 - {{ CompatNo() }} - {{ CompatNo() }} - {{ CompatNo() }}
-
-
- - - - - - - - - - - - - - - - - - - -
- Feature - Android - Firefox Mobile (Gecko) - IE Phone - Opera Mobile - Safari Mobile
- Basic support - {{ CompatUnknown() }} - {{ CompatUnknown() }} - {{ CompatUnknown() }} - {{ CompatUnknown() }} - {{ CompatUnknown() }}
-
-

- All browsers have varying capacity levels for both local- and sessionStorage. Here is a detailed rundown of all the storage capacities for various browsers.

-

-  

-

- 相关链接

- -

- {{ HTML5ArticleTOC() }}

-

- {{ languages( { "es": "es/DOM/Almacenamiento", "fr": "fr/DOM/Storage", "ja": "ja/DOM/Storage", "pl": "pl/DOM/Storage", "en": "en/DOM/Storage" } ) }}

-

- ---------------------------------

-

-  

-

- 摘要

-

- DOM Storage，就是在Web Applications 1.0 specification中介绍的那些存储相关特性集合的名称。相比较在cookies中存储信息来说，DOM Stroage更大、更安全、更易于使用的。目前支持的浏览器包括Mozilla Firefox 2+, Google Chrome, Apple Safari, Opera和Microsoft IE9+,在移动设备上也包括iPhone & iPad Safari。

-
- Note: DOM Storage 与 mozStorage （Mozilla对于SQLite的XPCOM接口）和Session store API(扩展使用的一个XPCOM存储).不同
-

- 描述

-

- DOM Storage机制是一种通过字符串形式的名／值对来安全地存储和使用的方法。这个附加功能的目标是提供一个更全面的、可以创建交互式应用程序的方法（包括那些高级功能，例如可以离线工作一段时间）。

-

- 目前，只有基于Mozilla的浏览器提供了DOM Storage的实现。不过，Internet Explorer也有一个类似的特性，叫做"userData behavior"，他允许你在多重浏览器会话中永久地保存数据。

-

- DOM Storage 是很有用的，因为在任何一段时期都没有一个很好的、只通过浏览器来永久存储合理大小的数据的方法。浏览器cookies 限制了存储容量，而且并没有为组织永久性的数据提供支持，并且其他的方法还需要外部插件来实现（例如Flash Local Storage）。

-

- 第一个使用了新的DOM Storage功能(除了Internet Explorer 的 userData Behavior之外)的公共应用程序是由 Aaron Boodman 写的 halfnote(一个便签应用程序) 。在他的程序中，Aaron同时把便签内容保存到服务器上（当Internet连接可用时）和一个本地数据存储中。这就允许用户即便是在不定式发生internet连接中断时，也可以安全的写一些有备份的便签。

-

- 不过，在halfnote中表现出来的概念和实现，都还是相对简单的。它的诞生揭示了一种新的、可以在线或离线使用的网络应用程序。

-

- 参考

-

- 下面的内容都是作为每个window 对象的属性存在的全局对象。这也就是说，可以通过sessionStorage 或者 window.sessionStorage 来访问它们。（这很重要，因为随后你可以使用iframe来存储、访问、添加那些并不是立刻就包含在你页面中的数据。）

-

- sessionStorage

-

- 这是一个全局对象（sessionStorage），它含有一个在页面会话有效期内可用的存储区域。只要页面没有关闭，一个页面会话就始终保持着，并且当页面被重新载入或恢复时“复活”。打开一个新的标签页或新窗口都会初始化新的会话。

-
// 将数据存入当前会话的一个存储中
-sessionStorage.username = "John";
-
-// 访问某些已存储的数据
-alert( "username = " + sessionStorage.username );
-
-

- sessionStorage 对象是最有用的，它持有那些应该保存的临时数据，而且一旦浏览器突然被刷新时，要恢复的那些数据，

-
- Note: sessionStorage 还应该有在浏览器崩溃后存储和恢复数据的功能，不过由于{{ Bug(339445) }}的原因，这个功能到现在还没有在Firefox中实现。这个功能实现之后，sessionStorage的防御功能就十分有用了。
-

- 举例:

-

- 自动保存文本字段的内容，如果浏览器突然被刷新，就恢复字段内容，这样就不会丢失任何输入了。

-
 // 获得我们要跟踪的那个文本字段
- var field = document.getElementById("field");
-
- // 看看我们是否有一个autosave的值
- // (这将只会在页面被突然刷新时发生)
- if ( sessionStorage.autosave ) {
-     // 恢复文本字段中的内容
-     field.value = sessionStorage.autosave;
- }
-
- // 每秒钟检查一次文本字段的内容
- setInterval(function(){
-     // 并把结果保存到会话存储对象中
-     sessionStorage.autosave = field.value;
- }, 1000);
-
-

- 更多信息:

- -

- globalStorage

-

- 这是一个全局对象(globalStorage)，它维护着各种公共的或者私有的，可以用来长时期保存数据的存储空间（例如，在多重的页面和浏览器会话之间）。

-
// 可以这样访问那些仅对mozilla.org域上的脚本保存的数据
-globalStorage['mozilla.org'].snippet = "<b>Hello</b>, how are you?";
-
-// 可以这样访问为任何网页任何域存储的数据
-globalStorage[''].favBrowser = "Firefox";
-
-

- 特别地，globalStorage对象，提供了访问一些不同的可以保存数据的存储对象的方法。例如，如果我们要建立一个可以在域(developer.mozilla.org)下面可以使用globalStorage的网页，我们有下面这些存储对象可以使用：

- -
- 注意: firefox目前还没有实现globalStorage{{ mediawiki.external('tld') }} 和 globalStorage{{ mediawiki.external('') }} （会抛出一个安全错误），这是由于对于这些名字空间可以进行随意读写的话是有安全漏洞的 更多信息
-

- 示例:

-

- 下面这些示例，需要你在所有想看到效果的页面中都插入脚本（包括如下所有的代码）。

-

- 记录某个指定子域名下面正在访问的用户的username：

-
 globalStorage['developer.mozilla.org'].username = "John";
-
-

- 跟踪一个用户在你的域名下所访问的所有页面的次数：

-
 // 由于所有数据都是被当作一个字符串来保存的，所以这里必须使用parseInt
- globalStorage['mozilla.org'].visits =
-     parseInt( globalStorage['mozilla.org'].visits || 0 ) + 1;
-
-

- 记录所有你访问的网站：

-
 globalStorage[''].sites += "," + location.hostname;
-
-

- 更多信息:

- -

- More information

- -

- Examples

- - - diff --git a/files/zh-cn/web/guide/api/dom/the_structured_clone_algorithm/index.html b/files/zh-cn/web/guide/api/dom/the_structured_clone_algorithm/index.html deleted file mode 100644 index 60444f8dc4..0000000000 --- a/files/zh-cn/web/guide/api/dom/the_structured_clone_algorithm/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: 结构化克隆算法 -slug: Web/Guide/API/DOM/The_structured_clone_algorithm -tags: - - DOM - - HTML5 - - 结构化克隆算法 -translation_of: Web/API/Web_Workers_API/Structured_clone_algorithm ---- -

结构化克隆算法是由HTML5规范定义的用于复制复杂JavaScript对象的算法。通过来自 Workers的 postMessage() 或使用 IndexedDB 存储对象时在内部使用。它通过递归输入对象来构建克隆，同时保持先前访问过的引用的映射，以避免无限遍历循环。

- -

结构化克隆所不能做到的

- - - -

支持的类型

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
对象类型注意
所有的原始类型symbols 除外
Boolean 对象 
String 对象 
Date 
RegExplastIndex 字段不会被保留。
{{ domxref("Blob") }} 
{{ domxref("File") }} 
{{ domxref("FileList") }} 
ArrayBuffer 
ArrayBufferView这基本上意味着所有的 类型化数组 ，如 Int32Array 等。
{{ domxref("ImageData") }} 
Array 
Object仅包括普通对象（如对象字面量）
Map 
Set 
- -

相关链接

- - diff --git a/files/zh-cn/web/guide/css/consistent_list_indentation/index.html b/files/zh-cn/web/guide/css/consistent_list_indentation/index.html deleted file mode 100644 index 1426940c48..0000000000 --- a/files/zh-cn/web/guide/css/consistent_list_indentation/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: 调整列表缩进 -slug: Web/Guide/CSS/Consistent_list_indentation -tags: - - CSS - - Guide - - NeedsUpdate - - Web - - 列表 - - 缩进 -translation_of: Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation ---- -

对列表最常见的样式修改之一是改变缩进距离，即列表项向右侧移动的距离。令人沮丧的是，缩进在一个浏览器中的表现常常与其他浏览器中的效果不尽相同。例如，如果声明列表的左边距为0，在IE浏览器中生效，但是在基于Gecko引擎的浏览器中却不起作用。本文将帮助你理解这些可能发生的问题，以及如何避免这些问题的产生。

- -

为了弄明白这是为什么，以及如何避免这些问题发生，有必要研究一下列表结构的具体细节。

- -

创建一个列表

- -

首先，来看一个简单，单独的列表项目。该列表项目没有标记符号（或称之为“着重号”），并且没有被列表包裹起来。如下图图1所示，单独的列表项是无效的，简单且没有任何装饰。

- -

Figure 1

- -

红色的虚线边框代表列表项目内容区域的外边界。记住，从这一点上看，这个列表项目没有内边距和边框。如果我们再添加两个列表项目，我们得到下面的结果，如图2所示。

- -

Figure 2

- -

现在我们在外面加上父元素；这个例子中，我们使用一个无序列表(i.e., <ul>)。根据 CSS 盒子模型，列表项目的盒子必须显示在其父元素的内容区域里。因为这里的父元素既没有 padding 也没有 margin，所以我们得到下面的结果，如图3所示。

- -

Figure 3

- -

这里，蓝色的虚线边框表示 <ul> 元素内容区域的边缘。因为我们没有给 <ul> 元素添加内边距,  所以它的内容的包裹层紧贴在三个列表项外。

- -

现在我们来添加列表项目标记，由于这是一个无序列表，我们添加传统的实心圆“着重标记”，如下图图4所示。

- -

Figure 4

- -

可以看到，这些标记符号在<ul>内容区域的外面，但这无关紧要。重要的是，这些标记被放到主要的<li>元素盒子外面了。它们有点像列表项目的附件，在<li>的内容区域外游荡，但依然依附于<li>。

- -

这就是为什么在除了IE浏览器以外的所有浏览器上，标记符号都被放在<li>元素的边框外，假设列表项位置的值为外部"outside"。如果该值被改为内部"inside"，则标记符号会被放到<li>的内容区域里面，像是放在<li>最开头的内联盒子一样。

- -

二次缩进

- -

So how will all this appear in a document? At the moment, we have a situation analogous to these styles:

- -
ul, li {margin-left: 0; padding-left: 0;}
- -

If we dropped this list into a document as-is, there would be no apparent indentation and the markers would be in danger of falling off the left edge of the browser window.

- -

In order to avoid this and get some indentation, there are really only three options available to browser implementors.

- -
    -
  1. Give each <li> element a left margin.
    2. -
  2. Give the <ul> element a left margin.
    3. -
  3. Give the <ul> element some left padding.
    4. -
- -

As it turns out, nobody seems to have used the first option. The second option was taken by Internet Explorer for Windows and Macintosh, and Opera. The third was adopted by Gecko, and by extension all the browsers that embed it.

- -

Let's look at the two approaches for a moment. In Internet Explorer and Opera, the lists are indented by setting a left margin of 40 pixels on the <ul> element. If we apply a background color to the <ul> element and leave the list item and <ul> borders in place, we get the result shown in Figure 5.

- -

Figure 5

- -

Gecko, on the other hand, sets a left padding of 40 pixels for the <ul> element, so given the exact same styles as were used to produce Figure 5, loading the example into a Gecko-based browser gives us Figure 6.

- -

Figure 6

- -

As we can see, the markers remain attached to the <li> elements, no matter where they are. The difference is entirely in how the <ul> is styled. We can only see the difference if we try to set a background or border on the <ul> element.

- -

Finding Consistency

- -

Boil it all down, and what we're left with is this: if you want consistent rendering of lists between Gecko, Internet Explorer, and Opera, you need to set both the left margin and left padding of the <ul> element. We can ignore <li> altogether for these purposes. If you want to reproduce the default display in Netscape 6.x, you write:

- -
ul {margin-left: 0; padding-left: 40px;}
- -

If you're more interested in following the Internet Explorer/Opera model, then:

- -
ul {margin-left: 40px; padding-left: 0;}
- -

Of course, you can fill in your own preferred values. Set both to 1.25em, if you like -- there's no reason why you have to stick with pixel-based indentation. If you want to reset lists to have no indentation, then you still have to zero out both padding and margin:

- -
ul {margin-left: 0; padding-left: 0;}
- -

Remember, though, that in so doing, you'll have the bullets hanging outside the list and its parent element. If the parent is the body, there's a strong chance your bullets will be completely outside the browser window, and thus will not be visible.

- -

结论

- -

In the end, we can see that none of the browsers mentioned in this article is right or wrong about how they lay out lists. They use different default styles, and that's where the problems creep in. By making sure you style both the left padding and left margin of lists, you can find much greater cross-browser consistency in your list indentation.

- -

建议

- - - -
-

原始文档信息

- - -
- -

{{ languages( { "fr": "fr/Indentation_homog\u00e8ne_des_listes" } ) }}

diff --git a/files/zh-cn/web/guide/css/counters/index.html b/files/zh-cn/web/guide/css/counters/index.html deleted file mode 100644 index 4a8fa17797..0000000000 --- a/files/zh-cn/web/guide/css/counters/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: 使用CSS计数器 -slug: Web/Guide/CSS/Counters -tags: - - CSS - - CSS List - - Web - - counter - - 教程 -translation_of: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters ---- -
{{CSSRef}}
- -

本质上CSS计数器是由CSS维护的变量，这些变量可能根据CSS规则增加以跟踪使用次数。这允许你根据文档位置来调整内容表现。 CSS计数器是CSS2.1中自动计数编号部分的实现。

- -

计数器的值通过使用{{cssxref("counter-reset")}} 和 {{cssxref("counter-increment")}} 操作，在 content 上应用 counter() 或 counters()函数来显示在页面上。

- -

使用计数器

- -

使用CSS计数器之前，必须重置一个值，默认是0。使用{{cssxref("counter()")}}函数来给元素增加计数器。 下面的CSS给每个h3元素的前面增加了 "Section <计算器值>:"。

- -
body {
-  counter-reset: section;           /* 重置计数器成0 */
-}
-h3:before {
-  counter-increment: section;      /* 增加计数器值 */
-  content: "Section " counter(section) ": "; /* 显示计数器 */
-}
-
- -

例如：

- -
<h3>Introduction</h3>
-<h3>Body</h3>
-<h3>Conclusion</h3>
- -

{{ EmbedLiveSample('使用计数器', 300,200) }}

- -

计数器嵌套

- -

CSS计数器对创建有序列表特别有用，因为在子元素中会自动创建一个CSS计数器的实例。使用 counters() 函数，在不同级别的嵌套计数器之间可以插入字符串。比如这个CSS例子：

- -
ol {
-  counter-reset: section;                /* 为每个ol元素创建新的计数器实例 */
-  list-style-type: none;
-}
-li:before {
-  counter-increment: section;            /* 只增加计数器的当前实例 */
-  content: counters(section, ".") " ";   /* 为所有计数器实例增加以“.”分隔的值 */
-}
-
- -

结合下面的HTML：

- -
<ol>
-  <li>item</li>          <!-- 1     -->
-  <li>item               <!-- 2     -->
-    <ol>
-      <li>item</li>      <!-- 2.1   -->
-      <li>item</li>      <!-- 2.2   -->
-      <li>item           <!-- 2.3   -->
-        <ol>
-          <li>item</li>  <!-- 2.3.1 -->
-          <li>item</li>  <!-- 2.3.2 -->
-        </ol>
-        <ol>
-          <li>item</li>  <!-- 2.3.1 -->
-          <li>item</li>  <!-- 2.3.2 -->
-          <li>item</li>  <!-- 2.3.3 -->
-        </ol>
-      </li>
-      <li>item</li>      <!-- 2.4   -->
-    </ol>
-  </li>
-  <li>item</li>          <!-- 3     -->
-  <li>item</li>          <!-- 4     -->
-</ol>
-<ol>
-  <li>item</li>          <!-- 1     -->
-  <li>item</li>          <!-- 2     -->
-</ol>
- -

结果为：

- -

{{ EmbedLiveSample('计数器嵌套') }}

- -

规范

- - - - - - - - - - - - - - - - - - - - - -
规范状态注释
{{SpecName("CSS3 Lists", "#auto-numbering", "CSS Counters")}}{{Spec2("CSS3 Lists")}}无变化
{{SpecName('CSS2.1', 'generate.html#generate.html#counters', 'counter-reset')}}{{Spec2('CSS2.1')}}初始定义
- -

其它

- - - -

另一个可用的示例在 http://www.mezzoblue.com/archives/20.../counter_intu/。这篇博客 发布于2006年11月1日，但是看上去写得还是准确的。

- -
 
diff --git a/files/zh-cn/web/guide/css/css_image_sprites/index.html b/files/zh-cn/web/guide/css/css_image_sprites/index.html deleted file mode 100644 index 4a3e2bb7c9..0000000000 --- a/files/zh-cn/web/guide/css/css_image_sprites/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: 在 CSS 中实现图像合并 -slug: Web/Guide/CSS/CSS_Image_Sprites -tags: - - CSS - - CSS Image - - Graphics - - Guide - - Web -translation_of: Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS ---- -
{{cssRef}}
- -

CSS 图像合并（Image sprites） 技术，亦作 CSS 贴图定位、图像精灵（sprite，意为精灵），被运用于众多使用大量小图标的网页应用之上。它可取图像的一部分来使用，使得使用一个图像文件替代多个小文件成为可能。相较于一个小图标一个图像文件，单独一张图片所需的 HTTP 请求更少，对内存和带宽更加友好。

- -
-

备注: 当使用 HTTP/2 时，使用多个小流量请求实际上可能更为带宽友好。

-
- -

实现

- -

若要为所有类名为 toolbtn 的元素附加上一张图片：

- -
.toolbtn {
-  background: url(myfile.png);
-  display: inline-block;
-  height: 20px;
-  width: 20px;
-}
-
- -

为设置 background-position 以使每个按钮得到合并后图片中的正确部分，可以在 background 属性中的 {{cssxref("url()")}} 后添加 x, y 两个坐标值，或直接使用 {{cssxref("background-position")}} 属性。例如：

- -
#btn1 {background-position: -20px 0px}
-#btn2 {background-position: -40px 0px}
-
- -

这会将 ID 为 btn1 的元素的背景向左移 20px，ID 为 btn2 的元素的背景向左移40px（假设这两个元素都带有 toolbtn 这个类且应用了上面 background 属性中定义的图片背景）

- -

类似的，你也可以使用下面的代码添加悬停效果：

- -
#btn:hover {
-  background-position: <pixels shifted right>px <pixels shifted down>px;
-}
-
- -

深入阅读

- -

CSS Tricks 上的完整 Demo：http://css-tricks.com/snippets/css/perfect-css-sprite-sliding-doors-button/

diff --git "a/files/zh-cn/web/guide/css/css\345\237\272\347\241\200/index.html" "b/files/zh-cn/web/guide/css/css\345\237\272\347\241\200/index.html" deleted file mode 100644 index 922f62c536..0000000000 --- "a/files/zh-cn/web/guide/css/css\345\237\272\347\241\200/index.html" +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: CSS基础 -slug: Web/Guide/CSS/CSS基础 -tags: - - CSS - - 'CSS:Getting_Started' - - CSS入门 - - CSS教程 - - Web - - 初学者 - - 教程 ---- -

 

- -

该  CSS 指南  将会带你进入  层叠样式表  (CSS)的世界。本指南将通过实例来引导你学习语言的基本功能(你可以在自己的电脑上运行这些实例)，指南还将阐明能够运行在现代浏览器上的 CSS 标准功能。

- -

本指南适合 CSS 的初学者，但如果你已经学会了 CSS 的基本知识，该指南对你也会有所帮助。若你对 CSS 的经验十分丰富，那么本指南就不适合你了，CSS 主页  列出了  更多的高级资源。

- - - -

在开始学习之前你需要准备什么？

- - - -

虽然没有这个要求，但是教程中的练习可以帮助你学习。你也可以只阅读教程、图片，但这是一种效率很低的学习方式。

- -

注意： 教程包括了CSS操作颜色的方法。因此指南的某些部分会依赖颜色。要想更容易的学习这些内容，你需要一个彩色显示器与正常色觉。

- -

如何使用本指南

- -

在使用本指南时，需要按顺序仔细阅读每页的内容。如果跳过某个页面，可能会难以理解后续内容。

- -

第一部分：CSS基础

- -

在每页中，通过资料 部分来了解 CSS 的工作原理。通过实践 部分来试着在你的计算机上使用 CSS。

- -

为了测试你对指南的理解程度，可以完成页面底部的挑战内容。挑战内容下面提供了答案的链接，这样你不想看答案的时候没有必要去看它们。

- -

为了深入了解 CSS，可以阅读以更多资料 为标题的方框中内容。你会从其中的超链接里找到更多 CSS 参考资料。

- -

第二部分：CSS的应用范围

- -

指南的第二部分提供了多个实例，用于展示 CSS 与 web 和 Mozilla 的其他技术的使用范围。

- -
    -
  1. JavaScript
    2. -
  2. SVG 图形
    3. -
  3. XML 数据
    4. -
  4. XBL bindings
    5. -
  5. XUL 用户界面
    6. -
- -

 

diff --git a/files/zh-cn/web/guide/css/getting_started/boxes/index.html b/files/zh-cn/web/guide/css/getting_started/boxes/index.html deleted file mode 100644 index 0bfb7e2ed5..0000000000 --- a/files/zh-cn/web/guide/css/getting_started/boxes/index.html +++ /dev/null @@ -1,331 +0,0 @@ ---- -title: 盒模型 -slug: Web/Guide/CSS/Getting_started/Boxes -translation_of: Learn/CSS/Building_blocks -translation_of_original: Web/Guide/CSS/Getting_started/Boxes ---- -

{{ CSSTutorialTOC() }}

- -

{{ previousPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Lists", "列表") }}这是 CSS入门教程 的第11节，本节教你如何使用CSS来控制一个可见元素所占据的空间。在示例文档中，你可以修改元素占据的空间并增加装饰规则。

- -

信息：盒模型

- -

当你的浏览器展现一个元素时，这个元素会占据一定的空间。这个空间由四部分组成。

- -

中间是元素呈现内容的区域。这个区域的外面是内边距。再外面是边框。最外面的是外边距，外边距将该元素与其它元素分开。

- - - - - - - - -
-
-

外边距

- -

边框

- -
-

内边距

- -
-

元素

-
-
-
- -

浅灰色标出了布局的几个部分。

- 		-
-

 

- -

 

- -
-

 

- -
-

元素

-
-
-
- -

你在浏览器看到的样子。

-
- -

内边距，边框和外边距在元素的上、右、下、左都可以有不同的大小。所有这些大小值都可以为0。

- -

颜色

- -

内边距总是跟元素的背景色一样，所以当你设置背景色时，你会发现背景色在元素本身和内边距上都生效了。外边距总是透明的。

- - - - - - - - -
-
-

外边距

- -

边框

- -
-

内边距

- -
-

元素

-
-
-
- -

元素有绿色的背景。

- 		-
-

 

- -

 

- -
-

 

- -
-

元素

-
-
-
- -

你在浏览器看到的样子。

-
- -

边框

- -

你可以用边线或者边框来装饰元素。

- -

用 {{ cssxref("border") }} 属性给元素四周指定统一的边框。在属性值中指定边框的宽度（通常是以显示到屏幕上的像素为单位）， 样式， 还有颜色。

- -

样式包括：

- - - - - - - - - - - - - - - - -
-
solid
- 		-
dotted
- 		-
dashed
- 		-
double
-
-
inset
- 		-
outset
- 		-
ridge
- 		-
groove
-
- -

你也可以通过设置样式为 none 或 hidden 来明确地移除边框，或者设置边框颜色为 transparent 来让边框不可见，后者不会改变布局。

- -

如果一次只指定某一个方向的边框，就用属性： {{ cssxref("border-top") }}， {{ cssxref("border-right") }}， {{cssxref("border-bottom")}}， {{cssxref("border-left")}}。 你可以用这些属性指定某个方向上的边框，或者不同方向上的不同边框。

- -
-
例子
- -

下面的代码设置了一个h3元素的背景色和顶部边框：

- -
h3 {
-  border-top: 4px solid #7c7; /* 中绿 */
-  background-color: #efe;     /* 浅绿 */
-  color: #050;                /* 深绿 */
-  }
-
- -

结果如下：

- - - - - - - -
-

样式化后的标题

-
- -

下面的规则通过给图片四周设置中灰色边框，使得图片元素更好辨认：

- -
img {border: 2px solid #ccc;}
-
- -

结果如下：

- - - - - - - - -
图片:Image:Blue-rule.png
-
- -

外边距和内边距

- -

使用外边距和内边距调整元素的位置，并在其周围创建空间。

- -

用 {{ cssxref("margin") }} 属性或者 {{ cssxref("padding") }} 属性分别设置外边距和内边距的宽度。

- -

如果你指定一个宽度，它将会作用于元素四周（上、右、下、左）。

- -

如果你指定两个宽度， 第一个宽度会作用于顶部和底部，第二个宽度作用于右边和左边。

- -

你也可以按照顺序指定四个宽度： 上、右、下、左。

- -
-
例子
- -

下面的规则通过给元素四周设置红色边框，标记出了类名为  remark 的段落元素。

- -

文本周围的内边距将边框与文字拉开一点距离。

- -

左外边距使得段落相对于其余文本产生缩进：

- -
p.remark {
-  border: 2px solid red;
-  padding: 4px;
-  margin-left: 24px;
-  }
-
- -

结果如下：

- - - - - - - -
-

这是一个普通的段落。

- -

这是一个标记段落。

-
-
- -
-
更多细节
- -

当你使用外边距和内边距来调整元素的布局时，你的样式规则会与浏览器的默认规则以复杂的方式相互作用。

- -

不同的浏览器布局元素的方式不一样。直到你的样式表修改默认样式，结果可能看起来相似。有时这可能让你的样式表给出令人惊讶的结果。

- -

为了达到理想的效果，你可能需要改变文档的标记。本教程的下一页有更多关于这个的信息。

- -

欲知更多关于内边距，外边距和边框的细节， 请看 盒模型 参考页。

-
- -

实践：添加边框

- -

编辑你的CSS文件，style2.css。添加下面的规则，给页面中每个标题元素上面画一条线：

- -
h3 {border-top: 1px solid gray;}
-
- -

如果你做了前一页的挑战题，现在修改你已经创建的规则，或者添加这条新规则，给每个列表项的下面增加一定的空间：

- -
li {
-  list-style: lower-roman;
-  margin-bottom: 8px;
-  }
-
- -

刷新你的浏览器看看效果：

- - - - - - - -
-

(A) The oceans

- -
    -
  • Arctic
    • -
  • Atlantic
    • -
  • Pacific
    • -
  • Indian
    • -
  • Southern
    • -
- -

(B) Numbered paragraphs

- -

1: Lorem ipsum

- -

2: Dolor sit

- -

3: Amet consectetuer

- -

4: Magna aliquam

- -

5: Autem veleum

-
- -
-
挑战
- -

给你的样式表添加一个规则，为下面的海洋列表增加 一个四面环绕且带有颜色的边框，来突出海洋——如下图所示：

- - - - - - - -
-

(A) The oceans

- -
-
    -
  • Arctic
    • -
  • Atlantic
    • -
  • Pacific
    • -
  • Indian
    • -
  • Southern
    • -
-
- -

(B) Numbered paragraphs

- -

. . .

-
- -

 

- -

（不必完全保证宽度和颜色和这里的一模一样。）

-
- -

看答案。

- -

下一节?

- -

{{ nextPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Layout", "布局") }}通过指定外边距和内边距，你已经能修改文档的布局了。下一页，你将使用别的方式来改变文档的布局 。

diff --git a/files/zh-cn/web/guide/css/getting_started/cascading_and_inheritance/index.html b/files/zh-cn/web/guide/css/getting_started/cascading_and_inheritance/index.html deleted file mode 100644 index e5a3bae8a0..0000000000 --- a/files/zh-cn/web/guide/css/getting_started/cascading_and_inheritance/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: 层叠和继承 -slug: Web/Guide/CSS/Getting_started/Cascading_and_inheritance -translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance -translation_of_original: Web/Guide/CSS/Getting_started/Cascading_and_inheritance ---- -

{{ CSSTutorialTOC() }}

- -

{{ previousPage("/zh-CN/docs/CSS/开始/How_CSS_works", "CSS如何工作")}} 这是 开始学CSS 教程的第4节; 这一节介绍了样式表中元素如何从父级继承样式，以及不同层级的样式如何相互作用决定最终显示效果。教给你通过在样式表中添加级联样式语句，进一步控制页面元素的展现。

- -

资料: 层叠和继承

- -

一个元素的样式，可以通过多种方式来定义，而多种定义方式之间通过复杂的影响关系决定了元素的最终样式。这种复杂既造就了CSS的强大，也导致CSS显得如此“混乱”而且难以调试。

- -

对于层叠来说，共有三种主要的样式来源：

- - - -

用户定义的样式表会覆盖浏览器定义的默认样式，然后网页开发者定义的样式又会覆盖用户样式。在这个教程中，你作为网页的开发者只需要关注开发者样式。

- -
-
示例
- -

就你现在看到的这个页面而言，有一部分样式是来自浏览器定义的默认的HTML样式。

- -

有一部分样式可能来自用户通过浏览器自定义的样式，或者为浏览器引入自定义的样式表。例如，在Firefox中，在“首选项”对话框中可以自定义样式，也可以建立一个单独的userContent.css 样式文件并放到“用户配置”的文件夹中。

- -

另外，还有一部分样式来自外链的wiki服务器上的样式表。

-
- -

在浏览器中打开前面写的例子页面，你会发现 {{ HTMLElement("strong") }} 元素中的文字会比其他文字粗一些。这些样式就是在浏览器定义的默认HTML样式。

- -

而{{ HTMLElement("strong") }} 元素是红色的，这是你在自己的样式表中定义的样式。

- -

同时，{{ HTMLElement("strong") }} 作为 {{ HTMLElement("p") }} 的子元素，也继承了 {{ HTMLElement("p") }} 的样式。同样的， {{ HTMLElement("p") }} 也从 {{ HTMLElement("body") }} 中继承了许多的样式。

- -

再来看看优先级，从高到低依次为：网页开发者定义的样式、网页阅读者定义的样式、浏览器的默认样式。

- -

对继承的元素来说，子元素自身的样式优先级高于从父级继承来的样式。

- -

当然，关于优先级还有更多的知识点，我们会在后面的章节中继续介绍。

- -
-
更多细节
- -

CSS 另外提供了一个!important关键字，用户可以通过使用这个关键字使自己定义的样式覆盖掉开发者定义的样式。

- -

这就意味着，作为开发者，你很难准确的预知页面最终在用户电脑上的显示效果。

- -

如果你想了解关于层级和继承的全部细节，请阅读CSS文档中的相关章节（英文）：Assigning property values, Cascading, and Inheritance。

-
- -

动手: 使用继承

- -
    -
  1. 编辑你之前创建的style.css文件。
    2. -
  2. 把下面这行代码粘到以前的文件中，粘在之前的代码的上面或下面都可以。 不过，加在css文件的头部会更符合逻辑一些，因为在页面中 {{ HTMLElement("p") }} 是 {{ HTMLElement("strong") }} 的父级元素: - 
    p {color: blue; text-decoration: underline;}
-
    -
    3. -
  3. 现在刷新你的浏览器，应该可以看到页面的变化。页面里所有的文本应该都被加上了下划线，也包括大写的首字母。{{ HTMLElement("strong") }} 从它的父级元素 {{ HTMLElement("p") }} 上继承到了下划线的样式。
    - -

    但是，{{ HTMLElement("strong") }} 元素仍然是红色的。红色是它本身的样式，所以优先级会超过父级元素 {{ HTMLElement("p") }} 的蓝色.

    -
    4. -
- - -
- - - - - - - - -
修改前
Cascading Style Sheets
- - - - - - - - -
修改后
Cascading Style Sheets
- -
-
挑战
-改动一下样式表，完整如下效果：只在红色的字母上加下划线： - - - - - - - -
Cascading Style Sheets
- -
-
参考答案
- -

把定义在 {{ HTMLElement("p") }} 标签上的下划线样式移到 {{ HTMLElement("strong") }} 标签上。改后代码如下：

- -
p {color: blue; }
-strong {color: red; text-decoration: underline;}
-
- -

 

-隐藏答案
-查看参考答案
- -

下一节?

- -

{{ nextPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Selectors", "选择器")}} 到目前为止，你在样式表中所有的样式都是为标签上的，<p> 和 <strong>，你可以尝试着改变一下页面中它们的样式。下一节会介绍怎样通过更有效的方式定义样式。

diff --git a/files/zh-cn/web/guide/css/getting_started/color/index.html b/files/zh-cn/web/guide/css/getting_started/color/index.html deleted file mode 100644 index a9348bd9bd..0000000000 --- a/files/zh-cn/web/guide/css/getting_started/color/index.html +++ /dev/null @@ -1,333 +0,0 @@ ---- -title: Color -slug: Web/Guide/CSS/Getting_started/Color -translation_of: Learn/CSS/Introduction_to_CSS/Values_and_units#Colors -translation_of_original: Web/Guide/CSS/Getting_started/Color ---- -

{{ CSSTutorialTOC() }}

- -

{{previousPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Text_styles", "文本样式")}}这是 CSS入门教程 系列的第8部分; 介绍了如何在你的CSS文件中运用颜色值. 在示例样式表中，介绍了背景颜色.

- -

关于: 颜色

- -

到目前为止，在这个系列中，都很少用到用名字命名的颜色属性。CSS2支持17种名字的颜色。其中有一些可能不像你期望的那样，如下图：

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
blackgraysilverwhite
主要的redlimeblue
次要  yellowaquafuchsia
maroonorangeolivepurplegreennavyteal
- - - -
-
细节
- -
你的浏览器可能支持更多名字命名的颜色，比如：
- -
- - - - - - - - - - - - - - - - -
dodgerbluepeachpufftanfirebrickaquamarine
- -

对于更多存在的名字的颜色命名, 你可以参看CSS 3颜色模块中的: SVG color keywords 部分. 一定要注意的是，使用名字命名颜色的时候，有可能用户的浏览器是不支持的。

-
- -

对于更多地颜色，你可以使用代表红，绿，蓝三个颜色的16进制数字来表示。16进制数字的范围0-9，a-f。其中a-f代表的数值就是10-15：

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
黑#000
纯 红#f00
纯 绿#0f0
纯 蓝#00f
白#fff
- -


- 要得到浏览器能够呈现的所有的颜色，你就得使用两个16进制来表示（也就是6位）:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
黑#000000
纯红#ff0000
纯绿#00ff00
纯蓝#0000ff
白#ffffff
- -

你能够从你的画图程序或者其他的工具上得到6位的颜色数值.

- -
-
例如
- -

可以通过调整3位数字来得到不同的颜色:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
从纯红开始:#f00
让它淡一点，加一些绿色和蓝色:#f77
让它更偏橙色一些，多加一些绿色:#fa7
让它更深一些，所有的颜色部分，红，绿，蓝都要减少:#c74
让它的饱和度更低一些，所有的颜色值都调整到差不多大小:#c98
如果所有的颜色值都相等，那么就变成了灰色:#ccc
- -

对于浅色，比如说淡蓝色:

- - - - - - - - - - - - - - -
从纯白色开始:#fff
稍微降低一下各个颜色值:#eef
-
- -
-
更多细节
- -

还能够通过RGB值（0-255或者是百分比值），来得到颜色

- -

比如，下面是深红色的RGB表示法:

- -
rgb(128, 0, 0) 
- -

对于如何指定颜色的所有信息，可以参看 CSS规范中的: Colors 部分.

- -

更多关于系统颜色的说明，比如菜单、树等，可以参看CSS规范中得: CSS2 System Colors 部分.

-
- -

颜色属性

- -

你已经在文本中使用了 {{ cssxref("color") }} 属性.

- -

同样可以使用{{ cssxref("background-color") }} 属性来改变元素的背景色.

- -

背景色可以设置 transparent 属性来移除掉所有的颜色，呈现出父元素的背景色

- -
-
例如
- -

在本指南中，例如 文本框使用了淡黄色来表示背景色：

- -
background-color: #fffff4;
-
- -

更多细节 文本框使用了下面的淡灰色 :

- -
background-color: #f4f4f4;
-
-
- - - -

实践: 使用颜色代码

- -
    -
  1. 编辑你的CSS文件.
    2. -
  2. 下面用粗体显示的部分，表示首字母用淡蓝色显示. (你的文件中的布局和注释可能与下面所示的不同。按照你喜欢的方式来组织它们吧！) - 
    /*** CSS 手册: 颜色页面 ***/
-
-/* 页面 字体 */
-body {font: 16px "Comic Sans MS", cursive;}
-
-/* 段落 */
-p {color: blue;}
-#first {font-style: italic;}
-
-/* 首字母 */
-strong {
-  color: red;
-  background-color: #ddf;
-  font: 200% serif;
-  }
-
-.carrot {color: red;}
-.spinach {color: green;} 
    -
    3. -
  3. 保存文件，刷新浏览器看结果.
    4. -
- - - - - - - - - - -
Cascading Style Sheets
Cascading Style Sheets
- -
-
挑战
- -

在你的CSS文件中，把所有的代码颜色的名字用3位16进制数字的方式表示出来.

- -

(不能完全做出来，不过能够最的很接近。如果要准备的表示颜色名字的话，需要6位16进制你需要查一下CSS规范或者是工具来得到一致的颜色.)

- -
-
Possible solution
- -

The following values are reasonable approximations of the named colors:

- -
strong {
-  color: #f00; /* red */
-  background-color: #ddf; /* pale blue */
-  font: 200% serif;
-}
-
-.carrot {
-  color: #fa0; /* orange */
-}
-
-.spinach {
-  color: #080; /* dark green */
-}
-
-p {
-  color: #00f; /* blue */
-}
-
- - -Hide solution
-查看解决的方法.
- -

下一步?

- -

{{nextPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Content", "内容")}}. 示例文本和示例样式表是严格分开的。在 下一节 将介绍在什么情况下可以允许他们不分开.

diff --git a/files/zh-cn/web/guide/css/getting_started/content/index.html b/files/zh-cn/web/guide/css/getting_started/content/index.html deleted file mode 100644 index f3f9a0797b..0000000000 --- a/files/zh-cn/web/guide/css/getting_started/content/index.html +++ /dev/null @@ -1,160 +0,0 @@ ---- -title: Content -slug: Web/Guide/CSS/Getting_started/Content -translation_of: Learn/CSS/Howto/Generated_content ---- -

{{ CSSTutorialTOC() }}

- -

{{ previousPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Color", "颜色") }}这是 CSS 入门教程的第9部分，介绍了一些通过CSS改变文档内容的方法。这样，仅修改样式表你就能把文本内容及图片添加到文档。

- -

信息: 内容

- -

CSS的一个重要优势是它可以帮助你将文档内容和其样式分离。但是有时候在样式而非文档中定义一些内容也是很有用的。

- -

在样式中可以定义文本内容和图片内容。当内容与文档结构紧密相关的时候，你可以在样式表中指定内容。

- -
-
更多细节
- -

在样式表中指定内容会使事情变得复杂：你可能有多个语言版本的文档共享同一个样式表。如果样式表的一部分需要翻译，这就意味着你需要将这部分单独保存在多个样式表中，并在不同语言的文档中引用。

- -

如果你指定的内容由通用符号和图片组成的话，就不存在这个问题。

- -

样式表中指定的内容不会成为DOM的一部分。

-
- -

文本内容

- -

CSS可以在元素的前后插入文本：在选择器的后面加上{{ cssxref("::before") }} 或者 {{ cssxref("::after") }} 。在声明中，指定 {{ cssxref("content") }} 属性，并设置文本内容。

- -
-
例
- -

下面这条规则在所有类名包含 ref的元素前面加上 Reference:

- -
.ref::before {
-  font-weight: bold;
-  color: navy;
-  content: "Reference: ";
-}
-
-
- -
-
更多细节
- -

样式表默认使用UTF-8字符集。也可以通过link属性或样式表以及其他方式指定。 参见 CSS规范中 4.4 CSS style sheet representation

- -

还可以通过转义机制（通过反斜杠转义）指定单个字符。比如， \265B 是国际象棋黑皇后的符号 ♛。更多参见 Referring to characters not represented in a character encoding 和CSS规范中的 Characters and case。

-
- -

图片内容

- -

可以通过将{{ cssxref("content") }} 属性值设置为某个图片的URL，可以将图片插到元素的前面或后面。

- -
-
例
- -

下面这条规则在所有类名包含glossary的a标签后面插入一个空格和一个图标：

- -
a.glossary::after {content: " " url("../images/glossary-icon.gif");}
-
-
- -

将图片设置成元素的背景图：将 {{ cssxref("background") }} 的值设为图片的URL。这是同时设置背景颜色，背景图，图片如何重复等的快捷写法。

- -
-
例
- -

这条规则通过指定图片URL设置特定元素的背景。

- -

这是一个ID选择器；no-repeat表示背景图只出现一次，不重复:

- -
#sidebar-box {background: url("../images/sidebar-ground.png") no-repeat;}
-
-
- -
-
更多细节
- -

了解更多影响背景图的属性，以及其他背景图选项，参见 {{ cssxref("background") }} 。

-
- -

实践: 添加背景图片

- -

这幅图是一个白方块，底部有一条蓝色实线:

- - - - - - - -
Image:Blue-rule.png
- -
    -
  1. 下载上图放到CSS同目录下
    2. -
  2. 编辑CSS文件，为body设置背景图. - 
    background: url("Blue-rule.png");
-
    - -

    背景图默认是 repeat（重复）的，无需明确指出。图片在水平和垂直方向重复，最终呈现出横格纸的效果：

    - -
    -

    Image:Blue-rule-ground.png

    - -
    -
    -

    Cascading Style Sheets

    -
    - -
    -

    Cascading Style Sheets

    -
    -
    -
    -
    3. -
- -
-
挑战
- -

下载图片:

- - - - - - - -
Image:Yellow-pin.png
- -

在样式表中增加一条规则，使得每行前面显示上面的图标

- -
-

Image:Blue-rule-ground.png

- -
-
image:Yellow-pin.png Cascading Style Sheets
- -
image:Yellow-pin.png Cascading Style Sheets
-
-
- -
-
Possible solution
- -

Add this rule to your stylesheet:

- -
p:before{
-  content: url("yellow-pin.png");
-}
-
- -

 

-Hide solution
-答案.
- -

接下来?

- -

{{ nextPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Lists", "列表") }}列表是一种常见的为列表元素添加内容的方式。下节将介绍如何 为列表元素指定样式。

diff --git a/files/zh-cn/web/guide/css/getting_started/how_css_works/index.html b/files/zh-cn/web/guide/css/getting_started/how_css_works/index.html deleted file mode 100644 index fce3091715..0000000000 --- a/files/zh-cn/web/guide/css/getting_started/how_css_works/index.html +++ /dev/null @@ -1,121 +0,0 @@ ---- -title: CSS如何工作 -slug: Web/Guide/CSS/Getting_started/How_CSS_works -translation_of: Learn/CSS/First_steps/How_CSS_works -translation_of_original: Web/Guide/CSS/Getting_started/How_CSS_works ---- -

{{ CSSTutorialTOC() }}

- -

{{ previousPage("/zh-CN/docs/CSS/开始/为何使用CSS", "为何使用CSS？") }}这是 CSS Getting Started 教程的第三章; 这章解释了CSS在浏览器中是如何工作的。 你可以通过分析示例代码来看看样式表中的详细信息。

- -

信息：CSS 如何工作

- -

浏览器在展现一个文档的时候，必须要把文档内容和相应的样式信息结合起来展示。 这个处理过程一般分两个阶段：

- -
    -
  1. 浏览器先将标记语言和CSS转换成DOM (文档对象模型)结构。 这时DOM 就代表了电脑内存中的相应文档，因为它已经融合了文档内容和相应的样式表。
    2. -
  2. 最后浏览器把 DOM的内容展示出来。
    3. -
- -

标记语言通过使用“元素”来定义文档结构。你需要使用一些以'<'开头和以'>'结尾的字符串，俗称tags，来构成元素。这些元素一般是在'< >'里加上元素名来作为起始tag，在'< >'里加上'/'和元素名的组合来构成结束tag。标记语言中规定，一些元素可以只有一个起始tag，或者构成元素的tag只有一个，但是这个tag里的名称后面必须要加个'/'。

- -

元素也可以作为容器而存在，这样可以把其他元素放到这个元素的起始tag和结束tag之间。

- -

DOM是一种树形结构。 每个元素和非空文本都可以看做是树形结构上的一个结点。DOM结点不再是容器，但是，它可以作为子结点的父类结点而存在。

- -
-
示例
-在示例代码中， 我们使用 <p> 标签和它的结束标签 </p> 构造了一个容器： - -
<p>
-  <strong>C</strong>ascading
-  <strong>S</strong>tyle
-  <strong>S</strong>heets
-</p>
-
- -

实例

- -

http://jsfiddle.net/djaniketster/6jbpS/

- -

在这个 DOM中， P 结点是一个父结点，它的子结点包含了一些STRONG结点和文本结点。同时，STRONG结点各自也是父结点，它们也分别包含了一些文本结点作为子结点。

- -
P
-├─STRONG
-│ └─"C"
-├─"ascading"
-├─STRONG
-│ └─"S"
-├─"tyle"
-├─STRONG
-│ └─"S"
-└─"heets"
-
- -

理解 DOM 结构可以帮助你更好的去设计、调试、维护CSS，因为 DOM 结构就是你的CSS和文档内容融合而成的。

- -

行动：分析DOM结构

- -

使用 DOM Inspector

- -

你需要使用特殊的软件来分析 DOM结构。在这里，假设你使用的是 Mozilla的 DOM Inspector (DOMi) 插件来分析一个 DOM结构。 下面的操作需要你提前安装插件才可以执行。

- -
    -
  1. 使用 Mozilla 浏览器来打开示例文档。
    2. -
  2. 在浏览器菜单栏中，选择 工具 > 查看器，也可能是选择 工具> Web 开发者 > 查看器。 -
    -
    更多细节
    - -

    如果你的 Mozilla 浏览器没有安装 DOMi，你可以到 安装地址 来安装并重启浏览器，然后再回到这里继续学习。

    - -

    如果你不想安装 DOMi (或者你使用的是非Mozilla浏览器)，那么你可以试试下个章节中介绍的 Web X-Ray Goggles。 你也可以直接跳过本章节，进行下一章的学习，这并不会影响你接下来的学习内容。

    -
    -
    3. -
  3. 你可以在 DOMi中通过点击文档结点前面的箭头来将他们展开。 -

    注意:  HTML 文件中的空格在 DOMi 中会显示为一些空的文本结点，你可以直接忽略掉它。

    - -

    通过展开元素结点，你可能会看到下面这样的一部分内容：

    - - 
    │ ▼╴P
-│ │ │ ▼╴STRONG
-│ │ └#text
-│ ├╴#text
-│ ►╴STRONG
-│ │
    - -

    选择任何元素都可以在 DOMi 右边的面板中找到关于这个元素更详细的信息。例如，当你选择一个文本结点的时候，右边面板中会显示这个结点的文本信息。

    - -

    如果你选择的结点是一个元素，那么 DOMi 会分析这个元素，并在右边面板中展示关于它的一大堆信息内容。同时，样式信息只是这些内容的一部分罢了。 

    -
    4. -
- -
-
挑战
- -

在 DOMi 中，点击一个 STRONG 结点。

- -

在 DOMi的右边面板中找出，设置此结点颜色为红色的地方和设置结点内容加粗的地方。 

- -
-
Possible solution
- -

In the menu above the right-hand pane, choose CSS Rules. You see two items listed, one that references an internal resource and one that references your stylesheet file. The internal resource defines the font-weight property as bolder; your stylesheet defines the color property as red.

-Hide solution
-查看挑战的解决方案
- -

使用 Web X-Ray Goggles

- -

Web X-Ray Goggles 显示的信息内容相比较 DOM Inspector要少， 但是它安装和使用的步骤更简单。

- -

到 Web X-Ray Goggles的主页。

- -
    -
  1. 将页面中的书签链接拖拽到浏览器工具栏。
    2. -
  2. 打开你的示例 HTML 文档。
    3. -
  3. 通过点击工具栏中的相应书签来激活Web X-Ray Goggles。 
    4. -
  4. 通过在文档中移动鼠标箭头来查看相应的文档元素。
    5. -
- -

What next?

- -

{{ nextPage("/zh-CN/docs/CSS/开始/Cascading_and_inheritance", "层叠和继承") }}如果你做过上文中的练习，你会发现不同位置的style样式是相互影响共同生成了元素的最终展现。在 下一章 中将会深入解释这种相互联系和相互影响。

diff --git a/files/zh-cn/web/guide/css/getting_started/index.html b/files/zh-cn/web/guide/css/getting_started/index.html deleted file mode 100644 index 585243aa2a..0000000000 --- a/files/zh-cn/web/guide/css/getting_started/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: CSS入门教程 -slug: Web/Guide/CSS/Getting_started -tags: - - CSS - - 'CSS:Getting_Started' - - CSS入门 - - CSS教程 - - Web - - 初学者 - - 教程 -translation_of: Learn/CSS/First_steps -translation_of_original: Web/Guide/CSS/Getting_started ---- -

 

- -

该  CSS 指南  将会带你进入  层叠样式表  (CSS)的世界。本指南将通过实例来引导你学习语言的基本功能(你可以在自己的电脑上运行这些实例)，指南还将阐明能够运行在现代浏览器上的 CSS 标准功能。

- -

本指南适合 CSS 的初学者，但如果你已经学会了 CSS 的基本知识，该指南对你也会有所帮助。若你对 CSS 的经验十分丰富，那么本指南就不适合你了，CSS 主页  列出了  更多的高级资源。

- - - -

在开始学习之前你需要准备什么？

- - - -

虽然没有这个要求，但是教程中的练习可以帮助你学习。你也可以只阅读教程、图片，但这是一种效率很低的学习方式。

- -

注意： 教程包括了CSS操作颜色的方法。因此指南的某些部分会依赖颜色。要想更容易的学习这些内容，你需要一个彩色显示器与正常色觉。

- -

如何使用本指南

- -

在使用本指南时，需要按顺序仔细阅读每页的内容。如果跳过某个页面，可能会难以理解后续内容。

- -

第一部分：CSS基础

- -

在每页中，通过资料 部分来了解 CSS 的工作原理。通过实践 部分来试着在你的计算机上使用 CSS。

- -

为了测试你对指南的理解程度，可以完成页面底部的挑战内容。挑战内容下面提供了答案的链接，这样你不想看答案的时候没有必要去看它们。

- -

为了深入了解 CSS，可以阅读以更多资料 为标题的方框中内容。你会从其中的超链接里找到更多 CSS 参考资料。

- -

第二部分：CSS的应用范围

- -

指南的第二部分提供了多个实例，用于展示 CSS 与 web 和 Mozilla 的其他技术的使用范围。

- -
    -
  1. JavaScript
    2. -
  2. SVG 图形
    3. -
  3. XML 数据
    4. -
  4. XBL bindings
    5. -
  5. XUL 用户界面
    6. -
- -

 

diff --git a/files/zh-cn/web/guide/css/getting_started/javascript/index.html b/files/zh-cn/web/guide/css/getting_started/javascript/index.html deleted file mode 100644 index 1f53ff70ba..0000000000 --- a/files/zh-cn/web/guide/css/getting_started/javascript/index.html +++ /dev/null @@ -1,172 +0,0 @@ ---- -title: JavaScript 与 CSS -slug: Web/Guide/CSS/Getting_started/JavaScript -translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents -translation_of_original: Web/Guide/CSS/Getting_started/JavaScript ---- -

{{ CSSTutorialTOC() }}

- -

本文是 CSS tutorial 第二部分的第一章节。第二部分的内容主要是一些css和其他web技术的使用范例。 

- -

第二部分的内容主要来向你展示CSS是如何同其他技术进行交互的。但是这样做的目的并不是教你如何使用这些技术，如果你想深入学习，可以查找具体的文档。

- -

换句话说，这些页面是用来向你展示CSS的多种用途的。通过这些页面，你不需要掌握其他技术就可以获取到很多CSS的相关知识。

- -

上一章 (Part I)： Media
- 下一章： SVG

- -

相关知识： JavaScript

- -

JavaScript是一种编程语言，它被广泛用来实现web站点和应用中的交互效果。

- -

JavaScript可以同样式进行交互，你可以通过编写程序来动态改变文档上元素的样式。 

- -

有三种方法可以实现这样的效果：

- - - - - - - - - - -
更多细节
要了解 JavaScript的更多细节，可以到这个wiki JavaScript 。
- -

范例： 一个JavaScript的实例

- -

新建一个doc5.html的页面，把下面的代码复制粘贴进入，注意要保证保存了所有的代码：

- -
-
<!DOCTYPE html>
-<html>
-
-<head>
-<title>Mozilla CSS Getting Started - JavaScript demonstration</title>
-<link rel="stylesheet" type="text/css" href="style5.css" />
-<script type="text/javascript" src="script5.js"></script>
-</head>
-
-<body>
-<h1>JavaScript sample</h1>
-<div id="square"></div>
-<button>Click Me</button>
-
-</body>
-</html>
-
-
- -

新建一个CSS文件style5.css，复制粘贴下面的样式代码到文件中：

- -
-
  #square {
-
-      width: 20em;
-
-      height: 20em;
-
-      border: 2px inset gray;
-
-      margin-bottom: 1em;
-
-  }
-
-  button {
-
-      padding: .5em 2em;
-
-  }
-
- -

新建一个JavaScript文件script5.js，复制粘贴下面的代码到文件中：

- -
-
// JavaScript demonstration
-var changeBg = function (event) {
-    console.log("method called");
-    var me = event.target
-    ,   square = document.getElementById("square");
-    square.style.backgroundColor = "#ffaa44";
-    me.setAttribute("disabled", "disabled");
-    setTimeout(function () { clearDemo(me) }, 2000);
-}
-
-function clearDemo(button) {
-    var square = document.getElementById("square");
-    square.style.backgroundColor = "transparent";
-    button.removeAttribute("disabled");
-}
-
-window.onload = function() {
-    var button = document.querySelector("button");
-    button.addEventListener("click", changeBg);
-    console.log(button);
-}
-
- -

用浏览器打开HTML文件并点击按钮。

- -

这里有在线的示例：Here is the Live Example

- - - - - - - - -
- - - - - - -
-

JavaScript demonstration

-
- 		- - - - - - -
-

JavaScript demonstration

-
-
- -
重要提示 ： - - -
- - - - - - - - -
挑战
修改脚本代码实现如下效果：当颜色改变的时候让方块跳至右侧20em的距离，然后再恢复到原来的位置。
- -

这里有一个解决方案示例：See a solution to this challenge.

- -

下一步做什么呢？

- -

如果你对本页内容有疑问，或者有其他想法，欢迎到 Discussion 页面进行讨论。

- -

在示例中，尽管只有button元素使用了脚本代码，但是HTML文档还是i需要外链一个脚本文件。Mozilla 对CSS做了扩展，让它可以为选择元素引用JavaScript代码 (也可以使内容或者其他样式表文件) 。下篇文章会对此有详细说明： XBL bindings

diff --git a/files/zh-cn/web/guide/css/getting_started/layout/index.html b/files/zh-cn/web/guide/css/getting_started/layout/index.html deleted file mode 100644 index ecd91f80e1..0000000000 --- a/files/zh-cn/web/guide/css/getting_started/layout/index.html +++ /dev/null @@ -1,368 +0,0 @@ ---- -title: 布局 -slug: Web/Guide/CSS/Getting_started/Layout -translation_of: Learn/CSS/CSS_layout -translation_of_original: Web/Guide/CSS/Getting_started/Layout ---- -

{{ CSSTutorialTOC() }}

- -

{{ previousPage("/zh-CN/docs/CSS/开始/Boxes", "盒模型")}}本文是 CSS入门教程 的第12部分; 主要讲述一些修改页面布局的方法。 你可以通过学习来修改自己示例的布局。

- -

说明: 布局

- -

你可以通过 CSS 来设置布局的炫酷效果。其中所涉及的部分高阶技术并不是本文范畴。

- -

当你设计一个简单布局时, 你的样式表与浏览器默认样式表之间的交互、以及与布局引擎的交互都是相当复杂的。 这也是一个高阶话题，并不在本文范畴。

- -

本文主要介绍一些简单的布局方法。（高阶技术请参阅外部链接 学习高级布局）

- -

文档结构

- -

当你想控制文档布局时，就不得不改变它的结构。

- -

页面标记语言通常都会有公共标签来创建结构。例如, 在 HTML 中你可以使用 {{ HTMLElement("div") }} 元素来创建结构。

- -
-
示例
- -

在你的示例中, 编号段落并没有自己的容器。

- -

你的样式表无法为这些段落画出边框，因为没有选择器指向它们。

- -

为了解决这个问题, 你可以在段落之外添加一个{{ HTMLElement("div") }} 。这个标签是唯一的，可以指定一个id属性来标识:

- -
<h3>Numbered paragraphs</h3>
-<div id="numbered">
-  <p>Lorem ipsum</p>
-  <p>Dolor sit</p>
-  <p>Amet consectetuer</p>
-  <p>Magna aliquam</p>
-  <p>Autem veleum</p>
-</div>
-
- -

现在可以通过样式表在每个列表周围画出边框了:

- -
ul, #numbered {
-  border: 1em solid #69b;
-  padding-right:1em;
-}
-
- -

运行结果如下:

- - - - - - - -
-

(A) The oceans

- -
-
    -
  • Arctic
    • -
  • Atlantic
    • -
  • Pacific
    • -
  • Indian
    • -
  • Southern
    • -
-
- -

(B) Numbered paragraphs

- -
-

1: Lorem ipsum

- -

2: Dolor sit

- -

3: Amet consectetuer

- -

4: Magna aliquam

- -

5: Autem veleum

-
-
-
- -

大小单位

- -

到目前为止，你可以通过像素来指定大小。这在有些情况下是非常合适的，比如电脑屏幕显示。 但当用户改变字体大小之后，你的布局可能会发生错位。

- -

因此，最好通过百分比或 ems (em) 来指定大小。 em 通常是指当前字体大小(字母m的宽度)。当用户改变字体大小时，你的布局会自己修正。

- -
-
示例
- -

文本左边的border通过像素来指定大小。

- -

文本右边的border通过 ems来指定大小。

- -

在你的浏览器中，修改字体大小，会发现右边的border会自己修正大小而左边的不会。:

- - - - - - - -
-
RESIZE ME PLEASE
-
-
- -
-
更多详情
- -

对于其它设备，其它的长度单位可能更合适。

- -

在本指南中会有其它篇幅详细介绍这一点。

- -

更多详情参见CSS说明中 Values .

-
- -

文本布局

- -

有两个属性可以指定元素内容的对齐方式。你可以用它们来进行简单的布局:

- -
-
{{ cssxref("text-align") }}
-
内容对齐。 可以使用下面几个值： left, right, center, justify。
-
{{ cssxref("text-indent") }}
-
指定内容缩进。
-
- -

这两个属性可以应用于任何文本类内容，不只是纯文本。 需要注意的是，它们会被元素的子元素继承， 所以需要在子元素中将它们关闭，以免出现意想不到的效果。

- -
-
示例
- -

标题居中:

- -
h3 {
-  border-top: 1px solid gray;
-  text-align: center;
-}
-
- -

输出结果:

- - - - - - - -
-

(A) The oceans

-
- -

在 HTML 文档中, 标题之后的内容并不属于标题。当你对齐一个标题时，其后的元素不会继承该样式。

-
- -

浮动

- -

 {{ cssxref("float") }} 属性强制元素靠左或靠右。 这是控制元素位置和大小的简单方法。

- -

本文剩下部分都是围绕浮动元素展开。你可以使用 {{ cssxref("clear") }} 属性来避免其它元素受到浮动效果的影响。

- -
-
示例
- -

在你的示例中，list是根据窗口拉伸。你可以通过使用浮动元素来使它们靠左。

- -

为了保证标题在正确的位置, 你必须为标题指定clear属性来避免标题靠左:

- -
ul, #numbered {float: left;}
-h3 {clear: left;}
-
-
- -

运行结果如下:

- - - - - - - -
-

(A) The oceans

- -
-
    -
  • Arctic
    • -
  • Atlantic
    • -
  • Pacific
    • -
  • Indian
    • -
  • Southern
    • -
-
- -

(B) Numbered paragraphs

- -
-

1: Lorem ipsum

- -

2: Dolor sit

- -

3: Amet consectetuer

- -

4: Magna aliquam

- -

5: Autem veleum

-
-
- -

(box右侧需要增加一些padding ,防止文本与边框太近)

- -

位置

- -

你可以为一个元素指定  {{ cssxref("position") }} 属性为以下值之一，来设置其位置。

- -

这些是高阶属性。 可以通过简单的方式来使用它们—这也是在基础教程里提到它们的原因。但使用它们来实现复杂的布局会相对困难一些。

- -
-
relative
-
通过为元素指定一个值，元素相对于其原来位置移动。也可以使用margin来达到同样的效果。
-
fixed
-
为元素指定相对于窗口的确切位置 。即使文档的其它元素出现滚动，元素位置仍然不变。
-
absolute
-
为元素指定相对于其父元素的确切位置。只有在父元素使用 relative, fixed or absolute 时才有效。你可以为任何父元素指定 position: relative;因为它不会产生移动。
-
static
-
默认值。当明确要关闭位置属性时使用。
-
- -

和 position 属性(除了 static)一起使用的, 有下列属性: top, right, bottom, left, width, height 通过设置它们来指定元素的位置或大小。

- -
-
示例
- -

为了放置两个元素，一个在另外一个上方, 创建一个父容器来包含两个子元素:

- -
<div id="parent-div">
-  <p id="forward">/</p>
-  <p id="back">\</p>
-</div>
-
- -

在你的样式表里，将父容器的position设置为 relative。无需为它设置任何具体变动。 将子元素的position属性设置为 absolute:

- -
#parent-div {
-  position: relative;
-  font: bold 200% sans-serif;
-}
-
-#forward, #back {
-  position: absolute;
-  margin:0px; /* no margin around the elements */
-  top: 0px; /* distance from top */
-  left: 0px; /* distance from left */
-}
-
-#forward {
-  color: blue;
-}
-
-#back {
-  color: red;
-}
-
- -

输出结果如下,反斜杠显示在斜杠上方

- -
-

/

- -

\

-
- - - - - - - -
 
-
- -
-
更多详情
- -

更多详情的postion说明在 CSS Specification 中占用了两个章节: Visual formatting model 和 Visual formatting model details.

- -

如果你的样式表工作在多种浏览器环境下，你会发现不同浏览器对标准协议的解释会有很多不同, 而且特定浏览器的特定版本可能存在BUG。

-
- -

实践: 设置布局

- -
    -
  1. 修改示例文档, doc2.html, 和样式表, style2.css, 使用之前的示例 文档结构 and 浮动.
    2. -
  2. 在 浮动 示例中, 添加padding 来分离文本和右侧border ,值设为0.5 em.
    3. -
- -
-
挑战
- -

修改示例文档, doc2.html, 在文档末尾添加一个标签, 注意在</body>之前。

- -
<img id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin">
-
- -

如果你在之前的教程中没有下载过该图片, 现在下载, 将它与示例文件放在同一目录下:

- - - - - - - -
Image:Yellow-pin.png
- -

预测一下你的图片将会出现在哪里，然后刷新浏览器验证一下。

- -

在样式表中添加一条规则，将图片显示在文档右上角。

- -

刷新浏览器并把窗口拉小。 查看图片是否在右上角，拖动容器大小，再次查看。

- -
-
-

(A) The oceans

- -
-
    -
  • Arctic
    • -
  • Atlantic
    • -
  • Pacific
    • -
  • Indian
    • -
  • Southern
    • -
-
- -

(B) Numbered paragraphs

- -
-

1: Lorem ipsum

- -

2: Dolor sit

- -

3: Amet consectetuer

- -

4: Magna aliquam

- -

5: Autem veleum

-
- -

 

- -
Yellow map pin
-
-
-
- -

 查看该挑战的解决方案。

- -

接下来是什么？

- -

{{ nextPage("/zh-CN/docs/CSS/开始/Tables", "表格") }}你几乎已经学习了这篇CSS基本教程的所有主题。接下来将描述更多CSS规则的高级选择器，以及你可以用来展示表格的一些特定方法。

diff --git a/files/zh-cn/web/guide/css/getting_started/lists/index.html b/files/zh-cn/web/guide/css/getting_started/lists/index.html deleted file mode 100644 index 8a85655517..0000000000 --- a/files/zh-cn/web/guide/css/getting_started/lists/index.html +++ /dev/null @@ -1,324 +0,0 @@ ---- -title: Lists -slug: Web/Guide/CSS/Getting_started/Lists -translation_of: Learn/CSS/Styling_text/Styling_lists -translation_of_original: Web/Guide/CSS/Getting_started/Lists ---- -

{{ CSSTutorialTOC() }}

- -

{{ previousPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Content", "内容") }} 这是CSS入门教程 教程的第10部分; 它将向你描述你如何用CSS来指定列表的外观. 你将创建一个新的包含列表的示例文件，和一个新的定义列表的样式表。

- -

信息: 列表

- -

如果你完成了上一节的挑战任务，你就知道如何在列表项前面插入内容。

- -

CSS为列表提供了专门的属性。如果可以，使用这些属性通常会比较方便。

- -

使用{{ cssxref("list-style") }} 属性来指定列表项标记的样式。

- -

你的CSS中的选择器可以选中列表项 (比如, {{ HTMLElement("li") }})。也可以选中列表项的父节点 (比如, {{ HTMLElement ("ul") }})。此时列表项会继承父节点的样式。

- -

无序列表

- -

无序列表的每个列表项都用同样的方式标记。

- -

CSS 有三种标记样式：

- - - -

你可以指定一个图片的URL来自定义标记样式。

- -
-
例
- -

下面的规则为不同类的列表项指定了不同的标记：

- -
li.open {list-style: circle;}
-li.closed {list-style: disc;}
-
- -

这些类被用于列表项时，用以区分打开和关闭的列表项 (比如，在一个待办事项列表中)：

- -
<ul>
-  <li class="open">Lorem ipsum</li>
-  <li class="closed">Dolor sit</li>
-  <li class="closed">Amet consectetuer</li>
-  <li class="open">Magna aliquam</li>
-  <li class="closed">Autem veleum</li>
-</ul>
-
- -

结果：

- - - - - - - -
-
    -
  • Lorem ipsum
    • -
  • Dolor sit
    • -
  • Amet consectetuer
    • -
  • Magna aliquam
    • -
  • Autem veleum
    • -
-
-
- -

有序列表

- -

在有序列表中，每个列表项都被标记了不同的序号。

- -

用{{ cssxref("list-style") }} 属性指定标记样式：

- - - -
-
例
- -

这条规则指定类名包含info的{{ HTMLElement("ol") }} 元素的列表项用大写字母标序

- -
ol.info {list-style: upper-latin;}
-
- -

{{ HTMLElement("li") }} 元素继承了ol的样式：

- - - - - - - -
-
    -
  • Lorem ipsum
    • -
  • Dolor sit
    • -
  • Amet consectetuer
    • -
  • Magna aliquam
    • -
  • Autem veleum
    • -
-
-
- -
-
更多细节
- -

{{ cssxref("list-style") }} 属性是一个快捷写法。在复杂的样式表中你可能更希望用单独的属性设置不同的属性值。欲查看这些单独的属性和更详细的CSS指定列表的方法，见 {{ cssxref("list-style") }}参考页。

- -

如果你使用如HTML这类提供了方便的无序列表 ({{ HTMLElement("ul") }}) 和有序列表({{ HTMLElement("ol") }})的标记语言，就尽量使用这些标签。当然，你完全可以将 {{ HTMLElement("ul") }} 显示成有序列表，将 {{ HTMLElement("ol") }} 显示成无序列表。

- -

浏览器实现列表样式略有不同。不要奢望样式表可以让列表在所有浏览器中显示的完全一样。

-
- -

计数器

- -
-

注意:  一些浏览器不支持计数器。Quirks Mode site 的CSS contents and browser compatibility 页有更多这方面的兼容表格可以参考。 CSS Reference 也有浏览器兼容性表格。

-
- -

你可以用计数器来计数任何元素，不仅是列表元素。比如，在某些文档中你可能想计数标题和段落。

- -

要想计数，你必须定义一个计数器。

- -

在计数开始前的某个元素上，设置 {{ cssxref("counter-reset") }}属性以重置计数器。被计数元素的父节点是一个不错的选择。当然，任何出现在被计数元素前面的元素都可以。

- -

设置每个需要计数的元素的{{ cssxref("counter-increment") }} 属性为你的计数器名。

- -

通过为选择器增加 {{ cssxref(":before") }} 或 {{ cssxref(":after") }} 并设置 content 属性来显示计数器。 (如上一节所示, 内容).

- -

在content属性的值中设置 counter()，在括号内填上计数器的名字。可选的是设置计数器类型。其类型和前面一节 有序列表 中相同。

- -

正常情况下，显示计数器的元素也会递增计数器。

- -
-
例
- -

这条规则会为每个类名中包含numbered的{{ HTMLElement("h3") }} 元素初始化计数器 mynum：

- -
h3.numbered {counter-reset: mynum;}
-
- -

 

- -

这条规则为每个类名包含numbered的{{ HTMLELement("p") }}元素显示并递增计数器：

- -
p.numbered:before {
-  content: counter(mynum) ": ";
-  counter-increment: mynum;
-  font-weight: bold;}
-
- -

结果：

- - - - - - - -
Heading - -

1: Lorem ipsum

- -

2: Dolor sit

- -

3: Amet consectetuer

- -

4: Magna aliquam

- -

5: Autem veleum

-
-
- -
-
更多细节
- -

除非所有看你文档的人的浏览器都支持计数器，否则你不能使用计数器。

- -

如果你可以使用计数器，那么你可以单独设置计数器的样式。如上面例子所示：计数器是粗体，但列表不是。

- -

你还可以用更复杂的方式使用计数器。比如，计数章节, 标题, 子标题以及段落。详见CSS规范中的 Automatic counters and numbering 。

-
- -

实例: 设计列表样式

- -

新建doc2.html：

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8">
-    <title>Sample document 2</title>
-    <link rel="stylesheet" href="style2.css">
-  </head>
-  <body>
-
-    <h3 id="oceans">The oceans</h3>
-    <ul>
-      <li>Arctic</li>
-      <li>Atlantic</li>
-      <li>Pacific</li>
-      <li>Indian</li>
-      <li>Southern</li>
-    </ul>
-
-    <h3 class="numbered">Numbered paragraphs</h3>
-    <p class="numbered">Lorem ipsum</p>
-    <p class="numbered">Dolor sit</p>
-    <p class="numbered">Amet consectetuer</p>
-    <p class="numbered">Magna aliquam</p>
-    <p class="numbered">Autem veleum</p>
-
-  </body>
-</html>
-
- -

新建style2.css：

- -
/* numbered paragraphs */
-h3.numbered {counter-reset: mynum;}
-
-p.numbered:before {
-  content: counter(mynum) ": ";
-  counter-increment: mynum;
-  font-weight: bold;
-}
-
- -

如果布局和注释不符合你的口味，随便改。

- -

在浏览器中打开。如果你的浏览器支持计数器，你将看到下面的样子。如果不支持，你将看不到数字序号。 (甚至冒号都看不到)：

- - - - - - - -
-

The oceans

- -
    -
  • Arctic
    • -
  • Atlantic
    • -
  • Pacific
    • -
  • Indian
    • -
  • Southern
    • -
- -

Numbered paragraphs

- -

1: Lorem ipsum

- -

2: Dolor sit

- -

3: Amet consectetuer

- -

4: Magna aliquam

- -

5: Autem veleum

-
- -
-
挑战
- -

增加一条规则，用罗马数字i到v计数大洋的名字

- - - - - - - -
-

The oceans

- -
    -
  • Arctic
    • -
  • Atlantic
    • -
  • Pacific
    • -
  • Indian
    • -
  • Southern
    • -
-
- -

 

- -

修改样式，将标题用大写字母加括号的方式标序：

- - - - - - - -
-

(A) The oceans

- -

. . .

- -

(B) Numbered paragraphs

- -

. . .

-
-
- -

答案

- -

接下来?

- -

{{ nextPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Boxes", "盒模型") }}浏览器显示你的样例文档，在将元素放置在页面上时，会在元素周围创建空间。下一章节将向你描述如何使用CSS来和元素下的形状一起工作，元素下的形状我们称为盒子（boxes）。

- -

 

diff --git a/files/zh-cn/web/guide/css/getting_started/media/index.html b/files/zh-cn/web/guide/css/getting_started/media/index.html deleted file mode 100644 index ef181eedcc..0000000000 --- a/files/zh-cn/web/guide/css/getting_started/media/index.html +++ /dev/null @@ -1,391 +0,0 @@ ---- -title: 媒体 -slug: Web/Guide/CSS/Getting_started/Media -translation_of: Web/Progressive_web_apps/Responsive/Media_types ---- -

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

- -

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

- -

信息: Media

- -

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所有媒体 (默认)
- -
-
更多
- -

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

- -

类型可以在样式表通过link方式加到文档时被指定，这是文档的标签语言允许的 。例如，在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元素上
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 来动态地改变规则。

diff --git a/files/zh-cn/web/guide/css/getting_started/readable_css/index.html b/files/zh-cn/web/guide/css/getting_started/readable_css/index.html deleted file mode 100644 index 17553c5013..0000000000 --- a/files/zh-cn/web/guide/css/getting_started/readable_css/index.html +++ /dev/null @@ -1,167 +0,0 @@ ---- -title: 创建可读性良好的CSS -slug: Web/Guide/CSS/Getting_started/Readable_CSS -translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable -translation_of_original: Web/Guide/CSS/Getting_started/Readable_CSS ---- -

{{ CSSTutorialTOC() }}

- -

{{ previousPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Selectors", "选择器")}}这是CSS入门教程系列教程的第6部分； 本节讨论了CSS语言自身的样式及语法。你可以更改CSS示例文件的代码外观，来使其更具可读性。

- -

资料：创建可读性良好的 CSS

- -

你可以通过添加空白字符和注释来提高样式表的可读性。你也可以把不同的选择器放到一组中来，这样同一样式可以应用到这一组中。

- -

空白字符

- -

空白字符是指空格、tab字符和换行。你可以通过添加这些空白字符来提高样式表的可读性。

- -

对页面而言，空白字符也是页面的一个组成部分，它的效果就是创造了边距、分割，还有行和列间的空白。

- -

如果你的样式表中一行只有一条规则，那这是使用空白字符最少的情况。但是，对于复杂的样式表而言，这可能不便于阅读，而且维护起来也比较困难。

- -

样式表的书写风格可以根据你自己的喜好来选择。但是，如果你开发的项目需要分享给他人，那就很有必要来制定一些书写规范。

- -
-
示例
- -

有人喜欢我们这里使用的紧凑的书写风格，但是如果规则较长的时候就需要来进行分割：

- -
.carrot {color: orange; text-decoration: underline; font-style: italic;}
-
- -

也有人喜欢下面这种每行只写一个属性-值的风格：

- -
.carrot
-{
-color: orange;
-text-decoration: underline;
-font-style: italic;
-}
-
- -

还有人喜欢缩进（两个空格、四个空格，或者tab键是最常用的方式）：

- -
.carrot {
-  color: orange;
-  text-decoration: underline;
-  font-style: italic;
-}
-
- -

还有人喜欢这种垂直对齐的方式（这种方式比较难维护）：

- -
.carrot
-    {
-    color           : orange;
-    text-decoration : underline;
-    font-style      : italic;
-    }
-
- -

有些人混合使用空白字符来提高可读性：

- -
.vegetable         { color: green; min-height:  5px; min-width:  5px }
-.vegetable.carrot  { color: orange;    height: 90px;     width: 10px }
-.vegetable.spinach { color: darkgreen; height: 30px;     width: 30px }
-
-
- -

而且，在使用的空白字符的时候，有人喜欢用tab键，有人喜欢使用空格。

- -

注释

- -

CSS注释以/* 开始，以 */结束。

- -

你可以在样式表中写些实际意义的注释，也可以是为了测试的目的而写的临时性的注释内容。

- -

对于样式表中的注释内容一定要写在注释标签内，这样浏览器在解析的时候会忽略注释。一定要注意注释的起始标签。样式表的其他部分始终要符合语法规则。

- -
-
示例
- -
/* style for initial letter C in first paragraph */
-.carrot {
-  color:            orange;
-  text-decoration:  underline;
-  font-style:       italic;
-  }
-
-
- -

选取器组

- -

当很多元素具有相同的样式时，你就需要定义一个选择器组，组内用逗号分隔。这样声明的样式就会应用到组内所有的选择器上。

- -

在样式表的其他地方，你也可以单独对这些选择器重新设置样式，这些样式会应用到相应的选择器上。

- -
-
示例
- -

这条规则将 {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, 和 {{ HTMLElement("h3") }} 匹配到的元素设置为相同颜色。

- -

将定义颜色的规则写在一个地方是正确的，因为有些时候，这个颜色值可能需要统一修改。

- -
/* color for headings */
-h1, h2, h3 {color: navy;}
-
-
- -

实践：添加注释来提高展现力

- -
    -
  1. 编辑你的样式表，将下面的几条规则添加进去（规则顺序可以任意设置）： - 
    strong {color: red;}
-.carrot {color: orange;}
-.spinach {color: green;}
-#first {font-style: italic;}
-p {color: blue;}
-
    -
    2. -
  2. 为了让代码变得可读性更高，你需要通过分析其中的联系来对代码重新排序，并选择你认为最合适的方式来添加一些空白字符和注释。
    3. -
  3. 保存文件并刷新浏览器页面，要确保你更改后代码不影响原来的显示效果： - - - - - - - - - -
    Cascading Style Sheets
    Cascading Style Sheets
    -
    4. -
- -
-
挑战
- -

将你的样式表中的部分内容改为注释，以使文档的第一个字母颜色变为红色，但是注意不要改变其他任何内容：

- - - - - - - - - - -
Cascading Style Sheets
Cascading Style Sheets
- -

（这个不止一种解决方案。）

- -
-
一种解决方法：
-其中一种解决办法就是给.carrot添加注释： - -
.carrot {
-  color: orange;
-}
-
-A more specific selector, p#second also works. Hide solution
-查看解决方案
- -

接下来是什么?

- -

{{ nextPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Text_styles", "文本样式") }} 本节中，你的示例样式使用了 italic 文本以及 underlined 文本。 下一节将描述更多的方式来 详细指定文本的外观 。

diff --git a/files/zh-cn/web/guide/css/getting_started/selectors/index.html b/files/zh-cn/web/guide/css/getting_started/selectors/index.html deleted file mode 100644 index 69f0700b19..0000000000 --- a/files/zh-cn/web/guide/css/getting_started/selectors/index.html +++ /dev/null @@ -1,414 +0,0 @@ ---- -title: 选择器 -slug: Web/Guide/CSS/Getting_started/Selectors -translation_of: Learn/CSS/Building_blocks/Selectors -translation_of_original: Web/Guide/CSS/Getting_started/Selectors ---- -

{{ CSSTutorialTOC() }}

- -

{{ previousPage("/zh-CN/docs/CSS/开始/Cascading_and_inheritance", "层叠和继承")}}这是 CSS入门教程 的第五节; 本节将讲述如何应用样式；不同的选择器有不同的优先级；你在样例文档中为标签增加一些属性，在样式中使用这些属性。

- -

资料: 选择器（Selectors）

- -

CSS有一套用于描述其语言的术语。在前面的教程中，你应该已经写过这个样式：

- -
strong {
-  color: red;
-}
-
- -

在CSS的术语中，上面这段代码被称为一条规则（rule）。这条规则以选择器strong开始，它选择要在DOM中哪些元素上使用这条规则。

- -
-
更多细节
- -

花括号中的部分称为声明（declaration）

- -

关键字color是一个属性, red 是其对应的值.

- -

同一个声明中的 属性和值组成一个名值对（property-value pairs），名值对用分号分隔.

- -

这个教程中将类似strong的选择器称为标签选择器（tag selector）.CSS规范中称之为类型选择器（type selector）.

-
- -

本节将介绍更多的选择器。

- -

除了标签名称，你还可以在选择器中使用属性值。这样你就可以更具体的描述你的规则.

- -

其中 class 和 id 两个属性具有比较重要的地位。

- -

类选择器（Class selectors）

- -

通过设置元素的 class 属性，可以为元素指定类名。类名由开发者自己指定。 文档中的多个元素可以拥有同一个类名。

- -

在写样式表时，类选择器是以英文句号（.）开头的。

- -

ID选择器（ID selectors）

- -

通过设置元素的 id 属性为该元素制定ID。ID名由开发者指定。每个ID在文档中必须是唯一的。

- -

在写样式表时，ID选择器是以#开头的。

- -
-
例：
-下面的p标签同时具有 class 属性和id 属性: - -
<p class="key" id="principal">
-
- -

id 属性值 principal必须在文档中是唯一的；但文档中的其他标签可以有和p相同的 class 属性值 key.

- -

在一个CSS样式表中, 下面的规则将使所有class属性等于key的元素文字颜色呈现绿色。（这些元素不一定都是 {{ HTMLElement("p") }} 元素。）

- -
.key {
-  color: green;
-}
-
- -

下面的规则将使 id 等于 principal 的那个元素的文字变为粗体:

- -
#principal {
-  font-weight: bolder;
-}
-
-
- -

如果多于一个规则指定了相同的属性值都应用到一个元素上，CSS规定拥有更高确定度的选择器优先级更高。ID选择器比类选择器更具确定度, 而类选择器比标签选择器（tag selector）更具确定度。

- -
-
更多细节
- -

你也可以将多个选择器组合起来构成更确定的选择器。

- -

比如，选择器.key 选中所有class属性为 key的元素. 选择器 p.key 选中所有class属性为key的{{ HTMLElement("p") }} 元素。

- -

除了class 和 id，你还可以用方括号的形式指定其他属性。比如，选择器 [type='button'] 选中所有 type 属性为 button 的元素。

-
- -

如果样式中包含冲突的规则，且它们具有相同的确定度。那么，后出现的规则优先级高。

- -

如果你遇到规则冲突，你可以增加其中一条的确定度或将之移到后面以使它具有更高优先级。

- -

伪类选择器（Pseudo-classes selectors）

- -

CSS伪类（pseudo-class）是加在选择器后面的用来指定元素状态的关键字。比如，{{ Cssxref(":hover") }} 会在鼠标悬停在选中元素上时应用相应的样式。

- -

伪类和伪元素（pseudo-elements）不仅可以让你为符合某种文档树结构的元素指定样式，还可以为符合某些外部条件的元素指定样式：浏览历史(比如是否访问过 ({{ cssxref(":visited") }})， 内容状态(如 {{ cssxref(":checked") }} ), 鼠标位置 (如{{ cssxref(":hover") }}). 完整列表参见 CSS3 Selectors working spec.

- -
-
语法
- -
selector:pseudo-class {
-  property: value;
-}
-
-
- -

伪类列表

- - - -

资料: 基于关系的选择器

- -

CSS还有多种基于元素关系的选择器。通过它们你可以更精确的选择元素。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
常见的基于关系的选择器
选择器选择的元素
A E元素A的任一后代元素E (后代节点指A的子节点，子节点的子节点，以此类推)
A > E元素A的任一子元素E(也就是直系后代)
E:first-child任一是其父母结点的第一个子节点的元素E
B + E元素B的任一下一个兄弟元素E
B ~ EB元素后面的拥有共同父元素的兄弟元素E
- -

你可以任意组合以表达更复杂的关系。

- -

你还可以使用星号（*）来表示”任意元素“。

- -
-
例
- -

一个HTML表格有id 属性，但是它的行和单元格没有单独的id:

- -
<table id="data-table-1">
-...
-<tr>
-<td>Prefix</td>
-<td>0001</td>
-<td>default</td>
-</tr>
-...
-
- -

下面的规则使表格每行的第一个单元格字体为粗体，使第二个单元格使用等宽字体。这条规则只影响id为data-table-1的表格:

- -
    #data-table-1 td:first-child {font-weight: bolder;}
-    #data-table-1 td:first-child + td {font-family: monospace;}
-
- -

最终效果:

- - - - - - - -
- - - - - - - - -
Prefix0001default
-
-
- -
-
更多细节
- -

一般情况下，如果你提高了某个选择器的的确定度，你便提高它的优先级。

- -

使用这个技巧，可以避免为大量标签指定 class 或 id 属性。CSS（引擎）会帮你做的。

- -

在复杂设计中速度非常重要，避免使用复杂的依赖元素关系的规则可以使你的样式更有效率。

- -

更多关于表格的例子，见 Tables。

-
- -

实例: 使用类选择器和ID选择器

- -
    -
  1. 创建一个HTML文件
    2. -
  2. 将下面内容拷贝到HTML文件中 - 
    <!doctype html>
-<html>
-  <head>
-  <meta charset="UTF-8">
-  <title>Sample document</title>
-  <link rel="stylesheet" href="style1.css">
-  </head>
-  <body>
-    <p id="first">
-      <strong class="carrot">C</strong>ascading
-      <strong class="spinach">S</strong>tyle
-      <strong class="spinach">S</strong>heets
-    </p>
-    <p id="second">
-      <strong>C</strong>ascading
-      <strong>S</strong>tyle
-      <strong>S</strong>heets
-    </p>
-  </body>
-</html>
-
    -
    3. -
  3. 创建style1.css: - 
    strong { color: red; }
-.carrot { color: orange; }
-.spinach { color: green; }
-#first { font-style: italic; }
-
    -
    4. -
  4. 保存文件，在浏览器中查看效果: - - - - - - - - - -
    Cascading Style Sheets //此处应为斜体
    Cascading Style Sheets
    - -

    重新组织样式中规则的顺序，你会发现改变这几条规则的顺序不会影响最终效果。

    - -

    类选择器 .carrot 和.spinach 比标签选择器 strong 拥有更高优先级。

    - -

    ID 选择器 #first 比类选择器和标签选择器更优先。

    -
    5. -
- -
-
挑战
- -
    -
  1. 不改变HTML内容, 增加一条规则，不改变首字母颜色，将第二个p标签中的其他文字变成蓝色: - - - - - - - - - -
    Cascading Style Sheets
    Cascading Style Sheets
    -
    2. -
  2. 现在改变上面增加的那条规则（不改变其他任何内容）让第一个p标签中的其他文字也变成蓝色: - - - - - - - - - -
    Cascading Style Sheets
    Cascading Style Sheets
    -
    3. -
- -
-
Possible solution
- -
    -
  1. Add a rule with an ID selector of #second and a declaration color: blue;, as shown below: - - 
    #second { color: blue; }
-
    - A more specific selector, p#second also works.
    2. -
  2. Change the selector of the new rule to be a tag selector using p: - 
    p { color: blue; }
-
    -
    3. -
-Hide solution
-See a solution for the challenge.
- -

实例: 使用伪类选择器

- -
    -
  1. 创建如下 HTML: - 
    <!doctype html>
-<html>
-  <head>
-  <meta charset="UTF-8">
-  <title>Sample document</title>
-  <link rel="stylesheet" href="style1.css">
-  </head>
-  <body>
-    <p>Go to our <a class="homepage" href="http://www.example.com/" title="Home page">Home page</a>.</p>
-  </body>
-</html>
-
    -
    2. -
  2. 编辑CSS: - 
    a.homepage:link, a.homepage:visited {
-  padding: 1px 10px 1px 10px;
-  color: #fff;
-  background: #555;
-  border-radius: 3px;
-  border: 1px outset rgba(50,50,50,.5);
-  font-family: georgia, serif;
-  font-size: 14px;
-  font-style: italic;
-  text-decoration: none;
-}
-
-a.homepage:hover, a.homepage:focus, a.homepage:active {
-  background-color: #666;
-}
-
    -
    3. -
  3. 保存文件用浏览器查看HTML文件 (将鼠标放到链接上查看效果): - - - - - - -
    Go to our Home page  
    -
    4. -
- -

实例: 使用基于关系的选择器和伪类选择器

- -

通过使用基于关系的选择器和伪类选择器，你可以构造出复杂的叠加算法。这是一个常用的技巧，比如可以用来创建纯CSS无JavaScript的下拉菜单（pure-CSS dropdown menus）。关键点就是创建下面这类规则：

- -
div.menu-bar ul ul {
-  display: none;
-}
-
-div.menu-bar li:hover > ul {
-  display: block;
-}
- -

然后将这些规则应用到下面的HTML结构中：

- -
<div class="menu-bar">
-  <ul>
-    <li>
-      <a href="example.html">Menu</a>
-      <ul>
-        <li>
-          <a href="example.html">Link</a>
-        </li>
-        <li>
-          <a class="menu-nav" href="example.html">Submenu</a>
-          <ul>
-            <li>
-              <a class="menu-nav" href="example.html">Submenu</a>
-              <ul>
-                <li><a href="example.html">Link</a></li>
-                <li><a href="example.html">Link</a></li>
-                <li><a href="example.html">Link</a></li>
-                <li><a href="example.html">Link</a></li>
-              </ul>
-            </li>
-            <li><a href="example.html">Link</a></li>
-          </ul>
-        </li>
-      </ul>
-    </li>
-  </ul>
-</div>
-
- -

学习实例 CSS-based dropdown menu example.

- -

接下来是什么?

- -

你的样式表变得多而复杂。下面章节将讲述如何让样式表更 易读.{{nextPage("/zh-CN/docs/CSS/开始/Readable_CSS", "易读的 CSS")}}

diff --git a/files/zh-cn/web/guide/css/getting_started/svg_and_css/index.html b/files/zh-cn/web/guide/css/getting_started/svg_and_css/index.html deleted file mode 100644 index f2e753baca..0000000000 --- a/files/zh-cn/web/guide/css/getting_started/svg_and_css/index.html +++ /dev/null @@ -1,191 +0,0 @@ ---- -title: SVG and CSS -slug: Web/Guide/CSS/Getting_started/SVG_and_CSS -translation_of: Web/SVG/Tutorial/SVG_and_CSS ---- -
- {{CSSTutorialTOC}}
-

本节将演示如何将CSS应用到 SVG 中。

-

你将创建一个简单的演示代码并在支持SVG的浏览器中运行。

-

这是 CSS 教程 第二部分的第二节
- 前一节: JavaScript
- 下一节: XML data

-

信息: SVG

-

SVG (Scalable Vector Graphics)是一个基于XML的图形描述语言。

-

它可以用于描述静态图、动画，以及用户界面。

-

和其他基于XML的语言一样，SVG 支持用 CSS 样式表将图形内容和图形样式分离。

-

在样式表中你可以在任何可以可以指定图片的地方指定一个SVG的URL。比如，在HTML的样式表中，你可以为 background 属性指定一个SVG的URL。

- - - - - - - -
- 更多细节
-

在这个教程编写的时间点(2011中旬)，绝大多数现代浏览器都对SVG有基本的支持。其中包括 Internet Explorer 9 及其后续版本。一些SVG特性只被某些浏览器支持。参见 SVG tables on caniuse.com 了解支持情况。 参见 SVG element reference 了解兼容情况。

-

通过安装 Adobe 提供的插件，你可以让某些浏览器支持SVG。

-

欲在Mozilla了解更多关于SVG的信息，参考 这里SVG。

-
-

实例: 一个SVG演示

-

建立一个SVG文件doc8.svg。复制下面所有内容：

-
<?xml version="1.0" standalone="no"?>
-
-<?xml-stylesheet type="text/css" href="style8.css"?>
-
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
-  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-
-<svg width="600px" height="600px" viewBox="-300 -300 600 600"
-  xmlns="http://www.w3.org/2000/svg" version="1.1"
-  xmlns:xlink="http://www.w3.org/1999/xlink">
-
-<title>SVG demonstration</title>
-<desc>Mozilla CSS Getting Started - SVG demonstration</desc>
-
-<defs>
-  <g id="segment" class="segment">
-    <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
-    <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
-    </g>
-  <g id="quadrant">
-    <use xlink:href="#segment"/>
-    <use xlink:href="#segment" transform="rotate(18)"/>
-    <use xlink:href="#segment" transform="rotate(36)"/>
-    <use xlink:href="#segment" transform="rotate(54)"/>
-    <use xlink:href="#segment" transform="rotate(72)"/>
-    </g>
-  <g id="petals">
-    <use xlink:href="#quadrant"/>
-    <use xlink:href="#quadrant" transform="rotate(90)"/>
-    <use xlink:href="#quadrant" transform="rotate(180)"/>
-    <use xlink:href="#quadrant" transform="rotate(270)"/>
-    </g>
-  <radialGradient id="fade" cx="0" cy="0" r="200"
-      gradientUnits="userSpaceOnUse">
-    <stop id="fade-stop-1" offset="33%"/>
-    <stop id="fade-stop-2" offset="95%"/>
-    </radialGradient>
-  </defs>
-
-<text id="heading" x="-280" y="-270">
-  SVG demonstration</text>
-<text  id="caption" x="-280" y="-250">
-  Move your mouse pointer over the flower.</text>
-
-<g id="flower">
-  <circle id="overlay" cx="0" cy="0" r="200"
-    stroke="none" fill="url(#fade)"/>
-  <use id="outer-petals" xlink:href="#petals"/>
-  <use id="inner-petals" xlink:href="#petals"
-    transform="rotate(9) scale(0.33)"/>
-  </g>
-
-</svg>
-
-

创建一个CSS文件, style8.css。 复制下面所有内容：

-
/*** SVG demonstration ***/
-
-/* page */
-svg {
-  background-color: beige;
-  }
-
-#heading {
-  font-size: 24px;
-  font-weight: bold;
-  }
-
-#caption {
-  font-size: 12px;
-  }
-
-/* flower */
-#flower:hover {
-  cursor: crosshair;
-  }
-
-/* gradient */
-#fade-stop-1 {
-  stop-color: blue;
-  }
-
-#fade-stop-2 {
-  stop-color: white;
-  }
-
-/* outer petals */
-#outer-petals {
-  opacity: .75;
-  }
-
-#outer-petals .segment-fill {
-  fill: azure;
-  stroke: lightsteelblue;
-  stroke-width: 1;
-  }
-
-#outer-petals .segment-edge {
-  fill: none;
-  stroke: deepskyblue;
-  stroke-width: 3;
-  }
-
-#outer-petals .segment:hover > .segment-fill {
-  fill: plum;
-  stroke: none;
-  }
-
-#outer-petals .segment:hover > .segment-edge {
-  stroke: slateblue;
-  }
-
-/* inner petals */
-#inner-petals .segment-fill {
-  fill: yellow;
-  stroke: yellowgreen;
-  stroke-width: 1;
-  }
-
-#inner-petals .segment-edge {
-  fill: none;
-  stroke: yellowgreen;
-  stroke-width: 9;
-  }
-
-#inner-petals .segment:hover > .segment-fill {
-  fill: darkseagreen;
-  stroke: none;
-  }
-
-#inner-petals .segment:hover > .segment-edge {
-  stroke: green;
-  }
-
-

在支持SVG的浏览器中打开上面的文档。将鼠标移到图上。

-

由于这个wiki不支持嵌入SVG，所以下面是一个截图供参考:

- - - - - - -
SVG demonstration
-

解释:

- - - - - - - - -
- 挑战
修改样式表使得当鼠标指针移到任何一个内层花瓣上时所有内层花瓣都变为粉色，但不改变外层花瓣的效果。
-

接下来?

-

如果你有任何疑问或评论请移步到讨论区。

-

在这个演示中，支持SVG的浏览器知道如何显示SVG元素。样式表只是修改其呈现的方式。同样，这对HTML和XUL文档也是适用的。你也可以将CSS用于XML文档。（与HTML相比，）XML没有预先为元素定义样式。下一个节将对此进行演示: XML data

diff --git a/files/zh-cn/web/guide/css/getting_started/tables/index.html b/files/zh-cn/web/guide/css/getting_started/tables/index.html deleted file mode 100644 index b6b4859e99..0000000000 --- a/files/zh-cn/web/guide/css/getting_started/tables/index.html +++ /dev/null @@ -1,509 +0,0 @@ ---- -title: 表格 -slug: Web/Guide/CSS/Getting_started/Tables -translation_of: Learn/CSS/Building_blocks/Styling_tables -translation_of_original: Web/Guide/CSS/Getting_started/Tables ---- -

{{CSSTutorialTOC}}{{previousPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Layout", "布局")}}

- -

这是CSS入门教程的第13部分，将介绍更多高级的选择器，以及格式表格的一些特定方法。你将创建一个包含表格的新样例文档，然后对它进行样式排版。

- -

信息: 表格

- -

表格是一个矩形网格中的信息安排。一些表格相当复杂，不同的浏览器对复杂的表格将会有不同的展示结果。

- -

当你设计你的文档时，使用一个表格来表示一系列信息的关系。因为信息的意义依然清晰，所以不同浏览器用稍微不同的方式来展示表格是没有关系的。

- -

创建表格的时候，不要用一些非常规的方式构造特殊的可视化布局，本教程的前一页（布局）使用的技术可以更好的达成目的。

- -

表格结构

- -

在表格中，信息显示在一个个的单元格（cell）中.

- -

在页面横向上一条直线的单元格构成了行（row）。

- -

在一些表格中，行可能被分组。表格开始的特定的行组是表头 （header）。表格最后的特定行组是表尾（footer）。表格中主要的行就是表体（body），这些表体也可能被分组。

- -

在页面纵向上一条直线的单元格构成了列（column），但是在CSS表格中，列的使用是受限的。

- -
-
示例
- -

在选择器那章的基于关系的选择器就是一个五行十个单元格的表格。

- -

第一行是表头，其余四行是表体，没有表尾。

- -

表中有两列。

-
- -

本教程仅仅涵盖简单表格，其呈现结果完全可以预测。在一个简单表格里，每个单元格仅占用一行一列。你可以用CSS将一个单元格扩展到多行或者多列来构造复杂表格，但是这样的表格已超出了这个基本教程所讲述的范围。

- -

边框

- -

单元格没有外边距。

- -

但是单元格有边框和内边距。默认情况下，边框被表格的{{cssxref("border-spacing")}}属性值间隔。你也可以通过设置表格的{{cssxref("border-collapse")}}属性值为collapse来完全移除间隔。

- -
-
示例
- -

这有三个表格。

- -

左边的表格有0.5 em的边框间隔，中间的表格是0边框间隔，右边的表格是拥有collapse的边框。

- -
- - - - - - - - - - - -
ClubsHearts
DiamondsSpades
- - - - - - - - - - - - -
ClubsHearts
DiamondsSpades
- - - - - - - - - - - - -
ClubsHearts
DiamondsSpades
-
- -

标题

- -

{{HTMLElement("caption")}}元素是用在整个表格的一个标签。默认下，它显示在表格的顶部。

- -

可以设置{{HTMLElement("caption")}}的{{cssxref("caption-side")}}属性值为bottom来将标签移到表格的底部。

- -

想要样式化caption的文本，可以使用任何常规的文本属性。

- -
-
示例
- -

这个表格有一个在底部的标题。

- -
#demo-table > caption {
-  caption-side: bottom;
-  font-style: italic;
-  text-align: right;
-}
-
- - - - - - - -
- - - - - - - -
Suits
- - - - - - - - - - - -
ClubsHearts
DiamondsSpades
-
-
-
- -

空单元格

- -

你可以通过为表格元素指定{{cssxref("empty-cells")}}属性值show来显示空单元格（就是其边框和背景）。

- -

你也可以指定empty-cells: hide;来隐藏边框和背景，那么如果一个单元格的父元素设置了背景，背景将通过空单元格显示出来。

- -
-
实例
- -

这些表格有苍绿色的背景，其单元格有苍灰色的背景和深灰色的边框。

- -

左边的表格，空单元格是显示的。在右边，空单元格是隐藏的。

- - - - - - - - -
- - - - - - - - - - - -
 Hearts
DiamondsSpades
- 		- - - - - - - - - - - -
 Hearts
DiamondsSpades
-
-
- -
-
细节
- -

请查看CSS规范中的表格来获得更多关于表格的细节信息。

- -

规范中有比该教程更进一步的信息，但它不包括浏览器可能会影响复杂表格之间的差异。

-
- -

实例: 设计表格样式

- -
    -
  1. 创建一个新的HTML文档, doc3.html。 复制粘贴以下内容，请确保通过滚动获取全部内容： - -
    - 
    <!DOCTYPE html>
-<html>
-  <head>
-    <title>Sample document 3</title>
-    <link rel="stylesheet" href="style3.css">
-  </head>
-  <body>
-    <table id="demo-table">
-      <caption>Oceans</caption>
-      <thead>
-        <tr>
-          <th></th>
-          <th>Area</th>
-          <th>Mean depth</th>
-        </tr>
-        <tr>
-          <th></th>
-          <th>million km<sup>2</sup></th>
-          <th>m</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <th>Arctic</th>
-          <td>13,000</td>
-          <td>1,200</td>
-        </tr>
-        <tr>
-          <th>Atlantic</th>
-          <td>87,000</td>
-          <td>3,900</td>
-        </tr>
-        <tr>
-          <th>Pacific</th>
-          <td>180,000</td>
-          <td>4,000</td>
-        </tr>
-        <tr>
-          <th>Indian</th>
-          <td>75,000</td>
-          <td>3,900</td>
-        </tr>
-        <tr>
-          <th>Southern</th>
-          <td>20,000</td>
-          <td>4,500</td>
-        </tr>
-      </tbody>
-      <tfoot>
-        <tr>
-          <th>Total</th>
-          <td>361,000</td>
-          <td></td>
-        </tr>
-        <tr>
-          <th>Mean</th>
-          <td>72,000</td>
-          <td>3,800</td>
-        </tr>
-      </tfoot>
-    </table>
-  </body>
-</html>
-
    -
    -
    2. -
  2. 创建一个新的样式表 style3.css。复制粘贴一些内容，通过滚动获取全部内容： - 
    /*** Style for doc3.html (Tables) ***/
-
-#demo-table {
-  font: 100% sans-serif;
-  background-color: #efe;
-  border-collapse: collapse;
-  empty-cells: show;
-  border: 1px solid #7a7;
-}
-
-#demo-table > caption {
-  text-align: left;
-  font-weight: bold;
-  font-size: 200%;
-  border-bottom: .2em solid #4ca;
-  margin-bottom: .5em;
-}
-
-
-/* basic shared rules */
-#demo-table th,
-#demo-table td {
-  text-align: right;
-  padding-right: .5em;
-}
-
-#demo-table th {
-  font-weight: bold;
-  padding-left: .5em;
-}
-
-
-/* header */
-#demo-table > thead > tr:first-child > th {
-  text-align: center;
-  color: blue;
-}
-
-#demo-table > thead > tr + tr > th {
-  font-style: italic;
-  color: gray;
-}
-
-/* fix size of superscript */
-#demo-table sup {
-  font-size: 75%;
-}
-
-/* body */
-#demo-table td {
-  background-color: #cef;
-  padding:.5em .5em .5em 3em;
-}
-
-#demo-table tbody th:after {
-  content: ":";
-}
-
-
-/* footer */
-#demo-table tfoot {
-  font-weight: bold;
-}
-
-#demo-table tfoot th {
-  color: blue;
-}
-
-#demo-table tfoot th:after {
-  content: ":";
-}
-
-#demo-table > tfoot td {
-  background-color: #cee;
-}
-
-#demo-table > tfoot > tr:first-child td {
-  border-top: .2em solid #7a7;
-}
-
    -
    3. -
  3. 在浏览器打开文档，它将看起来像下面一样： - - - - - - -
    -
    -

    Oceans

    - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
     AreaMean depth
     million km2m
    Arctic:13,0001,200
    Atlantic:87,0003,900
    Pacific:180,0004,000
    Indian:75,0003,900
    Southern:20,0004,500
    Total:361,000 
    Mean:72,0003,800
    -
    -
    -
    -
    4. -
  4. 对比样式表里显示表格的规则来确保你理解每一条规则的效果。如果你发现你不明白某一条，注释掉，然后刷新浏览器来看看发生什么。下面是关于该表格一些注意事项： -
      -
    • 标题是放在表格边框的外面的;
      • -
    • 如果你在可选项中设置了最小点尺寸，它可能会影响km2这样的上标;
      • -
    • 有三个空单元格，其中两个显示了表格的背景色，第三个有单元格自己的背景和上边框;
      • -
    • 冒号是通过样式表来添加的。
      • -
    -
    5. -
- -
-
挑战
- -

更改样式表来使表格像下面一样显示：

- - - - - - - -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 AreaMean depth
 million km2m
Arctic:13,0001,200
Atlantic:87,0003,900
Pacific:180,0004,000
Indian:75,0003,900
Southern:20,0004,500
Total:361,000 
Mean:72,0003,800
-
- -

Oceans

-
-
-
- -

查看挑战的答案。

- -

接下来?

- -

{{nextPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Media", "媒体")}}这是本教程关于CSS属性和值的最后一页。请查看CSS规范中的完全属性表来获得完整的属性和值的信息。

- -

下一页将再次着眼于CSS样式表的目的和结构。

-
diff --git a/files/zh-cn/web/guide/css/getting_started/text_styles/index.html b/files/zh-cn/web/guide/css/getting_started/text_styles/index.html deleted file mode 100644 index f7d1d38b23..0000000000 --- a/files/zh-cn/web/guide/css/getting_started/text_styles/index.html +++ /dev/null @@ -1,158 +0,0 @@ ---- -title: 文本样式 -slug: Web/Guide/CSS/Getting_started/Text_styles -translation_of: Learn/CSS/Styling_text/Fundamentals -translation_of_original: Web/Guide/CSS/Getting_started/Text_styles ---- -

{{ CSSTutorialTOC() }}

- -

{{previousPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Readable_CSS", "创建可读性良好的CSS")}} 这是CSS入门教程系列教程的第7部分；本节讲述了更多的有关文本的样式。你可以通过更改示例样式来使用不同的字体。

- -

资料：文本样式

- -

CSS提供了几个属性用来操作字体。

- -

我们先来看一个简写属性 {{ cssxref("font") }}，使用这个属性可以很方便的指定其他的字体属性。比如：

- - - -
-
示例
- -
p {font: italic 75%/125% "Comic Sans MS", cursive;}
-
- -

这条规则定义了字体的几个属性，使整个段落文本都变成斜体。

- -

字体大小设置为每个段落父元素字体大小的3/4，行高设置为125%（比常规的间隔稍大一些）。

- -

文本字体设置为 Comic Sans MS，假如该字体不被浏览器支持则使用默认字体：cursive。

- -

这条规则还把bold和small-caps这些效果给去掉了（设置它们的值为normal）。

-
- -

 

- -

字体

- -

你无法预料到用户是否可以访问样式表里定义的字体。所以在设置字体时，在属性后指定一个替代的字体列表是个不错的主意。

- -

在这个字体列表的最后加上系统字体中的一个，如：serif,sans-serif,cursive,fantasy或monospace。

- -

如果字体不支持样式表里设置的字体特征，浏览器会使用另一种字体。比如，样式表中包含字体不支持的特殊字符，如果浏览器发现另一种字体支持这些特殊字符，那浏览器就会选择使用这种字体。

- -

使用 {{ cssxref("font-family") }} 属性指定文本的字体。

- -

简体中文的字体示例：

- -

Windows：font-family:微软雅黑;

- -

Mac OS：font-family:"Songti SC";

- -

字号

- -

浏览器用户浏览页面时，可以覆盖页面默认的文号大小，也可以改变页面的字号大小。所以说尽可能的使用相对的字号大小对你来说是有意义的。

- -

你可使用系统内置的值来设置字号，比如small,medium和large。你也可以使用相对父元素字号大小的值来设置，比如：smaller,larger,150%或1.5em。1“em”等于1个字母“m”的宽度（相对于父元素字号大小）;因此1.5em就是1.5倍的父元素字号大小。

- -

如果有必要你也可以指定一个实际的大小，比如14px(14像素)应用于显示设备或14pt(14点)应用于打印设备。但是实际大小不能应用于视力受损用户的设备上，因为这些设备不支持指定实际的值。一个比较容易实现的策略是给顶级的文档元素指定一个系统内置的值如medium，然后再给它的子元素设置个相对值。

- -

使用{{ cssxref("font-size") }} 属性指定字体的大小。

- -

行高

- -

行高用来指定行与行之间的距离。如果你的文档中有一个很长的段落由很多行组成，而且这个段落的字号还比较小，这时给它指定一个稍大的间距，这样阅读起来会更方便。

- -

使用 {{ cssxref("line-height") }} 属性指定文本的行间距。

- -

装饰

- -

单独的 {{ cssxref("text-decoration") }}就可以为文本指定其他风格，比如underline或line-through。你也可以把值设置成none，把这些风格取消掉。

- -

其他属性

- -

使用{{ cssxref("font-style") }}: italic;指定文本为斜体;

- -

使用 {{ cssxref("font-weight") }}: bold;指定文本加粗;

- -

使用 {{ cssxref("font-variant") }}: small-caps;指定文本为小型大写字母;

- -

如果我们想单独设置某个效果失效，我们可以把其相应的属性设置为normal或inherit.

- -
-
详细资料
- -

我们也可以采用其他方式指定文本样式。

- -

比如，这里提到的几个属性的其他值。

- -

在一个复杂的样式表中，应该避免使用font属性，因为它的副作用（重置其他个体属性）。

- -

字体相关的全部细节，可以在CSS规范里查看Fonts 。文本修饰相关可以查看 Text 。

- -

如果我们不想使用系统上的默认字体库，我们可以使用{ { cssxref(@font-face)} }指定一个在线字体。然而，这要求用户的浏览器支持该字体。

-
- -

实践：指定字体

- -

对于一个简单的页面，我们可以设置 {{ HTMLElement("body") }}元素的字体，然后页面中的其他元素继承这个设置。

- -
    -
  1. 编辑我们的样式表。
    2. -
  2. 添加以下规则到你的样式表中。推荐这个规则放在css文件的开头: - 
    body {font: 16px "Comic Sans MS", cursive;}
-
    -
    3. -
  3. 添加一个该规则的注释，可以添加空格匹配你的整体样式布局。
    4. -
  4. 保存文件并刷新浏览器查看效果。如果你的系统有Comic Sans MS或cursive字体，这两种字体都不支持斜体。你的浏览器会自动选择另一种字体实现斜体，效果如第一行。 - - - - - - - - - -
    Cascading Style Sheets
    Cascading Style Sheets
    -
    5. -
  5. 从浏览器的菜单栏中选择 视图 > 字体大小 > 放大（或视图 > 缩放 > 放大）。即使你在样式里指定了字体为16px。用户浏览网页时，还是可以改变字体字号的大小。
    6. -
- -
-
挑战
- -

不改变什么，让6个初始字母的字号大小调整为2倍于浏览默认的衬线字体:

- - - - - - - - - - -
Cascading Style Sheets
Cascading Style Sheets
- -
-
Possible solution
- -

Add the following style declaration to the strong rule:

- -
  font: 200% serif;
-
-If you use separate declarations for font-size and font-family, then the font-style setting on the first paragraph is not overridden. - -

 

-Hide solution
-查看答案.
- -

下一节?

- -

{{nextPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Color", "颜色")}}示例文档已经使用几个颜色命名。下一节列表中将列出标准的颜色名称，并且介绍其他的定义颜色的方式。

diff --git a/files/zh-cn/web/guide/css/getting_started/what_is_css/index.html b/files/zh-cn/web/guide/css/getting_started/what_is_css/index.html deleted file mode 100644 index 7fcb01c0b0..0000000000 --- a/files/zh-cn/web/guide/css/getting_started/what_is_css/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: What is CSS -slug: Web/Guide/CSS/Getting_started/What_is_CSS -translation_of: Learn/CSS/First_steps/How_CSS_works -translation_of_original: Web/Guide/CSS/Getting_started/What_is_CSS ---- -
{{CSSTutorialTOC}}
- -

{{previousPage("/zh-CN/docs/CSS/开始", "开始")}} 作为 CSS 入门指南 教程的第一部分，本文解释了什么是 CSS。你需要创建一个文档以便用于接下来的学习。

- -

资料: 什么是 CSS

- -

Cascading Style Sheets (CSS) 是一门指定文档该如何呈现给用户的语言。

- -

文档 是信息的集合，它使用一门 标记语言 作为结构。

- -

将一篇文档 呈现 给用户是指将文档转换成你的听众能够使用的一种形式。火狐、Chrome或IE等浏览器，用于将文档以可视的形式进行呈现，如在计算机屏幕、投影仪或打印机上。

- -
-
示例
- - -
- -

在该教程中，如果使用像下方这样标题为 更多细节 的框，里面会包含额外信息。如果你迫切的想完成整个教程，那么可以跳过这些方框，等到以后有时间再回来看。当然也可以在碰到方框的时候去阅读这些内容，或者更进一步的，按照里面提供的链接去了解更多细节。

- -
-
更多细节
- -

一个文档并不等同于一个文件。它甚至可能不会保存在一个文件中。

- -

举例来说，你现在阅读的这个文档就不是保存在一个文件中。当你的浏览器请求该页面时，服务器会查询数据库生成文档，将散落在众多文件中的文档的碎片搜集起来。然而在本教程中，你使用的都是保存在文件中的文档。

- -

关于文档与标记语言的更多信息，可以查看本网站的其他部分—例如：

- - - - - - - - - - - - - - - - - - - - -
HTML用于 web 页面
XML用于结构化文档
SVG用于图形
XUL用于 Mozilla 中的用户界面
- -

在教程的第二部分，你会看到使用这些标记语言的例子。

-
- -

 为用户展现 文档意味着将其转换成一个可读性良好的格式。像 Firefox， Chrome 或是 Internet Explorer 这样的浏览器倾向于使用更视觉化的方式来展现文档 — 例如，在计算机屏幕，投影仪或是打印机上。

- -
-
更多细节
- -

CSS 并非仅仅用于浏览器，也不仅限于视觉展现。按照 CSS 的正式术语来讲，将文档呈现给用户的程序称为用户代理(UA)。浏览器只是用户代理的其中之一。不过在教程的第一部分中，你将只在浏览器中使用 CSS。

- -

要了解更多 CSS 术语定义的相关内容，请查看 CSS 规范的 定义。

-
- -

动手：创建一个文档

- -
    -
  1. 在你的电脑中创建一个新的文件夹，用于保存和管理本指南中的练习。
    2. -
  2. 打开你的文本编辑器并创建一个新文件。该文件将用于保存后续练习中的文档。
    3. -
  3. 将下面的内容复制粘贴进文本文件中。保存文件，将其命名为 doc1.html - 
    <!DOCTYPE html>
-<html>
-  <head>
-  <meta charset="UTF-8">
-  <title>Sample document</title>
-  </head>
-
-  <body>
-    <p>
-      <strong>C</strong>ascading
-      <strong>S</strong>tyle
-      <strong>S</strong>heets
-    </p>
-  </body>
-</html>
-
    -
    4. -
  4. 在你的浏览器中开启一个新的标签页或窗口，打开文件。 -

    你会看到一串开头字母大写的文本，像这样：

    - - - - - - - -
    Cascading Style Sheets
    - -

    由于你的浏览器与该 wiki 的设置可能不同，所以你看到的内容与上面显示的不一定相符合。如果在字体、间距或颜色有区别，请不要担心，因为这些内容暂时无关紧要。

    -
    5. -
- -

接下来是什么？

- -

{{nextPage("/zh-CN/docs/CSS/开始/为何使用CSS", "为什么使用 CSS?")}}现在你的文档中还没有使用 CSS。在下一节中，你将会使用 CSS 来指定样式。

diff --git a/files/zh-cn/web/guide/css/getting_started/why_use_css/index.html b/files/zh-cn/web/guide/css/getting_started/why_use_css/index.html deleted file mode 100644 index ca5092f2af..0000000000 --- a/files/zh-cn/web/guide/css/getting_started/why_use_css/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: 为何使用CSS？ -slug: Web/Guide/CSS/Getting_started/Why_use_CSS -tags: - - CSS - - 'CSS:入门' - - NeedsLiveSample -translation_of: Learn/CSS/First_steps/How_CSS_works -translation_of_original: Web/Guide/CSS/Getting_started/Why_use_CSS ---- -

{{ CSSTutorialTOC() }}

- -

{{ previousPage("/zh-CN/docs/CSS/开始/What_is_CSS", "什么是CSS?") }}这是CSS入门教程 的第二章节，解释了CSS与文档的关系。在下面的练习中，你将学习如何给你在第一章节中创建的示例文档添加CSS样式表。

- -

信息: 为何使用CSS？

- -

CSS帮助您将文档信息的内容 和如何展现它的细节相分离。众所周知，如何展现文档的细节即为样式(style)。您可以将样式从它的内容分离出来，以便您能够：

- - - -
-
例如
- -

您的网站可能有成千上万的页面外观相似。使用CSS，您可以将样式信息存储在公共的文件中以供所有的页面共用。

- -

当用户显示页面时，用户的浏览器将样式信息和页面内容一同加载。

- -

当用户打印页面时，您可以提供不同的样式信息，以便于打印出来的页面更易于阅读。

-
- -

总之，在HTML中，您使用标记语言来描述文档的内容而不是它的样式。您可以使用CSS来指定它的样式而不是它的内容。 (在本教程后续内容中，您会看到此种的例外情况。)

- -
-
更多的细节
- -

像HTML之类的标记语言也会提供指定样式的方法。

- -

例如，在HTML中，您可以使用<b>标签来加粗文字，同时，您也可以在页面的<body>标记中指定背景颜色。

- -

当您使用CSS时，您通常要避免使用标记语言的这些特性，以便您所有的文档样式信息保存在同一地方。

-
- -

行动：创建样式表

- -
    -
  1. 在与前面相同的目录中，新建另一个文本文件。该文件将成为您的样式表。请将它命名为：style1.css
    2. -
  2. 在您的CSS文件中，复制、粘贴下面的行，并保存该文件: - 
    strong {color: red;}
-
    -
    3. -
- -

连接您的文档和样式表

- -
    -
  1. 为将您的文档和样式表相连，请编辑您的HTML文件。并添加下面高亮的行： - 
    <!DOCTYPE html>
-<html>
-  <head>
-  <meta charset="UTF-8">
-  <title>Sample document</title>
-  <link rel="stylesheet" href="style1.css">
-  </head>
-  <body>
-    <p>
-      <strong>C</strong>ascading
-      <strong>S</strong>tyle
-      <strong>S</strong>heets
-    </p>
-  </body>
-</html>
-
    -
    2. -
  2. 保存该文件并刷新您的浏览器。该样式表将首字母显示为红色，如下所示： - - - - - - -
    Cascading Style Sheets
    -
    3. -
- -
-
挑战
- -

除了红色外，CSS允许使用其它的颜色名称。

- -

不查询参考手册，请在您使用的样式表找出五个以上的颜色名称。

- -
-
Possible solution
- -

CSS supports common color names like orange, yellow, blue, green, or black. It also supports some more exotic color names like chartreuse, fuschia, or burlywood. See CSS Color value for a complete list as well as other ways of specifying colors.

-Hide solution
-请参考解答。
- -

下一节？

- -

{{nextPage("/zh-CN/docs/CSS/开始/How_CSS_works", "CSS如何工作。")}}现在您将示例文档与独立的样式表连在了一起，您已准备好学习更多的关于您的浏览器在显示文档时如何将它们组合在一起。

diff --git a/files/zh-cn/web/guide/css/media_queries/index.html b/files/zh-cn/web/guide/css/media_queries/index.html deleted file mode 100644 index bfb15efa67..0000000000 --- a/files/zh-cn/web/guide/css/media_queries/index.html +++ /dev/null @@ -1,412 +0,0 @@ ---- -title: 使用媒体查询 -slug: Web/Guide/CSS/Media_queries -tags: - - CSS - - CSS媒体查询 - - Media - - Web - - 媒体 - - 媒体查询 - - 指南 -translation_of: Web/CSS/Media_Queries/Using_media_queries ---- -
{{cssref}}
- -

媒体查询（Media queries）非常实用，尤其是当你想要根据设备的大致类型（如打印设备与带屏幕的设备）或者特定的特征和设备参数（例如屏幕分辨率和浏览器{{glossary("viewport", "视窗")}}宽度）来修改网站或应用程序时。

- -

媒体查询常被用于以下目的：

- - - -
<link rel="stylesheet" src="styles.css" media="screen" />
-<link rel="stylesheet" src="styles.css" media="print" />
-
- - - -
-

注意：本页的例子使用CSS @media 的方式来说明目的，但是对于所有类型的媒体查询，基本语法均相同。

-
- -

语法

- -

每条媒体查询语句都由一个可选的媒体类型和任意数量的媒体特性表达式构成。可以使用多种逻辑操作符合并多条媒体查询语句。媒体查询语句不区分大小写。

- -

当媒体类型（如果指定）与在其上显示文档的设备匹配并且所有媒体功能表达式都计算为true时，媒体查询将计算为true。 涉及未知媒体类型的查询始终为false。

- -
-

注意： 即使媒体查询返回false，带有媒体查询附加到其{{HTMLElement("link")}}标记的样式表仍将下载。 但是，除非查询结果变为true，否则其内容将不适用。

-
- -

媒体类型

- -

媒体类型（Media types）描述设备的一般类别。除非使用 not 或 only 逻辑操作符，媒体类型是可选的，并且会（隐式地）应用 all 类型。

- -
-
all
-
适用于所有设备。
-
print
-
适用于在打印预览模式下在屏幕上查看的分页材料和文档。 （有关特定于这些格式的格式问题的信息，请参阅分页媒体。）
-
screen
-
主要用于屏幕。
-
speech
-
主要用于语音合成器。
-
- -
被废弃的媒体类型： CSS2.1 和  Media Queries 3 定义了一些额外的媒体类型(tty, tv, projection, handheld, braille, embossed, 以及 aural)，但是他们在Media Queries 4 中已经被废弃，并且不应该被使用。aural类型被替换为具有相似效果的speech。
- -

媒体特性

- -

媒体特性（Media features）描述了 {{glossary("user agent")}}、输出设备，或是浏览环境的具体特征。媒体特性表达式是完全可选的，它负责测试这些特性或特征是否存在、值为多少。每条媒体特性表达式都必须用括号括起来。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
名称简介备注
{{cssxref("@media/any-hover", "any-hover")}}是否有任何可用的输入机制允许用户（将鼠标等）悬停在元素上？在 Media Queries Level 4 中被添加。
{{cssxref("@media/any-pointer", "any-pointer")}}可用的输入机制中是否有任何指针设备，如果有，它的精度如何？在 Media Queries Level 4 中被添加。
{{cssxref("@media/aspect-ratio", "aspect-ratio")}}视窗（viewport）的宽高比
{{cssxref("@media/color", "color")}}输出设备每个像素的比特值，常见的有 8、16、32 位。如果设备不支持输出彩色，则该值为 0
{{cssxref("@media/color-gamut", "color-gamut")}}用户代理和输出设备大致程度上支持的色域在 Media Queries Level 4 中被添加。
{{cssxref("@media/color-index", "color-index")}}输出设备的颜色查询表（color lookup table）中的条目数量，如果设备不使用颜色查询表，则该值为 0
{{cssxref("@media/device-aspect-ratio", "device-aspect-ratio")}} {{obsolete_inline}}输出设备的宽高比已在 Media Queries Level 4 中被弃用。
{{cssxref("@media/device-height", "device-height")}} {{obsolete_inline}}输出设备渲染表面（如屏幕）的高度已在 Media Queries Level 4 中被弃用。
{{cssxref("@media/device-width", "device-width")}} {{obsolete_inline}}输出设备渲染表面（如屏幕）的宽度已在 Media Queries Level 4 中被弃用。
{{cssxref("@media/display-mode", "display-mode")}} -

应用程序的显示模式，如web app的manifest中的display 成员所指定

- 		在 Web App Manifest spec被定义.
{{cssxref("@media/forced-colors", "forced-colors")}}检测是user agent否限制调色板在 Media Queries Level 5 中被添加。
{{cssxref("@media/grid", "grid")}}输出设备使用网格屏幕还是点阵屏幕？
{{cssxref("@media/height", "height")}}视窗（viewport）的高度
{{cssxref("@media/hover", "hover")}} -

主要输入模式是否允许用户在元素上悬停

- 		在 Media Queries Level 4 中被添加。
{{cssxref("@media/inverted-colors", "inverted-colors")}}user agent或者底层操作系统是否反转了颜色在 Media Queries Level 5 中被添加。
{{cssxref("@media/light-level", "light-level")}}环境光亮度在 Media Queries Level 5 中被添加。
{{cssxref("@media/monochrome", "monochrome")}} -

输出设备单色帧缓冲区中每个像素的位深度。如果设备并非黑白屏幕，则该值为 0

-
{{cssxref("@media/orientation", "orientation")}}视窗（viewport）的旋转方向
{{cssxref("@media/overflow-block", "overflow-block")}} -

输出设备如何处理沿块轴溢出视窗(viewport)的内容

- 		在 Media Queries Level 4 中被添加。
{{cssxref("@media/overflow-inline", "overflow-inline")}} -

沿内联轴溢出视窗(viewport)的内容是否可以滚动？

- 		在 Media Queries Level 4 中被添加。
{{cssxref("@media/pointer", "pointer")}} -

主要输入机制是一个指针设备吗？如果是，它的精度如何？

- 		在 Media Queries Level 4 中被添加。
{{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}}探测用户倾向于选择亮色还是暗色的配色方案在 Media Queries Level 5 中被添加。
{{cssxref("@media/prefers-contrast", "prefers-contrast")}}探测用户是否有向系统要求提高或降低相近颜色之间的对比度在 Media Queries Level 5 中被添加。
{{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}}用户是否希望页面上出现更少的动态效果在 Media Queries Level 5 中被添加。
{{cssxref("@media/prefers-reduced-transparency", "prefers-reduced-transparency")}}用户是否倾向于选择更低的透明度在 Media Queries Level 5 中被添加。
{{cssxref("@media/resolution", "resolution")}}输出设备的像素密度（分辨率）
{{cssxref("@media/scan", "scan")}}输出设备的扫描过程（适用于电视等）
{{cssxref("@media/scripting", "scripting")}}探测脚本（例如 JavaScript）是否可用在 Media Queries Level 5 中被添加。
{{cssxref("@media/update-frequency", "update")}}输出设备更新内容的渲染结果的频率在 Media Queries Level 4 中被添加。
{{cssxref("@media/width", "width")}}视窗（viewport）的宽度，包括纵向滚动条的宽度
- -

逻辑操作符

- -

逻辑操作符（logical operators） not, and, 和 only 可用于联合构造复杂的媒体查询，您还可以通过用逗号分隔多个媒体查询，将它们组合为一个规则。

- -

and

- -

 and 操作符用于将多个媒体查询规则组合成单条媒体查询，当每个查询规则都为真时则该条媒体查询为真，它还用于将媒体功能与媒体类型结合在一起。

- -

not

- -

not运算符用于否定媒体查询，如果不满足这个条件则返回true，否则返回false。 如果出现在以逗号分隔的查询列表中，它将仅否定应用了该查询的特定查询。 如果使用not运算符，则还必须指定媒体类型。

- -
-

注意：在Level 3中，not关键字不能用于否定单个媒体功能表达式，而只能用于否定整个媒体查询。

-
- -

only

- -

only运算符仅在整个查询匹配时才用于应用样式，并且对于防止较早的浏览器应用所选样式很有用。 当不使用only时，旧版本的浏览器会将screen and (max-width: 500px)简单地解释为screen，忽略查询的其余部分，并将其样式应用于所有屏幕。 如果使用only运算符，则还必须指定媒体类型。

- -

, (逗号)

- -

逗号用于将多个媒体查询合并为一个规则。 逗号分隔列表中的每个查询都与其他查询分开处理。 因此，如果列表中的任何查询为true，则整个media语句均返回true。 换句话说，列表的行为类似于逻辑或or运算符。

- -

定位媒体类型

- -

媒体类型描述了给定设备的一般类别。 尽管通常在设计网站时会考虑屏幕，但您可能希望创建针对特殊设备（例如打印机或基于音频的屏幕阅读器）的样式。 例如，此CSS针对打印机：

- -
@media print { ... }
-
- -

您还可以定位多个设备。 例如，此@media规则使用两个媒体查询来同时定位屏幕和打印设备

- -
@media screen, print { ... }
-
- -

有关所有媒体类型的列表，请参见Media types。 由于它们仅以非常广泛的术语描述设备，因此只有少数几种可用。 要定位更具体的属性，请改用媒体功能。

- -

定位媒体特性

- -

媒体功能描述了给定的{{glossary("user agent")}}的输出设备或环境的特定特征。 例如，您可以将特定样式应用于宽屏显示器，使用鼠标的计算机，或应用于在弱光条件下使用的设备。 当用户的主要输入机制（例如鼠标）可以悬停在元素上时，如下为一个示例：

- -
@media (hover: hover) { ... }
-
- -

许多媒体功能都是范围功能，这意味着可以在它们前面加上“最小”或“最大”来表示“最小条件”或“最大条件”约束。 例如，仅当您的浏览器的{{glossary("viewport")}}宽度等于或小于12450px时，此CSS才会应用样式：

- -
@media (max-width: 12450px) { ... }
-
- -

如果您在未指定值的情况下创建媒体功能查询，则该样式将全部被应用，只要该查询的值不为零（或在Level 4中为none）即可。 例如，此CSS将适用于任何带有彩色屏幕的设备：

- -
@media (color) { ... }
-
- -

如果某个功能不适用于运行浏览器的设备，则涉及该媒体功能的表达式始终为false。 例如，将不会使用嵌套在以下查询中的样式，因为没有语音专用设备具有屏幕长宽比：

- -
@media speech and (aspect-ratio: 11/5) { ... }
-
- -

有关更多媒体功能media feature示例，请参阅每个特定功能的参考页。

- -

创建复杂查询

- -

有时您可能想创建一个取决于多个条件的媒体查询。 这就是逻辑运算符使用的场景：not，and，和 only。 此外，您可以将多个媒体查询合并到一个逗号分隔的列表中。 这使您可以在不同情况下应用相同的样式。

- -

在前面的示例中，我们已经看到and运算符用于将媒体类型与媒体功能分组。 and运算符还可以将多个媒体功能组合到单个媒体查询中。 同时，not运算符会否定媒体查询，从而基本上颠倒了它的正常含义。 唯一的运算符可防止较早的浏览器应用样式。

- -
-

注意： 在大多数情况下，默认情况下，如果未指定其他类型，则使用all媒体类型。 但是，如果使用not或only运算符，则必须显式指定媒体类型。

-
- -

结合多种类型和特性

- -

and关键字将媒体功能与媒体类型或其他媒体功能组合在一起。 此示例结合了两种媒体功能，以将样式限制为宽度至少为30 em的横向的设备：

- -
@media (min-width: 30em) and (orientation: landscape) { ... }
-
- -

要将样式限制为带有屏幕的设备，可以将媒体功能链接到screen媒体类型：

- -
@media screen and (min-width: 30em) and (orientation: landscape) { ... }
- -

测试多重查询

- -

当用户的设备与各种媒体类型，功能或状态中的任何一种匹配时，可以使用逗号分隔的列表来应用样式。 例如，如果用户设备的最小高度为680px或为纵向模式的屏幕设备，则以下规则将应用其样式：

- -
@media (min-height: 680px), screen and (orientation: portrait) { ... }
-
- -

以上面的示例为例，如果用户使用的打印机的页面高度为800像素，则media语句将返回true，因为将应用第一个查询。 同样，如果用户使用的是纵向模式的智能手机，并且视口高度为480px，则将应用第二个查询，并且media语句仍将返回true。

- -

反转查询的含义

- -

not关键字会反转整个媒体查询的含义。 它只会否定要应用的特定媒体查询。 （因此，它不会应用于以逗号分隔的媒体查询列表中的每个媒体查询。）not关键字不能用于否定单个功能查询，只能用于否定整个媒体查询。 看看以下not关键字的例子：

- -
@media not all and (monochrome) { ... }
-
- -

所以上述查询等价于：

- -
@media not (all and (monochrome)) { ... }
-
- -

而不是：

- -
@media (not all) and (monochrome) { ... }
- -

再看另一个例子，如下媒体查询：

- -
@media not screen and (color), print and (color) { ... }
-
- -

等价于：

- -
@media (not (screen and (color))), print and (color) { ... }
- -

提升老版本浏览器兼容性

- -

only关键字可防止不支持带有媒体功能的媒体查询的旧版浏览器应用给定的样式。 它对现代浏览器没有影响。

- -
@media only screen and (color) { ... }
-
- -

版本 4 中的语法改进

- -

媒体查询4级规范对语法进行了一些改进，以使用具有“范围”类型（例如宽度或高度，减少冗余）的功能进行媒体查询。 级别4添加了用于编写此类的查询范围上下文。 例如，使用最大宽度max- 功能，我们可以编写以下代码：

- -
-

Note: 媒体查询4级规范在现代浏览器中具有合理的支持，但某些媒体功能并未得到很好的支持。 有关更多详细信息，请参见 @media browser compatibility table。

-
- -
@media (max-width: 30em) { ... }
- -

在媒体查询4级规范可以这样写：

- -
@media (width <= 30em) { ... }
-
- -

使用min-和max-可以测试一个在两个值之间的宽度

- -
@media (min-width: 30em) and (max-width: 50em) { ... }
- -

用4级语法书写如下

- -
@media (30em <= width <= 50em ) { ... }
-
-
- -

媒体查询4级规范还添加了用and, not, 和 or实现的完整的布尔运算来合并媒体查询的方法。

- -

使用 not否定一个特性

- -

在媒体功能周围使用not()会否定查询中的该特性。 例如，如果设备没有悬停功能，则not(hover)将被匹配：

- -
@media (not(hover)) { ... }
- -

用 or测试多个特性

- -

您可以使用or测试多个功能之间的匹配，如果任何功能为true，则解析为true。 例如，以下查询测试具有单色显示或悬停功能的设备：

- -
@media (not (color)) or (hover) { ... }
- -

参见

- - diff --git a/files/zh-cn/web/guide/css/scaling_background_images/index.html b/files/zh-cn/web/guide/css/scaling_background_images/index.html deleted file mode 100644 index 611a58af85..0000000000 --- a/files/zh-cn/web/guide/css/scaling_background_images/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: 缩放背景图像 -slug: Web/Guide/CSS/Scaling_background_images -tags: - - Advanced - - CSS - - CSS Background - - Graphics - - Guide - - Web - - 背景图片 -translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images -translation_of_original: Web/CSS/CSS_Background_and_Borders/Scaling_background_images ---- -
{{cssref}}
- -

CSS 的  {{ cssxref("background-size") }} 属性能调整背景图片的大小，从而替代了用原始大小显示图片的默认行为。你可以随意的缩放背景图。

- -

拼一张大图

- -

来考虑一张大图，一个1233*1233像素的火狐图标。我们想将这张图的四个副本拼到一个300*300像素的正方形里（出于某种原因，很可能是某个非常糟糕的网站设计），最终的效果如下：

- -

screenshot1.png

- -

用下面的 CSS 可以实现这种效果：

- -
.square {
-  width: 300px;
-  height: 300px;
-  background-image: url(fxlogo.png);
-  border: solid 2px;
-  text-shadow: white 0px 0px 2px;
-  font-size: 16px;
-  background-size: 150px;
-} 
- -
没必要再用带前缀的 background-size 了，尽管你可能考虑到要兼容一些非常老的浏览器版本，而用带前缀的写法。
- -

拉伸图片

- -

你可以同时指定图片纵向和横向的大小，如下：

- -
background-size: 300px 150px;
-
- -

结果会是这样的：
- screenshot3.png

- -

放大图片

- -

另一方面，你可以在背景里放大一张图片。我们把 16*16px 的图标放大到 300*300px：

- -

screenshot2.png

- -
.square2 {
-  width: 300px;
-  height: 300px;
-  background-image: url(favicon.png);
-  background-size: 300px;
-  border: solid 2px;
-  text-shadow: white 0px 0px 2px;
-  font-size: 16px;
-}
-
- -

正如你所看到的，CSS 的写法实际上是基本相同的。

- -

特殊值:  "contain" 和 "cover"

- -

除了{{cssxref("<length>")}} 值外，{{ cssxref("background-size") }} 还提供了另外两个特殊的尺寸值：contain 和 cover。

- -

contain

- -

contain 值指定可以不用考虑容器的大小，把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。在支持背景图缩放的浏览器（比如Firefox 3.6+）中，改变这个窗口的大小，来看看下方这个例子。

- -
<div class="bgSizeContain">
-  <p>Try resizing this window.Right-click->This Frame->Open Frame in New Tab</p>
-</div>
- -
.bgSizeContain {
-  height: 200px;
-  background-image: url(https://developer.mozilla.org/files/2917/fxlogo.png);
-  background-size: contain;
-  border: 2px solid darkgray;
-  color: #000; text-shadow: 1px 1px 0 #fff;
-}
- -

{{ EmbedLiveSample("contain", "100%", "220") }}

- -

cover

- -

cover 属性指定背景图可以被调整到任意大小，以使背景图完全覆盖背景区域。

- -
<div class="bgSizeCover">
-  <p>Try resizing this window.Right-click->This Frame->Open Frame in New Tab</p>
-</div>
- -
.bgSizeCover {
-  height: 200px;
-  background-image: url('/files/2917/fxlogo.png');
-  background-size: cover;
-  border: 2px solid darkgray;
-  color: #000;
-  text-shadow: 1px 1px 0 #fff;
-}
- -

{{ EmbedLiveSample("cover", "100%", "220") }}

- -

另请参阅

- - diff --git a/files/zh-cn/web/guide/css/testing_media_queries/index.html b/files/zh-cn/web/guide/css/testing_media_queries/index.html deleted file mode 100644 index 0d33436410..0000000000 --- a/files/zh-cn/web/guide/css/testing_media_queries/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: 使用编程方法测试媒体查询 -slug: Web/Guide/CSS/Testing_media_queries -tags: - - CSS - - DOM - - Event - - Media Queries - - Web -translation_of: Web/CSS/Media_Queries/Testing_media_queries ---- -
{{cssref}}
- -

{{Glossary("DOM")}} 提供了通过编程方法来获得媒体查询结果的特性。这是通过 {{domxref("MediaQueryList")}} 接口和它的方法来实现的。创建了 MediaQueryList 对象之后，就可以通过它来检查查询结果，或者设置事件监听器，在查询结果发生变化时自动接收到通知。

- -

创建媒体查询列表

- -

在获取查询结果前，首先要创建查询列表，也就是 MediaQueryList 对象来存放媒体查询。为了实现这个目的，可以使用 {{domxref("window.matchMedia")}} 方法。

- -

举个例子，设置一个用来判断设备的旋转方向（横屏还是竖屏）的查询列表：

- -
var mediaQueryList = window.matchMedia("(orientation: portrait)");
-
- -

检查查询结果

- -

一旦创建了媒体查询列表，你就可以通过检查它的 matches 属性来获取相应的查询结果，上述属性会直接返回查询结果：

- -
if (mediaQueryList.matches) {
-  /* 设备的旋转方向为纵向 portrait */
-} else {
-  /* 设备的旋转方向不是纵向，也就是横向 landscape */
-}
-
- -

接收查询提醒

- -

如果你需要持续观察查询结果值的变化情况，那么，注册一个监听器比手动检查查询结果要高效很多。要注册监听器，只要在 {{domxref("MediaQueryList")}} 对象上使用 addListener() 方法，并使用一个回调函数作为其参数。这样，就通过实现 {{domxref("MediaQueryListListener")}} 接口指定了一个监听器。每当查询结果发生变化，比如从 true 变为 false 时，就会调用一遍传入的回调函数。

- -
// 创建查询列表
-const mediaQueryList = window.matchMedia("(orientation: portrait)");
-
-// 定义回调函数
-function handleOrientationChange(mql) {
-  // ...
-}
-
-// 先运行一次回调函数
-handleOrientationChange(mediaQueryList);
-
-// 为查询列表注册监听器，同时将回调函数传给监听器
-mediaQueryList.addListener(handleOrientationChange);
-
- -

上述代码创建了一个屏幕方向的测试查询列表 mediaQueryList，并且添加了事件监听器。需要注意的是，当我们添加监听后，我们其实直接调用了一次监听。这会让我们的监听器以目前设备的屏幕方向来初始化判定代码。换句话说，如果我们代码中设定设备处于竖屏模式，而实际上它在启动时处于横屏模式，那么我们在后面的判定就会出现矛盾。

- -

然后，我们就能在 handleOrientationChange() 方法中检查查询结果，比如，可以设置屏幕方向变化后的逻辑处理代码：

- -
function handleOrientationChange(evt) {
-  if (evt.matches) {
-    /* The viewport is currently in portrait orientation */
-  } else {
-    /* The viewport is currently in landscape orientation */
-  }
-}
-
- -

终止查询通知

- -

如果不再需要再接收媒体查询值变化的相关通知，那么，只要调用 MediaQueryList 的 removeListener() 方法，就可以方便地移除监听：

- -
mediaQueryList.removeListener(handleOrientationChange);
-
- -

浏览器兼容性

- -

MediaQueryList 接口

- - - -

{{Compat("api.MediaQueryList")}}

- -

另见

- - diff --git a/files/zh-cn/web/guide/css/understanding_z_index/adding_z-index/index.html b/files/zh-cn/web/guide/css/understanding_z_index/adding_z-index/index.html deleted file mode 100644 index acd3b034ce..0000000000 --- a/files/zh-cn/web/guide/css/understanding_z_index/adding_z-index/index.html +++ /dev/null @@ -1,158 +0,0 @@ ---- -title: Adding z-index -slug: Web/Guide/CSS/Understanding_z_index/Adding_z-index -translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index ---- -

« CSS «理解z-index

-

使用 {{ cssxref("z-index") }}

-

在第一个例子 Stacking without z-index中， 我们描述了默认的摆放顺序。 当你需要指定不同的排列顺序时， 只要给元素指定一个z-index的数值就可以了。 

-

 

-

该属性必须是整数(正负均可)， 它体现了元素在z轴的位置。 如果你对z轴体系不了解， 你也可以把它理解成“层叠”， 每个层都有一个顺序数， 顺序数大的层在上面， 小的在下面。 

-

注意！z-index只对指定了 positioned属性的元素有效。

- -
-

注释:

- -
-

在下一个例子中， 所有的层都是用z-index进行排序的。 元素div#5 的z-index无效， 因为他没有被指定position属性。 

-

Example of stacking rules modified using z-index

-

Example source code

-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html>
-<head><style type="text/css">
-
-div {
-   opacity: 0.7;
-   font: 12px Arial;
-}
-
-span.bold { font-weight: bold; }
-
-#normdiv {
-   z-index: 8;
-   height: 70px;
-   border: 1px dashed #999966;
-   background-color: #ffffcc;
-   margin: 0px 50px 0px 50px;
-   text-align: center;
-}
-
-#reldiv1 {
-   z-index: 3;
-   height: 100px;
-   position: relative;
-   top: 30px;
-   border: 1px dashed #669966;
-   background-color: #ccffcc;
-   margin: 0px 50px 0px 50px;
-   text-align: center;
-}
-
-#reldiv2 {
-   z-index: 2;
-   height: 100px;
-   position: relative;
-   top: 15px;
-   left: 20px;
-   border: 1px dashed #669966;
-   background-color: #ccffcc;
-   margin: 0px 50px 0px 50px;
-   text-align: center;
-}
-
-#absdiv1 {
-   z-index: 5;
-   position: absolute;
-   width: 150px;
-   height: 350px;
-   top: 10px;
-   left: 10px;
-   border: 1px dashed #990000;
-   background-color: #ffdddd;
-   text-align: center;
-}
-
-#absdiv2 {
-   z-index: 1;
-   position: absolute;
-   width: 150px;
-   height: 350px;
-   top: 10px;
-   right: 10px;
-   border: 1px dashed #990000;
-   background-color: #ffdddd;
-   text-align: center;
-}
-
-</style></head>
-
-<body>
-
-<br /><br />
-
-<div id="absdiv1">
-   <br /><span class="bold">DIV #1</span>
-   <br />position: absolute;
-   <br />z-index: 5;
-</div>
-
-<div id="reldiv1">
-   <br /><span class="bold">DIV #2</span>
-   <br />position: relative;
-   <br />z-index: 3;
-</div>
-
-<div id="reldiv2">
-   <br /><span class="bold">DIV #3</span>
-   <br />position: relative;
-   <br />z-index: 2;
-</div>
-
-<div id="absdiv2">
-   <br /><span class="bold">DIV #4</span>
-   <br />position: absolute;
-   <br />z-index: 1;
-</div>
-
-<div id="normdiv">
-   <br /><span class="bold">DIV #5</span>
-   <br />no positioning
-   <br />z-index: 8;
-</div>
-
-</body></html>
-
-

See also

- -
-

Original Document Information

- -
-

{{ languages( { "fr": "fr/CSS/Comprendre_z-index/Ajout_de_z-index" } ) }}

diff --git a/files/zh-cn/web/guide/css/understanding_z_index/index.html b/files/zh-cn/web/guide/css/understanding_z_index/index.html deleted file mode 100644 index 19f49650d1..0000000000 --- a/files/zh-cn/web/guide/css/understanding_z_index/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: 理解CSS的 z-index属性 -slug: Web/Guide/CSS/Understanding_z_index -tags: - - CSS - - Guide -translation_of: Web/CSS/CSS_Positioning/Understanding_z_index ---- -

{{cssref}}

- -

通常情况下，HTML页面可以被认为是二维的，因为文本，图像和其他元素被排列在页面上而不重叠。在这种情况下，只有一个渲染进程，所有元素都知道其他元素所占用的空间。 {{cssxref("z-index")}}属性可让你在渲染内容时调整对象分层的顺序。

- -
-

在 CSS 2.1 中, 所有的盒模型元素都处于三维坐标系中。 除了我们常用的横坐标和纵坐标， 盒模型元素还可以沿着“z 轴”层叠摆放， 当他们相互覆盖时， z 轴顺序就变得十分重要。

-
- -

(参见 CSS 2.1 Section 9.9.1 - Layered presentation)

- -

这意味着其实 CSS 允许你在现有的渲染引擎上层叠的摆放盒模型元素。 所有的层都可以用一个整数( z 轴顺序)来表明当前层在 z 轴的位置。 数字越大， 元素越接近观察者。Z 轴顺序用 CSS 的 {{ cssxref("z-index") }} 属性来指定。

- -

使用 z-index 很简单： 给它指定一个整数值即可。 然而，在层叠比较复杂的 HTML 元素上使用 z-index 时，结果可能让人觉得困惑，甚至不可思议。 这是由复杂的元素排布规则导致的。  更多细节请参见  CSS-2.1 Appendix E 。

- -

本文将通过一些简单的例子来解释这些规则。

- -
    -
  1. Stacking without z-index : 默认的摆放规则，即不含有 z-index 属性时
    2. -
  2. Stacking and float : 浮动元素的处理方式
    3. -
  3. Adding z-index : 使用 z-index 来改变堆放顺序
    4. -
  4. The stacking context : 内容堆放注意事项
    5. -
  5. Stacking context example 1 : 在两层元素的第二层上使用 z-index
    6. -
  6. Stacking context example 2 : 在两层元素的所有层上使用 z-index
    7. -
  7. Stacking context example 3 : 在三层元素的第二层上使用 z-index
    8. -
- -
-

 

- -

原始文档信息

- -

 

- - -
diff --git a/files/zh-cn/web/guide/css/understanding_z_index/stacking_and_float/index.html b/files/zh-cn/web/guide/css/understanding_z_index/stacking_and_float/index.html deleted file mode 100644 index 9312c1759d..0000000000 --- a/files/zh-cn/web/guide/css/understanding_z_index/stacking_and_float/index.html +++ /dev/null @@ -1,158 +0,0 @@ ---- -title: 层叠与浮动 -slug: Web/Guide/CSS/Understanding_z_index/Stacking_and_float -translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float ---- -

« CSS « 理解 CSS 中的 z-index

- -

层叠与浮动

- -

对于浮动的块元素来说，层叠顺序变得有些不同。浮动块元素被放置于非定位块元素与定位块元素之间：

- -
    -
  1. 根元素的背景与边框
    2. -
  2. 位于普通流中的后代块元素按照它们在 HTML 中出现的顺序层叠
    3. -
  3. 浮动块元素
    4. -
  4. 后代中的定位元素按照它们在 HTML 中出现的顺序层叠
    5. -
- -

实际上，在接下来的例子中你会看到，非定位块元素(DIV #4)的背景与边框丝毫不会受到浮动块元素的影响，但内容却恰恰相反。出现这种情况是由于 CSS 的标准浮动行为引起的。

- -

这种行为可以通过前一章列表的改进版本来解释：

- -
    -
  1. 根元素的背景与边框
    2. -
  2. 位于普通流中的后代块元素按照它们在 HTML 中出现的顺序层叠
    3. -
  3. 浮动块元素
    4. -
  4. 常规流中的后代行内元素
    5. -
  5. 后代中的定位元素按照它们在 HTML 中出现的顺序层叠
    6. -
- -
注意： 在下面的例子中，除了非定位的那个块元素外，所有的块元素都是半透明的，以便来显示层叠顺序。如果减少非定位元素(DIV #4)的透明度，会发生很诡异的事情：该元素的背景和边框会出现在浮动块元素上方，但是仍然处于定位元素的下方。我不能确定这是规范的 bug 或是怪异的解析。(设置透明度会隐式的创建一个层叠上下文。)
- -

{{ EmbedLiveSample('该示例的源码', '563', '255', '', 'Web/Guide/CSS/Understanding_z_index/Stacking_and_float') }}

- -

该示例的源码

- -
<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="UTF-8">
-    <title>Stacking and float</title>
-    <style type="text/css">
-
-    div {
-        font: 12px Arial;
-    }
-
-    span.bold { font-weight: bold; }
-
-    #absdiv1 {
-        position: absolute;
-        width: 150px;
-        height: 200px;
-        top: 10px;
-        right: 140px;
-        border: 1px dashed #990000;
-        background-color: #ffdddd;
-        text-align: center;
-    }
-
-    #normdiv {
-        /* opacity: 0.7; */
-        height: 100px;
-        border: 1px dashed #999966;
-        background-color: #ffffcc;
-        margin: 0px 10px 0px 10px;
-        text-align: left;
-    }
-
-    #flodiv1 {
-        margin: 0px 10px 0px 20px;
-        float: left;
-        width: 150px;
-        height: 200px;
-        border: 1px dashed #009900;
-        background-color: #ccffcc;
-        text-align: center;
-    }
-
-    #flodiv2 {
-        margin: 0px 20px 0px 10px;
-        float: right;
-        width: 150px;
-        height: 200px;
-        border: 1px dashed #009900;
-        background-color: #ccffcc;
-        text-align: center;
-    }
-
-    #absdiv2 {
-        position: absolute;
-        width: 150px;
-        height: 100px;
-        top: 130px;
-        left: 100px;
-        border: 1px dashed #990000;
-        background-color: #ffdddd;
-        text-align: center;
-    }
-
-</style>
-</head>
-
-<body>
-    <br /><br />
-
-    <div id="absdiv1">
-        <br /><span class="bold">DIV #1</span>
-        <br />position: absolute;
-    </div>
-
-    <div id="flodiv1">
-        <br /><span class="bold">DIV #2</span>
-        <br />float: left;
-    </div>
-
-    <div id="flodiv2">
-        <br /><span class="bold">DIV #3</span>
-        <br />float: right;
-    </div>
-
-    <br />
-
-    <div id="normdiv">
-        <br /><span class="bold">DIV #4</span>
-        <br />no positioning
-    </div>
-
-    <div id="absdiv2">
-        <br /><span class="bold">DIV #5</span>
-        <br />position: absolute;
-    </div>
-</body>
-</html>
-
- -

相关链接

- - - -
-

原始文档信息

- - -
- -

 

diff --git a/files/zh-cn/web/guide/css/understanding_z_index/stacking_context_example_1/index.html b/files/zh-cn/web/guide/css/understanding_z_index/stacking_context_example_1/index.html deleted file mode 100644 index 59f298d269..0000000000 --- a/files/zh-cn/web/guide/css/understanding_z_index/stacking_context_example_1/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: Stacking context example 1 -slug: Web/Guide/CSS/Understanding_z_index/Stacking_context_example_1 -tags: - - 理解_CSS_z-index -translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1 ---- -

« CSS « Understanding CSS z-index

- -

Stacking context 层叠上下文 例子 1

- -

先看一个基础的例子。在根元素的层叠上下文中，有两个都是相对定位且没有设置 z-index 属性的 DIV（DIV #1 和 DIV #3）。在 DIV #1 中有一个绝对定位的 DIV #2，而在 DIV #3 中有一个绝对定位的 DIV #4，DIV #2 和 DIV #4 也都没有设置 z-index 属性。

- -

现在唯一的层叠上下文就是根元素的上下文。因为没有 z-index 值，所有的元素按照出现（在 HTML 中）的顺序层叠。

- -

Stacking context example 1

- -

如果给 DIV #2 设置一个正的 z-index  值 (不能是 0 或 auto) ，那么 DIV #2 会渲染在其他所有 DIV 之上。

- -

Stacking context example 1

- -

然后如果给 DIV #4 也设置一个正的 z-index  值，且这个值比给的 DIV #2 设置的值要大，则 DIV #4  会渲染在其他所有 DIV（包括 DIV #2）之上。

- -

Stacking context example 1

- -

在这个列子中，DIV #2 和 DIV #4 不是兄弟关系（因为它们的父元素不同）。即便如此，我们也可以通过 z-index 来控制 DIV #4 和 DIV #2 的层叠关系。这是因为，DIV #1 和 DIV #3 没有设置 z-index 的值，所以它们不会创建层叠上下文。这就意味着 DIV #1 和 DIV #3 的所有内容（包括 DIV #2 和 DIV #4）都属于同一个层叠上下文（即根元素的层叠上下文）。

- -

就层叠上下文而言，DIV #1 和 DIV #3 隶属于根元素，因此层次结构如下所示：

- - - -
注意： DIV #1 和 DIV #3 不是透明的。记住所有设置了 opacity 小于 1 的定位元素都会隐式地生成一个层叠上下文（和给元素增加一个 z-index 值的效果相同）。上述的例子是为了说明，当父元素没有生成一个层叠上下文环境的时候，各元素是怎么层叠的。
- -

Example

- -

HTML

- -
<div id="div1">
-<br /><span class="bold">DIV #1</span>
-<br />position: relative;
-   <div id="div2">
-   <br /><span class="bold">DIV #2</span>
-   <br />position: absolute;
-   <br />z-index: 1;
-   </div>
-</div>
-
-<br />
-
-<div id="div3">
-<br /><span class="bold">DIV #3</span>
-<br />position: relative;
-   <div id="div4">
-   <br /><span class="bold">DIV #4</span>
-   <br />position: absolute;
-   <br />z-index: 2;
-   </div>
-</div>
-
-</body></html>
-
- -

CSS

- -
.bold {
-    font-weight: bold;
-    font: 12px Arial;
-}
-#div1,
-#div3 {
-    height: 80px;
-    position: relative;
-    border: 1px dashed #669966;
-    background-color: #ccffcc;
-    padding-left: 5px;
-}
-#div2 {
-    opacity: 0.8;
-    z-index: 1;
-    position: absolute;
-    width: 150px;
-    height: 200px;
-    top: 20px;
-    left: 170px;
-    border: 1px dashed #990000;
-    background-color: #ffdddd;
-    text-align: center;
-}
-#div4 {
-    opacity: 0.8;
-    z-index: 2;
-    position: absolute;
-    width: 200px;
-    height: 70px;
-    top: 65px;
-    left: 50px;
-    border: 1px dashed #000099;
-    background-color: #ddddff;
-    text-align: left;
-    padding-left: 10px;
-}
- -

Result

- -

{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1') }}

- -

See also

- - - -
-

Original Document Information

- - -
diff --git a/files/zh-cn/web/guide/css/understanding_z_index/stacking_context_example_2/index.html b/files/zh-cn/web/guide/css/understanding_z_index/stacking_context_example_2/index.html deleted file mode 100644 index 3c21bef062..0000000000 --- a/files/zh-cn/web/guide/css/understanding_z_index/stacking_context_example_2/index.html +++ /dev/null @@ -1,142 +0,0 @@ ---- -title: Stacking context example 2 -slug: Web/Guide/CSS/Understanding_z_index/Stacking_context_example_2 -tags: - - CSS - - 理解css的index属性 - - 高级 -translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2 ---- -

« CSS « 理解CSS z-index

- -

层叠上下文示例 2

- -

这是一个非常简单的例子, 但它是理解层叠上下文这个概念的关键。还是和之前的例子中一样的四个DIV，不过现在z-index属性被分配在两个水平的层次结构中。

- -

{{ EmbedLiveSample('Example_source_code', '352', '270', '', 'Web/Guide/CSS/Understanding_z_index/Stacking_context_example_2') }}

- -

可以看到现在DIV #2 (z-index: 2)在DIV #3 (z-index: 1)的上面，因为他们都属于同一个层叠上下文（根元素创建的层叠上下文），所以z-index的值决定了元素如何叠放。

- -

奇怪的是DIV #2 (z-index: 2)在DIV #4 (z-index: 10)的上面，尽管DIV #2的z-index值小于DIV #4。原因在于它们不属于同一个层叠上下文。DIV #4处于DIV #3所创建的层叠上下文中，而整个DIV #3（包含其后代元素）是在DIV #2下面的。

- -

为了更好的理解这种情况, 这里列出了层叠上下文的层次结构:

- - - -
Note: 值得记住的是，通常HTML的层次结构和层叠上下文的层次结构是不同的。在层叠上下文的层次结构中，没有创建层叠上下文的元素同其父级处于一个层叠上下文。
- -

示例源码

- -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html>
-<head><style type="text/css">
-
-div { font: 12px Arial; }
-
-span.bold { font-weight: bold; }
-
-#div2 { z-index: 2; }
-#div3 { z-index: 1; }
-#div4 { z-index: 10; }
-
-#div1,#div3 {
-   height: 80px;
-   position: relative;
-   border: 1px dashed #669966;
-   background-color: #ccffcc;
-   padding-left: 5px;
-}
-
-#div2 {
-   opacity: 0.8;
-   position: absolute;
-   width: 150px;
-   height: 200px;
-   top: 20px;
-   left: 170px;
-   border: 1px dashed #990000;
-   background-color: #ffdddd;
-   text-align: center;
-}
-
-#div4 {
-   opacity: 0.8;
-   position: absolute;
-   width: 200px;
-   height: 70px;
-   top: 65px;
-   left: 50px;
-   border: 1px dashed #000099;
-   background-color: #ddddff;
-   text-align: left;
-   padding-left: 10px;
-}
-
-
-</style></head>
-
-<body>
-
-    <br />
-
-    <div id="div1"><br />
-        <span class="bold">DIV #1</span><br />
-        position: relative;
-        <div id="div2"><br />
-            <span class="bold">DIV #2</span><br />
-            position: absolute;<br />
-            z-index: 2;
-        </div>
-    </div>
-
-    <br />
-
-    <div id="div3"><br />
-        <span class="bold">DIV #3</span><br />
-        position: relative;<br />
-        z-index: 1;
-        <div id="div4"><br />
-            <span class="bold">DIV #4</span><br />
-            position: absolute;<br />
-            z-index: 10;
-        </div>
-    </div>
-
-</body>
-</html>
-
- -

相关文章

- - - -
-

原文信息

- - -
- -

 

diff --git a/files/zh-cn/web/guide/css/understanding_z_index/stacking_context_example_3/index.html b/files/zh-cn/web/guide/css/understanding_z_index/stacking_context_example_3/index.html deleted file mode 100644 index f7d2972c7c..0000000000 --- a/files/zh-cn/web/guide/css/understanding_z_index/stacking_context_example_3/index.html +++ /dev/null @@ -1,190 +0,0 @@ ---- -title: Stacking context example 3 -slug: Web/Guide/CSS/Understanding_z_index/Stacking_context_example_3 -tags: - - CSS - - 层叠上下文 - - 理解css的z-index属性 -translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3 ---- -

« CSS « Understanding CSS z-index

- -

层叠上下文示例 3

- -

最后一个例子展示了，在多层级的HTML结构中混合了多个定位元素且使用类选择器设置z-index属性时出现的问题。

- -

我们来看一个用多个定位的div实现的三级菜单的例子，二级菜单和三级菜单在鼠标悬停或点击其父元素时才出现，通常这样的菜单在客户端和服务端都是由脚本生成的，所以样式规则不是通过ID选择器设置而是通过类选择器设置。

- -

如果这个三级菜单有部分区域重叠，管理层叠顺序就会成为一个问题。

- -

{{ EmbedLiveSample('Example_source_code', '320', '330', '', 'Web/Guide/CSS/Understanding_z_index/Stacking_context_example_3') }}

- - - -

一级菜单仅仅是相对定位，所以没有创建层叠上下文。

- -

二级菜单相对其父元素（一级菜单）绝对定位，要使二级菜单在所有一级菜单的上方，则需要使用z-index。此时每个二级菜单都创建了一个层叠上下文，而三级菜单也处于其父元素（二级菜单）创建的上下文中。

- -

这样一来，在HTML结构中处于三级菜单后面的二级菜单，则会显示在三级菜单的上方，因为所有的二级菜单都使用了同样的z-index值，所以处于同一个层叠上下文中。

- -

为了能更好地理解这种情况，这里列出了层叠上下文的层次结构:

- - - -

可以通过移除不同级别的菜单之间的重叠，或者使用ID选择器指定独立的（不同的）z-index值，或者减少HTML的层级来解决这个问题。

- -
Note: 在源码中你会看到三级菜单和二级菜单是由一个绝对定位元素包含很多div来实现的，这种方式在需要同时定位一组元素时很有用。
- -

示例源码

- -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html>
-<head><style type="text/css">
-
-div { font: 12px Arial; }
-
-span.bold { font-weight: bold; }
-
-div.lev1 {
-   width: 250px;
-   height: 70px;
-   position: relative;
-   border: 2px outset #669966;
-   background-color: #ccffcc;
-   padding-left: 5px;
-}
-
-#container1 {
-   z-index: 1;
-   position: absolute;
-   top: 30px;
-   left: 75px;
-}
-
-div.lev2 {
-   opacity: 0.9;
-   width: 200px;
-   height: 60px;
-   position: relative;
-   border: 2px outset #990000;
-   background-color: #ffdddd;
-   padding-left: 5px;
-}
-
-#container2 {
-   z-index: 1;
-   position: absolute;
-   top: 20px;
-   left: 110px;
-}
-
-div.lev3 {
-   z-index: 10;
-   width: 100px;
-   position: relative;
-   border: 2px outset #000099;
-   background-color: #ddddff;
-   padding-left: 5px;
-}
-
-</style></head>
-
-<body>
-
-<br />
-
-<div class="lev1">
-<span class="bold">LEVEL #1</span>
-
-   <div id="container1">
-
-      <div class="lev2">
-      <br /><span class="bold">LEVEL #2</span>
-      <br />z-index: 1;
-
-         <div id="container2">
-
-            <div class="lev3"><span class="bold">LEVEL #3</span></div>
-            <div class="lev3"><span class="bold">LEVEL #3</span></div>
-            <div class="lev3"><span class="bold">LEVEL #3</span></div>
-            <div class="lev3"><span class="bold">LEVEL #3</span></div>
-            <div class="lev3"><span class="bold">LEVEL #3</span></div>
-            <div class="lev3"><span class="bold">LEVEL #3</span></div>
-            <div class="lev3"><span class="bold">LEVEL #3</span></div>
-            <div class="lev3"><span class="bold">LEVEL #3</span></div>
-            <div class="lev3"><span class="bold">LEVEL #3</span></div>
-            <div class="lev3"><span class="bold">LEVEL #3</span></div>
-            <div class="lev3"><span class="bold">LEVEL #3</span></div>
-
-         </div>
-
-      </div>
-
-      <div class="lev2">
-      <br /><span class="bold">LEVEL #2</span>
-      <br />z-index: 1;
-      </div>
-
-   </div>
-</div>
-
-<div class="lev1">
-<span class="bold">LEVEL #1</span>
-</div>
-
-<div class="lev1">
-<span class="bold">LEVEL #1</span>
-</div>
-
-<div class="lev1">
-<span class="bold">LEVEL #1</span>
-</div>
-
-</body></html>
-
- -

相关文章

- - - -
-

原文信息

- - -
- -

Note: the reason the sample image looks wrong - with the second level 2 overlapping the level 3 menus - is because level 2 has opacity, which creates a new stacking context. Basically, this whole sample page is incorrect and misleading.

diff --git a/files/zh-cn/web/guide/css/understanding_z_index/stacking_without_z-index/index.html b/files/zh-cn/web/guide/css/understanding_z_index/stacking_without_z-index/index.html deleted file mode 100644 index a5aaebdc95..0000000000 --- a/files/zh-cn/web/guide/css/understanding_z_index/stacking_without_z-index/index.html +++ /dev/null @@ -1,161 +0,0 @@ ---- -title: Stacking without z-index -slug: Web/Guide/CSS/Understanding_z_index/Stacking_without_z-index -translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index ---- -

« CSS « 理解 CSS z-index

- -

不含z-index的堆叠

- -

当没有元素包含z-index属性时，元素按照如下顺序堆叠（从底到顶顺序）：

- -
    -
  1. 根元素的背景和边界
    2. -
  2. 普通流(无定位)里的块元素(没有position或者position:static;)按HTML中的出现顺序堆叠
    3. -
  3. 定位元素按HTML中的出现顺序堆叠
    4. -
- -

在接下来的例子中，相对和绝对定位的块元素的大小和位置刚好说明上述堆叠规则。

- -
-

Notes:

- - -
- -

understanding_zindex_01.png

- -

 

- -

示例

- -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html>
-<head><style type="text/css">
-
-div {
-   font: 12px Arial;
-}
-
-span.bold { font-weight: bold; }
-
-#normdiv {
-   height: 70px;
-   border: 1px dashed #999966;
-   background-color: #ffffcc;
-   margin: 0px 50px 0px 50px;
-   text-align: center;
-}
-
-#reldiv1 {
-   opacity: 0.7;
-   height: 100px;
-   position: relative;
-   top: 30px;
-   border: 1px dashed #669966;
-   background-color: #ccffcc;
-   margin: 0px 50px 0px 50px;
-   text-align: center;
-}
-
-#reldiv2 {
-   opacity: 0.7;
-   height: 100px;
-   position: relative;
-   top: 15px;
-   left: 20px;
-   border: 1px dashed #669966;
-   background-color: #ccffcc;
-   margin: 0px 50px 0px 50px;
-   text-align: center;
-}
-
-#absdiv1 {
-   opacity: 0.7;
-   position: absolute;
-   width: 150px;
-   height: 350px;
-   top: 10px;
-   left: 10px;
-   border: 1px dashed #990000;
-   background-color: #ffdddd;
-   text-align: center;
-}
-
-#absdiv2 {
-   opacity: 0.7;
-   position: absolute;
-   width: 150px;
-   height: 350px;
-   top: 10px;
-   right: 10px;
-   border: 1px dashed #990000;
-   background-color: #ffdddd;
-   text-align: center;
-}
-
-</style></head>
-
-<body>
-
-<br /><br />
-
-<div id="absdiv1">
-   <br /><span class="bold">DIV #1</span>
-   <br />position: absolute;
-</div>
-
-<div id="reldiv1">
-   <br /><span class="bold">DIV #2</span>
-   <br />position: relative;
-</div>
-
-<div id="reldiv2">
-   <br /><span class="bold">DIV #3</span>
-   <br />position: relative;
-</div>
-
-<div id="absdiv2">
-   <br /><span class="bold">DIV #4</span>
-   <br />position: absolute;
-</div>
-
-<div id="normdiv">
-   <br /><span class="bold">DIV #5</span>
-   <br />no positioning
-</div>
-
-</body></html>
-
-
- -

See also

- - - -

 

- -
-

Original Document Information

- - -
- -

{{ languages( { "fr": "fr/CSS/Comprendre_z-index/Empilement_sans_z-index" } ) }}

diff --git a/files/zh-cn/web/guide/css/understanding_z_index/the_stacking_context/index.html b/files/zh-cn/web/guide/css/understanding_z_index/the_stacking_context/index.html deleted file mode 100644 index 6d96e3e198..0000000000 --- a/files/zh-cn/web/guide/css/understanding_z_index/the_stacking_context/index.html +++ /dev/null @@ -1,240 +0,0 @@ ---- -title: 层叠上下文 -slug: Web/Guide/CSS/Understanding_z_index/The_stacking_context -tags: - - Advanced - - CSS - - CSS层叠上下文 - - z-index - - 教程 -translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context ---- -
{{cssref}}
- -

我们假定用户正面向（浏览器）视窗或网页，而 HTML 元素沿着其相对于用户的一条虚构的 z 轴排开，层叠上下文就是对这些 HTML 元素的一个三维构想。众 HTML 元素基于其元素属性按照优先级顺序占据这个空间。

- -

层叠上下文

- -

在本篇之前的部分——运用 z-index，（我们认识到）某些元素的渲染顺序是由其 z-index 的值影响的。这是因为这些元素具有能够使他们形成一个层叠上下文的特殊属性。

- -

文档中的层叠上下文由满足以下任意一个条件的元素形成：

- - - -

在层叠上下文中，子元素同样也按照上面解释的规则进行层叠。 重要的是，其子级层叠上下文的 z-index 值只在父级中才有意义。子级层叠上下文被自动视为父级层叠上下文的一个独立单元。

- -

总结:

- - - -
Note: 层叠上下文的层级是 HTML 元素层级的一个子级，因为只有某些元素才会创建层叠上下文。可以这样说，没有创建自己的层叠上下文的元素会被父层叠上下文同化。
- -

示例

- -

Example of stacking rules modified using z-index

- -

在这个例子中，每个被定位的元素都创建了独自的层叠上下文，因为他们被指定了定位属性和 z-index 值。我们把层叠上下文的层级列在下面：

- - - -

请一定要注意 DIV #4，DIV #5 和 DIV #6 是 DIV #3 的子元素，所以它们的层叠完全在 DIV #3 中被处理。一旦 DIV #3 中的层叠和渲染处理完成，DIV #3 元素就被作为一个整体传递与兄弟元素的 DIV 在 root（根）元素进行层叠。

- -
-

注意：

- - -
- -

示例源码

- -

HTML

- -
<div id="div1">
-  <h1>Division Element #1</h1>
-  <code>position: relative;<br/>
-  z-index: 5;</code>
-</div>
-
-<div id="div2">
-  <h1>Division Element #2</h1>
-  <code>position: relative;<br/>
-  z-index: 2;</code>
-</div>
-
-<div id="div3">
-  <div id="div4">
-    <h1>Division Element #4</h1>
-    <code>position: relative;<br/>
-    z-index: 6;</code>
-  </div>
-
-  <h1>Division Element #3</h1>
-  <code>position: absolute;<br/>
-  z-index: 4;</code>
-
-  <div id="div5">
-    <h1>Division Element #5</h1>
-    <code>position: relative;<br/>
-    z-index: 1;</code>
-  </div>
-
-  <div id="div6">
-    <h1>Division Element #6</h1>
-    <code>position: absolute;<br/>
-    z-index: 3;</code>
-  </div>
-</div>
- -

CSS

- -
* {
-    margin: 0;
-}
-html {
-    padding: 20px;
-    font: 12px/20px Arial, sans-serif;
-}
-div {
-    opacity: 0.7;
-    position: relative;
-}
-h1 {
-    font: inherit;
-    font-weight: bold;
-}
-#div1,
-#div2 {
-    border: 1px dashed #696;
-    padding: 10px;
-    background-color: #cfc;
-}
-#div1 {
-    z-index: 5;
-    margin-bottom: 190px;
-}
-#div2 {
-    z-index: 2;
-}
-#div3 {
-    z-index: 4;
-    opacity: 1;
-    position: absolute;
-    top: 40px;
-    left: 180px;
-    width: 330px;
-    border: 1px dashed #900;
-    background-color: #fdd;
-    padding: 40px 20px 20px;
-}
-#div4,
-#div5 {
-    border: 1px dashed #996;
-    background-color: #ffc;
-}
-#div4 {
-    z-index: 6;
-    margin-bottom: 15px;
-    padding: 25px 10px 5px;
-}
-#div5 {
-    z-index: 1;
-    margin-top: 15px;
-    padding: 5px 10px;
-}
-#div6 {
-    z-index: 3;
-    position: absolute;
-    top: 20px;
-    left: 180px;
-    width: 150px;
-    height: 125px;
-    border: 1px dashed #009;
-    padding-top: 125px;
-    background-color: #ddf;
-    text-align: center;
-}
- -

Result

- -

{{EmbedLiveSample('示例源码', '100%', '396') }}

- -

参考

- - - -
-

原始文档信息

- - -
diff --git a/files/zh-cn/web/guide/css/using_css_gradients/index.html b/files/zh-cn/web/guide/css/using_css_gradients/index.html deleted file mode 100644 index 21460cd820..0000000000 --- a/files/zh-cn/web/guide/css/using_css_gradients/index.html +++ /dev/null @@ -1,717 +0,0 @@ ---- -title: 使用 CSS 渐变 -slug: Web/Guide/CSS/Using_CSS_gradients -translation_of: Web/CSS/CSS_Images/Using_CSS_gradients ---- -
{{CSSRef}}
- -

CSS 渐变 {{cssxref("<image>")}} 类型的一种特殊类型 {{cssxref("<gradient>")}} 表示，由两种或多种颜色之间的渐进过渡组成。您可以选择三种类型的渐变：线性 (由 {{cssxref("linear-gradient")}} 函数创建)，径向(由 {{cssxref("radial-gradient")}} 函数创建) 和圆锥 (由 {{cssxref("conic-gradient")}} 函数创建)。您还可以使用 {{cssxref("repeating-linear-gradient")}} 和 {{cssxref("repeating-radial-gradient")}} 函数创建重复渐变。

- -

渐变可以在任何使用 <image> 的地方使用，例如在背景中。 由于渐变是动态生成的，因此它们可以消除对传统用于实现类似效果的栅格图像文件的需求。 此外，由于渐变是由浏览器生成的，因此在放大时它们看起来比栅格图像更好，并且可以动态调整大小。

- -

我们将从线性渐变开始介绍，然后以线性渐变为例介绍所有渐变类型支持的功能，然后继续介绍径向渐变，圆锥渐变和重复渐变。

- -

使用线性渐变

- -

线性渐变创建了一条沿直线前进的颜色带。

- -
-

基础线性渐变

- -

要创建最基本的渐变类型，您只需指定两种颜色即可。 这些被称为色标。 至少指定两个色标，也可以指定任意数量。

- - - -
.simple-linear {
-  background: linear-gradient(blue, pink);
-}
- -

{{ EmbedLiveSample('A_basic_linear_gradient', 120, 120) }}

-
- -
-

改变渐变方向

- -

默认情况下，线性渐变的方向是从上到下， 你可以指定一个值来改变渐变的方向。

- - - -
.horizontal-gradient {
-  background: linear-gradient(to right, blue, pink);
-}
-
- -

{{ EmbedLiveSample('Changing_the_direction', 120, 120) }}

-
- -
-

对角线渐变

- -

你甚至可以设置渐变方向为从一个对角到另一个对角。

- - - -
.diagonal-gradient {
-  background: linear-gradient(to bottom right, blue, pink);
-}
-
- -

{{ EmbedLiveSample('Diagonal_gradients', 200, 100) }}

-
- -
-

设置渐变角度

- -

如果你想要更精确地控制渐变的方向，你可以给渐变设置一个具体的角度。

- - - -
.angled-gradient {
-  background: linear-gradient(70deg, blue, pink);
-}
-
- -

{{ EmbedLiveSample('Using_angles', 120, 120) }}

- -

在使用角度的时候, 0deg 代表渐变方向为从下到上, 90deg 代表渐变方向为从左到右，诸如此类正角度都属于顺时针方向。 而负角度意味着逆时针方向。

- -

linear_redangles.png

-
- -

声明颜色和创建效果

- -

所有的CSS渐变类型都是一个位置依赖的颜色范围。CSS渐变产生的颜色可以随位置不断变化，从而产生平滑的颜色过渡。也可以创建纯色带和两种颜色之间的硬过渡。以下内容适用于所有渐变函数：

- -
-

使用多种颜色

- -

无需局限于使用两种颜色，你想使用多少种颜色都可以！ 默认情况下，所设置颜色会均匀分布在渐变路径中。

- - - -
.auto-spaced-linear-gradient {
-  background: linear-gradient(red, yellow, blue, orange);
-}
-
- -

{{ EmbedLiveSample('Using_more_than_two_colors', 120, 120) }}

-
- -
-

颜色终止位置

- -

你不需要让你设置的颜色在默认位置终止。 你可以通过给每个颜色设置0，1%或者2%或者其他的绝对数值来调整它们的位置。如果你将位置设置为百分数， 0% 表示起始点, 而100%表示终点，但是如果需要的话你也可以设置这个范围之外的其他值来达到你想要的效果。如果有些位置你没有明确设置，那么它将会被自动计算，第一种颜色会在0%处停止，而最后一种颜色是100%，至于其他颜色则是在它邻近的两种颜色的中间停止。 

- - - -
.multicolor-linear {
-   background: linear-gradient(to left, lime 28px, red 77%, cyan);
-}
-
- -

{{ EmbedLiveSample('Positioning_color_stops', 120, 120) }}

-
- -
-

创建实线

- -

要在两种颜色之间创建一条硬线，即创建一个条纹而不是逐渐过渡，可以将相邻的颜色停止设置为相同的位置。在此示例中，两种颜色在50%标记处共享一个颜色停止点，即渐变的一半：

- - - -
.striped {
-   background: linear-gradient(to bottom left, cyan 50%, palegoldenrod 50%);
-}
- -

{{ EmbedLiveSample('Creating_hard_lines', 120, 120) }}

-
- -
-

渐变提示

- -

默认情况下，渐变会平滑地从一种颜色过渡到另一种颜色。你可以通过设置一个值来将渐变的中心点移动到指定位置。 在如下示例中, 我们将渐变的中心点由50%设为10%。

- - - -
.color-hint {
-  background: linear-gradient(blue, 10%, pink);
-}
-.simple-linear {
-  background: linear-gradient(blue, pink);
-}
- -

{{ EmbedLiveSample('Gradient_hints', 120, 120) }}

-
- -
-

创建色带和条纹

- -

要在渐变中包含一个实心的非过渡颜色区域，请包含颜色起止点的两个位置。颜色起止点可以有两个位置，这相当于两个连续颜色在不同位置具有相同的颜色起止点。颜色将在第一个颜色起止点时达到完全饱和，保持该饱和度到第二个颜色起止点，并通过相邻颜色起止点的第一个位置过渡到相邻颜色起止点的颜色。

- - - -
.multiposition-stops {
-   background: linear-gradient(to left,
-       lime 20%, red 30%, red 45%, cyan 55%, cyan 70%, yellow 80% );
-   background: linear-gradient(to left,
-       lime 20%, red 30% 45%, cyan 55% 70%, yellow 80% );
-}
-.multiposition-stop2 {
-   background: linear-gradient(to left,
-      lime 25%, red 25%, red 50%, cyan 50%, cyan 75%, yellow 75% );
-   background: linear-gradient(to left,
-      lime 25%, red 25% 50%, cyan 50% 75%, yellow 75% );
-}
-
- -

{{ EmbedLiveSample('Creating_color_bands_stripes', 120, 120) }}

- -

In the first example above, the lime goes from the 0% mark, which is implied, to the 20% mark, transitions from lime to red over the next 10% of the width of the gradient, reach solid red at the 30% mark, and staying solid red up until 45% through the gradient, where it fades to cyan, being fully cyan for 15% of the gradient, and so on.

- -

In the second example, the second color stop for each color is at the same location as the first color stop for the adjacent color, creating a striped effect.

- -

In both examples, the gradient is written twice: the first is the CSS Images Level 3 method of repeating the color for each stop and the second example is the CSS Images Level 4 multiple color stop method of including two color-stop-lengths in a linear-color-stop declaration.

-
- -
-

Controlling the progression of a gradient

- -

By default, a gradient evenly progresses between the colors of two adjacent color stops, with the midpoint between those two color stops being the midpoint color value. You can control the interpolation, or progression, between two color stops by including a color hint location. In this example, the color reaches the midpoint between lime and cyan 20% of the way through the gradient rather than 50% of the way through. The second example does not contain the hint to hilight the difference the color hint can make:

- - - -
.colorhint-gradient {
-  background: linear-gradient(to top, black, 20%, cyan);
-}
-.regular-progression {
-  background: linear-gradient(to top, black, cyan);
-}
-
- -

{{ EmbedLiveSample('Controlling_the_progression_of_a_gradient', 120, 120) }}

-
- -

Overlaying gradients

- -

Gradients support transparency, so you can stack multiple backgrounds to achieve some pretty fancy effects. The backgrounds are stacked from top to bottom, with the first specified being on top.

- - - -
.layered-image {
-  background: linear-gradient(to right, transparent, mistyrose),
-      url("https://mdn.mozillademos.org/files/15525/critters.png");
-}
-
- -

{{ EmbedLiveSample('Overlaying_gradients', 300, 150) }}

- -

Stacked gradients

- -

You can even stack gradients with other gradients. As long as the top gradients aren't entirely opaque, the gradients below will still be visible.

- - - -
.stacked-linear {
-  background:
-      linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-      linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-      linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-}
-
- -

{{ EmbedLiveSample('Stacked_gradients', 200, 200) }}

- -

Using radial gradients

- -

Radial gradients are similar to linear gradients, except that they radiate out from a central point. You can dictate where that central point is. You can also make them circular or elliptical.

- -

A basic radial gradient

- -

As with linear gradients, all you need to create a radial gradient are two colors. By default, the center of the gradient is at the 50% 50% mark, and the gradient is elliptical matching the aspect ratio of it's box:

- - - -
.simple-radial {
-  background: radial-gradient(red, blue);
-}
-
- -

{{ EmbedLiveSample('A_basic_radial_gradient', 120, 120) }}

- -

Positioning radial color stops

- -

Again like linear gradients, you can position each radial color stop with a percentage or absolute length.

- - - -
.radial-gradient {
-  background: radial-gradient(red 10px, yellow 30%, #1e90ff 50%);
-}
-
- -

{{ EmbedLiveSample('Positioning_radial_color_stops', 120, 120) }}

- -

Positioning the center of the gradient

- -

You can position the center of the gradient with keyterms, percentage, or absolute lengths, length and percentage values repeating if only one is present, otherwise in the order of position from the left and position from the top.

- - - -
.radial-gradient {
-  background: radial-gradient(at 0% 30%, red 10px, yellow 30%, #1e90ff 50%);
-}
-
- -

{{ EmbedLiveSample('Positioning_the_center_of_the_gradient', 120, 120) }}

- -

Sizing radial gradients

- -

Unlike linear gradients, you can specify the size of radial gradients. Possible values include closest-corner, closest-side, farthest-corner, and farthest-side, with farthest-corner being the default.

- -

Example: closest-side for ellipses

- -

This example uses the closest-side size value, which means the size is set by the distance from the starting point (the center) to the closest side of the enclosing box.

- - - -
.radial-ellipse-side {
-  background: radial-gradient(ellipse closest-side,
-      red, yellow 10%, #1e90ff 50%, beige);
-}
-
- -

{{ EmbedLiveSample('Example_closest-side_for_ellipses', 240, 100) }}

- -

Example: farthest-corner for ellipses

- -

This example is similar to the previous one, except that its size is specified as farthest-corner, which sets the size of the gradient by the distance from the starting point to the farthest corner of the enclosing box from the starting point.

- - - -
.radial-ellipse-far {
-  background: radial-gradient(ellipse farthest-corner at 90% 90%,
-      red, yellow 10%, #1e90ff 50%, beige);
-}
-
- -

{{ EmbedLiveSample('Example_farthest-corner_for_ellipses', 240, 100) }}

- -

Example: closest-side for circles

- -

This example uses closest-side, which makes the circle's size to be the distance between the starting point (the center) and the closest side. The circle's radius is the distance between the center of the gradient and the closest edge, which due to the positioning of the 25% from the top and 25% from the bottom, is closest to the bottom, since the height in this case is narrower than the width.

- - - -
.radial-circle-close {
-  background: radial-gradient(circle closest-side at 25% 75%,
-      red, yellow 10%, #1e90ff 50%, beige);
-}
-
- -

{{ EmbedLiveSample('Example_closest-side_for_circles', 240, 120) }}

- -

Stacked radial gradients

- -

Just like linear gradients, you can also stack radial gradients. The first specified is on top, the last on the bottom.

- - - -
.stacked-radial {
-  background:
-      radial-gradient(circle at 50% 0,
-        rgba(255,0,0,.5),
-        rgba(255,0,0,0) 70.71%),
-      radial-gradient(circle at 6.7% 75%,
-        rgba(0,0,255,.5),
-        rgba(0,0,255,0) 70.71%),
-      radial-gradient(circle at 93.3% 75%,
-        rgba(0,255,0,.5),
-        rgba(0,255,0,0) 70.71%) beige;
-  border-radius: 50%;
-}
-
- -

{{ EmbedLiveSample('Stacked_radial_gradients', 200, 200) }}

- -

Using repeating gradients

- -

The {{cssxref("linear-gradient")}} and {{cssxref("radial-gradient")}} properties don't support automatically repeated color stops. However, the {{cssxref("repeating-linear-gradient")}} and {{cssxref("repeating-radial-gradient")}} properties are available to offer this functionality.

- -

The size of the gradient line that repeats is the length between the first color stop value and the last color stop length value. If the last color stop has just a color and no color stop length, the value defaults to 0, meaning the linear gradient will not repeat and the radial gradient will only repeat if the radius of the gradient is smaller than the length between the center of the gradient and the farthest corner.

- -
-

Repeating linear gradients

- -

This example uses {{cssxref("repeating-linear-gradient")}} to create a gradient that progresses repeatedly in a straight line. The colors get cycled over again as the gradient repeats. In this case the gradient line is 10px long.

- - - -
.repeating-linear {
-  background: repeating-linear-gradient(-45deg, red, red 5px, blue 5px, blue 10px);
-}
-
- -

{{ EmbedLiveSample('Repeating_linear_gradients', 120, 120) }}

-
- -
-

Multiple repeating linear gradients

- -

Similar to regular linear and radial gradients, you can include multiple gradients, one on top of the other. This only makes sense if the gradients are partially transparent allowing subsequent gradients to show through the transparent areas, or if you include different background-sizes, optionally with different background-position property values, for each gradient image. We are using transparency.

- -

In this case the gradient lines are 300px, 230px, and 300px long.

- - - -
.multi-repeating-linear {
-  background:
-      repeating-linear-gradient(190deg, rgba(255, 0, 0, 0.5) 40px,
-        rgba(255, 153, 0, 0.5) 80px, rgba(255, 255, 0, 0.5) 120px,
-        rgba(0, 255, 0, 0.5) 160px, rgba(0, 0, 255, 0.5) 200px,
-        rgba(75, 0, 130, 0.5) 240px, rgba(238, 130, 238, 0.5) 280px,
-        rgba(255, 0, 0, 0.5) 300px),
-      repeating-linear-gradient(-190deg, rgba(255, 0, 0, 0.5) 30px,
-        rgba(255, 153, 0, 0.5) 60px, rgba(255, 255, 0, 0.5) 90px,
-        rgba(0, 255, 0, 0.5) 120px, rgba(0, 0, 255, 0.5) 150px,
-        rgba(75, 0, 130, 0.5) 180px, rgba(238, 130, 238, 0.5) 210px,
-        rgba(255, 0, 0, 0.5) 230px),
-      repeating-linear-gradient(23deg, red 50px, orange 100px,
-        yellow 150px, green 200px, blue 250px,
-        indigo 300px, violet 350px, red 370px);
-}
-
- -

{{ EmbedLiveSample('Multiple_repeating_linear_gradients', 600, 400) }}

-
- -

Plaid gradient

- -

To create plaid we include several overlapping gradients with transparency. In the first background declaration we listed every color stop separately. The second background property declaration using the multiple position color stop syntax:

- - - -
.plaid-gradient {
-  background:
-      repeating-linear-gradient(90deg, transparent, transparent 50px,
-        rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
-        transparent 56px, transparent 63px,
-        rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px,
-        transparent 69px, transparent 116px,
-        rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
-      repeating-linear-gradient(0deg, transparent, transparent 50px,
-        rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
-        transparent 56px, transparent 63px,
-        rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px,
-        transparent 69px, transparent 116px,
-        rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
-      repeating-linear-gradient(-45deg, transparent, transparent 5px,
-        rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px),
-      repeating-linear-gradient(45deg, transparent, transparent 5px,
-        rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px);
-
-  background:
-      repeating-linear-gradient(90deg, transparent 0 50px,
-        rgba(255, 127, 0, 0.25) 50px 56px,
-        transparent 56px 63px,
-        rgba(255, 127, 0, 0.25) 63px 69px,
-        transparent 69px 116px,
-        rgba(255, 206, 0, 0.25) 116px 166px),
-      repeating-linear-gradient(0deg, transparent 0 50px,
-        rgba(255, 127, 0, 0.25) 50px 56px,
-        transparent 56px 63px,
-        rgba(255, 127, 0, 0.25) 63px 69px,
-        transparent 69px 116px,
-        rgba(255, 206, 0, 0.25) 116px 166px),
-      repeating-linear-gradient(-45deg, transparent 0 5px,
-        rgba(143, 77, 63, 0.25) 5px 10px),
-      repeating-linear-gradient(45deg, transparent 0 5px,
-        rgba(143, 77, 63, 0.25) 5px 10px);
-}
-
- -

{{ EmbedLiveSample('Plaid_gradient', 200, 200) }}

- -

Repeating radial gradients

- -

This example uses {{cssxref("repeating-radial-gradient")}} to create a gradient that radiates repeatedly from a central point. The colors get cycled over and over as the gradient repeats.

- - - -
.repeating-radial {
-  background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
-}
-
- -

{{ EmbedLiveSample('Repeating_radial_gradients', 120, 120) }}

- -

Multiple repeating radial gradients

- - - -
.multi-target {
-  background:
-      repeating-radial-gradient(ellipse at 80% 50%,rgba(0,0,0,0.5),
-        rgba(0,0,0,0.5) 15px, rgba(255,255,255,0.5) 15px,
-        rgba(255,255,255,0.5) 30px) top left no-repeat,
-      repeating-radial-gradient(ellipse at 20% 50%,rgba(0,0,0,0.5),
-        rgba(0,0,0,0.5) 10px, rgba(255,255,255,0.5) 10px,
-        rgba(255,255,255,0.5) 20px) top left no-repeat yellow;
-  background-size: 200px 200px, 150px 150px;
-}
-
- -

{{ EmbedLiveSample('Multiple_repeating_radial_gradients', 250, 150) }}

- -

Plaid gradient

- -

To create plaid we include several overlapping gradients with transparency. In the first background declaration we listed every color stop separately. The second background property declaration using the multiple position color stop syntax:

- -
<div class="plaid-gradient"></div>
- -
div {
-  width: 200px;
-  height: 200px;
-}
- -
.plaid-gradient {
-  background:
-      repeating-linear-gradient(90deg, transparent, transparent 50px,
-        rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
-        transparent 56px, transparent 63px,
-        rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px,
-        transparent 69px, transparent 116px,
-        rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
-      repeating-linear-gradient(0deg, transparent, transparent 50px,
-        rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
-        transparent 56px, transparent 63px,
-        rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px,
-        transparent 69px, transparent 116px,
-        rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
-      repeating-linear-gradient(-45deg, transparent, transparent 5px,
-        rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px),
-      repeating-linear-gradient(45deg, transparent, transparent 5px,
-        rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px);
-
-  background:
-      repeating-linear-gradient(90deg, transparent 0 50px,
-        rgba(255, 127, 0, 0.25) 50px 56px,
-        transparent 56px 63px,
-        rgba(255, 127, 0, 0.25) 63px 69px,
-        transparent 69px 116px,
-        rgba(255, 206, 0, 0.25) 116px 166px),
-      repeating-linear-gradient(0deg, transparent 0 50px,
-        rgba(255, 127, 0, 0.25) 50px 56px,
-        transparent 56px 63px,
-        rgba(255, 127, 0, 0.25) 63px 69px,
-        transparent 69px 116px,
-        rgba(255, 206, 0, 0.25) 116px 166px),
-      repeating-linear-gradient(-45deg, transparent 0 5px,
-        rgba(143, 77, 63, 0.25) 5px 10px),
-      repeating-linear-gradient(45deg, transparent 0 5px,
-        rgba(143, 77, 63, 0.25) 5px 10px);
-}
-
- -

{{ EmbedLiveSample('Plaid_gradient', 200, 200) }}

- -

See also

- - diff --git a/files/zh-cn/web/guide/css/using_multi-column_layouts/index.html b/files/zh-cn/web/guide/css/using_multi-column_layouts/index.html deleted file mode 100644 index 593e14fd47..0000000000 --- a/files/zh-cn/web/guide/css/using_multi-column_layouts/index.html +++ /dev/null @@ -1,130 +0,0 @@ ---- -title: 使用CSS的多列布局 -slug: Web/Guide/CSS/Using_multi-column_layouts -translation_of: Web/CSS/CSS_Columns/Using_multi-column_layouts ---- -

{{CSSRef("CSS Multi-columns")}}

- -

CSS多列布局 扩展块布局模式，以便更容易地定义多列文本。如果一行太长，人们阅读文本很麻烦; 如果眼睛从一行的终点移动到下一个行的开始需要太长时间，它们就会丢失它们所在的行。因此，为了最大限度地利用大屏幕，作者应该将宽度不等的文本列并排放置，就像报纸一样。

- -

糟糕的是如果不使用CSS和HTML在特定的位置强制换行，或者严格限制文本中允许的标记，或者夸张地使用脚本的话，这是不可能实现的。该限制通过从传统的块级布局模块中延伸出来的新的CSS属性得以解决。

- -

使用多列布局

- -

列计数器和宽度

- -

有两个CSS属性控制是否实现多列布局和显示多少列： {{ Cssxref("column-count") }} and {{ Cssxref("column-width") }}。

- -

属性 column-count 设置特定数量的列数。例如，

- -
<div style="column-count:2;">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
-sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
-nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
-qui officia deserunt mollit anim id est laborum</div>
-
- -

会以两列的方式显示内容：(如果你正使用支持多列布局的浏览器的话):

- -

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

- -

属性 column-width 设置期望的最小列宽。如果 column-count 没有设置，那么浏览器就会以合适的宽度尽量显示更多的列。

- -
<div style="column-width:20em;">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
-sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
-nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
-qui officia deserunt mollit anim id est laborum</div>
-
- -

变成：

- -

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

- -

详细细节在 CSS3规范 中。

- -

在多列块中，内容会自动从一列换到另一列中。所有 HTML， CSS 和 DOM 功能在列之间都得到支持, 比如编辑和打印。

- -

columns 属性简写

- -

多数时候，网页设计者都会使用 {{ cssxref("column-count") }} 和 {{ cssxref("column-width") }} 的一个. 由于它们的值没有重叠，一般使用简写属性 {{ cssxref("columns") }}。例如，

- -

CSS声明 column-width:12em 可替换成：

- -
<div style="columns:12em">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
-sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
-nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
-qui officia deserunt mollit anim id est laborum</div>
-
- -

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

- -

CSS声明 column-count:4 可替换成：

- -
<div style="columns:4">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
-sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
-nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
-qui officia deserunt mollit anim id est laborum</div>
-
- -

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

- -

CSS声明 column-width:8em 和 column-count:12 可替换成：

- -
<div style="columns:12 8em">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
-sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
-nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
-qui officia deserunt mollit anim id est laborum</div>
-
- -

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

- -

高度平衡

- -

CSS3多列规范需要列高平衡：即，浏览器自动设置最大列高，因此每列中的内容高度大致相同。Firefox浏览器是这样的。

- -

然而，一些情况下，明确设置最大列高也是有用的，这样内容从第一列开始，尽可能多的生成列，甚至会溢出右边沿。因此，如果通过设置{{ cssxref("height") }} 或 {{ cssxref("max-height") }} 属性来限制列高，在生成新的一列之前每一列都会仅允许增加到这个高度。该模型对布局来说也更高效。

- -

列间隙

- -

列之间有缝隙。建议值为1em。该值可通过设置多列模块的 {{ Cssxref("column-gap") }} 属性来修改：

- -
<div style="column-width:20em; column-gap:2em;">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
-sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
-nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
-qui officia deserunt mollit anim id est laborum</div>
-
- -

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

- -

优雅降级

- -

多列属性会被不支持多列模型的浏览器忽略。因此，为这些浏览器创建单列结构而为支持多列的浏览器创建多列结构相对来说比较简单。

- -

注意不是所有的浏览器都支持不带前缀的属性名。为了在大多数现代浏览器中应用这种特性，每个属性必须写三次： 一次用 {{ property_prefix("-moz") }} 前缀，一次用 {{ property_prefix("-webkit") }} 前缀，一次不使用前缀

- -

讨论

- -

CSS3 多列特性能帮助网页设计者最优化使用屏幕资源。如果你是一位具有丰富想象力的开发者，你会发现多列特性更多的好处，特别是在高度平衡特性方面。

- -

其它

- - - -
 
- -
 
- -
 
diff --git a/files/zh-cn/web/guide/css/using_the__colon_target_selector/index.html b/files/zh-cn/web/guide/css/using_the__colon_target_selector/index.html deleted file mode 100644 index 65883df437..0000000000 --- a/files/zh-cn/web/guide/css/using_the__colon_target_selector/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: '在选择器中使用 :target 伪类' -slug: 'Web/Guide/CSS/Using_the_:target_selector' -tags: - - CSS - - CSS_3 - - Selectors -translation_of: 'Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors' ---- -

{{CSSRef}}

- -

为了辅助标识那些指向文档特定部分链接的目标, CSS3 选择器 引入了 {{ Cssxref(":target") }} 伪类. Netscape 7.1 已经在 Netscape 系列中加入了这个伪类的支持, 这一新的举措让页面作者能够辅助用户在较大的页面中定位。 

- -

选择一个目标

- -

{{ Cssxref(":target") }} 伪类用来指定那些包含片段标识符的 URI 的目标元素样式。 例如, http://developer.mozilla.org/en/docs/Using_the_:target_selector#Example 这个 URI 包含了 #Example 片段标识符。 在HTML中, 标识符是元素的id或者name属性,。由于这两者位于相同的命名空间， 因此， 这个示例 URI 指向的是文档顶层的 "Example" 。

- -

假设你想修改 URI 指向的任何 h2 元素，但是又不想把样式应用到任何其它同类型的元素，那么以下示例足够简单有用：

- -
h2:target {font-weight: bold;}
- -

同样的，将样式应用于特定的文档片段也是可行的。这是通过使用 URI 中相同的标识符实现的。例如，要在 #Example 文档片段中加入边框，我们可以通过如下代码实现： 

- -
#Example:target {border: 1px solid black;}
- -

定位所有元素

- -

如果想要创建应用于所有目标元素的样式，那么可以使用通用选择器：

- -
:target {color: red;}
-
- -

示例

- -

在以下示例中， 5个链接指向了同一文档中的元素。例如，选择 "First" 链接会导致 <h1 id="one"> 成为目标元素。 注意，由于目标元素有可能会被放置到浏览器窗口的顶层，因此文档可能会跳到新的滚动位置。

- -
-
<h4 id="one">...</h4> <p id="two">...</p>
-<div id="three">...</div> <a id="four">...</a> <em id="five">...</em>
-
-<a href="#one">First</a>
-<a href="#two">Second</a>
-<a href="#three">Third</a>
-<a href="#four">Fourth</a>
-<a href="#five">Fifth</a>
-
- -

结论

- -

在片段标识符指向部分文档的情况下，读者可能会对到底应该阅读文档的哪一部分感到疑惑。通过对不同的目标元素的样式进行修饰, 读者的相关疑惑会减少或者消除。

- - - - - -
-

Original Document Information

- - -
diff --git a/files/zh-cn/web/guide/css/visual_formatting_model/index.html b/files/zh-cn/web/guide/css/visual_formatting_model/index.html deleted file mode 100644 index 640f3abbc9..0000000000 --- a/files/zh-cn/web/guide/css/visual_formatting_model/index.html +++ /dev/null @@ -1,282 +0,0 @@ ---- -title: 视觉格式化模型 -slug: Web/Guide/CSS/Visual_formatting_model -tags: - - CSS - - CSS盒模型 - - 参考 -translation_of: Web/CSS/Visual_formatting_model ---- -

{{CSSRef}}

- -

CSS 视觉格式化模型（visual formatting model）是用来处理和在视觉媒体上显示文档时使用的计算规则。该模型是 CSS 的基础概念之一。

- - - -

视觉格式化模型会根据CSS盒子模型将文档中的元素转换为一个个盒子，每个盒子的布局由以下因素决定：

- - - -

该模型会根据盒子的包含块（containing block）的边界来渲染盒子。通常，盒子会创建一个包含其后代元素的包含块，但是盒子并不由包含块所限制，当盒子的布局跑到包含块的外面时称为溢出（overflow）。

- -
-

译注：本文有很多相近的术语，阅读时需仔细，否则容易造成误解。为了方便读者，这里我将其整理一下。

- -

 

- - - -

注意：盒子分为“块盒子”和“块级盒子”两种，但元素只有“块级元素”，而没有“块元素”。下面的“行内级元素”也是一样。

- - - -

另外，本文的英文原文仍未最后定稿，因此部分内容并不完整。待英文原文更新后应及时更新译文。

-
- -

盒子的生成

- -

盒子的生成是 CSS 视觉格式化模型的一部分，用于从文档元素生成盒子。盒子有不同的类型，不同类型的盒子的格式化方法也有所不同。盒子的类型取决于 CSS {{ cssxref("display") }} 属性。

- -

块级元素与块盒子

- -

当元素的 {{ cssxref("display") }} 为 block、list-item 或 table 时，该元素将成为块级元素。一个块级元素会被格式化成一个块（例如文章的一个段落），默认按照垂直方向依次排列。

- -

每个块级盒子都会参与块格式化上下文（block formatting context）的创建，而每个块级元素都会至少生成一个块级盒子，即主块级盒子（principal block-level box）。有一些元素，比如列表项会生成额外的盒子来放置项目符号，而那些会生成列表项的元素可能会生成更多的盒子。不过，多数元素只生成一个主块级盒子。 

- -

主块级盒子包含由后代元素生成的盒子以及内容，同时它也会参与定位方案。

- -

venn_blocks.png一个块级盒子可能也是一个块容器盒子。块容器盒子（block container box）要么只包含其它块级盒子，要么只包含行内盒子并同时创建一个行内格式化上下文（inline formatting context）。

- -

能够注意到块级盒子与块容器盒子是不同的这一点很重要。前者描述了元素与其父元素和兄弟元素之间的行为，而后者描述了元素跟其后代之间的行为。有些块级盒子并不是块容器盒子，比如表格；而有些块容器盒子也不是块级盒子，比如非替换行内块和非替换表格单元格。

- -

一个同时是块容器盒子的块级盒子称为块盒子（block box）。

- -

匿名块盒子

- -

在某些情况下进行视觉格式化时，需要添加一些增补性的盒子，这些盒子不能用CSS选择符选中，因此称为匿名盒子（anonymous boxes）。

- -

CSS选择器不能作用于匿名盒子(anonymous boxes)，所以它不能被样式表赋予样式。也就是说，此时所有可继承的 CSS 属性值都为 inherit ，而所有不可继承的 CSS 属性值都为 initial。

- -

块包含盒子可能只包含行内级盒子，也可能只包含块级盒子，但通常的文档都会同时包含两者，在这种情况下，就会在相邻的行内级盒子外创建匿名块盒子。

- -

示例

- -

考虑下面的HTML代码，假设 {{ HTMLElement("div") }} 和 {{ HTMLElement("p") }} 都保持默认的样式（即它们的 display 为 block）：

- -
<div>Some inline text <p>followed by a paragraph</p> followed by more inline text.</div>
-
- -

此时会产生两个匿名块盒子：一个是 <p> 元素前面的那些文本（Some inline text），另一个是 <p> 元素后面的文本（followed by more inline text.）。此时会生成下面的块结构：

- -

- -

显示为：

- -
Some inline text
-followed by a paragraph
-followed by more inline text.
-
- -

对这两个匿名盒子来说，程序员无法像 {{ HTMLElement("p") }} 元素那样控制它们的样式，因此它们会从 {{ HTMLElement("div") }} 那里继承那些可继承的属性，如 {{ cssxref("color") }}。其他不可继承的属性则会设置为 initial，比如，因为没有为它们指定 {{ cssxref("background-color") }}，因此其具有默认的透明背景，而 <p> 元素的盒子则能够用CSS指定背景颜色。类似地，两个匿名盒子的文本颜色总是一样的。

- -

另一种会创建匿名块盒子的情况是一个行内盒子中包含一或多个块盒子。此时，包含块盒子的盒子会拆分为两个行内盒子，分别位于块盒子的前面和后面。块盒子前面的所有行内盒子会被一个匿名块盒子包裹，块盒子后面的行内盒子也是一样。因此，块盒子将成为这两个匿名块盒子的兄弟盒子。

- -

如果有多个块盒子，而它们中间又没有行内元素，则会在这些盒子的前面和后面创建两个匿名块盒子。

- -

示例

- -

考虑下面的HTML代码，假设 {{ HTMLElement("p") }} 的 display 为 inline，{{ HTMLElement("span") }} 的 display 为 block：

- -
<p>Some <em>inline</em> text <span>followed by a paragraph</span> followed by more inline text.</p>
-
- -

此时会产生两个匿名块盒子：一个是 <span> 元素前面的文本（Some inline text），另一个是其之后的文本（followed by more inline text.）。此时会生成下面的块结构：

- -

- -

显示为：

- -
Some inline text
-followed by a paragraph
-followed by more inline text.
-
- -

行内级元素和行内盒子

- -

如果一个元素的 {{ cssxref("display") }} 属性为 inline、inline-block 或 inline-table，则称该元素为行内级元素。显示时，它不会生成内容块，但是可以与其他行内级内容一起显示为多行。一个典型的例子是包含多种格式内容（如强调文本、图片等）的段落，就可以由行内级元素组成。

- -

- -
-

该图使用了过时的术语，见下面的“注意”（译注：指图中的 “Atomic inline boxes”）。除此之外该图还有一个错误，右边的黄色部分应该完全包含左侧的椭圆（类似于数学上的超集），因为标准所说的是“如果行内级元素生成的盒子参与行内格式化上下文的创建，则该盒子为一个行内级盒子”，见“CSS 2.2标准的9.2.2节”。

-
- -

行内级元素会生成行内级盒子，该盒子同时会参与行内格式化上下文（inline formatting context）的创建。行内盒子既是行内级盒子，也是一个其内容会参与创建其容器的行内格式化上下文的盒子，比如所有具有 display:inline 样式的非替换盒子。如果一个行内级盒子的内容不参与行内格式化上下文的创建，则称其为原子行内级盒子。而通过替换行内级元素或 display 值为 inline-block 或 inline-table 的元素创建的盒子不会像行内盒子一样可以被拆分为多个盒子。

- -
-

注意：开始的时候，原子行内级盒子叫做原子行内盒子，这并不准确，因为它们并不是行内盒子。后来在一次勘误时修正了这一问题。不过，当你见到某些文章中使用了“原子行内盒子”的时候，你尽可以将其理解为“原子行内级盒子”，因为这仅仅是一个名字的修改。

-
- -
-

在同一个行内格式化上下文中，原子行内级盒子不能拆分成多行：

- -
<style>
-  span {
-    display:inline; /* default value*/
-  }
-</style>
-<div style="width:20em;">
-   The text in the span <span>can be split in several
-   lines as it</span> is an inline box.
-</div>
-
- -

可能会显示为：

- -

The text in the span can be split into several
- lines as it is an inline box.

- -

而：

- -
<style>
-  span {
-    display:inline-block;
-  }
-</style>
-<div style="width:20em;">
-   The text in the span <span>cannot be split in several
-   lines as it</span> is an inline-block box.
-</div>
-
- -

则可能显示为：

- -

The text in the span 
- cannot be split into several lines as it is an
- inline-block box.

- -

其中的“cannot be split into several lines as it”永远不会换行。

-
- -

匿名行内盒子

- -
类似于块盒子，CSS引擎有时候也会自动创建一些行内盒子。这些行内盒子无法被选择符选中，因此是匿名的，它们从父元素那里继承那些可继承的属性，其他属性保持默认值 initial。
- -
 
- -
一种常见的情况是CSS引擎会自动为直接包含在块盒子中的文本创建一个行内格式化上下文，在这种情况下，这些文本会被一个足够大的匿名行内盒子所包含。但是如果仅包含空格则有可能不会生成匿名行内盒子，因为空格有可能会由于 {{ cssxref("white-space") }} 的设置而被移除，从而导致最终的实际内容为空。
- -
 
- -
示例 TBD
- -

其他类型的盒子

- -

行盒子

- -

行盒子由行内格式化上下文创建，用来显示一行文本。在块盒子内部，行盒子总是从块盒子的一边延伸到另一边（译注：即占据整个块盒子的宽度）。当有浮动元素时，行盒子会从向左浮动的元素的右边缘延伸到向右浮动的元素的左边缘。

- -
行盒子更多是以技术性目的而存在的，Web开发者通常不需要关心。
- -

Run-in 盒子

- -
Run-in 盒子通过 display:run-in 来定义，它可以是块盒子，也可以是行内盒子，这取决于紧随其后的盒子的类型。Run-in 盒子可以用来在可能的情况下将标题嵌入文章的第一个段落中。
- -
 
- -
-

注意：Run-in 盒子已经在CSS 2.1的标准中移除了，但可能会在CSS 3中作为一个实验性的内容再次加入。因此最好不要将其用于正式项目。

-
- -

由其他模型引入的盒子

- -
除了行内格式化上下文和块格式化上下文之外，CSS还定义了几种内容模型，这些模型同样可以应用于元素。这些模型一般用来描述布局，它们可能会定义一些额外的盒子类型：
- -
 
- - - -

定位规则

- -

一旦生成了盒子以后，CSS引擎就需要定位它们以完成布局。下面是定位盒子时所使用的规则：

- - - -

普通流

- -
在普通流中，盒子会依次放置。在块格式化上下文中，盒子在垂直方向依次排列；而在行内格式化上下文中，盒子则水平排列。当CSS的 {{ cssxref("position") }} 属性为 static 或 relative，并且 {{ cssxref("float") }} 为 none 时，其布局方式为普通流。
- -

示例

- -
-

在普通流的块格式化上下文中，盒子会垂直依次排列：

- -

[TODO 图片]

- -

在普通流的行内格式化上下文中，盒子会水平依次排列：

- -

[TODO 图片]

-
- -
-

普通流又有两种情况：静态定位和相对定位：

- -

{{ cssxref("position") }} 为 static 时为静态定位，此时每个盒子根据普通流所计算出的确切位置来定位。

- -

[TODO 图片]

- -

当 {{ cssxref("position") }} 为 relative 时为相对定位，此时每个盒子还会根据 {{ cssxref("top") }}、{{ cssxref("bottom") }}、{{ cssxref("left") }} 和 {{ cssxref("right") }} 属性的值在其原本所在的位置上产生指定大小的偏移。

-
- -

浮动

- -

在浮动定位中，浮动盒子会浮动到当前行的开始或尾部位置。这会导致普通流中的文本及其他内容会“流”到浮动盒子的边缘处，除非元素通过 {{ cssxref("clear") }} 清除了前面的浮动。

- -

一个盒子的 {{ cssxref("float") }} 值不为 none，并且其 {{ cssxref("position") }} 为 static 或 relative 时，该盒子为浮动定位。如果将 {{ cssxref("float") }} 设置为 left，浮动盒子会定位到当前行盒子的开始位置（左侧），如果设置为 right，浮动盒子会定位到当前行盒子的尾部位置（右侧）。不管是左浮动还是右浮动，行盒子都会伸缩以适应浮动盒子的大小。

- -

[TODO 图片]

- -

绝对定位

- -

在绝对定位中，盒子会完全从当前流中移除，并且不会再与其有任何联系（译注：此处仅指定位和位置计算，而绝对定位的元素在文档树中仍然与其他元素有父子或兄弟等关系），其位置会使用 {{ cssxref("top") }}、{{ cssxref("bottom") }}、{{ cssxref("left") }} 和 {{ cssxref("right") }} 相对其包含块进行计算。

- -

如果元素的 {{ cssxref("position") }} 为 absolute 或 fixed，该元素为绝对定位。

- -

对固定位置的元素来说，其包含块为整个视口，该元素相对视口进行绝对定位，因此滚动时元素的位置并不会改变。

- -

参见

- - diff --git a/files/zh-cn/web/guide/html/content_editable/index.html b/files/zh-cn/web/guide/html/content_editable/index.html deleted file mode 100644 index 00f44d6fd7..0000000000 --- a/files/zh-cn/web/guide/html/content_editable/index.html +++ /dev/null @@ -1,219 +0,0 @@ ---- -title: Content Editable -slug: Web/Guide/HTML/Content_Editable -translation_of: Web/Guide/HTML/Editable_content ---- -

在HTML中，任何元素都可以被编辑。通过使用一些JavaScript事件处理程序，您可以将您的网页转换为完整且快速的富文本编辑器。本文提供了有关此功能的一些信息。

- -

它是如何工作的？

- -

为了使元素可编辑，你所要做的就是在html标签上设置"contenteditable"属性，它几乎支持所有的HTML元素。

- -

下面是一个简单的示例，创建一个"contenteditable"属性为"true"的div元素，用户就可以编辑其内容了。

- -
<div contenteditable="true">
-  This text can be edited by the user.
-</div>
- -

这是上面代码运行的结果：

- -

{{ EmbedLiveSample('How_does_it_work') }}

- -

执行命令设置可编辑区域

- -

当一个HTML元素的contenteditable属性被设置为true时，{{ domxref("document.execCommand()") }} 方法便可使用。通过该方法，你可以运行相关commands 来操作可编辑区域的内容。其中大多数命令都会影响文档的选择，例如，给文本提供一个样式(加粗，倾斜等)、插入新元素(如增加一个链接)、影响一整行文本(如缩进排版)。当使用contentEditable后，调用execCommand()方法将影响当前处于活动状态的可编辑元素

- -

在标记生成上的不同点

- -

因为各个浏览器在标记生成上的不同，因此跨浏览器使用 contenteditable 一直以来都是痛点，例如一些看起来十分简单的事情，如： 当你按下Enter/Return键在可编辑区域中创建一个新的文本行时，不同主流浏览器对此有不同处理(Firefox 插入{{htmlelement("br")}}、IE/Opera将使用{{htmlelement("p")}}、 Chrome/Safari 将使用 {{htmlelement("div")}}）

- -

幸运的是在现代浏览器中，这些不同都趋于一致了。截止到Firefox 60，火狐开始使用{{htmlelement("div")}}元素来包裹新生成的文本行，以与Chrome, modern Opera, Edge, and Safari.的行为趋于一致

- -
-

注意: Internet Explorer使用 {{htmlelement("p")}} 元素而不是 <div>.

-
- -

如果你想使用不同的方式创建新的段落,上面所有浏览器都支持{{domxref("document.execCommand")}}方法，该方法提供的 defaultParagraphSeparator 命令能够让你以不同的方式创建新的段落例如, 使用 {{htmlelement("p")}} 元素:

- -
document.execCommand("defaultParagraphSeparator", false, "p");
- -

另外，从FireFox 55开始，火狐还为defaultParagraphSeparator支持非标准化参数br。如果你的Web应用程序通过检查浏览器是否为火狐来支持旧的FireFox行为，这将非常有用。但不幸的是，你并没有多少时间来为新的Firefox修复你的Web应用，你可以在初始化designMode和contenteditable时插入下面的代码来恢复较早的Firefox行为：

- -
document.execCommand("defaultParagraphSeparator", false, "br");
- -

安全性

- -

出于安全原因，火狐浏览器默认不允许JavaScript代码使用剪贴板相关特性（如复制、粘贴等）。你可以在about:config中设置如下选项来启用它们:

- -
user_pref("capability.policy.policynames", "allowclipboard");
-user_pref("capability.policy.allowclipboard.sites", "https://www.mozilla.org");
-user_pref("capability.policy.allowclipboard.Clipboard.cutcopy", "allAccess");
-user_pref("capability.policy.allowclipboard.Clipboard.paste", "allAccess");
- -

例子：一个简单但完整的富文本编辑器

- -
-
<!doctype html>
-<html>
-<head>
-<title>Rich Text Editor</title>
-<script type="text/javascript">
-var oDoc, sDefTxt;
-
-function initDoc() {
-  oDoc = document.getElementById("textBox");
-  sDefTxt = oDoc.innerHTML;
-  if (document.compForm.switchMode.checked) { setDocMode(true); }
-}
-
-function formatDoc(sCmd, sValue) {
-  if (validateMode()) { document.execCommand(sCmd, false, sValue); oDoc.focus(); }
-}
-
-function validateMode() {
-  if (!document.compForm.switchMode.checked) { return true ; }
-  alert("Uncheck \"Show HTML\".");
-  oDoc.focus();
-  return false;
-}
-
-function setDocMode(bToSource) {
-  var oContent;
-  if (bToSource) {
-    oContent = document.createTextNode(oDoc.innerHTML);
-    oDoc.innerHTML = "";
-    var oPre = document.createElement("pre");
-    oDoc.contentEditable = false;
-    oPre.id = "sourceText";
-    oPre.contentEditable = true;
-    oPre.appendChild(oContent);
-    oDoc.appendChild(oPre);
-    document.execCommand("defaultParagraphSeparator", false, "div");
-  } else {
-    if (document.all) {
-      oDoc.innerHTML = oDoc.innerText;
-    } else {
-      oContent = document.createRange();
-      oContent.selectNodeContents(oDoc.firstChild);
-      oDoc.innerHTML = oContent.toString();
-    }
-    oDoc.contentEditable = true;
-  }
-  oDoc.focus();
-}
-
-function printDoc() {
-  if (!validateMode()) { return; }
-  var oPrntWin = window.open("","_blank","width=450,height=470,left=400,top=100,menubar=yes,toolbar=no,location=no,scrollbars=yes");
-  oPrntWin.document.open();
-  oPrntWin.document.write("<!doctype html><html><head><title>Print<\/title><\/head><body onload=\"print();\">" + oDoc.innerHTML + "<\/body><\/html>");
-  oPrntWin.document.close();
-}
-</script>
-<style type="text/css">
-.intLink { cursor: pointer; }
-img.intLink { border: 0; }
-#toolBar1 select { font-size:10px; }
-#textBox {
-  width: 540px;
-  height: 200px;
-  border: 1px #000000 solid;
-  padding: 12px;
-  overflow: scroll;
-}
-#textBox #sourceText {
-  padding: 0;
-  margin: 0;
-  min-width: 498px;
-  min-height: 200px;
-}
-#editMode label { cursor: pointer; }
-</style>
-</head>
-<body onload="initDoc();">
-<form name="compForm" method="post" action="sample.php" onsubmit="if(validateMode()){this.myDoc.value=oDoc.innerHTML;return true;}return false;">
-<input type="hidden" name="myDoc">
-<div id="toolBar1">
-<select onchange="formatDoc('formatblock',this[this.selectedIndex].value);this.selectedIndex=0;">
-<option selected>- formatting -</option>
-<option value="h1">Title 1 &lt;h1&gt;</option>
-<option value="h2">Title 2 &lt;h2&gt;</option>
-<option value="h3">Title 3 &lt;h3&gt;</option>
-<option value="h4">Title 4 &lt;h4&gt;</option>
-<option value="h5">Title 5 &lt;h5&gt;</option>
-<option value="h6">Subtitle &lt;h6&gt;</option>
-<option value="p">Paragraph &lt;p&gt;</option>
-<option value="pre">Preformatted &lt;pre&gt;</option>
-</select>
-<select onchange="formatDoc('fontname',this[this.selectedIndex].value);this.selectedIndex=0;">
-<option class="heading" selected>- font -</option>
-<option>Arial</option>
-<option>Arial Black</option>
-<option>Courier New</option>
-<option>Times New Roman</option>
-</select>
-<select onchange="formatDoc('fontsize',this[this.selectedIndex].value);this.selectedIndex=0;">
-<option class="heading" selected>- size -</option>
-<option value="1">Very small</option>
-<option value="2">A bit small</option>
-<option value="3">Normal</option>
-<option value="4">Medium-large</option>
-<option value="5">Big</option>
-<option value="6">Very big</option>
-<option value="7">Maximum</option>
-</select>
-<select onchange="formatDoc('forecolor',this[this.selectedIndex].value);this.selectedIndex=0;">
-<option class="heading" selected>- color -</option>
-<option value="red">Red</option>
-<option value="blue">Blue</option>
-<option value="green">Green</option>
-<option value="black">Black</option>
-</select>
-<select onchange="formatDoc('backcolor',this[this.selectedIndex].value);this.selectedIndex=0;">
-<option class="heading" selected>- background -</option>
-<option value="red">Red</option>
-<option value="green">Green</option>
-<option value="black">Black</option>
-</select>
-</div>
-<div id="toolBar2">
-<img class="intLink" title="Clean" onclick="if(validateMode()&&confirm('Are you sure?')){oDoc.innerHTML=sDefTxt};" src="data:image/gif;base64,R0lGODlhFgAWAIQbAD04KTRLYzFRjlldZl9vj1dusY14WYODhpWIbbSVFY6O7IOXw5qbms+wUbCztca0ccS4kdDQjdTLtMrL1O3YitHa7OPcsd/f4PfvrvDv8Pv5xv///////////////////yH5BAEKAB8ALAAAAAAWABYAAAV84CeOZGmeaKqubMteyzK547QoBcFWTm/jgsHq4rhMLoxFIehQQSAWR+Z4IAyaJ0kEgtFoLIzLwRE4oCQWrxoTOTAIhMCZ0tVgMBQKZHAYyFEWEV14eQ8IflhnEHmFDQkAiSkQCI2PDC4QBg+OAJc0ewadNCOgo6anqKkoIQA7" />
-<img class="intLink" title="Print" onclick="printDoc();" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oEBxcZFmGboiwAAAAIdEVYdENvbW1lbnQA9syWvwAAAuFJREFUOMvtlUtsjFEUx//n3nn0YdpBh1abRpt4LFqtqkc3jRKkNEIsiIRIBBEhJJpKlIVo4m1RRMKKjQiRMJRUqUdKPT71qpIpiRKPaqdF55tv5vvusZjQTjOlseUkd3Xu/3dPzusC/22wtu2wRn+jG5So/OCDh8ycMJDflehMlkJkVK7KUYN+ufzA/RttH76zaVocDptRxzQtNi3mRWuPc+6cKtlXZ/sddP2uu9uXlmYXZ6Qm8v4Tz8lhF1H+zDQXt7S8oLMXtbF4e8QaFHjj3kbP2MzkktHpiTjp9VH6iHiA+whtAsX5brpwueMGdONdf/2A4M7ukDs1JW662+XkqTkeUoqjKtOjm2h53YFL15pSJ04Zc94wdtibr26fXlC2mzRvBccEbz2kiRFD414tKMlEZbVGT33+qCoHgha81SWYsew0r1uzfNylmtpx80pngQQ91LwVk2JGvGnfvZG6YcYRAT16GFtW5kKKfo1EQLtfh5Q2etT0BIWF+aitq4fDbk+ImYo1OxvGF03waFJQvBCkvDffRyEtxQiFFYgAZTHS0zwAGD7fG5TNnYNTp8/FzvGwJOfmgG7GOx0SAKKgQgDMgKBI0NJGMEImpGDk5+WACEwEd0ywblhGUZ4Hw5OdUekRBLT7DTgdEgxACsIznx8zpmWh7k4rkpJcuHDxCul6MDsmmBXDlWCH2+XozSgBnzsNCEE4euYV4pwCpsWYPW0UHDYBKSWu1NYjENDReqtKjwn2+zvtTc1vMSTB/mvev/WEYSlASsLimcOhOBJxw+N3aP/SjefNL5GePZmpu4kG7OPr1+tOfPyUu3BecWYKcwQcDFmwFKAUo90fhKDInBCAmvqnyMgqUEagQwCoHBDc1rjv9pIlD8IbVkz6qYViIBQGTJPx4k0XpIgEZoRN1Da0cij4VfR0ta3WvBXH/rjdCufv6R2zPgPH/e4pxSBCpeatqPrjNiso203/5s/zA171Mv8+w1LOAAAAAElFTkSuQmCC">
-<img class="intLink" title="Undo" onclick="formatDoc('undo');" src="data:image/gif;base64,R0lGODlhFgAWAOMKADljwliE33mOrpGjuYKl8aezxqPD+7/I19DV3NHa7P///////////////////////yH5BAEKAA8ALAAAAAAWABYAAARR8MlJq7046807TkaYeJJBnES4EeUJvIGapWYAC0CsocQ7SDlWJkAkCA6ToMYWIARGQF3mRQVIEjkkSVLIbSfEwhdRIH4fh/DZMICe3/C4nBQBADs=" />
-<img class="intLink" title="Redo" onclick="formatDoc('redo');" src="data:image/gif;base64,R0lGODlhFgAWAMIHAB1ChDljwl9vj1iE34Kl8aPD+7/I1////yH5BAEKAAcALAAAAAAWABYAAANKeLrc/jDKSesyphi7SiEgsVXZEATDICqBVJjpqWZt9NaEDNbQK1wCQsxlYnxMAImhyDoFAElJasRRvAZVRqqQXUy7Cgx4TC6bswkAOw==" />
-<img class="intLink" title="Remove formatting" onclick="formatDoc('removeFormat')" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAd0SU1FB9oECQMCKPI8CIIAAAAIdEVYdENvbW1lbnQA9syWvwAAAuhJREFUOMtjYBgFxAB501ZWBvVaL2nHnlmk6mXCJbF69zU+Hz/9fB5O1lx+bg45qhl8/fYr5it3XrP/YWTUvvvk3VeqGXz70TvbJy8+Wv39+2/Hz19/mGwjZzuTYjALuoBv9jImaXHeyD3H7kU8fPj2ICML8z92dlbtMzdeiG3fco7J08foH1kurkm3E9iw54YvKwuTuom+LPt/BgbWf3//sf37/1/c02cCG1lB8f//f95DZx74MTMzshhoSm6szrQ/a6Ir/Z2RkfEjBxuLYFpDiDi6Af///2ckaHBp7+7wmavP5n76+P2ClrLIYl8H9W36auJCbCxM4szMTJac7Kza////R3H1w2cfWAgafPbqs5g7D95++/P1B4+ECK8tAwMDw/1H7159+/7r7ZcvPz4fOHbzEwMDwx8GBgaGnNatfHZx8zqrJ+4VJBh5CQEGOySEua/v3n7hXmqI8WUGBgYGL3vVG7fuPK3i5GD9/fja7ZsMDAzMG/Ze52mZeSj4yu1XEq/ff7W5dvfVAS1lsXc4Db7z8C3r8p7Qjf///2dnZGxlqJuyr3rPqQd/Hhyu7oSpYWScylDQsd3kzvnH738wMDzj5GBN1VIWW4c3KDon7VOvm7S3paB9u5qsU5/x5KUnlY+eexQbkLNsErK61+++VnAJcfkyMTIwffj0QwZbJDKjcETs1Y8evyd48toz8y/ffzv//vPP4veffxpX77z6l5JewHPu8MqTDAwMDLzyrjb/mZm0JcT5Lj+89+Ybm6zz95oMh7s4XbygN3Sluq4Mj5K8iKMgP4f0////fv77//8nLy+7MCcXmyYDAwODS9jM9tcvPypd35pne3ljdjvj26+H2dhYpuENikgfvQeXNmSl3tqepxXsqhXPyc666s+fv1fMdKR3TK72zpix8nTc7bdfhfkEeVbC9KhbK/9iYWHiErbu6MWbY/7//8/4//9/pgOnH6jGVazvFDRtq2VgiBIZrUTIBgCk+ivHvuEKwAAAAABJRU5ErkJggg==">
-<img class="intLink" title="Bold" onclick="formatDoc('bold');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAInhI+pa+H9mJy0LhdgtrxzDG5WGFVk6aXqyk6Y9kXvKKNuLbb6zgMFADs=" />
-<img class="intLink" title="Italic" onclick="formatDoc('italic');" src="data:image/gif;base64,R0lGODlhFgAWAKEDAAAAAF9vj5WIbf///yH5BAEAAAMALAAAAAAWABYAAAIjnI+py+0Po5x0gXvruEKHrF2BB1YiCWgbMFIYpsbyTNd2UwAAOw==" />
-<img class="intLink" title="Underline" onclick="formatDoc('underline');" src="data:image/gif;base64,R0lGODlhFgAWAKECAAAAAF9vj////////yH5BAEAAAIALAAAAAAWABYAAAIrlI+py+0Po5zUgAsEzvEeL4Ea15EiJJ5PSqJmuwKBEKgxVuXWtun+DwxCCgA7" />
-<img class="intLink" title="Left align" onclick="formatDoc('justifyleft');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIghI+py+0Po5y02ouz3jL4D4JMGELkGYxo+qzl4nKyXAAAOw==" />
-<img class="intLink" title="Center align" onclick="formatDoc('justifycenter');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIfhI+py+0Po5y02ouz3jL4D4JOGI7kaZ5Bqn4sycVbAQA7" />
-<img class="intLink" title="Right align" onclick="formatDoc('justifyright');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIghI+py+0Po5y02ouz3jL4D4JQGDLkGYxouqzl43JyVgAAOw==" />
-<img class="intLink" title="Numbered list" onclick="formatDoc('insertorderedlist');" src="data:image/gif;base64,R0lGODlhFgAWAMIGAAAAADljwliE35GjuaezxtHa7P///////yH5BAEAAAcALAAAAAAWABYAAAM2eLrc/jDKSespwjoRFvggCBUBoTFBeq6QIAysQnRHaEOzyaZ07Lu9lUBnC0UGQU1K52s6n5oEADs=" />
-<img class="intLink" title="Dotted list" onclick="formatDoc('insertunorderedlist');" src="data:image/gif;base64,R0lGODlhFgAWAMIGAAAAAB1ChF9vj1iE33mOrqezxv///////yH5BAEAAAcALAAAAAAWABYAAAMyeLrc/jDKSesppNhGRlBAKIZRERBbqm6YtnbfMY7lud64UwiuKnigGQliQuWOyKQykgAAOw==" />
-<img class="intLink" title="Quote" onclick="formatDoc('formatblock','blockquote');" src="data:image/gif;base64,R0lGODlhFgAWAIQXAC1NqjFRjkBgmT9nqUJnsk9xrFJ7u2R9qmKBt1iGzHmOrm6Sz4OXw3Odz4Cl2ZSnw6KxyqO306K63bG70bTB0rDI3bvI4P///////////////////////////////////yH5BAEKAB8ALAAAAAAWABYAAAVP4CeOZGmeaKqubEs2CekkErvEI1zZuOgYFlakECEZFi0GgTGKEBATFmJAVXweVOoKEQgABB9IQDCmrLpjETrQQlhHjINrTq/b7/i8fp8PAQA7" />
-<img class="intLink" title="Delete indentation" onclick="formatDoc('outdent');" src="data:image/gif;base64,R0lGODlhFgAWAMIHAAAAADljwliE35GjuaezxtDV3NHa7P///yH5BAEAAAcALAAAAAAWABYAAAM2eLrc/jDKCQG9F2i7u8agQgyK1z2EIBil+TWqEMxhMczsYVJ3e4ahk+sFnAgtxSQDqWw6n5cEADs=" />
-<img class="intLink" title="Add indentation" onclick="formatDoc('indent');" src="data:image/gif;base64,R0lGODlhFgAWAOMIAAAAADljwl9vj1iE35GjuaezxtDV3NHa7P///////////////////////////////yH5BAEAAAgALAAAAAAWABYAAAQ7EMlJq704650B/x8gemMpgugwHJNZXodKsO5oqUOgo5KhBwWESyMQsCRDHu9VOyk5TM9zSpFSr9gsJwIAOw==" />
-<img class="intLink" title="Hyperlink" onclick="var sLnk=prompt('Write the URL here','http:\/\/');if(sLnk&&sLnk!=''&&sLnk!='http://'){formatDoc('createlink',sLnk)}" src="data:image/gif;base64,R0lGODlhFgAWAOMKAB1ChDRLY19vj3mOrpGjuaezxrCztb/I19Ha7Pv8/f///////////////////////yH5BAEKAA8ALAAAAAAWABYAAARY8MlJq7046827/2BYIQVhHg9pEgVGIklyDEUBy/RlE4FQF4dCj2AQXAiJQDCWQCAEBwIioEMQBgSAFhDAGghGi9XgHAhMNoSZgJkJei33UESv2+/4vD4TAQA7" />
-<img class="intLink" title="Cut" onclick="formatDoc('cut');" src="data:image/gif;base64,R0lGODlhFgAWAIQSAB1ChBFNsRJTySJYwjljwkxwl19vj1dusYODhl6MnHmOrpqbmpGjuaezxrCztcDCxL/I18rL1P///////////////////////////////////////////////////////yH5BAEAAB8ALAAAAAAWABYAAAVu4CeOZGmeaKqubDs6TNnEbGNApNG0kbGMi5trwcA9GArXh+FAfBAw5UexUDAQESkRsfhJPwaH4YsEGAAJGisRGAQY7UCC9ZAXBB+74LGCRxIEHwAHdWooDgGJcwpxDisQBQRjIgkDCVlfmZqbmiEAOw==" />
-<img class="intLink" title="Copy" onclick="formatDoc('copy');" src="data:image/gif;base64,R0lGODlhFgAWAIQcAB1ChBFNsTRLYyJYwjljwl9vj1iE31iGzF6MnHWX9HOdz5GjuYCl2YKl8ZOt4qezxqK63aK/9KPD+7DI3b/I17LM/MrL1MLY9NHa7OPs++bx/Pv8/f///////////////yH5BAEAAB8ALAAAAAAWABYAAAWG4CeOZGmeaKqubOum1SQ/kPVOW749BeVSus2CgrCxHptLBbOQxCSNCCaF1GUqwQbBd0JGJAyGJJiobE+LnCaDcXAaEoxhQACgNw0FQx9kP+wmaRgYFBQNeAoGihCAJQsCkJAKOhgXEw8BLQYciooHf5o7EA+kC40qBKkAAAGrpy+wsbKzIiEAOw==" />
-<img class="intLink" title="Paste" onclick="formatDoc('paste');" src="data:image/gif;base64,R0lGODlhFgAWAIQUAD04KTRLY2tXQF9vj414WZWIbXmOrpqbmpGjudClFaezxsa0cb/I1+3YitHa7PrkIPHvbuPs+/fvrvv8/f///////////////////////////////////////////////yH5BAEAAB8ALAAAAAAWABYAAAWN4CeOZGmeaKqubGsusPvBSyFJjVDs6nJLB0khR4AkBCmfsCGBQAoCwjF5gwquVykSFbwZE+AwIBV0GhFog2EwIDchjwRiQo9E2Fx4XD5R+B0DDAEnBXBhBhN2DgwDAQFjJYVhCQYRfgoIDGiQJAWTCQMRiwwMfgicnVcAAAMOaK+bLAOrtLUyt7i5uiUhADs=" />
-</div>
-<div id="textBox" contenteditable="true"><p>Lorem ipsum</p></div>
-<p id="editMode"><input type="checkbox" name="switchMode" id="switchBox" onchange="setDocMode(this.checked);" /> <label for="switchBox">Show HTML</label></p>
-<p><input type="submit" value="Send" /></p>
-</form>
-</body>
-</html>
-
-
- -
注意: 如果你想知道如何标准的在你的页面中创建和插入编辑器，请查阅 更多完整的富文本编辑器例子.
- -

相关链接

- - diff --git a/files/zh-cn/web/guide/html/content_editable/rich-text_editing_in_mozilla/index.html b/files/zh-cn/web/guide/html/content_editable/rich-text_editing_in_mozilla/index.html deleted file mode 100644 index f237e94b61..0000000000 --- a/files/zh-cn/web/guide/html/content_editable/rich-text_editing_in_mozilla/index.html +++ /dev/null @@ -1,272 +0,0 @@ ---- -title: Mozilla中的富文本编辑器 -slug: Web/Guide/HTML/Content_Editable/Rich-Text_Editing_in_Mozilla -tags: - - 富文本 - - 指南 -translation_of: Web/Guide/HTML/Editable_content/Rich-Text_Editing_in_Mozilla ---- -

Mozilla 1.3 实现了微软 IE 浏览器的 designMode 特性。Mozilla 1.3 的富文本编辑器支持的 designMode 特性能将 HTML 文档转换为富文本编辑器。从 Firefox 3 开始，Mozilla 也支持 IE 的 contentEditable 属性，该属性允许将任意元素设置为可编辑或不可编辑的（后者可阻止在可编辑环境中，对固定元素的改变）。

- -

配置富文本编辑

- -

富文本编辑通过设置文档的 "designMode" 属性为 "On" 来初始化。一旦 designMode 设置为 "On" ，该文档即成为用户能够按使用 textarea 方式操作的富文本编辑区域。复制和粘贴等最基础的键盘操作可用，而其它命令则需通过站点实现。

- -

类似地，将 "contentEditable" 属性设置为 "true" 后，用户能够将文档中的独立元素设置为可编辑的。

- -

执行命令

- -

当 HTML 文档切换至 designMode 时，文档对象将暴露出 "document.execCommand" 方法，允许用户运行命令以操作可编辑区域的内容。多数命令影响文档的选中区域（加粗、斜体等），而其余命令则可插入新元素（添加新行）或影响整行（缩进）。当使用 contentEditable 时，调用 execCommand 将影响当前活跃的可编辑元素。

- -

与 IE 区别

- -

Mozilla 与 IE 在 designMode 下的一个显著区别在于可编辑区域中所生成的代码。在 IE 中使用 em 与 i 等 HTML 标签，而 Mozilla 则默认生成带有内联样式规则的 span 标签。可通过 styleWithCSS 命令以在 CSS 与 HTML 标记中切换。

- -

Figure 1 : 生成 HTML 的区别

- -

Mozilla:

- -
<span style="font-weight: bold;">I love geckos.</span>
-<span style="font-weight: bold; font-style: italic;
-    text-decoration: underline;">Dinosaurs are big.</span>
- -

Internet Explorer:

- -
<STRONG>I love geckos.</STRONG>
-<STRONG><EM><U>Dinosaurs are big.</U></EM></STRONG>
-
- -

Mozilla 与 IE 的另一个区别是在与 designMode 结合使用的场景中，其访问 iframe 中文档对象的方式。Mozilla 使用了 W3C 的标准方式，即 IFrameElement.contentDocument，而 IE 则使用了 IFrameElement.document.

- -

DevEdge 提供了一个 JavaScript 辅助工具类，xbDesignMode，它封装了 IE 与 Mozilla 之间的 designMode 差异特性。

- -


- 禁用事件处理

- -

另一额外的区别在于，Mozilla 中一旦切换至 designMode，那么该文档上绑定的全部事件将被禁用。在 designMode 关闭后（如在 Mozilla 1.5 中可用），事件重新可用。

- -

在 Migrate apps from Internet Explorer to Mozilla 中的 Rich text editing 章节可查看更多信息。

- -

示例

- -

示例 1

- -

第一个示例中，将 HTML 文档中的 designMode 设置为 "On"。在 Mozilla 1.3 中这将使整篇文档均可编辑。但在 IE 中并不支持通过 JavaScript 改变文档的 designMode 特性。需要兼容 IE 时，body 标签中的 contentEditable 属性需要设置为 "true"。

- -

Figure 2 : 第一个示例

- -
HTML:
-<body contentEditable="true" onload="load()">
-
-JavaScript:
-function load(){
-  window.document.designMode = "On";
-}
- -

示例 2

- -

第二个示例是一个支持文本加粗、斜体、下划线，以及添加链接、改变文本颜色等特性的富文本编辑页面。示例页面带有一个作为富文本编辑区域的 iframe 区域，以及用于实现基础编辑命令的加粗、斜体、文本颜色等编辑元素。

- -

Figure 3 : 配置富文本编辑

- -
HTML:
-<body onload="load()">
-
-JavaScript:
-function load(){
-  getIFrameDocument("editorWindow").designMode = "On";
-}
-//获取对象
-function getIFrameDocument(aID){
-  // if contentDocument exists, W3C compliant (Mozilla)
-  if (document.getElementById(aID).contentDocument){
-    return document.getElementById(aID).contentDocument;
-  } else {
-    // IE
-    return document.frames[aID].document;
-  }
-}
-
- -

该示例包含了 doRichEditCommand 函数以简化对 iframe 的命令操作，并保持 HTML 代码的整洁。执行所需命令的函数使用了 execCommand() 并将焦点设回可编辑文档，以避免点击按钮等操作时的焦点设置打断编辑流程。

- -

Figure 4 : 执行富文本编辑命令

- -
HTML:
-<button onclick="doRichEditCommand('bold')" style="font-weight:bold;">B</button>
-
-JavaScript:
-function doRichEditCommand(aName, aArg){
-  getIFrameDocument('editorWindow').execCommand(aName,false, aArg);
-  document.getElementById('editorWindow').contentWindow.focus()
-}
- -

示例：一个简易但完整的富文本编辑器

- -
<!doctype html>
-<html>
-<head>
-<title>Rich Text Editor</title>
-<script type="text/javascript">
-var oDoc, sDefTxt;
-
-function initDoc() {
-  oDoc = document.getElementById("textBox");
-  sDefTxt = oDoc.innerHTML;
-  if (document.compForm.switchMode.checked) { setDocMode(true); }
-}
-
-function formatDoc(sCmd, sValue) {
-  if (validateMode()) { document.execCommand(sCmd, false, sValue); oDoc.focus(); }
-}
-
-function validateMode() {
-  if (!document.compForm.switchMode.checked) { return true ; }
-  alert("Uncheck \"Show HTML\".");
-  oDoc.focus();
-  return false;
-}
-
-function setDocMode(bToSource) {
-  var oContent;
-  if (bToSource) {
-    oContent = document.createTextNode(oDoc.innerHTML);
-    oDoc.innerHTML = "";
-    var oPre = document.createElement("pre");
-    oDoc.contentEditable = false;
-    oPre.id = "sourceText";
-    oPre.contentEditable = true;
-    oPre.appendChild(oContent);
-    oDoc.appendChild(oPre);
-  } else {
-    if (document.all) {
-      oDoc.innerHTML = oDoc.innerText;
-    } else {
-      oContent = document.createRange();
-      oContent.selectNodeContents(oDoc.firstChild);
-      oDoc.innerHTML = oContent.toString();
-    }
-    oDoc.contentEditable = true;
-  }
-  oDoc.focus();
-}
-
-function printDoc() {
-  if (!validateMode()) { return; }
-  var oPrntWin = window.open("","_blank","width=450,height=470,left=400,top=100,menubar=yes,toolbar=no,location=no,scrollbars=yes");
-  oPrntWin.document.open();
-  oPrntWin.document.write("<!doctype html><html><head><title>Print<\/title><\/head><body onload=\"print();\">" + oDoc.innerHTML + "<\/body><\/html>");
-  oPrntWin.document.close();
-}
-</script>
-<style type="text/css">
-.intLink { cursor: pointer; }
-img.intLink { border: 0; }
-#toolBar1 select { font-size:10px; }
-#textBox {
-  width: 540px;
-  height: 200px;
-  border: 1px #000000 solid;
-  padding: 12px;
-  overflow: scroll;
-}
-#textBox #sourceText {
-  padding: 0;
-  margin: 0;
-  min-width: 498px;
-  min-height: 200px;
-}
-#editMode label { cursor: pointer; }
-</style>
-</head>
-<body onload="initDoc();">
-<form name="compForm" method="post" action="sample.php" onsubmit="if(validateMode()){this.myDoc.value=oDoc.innerHTML;return true;}return false;">
-<input type="hidden" name="myDoc">
-<div id="toolBar1">
-<select onchange="formatDoc('formatblock',this[this.selectedIndex].value);this.selectedIndex=0;">
-<option selected>- formatting -</option>
-<option value="h1">Title 1 &lt;h1&gt;</option>
-<option value="h2">Title 2 &lt;h2&gt;</option>
-<option value="h3">Title 3 &lt;h3&gt;</option>
-<option value="h4">Title 4 &lt;h4&gt;</option>
-<option value="h5">Title 5 &lt;h5&gt;</option>
-<option value="h6">Subtitle &lt;h6&gt;</option>
-<option value="p">Paragraph &lt;p&gt;</option>
-<option value="pre">Preformatted &lt;pre&gt;</option>
-</select>
-<select onchange="formatDoc('fontname',this[this.selectedIndex].value);this.selectedIndex=0;">
-<option class="heading" selected>- font -</option>
-<option>Arial</option>
-<option>Arial Black</option>
-<option>Courier New</option>
-<option>Times New Roman</option>
-</select>
-<select onchange="formatDoc('fontsize',this[this.selectedIndex].value);this.selectedIndex=0;">
-<option class="heading" selected>- size -</option>
-<option value="1">Very small</option>
-<option value="2">A bit small</option>
-<option value="3">Normal</option>
-<option value="4">Medium-large</option>
-<option value="5">Big</option>
-<option value="6">Very big</option>
-<option value="7">Maximum</option>
-</select>
-<select onchange="formatDoc('forecolor',this[this.selectedIndex].value);this.selectedIndex=0;">
-<option class="heading" selected>- color -</option>
-<option value="red">Red</option>
-<option value="blue">Blue</option>
-<option value="green">Green</option>
-<option value="black">Black</option>
-</select>
-<select onchange="formatDoc('backcolor',this[this.selectedIndex].value);this.selectedIndex=0;">
-<option class="heading" selected>- background -</option>
-<option value="red">Red</option>
-<option value="green">Green</option>
-<option value="black">Black</option>
-</select>
-</div>
-<div id="toolBar2">
-<img class="intLink" title="Clean" onclick="if(validateMode()&&confirm('Are you sure?')){oDoc.innerHTML=sDefTxt};" src="data:image/gif;base64,R0lGODlhFgAWAIQbAD04KTRLYzFRjlldZl9vj1dusY14WYODhpWIbbSVFY6O7IOXw5qbms+wUbCztca0ccS4kdDQjdTLtMrL1O3YitHa7OPcsd/f4PfvrvDv8Pv5xv///////////////////yH5BAEKAB8ALAAAAAAWABYAAAV84CeOZGmeaKqubMteyzK547QoBcFWTm/jgsHq4rhMLoxFIehQQSAWR+Z4IAyaJ0kEgtFoLIzLwRE4oCQWrxoTOTAIhMCZ0tVgMBQKZHAYyFEWEV14eQ8IflhnEHmFDQkAiSkQCI2PDC4QBg+OAJc0ewadNCOgo6anqKkoIQA7" />
-<img class="intLink" title="Print" onclick="printDoc();" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oEBxcZFmGboiwAAAAIdEVYdENvbW1lbnQA9syWvwAAAuFJREFUOMvtlUtsjFEUx//n3nn0YdpBh1abRpt4LFqtqkc3jRKkNEIsiIRIBBEhJJpKlIVo4m1RRMKKjQiRMJRUqUdKPT71qpIpiRKPaqdF55tv5vvusZjQTjOlseUkd3Xu/3dPzusC/22wtu2wRn+jG5So/OCDh8ycMJDflehMlkJkVK7KUYN+ufzA/RttH76zaVocDptRxzQtNi3mRWuPc+6cKtlXZ/sddP2uu9uXlmYXZ6Qm8v4Tz8lhF1H+zDQXt7S8oLMXtbF4e8QaFHjj3kbP2MzkktHpiTjp9VH6iHiA+whtAsX5brpwueMGdONdf/2A4M7ukDs1JW662+XkqTkeUoqjKtOjm2h53YFL15pSJ04Zc94wdtibr26fXlC2mzRvBccEbz2kiRFD414tKMlEZbVGT33+qCoHgha81SWYsew0r1uzfNylmtpx80pngQQ91LwVk2JGvGnfvZG6YcYRAT16GFtW5kKKfo1EQLtfh5Q2etT0BIWF+aitq4fDbk+ImYo1OxvGF03waFJQvBCkvDffRyEtxQiFFYgAZTHS0zwAGD7fG5TNnYNTp8/FzvGwJOfmgG7GOx0SAKKgQgDMgKBI0NJGMEImpGDk5+WACEwEd0ywblhGUZ4Hw5OdUekRBLT7DTgdEgxACsIznx8zpmWh7k4rkpJcuHDxCul6MDsmmBXDlWCH2+XozSgBnzsNCEE4euYV4pwCpsWYPW0UHDYBKSWu1NYjENDReqtKjwn2+zvtTc1vMSTB/mvev/WEYSlASsLimcOhOBJxw+N3aP/SjefNL5GePZmpu4kG7OPr1+tOfPyUu3BecWYKcwQcDFmwFKAUo90fhKDInBCAmvqnyMgqUEagQwCoHBDc1rjv9pIlD8IbVkz6qYViIBQGTJPx4k0XpIgEZoRN1Da0cij4VfR0ta3WvBXH/rjdCufv6R2zPgPH/e4pxSBCpeatqPrjNiso203/5s/zA171Mv8+w1LOAAAAAElFTkSuQmCC">
-<img class="intLink" title="Undo" onclick="formatDoc('undo');" src="data:image/gif;base64,R0lGODlhFgAWAOMKADljwliE33mOrpGjuYKl8aezxqPD+7/I19DV3NHa7P///////////////////////yH5BAEKAA8ALAAAAAAWABYAAARR8MlJq7046807TkaYeJJBnES4EeUJvIGapWYAC0CsocQ7SDlWJkAkCA6ToMYWIARGQF3mRQVIEjkkSVLIbSfEwhdRIH4fh/DZMICe3/C4nBQBADs=" />
-<img class="intLink" title="Redo" onclick="formatDoc('redo');" src="data:image/gif;base64,R0lGODlhFgAWAMIHAB1ChDljwl9vj1iE34Kl8aPD+7/I1////yH5BAEKAAcALAAAAAAWABYAAANKeLrc/jDKSesyphi7SiEgsVXZEATDICqBVJjpqWZt9NaEDNbQK1wCQsxlYnxMAImhyDoFAElJasRRvAZVRqqQXUy7Cgx4TC6bswkAOw==" />
-<img class="intLink" title="Remove formatting" onclick="formatDoc('removeFormat')" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAd0SU1FB9oECQMCKPI8CIIAAAAIdEVYdENvbW1lbnQA9syWvwAAAuhJREFUOMtjYBgFxAB501ZWBvVaL2nHnlmk6mXCJbF69zU+Hz/9fB5O1lx+bg45qhl8/fYr5it3XrP/YWTUvvvk3VeqGXz70TvbJy8+Wv39+2/Hz19/mGwjZzuTYjALuoBv9jImaXHeyD3H7kU8fPj2ICML8z92dlbtMzdeiG3fco7J08foH1kurkm3E9iw54YvKwuTuom+LPt/BgbWf3//sf37/1/c02cCG1lB8f//f95DZx74MTMzshhoSm6szrQ/a6Ir/Z2RkfEjBxuLYFpDiDi6Af///2ckaHBp7+7wmavP5n76+P2ClrLIYl8H9W36auJCbCxM4szMTJac7Kza////R3H1w2cfWAgafPbqs5g7D95++/P1B4+ECK8tAwMDw/1H7159+/7r7ZcvPz4fOHbzEwMDwx8GBgaGnNatfHZx8zqrJ+4VJBh5CQEGOySEua/v3n7hXmqI8WUGBgYGL3vVG7fuPK3i5GD9/fja7ZsMDAzMG/Ze52mZeSj4yu1XEq/ff7W5dvfVAS1lsXc4Db7z8C3r8p7Qjf///2dnZGxlqJuyr3rPqQd/Hhyu7oSpYWScylDQsd3kzvnH738wMDzj5GBN1VIWW4c3KDon7VOvm7S3paB9u5qsU5/x5KUnlY+eexQbkLNsErK61+++VnAJcfkyMTIwffj0QwZbJDKjcETs1Y8evyd48toz8y/ffzv//vPP4veffxpX77z6l5JewHPu8MqTDAwMDLzyrjb/mZm0JcT5Lj+89+Ybm6zz95oMh7s4XbygN3Sluq4Mj5K8iKMgP4f0////fv77//8nLy+7MCcXmyYDAwODS9jM9tcvPypd35pne3ljdjvj26+H2dhYpuENikgfvQeXNmSl3tqepxXsqhXPyc666s+fv1fMdKR3TK72zpix8nTc7bdfhfkEeVbC9KhbK/9iYWHiErbu6MWbY/7//8/4//9/pgOnH6jGVazvFDRtq2VgiBIZrUTIBgCk+ivHvuEKwAAAAABJRU5ErkJggg==">
-<img class="intLink" title="Bold" onclick="formatDoc('bold');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAInhI+pa+H9mJy0LhdgtrxzDG5WGFVk6aXqyk6Y9kXvKKNuLbb6zgMFADs=" />
-<img class="intLink" title="Italic" onclick="formatDoc('italic');" src="data:image/gif;base64,R0lGODlhFgAWAKEDAAAAAF9vj5WIbf///yH5BAEAAAMALAAAAAAWABYAAAIjnI+py+0Po5x0gXvruEKHrF2BB1YiCWgbMFIYpsbyTNd2UwAAOw==" />
-<img class="intLink" title="Underline" onclick="formatDoc('underline');" src="data:image/gif;base64,R0lGODlhFgAWAKECAAAAAF9vj////////yH5BAEAAAIALAAAAAAWABYAAAIrlI+py+0Po5zUgAsEzvEeL4Ea15EiJJ5PSqJmuwKBEKgxVuXWtun+DwxCCgA7" />
-<img class="intLink" title="Left align" onclick="formatDoc('justifyleft');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIghI+py+0Po5y02ouz3jL4D4JMGELkGYxo+qzl4nKyXAAAOw==" />
-<img class="intLink" title="Center align" onclick="formatDoc('justifycenter');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIfhI+py+0Po5y02ouz3jL4D4JOGI7kaZ5Bqn4sycVbAQA7" />
-<img class="intLink" title="Right align" onclick="formatDoc('justifyright');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIghI+py+0Po5y02ouz3jL4D4JQGDLkGYxouqzl43JyVgAAOw==" />
-<img class="intLink" title="Numbered list" onclick="formatDoc('insertorderedlist');" src="data:image/gif;base64,R0lGODlhFgAWAMIGAAAAADljwliE35GjuaezxtHa7P///////yH5BAEAAAcALAAAAAAWABYAAAM2eLrc/jDKSespwjoRFvggCBUBoTFBeq6QIAysQnRHaEOzyaZ07Lu9lUBnC0UGQU1K52s6n5oEADs=" />
-<img class="intLink" title="Dotted list" onclick="formatDoc('insertunorderedlist');" src="data:image/gif;base64,R0lGODlhFgAWAMIGAAAAAB1ChF9vj1iE33mOrqezxv///////yH5BAEAAAcALAAAAAAWABYAAAMyeLrc/jDKSesppNhGRlBAKIZRERBbqm6YtnbfMY7lud64UwiuKnigGQliQuWOyKQykgAAOw==" />
-<img class="intLink" title="Quote" onclick="formatDoc('formatblock','blockquote');" src="data:image/gif;base64,R0lGODlhFgAWAIQXAC1NqjFRjkBgmT9nqUJnsk9xrFJ7u2R9qmKBt1iGzHmOrm6Sz4OXw3Odz4Cl2ZSnw6KxyqO306K63bG70bTB0rDI3bvI4P///////////////////////////////////yH5BAEKAB8ALAAAAAAWABYAAAVP4CeOZGmeaKqubEs2CekkErvEI1zZuOgYFlakECEZFi0GgTGKEBATFmJAVXweVOoKEQgABB9IQDCmrLpjETrQQlhHjINrTq/b7/i8fp8PAQA7" />
-<img class="intLink" title="Add indentation" onclick="formatDoc('outdent');" src="data:image/gif;base64,R0lGODlhFgAWAMIHAAAAADljwliE35GjuaezxtDV3NHa7P///yH5BAEAAAcALAAAAAAWABYAAAM2eLrc/jDKCQG9F2i7u8agQgyK1z2EIBil+TWqEMxhMczsYVJ3e4ahk+sFnAgtxSQDqWw6n5cEADs=" />
-<img class="intLink" title="Delete indentation" onclick="formatDoc('indent');" src="data:image/gif;base64,R0lGODlhFgAWAOMIAAAAADljwl9vj1iE35GjuaezxtDV3NHa7P///////////////////////////////yH5BAEAAAgALAAAAAAWABYAAAQ7EMlJq704650B/x8gemMpgugwHJNZXodKsO5oqUOgo5KhBwWESyMQsCRDHu9VOyk5TM9zSpFSr9gsJwIAOw==" />
-<img class="intLink" title="Hyperlink" onclick="var sLnk=prompt('Write the URL here','http:\/\/');if(sLnk&&sLnk!=''&&sLnk!='http://'){formatDoc('createlink',sLnk)}" src="data:image/gif;base64,R0lGODlhFgAWAOMKAB1ChDRLY19vj3mOrpGjuaezxrCztb/I19Ha7Pv8/f///////////////////////yH5BAEKAA8ALAAAAAAWABYAAARY8MlJq7046827/2BYIQVhHg9pEgVGIklyDEUBy/RlE4FQF4dCj2AQXAiJQDCWQCAEBwIioEMQBgSAFhDAGghGi9XgHAhMNoSZgJkJei33UESv2+/4vD4TAQA7" />
-<img class="intLink" title="Cut" onclick="formatDoc('cut');" src="data:image/gif;base64,R0lGODlhFgAWAIQSAB1ChBFNsRJTySJYwjljwkxwl19vj1dusYODhl6MnHmOrpqbmpGjuaezxrCztcDCxL/I18rL1P///////////////////////////////////////////////////////yH5BAEAAB8ALAAAAAAWABYAAAVu4CeOZGmeaKqubDs6TNnEbGNApNG0kbGMi5trwcA9GArXh+FAfBAw5UexUDAQESkRsfhJPwaH4YsEGAAJGisRGAQY7UCC9ZAXBB+74LGCRxIEHwAHdWooDgGJcwpxDisQBQRjIgkDCVlfmZqbmiEAOw==" />
-<img class="intLink" title="Copy" onclick="formatDoc('copy');" src="data:image/gif;base64,R0lGODlhFgAWAIQcAB1ChBFNsTRLYyJYwjljwl9vj1iE31iGzF6MnHWX9HOdz5GjuYCl2YKl8ZOt4qezxqK63aK/9KPD+7DI3b/I17LM/MrL1MLY9NHa7OPs++bx/Pv8/f///////////////yH5BAEAAB8ALAAAAAAWABYAAAWG4CeOZGmeaKqubOum1SQ/kPVOW749BeVSus2CgrCxHptLBbOQxCSNCCaF1GUqwQbBd0JGJAyGJJiobE+LnCaDcXAaEoxhQACgNw0FQx9kP+wmaRgYFBQNeAoGihCAJQsCkJAKOhgXEw8BLQYciooHf5o7EA+kC40qBKkAAAGrpy+wsbKzIiEAOw==" />
-<img class="intLink" title="Paste" onclick="formatDoc('paste');" src="data:image/gif;base64,R0lGODlhFgAWAIQUAD04KTRLY2tXQF9vj414WZWIbXmOrpqbmpGjudClFaezxsa0cb/I1+3YitHa7PrkIPHvbuPs+/fvrvv8/f///////////////////////////////////////////////yH5BAEAAB8ALAAAAAAWABYAAAWN4CeOZGmeaKqubGsusPvBSyFJjVDs6nJLB0khR4AkBCmfsCGBQAoCwjF5gwquVykSFbwZE+AwIBV0GhFog2EwIDchjwRiQo9E2Fx4XD5R+B0DDAEnBXBhBhN2DgwDAQFjJYVhCQYRfgoIDGiQJAWTCQMRiwwMfgicnVcAAAMOaK+bLAOrtLUyt7i5uiUhADs=" />
-</div>
-<div id="textBox" contenteditable="true"><p>Lorem ipsum</p></div>
-<p id="editMode"><input type="checkbox" name="switchMode" id="switchBox" onchange="setDocMode(this.checked);" /> <label for="switchBox">Show HTML</label></p>
-<p><input type="submit" value="Send" /></p>
-</form>
-</body>
-</html>
- - - -

注意： 如果你想查看如何将创建与插入编辑器至页面的流程标准化的内容，请查看 more complete rich-text editor example.

- -

相关资源

- - diff --git a/files/zh-cn/web/guide/html/editable_content/index.html b/files/zh-cn/web/guide/html/editable_content/index.html new file mode 100644 index 0000000000..00f44d6fd7 --- /dev/null +++ b/files/zh-cn/web/guide/html/editable_content/index.html @@ -0,0 +1,219 @@ +--- +title: Content Editable +slug: Web/Guide/HTML/Content_Editable +translation_of: Web/Guide/HTML/Editable_content +--- +

在HTML中，任何元素都可以被编辑。通过使用一些JavaScript事件处理程序，您可以将您的网页转换为完整且快速的富文本编辑器。本文提供了有关此功能的一些信息。

+ +

它是如何工作的？

+ +

为了使元素可编辑，你所要做的就是在html标签上设置"contenteditable"属性，它几乎支持所有的HTML元素。

+ +

下面是一个简单的示例，创建一个"contenteditable"属性为"true"的div元素，用户就可以编辑其内容了。

+ +
<div contenteditable="true">
+  This text can be edited by the user.
+</div>
+ +

这是上面代码运行的结果：

+ +

{{ EmbedLiveSample('How_does_it_work') }}

+ +

执行命令设置可编辑区域

+ +

当一个HTML元素的contenteditable属性被设置为true时，{{ domxref("document.execCommand()") }} 方法便可使用。通过该方法，你可以运行相关commands 来操作可编辑区域的内容。其中大多数命令都会影响文档的选择，例如，给文本提供一个样式(加粗，倾斜等)、插入新元素(如增加一个链接)、影响一整行文本(如缩进排版)。当使用contentEditable后，调用execCommand()方法将影响当前处于活动状态的可编辑元素

+ +

在标记生成上的不同点

+ +

因为各个浏览器在标记生成上的不同，因此跨浏览器使用 contenteditable 一直以来都是痛点，例如一些看起来十分简单的事情，如： 当你按下Enter/Return键在可编辑区域中创建一个新的文本行时，不同主流浏览器对此有不同处理(Firefox 插入{{htmlelement("br")}}、IE/Opera将使用{{htmlelement("p")}}、 Chrome/Safari 将使用 {{htmlelement("div")}}）

+ +

幸运的是在现代浏览器中，这些不同都趋于一致了。截止到Firefox 60，火狐开始使用{{htmlelement("div")}}元素来包裹新生成的文本行，以与Chrome, modern Opera, Edge, and Safari.的行为趋于一致

+ +
+

注意: Internet Explorer使用 {{htmlelement("p")}} 元素而不是 <div>.

+
+ +

如果你想使用不同的方式创建新的段落,上面所有浏览器都支持{{domxref("document.execCommand")}}方法，该方法提供的 defaultParagraphSeparator 命令能够让你以不同的方式创建新的段落例如, 使用 {{htmlelement("p")}} 元素:

+ +
document.execCommand("defaultParagraphSeparator", false, "p");
+ +

另外，从FireFox 55开始，火狐还为defaultParagraphSeparator支持非标准化参数br。如果你的Web应用程序通过检查浏览器是否为火狐来支持旧的FireFox行为，这将非常有用。但不幸的是，你并没有多少时间来为新的Firefox修复你的Web应用，你可以在初始化designMode和contenteditable时插入下面的代码来恢复较早的Firefox行为：

+ +
document.execCommand("defaultParagraphSeparator", false, "br");
+ +

安全性

+ +

出于安全原因，火狐浏览器默认不允许JavaScript代码使用剪贴板相关特性（如复制、粘贴等）。你可以在about:config中设置如下选项来启用它们:

+ +
user_pref("capability.policy.policynames", "allowclipboard");
+user_pref("capability.policy.allowclipboard.sites", "https://www.mozilla.org");
+user_pref("capability.policy.allowclipboard.Clipboard.cutcopy", "allAccess");
+user_pref("capability.policy.allowclipboard.Clipboard.paste", "allAccess");
+ +

例子：一个简单但完整的富文本编辑器

+ +
+
<!doctype html>
+<html>
+<head>
+<title>Rich Text Editor</title>
+<script type="text/javascript">
+var oDoc, sDefTxt;
+
+function initDoc() {
+  oDoc = document.getElementById("textBox");
+  sDefTxt = oDoc.innerHTML;
+  if (document.compForm.switchMode.checked) { setDocMode(true); }
+}
+
+function formatDoc(sCmd, sValue) {
+  if (validateMode()) { document.execCommand(sCmd, false, sValue); oDoc.focus(); }
+}
+
+function validateMode() {
+  if (!document.compForm.switchMode.checked) { return true ; }
+  alert("Uncheck \"Show HTML\".");
+  oDoc.focus();
+  return false;
+}
+
+function setDocMode(bToSource) {
+  var oContent;
+  if (bToSource) {
+    oContent = document.createTextNode(oDoc.innerHTML);
+    oDoc.innerHTML = "";
+    var oPre = document.createElement("pre");
+    oDoc.contentEditable = false;
+    oPre.id = "sourceText";
+    oPre.contentEditable = true;
+    oPre.appendChild(oContent);
+    oDoc.appendChild(oPre);
+    document.execCommand("defaultParagraphSeparator", false, "div");
+  } else {
+    if (document.all) {
+      oDoc.innerHTML = oDoc.innerText;
+    } else {
+      oContent = document.createRange();
+      oContent.selectNodeContents(oDoc.firstChild);
+      oDoc.innerHTML = oContent.toString();
+    }
+    oDoc.contentEditable = true;
+  }
+  oDoc.focus();
+}
+
+function printDoc() {
+  if (!validateMode()) { return; }
+  var oPrntWin = window.open("","_blank","width=450,height=470,left=400,top=100,menubar=yes,toolbar=no,location=no,scrollbars=yes");
+  oPrntWin.document.open();
+  oPrntWin.document.write("<!doctype html><html><head><title>Print<\/title><\/head><body onload=\"print();\">" + oDoc.innerHTML + "<\/body><\/html>");
+  oPrntWin.document.close();
+}
+</script>
+<style type="text/css">
+.intLink { cursor: pointer; }
+img.intLink { border: 0; }
+#toolBar1 select { font-size:10px; }
+#textBox {
+  width: 540px;
+  height: 200px;
+  border: 1px #000000 solid;
+  padding: 12px;
+  overflow: scroll;
+}
+#textBox #sourceText {
+  padding: 0;
+  margin: 0;
+  min-width: 498px;
+  min-height: 200px;
+}
+#editMode label { cursor: pointer; }
+</style>
+</head>
+<body onload="initDoc();">
+<form name="compForm" method="post" action="sample.php" onsubmit="if(validateMode()){this.myDoc.value=oDoc.innerHTML;return true;}return false;">
+<input type="hidden" name="myDoc">
+<div id="toolBar1">
+<select onchange="formatDoc('formatblock',this[this.selectedIndex].value);this.selectedIndex=0;">
+<option selected>- formatting -</option>
+<option value="h1">Title 1 &lt;h1&gt;</option>
+<option value="h2">Title 2 &lt;h2&gt;</option>
+<option value="h3">Title 3 &lt;h3&gt;</option>
+<option value="h4">Title 4 &lt;h4&gt;</option>
+<option value="h5">Title 5 &lt;h5&gt;</option>
+<option value="h6">Subtitle &lt;h6&gt;</option>
+<option value="p">Paragraph &lt;p&gt;</option>
+<option value="pre">Preformatted &lt;pre&gt;</option>
+</select>
+<select onchange="formatDoc('fontname',this[this.selectedIndex].value);this.selectedIndex=0;">
+<option class="heading" selected>- font -</option>
+<option>Arial</option>
+<option>Arial Black</option>
+<option>Courier New</option>
+<option>Times New Roman</option>
+</select>
+<select onchange="formatDoc('fontsize',this[this.selectedIndex].value);this.selectedIndex=0;">
+<option class="heading" selected>- size -</option>
+<option value="1">Very small</option>
+<option value="2">A bit small</option>
+<option value="3">Normal</option>
+<option value="4">Medium-large</option>
+<option value="5">Big</option>
+<option value="6">Very big</option>
+<option value="7">Maximum</option>
+</select>
+<select onchange="formatDoc('forecolor',this[this.selectedIndex].value);this.selectedIndex=0;">
+<option class="heading" selected>- color -</option>
+<option value="red">Red</option>
+<option value="blue">Blue</option>
+<option value="green">Green</option>
+<option value="black">Black</option>
+</select>
+<select onchange="formatDoc('backcolor',this[this.selectedIndex].value);this.selectedIndex=0;">
+<option class="heading" selected>- background -</option>
+<option value="red">Red</option>
+<option value="green">Green</option>
+<option value="black">Black</option>
+</select>
+</div>
+<div id="toolBar2">
+<img class="intLink" title="Clean" onclick="if(validateMode()&&confirm('Are you sure?')){oDoc.innerHTML=sDefTxt};" src="data:image/gif;base64,R0lGODlhFgAWAIQbAD04KTRLYzFRjlldZl9vj1dusY14WYODhpWIbbSVFY6O7IOXw5qbms+wUbCztca0ccS4kdDQjdTLtMrL1O3YitHa7OPcsd/f4PfvrvDv8Pv5xv///////////////////yH5BAEKAB8ALAAAAAAWABYAAAV84CeOZGmeaKqubMteyzK547QoBcFWTm/jgsHq4rhMLoxFIehQQSAWR+Z4IAyaJ0kEgtFoLIzLwRE4oCQWrxoTOTAIhMCZ0tVgMBQKZHAYyFEWEV14eQ8IflhnEHmFDQkAiSkQCI2PDC4QBg+OAJc0ewadNCOgo6anqKkoIQA7" />
+<img class="intLink" title="Print" onclick="printDoc();" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oEBxcZFmGboiwAAAAIdEVYdENvbW1lbnQA9syWvwAAAuFJREFUOMvtlUtsjFEUx//n3nn0YdpBh1abRpt4LFqtqkc3jRKkNEIsiIRIBBEhJJpKlIVo4m1RRMKKjQiRMJRUqUdKPT71qpIpiRKPaqdF55tv5vvusZjQTjOlseUkd3Xu/3dPzusC/22wtu2wRn+jG5So/OCDh8ycMJDflehMlkJkVK7KUYN+ufzA/RttH76zaVocDptRxzQtNi3mRWuPc+6cKtlXZ/sddP2uu9uXlmYXZ6Qm8v4Tz8lhF1H+zDQXt7S8oLMXtbF4e8QaFHjj3kbP2MzkktHpiTjp9VH6iHiA+whtAsX5brpwueMGdONdf/2A4M7ukDs1JW662+XkqTkeUoqjKtOjm2h53YFL15pSJ04Zc94wdtibr26fXlC2mzRvBccEbz2kiRFD414tKMlEZbVGT33+qCoHgha81SWYsew0r1uzfNylmtpx80pngQQ91LwVk2JGvGnfvZG6YcYRAT16GFtW5kKKfo1EQLtfh5Q2etT0BIWF+aitq4fDbk+ImYo1OxvGF03waFJQvBCkvDffRyEtxQiFFYgAZTHS0zwAGD7fG5TNnYNTp8/FzvGwJOfmgG7GOx0SAKKgQgDMgKBI0NJGMEImpGDk5+WACEwEd0ywblhGUZ4Hw5OdUekRBLT7DTgdEgxACsIznx8zpmWh7k4rkpJcuHDxCul6MDsmmBXDlWCH2+XozSgBnzsNCEE4euYV4pwCpsWYPW0UHDYBKSWu1NYjENDReqtKjwn2+zvtTc1vMSTB/mvev/WEYSlASsLimcOhOBJxw+N3aP/SjefNL5GePZmpu4kG7OPr1+tOfPyUu3BecWYKcwQcDFmwFKAUo90fhKDInBCAmvqnyMgqUEagQwCoHBDc1rjv9pIlD8IbVkz6qYViIBQGTJPx4k0XpIgEZoRN1Da0cij4VfR0ta3WvBXH/rjdCufv6R2zPgPH/e4pxSBCpeatqPrjNiso203/5s/zA171Mv8+w1LOAAAAAElFTkSuQmCC">
+<img class="intLink" title="Undo" onclick="formatDoc('undo');" src="data:image/gif;base64,R0lGODlhFgAWAOMKADljwliE33mOrpGjuYKl8aezxqPD+7/I19DV3NHa7P///////////////////////yH5BAEKAA8ALAAAAAAWABYAAARR8MlJq7046807TkaYeJJBnES4EeUJvIGapWYAC0CsocQ7SDlWJkAkCA6ToMYWIARGQF3mRQVIEjkkSVLIbSfEwhdRIH4fh/DZMICe3/C4nBQBADs=" />
+<img class="intLink" title="Redo" onclick="formatDoc('redo');" src="data:image/gif;base64,R0lGODlhFgAWAMIHAB1ChDljwl9vj1iE34Kl8aPD+7/I1////yH5BAEKAAcALAAAAAAWABYAAANKeLrc/jDKSesyphi7SiEgsVXZEATDICqBVJjpqWZt9NaEDNbQK1wCQsxlYnxMAImhyDoFAElJasRRvAZVRqqQXUy7Cgx4TC6bswkAOw==" />
+<img class="intLink" title="Remove formatting" onclick="formatDoc('removeFormat')" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAd0SU1FB9oECQMCKPI8CIIAAAAIdEVYdENvbW1lbnQA9syWvwAAAuhJREFUOMtjYBgFxAB501ZWBvVaL2nHnlmk6mXCJbF69zU+Hz/9fB5O1lx+bg45qhl8/fYr5it3XrP/YWTUvvvk3VeqGXz70TvbJy8+Wv39+2/Hz19/mGwjZzuTYjALuoBv9jImaXHeyD3H7kU8fPj2ICML8z92dlbtMzdeiG3fco7J08foH1kurkm3E9iw54YvKwuTuom+LPt/BgbWf3//sf37/1/c02cCG1lB8f//f95DZx74MTMzshhoSm6szrQ/a6Ir/Z2RkfEjBxuLYFpDiDi6Af///2ckaHBp7+7wmavP5n76+P2ClrLIYl8H9W36auJCbCxM4szMTJac7Kza////R3H1w2cfWAgafPbqs5g7D95++/P1B4+ECK8tAwMDw/1H7159+/7r7ZcvPz4fOHbzEwMDwx8GBgaGnNatfHZx8zqrJ+4VJBh5CQEGOySEua/v3n7hXmqI8WUGBgYGL3vVG7fuPK3i5GD9/fja7ZsMDAzMG/Ze52mZeSj4yu1XEq/ff7W5dvfVAS1lsXc4Db7z8C3r8p7Qjf///2dnZGxlqJuyr3rPqQd/Hhyu7oSpYWScylDQsd3kzvnH738wMDzj5GBN1VIWW4c3KDon7VOvm7S3paB9u5qsU5/x5KUnlY+eexQbkLNsErK61+++VnAJcfkyMTIwffj0QwZbJDKjcETs1Y8evyd48toz8y/ffzv//vPP4veffxpX77z6l5JewHPu8MqTDAwMDLzyrjb/mZm0JcT5Lj+89+Ybm6zz95oMh7s4XbygN3Sluq4Mj5K8iKMgP4f0////fv77//8nLy+7MCcXmyYDAwODS9jM9tcvPypd35pne3ljdjvj26+H2dhYpuENikgfvQeXNmSl3tqepxXsqhXPyc666s+fv1fMdKR3TK72zpix8nTc7bdfhfkEeVbC9KhbK/9iYWHiErbu6MWbY/7//8/4//9/pgOnH6jGVazvFDRtq2VgiBIZrUTIBgCk+ivHvuEKwAAAAABJRU5ErkJggg==">
+<img class="intLink" title="Bold" onclick="formatDoc('bold');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAInhI+pa+H9mJy0LhdgtrxzDG5WGFVk6aXqyk6Y9kXvKKNuLbb6zgMFADs=" />
+<img class="intLink" title="Italic" onclick="formatDoc('italic');" src="data:image/gif;base64,R0lGODlhFgAWAKEDAAAAAF9vj5WIbf///yH5BAEAAAMALAAAAAAWABYAAAIjnI+py+0Po5x0gXvruEKHrF2BB1YiCWgbMFIYpsbyTNd2UwAAOw==" />
+<img class="intLink" title="Underline" onclick="formatDoc('underline');" src="data:image/gif;base64,R0lGODlhFgAWAKECAAAAAF9vj////////yH5BAEAAAIALAAAAAAWABYAAAIrlI+py+0Po5zUgAsEzvEeL4Ea15EiJJ5PSqJmuwKBEKgxVuXWtun+DwxCCgA7" />
+<img class="intLink" title="Left align" onclick="formatDoc('justifyleft');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIghI+py+0Po5y02ouz3jL4D4JMGELkGYxo+qzl4nKyXAAAOw==" />
+<img class="intLink" title="Center align" onclick="formatDoc('justifycenter');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIfhI+py+0Po5y02ouz3jL4D4JOGI7kaZ5Bqn4sycVbAQA7" />
+<img class="intLink" title="Right align" onclick="formatDoc('justifyright');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIghI+py+0Po5y02ouz3jL4D4JQGDLkGYxouqzl43JyVgAAOw==" />
+<img class="intLink" title="Numbered list" onclick="formatDoc('insertorderedlist');" src="data:image/gif;base64,R0lGODlhFgAWAMIGAAAAADljwliE35GjuaezxtHa7P///////yH5BAEAAAcALAAAAAAWABYAAAM2eLrc/jDKSespwjoRFvggCBUBoTFBeq6QIAysQnRHaEOzyaZ07Lu9lUBnC0UGQU1K52s6n5oEADs=" />
+<img class="intLink" title="Dotted list" onclick="formatDoc('insertunorderedlist');" src="data:image/gif;base64,R0lGODlhFgAWAMIGAAAAAB1ChF9vj1iE33mOrqezxv///////yH5BAEAAAcALAAAAAAWABYAAAMyeLrc/jDKSesppNhGRlBAKIZRERBbqm6YtnbfMY7lud64UwiuKnigGQliQuWOyKQykgAAOw==" />
+<img class="intLink" title="Quote" onclick="formatDoc('formatblock','blockquote');" src="data:image/gif;base64,R0lGODlhFgAWAIQXAC1NqjFRjkBgmT9nqUJnsk9xrFJ7u2R9qmKBt1iGzHmOrm6Sz4OXw3Odz4Cl2ZSnw6KxyqO306K63bG70bTB0rDI3bvI4P///////////////////////////////////yH5BAEKAB8ALAAAAAAWABYAAAVP4CeOZGmeaKqubEs2CekkErvEI1zZuOgYFlakECEZFi0GgTGKEBATFmJAVXweVOoKEQgABB9IQDCmrLpjETrQQlhHjINrTq/b7/i8fp8PAQA7" />
+<img class="intLink" title="Delete indentation" onclick="formatDoc('outdent');" src="data:image/gif;base64,R0lGODlhFgAWAMIHAAAAADljwliE35GjuaezxtDV3NHa7P///yH5BAEAAAcALAAAAAAWABYAAAM2eLrc/jDKCQG9F2i7u8agQgyK1z2EIBil+TWqEMxhMczsYVJ3e4ahk+sFnAgtxSQDqWw6n5cEADs=" />
+<img class="intLink" title="Add indentation" onclick="formatDoc('indent');" src="data:image/gif;base64,R0lGODlhFgAWAOMIAAAAADljwl9vj1iE35GjuaezxtDV3NHa7P///////////////////////////////yH5BAEAAAgALAAAAAAWABYAAAQ7EMlJq704650B/x8gemMpgugwHJNZXodKsO5oqUOgo5KhBwWESyMQsCRDHu9VOyk5TM9zSpFSr9gsJwIAOw==" />
+<img class="intLink" title="Hyperlink" onclick="var sLnk=prompt('Write the URL here','http:\/\/');if(sLnk&&sLnk!=''&&sLnk!='http://'){formatDoc('createlink',sLnk)}" src="data:image/gif;base64,R0lGODlhFgAWAOMKAB1ChDRLY19vj3mOrpGjuaezxrCztb/I19Ha7Pv8/f///////////////////////yH5BAEKAA8ALAAAAAAWABYAAARY8MlJq7046827/2BYIQVhHg9pEgVGIklyDEUBy/RlE4FQF4dCj2AQXAiJQDCWQCAEBwIioEMQBgSAFhDAGghGi9XgHAhMNoSZgJkJei33UESv2+/4vD4TAQA7" />
+<img class="intLink" title="Cut" onclick="formatDoc('cut');" src="data:image/gif;base64,R0lGODlhFgAWAIQSAB1ChBFNsRJTySJYwjljwkxwl19vj1dusYODhl6MnHmOrpqbmpGjuaezxrCztcDCxL/I18rL1P///////////////////////////////////////////////////////yH5BAEAAB8ALAAAAAAWABYAAAVu4CeOZGmeaKqubDs6TNnEbGNApNG0kbGMi5trwcA9GArXh+FAfBAw5UexUDAQESkRsfhJPwaH4YsEGAAJGisRGAQY7UCC9ZAXBB+74LGCRxIEHwAHdWooDgGJcwpxDisQBQRjIgkDCVlfmZqbmiEAOw==" />
+<img class="intLink" title="Copy" onclick="formatDoc('copy');" src="data:image/gif;base64,R0lGODlhFgAWAIQcAB1ChBFNsTRLYyJYwjljwl9vj1iE31iGzF6MnHWX9HOdz5GjuYCl2YKl8ZOt4qezxqK63aK/9KPD+7DI3b/I17LM/MrL1MLY9NHa7OPs++bx/Pv8/f///////////////yH5BAEAAB8ALAAAAAAWABYAAAWG4CeOZGmeaKqubOum1SQ/kPVOW749BeVSus2CgrCxHptLBbOQxCSNCCaF1GUqwQbBd0JGJAyGJJiobE+LnCaDcXAaEoxhQACgNw0FQx9kP+wmaRgYFBQNeAoGihCAJQsCkJAKOhgXEw8BLQYciooHf5o7EA+kC40qBKkAAAGrpy+wsbKzIiEAOw==" />
+<img class="intLink" title="Paste" onclick="formatDoc('paste');" src="data:image/gif;base64,R0lGODlhFgAWAIQUAD04KTRLY2tXQF9vj414WZWIbXmOrpqbmpGjudClFaezxsa0cb/I1+3YitHa7PrkIPHvbuPs+/fvrvv8/f///////////////////////////////////////////////yH5BAEAAB8ALAAAAAAWABYAAAWN4CeOZGmeaKqubGsusPvBSyFJjVDs6nJLB0khR4AkBCmfsCGBQAoCwjF5gwquVykSFbwZE+AwIBV0GhFog2EwIDchjwRiQo9E2Fx4XD5R+B0DDAEnBXBhBhN2DgwDAQFjJYVhCQYRfgoIDGiQJAWTCQMRiwwMfgicnVcAAAMOaK+bLAOrtLUyt7i5uiUhADs=" />
+</div>
+<div id="textBox" contenteditable="true"><p>Lorem ipsum</p></div>
+<p id="editMode"><input type="checkbox" name="switchMode" id="switchBox" onchange="setDocMode(this.checked);" /> <label for="switchBox">Show HTML</label></p>
+<p><input type="submit" value="Send" /></p>
+</form>
+</body>
+</html>
+
+
+ +
注意: 如果你想知道如何标准的在你的页面中创建和插入编辑器，请查阅 更多完整的富文本编辑器例子.
+ +

相关链接

+ + diff --git a/files/zh-cn/web/guide/html/editable_content/rich-text_editing_in_mozilla/index.html b/files/zh-cn/web/guide/html/editable_content/rich-text_editing_in_mozilla/index.html new file mode 100644 index 0000000000..f237e94b61 --- /dev/null +++ b/files/zh-cn/web/guide/html/editable_content/rich-text_editing_in_mozilla/index.html @@ -0,0 +1,272 @@ +--- +title: Mozilla中的富文本编辑器 +slug: Web/Guide/HTML/Content_Editable/Rich-Text_Editing_in_Mozilla +tags: + - 富文本 + - 指南 +translation_of: Web/Guide/HTML/Editable_content/Rich-Text_Editing_in_Mozilla +--- +

Mozilla 1.3 实现了微软 IE 浏览器的 designMode 特性。Mozilla 1.3 的富文本编辑器支持的 designMode 特性能将 HTML 文档转换为富文本编辑器。从 Firefox 3 开始，Mozilla 也支持 IE 的 contentEditable 属性，该属性允许将任意元素设置为可编辑或不可编辑的（后者可阻止在可编辑环境中，对固定元素的改变）。

+ +

配置富文本编辑

+ +

富文本编辑通过设置文档的 "designMode" 属性为 "On" 来初始化。一旦 designMode 设置为 "On" ，该文档即成为用户能够按使用 textarea 方式操作的富文本编辑区域。复制和粘贴等最基础的键盘操作可用，而其它命令则需通过站点实现。

+ +

类似地，将 "contentEditable" 属性设置为 "true" 后，用户能够将文档中的独立元素设置为可编辑的。

+ +

执行命令

+ +

当 HTML 文档切换至 designMode 时，文档对象将暴露出 "document.execCommand" 方法，允许用户运行命令以操作可编辑区域的内容。多数命令影响文档的选中区域（加粗、斜体等），而其余命令则可插入新元素（添加新行）或影响整行（缩进）。当使用 contentEditable 时，调用 execCommand 将影响当前活跃的可编辑元素。

+ +

与 IE 区别

+ +

Mozilla 与 IE 在 designMode 下的一个显著区别在于可编辑区域中所生成的代码。在 IE 中使用 em 与 i 等 HTML 标签，而 Mozilla 则默认生成带有内联样式规则的 span 标签。可通过 styleWithCSS 命令以在 CSS 与 HTML 标记中切换。

+ +

Figure 1 : 生成 HTML 的区别

+ +

Mozilla:

+ +
<span style="font-weight: bold;">I love geckos.</span>
+<span style="font-weight: bold; font-style: italic;
+    text-decoration: underline;">Dinosaurs are big.</span>
+ +

Internet Explorer:

+ +
<STRONG>I love geckos.</STRONG>
+<STRONG><EM><U>Dinosaurs are big.</U></EM></STRONG>
+
+ +

Mozilla 与 IE 的另一个区别是在与 designMode 结合使用的场景中，其访问 iframe 中文档对象的方式。Mozilla 使用了 W3C 的标准方式，即 IFrameElement.contentDocument，而 IE 则使用了 IFrameElement.document.

+ +

DevEdge 提供了一个 JavaScript 辅助工具类，xbDesignMode，它封装了 IE 与 Mozilla 之间的 designMode 差异特性。

+ +


+ 禁用事件处理

+ +

另一额外的区别在于，Mozilla 中一旦切换至 designMode，那么该文档上绑定的全部事件将被禁用。在 designMode 关闭后（如在 Mozilla 1.5 中可用），事件重新可用。

+ +

在 Migrate apps from Internet Explorer to Mozilla 中的 Rich text editing 章节可查看更多信息。

+ +

示例

+ +

示例 1

+ +

第一个示例中，将 HTML 文档中的 designMode 设置为 "On"。在 Mozilla 1.3 中这将使整篇文档均可编辑。但在 IE 中并不支持通过 JavaScript 改变文档的 designMode 特性。需要兼容 IE 时，body 标签中的 contentEditable 属性需要设置为 "true"。

+ +

Figure 2 : 第一个示例

+ +
HTML:
+<body contentEditable="true" onload="load()">
+
+JavaScript:
+function load(){
+  window.document.designMode = "On";
+}
+ +

示例 2

+ +

第二个示例是一个支持文本加粗、斜体、下划线，以及添加链接、改变文本颜色等特性的富文本编辑页面。示例页面带有一个作为富文本编辑区域的 iframe 区域，以及用于实现基础编辑命令的加粗、斜体、文本颜色等编辑元素。

+ +

Figure 3 : 配置富文本编辑

+ +
HTML:
+<body onload="load()">
+
+JavaScript:
+function load(){
+  getIFrameDocument("editorWindow").designMode = "On";
+}
+//获取对象
+function getIFrameDocument(aID){
+  // if contentDocument exists, W3C compliant (Mozilla)
+  if (document.getElementById(aID).contentDocument){
+    return document.getElementById(aID).contentDocument;
+  } else {
+    // IE
+    return document.frames[aID].document;
+  }
+}
+
+ +

该示例包含了 doRichEditCommand 函数以简化对 iframe 的命令操作，并保持 HTML 代码的整洁。执行所需命令的函数使用了 execCommand() 并将焦点设回可编辑文档，以避免点击按钮等操作时的焦点设置打断编辑流程。

+ +

Figure 4 : 执行富文本编辑命令

+ +
HTML:
+<button onclick="doRichEditCommand('bold')" style="font-weight:bold;">B</button>
+
+JavaScript:
+function doRichEditCommand(aName, aArg){
+  getIFrameDocument('editorWindow').execCommand(aName,false, aArg);
+  document.getElementById('editorWindow').contentWindow.focus()
+}
+ +

示例：一个简易但完整的富文本编辑器

+ +
<!doctype html>
+<html>
+<head>
+<title>Rich Text Editor</title>
+<script type="text/javascript">
+var oDoc, sDefTxt;
+
+function initDoc() {
+  oDoc = document.getElementById("textBox");
+  sDefTxt = oDoc.innerHTML;
+  if (document.compForm.switchMode.checked) { setDocMode(true); }
+}
+
+function formatDoc(sCmd, sValue) {
+  if (validateMode()) { document.execCommand(sCmd, false, sValue); oDoc.focus(); }
+}
+
+function validateMode() {
+  if (!document.compForm.switchMode.checked) { return true ; }
+  alert("Uncheck \"Show HTML\".");
+  oDoc.focus();
+  return false;
+}
+
+function setDocMode(bToSource) {
+  var oContent;
+  if (bToSource) {
+    oContent = document.createTextNode(oDoc.innerHTML);
+    oDoc.innerHTML = "";
+    var oPre = document.createElement("pre");
+    oDoc.contentEditable = false;
+    oPre.id = "sourceText";
+    oPre.contentEditable = true;
+    oPre.appendChild(oContent);
+    oDoc.appendChild(oPre);
+  } else {
+    if (document.all) {
+      oDoc.innerHTML = oDoc.innerText;
+    } else {
+      oContent = document.createRange();
+      oContent.selectNodeContents(oDoc.firstChild);
+      oDoc.innerHTML = oContent.toString();
+    }
+    oDoc.contentEditable = true;
+  }
+  oDoc.focus();
+}
+
+function printDoc() {
+  if (!validateMode()) { return; }
+  var oPrntWin = window.open("","_blank","width=450,height=470,left=400,top=100,menubar=yes,toolbar=no,location=no,scrollbars=yes");
+  oPrntWin.document.open();
+  oPrntWin.document.write("<!doctype html><html><head><title>Print<\/title><\/head><body onload=\"print();\">" + oDoc.innerHTML + "<\/body><\/html>");
+  oPrntWin.document.close();
+}
+</script>
+<style type="text/css">
+.intLink { cursor: pointer; }
+img.intLink { border: 0; }
+#toolBar1 select { font-size:10px; }
+#textBox {
+  width: 540px;
+  height: 200px;
+  border: 1px #000000 solid;
+  padding: 12px;
+  overflow: scroll;
+}
+#textBox #sourceText {
+  padding: 0;
+  margin: 0;
+  min-width: 498px;
+  min-height: 200px;
+}
+#editMode label { cursor: pointer; }
+</style>
+</head>
+<body onload="initDoc();">
+<form name="compForm" method="post" action="sample.php" onsubmit="if(validateMode()){this.myDoc.value=oDoc.innerHTML;return true;}return false;">
+<input type="hidden" name="myDoc">
+<div id="toolBar1">
+<select onchange="formatDoc('formatblock',this[this.selectedIndex].value);this.selectedIndex=0;">
+<option selected>- formatting -</option>
+<option value="h1">Title 1 &lt;h1&gt;</option>
+<option value="h2">Title 2 &lt;h2&gt;</option>
+<option value="h3">Title 3 &lt;h3&gt;</option>
+<option value="h4">Title 4 &lt;h4&gt;</option>
+<option value="h5">Title 5 &lt;h5&gt;</option>
+<option value="h6">Subtitle &lt;h6&gt;</option>
+<option value="p">Paragraph &lt;p&gt;</option>
+<option value="pre">Preformatted &lt;pre&gt;</option>
+</select>
+<select onchange="formatDoc('fontname',this[this.selectedIndex].value);this.selectedIndex=0;">
+<option class="heading" selected>- font -</option>
+<option>Arial</option>
+<option>Arial Black</option>
+<option>Courier New</option>
+<option>Times New Roman</option>
+</select>
+<select onchange="formatDoc('fontsize',this[this.selectedIndex].value);this.selectedIndex=0;">
+<option class="heading" selected>- size -</option>
+<option value="1">Very small</option>
+<option value="2">A bit small</option>
+<option value="3">Normal</option>
+<option value="4">Medium-large</option>
+<option value="5">Big</option>
+<option value="6">Very big</option>
+<option value="7">Maximum</option>
+</select>
+<select onchange="formatDoc('forecolor',this[this.selectedIndex].value);this.selectedIndex=0;">
+<option class="heading" selected>- color -</option>
+<option value="red">Red</option>
+<option value="blue">Blue</option>
+<option value="green">Green</option>
+<option value="black">Black</option>
+</select>
+<select onchange="formatDoc('backcolor',this[this.selectedIndex].value);this.selectedIndex=0;">
+<option class="heading" selected>- background -</option>
+<option value="red">Red</option>
+<option value="green">Green</option>
+<option value="black">Black</option>
+</select>
+</div>
+<div id="toolBar2">
+<img class="intLink" title="Clean" onclick="if(validateMode()&&confirm('Are you sure?')){oDoc.innerHTML=sDefTxt};" src="data:image/gif;base64,R0lGODlhFgAWAIQbAD04KTRLYzFRjlldZl9vj1dusY14WYODhpWIbbSVFY6O7IOXw5qbms+wUbCztca0ccS4kdDQjdTLtMrL1O3YitHa7OPcsd/f4PfvrvDv8Pv5xv///////////////////yH5BAEKAB8ALAAAAAAWABYAAAV84CeOZGmeaKqubMteyzK547QoBcFWTm/jgsHq4rhMLoxFIehQQSAWR+Z4IAyaJ0kEgtFoLIzLwRE4oCQWrxoTOTAIhMCZ0tVgMBQKZHAYyFEWEV14eQ8IflhnEHmFDQkAiSkQCI2PDC4QBg+OAJc0ewadNCOgo6anqKkoIQA7" />
+<img class="intLink" title="Print" onclick="printDoc();" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oEBxcZFmGboiwAAAAIdEVYdENvbW1lbnQA9syWvwAAAuFJREFUOMvtlUtsjFEUx//n3nn0YdpBh1abRpt4LFqtqkc3jRKkNEIsiIRIBBEhJJpKlIVo4m1RRMKKjQiRMJRUqUdKPT71qpIpiRKPaqdF55tv5vvusZjQTjOlseUkd3Xu/3dPzusC/22wtu2wRn+jG5So/OCDh8ycMJDflehMlkJkVK7KUYN+ufzA/RttH76zaVocDptRxzQtNi3mRWuPc+6cKtlXZ/sddP2uu9uXlmYXZ6Qm8v4Tz8lhF1H+zDQXt7S8oLMXtbF4e8QaFHjj3kbP2MzkktHpiTjp9VH6iHiA+whtAsX5brpwueMGdONdf/2A4M7ukDs1JW662+XkqTkeUoqjKtOjm2h53YFL15pSJ04Zc94wdtibr26fXlC2mzRvBccEbz2kiRFD414tKMlEZbVGT33+qCoHgha81SWYsew0r1uzfNylmtpx80pngQQ91LwVk2JGvGnfvZG6YcYRAT16GFtW5kKKfo1EQLtfh5Q2etT0BIWF+aitq4fDbk+ImYo1OxvGF03waFJQvBCkvDffRyEtxQiFFYgAZTHS0zwAGD7fG5TNnYNTp8/FzvGwJOfmgG7GOx0SAKKgQgDMgKBI0NJGMEImpGDk5+WACEwEd0ywblhGUZ4Hw5OdUekRBLT7DTgdEgxACsIznx8zpmWh7k4rkpJcuHDxCul6MDsmmBXDlWCH2+XozSgBnzsNCEE4euYV4pwCpsWYPW0UHDYBKSWu1NYjENDReqtKjwn2+zvtTc1vMSTB/mvev/WEYSlASsLimcOhOBJxw+N3aP/SjefNL5GePZmpu4kG7OPr1+tOfPyUu3BecWYKcwQcDFmwFKAUo90fhKDInBCAmvqnyMgqUEagQwCoHBDc1rjv9pIlD8IbVkz6qYViIBQGTJPx4k0XpIgEZoRN1Da0cij4VfR0ta3WvBXH/rjdCufv6R2zPgPH/e4pxSBCpeatqPrjNiso203/5s/zA171Mv8+w1LOAAAAAElFTkSuQmCC">
+<img class="intLink" title="Undo" onclick="formatDoc('undo');" src="data:image/gif;base64,R0lGODlhFgAWAOMKADljwliE33mOrpGjuYKl8aezxqPD+7/I19DV3NHa7P///////////////////////yH5BAEKAA8ALAAAAAAWABYAAARR8MlJq7046807TkaYeJJBnES4EeUJvIGapWYAC0CsocQ7SDlWJkAkCA6ToMYWIARGQF3mRQVIEjkkSVLIbSfEwhdRIH4fh/DZMICe3/C4nBQBADs=" />
+<img class="intLink" title="Redo" onclick="formatDoc('redo');" src="data:image/gif;base64,R0lGODlhFgAWAMIHAB1ChDljwl9vj1iE34Kl8aPD+7/I1////yH5BAEKAAcALAAAAAAWABYAAANKeLrc/jDKSesyphi7SiEgsVXZEATDICqBVJjpqWZt9NaEDNbQK1wCQsxlYnxMAImhyDoFAElJasRRvAZVRqqQXUy7Cgx4TC6bswkAOw==" />
+<img class="intLink" title="Remove formatting" onclick="formatDoc('removeFormat')" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAd0SU1FB9oECQMCKPI8CIIAAAAIdEVYdENvbW1lbnQA9syWvwAAAuhJREFUOMtjYBgFxAB501ZWBvVaL2nHnlmk6mXCJbF69zU+Hz/9fB5O1lx+bg45qhl8/fYr5it3XrP/YWTUvvvk3VeqGXz70TvbJy8+Wv39+2/Hz19/mGwjZzuTYjALuoBv9jImaXHeyD3H7kU8fPj2ICML8z92dlbtMzdeiG3fco7J08foH1kurkm3E9iw54YvKwuTuom+LPt/BgbWf3//sf37/1/c02cCG1lB8f//f95DZx74MTMzshhoSm6szrQ/a6Ir/Z2RkfEjBxuLYFpDiDi6Af///2ckaHBp7+7wmavP5n76+P2ClrLIYl8H9W36auJCbCxM4szMTJac7Kza////R3H1w2cfWAgafPbqs5g7D95++/P1B4+ECK8tAwMDw/1H7159+/7r7ZcvPz4fOHbzEwMDwx8GBgaGnNatfHZx8zqrJ+4VJBh5CQEGOySEua/v3n7hXmqI8WUGBgYGL3vVG7fuPK3i5GD9/fja7ZsMDAzMG/Ze52mZeSj4yu1XEq/ff7W5dvfVAS1lsXc4Db7z8C3r8p7Qjf///2dnZGxlqJuyr3rPqQd/Hhyu7oSpYWScylDQsd3kzvnH738wMDzj5GBN1VIWW4c3KDon7VOvm7S3paB9u5qsU5/x5KUnlY+eexQbkLNsErK61+++VnAJcfkyMTIwffj0QwZbJDKjcETs1Y8evyd48toz8y/ffzv//vPP4veffxpX77z6l5JewHPu8MqTDAwMDLzyrjb/mZm0JcT5Lj+89+Ybm6zz95oMh7s4XbygN3Sluq4Mj5K8iKMgP4f0////fv77//8nLy+7MCcXmyYDAwODS9jM9tcvPypd35pne3ljdjvj26+H2dhYpuENikgfvQeXNmSl3tqepxXsqhXPyc666s+fv1fMdKR3TK72zpix8nTc7bdfhfkEeVbC9KhbK/9iYWHiErbu6MWbY/7//8/4//9/pgOnH6jGVazvFDRtq2VgiBIZrUTIBgCk+ivHvuEKwAAAAABJRU5ErkJggg==">
+<img class="intLink" title="Bold" onclick="formatDoc('bold');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAInhI+pa+H9mJy0LhdgtrxzDG5WGFVk6aXqyk6Y9kXvKKNuLbb6zgMFADs=" />
+<img class="intLink" title="Italic" onclick="formatDoc('italic');" src="data:image/gif;base64,R0lGODlhFgAWAKEDAAAAAF9vj5WIbf///yH5BAEAAAMALAAAAAAWABYAAAIjnI+py+0Po5x0gXvruEKHrF2BB1YiCWgbMFIYpsbyTNd2UwAAOw==" />
+<img class="intLink" title="Underline" onclick="formatDoc('underline');" src="data:image/gif;base64,R0lGODlhFgAWAKECAAAAAF9vj////////yH5BAEAAAIALAAAAAAWABYAAAIrlI+py+0Po5zUgAsEzvEeL4Ea15EiJJ5PSqJmuwKBEKgxVuXWtun+DwxCCgA7" />
+<img class="intLink" title="Left align" onclick="formatDoc('justifyleft');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIghI+py+0Po5y02ouz3jL4D4JMGELkGYxo+qzl4nKyXAAAOw==" />
+<img class="intLink" title="Center align" onclick="formatDoc('justifycenter');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIfhI+py+0Po5y02ouz3jL4D4JOGI7kaZ5Bqn4sycVbAQA7" />
+<img class="intLink" title="Right align" onclick="formatDoc('justifyright');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIghI+py+0Po5y02ouz3jL4D4JQGDLkGYxouqzl43JyVgAAOw==" />
+<img class="intLink" title="Numbered list" onclick="formatDoc('insertorderedlist');" src="data:image/gif;base64,R0lGODlhFgAWAMIGAAAAADljwliE35GjuaezxtHa7P///////yH5BAEAAAcALAAAAAAWABYAAAM2eLrc/jDKSespwjoRFvggCBUBoTFBeq6QIAysQnRHaEOzyaZ07Lu9lUBnC0UGQU1K52s6n5oEADs=" />
+<img class="intLink" title="Dotted list" onclick="formatDoc('insertunorderedlist');" src="data:image/gif;base64,R0lGODlhFgAWAMIGAAAAAB1ChF9vj1iE33mOrqezxv///////yH5BAEAAAcALAAAAAAWABYAAAMyeLrc/jDKSesppNhGRlBAKIZRERBbqm6YtnbfMY7lud64UwiuKnigGQliQuWOyKQykgAAOw==" />
+<img class="intLink" title="Quote" onclick="formatDoc('formatblock','blockquote');" src="data:image/gif;base64,R0lGODlhFgAWAIQXAC1NqjFRjkBgmT9nqUJnsk9xrFJ7u2R9qmKBt1iGzHmOrm6Sz4OXw3Odz4Cl2ZSnw6KxyqO306K63bG70bTB0rDI3bvI4P///////////////////////////////////yH5BAEKAB8ALAAAAAAWABYAAAVP4CeOZGmeaKqubEs2CekkErvEI1zZuOgYFlakECEZFi0GgTGKEBATFmJAVXweVOoKEQgABB9IQDCmrLpjETrQQlhHjINrTq/b7/i8fp8PAQA7" />
+<img class="intLink" title="Add indentation" onclick="formatDoc('outdent');" src="data:image/gif;base64,R0lGODlhFgAWAMIHAAAAADljwliE35GjuaezxtDV3NHa7P///yH5BAEAAAcALAAAAAAWABYAAAM2eLrc/jDKCQG9F2i7u8agQgyK1z2EIBil+TWqEMxhMczsYVJ3e4ahk+sFnAgtxSQDqWw6n5cEADs=" />
+<img class="intLink" title="Delete indentation" onclick="formatDoc('indent');" src="data:image/gif;base64,R0lGODlhFgAWAOMIAAAAADljwl9vj1iE35GjuaezxtDV3NHa7P///////////////////////////////yH5BAEAAAgALAAAAAAWABYAAAQ7EMlJq704650B/x8gemMpgugwHJNZXodKsO5oqUOgo5KhBwWESyMQsCRDHu9VOyk5TM9zSpFSr9gsJwIAOw==" />
+<img class="intLink" title="Hyperlink" onclick="var sLnk=prompt('Write the URL here','http:\/\/');if(sLnk&&sLnk!=''&&sLnk!='http://'){formatDoc('createlink',sLnk)}" src="data:image/gif;base64,R0lGODlhFgAWAOMKAB1ChDRLY19vj3mOrpGjuaezxrCztb/I19Ha7Pv8/f///////////////////////yH5BAEKAA8ALAAAAAAWABYAAARY8MlJq7046827/2BYIQVhHg9pEgVGIklyDEUBy/RlE4FQF4dCj2AQXAiJQDCWQCAEBwIioEMQBgSAFhDAGghGi9XgHAhMNoSZgJkJei33UESv2+/4vD4TAQA7" />
+<img class="intLink" title="Cut" onclick="formatDoc('cut');" src="data:image/gif;base64,R0lGODlhFgAWAIQSAB1ChBFNsRJTySJYwjljwkxwl19vj1dusYODhl6MnHmOrpqbmpGjuaezxrCztcDCxL/I18rL1P///////////////////////////////////////////////////////yH5BAEAAB8ALAAAAAAWABYAAAVu4CeOZGmeaKqubDs6TNnEbGNApNG0kbGMi5trwcA9GArXh+FAfBAw5UexUDAQESkRsfhJPwaH4YsEGAAJGisRGAQY7UCC9ZAXBB+74LGCRxIEHwAHdWooDgGJcwpxDisQBQRjIgkDCVlfmZqbmiEAOw==" />
+<img class="intLink" title="Copy" onclick="formatDoc('copy');" src="data:image/gif;base64,R0lGODlhFgAWAIQcAB1ChBFNsTRLYyJYwjljwl9vj1iE31iGzF6MnHWX9HOdz5GjuYCl2YKl8ZOt4qezxqK63aK/9KPD+7DI3b/I17LM/MrL1MLY9NHa7OPs++bx/Pv8/f///////////////yH5BAEAAB8ALAAAAAAWABYAAAWG4CeOZGmeaKqubOum1SQ/kPVOW749BeVSus2CgrCxHptLBbOQxCSNCCaF1GUqwQbBd0JGJAyGJJiobE+LnCaDcXAaEoxhQACgNw0FQx9kP+wmaRgYFBQNeAoGihCAJQsCkJAKOhgXEw8BLQYciooHf5o7EA+kC40qBKkAAAGrpy+wsbKzIiEAOw==" />
+<img class="intLink" title="Paste" onclick="formatDoc('paste');" src="data:image/gif;base64,R0lGODlhFgAWAIQUAD04KTRLY2tXQF9vj414WZWIbXmOrpqbmpGjudClFaezxsa0cb/I1+3YitHa7PrkIPHvbuPs+/fvrvv8/f///////////////////////////////////////////////yH5BAEAAB8ALAAAAAAWABYAAAWN4CeOZGmeaKqubGsusPvBSyFJjVDs6nJLB0khR4AkBCmfsCGBQAoCwjF5gwquVykSFbwZE+AwIBV0GhFog2EwIDchjwRiQo9E2Fx4XD5R+B0DDAEnBXBhBhN2DgwDAQFjJYVhCQYRfgoIDGiQJAWTCQMRiwwMfgicnVcAAAMOaK+bLAOrtLUyt7i5uiUhADs=" />
+</div>
+<div id="textBox" contenteditable="true"><p>Lorem ipsum</p></div>
+<p id="editMode"><input type="checkbox" name="switchMode" id="switchBox" onchange="setDocMode(this.checked);" /> <label for="switchBox">Show HTML</label></p>
+<p><input type="submit" value="Send" /></p>
+</form>
+</body>
+</html>
+ + + +

注意： 如果你想查看如何将创建与插入编辑器至页面的流程标准化的内容，请查看 more complete rich-text editor example.

+ +

相关资源

+ + diff --git a/files/zh-cn/web/guide/html/email_links/index.html b/files/zh-cn/web/guide/html/email_links/index.html deleted file mode 100644 index fd51ef502f..0000000000 --- a/files/zh-cn/web/guide/html/email_links/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: Email links -slug: Web/Guide/HTML/Email_links -tags: - - HTML5 - - SEO - - a - - email link - - mailto -translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#E-mail_links -translation_of_original: Web/Guide/HTML/Email_links ---- -

这往往是有益的Web站点能够创建链接或按钮，点击后，打开一个新的出站电子邮件。例如，这可能会创造一个“联系我们”按钮时使用。这是使用完成{{HTMLElement("a")}} 元素和mailto URL方案。.

- -

Mailto 基础

- -

以它最基础和最常用的形式，一个mailto链接仅简单的指明目标收件人的邮箱地址。例如：

- -
<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>
-
-Complete examples detail:
-
-<a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com
-&amp;subject=The%20subject%20of%20the%20email
-&amp;body=The%20body%20of%20the%20email">
-Send mail with cc, bcc, subject and body</a>
- - - -

这导致链接看起来像这样: Send email to nowhere.

- -

事实上, 目标收件人邮件地址都是可选的。 如果你不添加它 (也就是，你的{{htmlattrxref("href", "a")}} 是简单的 "mailto:")，用户的邮件客户端将打开一个新的外发电子邮件窗口，该窗口尚未指定目标地址。这通常非常有用，因为用户可以单击“共享”链接以将电子邮件发送到他们选择的地址。

- -

指定细节

- -

除了电子邮件地址，您还可以提供其他信息。事实上, 任何标准的邮件头字段都可以添加到您提供的mailto URL中。 最广泛使用的是： "subject", "cc", and "body" (这不是真正的标题字段，但允许您为新电子邮件指定简短内容消息). 每个字段及其值都被指定为一个查询字词（query term）。

- -
-
-
译者注：
-
- - -
- -
-

Note: 每个字段的值都必须进行编码  (也就是, 带有非印刷字符和空格 percent-escaped).

-
- -

样品mailto 网址

- -

这有一些有关 mailto 的示例链接:

- - - -

请注意，使用＆符号来分隔mailto URL中的每个字段。这是标准的URL查询表示法。

- -

例子

- -

如果您想创建一封要求订阅新闻通讯的外发电子邮件, 您可能会使用一个 mailto链接，像这样:

- -
<a href="mailto:nowhere@mozilla.org?subject=Newsletter%20subscription%20request&body=Please%20subscribe%20me%20to%20your%20newsletter!%0A%0AFull%20name%3A%0A%0AWhere%20did%20you%20hear%20about%20us%3F">
-Subscribe to our newsletter
-</a>
- -

结果链接看起来像这样: Subscribe to our newsletter.

- - diff --git a/files/zh-cn/web/guide/html/forms_in_html/index.html b/files/zh-cn/web/guide/html/forms_in_html/index.html deleted file mode 100644 index 24a27db5b5..0000000000 --- a/files/zh-cn/web/guide/html/forms_in_html/index.html +++ /dev/null @@ -1,144 +0,0 @@ ---- -title: HTML 中的表单 -slug: Web/Guide/HTML/Forms_in_HTML -tags: - - HTML5 - - HTML5 form updates - - form -translation_of: Learn/HTML/Forms/HTML5_updates ---- -
HTML5中的表单元素和属性提供了比HTML4更多的语义标记，并取消了大量的在HTML4不可缺少的脚本和样式。HTML5中的表单功能为用户提供了更好的体验，使表单在不同网站之间更一致，并向用户提供有关数据输入的即时反馈。它们还为使用禁用脚本的浏览器的用户提供相同的用户体验。
- -
 
- -
本文总结了HTML5中的表单变化。有关使用表单的详细指南，请参阅我们更多的HTML表单指南。
- -
 
- -

<input> 元素

- -

{{HTMLElement("input")}} 的 {{htmlattrxref("type", "input")}} 特性拥有更多的值。（请观看 {{HTMLElement("input")}} 获得完整列表）

- - - -

 {{HTMLElement("input")}} 元素也拥有一些新的特性。

- - - -

text input

- -
-
 
-
- -

这个程序段段定义了一个用户可以输入的一行input。

- -
<form>
-  Enter your Name <input type="text" name="name">
-</form>
- -

checkboxes

- -

这个程序段允许用户选择多个选项。

- -
<input type="checkbox" name="chk" value="" checked> Do you want the newsletter
- -

Radio < input> element

- -
<form>
-  <input type="radio" name="frequency" value="daily">Daily<br>
-  <input type="radio" name="frequency" value="weekly">Weekly<br>
-  <input type="radio" name="frequency" value="monthly">Monthly<br>
-  <input type="radio" name="frequency" value="yearly">Yearly
-</form>
- -

<form> 元素

- -

{{HTMLElement("form")}} 元素有了一个新特性：

- - - -

<datalist> 元素

- -

{{HTMLElement("datalist")}} 元素会在填写 {{HTMLElement("input")}} 字段时，显示一列 {{HTMLElement("option")}} 作为提示。

- -

你可以使用 {{HTMLElement("input")}} 元素上的 {{htmlattrxref("list", "input")}} 特性来将一个特定的 input 与特定的 {{HTMLElement("datalist")}} 元素做关联。

- -

<output> 元素

- -

{{HTMLElement("output")}} 元素表示计算的结果。

- -

你可以使用 {{htmlattrxref("for", "output")}} 特性来在 {{HTMLElement("output")}} 元素与文档内其他能够影响运算的元素(例如，input 或参数)建立关联。 {{htmlattrxref("for", "output")}} 特性的值是以空格做分隔的其他元素的 ID 列表。

- -

{{non-standard_inline}} Gecko 2.0 (其他浏览器并非如此) 支持为 {{HTMLElement("output")}} 元素自定义有效性约束(validity constraints)与错误信息，可以对其使用如下 CSS 伪类：{{Cssxref(":invalid")}}， {{Cssxref(":valid")}}， {{Cssxref(":-moz-ui-invalid")}}，与 {{Cssxref(":-moz-ui-valid")}}。在如下情况会显得很有用：例如计算结果违反了业务规则，但却并非因为特定的 input 值出现错误(例如，「百分比总数不能超过100」)。

- -

placeholder 特性

- -

{{htmlattrxref("placeholder", "input")}} 特性作用于 {{HTMLElement("input")}} 与 {{HTMLElement("textarea")}} 元素上，提示用户此域内能够输入什么内容。placeholder 中的文本不能包含回车与换行。

- -

autofocus 特性

- -

{{htmlattrxref("autofocus", "input")}} 特性让你能够指定一个表单控件，当页面载入后该表单自动获得焦点，除非用户覆盖它，例如在另一个控件中输入值。一个文档内只有一个表单能够拥有 autofocus 特性，它是一个 Boolean 值。这个特性适用于 {{HTMLElement("input")}}， {{HTMLElement("button")}}， {{HTMLElement("select")}}，与 {{HTMLElement("textarea")}} 元素。例外情况是，如果一个 {{htmlattrxref("autofocus", "input")}} 元素的 {{htmlattrxref("type", "input")}} 特性值设置成了 hidden，则 autofocus 无法生效(就是说，你无法让一个隐藏控件自动获得焦点)。

- -

label.control DOM 属性

- -

HTMLLabelElement DOM 接口除了为 {{HTMLElement("label")}} 元素提供了对应的特性外，还提供了一个额外的属性。 control 属性返回被打上标签的控件，就是 label 适用的控件，由 {{htmlattrxref("for", "label")}} 特性(如果定义的话) 或是第一个后代元素控件来确定。

- -

约束验证

- -

HTML5 为客户端表单的验证提供了语法与 API。当然这些功能无法取代服务器端验证，出于安全性与数据完整性的考虑，服务器端验证仍然必不可少，但是客户端验证能够通过对输入数据的即时反馈来提供良好的用户体验。

- -

如果 {{HTMLElement("input")}} 元素设置了 title 特性，当验证失败时，特性值会显示在提示信息中。如果 title 设置为空字符串，则不会显示提示信息。如果没有设置 title 特性，会使用标准验证信息(例如通过 {{htmlattrxref("x-moz-errormessage")}} 特性指定，或调用 setCustomValidity() 方法) 代为显示。

- -
注意： 约束验证不支持表单中的 {{HTMLElement("button")}} 元素；若想基于表单的验证结果来改变按钮的样式，可以使用 {{cssxref(":-moz-submit-invalid")}} 伪类。
- -

约束验证的 HTML 语法

- -

下列 HTML5 语法中的条目用于为表单数据指定约束。

- - - -

此外，若要阻止对表单进行约束验证，你可以在 {{HTMLElement("form")}} 上设置 {{htmlattrxref("novalidate", "form")}} 特性，或在 {{HTMLElement("button")}} 与 {{HTMLElement("input")}} 元素(当 {{htmlattrxref("type", "input")}} 是 submit 或 image)上设置 {{htmlattrxref("formnovalidate", "button")}} 特性。这些特性指定了当表单提交时不做验证。

- -

约束验证 API

- -

下面这些 DOM 属性与方法和约束验证相关，能够在客户端脚本中使用：

- - - -
{{HTML5ArticleTOC}}
diff --git a/files/zh-cn/web/guide/html/html/index.html b/files/zh-cn/web/guide/html/html/index.html deleted file mode 100644 index ee911ca9a1..0000000000 --- a/files/zh-cn/web/guide/html/html/index.html +++ /dev/null @@ -1,181 +0,0 @@ ---- -title: HTML5 -slug: Web/Guide/HTML/HTML -tags: - - HTML - - HTML5 - - Web - - Web 开发 - - 帮助 - - 指南 - - 综述 ---- -
-
HTML5 演示
- -

展示了实战中的最新 HTML 技术的 演示汇总。

- -

HTML5_Logo_128.png

-
- -

HTML5 是 HTML 标准的最新演进版本。 这个术语代表了两个不同的概念：

- -

它是一个新的 HTML 语言版本包含了新的元素，属性和行为，同时包含了一系列可以被用来让 Web 站点和应用更加多样化，功能更强大的技术。 这套技术往往被称作 HTML5 和它的朋友们，通常简称为 HTML5。

- -

从要对全部所有的 Web 开发人员有用这一点出发，这个参考页面链接了有关 HTML5 技术的大量资源，并且基于它们各自的功能，把它们归类成了若干组。

- - - -
-
-

语义

- -
-
HTML5 中的节段和外观概要
-
HTML5 中新的外观概要和节段元素一览: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("aside")}} 和 {{HTMLElement("hgroup")}}.
-
使用 HTML5 的音频和视频
-
{{HTMLElement("audio")}} 和 {{HTMLElement("video")}} 元素嵌入并能够操作新的多媒体内容。
-
HTML5 的表单
-
看一下 HTML5 中对 web 表单的改进：约束确认 API，一些新的属性，{{HTMLElement("input")}} 属性的一些新值 {{htmlattrxref("type", "input")}} 和新的 {{HTMLElement("output")}} 元素。
-
新的语义元素
-
除了区段，媒体和表单元素之外，众多的新元素，像 {{HTMLElement("mark")}}， {{HTMLElement("figure")}}， {{HTMLElement("figcaption")}}， {{HTMLElement("data")}}， {{HTMLElement("time")}}， {{HTMLElement("output")}}， {{HTMLElement("progress")}}， 或者 {{HTMLElement("meter")}}，也增加了有效的 HTML5 元素的数量。
-
{{HTMLElement("iframe")}} 的改进
-
使用 {{htmlattrxref("sandbox", "iframe")}}， {{htmlattrxref("seamless", "iframe")}}， 和 {{htmlattrxref("srcdoc", "iframe")}} 属性，作者们现在可以精确控制 {{HTMLElement("iframe")}} 元素的安全级别以及期望的渲染。
-
MathML
-
允许直接嵌入数学公式。
-
HTML5 入门
-
本文介绍了如何标示在网页设计或 Web 应用程序中使用 HTML5 时碰到的问题。
-
HTML5 兼容的解析器
-
用于把 HTML5 文档的字节转换成 DOM 的解释器，已经被扩展了，并且现在精确地定义了在所有情况下使用的行为，甚至当碰到无效的 HTML 这种情况。这就导致了 HTML5 兼容的浏览器之间极大的可预测性和互操作性。
-
- -

连通性

- -
-
Web Sockets
-
允许在页面和服务器之间建立持久连接并通过这种方法来交换非 HTML 数据。
-
Server-sent events
-
允许服务器向客户端推送事件，而不是仅在响应客户端请求时服务器才能发送数据的传统范式。
-
WebRTC
-
这项技术，其中的 RTC 代表的是即时通信，允许连接到其他人，直接在浏览器中控制视频会议，而不需要一个插件或是外部的应用程序。
-
- -

离线 & 存储

- -
-
离线资源：应用程序缓存
-
火狐全面支持 HTML5 离线资源规范。其他大多数针对离线资源仅提供了某种程度上的支持。
-
在线和离线事件
-
Firefox 3 支持 WHATWG 在线和离线事件，这可以让应用程序和扩展检测是否存在可用的网络连接，以及在连接建立和断开时能感知到。
-
WHATWG 客户端会话和持久化存储 (又名 DOM 存储)
-
客户端会话和持久化存储让 web 应用程序能够在客户端存储结构化数据。
-
IndexedDB
-
是一个为了能够在浏览器中存储大量结构化数据，并且能够在这些数据上使用索引进行高性能检索的 Web 标准。
-
自 web 应用程序中使用文件
-
对新的 HTML5 文件 API 的支持已经被添加到 Gecko 中，从而使 Web 应用程序可以访问由用户选择的本地文件。这包括使用 type file 的 {{HTMLElement("input")}} 元素的新的 multiple 属性针对多文件选择的支持。 还有 FileReader。
-
- -

多媒体

- -
-
使用 HTML5 音视频
-
{{HTMLElement("audio")}} 和 {{HTMLElement("video")}} 元素嵌入并支持新的多媒体内容的操作。
-
WebRTC
-
这项技术，其中的 RTC 代表的是即时通信，允许连接到其他人，直接在浏览器中控制视频会议，而不需要一个插件或是外部的应用程序。
-
使用 Camera API
-
允许使用，操作计算机摄像头，并从中存储图像。Allows to use, manipulate and store an image from the computer's camera.
-
Track 和 WebVTT
-
 {{HTMLElement("track")}} 元素支持字幕和章节。WebVTT 一个文本轨道格式。
-
- -

3D, 图像 & 效果

- -
-
Canvas 教程
-
了解有关新的 {{HTMLElement("canvas")}} 元素以及如何在火狐中绘制图像和其他对象。
-
HTML5 针对 <canvas> 元素的文本 API
-
HTML5 文本 API 现在由 {{HTMLElement("canvas")}} 元素支持。
-
WebGL
-
WebGL 通过引入了一套非常地符合 OpenGL ES 2.0 并且可以用在 HTML5 {{HTMLElement("canvas")}} 元素中的 API 给 Web 带来了 3D 图像功能。
-
SVG
-
一个基于 XML 的可以直接嵌入到 HTML 中的矢量图像格式。
-
 
-
-
- -
-

性能 & 集成

- -
-
Web Workers
-
能够把 JavaScript 计算委托给后台线程，通过允许这些活动以防止使交互型事件变得缓慢。
-
XMLHttpRequest Level 2
-
允许异步读取页面的某些部分，允许其显示动态内容，根据时间和用户行为而有所不同。这是在 Ajax背后的技术。
-
即时编译的 JavaScript 引擎
-
新一代的 JavaScript 引擎功能更强大，性能更杰出。
-
History API
-
允许对浏览器历史记录进行操作。这对于那些交互地加载新信息的页面尤其有用。
-
conentEditable 属性：把你的网站改变成 wiki !
-
HTML5 已经把 contentEditable 属性标准化了。了解更多关于这个特性的内容。
-
拖放
-
HTML5 的拖放 API 能够支持在网站内部和网站之间拖放项目。同时也提供了一个更简单的供扩展和基于 Mozilla 的应用程序使用的 API。
-
HTML 中的焦点管理
-
支持新的 HTML5 activeElement 和 hasFocus 属性。
-
基于 Web 的协议处理程序
-
你现在可以使用 navigator.registerProtocolHandler() 方法把 web 应用程序注册成一个协议处理程序。
-
requestAnimationFrame
-
允许控制动画渲染以获得更优性能。
-
全屏 API
-
为一个网页或者应用程序控制使用整个屏幕，而不显示浏览器界面。
-
指针锁定 API
-
允许锁定到内容的指针，这样游戏或者类似的应用程序在指针到达窗口限制时也不会失去焦点。
-
在线和离线事件
-
为了构建一个良好的具有离线功能的 web 应用程序，你需要知道什么时候你的应用程序确实离线了。顺便提一句，在你的应用程序又再回到在线状态时你也需要知道。
-
- -

设备访问

- -
-
使用 Camera API
-
允许使用和操作计算机的摄像头，并从中存取照片。
-
触控事件
-
对用户按下触控屏的事件做出反应的处理程序。
-
使用地理位置定位
-
让浏览器使用地理位置服务定位用户的位置。
-
检测设备方向
-
让用户在运行浏览器的设备变更方向时能够得到信息。这可以被用作一种输入设备（例如制作能够对设备位置做出反应的游戏）或者使页面的布局跟屏幕的方向相适应（横向或纵向）。
-
指针锁定 API
-
允许锁定到内容的指针，这样游戏或者类似的应用程序在指针到达窗口限制时也不会失去焦点。
-
- -

样式

- -

CSS 已经扩展到能够以一个更加复杂的方法给元素设置样式。这通常被称为 CSS3, 尽管 CSS 已经不再是很难触动的规范，并且不同的模块并不全部位于 level 3：其中一些位于 level 1 而另一些位于 level 4，覆盖了所有中间的层次。

- -
-
新的背景样式特性
-
现在可以使用 {{cssxref("box-shadow")}} 给逻辑框设置一个阴影，而且还可以设置 多背景。
-
更精美的边框
-
现在不仅可以使用图像来格式化边框，使用 {{cssxref("border-image")}} 和它关联的普通属性，而且可以通过 {{cssxref("border-radius")}} 属性来支持圆角边框。
-
为你的样式设置动画
-
使用 CSS Transitions 以在不同的状态间设置动画，或者使用 CSS Animations 在页面的某些部分设置动画而不需要一个触发事件，你现在可以在页面中控制移动元素了。
-
排版方面的改进
-
作者拥有更高的控制已达到更佳的排版。他们不但可以控制 {{cssxref("text-overflow")}} 和 hyphenation， 而且也可以给它设置一个 阴影 或者更精细地控制它的 decorations。感谢新的 {{cssxref("@font-face")}} 规则，现在我们可以下载并应用自定义的字体了。.
-
新的展示性布局
-
为了提高设计的灵活性，已经有两种新的布局被添加了进来：CSS 多栏布局, 以及 CSS 灵活方框布局。
-
-
-
- -

译注：

- -

被废弃的重复链接：https://developer.mozilla.org/zh-CN/docs/HTML5_junk

diff --git a/files/zh-cn/web/guide/html/html5/html5_element_list/index.html b/files/zh-cn/web/guide/html/html5/html5_element_list/index.html deleted file mode 100644 index 9a45c3ba52..0000000000 --- a/files/zh-cn/web/guide/html/html5/html5_element_list/index.html +++ /dev/null @@ -1,591 +0,0 @@ ---- -title: HTML5 标签列表 -slug: Web/Guide/HTML/HTML5/HTML5_element_list -tags: - - HTML - - HTML5 - - Web - - 初学者 - - 指南 -translation_of: Web/HTML/Element -translation_of_original: Web/Guide/HTML/HTML5/HTML5_element_list ---- -

这里列出了所有标准化的 HTML5 元素，使用起始标签描述，按照功能分组。与列出所有标准化的、非标准化的、有效的、废弃的标签的 HTML 元素索引 不同的是，该页只列出有效的 HTML5 元素。新网站应当只使用这里列出的元素。

- -

符号 这个元素在 HTML5 中加入 代表该元素是在 HTML5 中新增的。另外注意，这里列出的其他元素可能在 HTML5 标准中得到了扩充或经过修改。

- -

根元素

- - - - - - - - - - - - - - -
ElementDescription
{{HTMLElement("html")}}代表 HTML 或 XHTML 文档的根。其他所有元素必须是这个元素的子节点。
- -

文档元数据

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ElementDescription
{{HTMLElement("head")}}代表关于文档元数据的一个集合，包括脚本或样式表的链接或内容。
{{HTMLElement("title")}}定义文档的标题，将显示在浏览器的标题栏或标签页上。该元素只能包含文本，包含的标签不会被解释。
{{HTMLElement("base")}}定义页面上相对 URL 的基准 URL。
{{HTMLElement("link")}}用于链接外部资源到该文档。
{{HTMLElement("meta")}}定义其他 HTML 元素无法描述的元数据。
{{HTMLElement("style")}}用于内联 CSS。
- -

脚本

- - - - - - - - - - - - - - - - - - - - - - -
ElementDescription
{{HTMLElement("script")}}定义一个内联脚本或链接到外部脚本。脚本语言是 JavaScript。
{{HTMLElement("noscript")}}定义当浏览器不支持脚本时显示的替代文字。
{{HTMLElement("template")}}这个元素在 HTML5 中加入通过 JavaScript 在运行时实例化内容的容器。
- -

章节

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ElementDescription
{{HTMLElement("body")}} -
代表 HTML 文档的内容。在文档中只能有一个 <body> 元素。
-
{{HTMLElement("section")}} 这个元素在 HTML5 中加入定义文档中的一个章节。
{{HTMLElement("nav")}} 这个元素在 HTML5 中加入定义只包含导航链接的章节。
{{HTMLElement("article")}} 这个元素在 HTML5 中加入定义可以独立于内容其余部分的完整独立内容块。
{{HTMLElement("aside")}} 这个元素在 HTML5 中加入定义和页面内容关联度较低的内容——如果被删除，剩下的内容仍然很合理。
<h1>,<h2>,<h3>,<h4>,<h5>,<h6>标题元素实现了六层文档标题，<h1> 是最大的标题，<h6> 是最小的标题。标题元素简要地描述章节的主题。
{{HTMLElement("header")}} 这个元素在 HTML5 中加入定义页面或章节的头部。它经常包含 logo、页面标题和导航性的目录。
{{HTMLElement("footer")}} 这个元素在 HTML5 中加入定义页面或章节的尾部。它经常包含版权信息、法律信息链接和反馈建议用的地址。
{{HTMLElement("address")}}定义包含联系信息的一个章节。
{{HTMLElement("main")}}这个元素在 HTML5 中加入定义文档中主要或重要的内容。
- -

组织内容

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ElementDescription
{{HTMLElement("p")}}定义一个段落。
{{HTMLElement("hr")}}代表章节、文章或其他长内容中段落之间的分隔符。
{{HTMLElement("pre")}}代表其内容已经预先排版过，格式应当保留 。
{{HTMLElement("blockquote")}}代表引用自其他来源的内容。
{{HTMLElement("ol")}}定义一个有序列表。
{{HTMLElement("ul")}}定义一个无序列表。
{{HTMLElement("li")}}定义列表中的一个列表项。
{{HTMLElement("dl")}}定义一个定义列表（一系列术语和其定义）。
{{HTMLElement("dt")}}代表一个由下一个 <dd> 定义的术语。
{{HTMLElement("dd")}}代表出现在它之前术语的定义。
{{HTMLElement("figure")}} 这个元素在 HTML5 中加入代表一个和文档有关的图例。
{{HTMLElement("figcaption")}} 这个元素在 HTML5 中加入代表一个图例的说明。
{{HTMLElement("div")}}代表一个通用的容器，没有特殊含义。
- -

文字形式

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ElementDescription
{{HTMLElement("a")}}代表一个链接到其他资源的超链接 。
{{HTMLElement("em")}}代表强调 文字。
{{HTMLElement("strong")}}代表特别重要 文字。
{{HTMLElement("small")}}代表注释 ，如免责声明、版权声明等，对理解文档不重要。
{{HTMLElement("s")}}代表不准确或不相关 的内容。
{{HTMLElement("cite")}}代表作品标题 。
{{HTMLElement("q")}}代表内联的引用 。
{{HTMLElement("dfn")}}代表一个术语包含在其最近祖先内容中的定义 。
{{HTMLElement("abbr")}}代表省略 或缩写 ，其完整内容在 title 属性中。
{{HTMLElement("data")}} 这个元素在 HTML5 中加入关联一个内容的机器可读的等价形式 （该元素只在 WHATWG 版本的 HTML 标准中，不在 W3C 版本的 HTML5 标准中）。
{{HTMLElement("time")}} 这个元素在 HTML5 中加入代表日期 和时间 值；机器可读的等价形式通过 datetime 属性指定。
{{HTMLElement("code")}}代表计算机代码 。
{{HTMLElement("var")}}代表代码中的变量 。
{{HTMLElement("samp")}}代表程序或电脑的输出 。
{{HTMLElement("kbd")}}代表用户输入 ，一般从键盘输出，但也可以代表其他输入，如语音输入。
{{HTMLElement("sub")}},{{HTMLElement("sup")}}分别代表下标 和上标 。
{{HTMLElement("i")}}代表一段不同性质 的文字，如技术术语、外文短语等。
{{HTMLElement("b")}}代表一段需要被关注 的文字。
{{HTMLElement("u")}}代表一段需要下划线呈现的文本注释，如标记出拼写错误的文字等。
{{HTMLElement("mark")}} 这个元素在 HTML5 中加入代表一段需要被高亮的引用 文字。
{{HTMLElement("ruby")}} 这个元素在 HTML5 中加入代表被ruby 注释 标记的文本，如中文汉字和它的拼音。
{{HTMLElement("rt")}} 这个元素在 HTML5 中加入代表ruby 注释 ，如中文拼音。
{{HTMLElement("rp")}} 这个元素在 HTML5 中加入代表 ruby 注释两边的额外插入文本 ，用于在不支持 ruby 注释显示的浏览器中提供友好的注释显示。
{{HTMLElement("bdi")}} 这个元素在 HTML5 中加入代表需要脱离 父元素文本方向的一段文本。它允许嵌入一段不同或未知文本方向格式的文本。
{{HTMLElement("bdo")}}指定子元素的文本方向 ，显式地覆盖默认的文本方向。
{{HTMLElement("span")}}代表一段没有特殊含义的文本，当其他语义元素都不适合文本时候可以使用该元素。
{{HTMLElement("br")}}代表换行 。
{{HTMLElement("wbr")}} 这个元素在 HTML5 中加入代表建议换行 (Word Break Opportunity) ，当文本太长需要换行时将会在此处添加换行符。
- -

编辑

- - - - - - - - - - - - - - - - - - -
ElementDescription
{{HTMLElement("ins")}}定义增加 到文档的内容。
{{HTMLElement("del")}}定义从文档移除 的内容。
- -

嵌入内容

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ElementDescription
{{HTMLElement("img")}}代表一张图片 。
{{HTMLElement("iframe")}}代表一个内联的框架 。
{{HTMLElement("embed")}} 这个元素在 HTML5 中加入代表一个嵌入 的外部资源，如应用程序或交互内容。
{{HTMLElement("object")}}代表一个外部资源 ，如图片、HTML 子文档、插件等。
{{HTMLElement("param")}}代表 <object> 元素所指定的插件的参数 。
{{HTMLElement("video")}} 这个元素在 HTML5 中加入代表一段视频 及其视频文件和字幕，并提供了播放视频的用户界面。
{{HTMLElement("audio")}} 这个元素在 HTML5 中加入代表一段声音 ，或音频流 。
{{HTMLElement("source")}} 这个元素在 HTML5 中加入为 <video> 或 <audio> 这类媒体元素指定媒体源 。
{{HTMLElement("track")}} 这个元素在 HTML5 中加入为 <video> 或 <audio> 这类媒体元素指定文本轨道（字幕） 。
{{HTMLElement("canvas")}} 这个元素在 HTML5 中加入代表位图区域 ，可以通过脚本在它上面实时呈现图形，如图表、游戏绘图等。
{{HTMLElement("map")}}与 <area> 元素共同定义图像映射 区域。
{{HTMLElement("area")}}与 <map> 元素共同定义图像映射 区域。
{{SVGElement("svg")}} 这个元素在 HTML5 中加入定义一个嵌入式矢量图 。
{{MathMLElement("math")}} 这个元素在 HTML5 中加入定义一段数学公式 。
- -

表格

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ElementDescription
{{HTMLElement("table")}}定义多维数据 。
{{HTMLElement("caption")}}代表表格的标题 。
{{HTMLElement("colgroup")}}代表表格中一组单列或多列 。
{{HTMLElement("col")}}代表表格中的列 。
{{HTMLElement("tbody")}}代表表格中一块具体数据 （表格主体）。
{{HTMLElement("thead")}}代表表格中一块列标签 （表头）。
{{HTMLElement("tfoot")}}代表表格中一块列摘要 （表尾）。
{{HTMLElement("tr")}}代表表格中的行 。
{{HTMLElement("td")}}代表表格中的单元格 。
{{HTMLElement("th")}}代表表格中的头部单元格 。
- -

表单

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ElementDescription
{{HTMLElement("form")}}代表一个表单 ，由控件组成。
{{HTMLElement("fieldset")}}代表控件组 。
{{HTMLElement("legend")}}代表 <fieldset> 控件组的标题 。
{{HTMLElement("label")}}代表表单控件的标题 。
{{HTMLElement("input")}}代表允许用户编辑数据的数据区 （文本框、单选框、复选框等）。
{{HTMLElement("button")}}代表按钮 。
{{HTMLElement("select")}}代表下拉框 。
{{HTMLElement("datalist")}} 这个元素在 HTML5 中加入代表提供给其他控件的一组预定义选项 。
{{HTMLElement("optgroup")}}代表一个选项分组 。
{{HTMLElement("option")}}代表一个 <select> 元素或 <datalist> 元素中的一个选项
{{HTMLElement("textarea")}}代表多行文本框 。
{{HTMLElement("keygen")}} 这个元素在 HTML5 中加入代表一个密钥对生成器 控件。
{{HTMLElement("output")}} 这个元素在 HTML5 中加入代表计算值 。
{{HTMLElement("progress")}} 这个元素在 HTML5 中加入代表进度条 。
{{HTMLElement("meter")}} 这个元素在 HTML5 中加入代表滑动条 。
- -

交互元素

- - - - - - - - - - - - - - - - - - - - - - - - - - -
ElementDescription
{{HTMLElement("details")}} 这个元素在 HTML5 中加入代表一个用户可以(点击)获取额外信息或控件的小部件 。
{{HTMLElement("summary")}} 这个元素在 HTML5 中加入代表 <details> 元素的综述 或标题 。
{{HTMLElement("menuitem")}} 这个元素在 HTML5 中加入代表一个用户可以点击的菜单项。
{{HTMLElement("menu")}} 这个元素在 HTML5 中加入代表菜单。
- -

另请参阅

- - diff --git a/files/zh-cn/web/guide/html/html5/html5_thematic_classification/index.html b/files/zh-cn/web/guide/html/html5/html5_thematic_classification/index.html deleted file mode 100644 index 3759db3097..0000000000 --- a/files/zh-cn/web/guide/html/html5/html5_thematic_classification/index.html +++ /dev/null @@ -1,169 +0,0 @@ ---- -title: HTML5 & friends thematic classification -slug: Web/Guide/HTML/HTML5/HTML5_Thematic_Classification -translation_of: Web/Guide/HTML/HTML5 -translation_of_original: Web/Guide/HTML/HTML5/HTML5_Thematic_Classification ---- -

这个页面提供了有关HTML5的主题链接，有些链接一般与HTML5关联但实际上并不是HTML标准，为了方便这些内容也被整理到这里。

-

HTML

-

Audio 和 video

-
- Firefox 3.5引入对HTML5<audio>和<video>元素的支持，提供向HTML文档轻松嵌入媒体资源的能力。参考：在 Firefox 中使用audio和video
-
-  
-

Canvas

-

<Canvas>是HTML新元素，可以用于通过脚本（常用 JavaScript）绘制图像，例如，它可以用来绘制图表，合成照片甚至实现动画。

-

参考：

- -

WebGL (独立规范)

-
- webGL WebGL brings 3D graphics to the Web by introducing an API that closely conforms to OpenGL ES 2.0 and can be used in HTML5 {{ HTMLElement("canvas") }} elements.
-
- Reference: WebGL
-

Inline SVG and MathML

-
- HTML5 parsing liberates MathML and SVG from XML and makes them available in the main file format of the Web.
-
- Reference:
- - -
- Link relations complement the <a> tag and specify why you're pointing to another page.
-
- Reference:
-

Web forms

-
- Form elements and attributes in HTML5 provide a greater degree of semantic mark-up than HTML4 and remove a great deal of the need for tedious scripting and styling that was required in HTML4.
-
- Reference:
- -

Microformats (separate specification)

-
- Microformats allow web sites to provide semantic data to the browser in order to make it possible to present summaries of the information on a page without having to know how to parse the document itself.
-
- Reference: Using microformats
-
- See also: http://www.microformats.org
-

Semantic tags

-
- The HTML5 specification brings several new elements to web developers allowing them to describe the structure of a web document with a standard semantics.
-
- Reference:
- -

JavaScript (separate specifications)

-

Client-Side Storage

-
- Firefox supports the HTML 5 specification for offline caching of web applications' resources and offline storage of data.
-
- Reference:
- -

IndexedDB

-
- IndexedDB is an evolving web standard for the storage of significant amounts of structured data in the browser and for high performance searches on this data using indexes.
-
- Reference: IndexedDB
-

Web workers (separate specification)

-
- Workers provide a simple means for web content to run scripts in background threads.  Once created, a worker can send messages to the spawning task by posting messages to an event handler specified by the creator.
-
- Reference: Using web workers
-

New events

-
- In order to build a good offline-capable web application, you need to know when your application is actually offline. Incidentally, you also need to know when your application has returned to an online status again.
-
- Reference: Online and offline events
-

Drag and drop

-
- Firefox and other Mozilla applications support a number of features for handling drag and drop. This allows you the user to click and hold the mouse button down over an element, drag it to another location, and release the mouse button to drop the element there.
-
- Reference: Drag and Drop
-

Protocol handler

-
-

It's fairly common to find web pages link to resources using non-http protocols. You can think of this as a desktop-based protocol handler.

-

Reference: Web-based protocol handler

-

Geolocation

-
-
- The Geolocation API allows the user to provide their location to web applications if they so desire.  For privacy reasons, the user is asked to confirm permission to report location information.
-
- Reference: Using geolocation
-
- See also: Geolocation Specification
-
-

Focus attributes

-
- The focus atributes let a script understand if an element has the focus of the user and then act accordingly.
- -        
-

CSS (separate specifications)

-

New CSS selectors

-
- The following page shows the CSS3 support in Firefox and the new elements for HTML5.
-
- Reference: Mozilla CSS support chart
-

Typography

-

The following pages show some of the typography attributes introduced by CSS3.

-
- Text wrap:
- -

Layout

-
- Columns:
- -

Visual

-
- The following pages show some of the visual attributes introduced by CSS3.
- -

Dynamic effects

-
- CSS also introduces dynamic effects:
- -

{{ languages( { "ja": "ja/HTML/HTML5/HTML5_Thematic_Classification"} ) }}

diff --git a/files/zh-cn/web/guide/html/sections_and_outlines_of_an_html5_document/index.html b/files/zh-cn/web/guide/html/sections_and_outlines_of_an_html5_document/index.html deleted file mode 100644 index 2eeb6fe100..0000000000 --- a/files/zh-cn/web/guide/html/sections_and_outlines_of_an_html5_document/index.html +++ /dev/null @@ -1,377 +0,0 @@ ---- -title: 使用 HTML 章节与大纲 -slug: Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document -tags: - - HTML - - HTML5 - - 指南 - - 文档结构 - - 高阶 -translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines ---- -
-

（下方英文原文警告的过时已翻译版本）注意：下面描述的HTML 5 大纲算法在用户代理中还没有实现，因此，使用标题语义的用户暴露在HTML4的文档结构下。HTML5对问题的描述还仅仅是理论上的。

-
- -
-

Important: There are no implementations of the proposed outline algorithm in web browsers nor assistive technology; it was never part of a final W3C specification. Therefore the outline algorithm should not be used to convey document structure to users. Authors are advised to use heading rank (h1-h6) to convey document structure.

-
- -

HTML5新增了几个新元素使得开发者可以用标准语义去描述web文档的结构。本文描述了这些元素并说明如何使用这些元素去为任何文档定义纲要。

- -

HTML 4 的文档结构

- -

文档结构，即，<body> 与 </body> 标记之间内容的语义结构，对呈现页面给用户是重要的。HTML4用文档中章节和子章节的概念去描述文档结构。一个章节由一个包含着标题元素（h1-h6）的div元素表示。这些html划分元素（HTML Dividing Elements）和标题元素（HTML Heading Elements）形成了文档的结构和纲要。

- -

所以下面的片段：

- -
-
<div class="section" id="forest-elephants" >
-  <h1>Forest elephants</h1>
-  <p>In this section, we discuss the lesser known forest elephants.
-    ...this section continues...
-  <div class="subsection" id="forest-habitat" >
-    <h2>Habitat</h2>
-    <p>Forest elephants do not live in trees but among them.
-     ...this subsection continues...
-  </div>
-</div>
-
-
- -

形成了如下的大纲：

- -
1. Forest elephants
-   1.1 Habitat
-
- -

HTML div 元素（ {{HTMLElement("div")}} elements）并不强制性地定义一个章节。一个 HTML 标题元素（ HTML Heading Element）的出现就足以意味着新的章节. 因此,

- -
<h1>Forest elephants</h1>
-  <p>In this section, we discuss the lesser known forest elephants.
-    ...this section continues...
-  <h2>Habitat</h2>
-  <p>Forest elephants do not live in trees but among them.
-    ...this subsection continues...
-  <h2>Diet</h2>
-<h1>Mongolian gerbils</h1>
-
- -

会形成如下的大纲:

- -
1. Forest elephants
-   1.1 Habitat
-   1.2 Diet
-2. Mongolian gerbils
-
- -

HTML5 解决的问题

- -

HTML 4 的文档结构定义和其隐含的大纲算法非常粗糙而且造成了很多问题：

- -
    -
  1.  定义语义性章节的{{HTMLElement("div")}} 元素的用法,如果没有为class属性赋以特殊的值，使生成自动生成大纲的算法变得不可能 ("一个div元素{{HTMLElement("div")}} 是不是大纲的一部分, 定义的是章节还是子章节?" 或者 "该div元素 {{HTMLElement("div")}}是仅仅为了样式化?")。换句话说, HTML4规范在章节的定义和章节的范围都不精确。 自动生成大纲是重要的,尤其是在倾向于通过根据文档大纲内容去展示内容的辅助技术（ assistive technology）。 HTML5 在自动生成大纲算法的过程中去掉了div元素（{{HTMLElement("div")}}），并新增了一个元素，section元素（{{HTMLElement("section")}}）。
    2. -
  2. 合并多个文档是困难的：主文档中包含子文档意味着改变HTML标题元素的级别，以使得文档大纲能够保持下来。 这个已经被HTML5的新的章节元素解决了，因为新引入的元素（{{HTMLElement("article")}}、{{HTMLElement("section")}}、{{HTMLElement("nav")}} 和 {{HTMLElement("aside")}}）总是距离其最近的祖先章节的子章节, 与子文档章节内部的标题没有关系.
    3. -
  3. HTML4中，所有的章节都是文档大纲中的一部分。但是文档并不总是这样。文档可以包含那些不是大纲的特殊章节, 但是与文档有关的, 就像广告块和解释区域。 HTML5 引入aside元素 {{HTMLElement("aside")}}使得这样的节点不会插入到主纲要中。 
    4. -
  4. 另外, 因为在 HTML4中任何的部分都是文档大纲的一部分, 没有办法产生与网站相关而不是与文档相关的节段，比如logos,menus,目录或版权信息和法律声明。为了这个目的, HTML5 引入了三个特殊的节段 元素： 包含链接集合的nav元素{{HTMLElement("nav")}} , 例如目录, 包含网站相关信息的footer元素{{HTMLElement("footer")}} 和header元素 {{HTMLElement("header")}} 。
    5. -
- -

更具有普遍意义的是HTML5使得章节和标题特性更精确。使得文档大纲变的可预测，浏览器使用后也可以提高用户体验。

- -

HTML5 的大纲算法

- -

定义节段

- -

 {{HTMLElement("body")}} 元素中的所有内容都是节段中的一部分。节段在 HTML5 中是可以嵌套的。{{HTMLElement("body")}} 元素定义了主节段，基于主节段，可以显式或隐式定义各个子节段的划分。显式定义的节段是通过{{HTMLElement("body")}},  {{HTMLElement("section")}},  {{HTMLElement("article")}},  {{HTMLElement("aside")}}和 {{HTMLElement("nav")}} 这些标记中的内容。 

- -
注意：每个section可以有自己的标题结构。因此，即使是一个嵌套的section也能有{{HTMLElement("h1")}}. 具体查看 Defining Headings in HTML5.
- -

Example:

- -
<section>
-  <h1>Forest elephants</h1>
-  <section>
-    <h1>Introduction</h1>
-    <p>In this section, we discuss the lesser known forest elephants.</p>
-  </section>
-  <section>
-    <h1>Habitat</h1>
-    <p>Forest elephants do not live in trees but among them.</p>
-  </section>
-  <aside>
-    <p>advertising block</p>
-  </aside>
-</section>
-<footer>
-  <p>(c) 2010 The Example company</p>
-</footer>
- -

这个HTML片段定义了两个顶级节段：

- -
<section>
-  <h1>Forest elephants</h1>
-  <section>
-    <h1>Introduction</h1>
-    <p>In this section, we discuss the lesser known forest elephants.</p>
-  </section>
-  <section>
-    <h1>Habitat</h1>
-    <p>Forest elephants do not live in trees but among them.</p>
-  </section>
-  <aside>
-    <p>advertising block</p>
-  </aside>
-</section>
-
-<footer>
-  <p>(c) 2010 The Example company</p>
-</footer>
- -

第一个节段有三个子节段：

- -
<section>
-  <h1>Forest elephants</h1>
-
-  <section>
-    <h1>Introduction</h1>
-    <p>In this section, we discuss the lesser known forest elephants.</p>
-  </section>
-
-  <section>
-    <h1>Habitat</h1>
-    <p>Forest elephants do not live in trees but among them.</p>
-  </section>
-
-  <aside>
-    <p>advertising block</p>
-  </aside>
-</section>
-
-<footer>
-  <p>(c) 2010 The Example company</p>
-</footer>
- -

上面的片段形成了如下的大纲:

- -
1. Forest elephants
-   1.1 Introduction
-   1.2 Habitat
-   1.3 Section (aside)
-
- -

在HTML5中定义标题

- -

当 HTML 节段元素定义文档结构时，文档大纲也需要有用的标题。基本规则是简单的：第一个 HTML 标题元素（{{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}之一）定义了当前节段的标题

- -

标题元素通过在元素里的名字加上数字来分级标题元素，{{HTMLElement("h1")}} 元素有最高级别，{{HTMLElement("h6")}} 有最低级别。相关的级别只在节段中起作用；节段的结构定义了大纲，而不是节段的标题。例如，下面的代码：

- -
<section>
-  <h1>Forest elephants</h1>
-  <p>In this section, we discuss the lesser known forest elephants.
-    ...this section continues...
-  <section>
-    <h2>Habitat</h2>
-    <p>Forest elephants do not live in trees but among them.
-        ...this subsection continues...
-  </section>
-</section>
-<section>
-  <h3>Mongolian gerbils</h3>
-  <p>In this section, we discuss the famous mongolian gerbils.
-     ...this section continues...
-</section>
- -

形成了下面的大纲:

- -
1. Forest elephants
-   1.1 Habitat
-2. Mongolian gerbils
- -

注意标题元素的级别（例子中的第一个顶层节段的 {{HTMLElement("h1")}}，子节段中的{{HTMLElement("h2")}} 和第二个顶层节段中的{{HTMLElement("h3")}}）并不重要。（任何级别可以用作显示定义的节段的标题，虽然这种做法并不推荐。）

- -

隐式分节

- -

因为HTML5分节元素并不强制性定义大纲，为了与现有的占主导地位的HTML4保持兼容，有个方式来定义节段而不需要分节元素。这种方式就是隐式分节。

- -

HTML标题元素 ({{HTMLElement("h1")}} 到 {{HTMLElement("h6")}}) 定义了一个新的，隐式的节段，当其不是父节段第一个标题时。这种隐式放置节段的方式通过在父节点中与之前标题的相对级别来定义。如果比之前的标题级别更低，那么在节段里开始新的隐式子节段。如代码所示：

- -
<section>
-  <h1>Forest elephants</h1>
-  <p>In this section, we discuss the lesser known forest elephants.
-    ...this section continues...
-  <h3 class="implicit subsection">Habitat</h3>
-  <p>Forest elephants do not live in trees but among them.
-    ...this subsection continues...
-</section>
- -

形成如下的大纲:

- -
1. Forest elephants
-   1.1 Habitat (implicitly defined by the h3 element)
- -

如果与前面标题的级别相同，那么闭合前面的节段（可能是显式标记的节段！）并开始新的同一级别的隐式节段：

- -
<section>
-  <h1>Forest elephants</h1>
-  <p>In this section, we discuss the lesser known forest elephants.
-    ...this section continues...
-  <h1 class="implicit section">Mongolian gerbils</h1>
-  <p>Mongolian gerbils are cute little mammals.
-    ...this section continues...
-</section>
- -

形成如下的大纲：

- -
1. Forest elephants
-2. Mongolian gerbils (implicitly defined by the h1 element, which closed the previous section at the same time)
- -

如果比之前标题的级别更高，那么关闭之前的节段并开始新的这个更高级别的隐式节段：

- -
<body>
-  <h1>Mammals</h1>
-  <h2>Whales</h2>
-  <p>In this section, we discuss the swimming whales.
-    ...this section continues...
-  <section>
-    <h3>Forest elephants</h3>
-    <p>In this section, we discuss the lesser known forest elephants.
-      ...this section continues...
-    <h3>Mongolian gerbils</h3>
-      <p>Hordes of gerbils have spread their range far beyond Mongolia.
-         ...this subsection continues...
-    <h2>Reptiles</h2>
-      <p>Reptiles are animals with cold blood.
-          ...this subsection continues...
-  </section>
-</body>
- -

形成如下的大纲：

- -
1. Mammals
-   1.1 Whales (implicitly defined by the h2 element)
-   1.2 Forest elephants (explicitly defined by the section element)
-   1.3 Mongolian gerbils (implicitly defined by the h3 element, which closes the previous section at the same time)
-2. Reptiles (implicitly defined by the h2 element, which closes the previous section at the same time)
- -

这并不是一眼就可以通过标题标记就可以看出来的大纲。为了使标记容易理解，用显式的标记开始和闭合节段以及匹配标题等级与期望的嵌套节段等级。然而，HTML5规范并不需要这样。如果你发现浏览器以不期望的方式渲染文档，检查是否有隐式的节段没有闭合。

- -

作为经验法则，标题级别应该与节段嵌套级别相匹配，但为了方便节段在多个文档中的重用，也存在例外的情况。例如，一个节段可能会存储在内容管理系统中并在运行时组装为完整的文档。在这种情况下，好的实践便是使用{{HTMLElement("h1")}}作为可重用部分的最高标题级别。可重用节段的嵌套级别应该取决于将使用该节段的文档的节段层级。显式节段标记仍然在这种情况下有用处。

- -

分节根

- -

分节根是一个HTML元素，这个元素可以拥有自己的大纲，但是元素内部的节段和标题对其祖先的大纲没有贡献。除了文档的逻辑分节根{{HTMLElement("body")}}元素，这些元素经常在页面中引入外部内容：{{HTMLElement("blockquote")}}, {{HTMLElement("details")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}} 和{{HTMLElement("td")}}。

- -

Example:

- -
<section>
-  <h1>Forest elephants</h1>
-  <section>
-    <h2>Introduction</h2>
-    <p>In this section, we discuss the lesser known forest elephants</p>
-  </section>
-  <section>
-    <h2>Habitat</h2>
-    <p>Forest elephants do not live in trees but among them. Let's
-       look what scientists are saying in "<cite>The Forest Elephant in Borneo</cite>":</p>
-    <blockquote>
-       <h1>Borneo</h1>
-       <p>The forest element lives in Borneo...</p>
-    </blockquote>
-  </section>
-</section>
-
- -

例子形成如下的大纲:

- -
1. Forest elephants
-   1.1 Introduction
-   1.2 Habitat
- -

这个大纲并不包含 {{HTMLElement("blockquote")}} 元素的内部大纲。{{HTMLElement("blockquote")}} 元素是一个外部引用，是一个分节根并隔离了他内部的大纲

- -

大纲之外的节段

- -

HTML5引入了2个新的元素，用来定义那些不属于web文档主要大纲中的节段。

- -
    -
  1. HTML 侧边分节元素 ({{HTMLElement("aside")}}) 定义了这样的节段, 虽然是主要的分节元素, 但并不属于主要的文档流, 就像解释栏或广告栏. aside元素内部有自己的大纲，但并不计入文档大纲中
    2. -
  2. HTML 导航分节元素 ({{HTMLElement("nav")}}) 定义的节段包含了很多导航links。文档中可以有好几个这样的元素，比如文档内部的链接，就像目录，和链接到其他站点的导航links。这些链接并不是主文档流和文档大纲中的一部分 ，并且能够特别让屏幕浏览器和类似的辅助技术从一开始就不渲染该标记里的内容。
    3. -
- -

页眉和页脚

- -

HTML5引入了两个可以用于标记节段的页眉和页脚的新元素。

- -
    -
  1. HTML 头部分节元素 ({{HTMLElement("header")}}) 定义了页面的页眉,通常会包含logo和站点名称以及水平菜单（如果有的话）。或是一个节段的头部，可能包含了节段的标题和作者名字等。{{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, and {{HTMLElement("nav")}}可以拥有它们自己的{{HTMLElement("header")}}。虽然名字是header，但是不一定是在页面的开始。
    2. -
  2. HTML 页脚元素 ({{HTMLElement("footer")}}) 定义了页脚, 通常会包含版权信息和法律声明以及一些其他链接。或是节段的页脚，可能包含了节段的发布数据、许可声明等。{{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, and {{HTMLElement("nav")}} 可以拥有它们自己的 {{HTMLElement("footer")}}。同样，其不一定是在页面的底部出现。
    3. -
- -

分节元素中的地址和发表时间

- -

文档的作者想要发布一些联系信息，例如作者的名字和地址。HTML4通过{{HTMLElement("address")}}元素来表示，HTML5则拓展了这个元素。

- -

一个文档可以由不同作者的不同节段组成。一个从其他作者而不是文档作者写的节段用{{HTMLElement("article")}}元素定义。因此， {{HTMLElement("address")}} 元素连接到距离最近的{{HTMLElement("body")}}或{{HTMLElement("article")}} 祖先元素。

- -

同样的，新的HTML5标记 {{HTMLElement("time")}}元素，使用{{htmlattrxref("pubdate", "time")}}布尔值，表示整个文档的发布时间，分别给文章，与其最近的{{HTMLElement("body")}}元素或{{HTMLElement("article")}} 元素的祖先元素相关。

- -

在不支持HTML5的浏览器器中使用HTML5

- -

分节和标题元素应该在大部分的不支持HTML5的浏览器中工作。尽管不支持，但不必使用特殊的DOM接口。仅仅只需要一个特殊的CSS样式，因为未知元素默认会样式化为display:inline：

- -
section, article, aside, footer, header, nav, hgroup {
-  display:block;
-}
-
-
- -

当然web开发者可以改变上面的样式结构，但是要记住的是在不支持HTML5浏览器中，这些元素默认的样式是与预期的样式是不同的。还要注意的是{{HTMLElement("time")}}元素并没有在这些元素中，因为其样式在不支持HTML5和兼容HTML5的浏览器中的表现是相同的。

- -

然而这种方法有自己的局限性，因为一些浏览器并不允许样式化不支持的元素。这种情形出现在ie8及ie8以前的浏览器中，需要一个特殊脚本才行：

- -
<!--[if lt IE 9]>
-  <script>
-    document.createElement("header" );
-    document.createElement("footer" );
-    document.createElement("section");
-    document.createElement("aside"  );
-    document.createElement("nav"    );
-    document.createElement("article");
-    document.createElement("hgroup" );
-    document.createElement("time"   );
-  </script>
-<![endif]-->
- -

这段脚本表示，当在ie8（及ie8以前）的情况下，应该允许脚本的运行以合适地展示HTML5分节和标题元素。如果禁用了脚本，则不会显示，可能会出问题因为这些元素定义整个页面的结构。为了预防这种情况，我们需要加上{{HTMLElement("noscript")}}标签。

- -
<noscript>
-   <strong>Warning !</strong>
-   Because your browser does not support HTML5, some elements are simulated using JScript.
-   Unfortunately your browser has disabled scripting. Please enable it in order to display this page.
-</noscript>
- -

于是形成了如下的代码，允许HTML5节段和标题元素在不支持HTML5的浏览器中展示，即使是ie8（ie8以下版本）也在禁用脚本的情况下有了合适的反馈。

- -
<!--[if lt IE 9]>
-  <script>
-    document.createElement("header" );
-    document.createElement("footer" );
-    document.createElement("section");
-    document.createElement("aside"  );
-    document.createElement("nav"    );
-    document.createElement("article");
-    document.createElement("hgroup" );
-    document.createElement("time"   );
-  </script>
-  <noscript>
-     <strong>Warning !</strong>
-     Because your browser does not support HTML5, some elements are simulated using JScript.
-     Unfortunately your browser has disabled scripting. Please enable it in order to display this page.
-  </noscript>
-<![endif]-->
- -

总结

- -

HTML5中新的节段和标题标签带来了以标准的方法来描述web文档的结构和大纲。其为人们使用HTML5浏览器和需要结构来帮助他们理解页面带来了一个很大的优势。例如，人们需要一些辅助技术的帮助。这些新的语义元素使用简单，几乎没有负担，也可以在不支持HTML5的浏览器中工作。因此，他们应该被广泛使用。

- -
{{HTML5ArticleTOC()}}
diff --git a/files/zh-cn/web/guide/html/tips_for_authoring_fast-loading_html_pages/index.html b/files/zh-cn/web/guide/html/tips_for_authoring_fast-loading_html_pages/index.html deleted file mode 100644 index 5a07e862a0..0000000000 --- a/files/zh-cn/web/guide/html/tips_for_authoring_fast-loading_html_pages/index.html +++ /dev/null @@ -1,213 +0,0 @@ ---- -title: 小贴士：如何制作快速加载的HTML页面 -slug: Web/Guide/HTML/Tips_for_authoring_fast-loading_HTML_pages -tags: - - HTML - - 全部分类 - - 教程 -translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages ---- -

以下技巧都是基于通用的知识和经验。

- -

一个好的页面不仅要给访客提供一个更有交互性的站点，同时也需要降低你的服务器压力和网络请求。后者对于那些高访问量的站点，或在有爆炸性新闻出现等特殊情况下会出现流量突增的站点来说尤为关键。

- -

页面加载性能的优化不仅仅是针对那些带宽有限的拨号上网或移动设备用户需要看的内容，对于提供给宽带用户访问的内容同样重要并且可以导致巨大的提升，哪怕对于那些拥有最快网速的访客。

- -

Tips

- -

减小页面的大小

- -

直至今日，页面的大小仍是页面加载性能的最重要因素。

- -

通过压缩——排除不必要空格，注释，和将脚本、CSS放入外部文件等减小页面的大小，可以在页面结构改变很小的情况下提高下载性能。

- -

诸如 HTML Tidy 这类的工具可以从有效的HTML源文件中自动截去行首空格和额外的空行，其它工具则可以通过重新格式化源代码来压缩JavaScript或者通过混淆源码将长标识符替换为短标识符来减小文件大小。

- -

最小化文件数量

- -

减少一个页面引用的文件数量可以降低在下载一个页面的过程中需要的HTTP请求数量，从而减少这些请求的收发时间。

- -

根据其缓存设置，浏览器可能会为每个所引用的文件发送一个带 If-Modified-Since 的请求给网络服务器，以查询这些文件自上次加载后是否有被修改。查询引用文件上次修改时间会花费太多时间，导致网页首屏延迟，这是因为在渲染页面之前浏览器必须确认每个文件的修改时间。

- -

If you use background images a lot in your CSS, you can reduce the number of HTTP lookups needed by combining the images into one, known as an image sprite. Then you just apply the same image each time you need it for a background and adjust the x/y coordinates appropriately. This technique works best with elements that will have limited dimensions, and will not work for every use of a background image. However, the fewer HTTP requests and single image caching can help reduce page-load time.

- -

使用 CDN

- -

For the purposes of this article, a CDN is a means to reduce the physical distance between your server and your visitor. As the distance between your server origin and visitor increases, the load times will increase. Suppose your website server is located in the United States and it has a visitor from India; the page load time will be much higher for the Indian visitor compared to a visitor from the US.

- -

A CDN is a geographically distributed network of servers that work together to shorten the distance between the user and your website. CDNs store cached versions of your website and serve them to visitors via the network node closest to the user, thereby reducing latency.

- -

Further reading:

- - - -

减少域名查找

- -

每个独立的域名都会消耗DNS查找的时间，页面加载时间会随着独立域名数量、CSS链接数量、JavaScript还有图片资源的数量增加而增加。

- -

这条可能算不上实用，然而，在你的页面中尽量少的使用来自不同域名的资源链接。

- - - -

缓存重用的内容

- -

确保任何内容可以被缓存，并且拥有一个合理的有效期。

- -

特别要注意 Last-Modified 头，它会让页面高效的缓存。 自上次修改之后，这部分 header 指示将信息传递给用户代理（要加载这些信息的文件）。大部分网页服务器会自动追加 Last-Modified header 部分到静态页面（如 .html，.css），基于上次修改的日期储存在文件系统中。至于动态页面（如 .php，.aspx），便无法做到，这部分请求的头也就不会被发送出去。

- -

所以，特别是动态产生的页面，花点时间研究一下这个课题会是有益的。或许有些什么关联，无论怎样，这么做在那些不能被缓存的网页中都会节省很多的页面请求。

- -

更多信息：

- -
    -
  1. HTTP Conditional Get for RSS Hackers
    2. -
  2. HTTP 304: Not Modified
    3. -
  3. HTTP ETag on Wikipedia
    4. -
  4. Caching in HTTP
    5. -
- -

高效地排列页面组件

- -

在页面最初显示时，会首先下载页面内容以及所需的CSS和JavaScript，这样在页面加载时用户可以最快获得外观的反馈。由于内容通常都是文本，有利于在传输过程中压缩，因此给用户以更快的响应。

- -

页面中任何具有动态特性的资源需要在页面被完全加载后才可以使用，所以最好在初始化时关闭动态特性（disable dynamic features ），等页面加载完后再打开它。这样JavaScript就会在网页内容之后才加载，有助于提升页面加载的整体表现。

- -

减少内联脚本的数量

- -

内联脚本在页面加载过程中消耗很多资源，因为解析器认为内联脚本会改变页面结构。通常，尽量少的使用内联脚本和减少用document.write()来输出内容，在一定情况下可以加速整体页面的载入。现在浏览器中一般使用现代的 W3C DOM 方法操作页面内容，优于使用document.write()的传统方法。

- -

使用现代CSS和合法标记

- -

使用现代CSS减少标记（markup）的用量，可以减少对（spacer）图片的需求。在布局方面，图片通常可以用风格化的文本（text）来替代，这样会“节省”许多资源。

- -

使用合法标记还有其它优点。首先，浏览器在解释HTML时无需做错误校正（除了一些哲理性的问题，例如，是允许用户输入格式不一致，而后再用程序“校准”或统一化呢？ 还是加强约束规则，限制用户输入的格式？）。

- -

再者，合法标记可以让那些给你的网站做预处理的工具功能最大化。例如，HTML Tidy 可以移除空白（whitespace）和可选的末尾标记（ending tags）；然而，在有严重的错误标记的网页中这些工具便无法工作。

- -

给内容分块

- -

使用 table 布局是一种不应该再采用的传统方法，而应运用 floats, positioning, flexbox, 或 grids 来布局。

- -

当然，table 仍是不失为一种有效的展示表格数据的方式。为了帮助浏览器更快速的渲染你的页面，你应该避免嵌套 table。

- -

相较于这种深度的嵌套：

- -
<table>
-  <table>
-    <table>
-          ...
-    </table>
-  </table>
-</table>
- -

用下图这样的非嵌套结构更好一些：

- -
<table>...</table>
-<table>...</table>
-<table>...</table>
- -

可参见 CSS Flexible Box Layout 和 CSS Grid Layout 规范。

- -

Minify and compress SVG assets

- -

SVG produced by most drawing applications often contains unnecessary metadata which can be removed. Configure your servers, apply gzip compression for SVG assets.

- -

Minify and compress your images

- -

Large images cause your page to take more time to load. Consider compressing your images before adding them to your page, using compression features built into image-manipulation tools such as Photoshop, or using a specialized tool such as Compress Jpeg or Tiny PNG,.

- -

指定图像和表格的大小

- -

如果浏览器可以即时决定你的照片（images）和表格（tables）宽高，它在展示网页时就不必进行内容重新排版。这不仅可以加速网页的显示，还能在网页完成加载的过程中防止恼人的布局改变。因此，图片的 height 和 width 应尽可能确定下来。

- -

表格可以使用 CSS 选择器：综合性能：

- -
table-layout: fixed;
- -

用 <col> 和 <colgroup> 元素来指定列宽。

- -

合理的选择 user-agent

- -

为使页面设计得到极大提升，应确保在工程中指定一个合理的user-agent。不要奢求你的内容在所有浏览器中都完美的展现，特别是在那些低版本的浏览器中。

- -

理想情况下，你的页面运行的最小环境要基于现代浏览器，这个浏览器起码要支持一些相关的标准（如 html5 标准）。可以是最近版本的火狐，IE，谷歌Chrome，Opera还有Safari。

- -

需要注意一下，这篇文章当中的许多tips都是些技术性常识，可以不必担心浏览器的支持需求而应用到任何user-agent和网页中去。

- -

尽可能使用 async 和 defer

- -

确保 JavaScript 脚本兼容 async 和 defer，任何时候都要尽可能使用  async ，特别是当你有较多的 script 标签时。

- -

这样在加载 JavaScript 的过程中页面就不会重新绘制，否则，浏览器在不具有这些特性的 script 标签后就不会重绘任何东西。

- -

注意：这些特性在页面第一次加载时会有所帮助，你可以这样用但不能指靠它在所有的浏览器中起作用。如果你遵循指南（guidelines）写出了非常优秀的 JavaScript 代码，也不必要再去修改它了。

- -

页面结构示例

- -

· {{htmlelement('html')}}

- -
-
· {{htmlelement('head')}}
-
- -
-
-
-
· {{htmlelement('link')}} ...
- CSS 文件用来修饰页面外观。在调试维护中把不相关的 CSS 拆分在不同文件中，且尽量减少文件的数量可以提高性能。
-
-
-
- -
-
-
-
· {{htmlelement('script')}} ...
- JavaScript 文件用来实现页面加载时需要的函数，而避免在页面加载后才能运行的 JavaScript。
-
在调试维护中把不相关的 JavaScript 拆分在不同文件中，且尽量减少文件的数量可以提高性能。
-
-
-
- -
-
· {{htmlelement('body')}}
-
· 用户能在完整页面下载完之前就可以看到的页面小分块 ( {{htmlelement('header')}}/ {{htmlelement('main')}}/ {{htmlelement('table')}}) 。
-
- -
-
-
-
· {{htmlelement('script')}} ...
-
DHTML 脚本通常在页面完全加载或者所有必要的对象（objects）已初始化完毕之后才能运行。没有必要在页面内容之前加载这些脚本，这只会拖慢页面加载和初始化的体验。
-
在调试维护中把不相关的 script 拆分在不同文件中，且尽量减少文件的数量可以提高性能。
-
如有图像用到了反转效果，你应该在页面内容下载完后预加载这些图像。
-
-
-
- - - - - -
-

文章原始信息

- - -
- -
- -

{{ languages( { "en": "en/Tips_for_Authoring_Fast-loading_HTML_Pages", "ja": "ja/Tips_for_Authoring_Fast-loading_HTML_Pages", "pl": "pl/Porady_odno\u015bnie_tworzenia_szybko_\u0142aduj\u0105cych_si\u0119_stron_HTML" } ) }}

diff --git a/files/zh-cn/web/guide/html/using_data_attributes/index.html b/files/zh-cn/web/guide/html/using_data_attributes/index.html deleted file mode 100644 index 009517f416..0000000000 --- a/files/zh-cn/web/guide/html/using_data_attributes/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: 使用数据属性 -slug: Web/Guide/HTML/Using_data_attributes -tags: - - Custom Data Attributes - - HTML5 -translation_of: Learn/HTML/Howto/Use_data_attributes ---- -

{{LearnSidebar}}

- -

HTML5是具有扩展性的设计，它初衷是数据应与特定的元素相关联，但不需要任何定义。data-* 属性允许我们在标准内于HTML元素中存储额外的信息，而不需要使用类似于 classList，标准外属性，DOM额外属性或是 setUserData 之类的技巧。

- -

HTML 语法

- -

语法非常简单。所有在元素上以data-开头的属性为数据属性。比如说你有一篇文章，而你又想要存储一些不需要显示在浏览器上的额外信息。请使用data属性：

- -
<article
-  id="electriccars"
-  data-columns="3"
-  data-index-number="12314"
-  data-parent="cars">
-...
-</article>
- -

JavaScript 访问

- -

在外部使用JavaScript去访问这些属性的值同样非常简单。你可以使用{{domxref("Element.getAttribute", "getAttribute()")}}配合它们完整的HTML名称去读取它们，但标准定义了一个更简单的方法：{{domxref("DOMStringMap")}}你可以使用{{domxref("HTMLElement.dataset", "dataset")}}读取到数据。

- -

为了使用dataset对象去获取到数据属性，需要获取属性名中data-之后的部分(要注意的是破折号连接的名称需要改写为骆驼拼写法(如"index-number"转换为"indexNumber"))。

- -
var article = document.querySelector('#electriccars');
-
-article.dataset.columns // "3"
-article.dataset.indexNumber // "12314"
-article.dataset.parent // "cars"
- -

每一个属性都是一个可读写的字符串。在上面的例子中，article.dataset.columns = 5.将会调整属性的值为5。

- -

CSS 访问

- -

注意，data设定为HTML属性，他们同样能被CSS访问。比如你可以通过generated content使用函数{{cssxref("attr")}}来显示data-parent的内容：

- -
article::before {
-  content: attr(data-parent);
-}
- -

你也同样可以在CSS中使用属性选择器根据data来改变样式：

- -
article[data-columns='3'] {
-  width: 400px;
-}
-article[data-columns='4'] {
-  width: 600px;
-}
- -

你可以在这个JSBin 里看到全部演示。

- -

Data属性同样可以存储不断变化的信息，比如游戏的得分。使用CSS选择器与JavaScript去访问可以让你得到花俏的效果，这里你并不需要用常规的编写方案来编写代码。有关使用生成内容和CSS转换（JSBin示例）的示例，请参阅此视频。

- -

数据值是字符串。必须在选择器中引用数值才能使样式生效。

- -

Issues

- -

不要在data attribute里储存需要显示及访问的内容，因为一些其他的技术可能访问不到它们。另外爬虫不能将data attribute的值编入索引中。

- -

IE的支持度及显示效果是最主要讨论的问题。IE11+支持这个标准，但所有更早期的版本都不支持dataset。为了支持IE10及以下的版本，你必须使用{{domxref("Element.getAttribute", "getAttribute()")}} 来访问。另外，读取 data-attributes的行为相比JS存储数据会慢。使用dataset 会比使用getAttribute()读取数据来得慢。

- -

尽管如此,对于那些与元素相关的数据,这依然是一个很好的解决方案.

- -

在FireFox 49.0.2(其他版本也有可能)中,javascript将无法读出包含1022个及以上字符的data属性(EcmaScript 4).

- -

参阅

- -
 
- - diff --git a/files/zh-cn/web/guide/html/using_html5_audio_and_video/index.html b/files/zh-cn/web/guide/html/using_html5_audio_and_video/index.html deleted file mode 100644 index f1ebacd184..0000000000 --- a/files/zh-cn/web/guide/html/using_html5_audio_and_video/index.html +++ /dev/null @@ -1,275 +0,0 @@ ---- -title: 使用 HTML5 音频和视频 -slug: Web/Guide/HTML/Using_HTML5_audio_and_video -tags: - - Flash - - HTML - - HTML5 - - Media - - Ogg - - Web - - 媒体 - - 指南 - - 概述 - - 特性 - - 范例 - - 视频 - - 音频 -translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content -translation_of_original: Web/Guide/HTML/Using_HTML5_audio_and_video ---- -

HTML5 通过HTML标签“audio”和“video”来支持嵌入式的媒体，使开发者能够方便地将媒体嵌入到HTML文档中。

- -

嵌入媒体

- -

在HTML中嵌入媒体：

- -
-
<video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls>
-  你的浏览器不支持 <code>video</code> 标签.
-</video>
- -

这个例子展示了一个带有回放控制器的可播放视频，视频来源于Theora网站。

- -

下面是一个将音频嵌入到HTML文档的例子。

- -
<audio src="/test/audio.ogg">
-你的浏览器不支持audio标签
-</audio>
-
- -

src属性可以设置为一个音频文件的URL或者本地文件的路径。

- -
-
<audio src="audio.ogg" controls autoplay loop>
-你的浏览器不支持audio标签
-</audio>
-
- -

这个例子的代码中使用了HTML的“audio”元素的一些属性：

- - - -
-
<audio src="audio.mp3" preload="auto" controls></audio>
-
- -

preload属性用来缓冲audio元素的大文件，有三个属性值可供设置：

- - - -

可以用 {{ HTMLElement("source") }} 标签来指定多个文件，以为不同浏览器提供可支持的编码格式。例如：

- -
<video controls>
-  <source src="foo.ogg" type="video/ogg">
-  <source src="foo.mp4" type="video/mp4">
-  Your browser does not support the <code>video</code> element.
-</video>
-
- -

当浏览器支持Ogg格式的时候， 该代码会播放Ogg文件。 如果浏览器不支持Ogg，浏览器会播放MPEG-4 file。参见列表 audio和video元素支持的媒体格式 来查看不同浏览器对视频音频编码格式的支持情况。

- -

你也可以指定视频文件需要的视频编解码器的值；这样允许浏览器做出更加正确的决定：

- -
<video controls>
-  <source src="foo.ogg" type="video/ogg; codecs=dirac, speex">
-  Your browser does not support the <code>video</code> element.
-</video>
- -

在这里，我们指定video标签使用Dirac和Speex的视频编解码器。如果浏览器支持Ogg，但是不支持指定的编解码器，则视频不会被加载。

- -

如果类型属性没有被指定，媒体类型将返回至服务器然后检查浏览器是否可以解决；如果不能被执行，就检查下一个来源。如果没有任何一个指定的来源元素可以使用，则分派一个错误事件给video标签。如果指定了类型属性，那么将会与浏览器能够播放的类型做对比，如果其没有被识别，甚至不会被向服务器发出询问；相反，下一个来源会被同时检查。

- -

点击 媒体事件 来查看完整的媒体回放事件列表。要查看不同浏览器支持的媒体格式的详细信息， 点击 Media formats supported by the audio and video elements.

- -

媒体回放控制

- -

当你已经用新的元素将媒体嵌入 HTML 文档以后，你就可以用 JavaScript 代码 采用编程的方式来控制它们。比如说，如果你想（重新）开始播放，可以写如下的代码：

- -
var v = document.getElementsByTagName("video")[0];
-v.play();
-
- -

头一行是取得当前文档中第一个视频元素，下一行调用了该元素的 play() 方法， 这一方法在实现媒体元素的接口中定义。

- -

控制一个 HTML5 音频播放器的播放、暂停、增减音量等则直接了当：

- -
<audio id="demo" src="audio.mp3"></audio>
-<div>
-  <button onclick="document.getElementById('demo').play()">播放声音</button>
-  <button onclick="document.getElementById('demo').pause()">暂停声音</button>
-  <button onclick="document.getElementById('demo').volume+=0.1">提高音量</button>
-  <button onclick="document.getElementById('demo').volume-=0.1">降低音量</button>
-</div>
-
- -

终止媒体下载

- -

停止媒体播放很简单，只要调用 pause() 方法即可，然而浏览器还会继续下载媒体直至媒体元素被垃圾回收机制回收。

- -

以下是即刻停止媒体下载的方法：

- -
var mediaElement = document.getElementById("myMediaElementID");
-mediaElement.pause();
-mediaElement.src='';
-//or
-mediaElement.removeAttribute("src");
-
- -

通过移除媒体元素的 src 属性（或者直接将其设为一个空字符串——这取决于具体浏览器）， 你可以摧毁该元素的内部解码，从而结束媒体下载。removeAttribute() 操作并不干净， 而将<video>元素的 'src' 属性设为空字符串可能会引起我们不想要的请求（Mozilla Firefox 22）。

- -

 

- -

在媒体中查找

- -

媒体元素支持在媒体的内容中从当前播放位置移到某个特定点。 这是通过设置元素的属性currentTime的值来达成的；有关元素属性的详细信息请看{{ domxref("HTMLMediaElement") }} 。 简单的设置那个你希望继续播放的以秒为单位时间值。

- -

你可以使用元素的属性seekable来决定媒体目前能查找的范围。它返回一个你可以查找的{{ domxref("TimeRanges") }} 时间对象。

- -
var mediaElement = document.getElementById('mediaElementID');
-mediaElement.seekable.start();  // 返回开始时间 (in seconds)
-mediaElement.seekable.end();    // 返回结束时间 (in seconds)
-mediaElement.currentTime = 122; // 设定在 122 seconds
-mediaElement.played.end();      // 返回浏览器播放的秒数
-
- -

标记播放范围

- -

在给一个<audio>或者<video>元素标签指定媒体的URI的时候，你可以选择性地加入一些额外信息来指定媒体将要播放的部分。要这样做的话，需要附加一个哈希标志("#")，后面跟着媒体片段的描述。

- -

一条指定时间范围的语句：

- -
#t=[starttime][,endtime]
- -

时间值可以被指定为秒数（如浮点数）或者为以冒号分隔时/分/秒格式（像2小时5分钟1秒表示为2:05:01）。

- -

一些例子：

- -
-
http://foo.com/video.ogg#t=10,20
-
指定视频播放范围为从第10秒到第20秒.
-
http://foo.com/video.ogg#t=,10.5
-
指定视频从开始播放到第10.5秒.
-
http://foo.com/video.ogg#t=,02:00:00
-
指定视频从开始播放到两小时.
-
http://foo.com/video.ogg#t=60
-
指定视频从第60秒播放到结束.
-
- -
-

媒体元素URI中播放范围部分的规范已被加入到 Gecko 9.0 {{ geckoRelease("9.0") }}. 当下, 这是Geoko Media Fragments URI specification 唯一实现的部分，并且只有是在非地址栏给媒体元素指定来源时才可使用。

-
- -

备选项

- -

在HTML之间，例如，不支持HTML5媒体的浏览器可以处理媒体元素的开始和结束标记.你可以利用这一点给这些浏览器添加一些备项。

- -

此节给视频提供了两个可能的备选项，在各种情况下，如果浏览器支持HTML5视频，它就会被使用，否则，会使用备选项。

- -

使用Flash

- -

{{ HTMLElement("video") }} 标签不被支持时可以使用Flash播放Flash格式的影像。

- -
<video src="video.ogv" controls>
-    <object data="flvplayer.swf" type="application/x-shockwave-flash">
-      <param value="flvplayer.swf" name="movie"/>
-    </object>
-</video>
- -

注意不要在object标签中加入class、id以兼容IE以外的浏览器。

- -

使用Java 小程序播放Ogg视频

- -

这里有一个名为Cortado的Java小程序，在不支持HTML5视频的浏览器你可以用它作为备选项来播放Ogg视频:

- -
<video src="my_ogg_video.ogg" controls width="320" height="240">
-  <object type="application/x-java-applet" width="320" height="240">
-     <param name="archive" value="cortado.jar">
-     <param name="code" value="com.fluendo.player.Cortado.class">
-     <param name="url" value="my_ogg_video.ogg">
-     <p>You need to install Java to play this file.</p>
-  </object>
-</video>
- -

如果你没有给cortado object元素创建一个备用的子元素，像上面的 {{ HTMLElement("p") }} 元素，没有安装java的Firfox3.5设备就会错误的通知用户需要安装一个插件才能查看页面内容.

- -

{{ h1_gecko_minversion("错误处理", "2.0") }}

- -

Geocko2.0首发{{ geckoRelease("2.0") }}, 错误处理已经被修订符合HTML5的最新版规范。 取缔把错误事件发送给媒体元素自生的方式，现在把它交付给子代中的 {{ HTMLElement("source") }}元素对应导致错误的来源。

- -

这使你可以查到是哪个资源加载失败，哪个是可用的。

- -
<video>
-<source id="mp4_src"
-  src="video.mp4"
-  type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
-</source>
-<source id="3gp_src"
-  src="video.3gp"
-  type='video/3gpp; codecs="mp4v.20.8, samr"'>
-</source>
-<source id="ogg_src"
-  src="video.ogv"
-  type='video/ogg; codecs="theora, vorbis"'>
-</source>
-</video>
- -

由于专利限制，Firefox不支持MP4和3GP，ID为“mp4_src"和"3gp_src"的 {{ HTMLElement("source") }} 元素在Ogg资源加载之前将会接收到错误事件。这些资源会根据出现的顺序尝试被加载，一旦有一个资源加载成功，剩下的资源就不会被加载。

- -

没有资源加载成功时的检测

- -

检测是否所有的子{{ HTMLElement("source") }} 元素都加载失败，检查媒体元素的networkState属性值。如果值为HTMLMediaElement.NETWORK_NO_SOURCE，就可以知道所以的资源都加载失败了。

- -

如果这时你通过插入一个新的 {{ HTMLElement("source") }} 元素作为媒体元素的子元素的方法添加一个新资源，Gecko会尝试加载指定的资源。

- -

没有资源可用时显示备用内容

- -

另一个显示视频的备用内容的方法是在最后一个source元素上增加一个错误处理器。

- -
<video controls>
-  <source src="dynamicsearch.mp4" type="video/mp4"></source>
-  <a href="dynamicsearch.mp4">
-    <img src="dynamicsearch.jpg" alt="Dynamic app search in Firefox OS">
-  </a>
-  <p>Click image to play a video demo of dynamic app search</p>
-</video>
-
-
- -
var v = document.querySelector('video'),
-    sources = v.querySelectorAll('source'),
-    lastsource = sources[sources.length-1];
-lastsource.addEventListener('error', function(ev) {
-  var d = document.createElement('div');
-  d.innerHTML = v.innerHTML;
-  v.parentNode.replaceChild(d, v);
-}, false);
-
- -

相关文章

- - diff --git a/files/zh-cn/web/guide/html/using_html_sections_and_outlines/index.html b/files/zh-cn/web/guide/html/using_html_sections_and_outlines/index.html new file mode 100644 index 0000000000..2eeb6fe100 --- /dev/null +++ b/files/zh-cn/web/guide/html/using_html_sections_and_outlines/index.html @@ -0,0 +1,377 @@ +--- +title: 使用 HTML 章节与大纲 +slug: Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document +tags: + - HTML + - HTML5 + - 指南 + - 文档结构 + - 高阶 +translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines +--- +
+

（下方英文原文警告的过时已翻译版本）注意：下面描述的HTML 5 大纲算法在用户代理中还没有实现，因此，使用标题语义的用户暴露在HTML4的文档结构下。HTML5对问题的描述还仅仅是理论上的。

+
+ +
+

Important: There are no implementations of the proposed outline algorithm in web browsers nor assistive technology; it was never part of a final W3C specification. Therefore the outline algorithm should not be used to convey document structure to users. Authors are advised to use heading rank (h1-h6) to convey document structure.

+
+ +

HTML5新增了几个新元素使得开发者可以用标准语义去描述web文档的结构。本文描述了这些元素并说明如何使用这些元素去为任何文档定义纲要。

+ +

HTML 4 的文档结构

+ +

文档结构，即，<body> 与 </body> 标记之间内容的语义结构，对呈现页面给用户是重要的。HTML4用文档中章节和子章节的概念去描述文档结构。一个章节由一个包含着标题元素（h1-h6）的div元素表示。这些html划分元素（HTML Dividing Elements）和标题元素（HTML Heading Elements）形成了文档的结构和纲要。

+ +

所以下面的片段：

+ +
+
<div class="section" id="forest-elephants" >
+  <h1>Forest elephants</h1>
+  <p>In this section, we discuss the lesser known forest elephants.
+    ...this section continues...
+  <div class="subsection" id="forest-habitat" >
+    <h2>Habitat</h2>
+    <p>Forest elephants do not live in trees but among them.
+     ...this subsection continues...
+  </div>
+</div>
+
+
+ +

形成了如下的大纲：

+ +
1. Forest elephants
+   1.1 Habitat
+
+ +

HTML div 元素（ {{HTMLElement("div")}} elements）并不强制性地定义一个章节。一个 HTML 标题元素（ HTML Heading Element）的出现就足以意味着新的章节. 因此,

+ +
<h1>Forest elephants</h1>
+  <p>In this section, we discuss the lesser known forest elephants.
+    ...this section continues...
+  <h2>Habitat</h2>
+  <p>Forest elephants do not live in trees but among them.
+    ...this subsection continues...
+  <h2>Diet</h2>
+<h1>Mongolian gerbils</h1>
+
+ +

会形成如下的大纲:

+ +
1. Forest elephants
+   1.1 Habitat
+   1.2 Diet
+2. Mongolian gerbils
+
+ +

HTML5 解决的问题

+ +

HTML 4 的文档结构定义和其隐含的大纲算法非常粗糙而且造成了很多问题：

+ +
    +
  1.  定义语义性章节的{{HTMLElement("div")}} 元素的用法,如果没有为class属性赋以特殊的值，使生成自动生成大纲的算法变得不可能 ("一个div元素{{HTMLElement("div")}} 是不是大纲的一部分, 定义的是章节还是子章节?" 或者 "该div元素 {{HTMLElement("div")}}是仅仅为了样式化?")。换句话说, HTML4规范在章节的定义和章节的范围都不精确。 自动生成大纲是重要的,尤其是在倾向于通过根据文档大纲内容去展示内容的辅助技术（ assistive technology）。 HTML5 在自动生成大纲算法的过程中去掉了div元素（{{HTMLElement("div")}}），并新增了一个元素，section元素（{{HTMLElement("section")}}）。
    2. +
  2. 合并多个文档是困难的：主文档中包含子文档意味着改变HTML标题元素的级别，以使得文档大纲能够保持下来。 这个已经被HTML5的新的章节元素解决了，因为新引入的元素（{{HTMLElement("article")}}、{{HTMLElement("section")}}、{{HTMLElement("nav")}} 和 {{HTMLElement("aside")}}）总是距离其最近的祖先章节的子章节, 与子文档章节内部的标题没有关系.
    3. +
  3. HTML4中，所有的章节都是文档大纲中的一部分。但是文档并不总是这样。文档可以包含那些不是大纲的特殊章节, 但是与文档有关的, 就像广告块和解释区域。 HTML5 引入aside元素 {{HTMLElement("aside")}}使得这样的节点不会插入到主纲要中。 
    4. +
  4. 另外, 因为在 HTML4中任何的部分都是文档大纲的一部分, 没有办法产生与网站相关而不是与文档相关的节段，比如logos,menus,目录或版权信息和法律声明。为了这个目的, HTML5 引入了三个特殊的节段 元素： 包含链接集合的nav元素{{HTMLElement("nav")}} , 例如目录, 包含网站相关信息的footer元素{{HTMLElement("footer")}} 和header元素 {{HTMLElement("header")}} 。
    5. +
+ +

更具有普遍意义的是HTML5使得章节和标题特性更精确。使得文档大纲变的可预测，浏览器使用后也可以提高用户体验。

+ +

HTML5 的大纲算法

+ +

定义节段

+ +

 {{HTMLElement("body")}} 元素中的所有内容都是节段中的一部分。节段在 HTML5 中是可以嵌套的。{{HTMLElement("body")}} 元素定义了主节段，基于主节段，可以显式或隐式定义各个子节段的划分。显式定义的节段是通过{{HTMLElement("body")}},  {{HTMLElement("section")}},  {{HTMLElement("article")}},  {{HTMLElement("aside")}}和 {{HTMLElement("nav")}} 这些标记中的内容。 

+ +
注意：每个section可以有自己的标题结构。因此，即使是一个嵌套的section也能有{{HTMLElement("h1")}}. 具体查看 Defining Headings in HTML5.
+ +

Example:

+ +
<section>
+  <h1>Forest elephants</h1>
+  <section>
+    <h1>Introduction</h1>
+    <p>In this section, we discuss the lesser known forest elephants.</p>
+  </section>
+  <section>
+    <h1>Habitat</h1>
+    <p>Forest elephants do not live in trees but among them.</p>
+  </section>
+  <aside>
+    <p>advertising block</p>
+  </aside>
+</section>
+<footer>
+  <p>(c) 2010 The Example company</p>
+</footer>
+ +

这个HTML片段定义了两个顶级节段：

+ +
<section>
+  <h1>Forest elephants</h1>
+  <section>
+    <h1>Introduction</h1>
+    <p>In this section, we discuss the lesser known forest elephants.</p>
+  </section>
+  <section>
+    <h1>Habitat</h1>
+    <p>Forest elephants do not live in trees but among them.</p>
+  </section>
+  <aside>
+    <p>advertising block</p>
+  </aside>
+</section>
+
+<footer>
+  <p>(c) 2010 The Example company</p>
+</footer>
+ +

第一个节段有三个子节段：

+ +
<section>
+  <h1>Forest elephants</h1>
+
+  <section>
+    <h1>Introduction</h1>
+    <p>In this section, we discuss the lesser known forest elephants.</p>
+  </section>
+
+  <section>
+    <h1>Habitat</h1>
+    <p>Forest elephants do not live in trees but among them.</p>
+  </section>
+
+  <aside>
+    <p>advertising block</p>
+  </aside>
+</section>
+
+<footer>
+  <p>(c) 2010 The Example company</p>
+</footer>
+ +

上面的片段形成了如下的大纲:

+ +
1. Forest elephants
+   1.1 Introduction
+   1.2 Habitat
+   1.3 Section (aside)
+
+ +

在HTML5中定义标题

+ +

当 HTML 节段元素定义文档结构时，文档大纲也需要有用的标题。基本规则是简单的：第一个 HTML 标题元素（{{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}之一）定义了当前节段的标题

+ +

标题元素通过在元素里的名字加上数字来分级标题元素，{{HTMLElement("h1")}} 元素有最高级别，{{HTMLElement("h6")}} 有最低级别。相关的级别只在节段中起作用；节段的结构定义了大纲，而不是节段的标题。例如，下面的代码：

+ +
<section>
+  <h1>Forest elephants</h1>
+  <p>In this section, we discuss the lesser known forest elephants.
+    ...this section continues...
+  <section>
+    <h2>Habitat</h2>
+    <p>Forest elephants do not live in trees but among them.
+        ...this subsection continues...
+  </section>
+</section>
+<section>
+  <h3>Mongolian gerbils</h3>
+  <p>In this section, we discuss the famous mongolian gerbils.
+     ...this section continues...
+</section>
+ +

形成了下面的大纲:

+ +
1. Forest elephants
+   1.1 Habitat
+2. Mongolian gerbils
+ +

注意标题元素的级别（例子中的第一个顶层节段的 {{HTMLElement("h1")}}，子节段中的{{HTMLElement("h2")}} 和第二个顶层节段中的{{HTMLElement("h3")}}）并不重要。（任何级别可以用作显示定义的节段的标题，虽然这种做法并不推荐。）

+ +

隐式分节

+ +

因为HTML5分节元素并不强制性定义大纲，为了与现有的占主导地位的HTML4保持兼容，有个方式来定义节段而不需要分节元素。这种方式就是隐式分节。

+ +

HTML标题元素 ({{HTMLElement("h1")}} 到 {{HTMLElement("h6")}}) 定义了一个新的，隐式的节段，当其不是父节段第一个标题时。这种隐式放置节段的方式通过在父节点中与之前标题的相对级别来定义。如果比之前的标题级别更低，那么在节段里开始新的隐式子节段。如代码所示：

+ +
<section>
+  <h1>Forest elephants</h1>
+  <p>In this section, we discuss the lesser known forest elephants.
+    ...this section continues...
+  <h3 class="implicit subsection">Habitat</h3>
+  <p>Forest elephants do not live in trees but among them.
+    ...this subsection continues...
+</section>
+ +

形成如下的大纲:

+ +
1. Forest elephants
+   1.1 Habitat (implicitly defined by the h3 element)
+ +

如果与前面标题的级别相同，那么闭合前面的节段（可能是显式标记的节段！）并开始新的同一级别的隐式节段：

+ +
<section>
+  <h1>Forest elephants</h1>
+  <p>In this section, we discuss the lesser known forest elephants.
+    ...this section continues...
+  <h1 class="implicit section">Mongolian gerbils</h1>
+  <p>Mongolian gerbils are cute little mammals.
+    ...this section continues...
+</section>
+ +

形成如下的大纲：

+ +
1. Forest elephants
+2. Mongolian gerbils (implicitly defined by the h1 element, which closed the previous section at the same time)
+ +

如果比之前标题的级别更高，那么关闭之前的节段并开始新的这个更高级别的隐式节段：

+ +
<body>
+  <h1>Mammals</h1>
+  <h2>Whales</h2>
+  <p>In this section, we discuss the swimming whales.
+    ...this section continues...
+  <section>
+    <h3>Forest elephants</h3>
+    <p>In this section, we discuss the lesser known forest elephants.
+      ...this section continues...
+    <h3>Mongolian gerbils</h3>
+      <p>Hordes of gerbils have spread their range far beyond Mongolia.
+         ...this subsection continues...
+    <h2>Reptiles</h2>
+      <p>Reptiles are animals with cold blood.
+          ...this subsection continues...
+  </section>
+</body>
+ +

形成如下的大纲：

+ +
1. Mammals
+   1.1 Whales (implicitly defined by the h2 element)
+   1.2 Forest elephants (explicitly defined by the section element)
+   1.3 Mongolian gerbils (implicitly defined by the h3 element, which closes the previous section at the same time)
+2. Reptiles (implicitly defined by the h2 element, which closes the previous section at the same time)
+ +

这并不是一眼就可以通过标题标记就可以看出来的大纲。为了使标记容易理解，用显式的标记开始和闭合节段以及匹配标题等级与期望的嵌套节段等级。然而，HTML5规范并不需要这样。如果你发现浏览器以不期望的方式渲染文档，检查是否有隐式的节段没有闭合。

+ +

作为经验法则，标题级别应该与节段嵌套级别相匹配，但为了方便节段在多个文档中的重用，也存在例外的情况。例如，一个节段可能会存储在内容管理系统中并在运行时组装为完整的文档。在这种情况下，好的实践便是使用{{HTMLElement("h1")}}作为可重用部分的最高标题级别。可重用节段的嵌套级别应该取决于将使用该节段的文档的节段层级。显式节段标记仍然在这种情况下有用处。

+ +

分节根

+ +

分节根是一个HTML元素，这个元素可以拥有自己的大纲，但是元素内部的节段和标题对其祖先的大纲没有贡献。除了文档的逻辑分节根{{HTMLElement("body")}}元素，这些元素经常在页面中引入外部内容：{{HTMLElement("blockquote")}}, {{HTMLElement("details")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}} 和{{HTMLElement("td")}}。

+ +

Example:

+ +
<section>
+  <h1>Forest elephants</h1>
+  <section>
+    <h2>Introduction</h2>
+    <p>In this section, we discuss the lesser known forest elephants</p>
+  </section>
+  <section>
+    <h2>Habitat</h2>
+    <p>Forest elephants do not live in trees but among them. Let's
+       look what scientists are saying in "<cite>The Forest Elephant in Borneo</cite>":</p>
+    <blockquote>
+       <h1>Borneo</h1>
+       <p>The forest element lives in Borneo...</p>
+    </blockquote>
+  </section>
+</section>
+
+ +

例子形成如下的大纲:

+ +
1. Forest elephants
+   1.1 Introduction
+   1.2 Habitat
+ +

这个大纲并不包含 {{HTMLElement("blockquote")}} 元素的内部大纲。{{HTMLElement("blockquote")}} 元素是一个外部引用，是一个分节根并隔离了他内部的大纲

+ +

大纲之外的节段

+ +

HTML5引入了2个新的元素，用来定义那些不属于web文档主要大纲中的节段。

+ +
    +
  1. HTML 侧边分节元素 ({{HTMLElement("aside")}}) 定义了这样的节段, 虽然是主要的分节元素, 但并不属于主要的文档流, 就像解释栏或广告栏. aside元素内部有自己的大纲，但并不计入文档大纲中
    2. +
  2. HTML 导航分节元素 ({{HTMLElement("nav")}}) 定义的节段包含了很多导航links。文档中可以有好几个这样的元素，比如文档内部的链接，就像目录，和链接到其他站点的导航links。这些链接并不是主文档流和文档大纲中的一部分 ，并且能够特别让屏幕浏览器和类似的辅助技术从一开始就不渲染该标记里的内容。
    3. +
+ +

页眉和页脚

+ +

HTML5引入了两个可以用于标记节段的页眉和页脚的新元素。

+ +
    +
  1. HTML 头部分节元素 ({{HTMLElement("header")}}) 定义了页面的页眉,通常会包含logo和站点名称以及水平菜单（如果有的话）。或是一个节段的头部，可能包含了节段的标题和作者名字等。{{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, and {{HTMLElement("nav")}}可以拥有它们自己的{{HTMLElement("header")}}。虽然名字是header，但是不一定是在页面的开始。
    2. +
  2. HTML 页脚元素 ({{HTMLElement("footer")}}) 定义了页脚, 通常会包含版权信息和法律声明以及一些其他链接。或是节段的页脚，可能包含了节段的发布数据、许可声明等。{{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, and {{HTMLElement("nav")}} 可以拥有它们自己的 {{HTMLElement("footer")}}。同样，其不一定是在页面的底部出现。
    3. +
+ +

分节元素中的地址和发表时间

+ +

文档的作者想要发布一些联系信息，例如作者的名字和地址。HTML4通过{{HTMLElement("address")}}元素来表示，HTML5则拓展了这个元素。

+ +

一个文档可以由不同作者的不同节段组成。一个从其他作者而不是文档作者写的节段用{{HTMLElement("article")}}元素定义。因此， {{HTMLElement("address")}} 元素连接到距离最近的{{HTMLElement("body")}}或{{HTMLElement("article")}} 祖先元素。

+ +

同样的，新的HTML5标记 {{HTMLElement("time")}}元素，使用{{htmlattrxref("pubdate", "time")}}布尔值，表示整个文档的发布时间，分别给文章，与其最近的{{HTMLElement("body")}}元素或{{HTMLElement("article")}} 元素的祖先元素相关。

+ +

在不支持HTML5的浏览器器中使用HTML5

+ +

分节和标题元素应该在大部分的不支持HTML5的浏览器中工作。尽管不支持，但不必使用特殊的DOM接口。仅仅只需要一个特殊的CSS样式，因为未知元素默认会样式化为display:inline：

+ +
section, article, aside, footer, header, nav, hgroup {
+  display:block;
+}
+
+
+ +

当然web开发者可以改变上面的样式结构，但是要记住的是在不支持HTML5浏览器中，这些元素默认的样式是与预期的样式是不同的。还要注意的是{{HTMLElement("time")}}元素并没有在这些元素中，因为其样式在不支持HTML5和兼容HTML5的浏览器中的表现是相同的。

+ +

然而这种方法有自己的局限性，因为一些浏览器并不允许样式化不支持的元素。这种情形出现在ie8及ie8以前的浏览器中，需要一个特殊脚本才行：

+ +
<!--[if lt IE 9]>
+  <script>
+    document.createElement("header" );
+    document.createElement("footer" );
+    document.createElement("section");
+    document.createElement("aside"  );
+    document.createElement("nav"    );
+    document.createElement("article");
+    document.createElement("hgroup" );
+    document.createElement("time"   );
+  </script>
+<![endif]-->
+ +

这段脚本表示，当在ie8（及ie8以前）的情况下，应该允许脚本的运行以合适地展示HTML5分节和标题元素。如果禁用了脚本，则不会显示，可能会出问题因为这些元素定义整个页面的结构。为了预防这种情况，我们需要加上{{HTMLElement("noscript")}}标签。

+ +
<noscript>
+   <strong>Warning !</strong>
+   Because your browser does not support HTML5, some elements are simulated using JScript.
+   Unfortunately your browser has disabled scripting. Please enable it in order to display this page.
+</noscript>
+ +

于是形成了如下的代码，允许HTML5节段和标题元素在不支持HTML5的浏览器中展示，即使是ie8（ie8以下版本）也在禁用脚本的情况下有了合适的反馈。

+ +
<!--[if lt IE 9]>
+  <script>
+    document.createElement("header" );
+    document.createElement("footer" );
+    document.createElement("section");
+    document.createElement("aside"  );
+    document.createElement("nav"    );
+    document.createElement("article");
+    document.createElement("hgroup" );
+    document.createElement("time"   );
+  </script>
+  <noscript>
+     <strong>Warning !</strong>
+     Because your browser does not support HTML5, some elements are simulated using JScript.
+     Unfortunately your browser has disabled scripting. Please enable it in order to display this page.
+  </noscript>
+<![endif]-->
+ +

总结

+ +

HTML5中新的节段和标题标签带来了以标准的方法来描述web文档的结构和大纲。其为人们使用HTML5浏览器和需要结构来帮助他们理解页面带来了一个很大的优势。例如，人们需要一些辅助技术的帮助。这些新的语义元素使用简单，几乎没有负担，也可以在不支持HTML5的浏览器中工作。因此，他们应该被广泛使用。

+ +
{{HTML5ArticleTOC()}}
diff --git a/files/zh-cn/web/guide/introduction_to_web_development/index.html b/files/zh-cn/web/guide/introduction_to_web_development/index.html new file mode 100644 index 0000000000..9178cb39f5 --- /dev/null +++ b/files/zh-cn/web/guide/introduction_to_web_development/index.html @@ -0,0 +1,28 @@ +--- +title: Web开发介绍 +slug: Web_Development/Introduction_to_Web_development +translation_of: Web/Guide/Introduction_to_Web_development +--- +

不论你是刚开始Web开发，还是想学习Web开发，这些链接都能帮助你。至少，立刻我们就能在这儿看到很多链接。

+
+ Note: This page is obviously a stub; we need to generate content here.
+ + + + + + + +
+

文档主题

+

暂无文章，欢迎补充。

+ 		+

资源

+
+
+ w3schools
+
+ 免费Web开发教程，从HTML入门到进阶Web技术。
+
+
+

 

diff --git a/files/zh-cn/web/guide/woff/index.html b/files/zh-cn/web/guide/woff/index.html new file mode 100644 index 0000000000..a91795c672 --- /dev/null +++ b/files/zh-cn/web/guide/woff/index.html @@ -0,0 +1,61 @@ +--- +title: 网页开放字体格式(WOFF) +slug: WOFF +tags: + - WOFF + - 字体 +translation_of: Web/Guide/WOFF +--- +

WOFF（网页开放字体格式） 是由 Mozilla 与 Type Supply, LettError 及其他组织协同开发的一种新的网页字体格式。它使用了一种压缩版本，类似于 TrueType, OpenType, Open Font 所采用的 SFNT 结构，不过还添加了共用数据及用户私有数据结构，其中包括了自定义空间，其允许厂家和经销商提供许可证。

+ +

WOFF 有以下三点优势：

+ +
    +
  1. 字体采用压缩格式，相对于使用不压缩的 TrueType, OpenType 的网站，将占用更少的带宽，获得更快的加载速度。
    2. +
  2. 许多字体经销商并不愿意将 TrueType 或 OpenType 的许可证颁发给网站，他们更愿意颁发 WOFF 的许可证。这对于网站开发者来说将是一个福音。
    3. +
  3. 无论是收费还是免费的浏览器厂家都喜欢 WOFF 格式，因此它很可能成为未来的主流与跨平台字体格式。
    4. +
+ +

使用 WOFF

+ +

通过 {{ cssxref("@font-face") }} 这个 CSS 属性来为你的网站使用 WOFF 字体。它的工作方式与 OpenType 和 TrueType 十分相似，除了因使用压缩技术而使你的内容更快地加载。

+ +

相关工具

+ + + +

文档

+ + + + + + + + + + + + + + + + + + + + + +
文档状态注释
{{SpecName('WOFF2.0', '', '')}}{{Spec2('WOFF2.0')}}新压缩算法
{{SpecName('WOFF1.0', '', '')}}{{Spec2('WOFF1.0')}}原始规格
+ +

浏览器兼容

+ +

{{Compat("css.at-rules.font-face")}}

+ +

参见

+ + -- cgit v1.2.3-54-g00ecf