diff options
Diffstat (limited to 'files/zh-cn/web/guide')
52 files changed, 89 insertions, 9839 deletions
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 ---- -<p>{{draft}}</p> - -<p><a href="https://developer.mozilla.org/docs/DOM">文档对象模型</a>（ <a href="/docs/DOM">Document Object Model</a>） 是为 <a href="/en-US/docs/HTML">HTML</a> 和<a href="/en-US/docs/XML">XML</a> 文档编写的应用程序接口。它为文档提供了结构化的描述, 使得开发者能够修改它们的内容和展现方式. 更重要的是, 它可以将网页与脚本或编程语言连接起来。</p> - -<p>开发者能用来修改和创建网页的所有性质、方法和事件都被组织到<a href="/en-US/docs/Gecko_DOM_Reference">对象</a>( <a href="/en-US/docs/Gecko_DOM_Reference">objects</a>)中， (例如, document 对象代表着文档本身，table 对象代表 一个 HTML 表格元素等等)。在较新的网络浏览器中，这些对象都可以用脚本语言获取。</p> - -<p>DOM模型常被用来与 <a href="/en-US/docs/JavaScript">JavaScript</a>交互。然而，DOM是独立于任何编程语言之外而设计的，这使得文档的结构化描述可以从一个<a href="https://developer.mozilla.org/en-US/docs/DOM/DOM_Reference">单个、兼容的接口</a>获取，尽管我们青睐于Javascript,但我们可以为任何语言创建DOM的引用接口。</p> - -<p><a href="http://www.w3.org/">万维网联盟组织</a>（ <a href="http://www.w3.org/">World Wide Web Consortium</a> ）为DOM建立了一套标准， 叫做<a href="http://www.w3.org/DOM/"> W3C DOM</a>。它被如今大多数主流浏览器所支持，使得可以开发出强大的跨浏览器应用。</p> - -<h2 id="Why_is_the_DOM_support_in_Mozilla_important.3F" name="Why_is_the_DOM_support_in_Mozilla_important.3F">为什么DOM很重要？</h2> - -<p>"动态超文本链接语言" (<a href="/en-US/docs/DHTML">DHTML</a>) 是一个被一些开发者们用来描述结合HTML、样式表、脚本而使文档富有动态效果技术的名词。 W3C DOM工作组致力于开发可操作的、不受语言限制并被大家所认同的解决方案 (可参见 <a href="http://www.w3.org/DOM/faq.html">W3C 问答</a>).</p> - -<p>正如 Mozilla 的标题"网络应用程序平台”所强调的, 对DOM的支持是核心的特点，也是Mozilla能取代其它浏览器所必需的特点。更为重要的事实是--Mozilla（包括Firefox和Thunderbird）的用户界面都是用<a href="https://developer.mozilla.org/en-US/docs/XUL">XUL</a>创建的，并且用DOM<a href="https://developer.mozilla.org/en-US/docs/Dynamically_modifying_XUL-based_user_interface">修改自己的用户界面</a>。</p> - -<h2 id="更多关于DOM的内容">更多关于DOM的内容</h2> - -<p>{{LandingPageListSubpages}}</p> - -<p> </p> 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 ---- -<h3 id="概述"> - 概述</h3> -<p> - DOM存储是一套在<a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/" title="http://www.whatwg.org/specs/web-apps/current-work/">Web Applications 1.0</a> 规范中首次引入的与<a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#storage">存储相关的特性</a>的总称, 现在已经分离出来,单独发展成为独立的<a class="external" href="http://dev.w3.org/html5/webstorage/" title="http://dev.w3.org/html5/webstorage/">W3C Web存储</a>规范. DOM存储被设计为用来提供一个更大存储量,更安全,更便捷的存储方法,从而可以代替掉将一些不需要让服务器知道的信息存储到cookies里的这种传统方法.该特性在<a href="/zh-cn/Firefox_2_for_developers" title="zh-cn/Firefox_2_for_developers">Firefox 2</a> 和 <a class="external" href="http://developer.apple.com/safari/library/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/Name-ValueStorage/Name-ValueStorage.html" title="http://developer.apple.com/safari/library/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/Name-ValueStorage/Name-ValueStorage.html">Safari 4</a>中首次引入.</p> -<div class="note"> - <strong>注意:</strong> DOM存储有别于<a href="/zh-cn/Storage" title="zh-cn/Storage">mozStorage</a> (Mozilla的XPCOM接口,用来访问SQLite) 也有别于<a href="/zh-cn/Session_store_API" title="zh-cn/Session_store_API">Session store API</a> (一个<a href="/zh-cn/XPCOM" title="zh-cn/XPCOM">XPCOM</a> 存储工具,主要为扩展程序使用).</div> -<h3 id="描述"> - 描述</h3> -<p> - DOM存储的机制是通过存储字符串类型的键/值对,来提供一种安全的存取方式.这个附加功能的目标是提供一个全面的,可以用来创建交互式应用程序的方法(包括那些高级功能,例如可以离线工作一段时间).</p> -<p> - 基于Mozilla的浏览器, Internet Explorer 8+, Safari 4+ 以及 Chrome 都提供了自己的DOM存储规范的实现. (如果你想让自己的代码兼容多个浏览器,则你需要照顾一下老版本的IE浏览器,IE下有一个类似的特性,在IE8之前版本也可以使用,叫做"<a class="external" href="http://msdn.microsoft.com/zh-cn/library/ms531424%28VS.85%29.aspx">userData behavior</a>",它允许你在多重浏览器会话中永久地保存数据.)</p> -<p> - DOM存储很有用，因为在浏览器端没有好的方法来持久保存大量数据。浏览器<a href="http://en.wikipedia.org/wiki/HTTP_cookie">cookie</a>的能力有限，而且不支持组织持久数据，其他方法（如<a href="http://www.macromedia.com/support/documentation/zh-cn/flashplayer/help/help02.html">flash本地存储</a>）需要外部插件支持。</p> -<p> - 由<a href="http://aaronboodman.com/">Aaron Boodman</a>编写的<a href="http://aaronboodman.com/halfnote/">halfnote</a>（笔记类应用程序）是第一批使用新的DOM存储功能（不包括internet explorer的userData behavior）开发的公开应用程序之一。在这个应用里，Aaron同时将笔记保存到服务器（当网络可用时）和本地，这允许使用者即使在不稳定的网络环境下也能安全的记录备注事项。</p> -<p> - 虽然halfnote的理念和实现比较简单，但是halfnote的创新展示了一种在线上和线下都可用的新型web应用的可能性。</p> -<h3 id="参考"> - 参考</h3> -<p> - 以下所提到的对象都是全局对象，作为 <a href="/zh-cn/DOM/window" title="/zh-cn/DOM/window">window 对象</a> 的属性存在。这意味着可以以 <code>sessionStorage</code> 或者 <code>window.sessionStorage 的形式访问这些对象。</code>(这点很重要，因为可以使用iframe来存储、访问除了直接包含在页面的数据之外的附加数据。)</p> -<h4 id="Storage"> - <code>Storage</code></h4> -<p> - 它是所有Storage实例（<code>sessionStorage</code>和<code>globalStorage[location.hostname]</code>）的构造函数，设置<code>Storage.prototype.removeKey = function(key) { this.removeItem(this.key(key)) }</code>，可通过<code>localStorage.removeKey</code> 和 <code>sessionStorage.removeKey</code>访问到。</p> -<p> - <code>globalStorage</code>对象不是<code>Storage</code>的实例，而是<code>StorageObsolete</code>的一个实例。</p> -<p> - <code>Storage</code>被定义在WhatWG <a class="external" href="http://dev.w3.org/html5/webstorage/#storage-0" title="http://dev.w3.org/html5/webstorage/#storage-0">Storage Interface</a> 中,如下:</p> -<pre class="eval">interface <dfn>Storage</dfn> { - readonly attribute unsigned long <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-length" title="dom-Storage-length">length</a>; - [IndexGetter] DOMString <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-key" title="dom-Storage-key">key</a>(in unsigned long index); - [NameGetter] DOMString <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-getitem" title="dom-Storage-getItem">getItem</a>(in DOMString key); - [NameSetter] void <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-setitem" title="dom-Storage-setItem">setItem</a>(in DOMString key, in DOMString data); - [NameDeleter] void <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-removeitem" title="dom-Storage-removeItem">removeItem</a>(in DOMString key); - void <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-clear" title="dom-Storage-clear">clear</a>(); -}; -</pre> -<div class="note"> - <strong>注意：</strong>虽然可以直接通过标准的 JavaScript 属性访问方法来设置和读取值，但是推荐的做法是使用 getItem 和 setItem 方法。</div> -<div class="note"> - <strong>注意：</strong>需要时刻注意的一点是，所有数据在被保存到下面将要介绍的任何一个存储器之前，都将通过它的 <code>.toString</code> 方法被转换成字符串。所以一个普通对象将会被存储为 <code>"[object Object]"</code>，而不是对象本身或者它的 JSON 形式。使用浏览器自身提供的 JSON 解析和序列化方法来存取对象是比较好的，也是比较常见的方法。</div> -<h4 id="sessionStorage_2"> - <code>sessionStorage</code></h4> -<p> - <code>sessionStorage</code> 是个全局对象，它维护着<span style="line-height: inherit;">在页面会话(page session)期间有效的</span><span style="line-height: inherit;">存储空间。只要浏览器开着，页面会话周期就会一直持续。当页面重新载入(reload)或者被恢复(restores)时，页面会话也是一直存在的。每在新标签或者新窗口中打开一个新页面，都会初始化一个新的会话。</span><span style="line-height: inherit;"> </span></p> -<pre class="brush: js">// 保存数据到当前会话的存储空间 -sessionStorage.setItem("username", "John"); - -// 访问数据 -alert( "username = " + sessionStorage.getItem("username")); -</pre> -<p> - 当浏览器被意外刷新的时候，一些临时数据应当被保存和恢复。<code>sessionStorage</code> 对象在处理这种情况的时候是最有用的。</p> -<p> - {{ fx_minversion_note("3.5", "在Firefox 3.5之前的版本中,如果浏览器意外崩溃,则在重启后,sessionStorage中保存的数据不会被恢复.之后的版本中,会恢复上次崩溃前的sessionStorage数据.") }}</p> -<p> - <strong>例子:</strong></p> -<p> - 自动保存一个文本域中的内容，如果浏览器被意外刷新，则恢复该文本域中的内容，所以不会丢失任何输入的数据。</p> -<pre class="brush: js"> // 获取到我们要循环保存的文本域 - var field = document.getElementById("field"); - - // 查看是否有一个自动保存的值 - // (只在浏览器被意外刷新时) - if ( sessionStorage.getItem("autosave")) { - // 恢复文本域中的内容 - field.value = sessionStorage.getItem("autosave"); - } - - // 每隔一秒检查文本域中的内容 - setInterval(function(){ - // 并将文本域的值保存到session storage对象中 - sessionStorage.setItem("autosave", field.value); - }, 1000); -</pre> -<p> - <strong>更多信息:</strong></p> -<ul> - <li> - <a class="external" href="http://dev.w3.org/html5/webstorage/#the-sessionstorage-attribute" title="http://dev.w3.org/html5/webstorage/#the-sessionstorage-attribute">sessionStorage specification</a></li> -</ul> -<h4 id="localStorage"> - <code>localStorage</code></h4> -<p> - <code>localStorage</code> is the same as sessionStorage with same same-origin rules applied but it is persistent. <code>localStorage</code> was introduced in Firefox 3.5.</p> -<div class="note"> - <strong>注意：</strong>当浏览器进入私人模式(private browsing mode，Google Chrome 上对应的应该是叫隐身模式)的时候，会创建一个新的、临时的、空的数据库，用以存储本地数据(local storage data)。当浏览器关闭时，里面的所有数据都将被丢弃。</div> -<h4 id="兼容性"> - 兼容性</h4> -<p> - 这些<code> Storage</code> 对象最近刚被加入标准当中，所以并不是所有的浏览器都支持。如果你想在没有原生支持 <code>localStorage</code> 对象的浏览器中使用它，可以在你编写的 JavaScript 代码的首部插入下面两段代码中的任意一段。</p> -<p> - This algorithm is an exact imitation of the <code>localStorage</code> object, but making use of cookies.</p> -<pre class="brush: js">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; - })()); -} -</pre> -<div class="note"> - <strong>Note:</strong> The maximum size of data that can be saved is severely restricted by the use of cookies. With this algorithm, use the functions <code>localStorage.setItem()</code> and <code>localStorage.removeItem()</code> to add, change or remove a key. The use of methods <code>localStorage.yourKey = yourValue;</code> and <code>delete localStorage.yourKey;</code> to set or delete a key <strong>is not a secure way with this code</strong>. You can also change its name and use it only to manage a document's cookies regardless of the localStorage object.</div> -<p> - Here is another, less exact, imitation of the <code>localStorage</code> 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.</p> -<pre class="brush: js">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; -} -</pre> -<div class="note"> - <strong>Note:</strong> The maximum size of data that can be saved is severely restricted by the use of cookies. With this algorithm, use the functions <code>localStorage.getItem()</code>, <code>localStorage.setItem()</code> and <code>localStorage.removeItem()</code> to get, add, change or remove a key. The use of method <code>localStorage.yourKey</code> in order to get, set or delete a key <strong>is not permitted with this code</strong>. You can also change its name and use it only to manage a document's cookies regardless of the localStorage object.</div> -<h5 id="与_globalStorage_的关系的兼容性"> - 与 globalStorage 的关系的兼容性</h5> -<p class="note"> - <code>localStorage</code> is also the same as <code>globalStorage[location.hostname]</code>, with the exception of being scoped to an HTML5 origin (scheme + hostname + non-standard port) and <code>localStorage</code> being an instance of <code>Storage</code> as opposed to <code>globalStorage[location.hostname]</code> being an instance of <code>StorageObsolete</code> which is covered below. 例如，在 <a class="external" href="http://example.com" rel="freelink">http://example.com</a> 中不能访问 <a class="link-https" href="https://example.com" rel="freelink">https://example.com</a> 中的 <code>localStorage</code> 对象，但是它们都可以访问同一个 <code>globalStorage。</code> <code>localStorage</code> 是个标准接口，但 <code>globalStorage</code> 是非标准的。所以你的代码最好不要依赖这些关系。</p> -<p> - Please note that setting a property on <code>globalStorage[location.hostname]</code> does <strong>not</strong> set it on <code>localStorage</code> and extending <code>Storage.prototype</code> does not affect <code>globalStorage</code> items, only extending <code>StorageObsolete.prototype</code> does.</p> -<h4 id="globalStorage_2"> - <code>globalStorage</code></h4> -<p> - {{ Non-standard_header() }}{{ obsolete_header("13.0") }}<code>globalStorage </code>is obsolete since Gecko 1.9.1 (Firefox 3.5) and unsupported since Gecko 13 (Firefox 13). Just use<code> {{ Anch("localStorage") }} </code>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 (<code>globalStorage</code>) 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).</p> -<div class="warning"> - Note: <code>globalStorage</code> is not a <code>Storage</code> instance, but a <code>StorageList</code> instance containing <code>StorageObsolete</code> instances.</div> -<pre class="eval deki-transform">// Save data that only scripts on the mozilla.org domain can access -globalStorage['mozilla.org'].setItem("snippet", "<b>Hello</b>, how are you?"); -</pre> -<p> - Specifically, the <code>globalStorage</code> 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 <code>globalStorage</code> on this domain (developer.mozilla.org) we'd have the following storage object available to us:</p> -<ul> - <li> - <code>globalStorage{{ mediawiki.external('\'developer.mozilla.org\'') }}</code> - All web pages within the developer.mozilla.org sub-domain can both read and write data to this storage object.</li> -</ul> -<p> - <strong>例子:</strong></p> -<p> - 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.</p> -<p> - Remember a user's username for the particular sub-domain that is being visited:</p> -<pre class="eval deki-transform"> globalStorage['developer.mozilla.org'].setItem("username", "John"); -</pre> -<p> - Keep track of the number of times that a user visits all pages of your domain:</p> -<pre class="eval deki-transform"> // 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); -</pre> -<h3 id="存储位置以及清除数据"> - 存储位置以及清除数据</h3> -<p> - In Firefox the DOM storage data is stored in the <a class="external" href="http://kb.mozillazine.org/Webappsstore.sqlite" title="http://kb.mozillazine.org/Webappsstore.sqlite">webappsstore.sqlite file</a> in the profile folder (there's also chromeappsstore.sqlite file used to store browser's own data, <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=592990" title="https://bugzilla.mozilla.org/show_bug.cgi?id=592990">notably for the start page - about:home</a>, but potentially for other internal pages with "about:" URLs).</p> -<ul> - <li> - DOM Storage can be cleared via "Tools -> Clear Recent History -> Cookies" when Time range is "Everything" (via nsICookieManager::removeAll) - <ul> - <li> - But not when another time range is specified: (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=527667" title="https://bugzilla.mozilla.org/show_bug.cgi?id=527667">bug 527667</a>)</li> - <li> - Does not show up in Tools -> Options -> Privacy -> Remove individual cookies (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=506692" title="https://bugzilla.mozilla.org/show_bug.cgi?id=506692">bug 506692</a>)</li> - </ul> - </li> - <li> - DOM Storage is <strong>not</strong> cleared via Tools -> Options -> Advanced -> Network -> Offline data -> Clear Now.</li> - <li> - Doesn't show up in the "Tools -> Options -> Advanced -> Network -> Offline data" list, unless the site also uses the offline cache. If the site does appear in that list, its DOM storage data is removed along with the <a href="/zh-cn/HTML/Using_the_application_cache" title="zh-cn/Offline resources in Firefox">offline cache</a> when clicking the Remove button.</li> -</ul> -<p> - See also <a href="/zh-cn/HTML/Using_the_application_cache#Storage_location_and_clearing_the_offline_cache" title="zh-cn/Offline resources in Firefox#Storage location and clearing the offline cache">clearing offline resources cache</a>.</p> -<h3 id="更多信息"> - 更多信息</h3> -<ul> - <li> - <a class="external" href="http://www.w3.org/TR/webstorage/" title="http://www.w3.org/TR/webstorage/">Web Storage</a> (W3C Web Apps Working Group)</li> - <li> - <a class="external" href="http://kb.mozillazine.org/Dom.storage.enabled">Enable/Disable DOM Storage in Firefox or SeaMonkey</a></li> -</ul> -<h3 id="例子"> - 例子</h3> -<ul> - <li> - <a class="external" href="http://www.diveintojavascript.com/tutorials/web-storage-tutorial-creating-an-address-book-application" title="JavaScript Web Storage Tutorial: Creating an Address Book Application">JavaScript Web Storage Tutorial: Creating an Address Book Application</a> - hands-on tutorial describing how to use the Web Storage API by creating a simple address book application</li> - <li> - <a class="external" href="http://hacks.mozilla.org/2010/01/offline-web-applications/" title="http://hacks.mozilla.org/2010/01/offline-web-applications/">offline web applications</a> at hacks.mozilla.org - showcases an offline app demo and explains how it works.</li> - <li> - <a class="external" href="http://noteboard.eligrey.com/" title="http://noteboard.eligrey.com/">Noteboard</a> - Note writing application that stores all data locally.</li> - <li> - <a class="external" href="http://github.com/eligrey/jData-host" title="http://github.com/eligrey/jData-host">jData</a> - A shared localStorage object interface that can be accessed by any website on the internet and works on Firefox 3+, Webkit 3.1.2+ nightlies, and IE8. Think of it as pseudo-globalStorage[""] but write access needs user confirmation.</li> - <li> - <a class="external" href="http://codebase.es/test/webstorage.html" title="http://codebase.es/test/webstorage.html">HTML 5 localStorage example</a>. Very simple and easy to understand example of localStorage. Saves and retrieves texts and shows a list of saved items. Tested in Firefox 3 or higher.</li> - <li> - <a class="external" href="http://upload.jonathanwilsson.com/html5/sessionstorage.php" title="http://upload.jonathanwilsson.com/html5/sessionstorage.php">HTML5 Session Storage</a>. A very simple example of session storage. Also includes a example on local storage. Tested in Firefox 3.6 or higher.</li> - <li> - <a class="external" href="http://channy.creation.net/work/firefox/domstorage/"><strike>Basic DOMStorage Examples</strike></a><strike> - Broken in Firefox 3 and up due to use of globalStorage on one domain level up from the current domain which is not allowed in Firefox 3.</strike></li> - <li> - <a class="external" href="http://aaronboodman.com/halfnote/"><strike>halfnote</strike></a><strike> - (displaying broken in Firefox 3) Note writing application that uses DOM Storage.</strike></li> -</ul> -<h3 id="浏览器兼容性"> - 浏览器兼容性</h3> -<p> - {{ CompatibilityTable() }}</p> -<div id="compat-desktop"> - <table class="compat-table"> - <tbody> - <tr> - <th> - Feature</th> - <th> - Chrome</th> - <th> - Firefox (Gecko)</th> - <th> - Internet Explorer</th> - <th> - Opera</th> - <th> - Safari (WebKit)</th> - </tr> - <tr> - <td> - localStorage</td> - <td> - 4</td> - <td> - 3.5</td> - <td> - 8</td> - <td> - 10.50</td> - <td> - 4</td> - </tr> - <tr> - <td> - sessionStorage</td> - <td> - 5</td> - <td> - 2</td> - <td> - 8</td> - <td> - 10.50</td> - <td> - 4</td> - </tr> - <tr> - <td> - globalStorage</td> - <td> - {{ CompatNo() }}</td> - <td> - 2-13</td> - <td> - {{ CompatNo() }}</td> - <td> - {{ CompatNo() }}</td> - <td> - {{ CompatNo() }}</td> - </tr> - </tbody> - </table> -</div> -<div id="compat-mobile"> - <table class="compat-table"> - <tbody> - <tr> - <th> - Feature</th> - <th> - Android</th> - <th> - Firefox Mobile (Gecko)</th> - <th> - IE Phone</th> - <th> - Opera Mobile</th> - <th> - Safari Mobile</th> - </tr> - <tr> - <td> - Basic support</td> - <td> - {{ CompatUnknown() }}</td> - <td> - {{ CompatUnknown() }}</td> - <td> - {{ CompatUnknown() }}</td> - <td> - {{ CompatUnknown() }}</td> - <td> - {{ CompatUnknown() }}</td> - </tr> - </tbody> - </table> -</div> -<p> - All browsers have varying capacity levels for both local- and sessionStorage. Here is a <a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">detailed rundown of all the storage capacities for various browsers</a>.</p> -<p> - </p> -<h3 id="相关链接"> - 相关链接</h3> -<ul> - <li> - <a class="external" href="http://en.wikipedia.org/wiki/HTTP_cookie">HTTP cookies</a> (<code><a href="/zh-cn/DOM/document.cookie" title="zh-cn/DOM/document.cookie">document.cookie</a></code>)</li> - <li> - <a class="external" href="http://www.macromedia.com/support/documentation/zh-cn/flashplayer/help/help02.html">Flash Local Storage</a></li> - <li> - <a class="external" href="http://msdn2.microsoft.com/en-us/library/ms531424.aspx">Internet Explorer userData behavior</a></li> - <li> - <a href="/zh-cn/XPCOM_Interface_Reference/nsIDOMStorageEventObsolete" title="zh-cn/XPCOM Interface Reference/nsIDOMStorageEventObsolete">nsIDOMStorageEventObsolete</a></li> - <li> - <a href="/zh-cn/DOM/event/StorageEvent" title="zh-cn/DOM/Event/StorageEvent">StorageEvent</a></li> -</ul> -<p> - {{ HTML5ArticleTOC() }}</p> -<p> - {{ languages( { "es": "es/DOM/Almacenamiento", "fr": "fr/DOM/Storage", "ja": "ja/DOM/Storage", "pl": "pl/DOM/Storage", "en": "en/DOM/Storage" } ) }}</p> -<p> - ---------------------------------</p> -<p> - </p> -<h3 id=".E6.91.98.E8.A6.81" name=".E6.91.98.E8.A6.81"> - 摘要</h3> -<p> - DOM Storage，就是在<a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">Web Applications 1.0</a> specification中介绍的那些<a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#storage">存储相关特性</a>集合的名称。相比较在cookies中存储信息来说，DOM Stroage更大、更安全、更易于使用的。目前支持的浏览器包括Mozilla Firefox 2+, Google Chrome, Apple Safari, Opera和Microsoft IE9+,在移动设备上也包括iPhone & iPad Safari。</p> -<div class="note"> - <strong>Note:</strong> DOM Storage 与 <a href="/cn/Storage" title="cn/Storage">mozStorage</a> （Mozilla对于SQLite的XPCOM接口）和<a href="/cn/Session_store_API" title="cn/Session_store_API">Session store API</a>(扩展使用的一个<a href="/cn/XPCOM" title="cn/XPCOM">XPCOM</a>存储).不同</div> -<h3 id=".E6.8F.8F.E8.BF.B0" name=".E6.8F.8F.E8.BF.B0"> - 描述</h3> -<p> - DOM Storage机制是一种通过字符串形式的名／值对来安全地存储和使用的方法。这个附加功能的目标是提供一个更全面的、可以创建交互式应用程序的方法（包括那些高级功能，例如可以离线工作一段时间）。</p> -<p> - 目前，只有基于Mozilla的浏览器提供了DOM Storage的实现。不过，Internet Explorer也有一个类似的特性，叫做"<a class="external" href="http://msdn.microsoft.com/workshop/author/behaviors/reference/behaviors/userdata.asp">userData behavior</a>"，他允许你在多重浏览器会话中永久地保存数据。</p> -<p> - DOM Storage 是很有用的，因为在任何一段时期都没有一个很好的、只通过浏览器来永久存储合理大小的数据的方法。<a class="external" href="http://en.wikipedia.org/wiki/HTTP_cookie">浏览器cookies</a> 限制了存储容量，而且并没有为组织永久性的数据提供支持，并且其他的方法还需要外部插件来实现（例如<a class="external" href="http://www.macromedia.com/support/documentation/zh-cn/flashplayer/help/help02.html">Flash Local Storage</a>）。</p> -<p> - 第一个使用了新的DOM Storage功能(除了Internet Explorer 的 userData Behavior之外)的公共应用程序是由 <a class="external" href="http://aaronboodman.com/">Aaron Boodman</a> 写的 <a class="external" href="http://aaronboodman.com/halfnote/">halfnote</a>(一个便签应用程序) 。在他的程序中，Aaron同时把便签内容保存到服务器上（当Internet连接可用时）和一个本地数据存储中。这就允许用户即便是在不定式发生internet连接中断时，也可以安全的写一些有备份的便签。</p> -<p> - 不过，在halfnote中表现出来的概念和实现，都还是相对简单的。它的诞生揭示了一种新的、可以在线或离线使用的网络应用程序。</p> -<h3 id=".E5.8F.82.E8.80.83" name=".E5.8F.82.E8.80.83"> - 参考</h3> -<p> - 下面的内容都是作为每个<a href="/cn/DOM/window" title="cn/DOM/window"><code>window</code> 对象</a>的属性存在的全局对象。这也就是说，可以通过<code>sessionStorage</code> 或者 <code>window.sessionStorage</code> 来访问它们。（这很重要，因为随后你可以使用iframe来存储、访问、添加那些并不是立刻就包含在你页面中的数据。）</p> -<h4 id="sessionStorage" name="sessionStorage"> - <code>sessionStorage</code></h4> -<p> - 这是一个全局对象（<code>sessionStorage</code>），它含有一个在页面会话有效期内可用的存储区域。只要页面没有关闭，一个页面会话就始终保持着，并且当页面被重新载入或恢复时“复活”。打开一个新的标签页或新窗口都会初始化新的会话。</p> -<pre class="eval">// 将数据存入当前会话的一个存储中 -sessionStorage.username = "John"; - -// 访问某些已存储的数据 -alert( "username = " + sessionStorage.username ); -</pre> -<p> - <code>sessionStorage</code> 对象是最有用的，它持有那些应该保存的临时数据，而且一旦浏览器突然被刷新时，要恢复的那些数据，</p> -<div class="bug"> - <strong>Note:</strong> <code>sessionStorage</code> 还应该有在浏览器崩溃后存储和恢复数据的功能，不过由于{{ Bug(339445) }}的原因，这个功能到现在还没有在Firefox中实现。这个功能实现之后，<code>sessionStorage</code>的防御功能就十分有用了。</div> -<p> - <strong>举例:</strong></p> -<p> - 自动保存文本字段的内容，如果浏览器突然被刷新，就恢复字段内容，这样就不会丢失任何输入了。</p> -<pre class="eval"> // 获得我们要跟踪的那个文本字段 - var field = document.getElementById("field"); - - // 看看我们是否有一个autosave的值 - // (这将只会在页面被突然刷新时发生) - if ( sessionStorage.autosave ) { - // 恢复文本字段中的内容 - field.value = sessionStorage.autosave; - } - - // 每秒钟检查一次文本字段的内容 - setInterval(function(){ - // 并把结果保存到会话存储对象中 - sessionStorage.autosave = field.value; - }, 1000); -</pre> -<p> - <strong>更多信息:</strong></p> -<ul> - <li> - <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#sessionstorage">sessionStorage specification</a></li> -</ul> -<h4 id="globalStorage" name="globalStorage"> - <code>globalStorage</code></h4> -<p> - 这是一个全局对象(<code>globalStorage</code>)，它维护着各种公共的或者私有的，可以用来长时期保存数据的存储空间（例如，在多重的页面和浏览器会话之间）。</p> -<pre class="eval">// 可以这样访问那些仅对mozilla.org域上的脚本保存的数据 -globalStorage['mozilla.org'].snippet = "<b>Hello</b>, how are you?"; - -// 可以这样访问为任何网页任何域存储的数据 -globalStorage[<span class="nowiki">''</span>].favBrowser = "Firefox"; -</pre> -<p> - 特别地，<code>globalStorage</code>对象，提供了访问一些不同的可以保存数据的存储对象的方法。例如，如果我们要建立一个可以在域(developer.mozilla.org)下面可以使用<code>globalStorage</code>的网页，我们有下面这些存储对象可以使用：</p> -<ul> - <li> - <code>globalStorage{{ mediawiki.external('\'developer.mozilla.org\'') }}</code> - 在developer.mozilla.org下面所有的子域都可以通过这个存储对象来进行读和写。</li> - <li> - <code>globalStorage{{ mediawiki.external('\'mozilla.org\'') }}</code> - 在mozilla.org域名下面的所有网页都可以通过这个存储对象来进行读和写。</li> - <li> - <code>globalStorage{{ mediawiki.external('\'org\'') }}</code> - 在.org域名下面的所有网页都可以通过这个存储对象来进行读和写。</li> - <li> - <code>globalStorage{{ mediawiki.external('') }}</code> - 在任何域名下的任何网页都可以通过这个存储对象来进行读和写。</li> -</ul> -<div class="bug"> - <strong>注意:</strong> firefox目前还没有实现<code>globalStorage{{ mediawiki.external('tld') }}</code> 和 <code>globalStorage{{ mediawiki.external('') }}</code> （会抛出一个安全错误），这是由于对于这些名字空间可以进行随意读写的话是有安全漏洞的 <a class="external" href="http://ejohn.org/blog/dom-storage-answers/">更多信息</a></div> -<p> - <strong>示例:</strong></p> -<p> - 下面这些示例，需要你在所有想看到效果的页面中都插入脚本（包括如下所有的代码）。</p> -<p> - 记录某个指定子域名下面正在访问的用户的username：</p> -<pre class="eval"> globalStorage['developer.mozilla.org'].username = "John"; -</pre> -<p> - 跟踪一个用户在你的域名下所访问的所有页面的次数：</p> -<pre class="eval"> // 由于所有数据都是被当作一个字符串来保存的，所以这里必须使用parseInt - globalStorage['mozilla.org'].visits = - parseInt( globalStorage['mozilla.org'].visits || 0 ) + 1; -</pre> -<p> - 记录所有你访问的网站：</p> -<pre class="eval"> globalStorage[<span class="nowiki">''</span>].sites += "," + location.hostname; -</pre> -<p> - <strong>更多信息:</strong></p> -<ul> - <li> - <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#globalstorage">globalStorage specification</a></li> -</ul> -<h3 id="More_information" name="More_information"> - More information</h3> -<ul> - <li> - <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">Web Applications 1.0 Specification</a></li> - <li> - <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#storage">Web Applications 1.0 Storage Specification</a></li> - <li> - <a class="external" href="http://kb.mozillazine.org/Dom.storage.enabled">Enable/Disable DOM Storage in Firefox or SeaMonkey</a></li> -</ul> -<h3 id="Examples" name="Examples"> - Examples</h3> -<ul> - <li> - <a class="external" href="http://channy.creation.net/work/firefox/domstorage/">Basic DOMStorage Examples</a></li> - <li> - <a class="external" href="http://aaronboodman.com/halfnote/">halfnote</a> - Note writing application that uses DOM Storage.</li> -</ul> -<h3 id="Related" name="Related"> - Related</h3> -<ul> - <li> - <a class="external" href="http://en.wikipedia.org/wiki/HTTP_cookie">HTTP cookies</a> (<code><a href="/cn/DOM/document.cookie" title="cn/DOM/document.cookie">document.cookie</a></code>)</li> - <li> - <a class="external" href="http://www.macromedia.com/support/documentation/zh-cn/flashplayer/help/help02.html">Flash Local Storage</a></li> - <li> - <a class="external" href="http://msdn.microsoft.com/workshop/author/behaviors/reference/behaviors/userdata.asp">Internet Explorer userData behavior</a></li> -</ul> 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 ---- -<p>结构化克隆算法是<a href="http://www.w3.org/html/wg/drafts/html/master/infrastructure.html#safe-passing-of-structured-data">由HTML5规范定义</a>的用于复制复杂JavaScript对象的算法。通过来自 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Worker">Workers</a>的 <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Worker/postMessage" title="en/JavaScript/Reference/Global Objects/Error">postMessage()</a> </code>或使用 <a href="https://developer.mozilla.org/en-US/docs/Glossary/IndexedDB">IndexedDB</a> 存储对象时在内部使用。它通过递归输入对象来构建克隆，同时保持先前访问过的引用的映射，以避免无限遍历循环。</p> - -<h2 id="结构化克隆所不能做到的">结构化克隆所不能做到的</h2> - -<ul> - <li><code><a href="/cn/JavaScript/Reference/Global_Objects/Error">Error</a></code> 以及 <code><a href="/cn/JavaScript/Reference/Global_Objects/Function">Function</a></code> 对象是不能被结构化克隆算法复制的；如果你尝试这样子去做，这会导致抛出 <code>DATA_CLONE_ERR</code> 的异常。</li> - <li>企图去克隆 DOM 节点同样会抛出 <code>DATA_CLONE_ERROR</code> 异常。</li> - <li>对象的某些特定参数也不会被保留 - <ul> - <li><code><a href="/cn/JavaScript/Reference/Global_Objects/RegExp">RegExp</a> </code>对象的 <code>lastIndex</code> 字段不会被保留</li> - <li>属性描述符，setters 以及 getters（以及其他类似元数据的功能）同样不会被复制。例如，如果一个对象用属性描述符标记为 read-only，它将会被复制为 read-write，因为这是默认的情况下。</li> - <li>原形链上的属性也不会被追踪以及复制。</li> - </ul> - </li> -</ul> - -<h2 id="支持的类型">支持的类型</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">对象类型</th> - <th scope="col">注意</th> - </tr> - </thead> - <tbody> - <tr> - <td><a href="/zh-CN/docs/Web/JavaScript/Data_structures#原始值">所有的原始类型</a></td> - <td>symbols 除外</td> - </tr> - <tr> - <td><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a> 对象</td> - <td> </td> - </tr> - <tr> - <td>String 对象</td> - <td> </td> - </tr> - <tr> - <td><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date">Date</a></td> - <td> </td> - </tr> - <tr> - <td><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp">RegExp</a></td> - <td><code>lastIndex</code> 字段不会被保留。</td> - </tr> - <tr> - <td>{{ domxref("Blob") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ domxref("File") }}</td> - <td> </td> - </tr> - <tr> - <td>{{ domxref("FileList") }}</td> - <td> </td> - </tr> - <tr> - <td><a href="/zh-CN/docs/Web/API/ArrayBuffer">ArrayBuffer</a></td> - <td> </td> - </tr> - <tr> - <td><a href="/zh-CN/docs/Web/API/ArrayBufferView">ArrayBufferView</a></td> - <td>这基本上意味着所有的 <a href="/zh-CN/docs/Web/JavaScript/Typed_arrays">类型化数组</a> ，如 Int32Array 等。</td> - </tr> - <tr> - <td>{{ domxref("ImageData") }}</td> - <td> </td> - </tr> - <tr> - <td><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></td> - <td> </td> - </tr> - <tr> - <td><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></td> - <td>仅包括普通对象（如对象字面量）</td> - </tr> - <tr> - <td><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map">Map</a></td> - <td> </td> - </tr> - <tr> - <td><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Set">Set</a></td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="相关链接">相关链接</h2> - -<ul> - <li><a href="http://www.w3.org/TR/html5/infrastructure.html#safe-passing-of-structured-data" title="http://www.w3.org/TR/html5/common-dom-interfaces.html#safe-passing-of-structured-data">HTML5 Specification: Safe passing of structured data</a></li> - <li>{{ domxref("window.history") }}</li> - <li>{{ domxref("window.postMessage()") }}</li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API">Web Workers</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Components.utils.cloneInto">Components.utils.cloneInto</a></li> -</ul> 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 ---- -<p><span class="seoSummary">对列表最常见的样式修改之一是改变缩进距离，即列表项向右侧移动的距离。令人沮丧的是，缩进在一个浏览器中的表现常常与其他浏览器中的效果不尽相同。例如，如果声明列表的左边距为0，在IE浏览器中生效，但是在基于</span>Gecko引擎的浏览器中却不起作用。本文将帮助你理解这些可能发生的问题，以及如何避免这些问题的产生。</p> - -<p>为了弄明白这是为什么，以及如何避免这些问题发生，有必要研究一下列表结构的具体细节。</p> - -<h3 id="Making_a_List" name="Making_a_List">创建一个列表</h3> - -<p>首先，来看一个简单，单独的列表项目。该列表项目没有标记符号（或称之为“着重号”），并且没有被列表包裹起来。如下图图1所示，单独的列表项是无效的，简单且没有任何装饰。</p> - -<p><img alt="Figure 1" class="internal" src="/@api/deki/files/619/=Consistent-list-indentation-figure1.gif"></p> - -<p>红色的虚线边框代表列表项目内容区域的外边界。记住，从这一点上看，这个列表项目没有内边距和边框。如果我们再添加两个列表项目，我们得到下面的结果，如图2所示。</p> - -<p><img alt="Figure 2" class="internal" src="/@api/deki/files/620/=Consistent-list-indentation-figure2.gif"></p> - -<p>现在我们在外面加上父元素；这个例子中，我们使用一个无序列表(i.e., <code><ul></code>)。根据 CSS 盒子模型，列表项目的盒子必须显示在其父元素的内容区域里。因为这里的父元素既没有 padding 也没有 margin，所以我们得到下面的结果，如图3所示。</p> - -<p><img alt="Figure 3" class="internal" src="/@api/deki/files/621/=Consistent-list-indentation-figure3.gif"></p> - -<p>这里，蓝色的虚线边框表示 <ul> 元素内容区域的边缘。因为我们没有给 <ul> 元素添加内边距, 所以它的内容的包裹层紧贴在三个列表项外。</p> - -<p>现在我们来添加列表项目标记，由于这是一个无序列表，我们添加传统的实心圆“着重标记”，如下图图4所示。</p> - -<p><img alt="Figure 4" class="internal" src="/@api/deki/files/622/=Consistent-list-indentation-figure4.gif"></p> - -<p>可以看到，这些标记符号在<ul>内容区域的外面，但这无关紧要。重要的是，这些标记被放到主要的<li>元素盒子外面了。它们有点像列表项目的附件，在<li>的内容区域外游荡，但依然依附于<li>。</p> - -<p>这就是为什么在除了IE浏览器以外的所有浏览器上，标记符号都被放在<li>元素的边框外，假设列表项位置的值为外部"outside"。如果该值被改为内部"inside"，则标记符号会被放到<li>的内容区域里面，像是放在<li>最开头的内联盒子一样。</p> - -<h3 id="Indenting_It_Twice" name="Indenting_It_Twice">二次缩进</h3> - -<p>So how will all this appear in a document? At the moment, we have a situation analogous to these styles:</p> - -<pre>ul, li {margin-left: 0; padding-left: 0;}</pre> - -<p>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.</p> - -<p>In order to avoid this and get some indentation, there are really only three options available to browser implementors.</p> - -<ol> - <li>Give each <code><li></code> element a left margin.</li> - <li>Give the <code><ul></code> element a left margin.</li> - <li>Give the <code><ul></code> element some left padding.</li> -</ol> - -<p>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.</p> - -<p>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 <code><ul></code> element. If we apply a background color to the <code><ul></code> element and leave the list item and <code><ul></code> borders in place, we get the result shown in Figure 5.</p> - -<p><img alt="Figure 5" class="internal" src="/@api/deki/files/623/=Consistent-list-indentation-figure5.gif"></p> - -<p>Gecko, on the other hand, sets a left <em>padding</em> of 40 pixels for the <code><ul></code> 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.</p> - -<p><img alt="Figure 6" class="internal" src="/@api/deki/files/624/=Consistent-list-indentation-figure6.gif"></p> - -<p>As we can see, the markers remain attached to the <code><li></code> elements, no matter where they are. The difference is entirely in how the <code><ul></code> is styled. We can only see the difference if we try to set a background or border on the <code><ul></code> element.</p> - -<h3 id="Finding_Consistency" name="Finding_Consistency">Finding Consistency</h3> - -<p>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 <strong>both</strong> the left margin and left padding of the <code><ul></code> element. We can ignore <code><li></code> altogether for these purposes. If you want to reproduce the default display in Netscape 6.x, you write:</p> - -<pre>ul {margin-left: 0; padding-left: 40px;}</pre> - -<p>If you're more interested in following the Internet Explorer/Opera model, then:</p> - -<pre>ul {margin-left: 40px; padding-left: 0;}</pre> - -<p>Of course, you can fill in your own preferred values. Set both to <code>1.25em</code>, 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:</p> - -<pre>ul {margin-left: 0; padding-left: 0;}</pre> - -<p>Remember, though, that in so doing, you'll have the bullets hanging outside the list and its parent element. If the parent is the <code>body</code>, there's a strong chance your bullets will be completely outside the browser window, and thus will not be visible.</p> - -<h3 id="Conclusion" name="Conclusion">结论</h3> - -<p>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.</p> - -<h3 id="Recommendations" name="Recommendations">建议</h3> - -<ul> - <li><span style="line-height: 1.5em;">在你调整列表的缩进的时候，务必确认同时设置了 padding 和 margin.</span></li> -</ul> - -<div class="originaldocinfo"> -<h3 id="Original_Document_Information" name="Original_Document_Information">原始文档信息</h3> - -<ul> - <li>Author(s): Eric A. Meyer, Netscape Communications</li> - <li>Last Updated Date: Published 30 Aug 2002</li> - <li>Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.</li> - <li>Note: This reprinted article was originally part of the DevEdge site.</li> -</ul> -</div> - -<p>{{ languages( { "fr": "fr/Indentation_homog\u00e8ne_des_listes" } ) }}</p> 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 ---- -<div>{{CSSRef}}</div> - -<p>本质上CSS计数器是由CSS维护的变量，这些变量可能根据CSS规则增加以跟踪使用次数。这允许你根据文档位置来调整内容表现。 CSS计数器是CSS2.1中<a class="external" href="http://www.w3.org/TR/CSS21/generate.html#counters">自动计数编号</a>部分的实现。</p> - -<p>计数器的值通过使用{{cssxref("counter-reset")}} 和 {{cssxref("counter-increment")}} 操作，在 <code><a href="/en-US/docs/CSS/content" title="CSS/content">content</a></code> 上应用 <code>counter()</code> 或 <code>counters()</code>函数来显示在页面上。</p> - -<h2 id="使用计数器">使用计数器</h2> - -<p>使用CSS计数器之前，必须<a href="/en-US/docs/CSS/counter-reset" title="CSS/counter-reset">重置</a>一个值，默认是0。使用{{cssxref("counter()")}}函数来给元素增加计数器。 下面的CSS给每个h3元素的前面增加了 "Section <em><计算器值></em>:"。</p> - -<pre class="brush: css">body { - counter-reset: section; /* 重置计数器成0 */ -} -h3:before { - counter-increment: section; /* 增加计数器值 */ - content: "Section " counter(section) ": "; /* 显示计数器 */ -} -</pre> - -<p>例如：</p> - -<pre class="brush: html"><h3>Introduction</h3> -<h3>Body</h3> -<h3>Conclusion</h3></pre> - -<p>{{ EmbedLiveSample('使用计数器', 300,200) }}</p> - -<h2 id="计数器嵌套">计数器嵌套</h2> - -<p>CSS计数器对创建有序列表特别有用，因为在子元素中会自动创建一个CSS计数器的实例。使用 <code>counters()</code> 函数，在不同级别的嵌套计数器之间可以插入字符串。比如这个CSS例子：</p> - -<pre class="brush: css">ol { - counter-reset: section; /* 为每个ol元素创建新的计数器实例 */ - list-style-type: none; -} -li:before { - counter-increment: section; /* 只增加计数器的当前实例 */ - content: counters(section, ".") " "; /* 为所有计数器实例增加以“.”分隔的值 */ -} -</pre> - -<p>结合下面的HTML：</p> - -<pre class="brush: 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></pre> - -<p>结果为：</p> - -<p>{{ EmbedLiveSample('计数器嵌套') }}</p> - -<h2 id="Specifications" name="Specifications">规范</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">规范</th> - <th scope="col">状态</th> - <th scope="col">注释</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS3 Lists", "#auto-numbering", "CSS Counters")}}</td> - <td>{{Spec2("CSS3 Lists")}}</td> - <td>无变化</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'generate.html#generate.html#counters', 'counter-reset')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>初始定义</td> - </tr> - </tbody> -</table> - -<h2 id="See_also" name="See_also">其它</h2> - -<ul> - <li><a href="/en-US/docs/CSS/counter-reset" title="CSS/counter-reset">counter-reset</a></li> - <li><a href="/en-US/docs/CSS/counter-increment" title="CSS/counter-increment">counter-increment</a></li> -</ul> - -<p><em>另一个可用的示例在 <a class="external" href="http://www.mezzoblue.com/archives/2006/11/01/counter_intu/" rel="freelink">http://www.mezzoblue.com/archives/20.../counter_intu/</a>。这篇博客 发布于2006年11月1日，但是看上去写得还是准确的。</em></p> - -<div id="xunlei_com_thunder_helper_plugin_d462f475-c18e-46be-bd10-327458d045bd"> </div> 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 ---- -<div>{{cssRef}}</div> - -<p>CSS <strong>图像合并</strong>（<strong>Image sprites</strong>） 技术，亦作 CSS 贴图定位、图像精灵（sprite，意为精灵），被运用于众多使用大量小图标的网页应用之上。它可取图像的一部分来使用，使得使用一个图像文件替代多个小文件成为可能。相较于一个小图标一个图像文件，单独一张图片所需的 HTTP 请求更少，对内存和带宽更加友好。</p> - -<div class="note"> -<p>备注: 当使用 HTTP/2 时，使用多个小流量请求实际上可能更为带宽友好。</p> -</div> - -<h2 id="实现">实现</h2> - -<p>若要为所有类名为 <code>toolbtn</code> 的元素附加上一张图片：</p> - -<pre class="brush:css">.toolbtn { - background: url(myfile.png); - display: inline-block; - height: 20px; - width: 20px; -} -</pre> - -<p>为设置 <code>background-position</code> 以使每个按钮得到合并后图片中的正确部分，可以在 <code>background</code> 属性中的 {{cssxref("url()")}} 后添加 x, y 两个坐标值，或直接使用 {{cssxref("background-position")}} 属性。例如：</p> - -<pre class="brush:css">#btn1 {background-position: -20px 0px} -#btn2 {background-position: -40px 0px} -</pre> - -<p>这会将 ID 为 btn1 的元素的背景向左移 20px，ID 为 btn2 的元素的背景向左移40px（假设这两个元素都带有 <code>toolbtn</code> 这个类且应用了上面 <code>background</code> 属性中定义的图片背景）</p> - -<p>类似的，你也可以使用下面的代码添加悬停效果：</p> - -<pre class="brush:css">#btn:hover { - background-position: <var><pixels shifted right></var>px <var><pixels shifted down></var>px; -} -</pre> - -<h3 id="深入阅读">深入阅读</h3> - -<p>CSS Tricks 上的完整 Demo：<a href="http://css-tricks.com/snippets/css/perfect-css-sprite-sliding-doors-button/">http://css-tricks.com/snippets/css/perfect-css-sprite-sliding-doors-button/</a></p> diff --git a/files/zh-cn/web/guide/css/css基础/index.html b/files/zh-cn/web/guide/css/css基础/index.html deleted file mode 100644 index 922f62c536..0000000000 --- a/files/zh-cn/web/guide/css/css基础/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: CSS基础 -slug: Web/Guide/CSS/CSS基础 -tags: - - CSS - - 'CSS:Getting_Started' - - CSS入门 - - CSS教程 - - Web - - 初学者 - - 教程 ---- -<p> </p> - -<p>该 <strong>CSS 指南</strong> 将会带你进入 <a href="/zh-CN/docs/CSS">层叠样式表</a> (CSS)的世界。本指南将通过实例来引导你学习语言的基本功能(你可以在自己的电脑上运行这些实例)，指南还将阐明能够运行在现代浏览器上的 CSS 标准功能。</p> - -<p>本指南适合 CSS 的初学者，但如果你已经学会了 CSS 的基本知识，该指南对你也会有所帮助。若你对 CSS 的经验十分丰富，那么本指南就不适合你了，CSS 主页 <a href="/zh-CN/docs/CSS">列出了</a> 更多的高级资源。</p> - -<nav class="fancyTOC"><a class="button" href="/zh-CN/docs/CSS/开始/What_is_CSS" rel="next">什么是 CSS</a> <a class="button" href="/zh-CN/docs/CSS/开始/为何使用CSS">为什么使用 CSS</a> <a class="button" href="/zh-CN/docs/CSS/开始/How_CSS_works">CSS 如何工作</a> <a class="button" href="/zh-CN/docs/CSS/开始/Cascading_and_inheritance">层叠与继承</a> <a class="button" href="/zh-CN/docs/CSS/开始/Selectors">选择器</a> <a class="button" href="/zh-CN/docs/CSS/开始/Readable_CSS">可读性良好的 CSS</a> <a class="button" href="/zh-CN/docs/CSS/开始/Text_styles">文本样式</a> <a class="button" href="/zh-CN/docs/CSS/开始/Color">颜色</a> <a class="button" href="/zh-CN/docs/CSS/开始/Content">内容</a> <a class="button" href="/zh-CN/docs/CSS/开始/Lists">列表</a> <a class="button" href="/zh-CN/docs/CSS/开始/Boxes">盒模型</a> <a class="button" href="/zh-CN/docs/CSS/开始/布局">布局</a> <a class="button" href="/zh-CN/docs/CSS/开始/Tables">表格</a> <a class="button" href="/zh-CN/docs/CSS/开始/媒体">媒体</a></nav> - -<h3 id="在开始学习之前你需要准备什么？">在开始学习之前你需要准备什么？</h3> - -<ul> - <li>一个文本编辑器</li> - <li>一个现代浏览器</li> - <li>编辑器与浏览器的基本使用方法</li> -</ul> - -<p>虽然没有这个要求，但是教程中的练习可以帮助你学习。你也可以只阅读教程、图片，但这是一种效率很低的学习方式。</p> - -<p><strong>注意： </strong>教程包括了CSS操作颜色的方法。因此指南的某些部分会依赖颜色。要想更容易的学习这些内容，你需要一个彩色显示器与<span class="short_text" id="result_box" lang="zh-CN"><span>正常色觉</span></span>。</p> - -<h2 id="如何使用本指南">如何使用本指南</h2> - -<p>在使用本指南时，需要按顺序仔细阅读每页的内容。如果跳过某个页面，可能会难以理解后续内容。</p> - -<h3 id="第一部分：CSS基础">第一部分：CSS基础</h3> - -<p>在每页中，通过<em>资料</em> 部分来了解 CSS 的工作原理。通过<em>实践</em> 部分来试着在你的计算机上使用 CSS。</p> - -<p>为了测试你对指南的理解程度，可以完成页面底部的挑战内容。挑战内容下面提供了答案的链接，这样你不想看答案的时候没有必要去看它们。</p> - -<p>为了深入了解 CSS，可以阅读以<em>更多资料</em> 为标题的方框中内容。你会从其中的超链接里找到更多 CSS 参考资料。</p> - -<h3 id="第二部分：CSS的应用范围">第二部分：CSS的应用范围</h3> - -<p>指南的第二部分提供了多个实例，用于展示 CSS 与 web 和 Mozilla 的其他技术的使用范围。</p> - -<ol> - <li><strong><a href="/zh-CN/docs/Web/Guide/CSS/Getting_started/JavaScript">JavaScript</a> </strong></li> - <li><strong><a href="/zh-CN/CSS/Getting_Started/SVG_graphics">SVG 图形</a> </strong></li> - <li><strong><a href="/zh-CN/CSS/Getting_Started/XML_data">XML 数据</a> </strong></li> - <li><strong><a href="/zh-CN/CSS/Getting_Started/XBL_bindings">XBL bindings</a> </strong></li> - <li><strong><a href="/zh-CN/CSS/Getting_Started/XUL_user_interfaces">XUL 用户界面</a> </strong></li> -</ol> - -<p> </p> 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 ---- -<p>{{ CSSTutorialTOC() }}</p> - -<p>{{ previousPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Lists", "列表") }}这是 <a href="/zh-CN/docs/CSS/开始">CSS入门教程</a> 的<span style="line-height: 1.5;">第11节，本节教你如何使用CSS来控制一个可见元素所占据的空间。在示例文档中，你可以修改元素占据的空间并增加装饰规则。</span></p> - -<h2 class="clearLeft" id="信息：盒模型">信息：盒模型</h2> - -<p>当你的浏览器展现一个元素时，这个元素会占据一定的空间。这个空间由四部分组成。</p> - -<p>中间是<em>元素</em>呈现内容的区域。这个区域的外面是<em>内边距</em>。再外面是<em>边框</em>。最外面的是<em>外边距</em>，外边距将该元素与其它元素分开。</p> - -<table> - <tbody> - <tr> - <td style="width: 22em;"> - <div style="background-color: #eee; padding: 0px 2em 2em 2em; width: 16em;"> - <p style="text-align: center; margin: 0px;">外边距</p> - - <p style="text-align: center; margin: 0px 0px -.75em 0px;">边框</p> - - <div style="background-color: #fff; padding: 0px 2em 2em 2em; border: 4px solid #fd9;"> - <p style="text-align: center;">内边距</p> - - <div style="background-color: #eee;"> - <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #999;">元素</p> - </div> - </div> - </div> - - <p><em>浅灰色标出了布局的几个部分。</em></p> - </td> - <td> - <div style="background-color: #fff; padding: 0px 2em 2em 2em; width: 16em;"> - <p style="text-align: center; margin: 0px;"> </p> - - <p style="text-align: center; margin: 0px 0px -.75em 0px;"> </p> - - <div style="background-color: #fff; padding: 0px 2em 2em 2em; border: 4px solid #fd9;"> - <p style="text-align: center;"> </p> - - <div style="background-color: #fff;"> - <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #999;">元素</p> - </div> - </div> - </div> - - <p><em>你在浏览器看到的样子。</em></p> - </td> - </tr> - </tbody> -</table> - -<p>内边距，边框和外边距在元素的上、右、下、左都可以有不同的大小。所有这些大小值都可以为0。</p> - -<h3 id="颜色">颜色</h3> - -<p>内边距总是跟元素的背景色一样，所以当你设置背景色时，你会发现背景色在元素本身和内边距上都生效了。外边距总是透明的。</p> - -<table> - <tbody> - <tr> - <td style="width: 22em;"> - <div style="background-color: #eee; padding: 0px 2em 2em 2em; width: 16em;"> - <p style="text-align: center; margin: 0px;">外边距</p> - - <p style="text-align: center; margin: 0px 0px -.75em 0px;">边框</p> - - <div style="background-color: #efe; padding: 0px 2em 2em 2em; border: 4px solid #fd9;"> - <p style="text-align: center;">内边距</p> - - <div style="background-color: #ded;"> - <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #898;">元素</p> - </div> - </div> - </div> - - <p><em>元素有绿色的背景。</em></p> - </td> - <td> - <div style="background-color: #fff; padding: 0px 2em 2em 2em; width: 16em;"> - <p style="text-align: center; margin: 0px;"> </p> - - <p style="text-align: center; margin: 0px 0px -.75em 0px;"> </p> - - <div style="background-color: #efe; padding: 0px 2em 2em 2em; border: 4px solid #fd9;"> - <p style="text-align: center;"> </p> - - <div style="background-color: #efe;"> - <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #898;">元素</p> - </div> - </div> - </div> - - <p><em>你在浏览器看到的样子。</em></p> - </td> - </tr> - </tbody> -</table> - -<h3 id="边框">边框</h3> - -<p>你可以用边线或者边框来装饰元素。</p> - -<p>用 {{ cssxref("border") }} 属性给元素四周指定统一的边框。在属性值中指定边框的宽度（通常是以显示到屏幕上的像素为单位）， 样式， 还有颜色。</p> - -<p>样式包括：</p> - -<table style="margin-left: 2em;"> - <tbody> - <tr> - <td style="width: 6em;"> - <div style="border: 2px solid #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>solid</code></div> - </td> - <td style="width: 6em;"> - <div style="border: 2px dotted #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>dotted</code></div> - </td> - <td style="width: 6em;"> - <div style="border: 2px dashed #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>dashed</code></div> - </td> - <td style="width: 6em;"> - <div style="border: 4px double #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>double</code></div> - </td> - </tr> - <tr> - <td style="width: 6em;"> - <div style="border: 2px inset #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>inset</code></div> - </td> - <td style="width: 6em;"> - <div style="border: 2px outset #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>outset</code></div> - </td> - <td style="width: 6em;"> - <div style="border: 4px ridge #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>ridge</code></div> - </td> - <td style="width: 6em;"> - <div style="border: 4px groove #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>groove</code></div> - </td> - </tr> - </tbody> -</table> - -<p>你也可以通过设置样式为 <code>none</code> 或 <code>hidden</code> 来明确地移除边框，或者设置边框颜色为 <code>transparent</code> 来让边框不可见，后者不会改变布局。</p> - -<p>如果一次只指定某一个方向的边框，就用属性： {{ cssxref("border-top") }}， {{ cssxref("border-right") }}， {{cssxref("border-bottom")}}， {{cssxref("border-left")}}。 你可以用这些属性指定某个方向上的边框，或者不同方向上的不同边框。</p> - -<div class="tuto_example"> -<div class="tuto_type">例子</div> - -<p>下面的代码设置了一个h3元素的背景色和顶部边框：</p> - -<pre class="brush:css">h3 { - border-top: 4px solid #7c7; /* 中绿 */ - background-color: #efe; /* 浅绿 */ - color: #050; /* 深绿 */ - } -</pre> - -<p>结果如下：</p> - -<table> - <tbody> - <tr> - <td> - <p style="font-size: 133%; font-weight: bold; background-color: #efe; border-top: 4px solid #7c7; color: #050; padding-right: 6em;">样式化后的标题</p> - </td> - </tr> - </tbody> -</table> - -<p>下面的规则通过给图片四周设置中灰色边框，使得图片元素更好辨认：</p> - -<pre class="brush:css">img {border: 2px solid #ccc;} -</pre> - -<p>结果如下：</p> - -<table> - <tbody> - <tr> - <td>图片:</td> - <td style="border: 2px solid #ccc;"><img alt="Image:Blue-rule.png" class="internal" src="/@api/deki/files/47/=Blue-rule.png"></td> - </tr> - </tbody> -</table> -</div> - -<h3 id="外边距和内边距">外边距和内边距</h3> - -<p>使用外边距和内边距调整元素的位置，并在其周围创建空间。</p> - -<p>用 {{ cssxref("margin") }} 属性或者 {{ cssxref("padding") }} 属性分别设置外边距和内边距的宽度。</p> - -<p>如果你指定一个宽度，它将会作用于元素四周（上、右、下、左）。</p> - -<p>如果你指定两个宽度， 第一个宽度会作用于顶部和底部，第二个宽度作用于右边和左边。</p> - -<p>你也可以按照顺序指定四个宽度： 上、右、下、左。</p> - -<div class="tuto_example"> -<div class="tuto_type">例子</div> - -<p>下面的规则通过给元素四周设置红色边框，标记出了类名为 <code>remark</code> 的段落元素。</p> - -<p>文本周围的内边距将边框与文字拉开一点距离。</p> - -<p>左外边距使得段落相对于其余文本产生缩进：</p> - -<pre class="brush:css">p.remark { - border: 2px solid red; - padding: 4px; - margin-left: 24px; - } -</pre> - -<p>结果如下：</p> - -<table> - <tbody> - <tr> - <td> - <p>这是一个普通的段落。</p> - - <p style="border: 2px solid red; padding: 4px 6em 4px 4px; margin: 0px 0px 0px 24px;">这是一个标记段落。</p> - </td> - </tr> - </tbody> -</table> -</div> - -<div class="tuto_details"> -<div class="tuto_type">更多细节</div> - -<p>当你使用外边距和内边距来调整元素的布局时，你的样式规则会与浏览器的默认规则以复杂的方式相互作用。</p> - -<p>不同的浏览器布局元素的方式不一样。直到你的样式表修改默认样式，结果可能看起来相似。有时这可能让你的样式表给出令人惊讶的结果。</p> - -<p>为了达到理想的效果，你可能需要改变文档的标记。本教程的下一页有更多关于这个的信息。</p> - -<p>欲知更多关于内边距，外边距和边框的细节， 请看 <a href="/zh-CN/docs/Web/CSS/box_model" title="en-US/docs/Web/Guide/CSS/box model"><span class="external">盒模型</span></a> 参考页。</p> -</div> - -<h2 id="实践：添加边框">实践：添加边框</h2> - -<p>编辑你的CSS文件，<code>style2.css</code>。添加下面的规则，给页面中每个标题元素上面画一条线：</p> - -<pre class="brush:css">h3 {border-top: 1px solid gray;} -</pre> - -<p>如果你做了前一页的挑战题，现在修改你已经创建的规则，或者添加这条新规则，给每个列表项的下面增加一定的空间：</p> - -<pre class="brush:css">li { - list-style: lower-roman; - margin-bottom: 8px; - } -</pre> - -<p>刷新你的浏览器看看效果：</p> - -<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;"> - <tbody> - <tr> - <td> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> - - <ul style=""> - <li style="margin-bottom: 8px;">Arctic</li> - <li style="margin-bottom: 8px;">Atlantic</li> - <li style="margin-bottom: 8px;">Pacific</li> - <li style="margin-bottom: 8px;">Indian</li> - <li style="margin-bottom: 8px;">Southern</li> - </ul> - - <p style="font-weight: bold; font-size: 133%; margin-top: 1em; margin-bottom: .3em; padding: .4em 4em .16em 0; border-top: 1px solid gray;">(B) Numbered paragraphs</p> - - <p><strong>1: </strong>Lorem ipsum</p> - - <p><strong>2: </strong>Dolor sit</p> - - <p><strong>3: </strong>Amet consectetuer</p> - - <p><strong>4: </strong>Magna aliquam</p> - - <p><strong>5: </strong>Autem veleum</p> - </td> - </tr> - </tbody> -</table> - -<div class="tuto_example"> -<div class="tuto_type">挑战</div> - -<p>给你的样式表添加一个规则，为下面的海洋列表增加 一个四面环绕且带有颜色的边框，来突出海洋——如下图所示：</p> - -<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;"> - <tbody> - <tr> - <td> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> - - <div style="border: 12px solid #69b; padding-left: 1em;"> - <ul style=""> - <li style="margin-bottom: 8px;">Arctic</li> - <li style="margin-bottom: 8px;">Atlantic</li> - <li style="margin-bottom: 8px;">Pacific</li> - <li style="margin-bottom: 8px;">Indian</li> - <li style="margin-bottom: 8px;">Southern</li> - </ul> - </div> - - <p style="font-weight: bold; font-size: 133%; margin-top: 1em; margin-bottom: .3em; padding: .4em 4em .16em 0; border-top: 1px solid gray;">(B) Numbered paragraphs</p> - - <p><strong>. . .</strong></p> - </td> - </tr> - </tbody> -</table> - -<p> </p> - -<p>（不必完全保证宽度和颜色和这里的一模一样。）</p> -</div> - -<p><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Boxes" title="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Boxes">看答案。</a></p> - -<h2 id="下一节">下一节?</h2> - -<p>{{ nextPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Layout", "布局") }}通过指定外边距和内边距，你已经能修改文档的布局了。下一页，你将使用别的方式来改变文档的<a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started/Layout" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Layout">布局</a> 。</p> 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 ---- -<p>{{ CSSTutorialTOC() }}</p> - -<p>{{ previousPage("/zh-CN/docs/CSS/开始/How_CSS_works", "CSS如何工作")}} <span class="seoSummary">这是 <a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started" title="en/CSS/Getting Started">开始学CSS</a> 教程的第4节; 这一节介绍了样式表中元素如何从父级继承样式，以及不同层级的样式如何相互作用决定最终显示效果。教给你通过在样式表中添加级联样式语句，进一步控制页面元素的展现。</span></p> - -<h2 class="clearLeft" id="资料_层叠和继承">资料: 层叠和继承</h2> - -<p>一个元素的样式，可以通过多种方式来定义，而多种定义方式之间通过复杂的影响关系决定了元素的最终样式。这种复杂既造就了CSS的强大，也导致CSS显得如此“混乱”而且难以调试。</p> - -<p>对于<em>层叠</em>来说，共有三种主要的样式来源：</p> - -<ul> - <li>浏览器对HTML定义的默认样式。</li> - <li><span style="line-height: 1.5;">用户定义的样式。</span></li> - <li><span style="line-height: 1.5;">开发者定义的样式，可以有三种形式：</span> - <ul> - <li><span style="line-height: 1.5;">定义在外部文件（外链样式）：本教程中案例主要是通过这种形式定义样式。</span></li> - <li>在页面的头部定义（内联样式）：通过这种形式定义的样式只在本页面内生效。</li> - <li>定义在特定的元素身上（行内样式）：这种形式多用于测试，可维护性较差。</li> - </ul> - </li> -</ul> - -<p>用户定义的样式表会覆盖浏览器定义的默认样式，然后网页开发者定义的样式又会覆盖用户样式。在这个教程中，你作为网页的开发者只需要关注开发者样式。</p> - -<div class="tuto_example"> -<div class="tuto_type">示例</div> - -<p>就你现在看到的这个页面而言，有一部分样式是来自浏览器定义的默认的HTML样式。</p> - -<p>有一部分样式可能来自用户通过浏览器自定义的样式，或者为浏览器引入自定义的样式表。例如，在Firefox中，在“首选项”对话框中可以自定义样式，也可以建立一个单独的<code>userContent.css</code> 样式文件并放到“用户配置”的文件夹中。</p> - -<p>另外，还有一部分样式来自外链的wiki服务器上的样式表。</p> -</div> - -<p>在浏览器中打开前面写的例子页面，你会发现 {{ HTMLElement("strong") }} 元素中的文字会比其他文字粗一些。这些样式就是在浏览器定义的默认HTML样式。</p> - -<p>而{{ HTMLElement("strong") }} 元素是红色的，这是你在自己的样式表中定义的样式。</p> - -<p>同时，{{ HTMLElement("strong") }} 作为 {{ HTMLElement("p") }} 的子元素，也继承了 {{ HTMLElement("p") }} 的样式。同样的， {{ HTMLElement("p") }} 也从 {{ HTMLElement("body") }} 中继承了许多的样式。</p> - -<p>再来看看优先级，从高到低依次为：网页开发者定义的样式、网页阅读者定义的样式、浏览器的默认样式。</p> - -<p>对继承的元素来说，子元素自身的样式优先级高于从父级继承来的样式。</p> - -<p>当然，关于优先级还有更多的知识点，我们会在后面的章节中继续介绍。</p> - -<div class="tuto_details"> -<div class="tuto_type">更多细节</div> - -<p>CSS 另外提供了一个!important关键字，用户可以通过使用这个关键字使自己定义的样式覆盖掉开发者定义的样式。</p> - -<p>这就意味着，作为开发者，你很难准确的预知页面<span style="line-height: 1.5;">最终</span><span style="line-height: 1.5;">在用户电脑上的显示效果。</span></p> - -<p>如果你想了解关于层级和继承的全部细节，请阅读CSS文档中的相关章节（英文）：<a class="external" href="http://www.w3.org/TR/CSS21/cascade.html">Assigning property values, Cascading, and Inheritance</a>。</p> -</div> - -<h2 id="动手_使用继承">动手: 使用继承</h2> - -<ol> - <li>编辑你之前创建的style.css文件。</li> - <li>把下面这行代码粘到以前的文件中，粘在之前的代码的上面或下面都可以。 不过，加在css文件的头部会更符合逻辑一些，因为在页面中 {{ HTMLElement("p") }} 是 {{ HTMLElement("strong") }} 的父级元素: - <pre class="brush:css">p {color: blue; text-decoration: underline;} -</pre> - </li> - <li>现在刷新你的浏览器，应该可以看到页面的变化。页面里所有的文本应该都被加上了下划线，也包括大写的首字母。{{ HTMLElement("strong") }} 从它的父级元素 {{ HTMLElement("p") }} 上继承到了下划线的样式。<br> - - <p>但是，{{ HTMLElement("strong") }} 元素仍然是红色的。红色是它本身的样式，所以优先级会超过父级元素 {{ HTMLElement("p") }} 的蓝色.</p> - </li> -</ol> - -<table style="background-color: #f4f4f4; border: 1px solid #36b; padding: 1em;"> -</table> - -<table style="border: 2px outset #36b; margin-right: 2em; padding: 1em;"> - <caption>修改前</caption> - <tbody> - <tr> - <td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> - </tr> - </tbody> -</table> - -<table style="border: 2px outset #36b; padding: 1em;"> - <caption>修改后</caption> - <tbody> - <tr> - <td style="color: blue; text-decoration: underline;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> - </tr> - </tbody> -</table> - -<div class="tuto_example"> -<div class="tuto_type">挑战</div> -改动一下样式表，完整如下效果：只在红色的字母上加下划线： - -<table style="border: 2px outset #36b; padding: 1em;"> - <tbody> - <tr> - <td style="color: blue;"><strong style="color: red; text-decoration: underline;">C</strong>ascading <strong style="color: red; text-decoration: underline;">S</strong>tyle <strong style="color: red; text-decoration: underline;">S</strong>heets</td> - </tr> - </tbody> -</table> - -<div class="tuto_details" id="tutochallenge"> -<div class="tuto_type">参考答案</div> - -<p>把定义在 {{ HTMLElement("p") }} 标签上的下划线样式移到 {{ HTMLElement("strong") }} 标签上。改后代码如下：</p> - -<pre class="brush: css">p {color: blue; } -strong {color: red; text-decoration: underline;} -</pre> - -<p> </p> -<a class="hideAnswer" href="#challenge">隐藏答案</a></div> -<a href="#tutochallenge" title="点击显示参考答案">查看参考答案</a></div> - -<h2 id="下一节">下一节?</h2> - -<p>{{ nextPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Selectors", "选择器")}} 到目前为止，你在样式表中所有的样式都是为标签上的，<code><p></code> 和 <code><strong>，你可以尝试着改变一下页面中它们的样式。</code>下一节会介绍怎样通过<a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started/Selectors" style="line-height: 1.5;" title="/zh-CN/docs/Web/Guide/CSS/Getting_Started/Selectors">更有效的方式</a><span style="line-height: 1.5;">定义样式。</span></p> 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 ---- -<p>{{ CSSTutorialTOC() }}</p> - -<p>{{previousPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Text_styles", "文本样式")}}这是<span class="seoSummary"> <a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS入门教程</a> 系列的第8部分; 介绍了如何在你的CSS文件中运用颜色值. 在示例样式表中，介绍了背景颜色.</span></p> - -<h2 class="clearLeft" id="关于_颜色">关于: 颜色</h2> - -<p><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">到目前为止，在这个系列中，都很少用到用名字命名的颜色属性。CSS2支持17种名字的颜色。其中有一些可能不像你期望的那样，如下图：</span></p> - -<table style="border: 0px; margin-left: 2em; text-align: right;"> - <tbody> - <tr> - <td></td> - <td>black</td> - <td style="width: 2em; height: 2em; background-color: black;"></td> - <td>gray</td> - <td style="width: 2em; height: 2em; background-color: gray;"></td> - <td>silver</td> - <td style="width: 2em; height: 2em; background-color: silver;"></td> - <td>white</td> - <td style="width: 2em; height: 2em; background-color: white; border: 1px dotted gray;"></td> - </tr> - <tr> - <td>主要的</td> - <td>red</td> - <td style="width: 2em; height: 2em; background-color: red;"></td> - <td>lime</td> - <td style="width: 2em; height: 2em; background-color: lime;"></td> - <td>blue</td> - <td style="width: 2em; height: 2em; background-color: blue;"></td> - </tr> - <tr> - <td>次要 </td> - <td>yellow</td> - <td style="width: 2em; height: 2em; background-color: yellow;"></td> - <td>aqua</td> - <td style="width: 2em; height: 2em; background-color: aqua;"></td> - <td>fuchsia</td> - <td style="width: 2em; height: 2em; background-color: fuchsia;"></td> - </tr> - <tr> - <td></td> - <td>maroon</td> - <td style="width: 2em; height: 2em; background-color: maroon;"></td> - <td>orange</td> - <td style="width: 2em; height: 2em; background-color: orange;"></td> - <td>olive</td> - <td style="width: 2em; height: 2em; background-color: olive;"></td> - <td>purple</td> - <td style="width: 2em; height: 2em; background-color: purple;"></td> - <td>green</td> - <td style="width: 2em; height: 2em; background-color: green;"></td> - <td>navy</td> - <td style="width: 2em; height: 2em; background-color: navy;"></td> - <td>teal</td> - <td style="width: 2em; height: 2em; background-color: teal;"></td> - </tr> - </tbody> -</table> - - - -<div class="tuto_details"> -<div class="tuto_type">细节</div> - -<div style="line-height: 1.428571em; font-family: Helvetica, Arial, 'Droid Sans', sans-serif; color: rgb(0, 0, 0);">你的浏览器可能支持更多名字命名的颜色，比如：</div> - -<div></div> - -<table style="background-color: inherit; border: 0px; margin: .5em 0px .5em 2em; text-align: right;"> - <tbody> - <tr> - <td>dodgerblue</td> - <td style="width: 2em; height: 2em; background-color: dodgerblue;"></td> - <td>peachpuff</td> - <td style="width: 2em; height: 2em; background-color: peachpuff;"></td> - <td>tan</td> - <td style="width: 2em; height: 2em; background-color: tan;"></td> - <td>firebrick</td> - <td style="width: 2em; height: 2em; background-color: firebrick;"></td> - <td>aquamarine</td> - <td style="width: 2em; height: 2em; background-color: aquamarine;"></td> - </tr> - </tbody> -</table> - -<p><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">对于更多存在的名字的颜色命名</span>, <span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">你可以参看CSS 3颜色模块中的</span><span style="line-height: 1.5;">: </span><a class="external" href="http://www.w3.org/TR/2003/CR-css3-color-20030514/#svg-color" style="line-height: 1.5;">SVG color keywords</a><span style="line-height: 1.5;"> 部分. </span><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">一定要注意的是，使用名字命名颜色的时候，有可能用户的浏览器是不支持的。</span></p> -</div> - -<p><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">对于更多地颜色，你可以使用代表红，绿，蓝三个颜色的16进制数字来表示。16进制数字的范围0-9，a-f。其中a-f代表的数值就是10-15：</span></p> - -<table style="border: 0px; margin-left: 2em;"> - <tbody> - <tr> - <td>黑</td> - <td style="width: 2em; height: 2em; background-color: #000;"></td> - <td><code>#000</code></td> - </tr> - <tr> - <td>纯 红</td> - <td style="width: 2em; height: 2em; background-color: #f00;"></td> - <td><code>#f00</code></td> - </tr> - <tr> - <td>纯 绿</td> - <td style="width: 2em; height: 2em; background-color: #0f0;"></td> - <td><code>#0f0</code></td> - </tr> - <tr> - <td>纯 蓝</td> - <td style="width: 2em; height: 2em; background-color: #00f;"></td> - <td><code>#00f</code></td> - </tr> - <tr> - <td>白</td> - <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"></td> - <td><code>#fff</code></td> - </tr> - </tbody> -</table> - -<p><br> - <span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">要得到浏览器能够呈现的所有的颜色，你就得使用两个16进制来表示（也就是6位）</span>:</p> - -<table style="border: 0px; margin-left: 2em;"> - <tbody> - <tr> - <td>黑</td> - <td style="width: 2em; height: 2em; background-color: #000;"></td> - <td><code>#000000</code></td> - </tr> - <tr> - <td>纯红</td> - <td style="width: 2em; height: 2em; background-color: #f00;"></td> - <td><code>#ff0000</code></td> - </tr> - <tr> - <td>纯绿</td> - <td style="width: 2em; height: 2em; background-color: #0f0;"></td> - <td><code>#00ff00</code></td> - </tr> - <tr> - <td>纯蓝</td> - <td style="width: 2em; height: 2em; background-color: #00f;"></td> - <td><code>#0000ff</code></td> - </tr> - <tr> - <td>白</td> - <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"></td> - <td><code>#ffffff</code></td> - </tr> - </tbody> -</table> - -<p><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">你能够从你的画图程序或者其他的工具上得到6位的颜色数值</span>.</p> - -<div class="tuto_example"> -<div class="tuto_type">例如</div> - -<p><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">可以通过调整3位数字来得到不同的颜色</span>:</p> - -<table style="background-color: #fffff4; border: 0px; margin-left: 2em;"> - <tbody> - <tr> - <td>从纯红开始:</td> - <td style="width: 2em; height: 2em; background-color: #f00;"></td> - <td><code>#f00</code></td> - </tr> - <tr> - <td><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">让它淡一点，加一些绿色和蓝色</span>:</td> - <td style="width: 2em; height: 2em; background-color: #f77;"></td> - <td><code>#f77</code></td> - </tr> - <tr> - <td><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">让它更偏橙色一些，多加一些绿色</span>:</td> - <td style="width: 2em; height: 2em; background-color: #fa7;"></td> - <td><code>#fa7</code></td> - </tr> - <tr> - <td><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">让它更深一些，所有的颜色部分，红，绿，蓝都要减少</span>:</td> - <td style="width: 2em; height: 2em; background-color: #c74;"></td> - <td><code>#c74</code></td> - </tr> - <tr> - <td><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">让它的饱和度更低一些，所有的颜色值都调整到差不多大小</span>:</td> - <td style="width: 2em; height: 2em; background-color: #c98;"></td> - <td><code>#c98</code></td> - </tr> - <tr> - <td><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">如果所有的颜色值都相等，那么就变成了灰色</span>:</td> - <td style="width: 2em; height: 2em; background-color: #ccc;"></td> - <td><code>#ccc</code></td> - </tr> - </tbody> -</table> - -<p><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">对于浅色，比如说淡蓝色</span>:</p> - -<table style="background-color: #fffff4; border: 0px; margin-left: 2em;"> - <tbody> - <tr> - <td><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">从纯白色开始</span>:</td> - <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"></td> - <td><code>#fff</code></td> - </tr> - <tr> - <td><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">稍微降低一下各个颜色值</span>:</td> - <td style="width: 2em; height: 2em; background-color: #eef; border: 1px dotted gray;"></td> - <td><code>#eef</code></td> - </tr> - </tbody> -</table> -</div> - -<div class="tuto_details"> -<div class="tuto_type">更多细节</div> - -<p><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">还能够通过RGB值（0-255或者是百分比值），来得到颜色</span></p> - -<p><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">比如，下面是深红色的RGB表示法</span>:</p> - -<pre class="brush:css">rgb(128, 0, 0) </pre> - -<p><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">对于如何指定颜色的所有信息，可以参看 CSS规范中的</span>: <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#color-units">Colors</a> 部分.</p> - -<p><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">更多关于系统颜色的说明，比如菜单、</span>树<span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">等，可以参看CSS规范中得</span><span style="line-height: 1.5;">: </span><a class="external" href="http://www.w3.org/TR/CSS21/ui.html#system-colors" style="line-height: 1.5;">CSS2 System Colors</a><span style="line-height: 1.5;"> 部分.</span></p> -</div> - -<h3 id="颜色属性">颜色属性</h3> - -<p>你已经在文本中使用了 {{ cssxref("color") }} 属性.</p> - -<p><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">同样可以使用</span><span style="line-height: 1.5;">{{ cssxref("background-color") }} </span><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">属性来改变元素的背景色.</span></p> - -<p><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">背景色可以设置</span><span style="line-height: 1.5;"> </span><code style="font-size: 14px;">transparent</code><span style="line-height: 1.5;"> </span><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">属性来移除掉所有的颜色，呈现出父元素的背景色</span></p> - -<div class="tuto_example"> -<div class="tuto_type">例如</div> - -<p>在本指南中，<strong>例如</strong> 文本框使用了淡黄色来表示背景色：</p> - -<pre class="brush:css">background-color: #fffff4; -</pre> - -<p><strong>更多细节</strong> 文本框使用了下面的淡灰色 :</p> - -<pre class="brush:css">background-color: #f4f4f4; -</pre> -</div> - - - -<h2 id="实践_使用颜色代码">实践: 使用颜色代码</h2> - -<ol> - <li>编辑你的CSS文件.</li> - <li><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">下面用粗体显示的部分，表示首字母用淡蓝色显示</span>. (你的文件中的布局和注释可能与下面所示的不同。按照你喜欢的方式来组织它们吧！) - <pre class="brush:css;highlight:[13]">/*** 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;} </pre> - </li> - <li><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">保存文件，刷新浏览器看结果</span>.</li> -</ol> - -<table> - <tbody> - <tr> - <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="background-color: #ddddff; color: red; font: 200% serif;">C</strong>ascading <strong style="background-color: #ddddff; color: green; font: 200% serif;">S</strong>tyle <strong style="background-color: #ddddff; color: green; font: 200% serif;">S</strong>heets</td> - </tr> - <tr> - <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="background-color: #ddddff; color: red; font: 200% serif;">C</strong>ascading <strong style="background-color: #ddddff; color: red; font: 200% serif;">S</strong>tyle <strong style="background-color: #ddddff; color: red; font: 200% serif;">S</strong>heets</td> - </tr> - </tbody> -</table> - -<div class="tuto_example"> -<div class="tuto_type">挑战</div> - -<p><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">在你的CSS文件中，把所有的代码颜色的名字用3位16进制数字的方式表示出来</span>.</p> - -<p>(<span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 1.428571em;">不能完全做出来，不过能够最的很接近。如果要准备的表示颜色名字的话，需要6位16进制</span><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 1.428571em;">你需要查一下CSS规范或者是工具来得到一致的颜色</span><span style="line-height: 1.5;">.)</span></p> - -<div class="tuto_details" id="tutochallenge"> -<div class="tuto_type">Possible solution</div> - -<p>The following values are reasonable approximations of the named colors:</p> - -<pre class="brush: css">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 */ -} -</pre> - - -<a class="hideAnswer" href="#challenge">Hide solution</a></div> -<a href="#tutochallenge" title="Display a possible solution for the challenge">查看解决的方法.</a></div> - -<h2 id="下一步">下一步?</h2> - -<p>{{nextPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Content", "内容")}}. 示例文本和示例样式表是严格分开的。在 <a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started/Content" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Content">下一节 </a>将介绍在什么情况下可以允许他们不分开.</p> 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 ---- -<p>{{ CSSTutorialTOC() }}</p> - -<p>{{ previousPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Color", "颜色") }}<span class="seoSummary">这是 <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS 入门教程</a>的第9部分，介绍了一些通过CSS改变文档内容的方法。这样，仅修改样式表你就能把文本内容及图片添加到文档。</span></p> - -<h2 class="clearLeft" id="信息_内容">信息: 内容</h2> - -<p>CSS的一个重要优势是它可以帮助你将文档内容和其样式分离。但是有时候在样式而非文档中定义一些内容也是很有用的。</p> - -<p>在样式中可以定义文本内容和图片内容。当内容与文档结构紧密相关的时候，你可以在样式表中指定内容。</p> - -<div class="tuto_details"> -<div class="tuto_type">更多细节</div> - -<p>在样式表中指定内容会使事情变得复杂：你可能有多个语言版本的文档共享同一个样式表。如果样式表的一部分需要翻译，这就意味着你需要将这部分单独保存在多个样式表中，并在不同语言的文档中引用。</p> - -<p>如果你指定的内容由通用符号和图片组成的话，就不存在这个问题。</p> - -<p>样式表中指定的内容不会成为DOM的一部分。</p> -</div> - -<h3 id="文本内容">文本内容</h3> - -<p>CSS可以在元素的前后插入文本：在选择器的后面加上{{ cssxref("::before") }} 或者 {{ cssxref("::after") }} 。在声明中，指定 {{ cssxref("content") }} 属性，并设置文本内容。</p> - -<div class="tuto_example"> -<div class="tuto_type">例</div> - -<p>下面这条规则在所有类名包含 <span style="font-family: courier new,andale mono,monospace; line-height: normal;">ref的元素前面加上</span><span style="line-height: 1.5;"> </span><strong style="color: navy; font-weight: bold; line-height: 1.5;">Reference:</strong></p> - -<pre class="brush:css">.ref::before { - font-weight: bold; - color: navy; - content: "Reference: "; -} -</pre> -</div> - -<div class="tuto_details"> -<div class="tuto_type">更多细节</div> - -<p>样式表默认使用UTF-8字符集。也可以通过link属性或样式表以及其他方式指定。 参见 CSS规范中 <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q23">4.4 CSS style sheet representation</a></p> - -<p>还可以通过转义机制（通过反斜杠转义）指定单个字符。<span style="line-height: 1.5;">比如， \265B 是国际象棋黑皇后的符号 ♛。更多参见 </span><a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q24" style="line-height: 1.5;">Referring to characters not represented in a character encoding</a><span style="line-height: 1.5;"> 和CSS规范中的 </span><a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q6" style="line-height: 1.5;">Characters and case</a><span style="line-height: 1.5;">。</span></p> -</div> - -<h3 id="图片内容">图片内容</h3> - -<p>可以通过将{{ cssxref("content") }} 属性值设置为某个图片的URL，可以将图片插到元素的前面或后面。</p> - -<div class="tuto_example"> -<div class="tuto_type">例</div> - -<p>下面这条规则在所有类名包含<span style="font-family: courier new,andale mono,monospace; line-height: normal;">glossary的a标签后面插入一个空格和一个图标：</span></p> - -<pre class="brush:css">a.glossary::after {content: " " url("../images/glossary-icon.gif");} -</pre> -</div> - -<p>将图片设置成元素的背景图：将 {{ cssxref("background") }} 的值设为图片的URL。这是同时设置背景颜色，背景图，图片如何重复等的快捷写法。</p> - -<div class="tuto_example"> -<div class="tuto_type">例</div> - -<p>这条规则通过指定图片URL设置特定元素的背景。</p> - -<p>这是一个ID选择器；no-repeat表示背景图只出现一次，不重复:</p> - -<pre class="brush:css">#sidebar-box {background: url("../images/sidebar-ground.png") no-repeat;} -</pre> -</div> - -<div class="tuto_details"> -<div class="tuto_type">更多细节</div> - -<p>了解更多影响背景图的属性，以及其他背景图选项，参见 {{ cssxref("background") }} 。</p> -</div> - -<h2 id="实践_添加背景图片">实践: 添加背景图片</h2> - -<p>这幅图是一个白方块，底部有一条蓝色实线:</p> - -<table style="border: 2px solid #cccccc;"> - <tbody> - <tr> - <td><img alt="Image:Blue-rule.png" class="internal" src="https://mdn.mozillademos.org/files/160/Blue-rule.png"></td> - </tr> - </tbody> -</table> - -<ol> - <li>下载上图放到CSS同目录下</li> - <li>编辑CSS文件，为body设置背景图. - <pre class="brush:css">background: url("Blue-rule.png"); -</pre> - - <p>背景图默认是 <code>repeat（重复）的，无需明确指出。图片在水平和垂直方向重复，最终呈现出横格纸的效果：</code></p> - - <div style="position: relative; width: 24em; height: 11em; border: 2px outset #36b; overflow: hidden;"> - <p style="margin: 0px;"><img alt="Image:Blue-rule-ground.png" class="internal" src="https://mdn.mozillademos.org/files/161/Blue-rule-ground.png"></p> - - <div style="position: absolute; top: 0px; left: 0px; border: none; margin: 0px; padding: .5em 0px 0px 1em; font: 16px 'Comic Sams MS', cursive; color: blue; background-color: transparent;"> - <div style="font-style: italic; width: 24em;"> - <p><strong style="background-color: #ddddff; color: red; font: 200% serif;">C</strong>ascading <strong style="background-color: #ddddff; color: green; font: 200% serif;">S</strong>tyle <strong style="background-color: #ddddff; color: green; font: 200% serif;">S</strong>heets</p> - </div> - - <div style="font-style: normal; padding-top: 2px; height: 8em;"> - <p><strong style="background-color: #ddddff; color: red; font: 200% serif;">C</strong>ascading <strong style="background-color: #ddddff; color: red; font: 200% serif;">S</strong>tyle <strong style="background-color: #ddddff; color: red; font: 200% serif;">S</strong>heets</p> - </div> - </div> - </div> - </li> -</ol> - -<div class="tuto_example"> -<div class="tuto_type">挑战</div> - -<p>下载图片:</p> - -<table style="border: 2px solid #cccccc;"> - <tbody> - <tr> - <td><img alt="Image:Yellow-pin.png" class="internal" src="https://mdn.mozillademos.org/files/924/Yellow-pin.png"></td> - </tr> - </tbody> -</table> - -<p>在样式表中增加一条规则，使得每行前面显示上面的图标</p> - -<div style="position: relative; width: 24em; height: 11em; border: 2px outset #36b; overflow: hidden;"> -<p style="margin: 0px;"><img alt="Image:Blue-rule-ground.png" class="internal" src="https://mdn.mozillademos.org/files/161/Blue-rule-ground.png"></p> - -<div style="position: absolute; top: 0px; left: 0px; border: none; margin: 0px; padding: .5em 0px 0px 1em; font: 16px 'Comic Sams MS', cursive; color: blue; background-color: transparent;"> -<div style="font-style: italic; width: 24em; padding-top: 8px;"><img alt="image:Yellow-pin.png" class="internal" src="https://mdn.mozillademos.org/files/924/Yellow-pin.png"> <strong style="background-color: #ddddff; color: red; font: 200% serif;">C</strong>ascading <strong style="background-color: #ddddff; color: green; font: 200% serif;">S</strong>tyle <strong style="background-color: #ddddff; color: green; font: 200% serif;">S</strong>heets</div> - -<div style="font-style: normal; padding-top: 12px; height: 8em;"><img alt="image:Yellow-pin.png" class="internal" src="https://mdn.mozillademos.org/files/924/Yellow-pin.png"> <strong style="background-color: #ddddff; color: red; font: 200% serif;">C</strong>ascading <strong style="background-color: #ddddff; color: red; font: 200% serif;">S</strong>tyle <strong style="background-color: #ddddff; color: red; font: 200% serif;">S</strong>heets</div> -</div> -</div> - -<div class="tuto_details" id="tutochallenge"> -<div class="tuto_type">Possible solution</div> - -<p>Add this rule to your stylesheet:</p> - -<pre class="brush: css">p:before{ - content: url("yellow-pin.png"); -} -</pre> - -<p> </p> -<a class="hideAnswer" href="#challenge">Hide solution</a></div> -<a href="#tutochallenge" title="Display a possible solution for the challenge">答案.</a></div> - -<h2 id="接下来">接下来?</h2> - -<p>{{ nextPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Lists", "列表") }}列表是一种常见的为列表元素添加内容的方式。下节将介绍如何 <a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started/Lists" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Lists">为列表元素指定样式</a>。</p> 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 ---- -<p>{{ CSSTutorialTOC() }}</p> - -<p>{{ previousPage("/zh-CN/docs/CSS/开始/为何使用CSS", "为何使用CSS？") }}<span class="seoSummary">这是 <a href="/en-US/docs/Web/Guide/CSS/Getting_started" title="en-US/docs/Web/Guide/CSS/Getting_started">CSS Getting Started</a> 教程的第三章; 这章解释了CSS在浏览器中是如何工作的。 你可以通过分析示例代码来看看样式表中的详细信息。</span></p> - -<h2 class="clearLeft" id="信息：CSS_如何工作">信息：CSS 如何工作</h2> - -<p>浏览器在展现一个文档的时候，必须要把文档内容和相应的样式信息结合起来展示。 这个处理过程一般分两个阶段：</p> - -<ol> - <li>浏览器先将标记语言和CSS转换成<a href="/en-US/docs/DOM" title="/en-US/docs/HTML/DOM"><em>DOM</em></a> (文档对象模型)结构。 这时DOM 就代表了电脑内存中的相应文档，因为它已经融合了文档内容和相应的样式表。</li> - <li>最后浏览器把 DOM的内容展示出来。</li> -</ol> - -<p>标记语言通过使用“元素”来定义文档结构。你需要使用一些以'<'开头和以'>'结尾的字符串，俗称<em>tags，</em>来构成元素。这些元素一般是在'<code>< ></code>'里加上元素名来作为起始tag，在<span style="line-height: inherit;">'</span><code style="font-size: 14px; line-height: inherit;">< ></code><span style="line-height: inherit;">'里加上'/'和元素名的组合来构成结束tag。标记语言中规定，一些元素可以只有一个起始tag，或者构成元素的tag只有一个，但是这个tag里的名称后面必须要加个'/'。</span></p> - -<p>元素也可以作为容器而存在，这样可以把其他元素放到这个元素的起始tag和结束tag之间。</p> - -<p>DOM是一种树形结构。 每个元素和非空文本都可以看做是树形结构上的一个结点。DOM结点不再是容器，但是，它可以作为子结点的父类结点而存在。</p> - -<div class="tuto_example"> -<div class="tuto_type">示例</div> -在示例代码中， 我们使用 <code><p></code> 标签和它的结束标签 <code></p></code> 构造了一个容器： - -<pre class="brush:html"><p> - <strong>C</strong>ascading - <strong>S</strong>tyle - <strong>S</strong>heets -</p> -</pre> - -<h2 id="实例">实例</h2> - -<p><a href="http://jsfiddle.net/djaniketster/6jbpS/">http://jsfiddle.net/djaniketster/6jbpS/</a></p> - -<p>在这个 DOM中， P 结点是一个父结点，它的子结点包含了一些STRONG结点和文本结点。同时，STRONG结点各自也是父结点，它们也分别包含了一些文本结点作为子结点。</p> - -<pre><span style="color: black;">P</span> -├─<span style="color: black;">STRONG</span> -│ └─"<span style="color: black;">C</span>" -├─"<span style="color: black;">ascading</span>" -├─<span style="color: black;">STRONG</span> -│ └─"<span style="color: black;">S</span>" -├─"<span style="color: black;">tyle</span>" -├─<span style="color: black;">STRONG</span> -│ └─"<span style="color: black;">S</span>" -└─"<span style="color: black;">heets</span>"</pre> -</div> - -<p>理解 DOM 结构可以帮助你更好的去设计、调试、维护CSS，因为 DOM 结构就是你的CSS和文档内容融合而成的。</p> - -<h2 id="行动：分析DOM结构">行动：分析DOM结构</h2> - -<h3 id="使用_DOM_Inspector">使用 DOM Inspector</h3> - -<p>你需要使用特殊的软件来分析 DOM结构。在这里，假设你使用的是 Mozilla的 <a href="/en/DOM_Inspector" title="en/DOM_Inspector">DOM Inspector</a> (DOMi) 插件来分析一个 DOM结构。 下面的操作需要你提前安装插件才可以执行。</p> - -<ol> - <li>使用 Mozilla 浏览器来打开示例文档。</li> - <li>在浏览器菜单栏中，选择 <strong>工具 > 查看器</strong>，也可能是选择 <strong>工具> Web 开发者 > 查看器。</strong> - <div class="tuto_details"> - <div class="tuto_type">更多细节</div> - - <p>如果你的 Mozilla 浏览器没有安装 DOMi，你可以到 <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/6622/" title="https://addons.mozilla.org/en-US/firefox/addon/6622/">安装地址</a> 来安装并重启浏览器，然后再回到这里继续学习。</p> - - <p>如果你不想安装 DOMi (或者你使用的是非Mozilla浏览器)，那么你可以试试下个章节中介绍的 Web X-Ray Goggles。 你也可以直接跳过本章节，进行下一章的学习，这并不会影响你接下来的学习内容。</p> - </div> - </li> - <li>你可以在 DOMi中通过点击文档结点前面的箭头来将他们展开。 - <p><strong>注意: </strong> HTML 文件中的空格在 DOMi 中会显示为一些空的文本结点，你可以直接忽略掉它。</p> - - <p>通过展开元素结点，你可能会看到下面这样的一部分内容：</p> - - <pre>│ ▼╴<span style="color: black;">P</span> -│ │ │ ▼╴<span style="color: black;">STRONG</span> -│ │ └<span style="color: darkblue;">#text</span> -│ ├╴<span style="color: darkblue;">#text</span> -│ ►╴<span style="color: black;">STRONG</span> -│ │</pre> - - <p>选择任何元素都可以在 DOMi 右边的面板中找到关于这个元素更详细的信息。例如，当你选择一个文本结点的时候，右边面板中会显示这个结点的文本信息。</p> - - <p>如果你选择的结点是一个元素，那么 DOMi 会分析这个元素，并在右边面板中展示关于它的一大堆信息内容。同时，样式信息只是这些内容的一部分罢了。 </p> - </li> -</ol> - -<div class="tuto_example"> -<div class="tuto_type">挑战</div> - -<p>在 DOMi 中，点击一个 <small>STRONG</small> 结点。</p> - -<p>在 DOMi的右边面板中找出，设置此结点颜色为红色的地方和设置结点内容加粗的地方。 </p> - -<div class="tuto_details" id="tutochallenge"> -<div class="tuto_type">Possible solution</div> - -<p>In the menu above the right-hand pane, choose <strong>CSS Rules</strong>. You see two items listed, one that references an internal resource and one that references your stylesheet file. The internal resource defines the <strong>font-weight</strong> property as <code>bolder</code>; your stylesheet defines the <strong>color</strong> property as <code>red</code>.</p> -<a class="hideAnswer" href="#challenge">Hide solution</a></div> -<a href="#tutochallenge" title="Display a possible solution for the challenge">查看挑战的解决方案</a></div> - -<h3 id="使用_Web_X-Ray_Goggles">使用 Web X-Ray Goggles</h3> - -<p><a class="link-https" href="http://hackasaurus.org/en-US/goggles/install/" title="https://secure.toolness.com/webxray/">Web X-Ray Goggles </a>显示的信息内容相比较 DOM Inspector要少， 但是它安装和使用的步骤更简单。</p> - -<p><span style="line-height: 1.5;">到 </span><a class="link-https" href="http://hackasaurus.org/en-US/goggles/install/" style="line-height: 1.5;" title="https://secure.toolness.com/webxray/">Web X-Ray Goggles</a>的主页。</p> - -<ol> - <li>将页面中的书签链接拖拽到浏览器工具栏。</li> - <li>打开你的示例 HTML 文档。</li> - <li>通过点击工具栏中的相应书签来激活Web X-Ray Goggles。 </li> - <li>通过在文档中移动鼠标箭头来查看相应的文档元素。</li> -</ol> - -<h2 id="What_next">What next?</h2> - -<p>{{ nextPage("/zh-CN/docs/CSS/开始/Cascading_and_inheritance", "层叠和继承") }}如果你做过上文中的练习，你会发现不同位置的style样式是相互影响共同生成了元素的最终展现。在 <a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance">下一章</a> 中将会深入解释这种相互联系和相互影响。</p> 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 ---- -<p> </p> - -<p>该 <strong>CSS 指南</strong> 将会带你进入 <a href="/zh-CN/docs/CSS">层叠样式表</a> (CSS)的世界。本指南将通过实例来引导你学习语言的基本功能(你可以在自己的电脑上运行这些实例)，指南还将阐明能够运行在现代浏览器上的 CSS 标准功能。</p> - -<p>本指南适合 CSS 的初学者，但如果你已经学会了 CSS 的基本知识，该指南对你也会有所帮助。若你对 CSS 的经验十分丰富，那么本指南就不适合你了，CSS 主页 <a href="/zh-CN/docs/CSS">列出了</a> 更多的高级资源。</p> - -<nav class="fancyTOC"><a class="button" href="/zh-CN/docs/CSS/开始/What_is_CSS" rel="next">什么是 CSS</a> <a class="button" href="/zh-CN/docs/CSS/开始/为何使用CSS">为什么使用 CSS</a> <a class="button" href="/zh-CN/docs/CSS/开始/How_CSS_works">CSS 如何工作</a> <a class="button" href="/zh-CN/docs/CSS/开始/Cascading_and_inheritance">层叠与继承</a> <a class="button" href="/zh-CN/docs/CSS/开始/Selectors">选择器</a> <a class="button" href="/zh-CN/docs/CSS/开始/Readable_CSS">可读性良好的 CSS</a> <a class="button" href="/zh-CN/docs/CSS/开始/Text_styles">文本样式</a> <a class="button" href="/zh-CN/docs/CSS/开始/Color">颜色</a> <a class="button" href="/zh-CN/docs/CSS/开始/Content">内容</a> <a class="button" href="/zh-CN/docs/CSS/开始/Lists">列表</a> <a class="button" href="/zh-CN/docs/CSS/开始/Boxes">盒模型</a> <a class="button" href="/zh-CN/docs/CSS/开始/布局">布局</a> <a class="button" href="/zh-CN/docs/CSS/开始/Tables">表格</a> <a class="button" href="/zh-CN/docs/CSS/开始/媒体">媒体</a></nav> - -<h3 id="在开始学习之前你需要准备什么？">在开始学习之前你需要准备什么？</h3> - -<ul> - <li>一个文本编辑器</li> - <li>一个现代浏览器</li> - <li>编辑器与浏览器的基本使用方法</li> -</ul> - -<p>虽然没有这个要求，但是教程中的练习可以帮助你学习。你也可以只阅读教程、图片，但这是一种效率很低的学习方式。</p> - -<p><strong>注意： </strong>教程包括了CSS操作颜色的方法。因此指南的某些部分会依赖颜色。要想更容易的学习这些内容，你需要一个彩色显示器与<span class="short_text" id="result_box" lang="zh-CN"><span>正常色觉</span></span>。</p> - -<h2 id="如何使用本指南">如何使用本指南</h2> - -<p>在使用本指南时，需要按顺序仔细阅读每页的内容。如果跳过某个页面，可能会难以理解后续内容。</p> - -<h3 id="第一部分：CSS基础">第一部分：CSS基础</h3> - -<p>在每页中，通过<em>资料</em> 部分来了解 CSS 的工作原理。通过<em>实践</em> 部分来试着在你的计算机上使用 CSS。</p> - -<p>为了测试你对指南的理解程度，可以完成页面底部的挑战内容。挑战内容下面提供了答案的链接，这样你不想看答案的时候没有必要去看它们。</p> - -<p>为了深入了解 CSS，可以阅读以<em>更多资料</em> 为标题的方框中内容。你会从其中的超链接里找到更多 CSS 参考资料。</p> - -<h3 id="第二部分：CSS的应用范围">第二部分：CSS的应用范围</h3> - -<p>指南的第二部分提供了多个实例，用于展示 CSS 与 web 和 Mozilla 的其他技术的使用范围。</p> - -<ol> - <li><strong><a href="/zh-CN/CSS/Getting_Started/JavaScript">JavaScript</a> </strong></li> - <li><strong><a href="/zh-CN/CSS/Getting_Started/SVG_graphics">SVG 图形</a> </strong></li> - <li><strong><a href="/zh-CN/CSS/Getting_Started/XML_data">XML 数据</a> </strong></li> - <li><strong><a href="/zh-CN/CSS/Getting_Started/XBL_bindings">XBL bindings</a> </strong></li> - <li><strong><a href="/zh-CN/CSS/Getting_Started/XUL_user_interfaces">XUL 用户界面</a> </strong></li> -</ol> - -<p> </p> 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 ---- -<p>{{ CSSTutorialTOC() }}</p> - -<p>本文是 <a href="/en/CSS/Getting_Started" title="https://developer.mozilla.org/en/CSS/Getting_Started">CSS tutorial</a> 第二部分的第一章节。第二部分的内容主要是一些css和其他web技术的使用范例。 </p> - -<p>第二部分的内容主要来向你展示CSS是如何同其他技术进行交互的。但是这样做的目的并不是教你如何使用这些技术，如果你想深入学习，可以查找具体的文档。</p> - -<p>换句话说，这些页面是用来向你展示CSS的多种用途的。通过这些页面，你不需要掌握其他技术就可以获取到很多CSS的相关知识。</p> - -<p>上一章 (Part I)： <a href="/en/CSS/Getting_Started/Media" title="https://developer.mozilla.org/en/CSS/Getting_Started/Media">Media</a><br> - 下一章： <a href="/en/CSS/Getting_Started/SVG_graphics" title="https://developer.mozilla.org/en/CSS/Getting_Started/SVG_graphics">SVG</a></p> - -<h3 id="Information:_JavaScript" name="Information:_JavaScript">相关知识： JavaScript</h3> - -<p>JavaScript是一种编程语言，它被广泛用来实现web站点和应用中的交互效果。</p> - -<p>JavaScript可以同样式进行交互，你可以通过编写程序来动态改变文档上元素的样式。 </p> - -<p>有三种方法可以实现这样的效果：</p> - -<ul> - <li>控制样式表—可以添加、删除、修改样式表。</li> - <li>控制样式规则—可以添加、删除、修改样式规则。</li> - <li>控制DOM中的单个元素—可以不依赖样式表来修改元素样式。</li> -</ul> - -<table style="background-color: #f4f4f4; border: 1px solid #3366bb; margin-bottom: 1em; padding: 1em; width: 100%;"> - <caption>更多细节</caption> - <tbody> - <tr> - <td>要了解 JavaScript的更多细节，可以到这个wiki <a href="/en/JavaScript" title="en/JavaScript">JavaScript</a> 。</td> - </tr> - </tbody> -</table> - -<h3 id="Action:_A_JavaScript_demonstration" name="Action:_A_JavaScript_demonstration">范例： 一个JavaScript的实例</h3> - -<p>新建一个<code>doc5.html的页面，把下面的代码复制粘贴进入，注意要保证保存了所有的代码：</code></p> - -<div style="width: 48em;"> -<pre class="brush: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> -</pre> -</div> - -<p>新建一个CSS文件<code>style5.css</code>，复制粘贴下面的样式代码到文件中：</p> - -<div style="width: 48em;"> -<pre class="brush:css;"> #square { - - width: 20em; - - height: 20em; - - border: 2px inset gray; - - margin-bottom: 1em; - - } - - button { - - padding: .5em 2em; - - }</pre> -</div> - -<p>新建一个JavaScript文件<code>script5.js</code>，复制粘贴下面的代码到文件中：</p> - -<div style="width: 48em;"> -<pre class="brush: 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); -}</pre> -</div> - -<p>用浏览器打开HTML文件并点击按钮。</p> - -<p>这里有在线的示例：<a href="http://jsfiddle.net/diwanshi/Y4VPK/4/embedded/result/">Here is the Live Example</a></p> - -<table> - <tbody> - <tr> - <td style="padding-right: 2em;"> - <table style="border: 2px outset #3366bb; padding: 0 1em .5em .5em;"> - <tbody> - <tr> - <td> - <p><strong>JavaScript demonstration</strong></p> - </td> - </tr> - </tbody> - </table> - </td> - <td> - <table style="border: 2px outset #3366bb; padding: 0 1em .5em .5em;"> - <tbody> - <tr> - <td> - <p><strong>JavaScript demonstration</strong></p> - </td> - </tr> - </tbody> - </table> - </td> - </tr> - </tbody> -</table> - -<div class="note"><strong>重要提示</strong> ： - -<ul> - <li>HTML文档中外链了CSS文件和JavaScript文件。</li> - <li>脚本直接修改了DOM元素的样式，通过修改属性值来改变按钮的样式。</li> - <li>在JavaScript中<code>document.getElementById("square")</code> 在功能上同 CSS 选择器 <code>#square的功能是类似的。</code></li> - <li>在 JavaScript代码中, <code>backgroundColor</code> 对应于CSS 属性<code>background-color</code>。因为JavaScript中不允许在命名中出现中划线，所以采用了驼峰式,的写法来做替代。</li> - <li>浏览器针对button有内置的CSS规则 <code>button{{ mediawiki.external('disabled=\"true\"') }}</code> ，这会导致按钮在不可点击状态下的显示样式跟预期有出入。</li> -</ul> -</div> - -<table style="background-color: #fffff4; border: 1px solid #3366bb; margin-bottom: .5em; padding: 1em;"> - <caption>挑战</caption> - <tbody> - <tr> - <td>修改脚本代码实现如下效果：当颜色改变的时候让方块跳至右侧20em的距离，然后再恢复到原来的位置。</td> - </tr> - </tbody> -</table> - -<p>这里有一个解决方案示例：<a href="/en/CSS/Getting_Started/Challenge_solutions#JavaScript" title="https://developer.mozilla.org/en/CSS/Getting_Started/Challenge_solutions#JavaScript">See a solution to this challenge.</a></p> - -<h3 id="下一步做什么呢？">下一步做什么呢？</h3> - -<p>如果你对本页内容有疑问，或者有其他想法，欢迎到 <a href="/Talk:en/CSS/Getting_Started/JavaScript" title="Talk:en/CSS/Getting_Started/JavaScript">Discussion</a> 页面进行讨论。</p> - -<p>在示例中，尽管只有button元素使用了脚本代码，但是HTML文档还是i需要外链一个脚本文件。Mozilla 对CSS做了扩展，让它可以为选择元素引用JavaScript代码 (也可以使内容或者其他样式表文件) 。下篇文章会对此有详细说明： <strong><a href="/en/CSS/Getting_Started/XBL_bindings" title="en/CSS/Getting_Started/XBL_bindings">XBL bindings</a></strong></p> 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 ---- -<p>{{ CSSTutorialTOC() }}</p> - -<p>{{ previousPage("/zh-CN/docs/CSS/开始/Boxes", "盒模型")}}本文是 <a href="/zh-CN/docs/CSS/开始" title="en/CSS/Getting Started">CSS入门教程</a> 的第12部分; 主要讲述一些修改页面布局的方法。 你可以通过学习来修改自己示例的布局。</p> - -<h2 class="clearLeft" id="说明_布局">说明: 布局</h2> - -<p>你可以通过 CSS 来设置布局的炫酷效果。其中所涉及的部分高阶技术并不是本文范畴。</p> - -<p>当你设计一个简单布局时, 你的样式表与浏览器默认样式表之间的交互、以及与布局引擎的交互都是相当复杂的。 这也是一个高阶话题，并不在本文范畴。</p> - -<p>本文主要介绍一些简单的布局方法。（高阶技术请参阅外部链接 <a href="http://learnlayout.com/">学习高级布局</a>）</p> - -<h3 id="文档结构">文档结构</h3> - -<p>当你想控制文档布局时，就不得不改变它的结构。</p> - -<p>页面标记语言通常都会有公共标签来创建结构。例如, 在 HTML 中你可以使用 {{ HTMLElement("div") }} 元素来创建结构。</p> - -<div class="tuto_example"> -<div class="tuto_type">示例</div> - -<p>在你的示例中, 编号段落并没有自己的容器。</p> - -<p>你的样式表无法为这些段落画出边框，因为没有选择器指向它们。</p> - -<p>为了解决这个问题, 你可以在段落之外添加一个{{ HTMLElement("div") }} 。这个标签是唯一的，可以指定一个id属性来标识:</p> - -<pre class="brush:html;highlight:[2,8]"><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> -</pre> - -<p>现在可以通过样式表在每个列表周围画出边框了:</p> - -<pre class="brush:css">ul, #numbered { - border: 1em solid #69b; - padding-right:1em; -} -</pre> - -<p>运行结果如下:</p> - -<table style="background-color: white; border: 2px outset #36b; padding: 1em; width: 30em;"> - <tbody> - <tr> - <td> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> - - <div style="border: 12px solid #69b; margin-bottom: 16px; padding: 1em;"> - <ul style=""> - <li>Arctic</li> - <li>Atlantic</li> - <li>Pacific</li> - <li>Indian</li> - <li>Southern</li> - </ul> - </div> - - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p> - - <div style="border: 12px solid #69b; margin-bottom: 8px; padding: 0px 12em 0px .5em;"> - <p><strong>1: </strong>Lorem ipsum</p> - - <p><strong>2: </strong>Dolor sit</p> - - <p><strong>3: </strong>Amet consectetuer</p> - - <p><strong>4: </strong>Magna aliquam</p> - - <p><strong>5: </strong>Autem veleum</p> - </div> - </td> - </tr> - </tbody> -</table> -</div> - -<h3 id="大小单位">大小单位</h3> - -<p>到目前为止，你可以通过像素来指定大小。这在有些情况下是非常合适的，比如电脑屏幕显示。 但当用户改变字体大小之后，你的布局可能会发生错位。</p> - -<p>因此，最好通过百分比或 ems (<code>em</code>) 来指定大小。 em 通常是指当前字体大小(字母m的宽度)。当用户改变字体大小时，你的布局会自己修正。</p> - -<div class="tuto_example"> -<div class="tuto_type">示例</div> - -<p>文本左边的border通过像素来指定大小。</p> - -<p>文本右边的border通过 ems来指定大小。</p> - -<p>在你的浏览器中，修改字体大小，会发现右边的border会自己修正大小而左边的不会。:</p> - -<table style="background-color: white; border: 2px outset #36b; padding: 1em;"> - <tbody> - <tr> - <td> - <div style="">RESIZE ME PLEASE</div> - </td> - </tr> - </tbody> -</table> -</div> - -<div class="tuto_details"> -<div class="tuto_type">更多详情</div> - -<p>对于其它设备，其它的长度单位可能更合适。</p> - -<p>在本指南中会有其它篇幅详细介绍这一点。</p> - -<p>更多详情参见CSS说明中 <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#values">Values</a> .</p> -</div> - -<h3 id="文本布局">文本布局</h3> - -<p>有两个属性可以指定元素内容的对齐方式。你可以用它们来进行简单的布局:</p> - -<dl> - <dt>{{ cssxref("text-align") }}</dt> - <dd>内容对齐。 可以使用下面几个值： <code>left</code>, <code>right</code>, <code>center</code>, <code>justify</code>。</dd> - <dt>{{ cssxref("text-indent") }}</dt> - <dd>指定内容缩进。</dd> -</dl> - -<p>这两个属性可以应用于任何文本类内容，不只是纯文本。 需要注意的是，它们会被元素的子元素继承， 所以需要在子元素中将它们关闭，以免出现意想不到的效果。</p> - -<div class="tuto_example"> -<div class="tuto_type">示例</div> - -<p>标题居中:</p> - -<pre class="brush:css">h3 { - border-top: 1px solid gray; - text-align: center; -} -</pre> - -<p>输出结果:</p> - -<table style="background-color: white; border: 2px outset #36b; padding: 1em; width: 30em;"> - <tbody> - <tr> - <td> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray; text-align: center;">(A) The oceans</p> - </td> - </tr> - </tbody> -</table> - -<p>在 HTML 文档中, 标题之后的内容并不属于标题。当你对齐一个标题时，其后的元素不会继承该样式。</p> -</div> - -<h3 id="浮动">浮动</h3> - -<p> {{ cssxref("float") }} 属性强制元素靠左或靠右。 这是控制元素位置和大小的简单方法。</p> - -<p>本文剩下部分都是围绕浮动元素展开。你可以使用 {{ cssxref("clear") }} 属性来避免其它元素受到浮动效果的影响。</p> - -<div class="tuto_example"> -<div class="tuto_type">示例</div> - -<p>在你的示例中，list是根据窗口拉伸。你可以通过使用浮动元素来使它们靠左。</p> - -<p>为了保证标题在正确的位置, 你必须为标题指定clear属性来避免标题靠左:</p> - -<pre class="brush:css">ul, #numbered {float: left;} -h3 {clear: left;} -</pre> -</div> - -<p>运行结果如下:</p> - -<table style="background-color: white; border: 2px outset #36b; padding: 1em; width: 30em;"> - <tbody> - <tr> - <td> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> - - <div style="float: left; border: 12px solid #69b; margin-bottom: 16px; padding-left: 1em;"> - <ul style=""> - <li>Arctic</li> - <li>Atlantic</li> - <li>Pacific</li> - <li>Indian</li> - <li>Southern</li> - </ul> - </div> - - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p> - - <div style="float: left; border: 12px solid #69b; margin-bottom: 8px; padding-left: .5em;"> - <p><strong>1: </strong>Lorem ipsum</p> - - <p><strong>2: </strong>Dolor sit</p> - - <p><strong>3: </strong>Amet consectetuer</p> - - <p><strong>4: </strong>Magna aliquam</p> - - <p><strong>5: </strong>Autem veleum</p> - </div> - </td> - </tr> - </tbody> -</table> - -<p>(box右侧需要增加一些padding ,防止文本与边框太近)</p> - -<h3 id="位置">位置</h3> - -<p>你可以为一个元素指定 {{ cssxref("position") }} 属性为以下值之一，来设置其位置。</p> - -<p>这些是高阶属性。 可以通过简单的方式来使用它们—这也是在基础教程里提到它们的原因。但使用它们来实现复杂的布局会相对困难一些。</p> - -<dl> - <dt><code>relative</code></dt> - <dd>通过为元素指定一个值，元素相对于其原来位置移动。也可以使用margin来达到同样的效果。</dd> - <dt><code>fixed</code></dt> - <dd>为元素指定相对于窗口的确切位置 。即使文档的其它元素出现滚动，元素位置仍然不变。</dd> - <dt><code>absolute</code></dt> - <dd>为元素指定相对于其父元素的确切位置。只有在父元素使用 <code>relative</code>, <code>fixed</code> or <code>absolute</code> 时才有效。你可以为任何父元素指定 <code>position: relative;因为它不会产生移动。</code></dd> - <dt><code>static</code></dt> - <dd>默认值。当明确要关闭位置属性时使用。</dd> -</dl> - -<p>和 <code>position</code> 属性(除了 <code>static</code>)一起使用的, 有下列属性: <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code>, <code>width</code>, <code>height</code> 通过设置它们来指定元素的位置或大小。</p> - -<div class="tuto_example"> -<div class="tuto_type">示例</div> - -<p>为了放置两个元素，一个在另外一个上方, 创建一个父容器来包含两个子元素:</p> - -<pre class="brush:html"><div id="parent-div"> - <p id="forward">/</p> - <p id="back">\</p> -</div> -</pre> - -<p>在你的样式表里，将父容器的position设置为 <code>relative。无需为它设置任何具体变动。</code> 将子元素的position属性设置为 <code>absolute</code>:</p> - -<pre class="brush:css">#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; -} -</pre> - -<p>输出结果如下,反斜杠显示在斜杠上方</p> - -<div style="position: relative; left: .33em; font: bold 300% sans-serif;"> -<p style="position: absolute; margin: 0px; top: 0px; left: 0px; color: blue;">/</p> - -<p style="position: absolute; margin: 0px; top: 0px; left: 0px; color: red;">\</p> -</div> - -<table style="background-color: white; border: 2px outset #36b; height: 5em; padding: 1em; width: 30em;"> - <tbody> - <tr> - <td> </td> - </tr> - </tbody> -</table> -</div> - -<div class="tuto_details"> -<div class="tuto_type">更多详情</div> - -<p>更多详情的postion说明在 CSS Specification 中占用了两个章节: <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html">Visual formatting model</a> 和 <a class="external" href="http://www.w3.org/TR/CSS21/visudet.html">Visual formatting model details</a>.</p> - -<p>如果你的样式表工作在多种浏览器环境下，你会发现不同浏览器对标准协议的解释会有很多不同, 而且特定浏览器的特定版本可能存在BUG。</p> -</div> - -<h2 id="实践_设置布局">实践: 设置布局</h2> - -<ol> - <li>修改示例文档, <code>doc2.html</code>, 和样式表, <code>style2.css</code>, 使用之前的示例 <a href="#Document_structure" title="#Document structure"><strong>文档结构</strong></a> and <a href="#Floats" title="#Floats"><strong>浮动</strong></a>.</li> - <li>在 <a href="#Floats" title="#Floats"><strong>浮动</strong></a> 示例中, 添加padding 来分离文本和右侧border ,值设为0.5 em.</li> -</ol> - -<div class="tuto_example"> -<div class="tuto_type">挑战</div> - -<p>修改示例文档, <code>doc2.html</code>, 在文档末尾添加一个标签, <code>注意在</body>之前。</code></p> - -<pre class="brush:html"><img id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin"> -</pre> - -<p>如果你在之前的教程中没有下载过该图片, 现在下载, 将它与示例文件放在同一目录下:</p> - -<table style="border: 2px solid #ccc;"> - <tbody> - <tr> - <td><img alt="Image:Yellow-pin.png" class="internal" src="/@api/deki/files/490/=Yellow-pin.png"></td> - </tr> - </tbody> -</table> - -<p>预测一下你的图片将会出现在哪里，然后刷新浏览器验证一下。</p> - -<p>在样式表中添加一条规则，将图片显示在文档右上角。</p> - -<p>刷新浏览器并把窗口拉小。 查看图片是否在右上角，拖动容器大小，再次查看。</p> - -<div style="position: relative; width: 29.5em; height: 18em;"> -<div style="overflow: auto; border: 2px outset #36b; padding: 1em; width: 29em; height: 16em; background-color: white;"> -<p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> - -<div style="float: left; border: 12px solid #69b; margin-bottom: 16px; padding: 0px .5em 0px 1em;"> -<ul style=""> - <li>Arctic</li> - <li>Atlantic</li> - <li>Pacific</li> - <li>Indian</li> - <li>Southern</li> -</ul> -</div> - -<p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p> - -<div style="float: left; border: 12px solid #69b; padding: 0 .5em 0 .5em;"> -<p><strong>1: </strong>Lorem ipsum</p> - -<p><strong>2: </strong>Dolor sit</p> - -<p><strong>3: </strong>Amet consectetuer</p> - -<p><strong>4: </strong>Magna aliquam</p> - -<p><strong>5: </strong>Autem veleum</p> -</div> - -<p style=""> </p> - -<div style="position: absolute; top: 2px; right: 0px;"><img alt="Yellow map pin" class="internal" src="/@api/deki/files/490/=Yellow-pin.png"></div> -</div> -</div> -</div> - -<p><a href="/en/CSS/Getting_Started/Challenge_solutions#Layout"> 查看该挑战的解决方案</a>。</p> - -<h2 id="接下来是什么？">接下来是什么？</h2> - -<p>{{ nextPage("/zh-CN/docs/CSS/开始/Tables", "表格") }}你几乎已经学习了这篇CSS基本教程的所有主题。接下来将描述更多CSS规则的高级选择器，以及你可以用来展示<a href="/zh-CN/docs/Web/Guide/CSS/Getting_started/Tables">表格</a>的一些特定方法。</p> 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 ---- -<p>{{ CSSTutorialTOC() }}</p> - -<p>{{ previousPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Content", "内容") }} 这是<a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS入门教程</a> 教程的第10部分; 它将向你描述你如何用CSS来指定列表的外观. 你将创建一个新的包含列表的示例文件，和一个新的定义列表的样式表。</p> - -<h2 class="clearLeft" id="信息_列表">信息: 列表</h2> - -<p>如果你完成了上一节的挑战任务，你就知道如何在列表项前面插入内容。</p> - -<p>CSS为列表提供了专门的属性。如果可以，使用这些属性通常会比较方便。</p> - -<p>使用{{ cssxref("list-style") }} 属性来指定列表项标记的样式。</p> - -<p>你的CSS中的选择器可以选中列表项 (比如, {{ HTMLElement("li") }})。也可以选中列表项的父节点 (比如, {{ HTMLElement ("ul") }})。此时列表项会继承父节点的样式。</p> - -<h3 id="无序列表">无序列表</h3> - -<p>无序列表的每个列表项都用同样的方式标记。</p> - -<p>CSS 有三种标记样式：</p> - -<ul style="padding-left: 2em;"> - <li style="list-style-type: disc;"><code>disc</code></li> - <li style="list-style-type: circle;"><code>circle</code></li> - <li style="list-style-type: square;"><code>square</code></li> -</ul> - -<p>你可以指定一个图片的URL来自定义标记样式。</p> - -<div class="tuto_example"> -<div class="tuto_type">例</div> - -<p>下面的规则为不同类的列表项指定了不同的标记：</p> - -<pre class="brush:css">li.open {list-style: circle;} -li.closed {list-style: disc;} -</pre> - -<p>这些类被用于列表项时，用以区分打开和关闭的列表项 (比如，在一个待办事项列表中)：</p> - -<pre class="brush:css"><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> -</pre> - -<p>结果：</p> - -<table style="background-color: white; border: 2px outset #36b; padding: 1em;"> - <tbody> - <tr> - <td> - <ul style="padding-right: 6em;"> - <li style="list-style-type: circle;">Lorem ipsum</li> - <li style="list-style-type: disc;">Dolor sit</li> - <li style="list-style-type: disc;">Amet consectetuer</li> - <li style="list-style-type: circle;">Magna aliquam</li> - <li style="list-style-type: disc;">Autem veleum</li> - </ul> - </td> - </tr> - </tbody> -</table> -</div> - -<h3 id="有序列表">有序列表</h3> - -<p>在有序列表中，每个列表项都被标记了不同的序号。</p> - -<p>用{{ cssxref("list-style") }} 属性指定标记样式：</p> - -<ul style="padding-left: 2em;"> - <li style=""><code>decimal</code></li> - <li style=""><code>lower-roman</code></li> - <li style=""><code>upper-roman</code></li> - <li style=""><code>lower-latin</code></li> - <li style=""><code>upper-latin</code></li> -</ul> - -<div class="tuto_example"> -<div class="tuto_type">例</div> - -<p>这条规则指定类名包含<span style="font-family: courier new,andale mono,monospace; line-height: normal;">info的</span><span style="line-height: 1.5;">{{ HTMLElement("ol") }} 元素的列表项用大写字母标序</span></p> - -<pre class="brush:css">ol.info {list-style: upper-latin;} -</pre> - -<p>{{ HTMLElement("li") }} 元素继承了ol的样式：</p> - -<table style="background-color: white; border: 2px outset #36b; padding: 1em;"> - <tbody> - <tr> - <td> - <ul> - <li style="padding-right: 6em; list-style-type: upper-latin;">Lorem ipsum</li> - <li style="padding-right: 6em; list-style-type: upper-latin;">Dolor sit</li> - <li style="padding-right: 6em; list-style-type: upper-latin;">Amet consectetuer</li> - <li style="padding-right: 6em; list-style-type: upper-latin;">Magna aliquam</li> - <li style="padding-right: 6em; list-style-type: upper-latin;">Autem veleum</li> - </ul> - </td> - </tr> - </tbody> -</table> -</div> - -<div class="tuto_details"> -<div class="tuto_type">更多细节</div> - -<p>{{ cssxref("list-style") }} 属性是一个快捷写法。在复杂的样式表中你可能更希望用单独的属性设置不同的属性值。欲查看这些单独的属性和更详细的CSS指定列表的方法，见 {{ cssxref("list-style") }}参考页。</p> - -<p>如果你使用如HTML这类提供了方便的无序列表<span style="line-height: 1.5;"> ({{ HTMLElement("ul") }}) 和有序列表</span><span style="line-height: 1.5;">({{ HTMLElement("ol") }})</span><span style="line-height: 1.5;">的标记语言，就尽量使用这些标签。当然，你完全可以将 {{ HTMLElement("ul") }} 显示成有序列表，将 {{ HTMLElement("ol") }} 显示成无序列表。</span></p> - -<p>浏览器实现列表样式略有不同。不要奢望样式表可以让列表在所有浏览器中显示的完全一样。</p> -</div> - -<h3 id="计数器">计数器</h3> - -<div style="border: 1px solid red; padding: 6px; margin: 0 0 .5em -6px; width: 100%;"> -<p><strong>注意: </strong> 一些浏览器不支持计数器。<a class="external" href="http://www.quirksmode.org/" style="line-height: 1.5;" title="http://www.quirksmode.org/">Quirks Mode site</a><span style="line-height: 1.5;"> 的</span><a class="external" href="http://www.quirksmode.org/css/contents.html" style="line-height: 1.5;" title="http://www.quirksmode.org/css/contents.html">CSS contents and browser compatibility</a><span style="line-height: 1.5;"> 页有更多这方面的兼容表格可以参考。</span><span style="line-height: 1.5;"> </span><a href="/en-US/docs/Web/Guide/CSS_Reference" style="line-height: 1.5;" title="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS_Reference">CSS Reference</a><span style="line-height: 1.5;"> 也有浏览器兼容性表格。</span></p> -</div> - -<p>你可以用计数器来计数任何元素，不仅是列表元素。比如，在某些文档中你可能想计数标题和段落。</p> - -<p>要想计数，你必须定义一个计数器。</p> - -<p>在计数开始前的某个元素上，设置 {{ cssxref("counter-reset") }}属性以重置计数器。被计数元素的父节点是一个不错的选择。当然，任何出现在被计数元素前面的元素都可以。</p> - -<p>设置每个需要计数的元素的{{ cssxref("counter-increment") }} 属性为你的计数器名。</p> - -<p>通过为选择器增加 {{ cssxref(":before") }} 或 {{ cssxref(":after") }} 并设置 <code>content</code> 属性来显示计数器。 (如上一节所示, <strong><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Content" title="en-US/docs/Web/Guide/CSS/Getting_Started/Content">内容</a></strong>).</p> - -<p>在<code>content属性</code>的值中设置 <code>counter()，</code>在括号内填上计数器的名字。可选的是设置计数器类型。其类型和前面一节 <strong>有序列表 </strong>中相同。</p> - -<p>正常情况下，显示计数器的元素也会递增计数器。</p> - -<div class="tuto_example"> -<div class="tuto_type">例</div> - -<p>这条规则会为每个类名中包含<span style="font-family: courier new,andale mono,monospace; line-height: normal;">numbered的</span><span style="line-height: 1.5;">{{ HTMLElement("h3") }} 元素初始化计数器 mynum：</span></p> - -<pre class="brush:css">h3.numbered {counter-reset: mynum;} -</pre> - -<p> </p> - -<p>这条规则为每个类名包含<span style="font-family: courier new,andale mono,monospace; line-height: normal;">numbered的</span><span style="line-height: 1.5;">{{ HTMLELement("p") }}元素</span><span style="line-height: 1.5;">显示并递增</span><span style="line-height: 1.5;">计数器：</span></p> - -<pre class="brush:css">p.numbered:before { - content: counter(mynum) ": "; - counter-increment: mynum; - font-weight: bold;} -</pre> - -<p>结果：</p> - -<table style="background-color: white; border: 2px outset #36b; padding: .5em 6em .5em 1em;"> - <tbody> - <tr> - <td><strong>Heading</strong> - - <p><strong>1: </strong>Lorem ipsum</p> - - <p><strong>2: </strong>Dolor sit</p> - - <p><strong>3: </strong>Amet consectetuer</p> - - <p><strong>4: </strong>Magna aliquam</p> - - <p><strong>5: </strong>Autem veleum</p> - </td> - </tr> - </tbody> -</table> -</div> - -<div class="tuto_details"> -<div class="tuto_type">更多细节</div> - -<p>除非所有看你文档的人的浏览器都支持计数器，否则你不能使用计数器。</p> - -<p>如果你可以使用计数器，那么你可以单独设置计数器的样式。如上面例子所示：计数器是粗体，但列表不是。</p> - -<p>你还可以用更复杂的方式使用计数器。比如，计数章节, 标题, 子标题以及段落。详见CSS规范中的 <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#counters">Automatic counters and numbering</a> 。</p> -</div> - -<h2 id="实例_设计列表样式">实例: 设计列表样式</h2> - -<p><code><font face="Open Sans, sans-serif"><span style="line-height: 21px;">新建</span></font>doc2.html：</code></p> - -<pre class="brush: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> -</pre> - -<p>新建<code>style2.css</code>：</p> - -<pre class="brush:css;">/* numbered paragraphs */ -h3.numbered {counter-reset: mynum;} - -p.numbered:before { - content: counter(mynum) ": "; - counter-increment: mynum; - font-weight: bold; -} -</pre> - -<p>如果布局和注释不符合你的口味，随便改。</p> - -<p>在浏览器中打开。如果你的浏览器支持计数器，你将看到下面的样子。如果不支持，你将看不到数字序号。 (甚至冒号都看不到)：</p> - -<table style="background-color: white; border: 2px outset #36b; padding: 0 6em 1em 1em;"> - <tbody> - <tr> - <td> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">The oceans</p> - - <ul style=""> - <li>Arctic</li> - <li>Atlantic</li> - <li>Pacific</li> - <li>Indian</li> - <li>Southern</li> - </ul> - - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">Numbered paragraphs</p> - - <p><strong>1: </strong>Lorem ipsum</p> - - <p><strong>2: </strong>Dolor sit</p> - - <p><strong>3: </strong>Amet consectetuer</p> - - <p><strong>4: </strong>Magna aliquam</p> - - <p><strong>5: </strong>Autem veleum</p> - </td> - </tr> - </tbody> -</table> - -<div class="tuto_example"> -<div class="tuto_type">挑战</div> - -<p>增加一条规则，用罗马数字i到v计数大洋的名字</p> - -<table style="background-color: white; border: 2px outset #36b; padding: 0 6em 1em 1em;"> - <tbody> - <tr> - <td> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">The oceans</p> - - <ul style=""> - <li>Arctic</li> - <li>Atlantic</li> - <li>Pacific</li> - <li>Indian</li> - <li>Southern</li> - </ul> - </td> - </tr> - </tbody> -</table> - -<p> </p> - -<p>修改样式，将标题用大写字母加括号的方式标序：</p> - -<table style="background-color: white; border: 2px outset #36b; padding: 0 6em 1em 1em;"> - <tbody> - <tr> - <td> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">(A) The oceans</p> - - <p><strong>. . .</strong></p> - - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">(B) Numbered paragraphs</p> - - <p><strong>. . .</strong></p> - </td> - </tr> - </tbody> -</table> -</div> - -<p><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Lists" title="en-US/docs/Web/Guide/CSS/Getting started/Challenge solutions#Lists">答案</a></p> - -<h2 id="接下来">接下来?</h2> - -<p>{{ nextPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Boxes", "盒模型") }}浏览器显示你的样例文档，在将元素放置在页面上时，会在元素周围创建空间。下一章节将向你描述如何使用CSS来和元素下的形状一起工作，元素下的形状我们称为<a href="/zh-CN/docs/CSS/%E5%BC%80%E5%A7%8B/Boxes">盒子</a>（<a href="/zh-CN/docs/CSS/%E5%BC%80%E5%A7%8B/Boxes" title="en-US/docs/Web/Guide/CSS/Getting_Started/Boxes">boxes</a>）。</p> - -<p> </p> 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 ---- -<p>{{CSSTutorialTOC}} {{previousPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Tables", "表格")}}</p> - -<p>本章节是 <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS入门教程</a> <span style="line-height: 1.5;">指南的第14章也是最后一部分。 这本指南主要描述了用来展示文档的CSS的属性及其值，本章节依旧着眼于这个目标，同时也会介绍CSS样式表的结构。</span></p> - -<h2 class="clearLeft" id="信息_Media">信息: Media</h2> - -<p>CSS的作用是将网页文档以更友好的展现方式呈现给用户。</p> - -<p><span style="line-height: 1.5;">例如，假设你现在正用一台显示设备来阅读这篇文章，同时你也想把它投影到屏幕上，或者打印出来，而显示设备、屏幕投影和打印等这些媒介都有自己的特点，CSS就是为文档提供在不同媒介上展示的适配方法。</span></p> - -<p>CSS通过使用{{CSSXref("@media")}} 的格式来对特定的媒介指定适配规则。</p> - -<div class="tuto_example"> -<div class="tuto_type">示例</div> - -<p>我们的站点上有一个导航区域允许用户浏览。</p> - -<p>在标签语言中，导航区域父元素的id是 <code>nav-area.</code>(在 {{HTMLVersionInline(5)}}中, 可以使用 {{HTMLElement("nav")}} 元素代替带有id属性的 {{HTMLElement("div")}}。)</p> - -<p>为了网页在被打印的时候去掉无用的信息，我们在样式表中加一条适配规则，使导航区域在打印时是被隐藏起来的:</p> - -<pre class="brush:css">@media print { - #nav-area {display: none;} - } -</pre> -</div> - -<p><span style="line-height: 1.5;">一些常见的媒介类型</span><span style="line-height: 1.5;">:</span></p> - -<table class="standard-table"> - <tbody> - <tr> - <td><code>screen</code></td> - <td>彩色计算机显示</td> - </tr> - <tr> - <td><code>print</code></td> - <td>打印（分页式媒体）</td> - </tr> - <tr> - <td style="padding-right: 1em;"><code>projection</code></td> - <td>投影</td> - </tr> - <tr> - <td><code>all</code></td> - <td>所有媒体 (默认)</td> - </tr> - </tbody> -</table> - -<div class="tuto_details"> -<div class="tuto_type">更多</div> - -<p>一些其他指定媒介类型的规则。</p> - -<p><span style="line-height: 1.5;">类型可以在样式表通过link方式加到文档时被指定，这是文档的标签语言允许的 。例如，在HTML中，你可以通过在</span><span style="line-height: 1.5;"> </span><code style="font-style: normal; line-height: 1.5;">LINK</code><span style="line-height: 1.5;"> </span><span style="line-height: 1.5;">标签上添加media属性来指定媒介类型。</span></p> - -<p>在CSS中，你可以在样式表开头使用 {{CSSXref("@import")}} 一个url来引入另外的样式表，同时指定其媒介类型。</p> - -<p><span style="line-height: 1.5;">根据这些知识，你可以区分在不同的文件中定义不同媒介的样式规则。有时这也是结构化样式表的好方法。</span></p> - -<p><span style="line-height: 1.5;">想获取媒介类型更多细节，请参考CSS规范中的</span> <a href="http://www.w3.org/TR/CSS21/media.html">Media</a> <span style="line-height: 1.5;">部分。</span></p> - -<p>接下来将介绍更多 {{cssxref("display")}} <span style="line-height: 1.5;">属性的例子</span><span style="line-height: 1.5;">: </span><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/XML_data" style="line-height: 1.5;" title="en-US/docs/Web/Guide/CSS/Getting_Started/XML_data">XML data</a><span style="line-height: 1.5;">.</span></p> -</div> - -<h3 id="打印">打印</h3> - -<p>CSS有一些特性能够支持打印和分页媒体。</p> - -<p> {{cssxref("@page")}} 规则能够设置页间距，对于双面打印，还可以分开设置 <code>@page:left</code> 和 <code>@page:right。</code></p> - -<p>对于打印媒介，可以使用适当的长度单位，像是英寸(in)、点（1pt = 1/72 inch）、厘米（cm）还有毫米（mm）。这等同于使用em来配合字体大小和百分比。</p> - -<p>可以通过使用 {{cssxref("page-break-before")}}, {{cssxref("page-break-after")}} 和 {{cssxref("page-break-inside")}} 属性来控制文档内容的分页边界。</p> - -<div class="tuto_example"> -<div class="tuto_type">示例</div> - -<p>这个规则把四个方向的页边距都设置为1 inch:</p> - -<pre class="brush:css">@page {margin: 1in;} </pre> - -<p><span style="line-height: 1.5;">这个规则确保每个H1元素都从新的一页开始</span>:</p> - -<pre class="brush:css">h1 {page-break-before: always;} -</pre> -</div> - -<div class="tuto_details"> -<div class="tuto_type">更多细节</div> - -<p>想获取更多细节，请参考CSS规范中的 <a href="http://www.w3.org/TR/CSS21/page.html">Paged media</a> 部分。</p> - -<p><span style="line-height: 1.5;">像CSS的其他特性一样，打印也依赖于你的浏览器及其设置。例如，在打印的时候Mozilla浏览器支持默认的间距，页眉和页脚。而当其他用户打印你的文档时，你无法预知他会使用的什么样的浏览器和设置，因此你也不能完全控制打印情况。</span></p> -</div> - -<h3 id="用户界面">用户界面</h3> - -<p><span style="line-height: 1.5;">CSS有一些特殊的属性能够支持设备的用户界面，像电脑显示器。这使得文档的展示随着用户界面的情况而动态地变化。</span></p> - -<p>并没有针对用户界面设备的特殊媒介类型。</p> - -<p>下面有五种特殊的选择器:</p> - -<table class="standard-table"> - <tbody> - <tr> - <td><strong>Selector</strong></td> - <td><strong>Selects</strong></td> - </tr> - <tr> - <td><code>E{{cssxref(":hover")}}</code></td> - <td>当鼠标悬浮任何E元素上</td> - </tr> - <tr> - <td><code>E{{cssxref(":focus")}}</code></td> - <td>当元素获得键盘焦点</td> - </tr> - <tr> - <td><code>E{{cssxref(":active")}}</code></td> - <td>当元素是当前的活动元素</td> - </tr> - <tr> - <td><code>E{{cssxref(":link")}}</code></td> - <td>当元素超链接到一个url但是用户还没有访问过</td> - </tr> - <tr> - <td><code>E{{cssxref(":visited")}}</code></td> - <td>当元素超链接到一个url但是用户已经访问过</td> - </tr> - </tbody> -</table> - -<div class="note"> -<p><strong>注意: </strong>在 {{gecko("2.0")}} <em>中可获得的 :visited 选择器信息是有限的。更过细节请参照</em><span style="line-height: 1.5;"> </span><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Privacy_and_the_:visited_selector" style="line-height: 1.5;" title="en-US/docs/Web/Guide/CSS/Privacy and the :visited selector">Privacy and the :visited selector</a><span style="line-height: 1.5;"> 。</span></p> -</div> - -<p> {{cssxref("cursor")}} 属性指定鼠标的形状：一些常见的形状如下表所示。把你的鼠标放在列表的选项上来看浏览器中实际显示的鼠标形状:</p> - -<table class="standard-table"> - <tbody> - <tr> - <td><strong>Selector</strong></td> - <td><strong>Selects</strong></td> - </tr> - <tr style="cursor: pointer;"> - <td><code>pointer</code></td> - <td>指示超链接</td> - </tr> - <tr style="cursor: wait;"> - <td><code>wait</code></td> - <td>表明程序无法接受输入</td> - </tr> - <tr style="cursor: progress;"> - <td><code>progress</code></td> - <td>表明程序正在运行，但是仍可以接受输入</td> - </tr> - <tr style="cursor: default;"> - <td><code>default</code></td> - <td>默认（通常是箭头）</td> - </tr> - </tbody> -</table> - -<p> {{cssxref("outline")}} 属性通过创建轮廓来表明获得键盘焦点。只有在父元素使用 relative, fixed or absolute 时才有效。你可以为任何父元素指定 position: relative;因为它不会产生移动。<br> - 它的作用相当于 {{cssxref("border")}} 属性，但与其不同的是它不能指明个别方向。</p> - -<p>一些其他的用户界面特性通常会通过属性来应用。例如，禁用或者只读的元素可以设置 <strong>disabled</strong> 属性和 <strong>readonly</strong> 属性。选择器可以通过方括: <code>{{mediawiki.external('disabled')}}</code> 或者 <code>{{mediawiki.external('readonly')}}来指定这些属性。</code></p> - -<div class="tuto_example"> -<div class="tuto_type">示例</div> - -<p><span style="line-height: 1.5;">这些规则规定了按钮在用户使用时动态变化的样式</span>:</p> - -<pre class="brush:css">.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; - } </pre> - -<p><span style="line-height: 1.5;">这个wiki不支持页面上的用户界面，所以这些按钮不能点击。下面用一些静态图片来举例说明</span>:</p> - -<table style="background-color: #fff; border: 2px outset #36b; padding: 1em;"> - <tbody> - <tr> - <td> - <table> - <tbody> - <tr> - <td><span style="background-color: #cdc; border: 2px outset #cec; color: #777; cursor: default; height: 2em; margin-right: 1em; padding: .5em 1em; width: 8em;">Click Me</span></td> - <td><span style="background-color: #cec; border: 2px outset #cec; cursor: move; height: 2em; margin-right: 1em; padding: .5em 1em; width: 8em;">Click Me</span></td> - <td><span style="background-color: #cec; border: 2px inset #cec; cursor: move; height: 2em; margin-right: 1em; padding: .5em 1em; width: 8em;">Click Me</span></td> - </tr> - <tr style="line-height: 25%;"> - <td> </td> - </tr> - <tr style="font-style: italic;"> - <td>disabled</td> - <td>normal</td> - <td>active</td> - </tr> - </tbody> - </table> - </td> - </tr> - </tbody> -</table> - -<p>当一个功能性按钮初始化的时候，它的周围会围绕着一条黑色的轮廓。当它获取键盘焦点时，从表面上看有一条虚线轮廓。同时当鼠标悬浮在它上面时也有一些悬浮效果。</p> -</div> - -<div class="tuto_details"> -<div class="tuto_type">更多</div> - -<p>获取更多关于CSS用户界面的信息，请参考CSS规范中的 <a href="http://www.w3.org/TR/CSS21/ui.html">User interface</a> 部分。</p> - -<p><span style="line-height: 1.5;">本文的第二部分列举了Mozilla的用户界面标签语言的例子，XUL。</span></p> -</div> - -<h2 id="实践_打印文档">实践: 打印文档</h2> - -<ol> - <li>创建一个新的HTML文档, <code>doc4.html</code>. 把下面的HTML代码粘贴过去: - - <pre class="brush: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> -</pre> - </li> - <li>创建一个新的样式表, <code>style4.css</code>. 把下面的HTML代码粘贴过去: - <pre class="brush:css">/*** 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 */ -</pre> - </li> - <li>在浏览器中查看文档，你会看到它使用的是默认样式。</li> - <li>打印（或者打印预览）文档；样式表的适配规则开始起作用，同时会显示每个页面的页眉和页脚，如果浏览器支持记数器，页码也会被显示出来。 - <table> - <tbody> - <tr> - <td> - <table style="border: 2px outset #36b; padding: 1em;"> - <tbody> - <tr> - <td> - <table style="margin-right: 2em; width: 15em;"> - <tbody> - <tr> - <td> - <div style="font-size: 110%; text-align: center; margin-bottom: .5em;">Heading for paged media</div> - - <div style="font-size: 150%; font-weight: bold;">Section A</div> - - <div style="font-size: 75%;">This is the first section...</div> - - <div style="font-size: 150%; text-align: right; margin-top: 12em;">Page: 1</div> - </td> - </tr> - </tbody> - </table> - </td> - </tr> - </tbody> - </table> - </td> - <td> - <table style="border: 2px outset #36b; padding: 1em;"> - <tbody> - <tr> - <td> - <table style="margin-right: 2em; width: 15em;"> - <tbody> - <tr> - <td> - <div style="font-size: 110%; text-align: center; margin-bottom: .5em;">Heading for paged media</div> - - <div style="font-size: 150%; font-weight: bold;">Section B</div> - - <div style="font-size: 75%;">This is the second section...</div> - - <div style="font-size: 150%; text-align: right; margin-top: 12em;">Page: 2</div> - </td> - </tr> - </tbody> - </table> - </td> - </tr> - </tbody> - </table> - </td> - </tr> - </tbody> - </table> - </li> -</ol> - -<table style="background-color: #fffff4; border: 1px solid #36b; padding: 1em; width: 100%;"> - <caption>挑战</caption> - <tbody> - <tr> - <td><span style="line-height: 1.5;">把指定打印样式的规则转移到单独的CSS文件。</span> - <p>学习 {{CSSXref("@import")}} 了解如何将新的指定打印 CSS 文件引用到 <code style="font-style: normal;">style4.css</code> 样式表里去。</p> - - <p>当鼠标放在标题时，改变颜色为蓝色。</p> - </td> - </tr> - </tbody> -</table> - -<p><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Media" title="en-US/docs/Web/Guide/CSS/Getting_started/Challenge_solutions#Media">查看这些挑战的解决方案。</a></p> - -<h2 id="接下来">接下来?</h2> - -<p>如果你还是很难理解这个章节，或者你对它有一些意见或者建议，请在 <a href="/Talk:en-US/docs/Web/Guide/CSS/Getting_Started/Media" title="Talk:en-US/docs/Web/Guide/CSS/Getting_Started/Media">讨论区</a> 中不吝赐教。</p> - -<p>目前，本文所有的样式规则都可以在文件里面规定。这些规则及其值均是固定的。下面的篇章将会描述该如何使用程序语言 <strong><a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started/JavaScript" title="en-US/docs/Web/Guide/CSS/Getting_Started/JavaScript">JavaScript</a> 来动态地改变规则。</strong></p> 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 ---- -<p>{{ CSSTutorialTOC() }}</p> - -<p>{{ previousPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Selectors", "选择器")}}这是<a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started">CSS入门教程</a>系列教程的第6部分；<span class="seoSummary"> 本节讨论了CSS语言自身的样式及语法。你可以更改CSS示例文件的代码外观，来使其更具可读性。</span></p> - -<h2 class="clearLeft" id="资料：创建可读性良好的_CSS">资料：创建可读性良好的 CSS</h2> - -<p>你可以通过添加空白字符和注释来提高样式表的可读性。你也可以把不同的选择器放到一组中来，这样同一样式可以应用到这一组中。</p> - -<h3 id="空白字符">空白字符</h3> - -<p>空白字符是指空格、tab字符和换行。你可以通过添加这些空白字符来提高样式表的可读性。</p> - -<p>对页面而言，空白字符也是页面的一个组成部分，它的效果就是创造了边距、分割，还有行和列间的空白。</p> - -<p>如果你的样式表中一行只有一条规则，那这是使用空白字符最少的情况。但是，对于复杂的样式表而言，这可能不便于阅读，而且维护起来也比较困难。</p> - -<p>样式表的书写风格可以根据你自己的喜好来选择。但是，如果你开发的项目需要分享给他人，那就很有必要来制定一些书写规范。</p> - -<div class="tuto_example"> -<div class="tuto_type">示例</div> - -<p>有人喜欢我们这里使用的紧凑的书写风格，但是如果规则较长的时候就需要来进行分割：</p> - -<pre class="brush: css">.carrot {color: orange; text-decoration: underline; font-style: italic;} -</pre> - -<p>也有人喜欢下面这种每行只写一个属性-值的风格：</p> - -<pre class="brush: css">.carrot -{ -color: orange; -text-decoration: underline; -font-style: italic; -} -</pre> - -<p>还有人喜欢缩进（两个空格、四个空格，或者tab键是最常用的方式）：</p> - -<pre class="brush: css">.carrot { - color: orange; - text-decoration: underline; - font-style: italic; -} -</pre> - -<p>还有人喜欢这种垂直对齐的方式（这种方式比较难维护）：</p> - -<pre class="brush: css">.carrot - { - color : orange; - text-decoration : underline; - font-style : italic; - } -</pre> - -<p>有些人混合使用空白字符来提高可读性：</p> - -<pre class="brush: css">.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 } -</pre> -</div> - -<p>而且，在使用的空白字符的时候，有人喜欢用tab键，有人喜欢使用空格。</p> - -<h3 id="注释">注释</h3> - -<p>CSS注释以<code>/*</code> 开始，以 <code>*/</code>结束。</p> - -<p>你可以在样式表中写些实际意义的注释，也可以是为了测试的目的而写的临时性的注释内容。</p> - -<p>对于样式表中的注释内容一定要写在注释标签内，这样浏览器在解析的时候会忽略注释。一定要注意注释的起始标签。样式表的其他部分始终要符合语法规则。</p> - -<div class="tuto_example"> -<div class="tuto_type">示例</div> - -<pre class="brush: css">/* style for initial letter C in first paragraph */ -.carrot { - color: orange; - text-decoration: underline; - font-style: italic; - } -</pre> -</div> - -<h3 id="选取器组">选取器组</h3> - -<p>当很多元素具有相同的样式时，你就需要定义一个选择器组，组内用逗号分隔。这样声明的样式就会应用到组内所有的选择器上。</p> - -<p>在样式表的其他地方，你也可以单独对这些选择器重新设置样式，这些样式会应用到相应的选择器上。</p> - -<div class="tuto_example"> -<div class="tuto_type">示例</div> - -<p>这条规则将 {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, 和 {{ HTMLElement("h3") }} 匹配到的元素设置为相同颜色。</p> - -<p>将定义颜色的规则写在一个地方是正确的，因为有些时候，这个颜色值可能需要统一修改。</p> - -<pre class="brush: css">/* color for headings */ -h1, h2, h3 {color: navy;} -</pre> -</div> - -<h2 id="实践：添加注释来提高展现力">实践：添加注释来提高展现力</h2> - -<ol> - <li>编辑你的样式表，将下面的几条规则添加进去（规则顺序可以任意设置）： - <pre class="brush: css">strong {color: red;} -.carrot {color: orange;} -.spinach {color: green;} -#first {font-style: italic;} -p {color: blue;} -</pre> - </li> - <li>为了让代码变得可读性更高，你需要通过分析其中的联系来对代码重新排序，并选择你认为最合适的方式来添加一些空白字符和注释。</li> - <li>保存文件并刷新浏览器页面，要确保你更改后代码不影响原来的显示效果： - <table style="border: 2px outset #3366bb; padding: 1em;"> - <tbody> - <tr> - <td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> - </tr> - <tr> - <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> - </tr> - </tbody> - </table> - </li> -</ol> - -<div class="tuto_details"> -<div class="tuto_type">挑战</div> - -<p>将你的样式表中的部分内容改为注释，以使文档的第一个字母颜色变为红色，但是注意不要改变其他任何内容：</p> - -<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;"> - <tbody> - <tr> - <td style="font-style: italic; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> - </tr> - <tr> - <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> - </tr> - </tbody> -</table> - -<p>（这个不止一种解决方案。）</p> - -<div class="tuto_details" id="tutochallenge"> -<div class="tuto_type">一种解决方法：</div> -其中一种解决办法就是给<code>.carrot</code>添加注释： - -<pre class="brush: css">.carrot { - color: orange; -} -</pre> -A more specific selector, <code>p#second</code> also works. <a class="hideAnswer" href="#challenge">Hide solution</a></div> -<a href="#tutochallenge" title="Display a possible solution for the challenge">查看解决方案</a></div> - -<h2 id="接下来是什么">接下来是什么?</h2> - -<p>{{ nextPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Text_styles", "文本样式") }} 本节中，你的示例样式使用了 italic 文本以及 underlined 文本。 下一节将描述更多的方式来 <a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started/Text_styles">详细指定文本的外观</a> 。</p> 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 ---- -<p>{{ CSSTutorialTOC() }}</p> - -<p>{{ previousPage("/zh-CN/docs/CSS/开始/Cascading_and_inheritance", "层叠和继承")}}这是<span class="seoSummary"> <a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS入门教程</a> 的第五节; 本节将讲述如何应用样式；不同的选择器有不同的优先级；你在样例文档中为标签增加一些属性，在样式中使用这些属性。</span></p> - -<h2 class="clearLeft" id="资料_选择器（Selectors）">资料: 选择器（Selectors）</h2> - -<p>CSS有一套用于描述其语言的术语。在前面的教程中，你应该已经写过这个样式：</p> - -<pre class="brush: css">strong { - color: red; -} -</pre> - -<p><span style="line-height: 1.5;">在CSS的术语中，上面这段代码被称为一条规则（rule）。这条规则以选择器strong开始，它选择要在DOM中哪些元素上使用这条规则。</span></p> - -<div class="tuto_details"> -<div class="tuto_type">更多细节</div> - -<p>花括号中的部分称为<strong>声明（declaration）</strong></p> - -<p><code>关键字color是一个属性</code>, <code>red</code> 是其对应的值.</p> - -<p>同一个声明中的 属性和值组成一个名值对（property-value pairs），名值对用分号分隔.</p> - -<p><code>这个教程中将类似strong的选择器称为标签选择器（tag selector）</code>.CSS规范中称之为类型选择器（<em>type</em> selector）.</p> -</div> - -<p>本节将介绍更多的选择器。</p> - -<p>除了标签名称，你还可以在选择器中使用属性值。这样你就可以更具体的描述你的规则.</p> - -<p>其中 <a href="/en-US/docs/Web/HTML/Global_attributes#attr-class" title="en-US/docs/Web/HTML/Global_attributes#attr-class"><code>class</code></a> 和 <code><a href="/en-US/docs/Web/HTML/Global_attributes#id" title="en-US/docs/Web/HTML/Global_attributes#id">id</a> 两个属性具有比较重要的地位。</code></p> - -<h3 id="类选择器（Class_selectors）">类选择器（Class selectors）</h3> - -<p>通过设置元素的 <a href="/en-US/docs/Web/HTML/Global_attributes#attr-class" title="en-US/docs/Web/HTML/Global_attributes#attr-class"><code>class</code></a> 属性，可以为元素指定类名。类名由开发者自己指定。 文档中的多个元素可以拥有同一个类名。</p> - -<p>在写样式表时，类选择器是以英文句号（.）开头的。</p> - -<h3 id="ID选择器（ID_selectors）">ID选择器（ID selectors）</h3> - -<p>通过设置元素的 <a href="/en-US/docs/Web/HTML/Global_attributes#id" title="en-US/docs/Web/HTML/Global_attributes#id"><code>id</code></a> 属性为该元素制定ID。ID名由开发者指定。每个ID在文档中必须是唯一的。</p> - -<p>在写样式表时，ID选择器是以#开头的。</p> - -<div class="tuto_example"> -<div class="tuto_type">例：</div> -下面的p标签同时具有 <code>class</code> 属性和<code>id</code> 属性: - -<pre class="brush: html"><p class="key" id="principal"> -</pre> - -<p><strong>id</strong> 属性值 <code>principal</code>必须在文档中是唯一的；但文档中的其他标签可以有和p相同的 <strong>class </strong>属性值 <code>key</code>.</p> - -<p>在一个CSS样式表中, 下面的规则将使所有class属性等于key的元素文字颜色呈现绿色。（这些元素不一定都是 {{ HTMLElement("p") }} 元素。）</p> - -<pre class="brush: css">.key { - color: green; -} -</pre> - -<p>下面的规则将使 <strong>id</strong> 等于 <code>principal 的那个元素的文字变为粗体</code>:</p> - -<pre class="brush: css">#principal { - font-weight: bolder; -} -</pre> -</div> - -<p>如果多于一个规则指定了相同的属性值都应用到一个元素上，CSS规定拥有更高确定度的选择器优先级更高。ID选择器比类选择器更具确定度, 而类选择器比标签选择器（tag selector）更具确定度。</p> - -<div class="tuto_details"> -<div class="tuto_type">更多细节</div> - -<p>你也可以将多个选择器组合起来构成更确定的选择器。</p> - -<p>比如，选择器<code>.key</code> 选中所有class属性为 <code>key的元素</code>. 选择器 <code>p.key</code> 选中所有class属性为<span style="font-family: courier new,andale mono,monospace; line-height: normal;">key的</span>{{ HTMLElement("p") }} 元素。</p> - -<p>除了<code>class</code> 和 <code>id，你还可以用方括号的形式指定其他属性。比如</code>，选择器 <code>[type='button']</code> 选中所有 <code>type</code> 属性为 <code>button 的元素。</code></p> -</div> - -<p>如果样式中包含冲突的规则，且它们具有相同的确定度。那么，后出现的规则优先级高。</p> - -<p>如果你遇到规则冲突，你可以增加其中一条的确定度或将之移到后面以使它具有更高优先级。</p> - -<h3 id="伪类选择器（Pseudo-classes_selectors）">伪类选择器（Pseudo-classes selectors）</h3> - -<p>CSS伪类（<a href="/en-US/docs/Web/Guide/CSS/Pseudo-classes" title="en-US/docs/Web/Guide/CSS/Pseudo-classes">pseudo-class</a>）是加在选择器后面的用来指定元素状态的关键字。比如，{{ Cssxref(":hover") }} 会在鼠标悬停在选中元素上时应用相应的样式。</p> - -<p>伪类和伪元素（pseudo-elements）不仅可以让你为符合某种文档树结构的元素指定样式，还可以为符合某些外部条件的元素指定样式：浏览历史(比如是否访问过 ({{ cssxref(":visited") }})， 内容状态(如 {{ cssxref(":checked") }} ), 鼠标位置 (如{{ cssxref(":hover") }}). 完整列表参见 <a class="external" href="http://www.w3.org/TR/selectors/#selectors" rel="external nofollow" title="CSS3 Selectors working spec">CSS3 Selectors working spec</a>.</p> - -<div class="tuto_example"> -<div class="tuto_type">语法</div> - -<pre class="brush:css">selector:pseudo-class { - property: value; -} -</pre> -</div> - -<h4 id="伪类列表">伪类列表</h4> - -<ul> - <li>{{ Cssxref(":link") }}</li> - <li>{{ Cssxref(":visited") }}</li> - <li>{{ Cssxref(":active") }}</li> - <li>{{ Cssxref(":hover") }}</li> - <li>{{ Cssxref(":focus") }}</li> - <li>{{ Cssxref(":first-child") }}</li> - <li>{{ Cssxref(":nth-child") }}</li> - <li>{{ Cssxref(":nth-last-child") }}</li> - <li>{{ Cssxref(":nth-of-type") }}</li> - <li>{{ Cssxref(":first-of-type") }}</li> - <li>{{ Cssxref(":last-of-type") }}</li> - <li>{{ Cssxref(":empty") }}</li> - <li>{{ Cssxref(":target") }}</li> - <li>{{ Cssxref(":checked") }}</li> - <li>{{ Cssxref(":enabled") }}</li> - <li>{{ Cssxref(":disabled") }}</li> -</ul> - -<h2 id="资料_基于关系的选择器">资料: 基于关系的选择器</h2> - -<p>CSS还有多种基于元素关系的选择器。通过它们你可以更精确的选择元素。</p> - -<table id="relselectors"> - <caption>常见的基于关系的选择器</caption> - <tbody> - <tr> - <td style="width: 10em;"><strong>选择器</strong></td> - <td><strong>选择的元素</strong></td> - </tr> - <tr> - <td><code>A E</code></td> - <td>元素A的任一后代元素E (后代节点指A的子节点，子节点的子节点，以此类推)</td> - </tr> - <tr> - <td><code>A > E</code></td> - <td>元素A的任一子元素E(也就是直系后代)</td> - </tr> - <tr> - <td><code>E:first-child</code></td> - <td>任一是其父母结点的第一个子节点的元素E</td> - </tr> - <tr> - <td><code>B + E</code></td> - <td>元素B的任一下一个兄弟元素E</td> - </tr> - <tr> - <td><code>B ~ E</code></td> - <td>B元素后面的拥有共同父元素的兄弟元素E</td> - </tr> - </tbody> -</table> - -<p>你可以任意组合以表达更复杂的关系。</p> - -<p>你还可以使用星号（*）来表示”任意元素“。</p> - -<div class="tuto_example"> -<div class="tuto_type">例</div> - -<p>一个HTML表格有<code style="font-size: 14px;">id</code> 属性，但是它的行和单元格没有单独的id:</p> - -<pre class="brush: html"><table id="data-table-1"> -... -<tr> -<td>Prefix</td> -<td>0001</td> -<td>default</td> -</tr> -... -</pre> - -<p>下面的规则使表格每行的第一个单元格字体为粗体，使第二个单元格使用等宽字体。这条规则只影响id为data-table-1的表格:</p> - -<pre class="brush:css"> #data-table-1 td:first-child {font-weight: bolder;} - #data-table-1 td:first-child + td {font-family: monospace;} -</pre> - -<p>最终效果:</p> - -<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;"> - <tbody> - <tr> - <td> - <table style="margin-right: 2em; width: 18em;"> - <tbody> - <tr> - <td><strong>Prefix</strong></td> - <td><code>0001</code></td> - <td>default</td> - </tr> - </tbody> - </table> - </td> - </tr> - </tbody> -</table> -</div> - -<div class="tuto_details"> -<div class="tuto_type">更多细节</div> - -<p>一般情况下，如果你提高了某个选择器的的确定度，你便<span style="line-height: 1.5;">提高它的优先级。</span></p> - -<p>使用这个技巧，可以避免为大量标签指定 <code>class</code> 或 <code>id</code> 属性。CSS（引擎）会帮你做的。</p> - -<p>在复杂设计中速度非常重要，避免使用复杂的依赖元素关系的规则可以使你的样式更有效率。</p> - -<p>更多关于表格的例子，见 <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Tables" title="en-US/docs/Web/Guide/CSS/Getting_Started/Tables">Tables</a>。</p> -</div> - -<h2 id="实例_使用类选择器和ID选择器">实例: 使用类选择器和ID选择器</h2> - -<ol> - <li>创建一个HTML文件</li> - <li>将下面内容拷贝到HTML文件中 - <pre class="brush: 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> -</pre> - </li> - <li>创建style1.css: - <pre class="brush:css">strong { color: red; } -.carrot { color: orange; } -.spinach { color: green; } -#first { font-style: italic; } -</pre> - </li> - <li>保存文件，在浏览器中查看效果: - <table style="border: 2px outset #3366bb; height: 53px; padding: 1em; width: 494px;"> - <tbody> - <tr> - <td style="font-style: italic;"><em><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets //此处应为斜体</em></td> - </tr> - <tr> - <td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> - </tr> - </tbody> - </table> - - <p>重新组织样式中规则的顺序，你会发现改变这几条规则的顺序不会影响最终效果。</p> - - <p>类选择器 <code>.carrot</code> 和<code>.spinach</code> 比标签选择器 <code>strong 拥有更高优先级。</code></p> - - <p>ID 选择器 <code>#first</code> 比类选择器和标签选择器更优先。</p> - </li> -</ol> - -<div class="tuto_example"> -<div class="tuto_type">挑战</div> - -<ol> - <li>不改变HTML内容, 增加一条规则，不改变首字母颜色，将第二个p标签中的其他文字变成蓝色: - <table style="background-color: white; border: 2px outset #3366bb; padding: 1em;"> - <tbody> - <tr> - <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> - </tr> - <tr> - <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> - </tr> - </tbody> - </table> - </li> - <li>现在改变上面增加的那条规则（不改变其他任何内容）让第一个p标签中的其他文字也变成蓝色: - <table style="background-color: white; border: 2px outset #3366bb; padding: 1em;"> - <tbody> - <tr> - <td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> - </tr> - <tr> - <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> - </tr> - </tbody> - </table> - </li> -</ol> - -<div class="tuto_details" id="tutochallenge"> -<div class="tuto_type">Possible solution</div> - -<ol> - <li>Add a rule with an ID selector of <code>#second</code> and a declaration <code>color: blue;</code>, as shown below: - - <pre class="brush: css">#second { color: blue; } -</pre> - A more specific selector, <code>p#second</code> also works.</li> - <li>Change the selector of the new rule to be a tag selector using <code>p</code>: - <pre class="brush: css">p { color: blue; } -</pre> - </li> -</ol> -<a class="hideAnswer" href="#challenge">Hide solution</a></div> -<a href="#tutochallenge" title="Display a possible solution for the challenge">See a solution for the challenge.</a></div> - -<h2 id="实例_使用伪类选择器">实例: 使用伪类选择器</h2> - -<ol> - <li>创建如下 HTML: - <pre class="brush: 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> -</pre> - </li> - <li>编辑CSS: - <pre class="brush: 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; -} -</pre> - </li> - <li>保存文件用浏览器查看HTML文件 (将鼠标放到链接上查看效果): - <table style="border: 2px outset #3366bb; padding: 1em;"> - <tbody> - <tr> - <td>Go to our <a class="tutospecial" href="#" title="Home page">Home page</a><span style="display: none;"> </span><span style="display: none;"> </span></td> - </tr> - </tbody> - </table> - </li> -</ol> - -<h2 id="实例_使用基于关系的选择器和伪类选择器">实例: 使用基于关系的选择器和伪类选择器</h2> - -<p>通过使用基于关系的选择器和伪类选择器，你可以构造出复杂的叠加算法。这是一个常用的技巧，比如可以用来创建纯CSS无JavaScript的下拉菜单（<strong style="font-size: 14px; line-height: 1.5;">pure-CSS dropdown menus</strong><span style="font-size: 14px; line-height: 1.5;">）。关键点就是创建下面这类规则：</span></p> - -<pre class="brush: css">div.menu-bar ul ul { - display: none; -} - -div.menu-bar li:hover > ul { - display: block; -}</pre> - -<p>然后将这些规则应用到下面的HTML结构中：</p> - -<pre class="brush: 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> -</pre> - -<p>学习实例 <a class="internal" href="https://mdn.mozillademos.org/files/3700/css_dropdown_menu.html" title="css_dropdown_menu.html">CSS-based dropdown menu example</a>.</p> - -<h2 id="接下来是什么">接下来是什么?</h2> - -<p>你的样式表变得多而复杂。下面章节将讲述如何让样式表更 <a href="/zh-CN/docs/Web/Guide/CSS/Getting_started/Readable_CSS" title="/zh-CN/docs/Web/Guide/CSS/Getting_started/Readable_CSS">易读</a>.{{nextPage("/zh-CN/docs/CSS/开始/Readable_CSS", "易读的 CSS")}}</p> 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 ---- -<div> - {{CSSTutorialTOC}}</div> -<p>本节将演示如何将CSS应用到 <a href="/en-US/docs/SVG">SVG</a> 中。</p> -<p>你将创建一个简单的演示代码并在支持SVG的浏览器中运行。</p> -<p>这是 <a href="/en-US/docs/Web/Guide/CSS/Getting_started">CSS 教程</a> 第二部分的第二节<br> - 前一节: <a href="/en-US/docs/Web/JavaScript/Getting_Started">JavaScript</a><br> - 下一节: <a href="/en-US/docs/Web/Guide/CSS/Getting_started/XML_data">XML data</a></p> -<h3 id="Information:_SVG" name="Information:_SVG">信息: SVG</h3> -<p><em>SVG</em> (Scalable Vector Graphics)是一个基于XML的图形描述语言。</p> -<p>它可以用于描述静态图、动画，以及用户界面。</p> -<p>和其他基于XML的语言一样，SVG 支持用 CSS 样式表将图形内容和图形样式分离。</p> -<p>在样式表中你可以在任何可以可以指定图片的地方指定一个SVG的URL。比如，在HTML的样式表中，你可以为 <code>background</code> 属性指定一个SVG的URL。</p> -<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em; width: 100%;"> - <caption> - 更多细节</caption> - <tbody> - <tr> - <td> - <p>在这个教程编写的时间点(2011中旬)，绝大多数现代浏览器都对SVG有基本的支持。其中包括 Internet Explorer 9 及其后续版本。一些SVG特性只被某些浏览器支持。参见 <a href="http://caniuse.com/#search=SVG">SVG tables on caniuse.com</a> 了解支持情况。 参见 <a href="/en-US/docs/SVG/Element">SVG element reference</a> 了解兼容情况。</p> - <p>通过安装 <a href="http://www.adobe.com/svg/viewer/install/main.html">Adobe</a> 提供的插件，你可以让某些浏览器支持SVG。</p> - <p>欲在Mozilla了解更多关于SVG的信息，参考 <a href="/en-US/docs/SVG">这里SVG</a>。</p> - </td> - </tr> - </tbody> -</table> -<h3 id="Action:_An_SVG_demonstration" name="Action:_An_SVG_demonstration">实例: 一个SVG演示</h3> -<p>建立一个SVG文件<code>doc8.svg。</code>复制下面所有内容：</p> -<pre class="brush: xml"><?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> -</pre> -<p>创建一个CSS文件, <code>style8.css。</code> 复制下面所有内容：</p> -<pre class="brush: 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; - } -</pre> -<p>在支持SVG的浏览器中打开上面的文档。将鼠标移到图上。</p> -<p>由于这个wiki不支持嵌入SVG，所以下面是一个截图供参考:</p> -<table style="border: 2px outset #36b;"> - <tbody> - <tr> - <td><img alt="SVG demonstration" src="https://mdn.mozillademos.org/files/719/SVG-flower.png"></td> - </tr> - </tbody> -</table> -<p>解释:</p> -<ul> - <li>这个SVG文档使用常见连接方法引入样式表。</li> - <li>SVG有自己一套CSS属性和对应的值。其中一些和HTML使用的CSS属性相似。</li> -</ul> -<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> - <caption> - 挑战</caption> - <tbody> - <tr> - <td>修改样式表使得当鼠标指针移到任何一个内层花瓣上时所有内层花瓣都变为粉色，但不改变外层花瓣的效果。</td> - </tr> - </tbody> -</table> -<h4 id="What_next.3F" name="What_next.3F">接下来?</h4> -<p>如果你有任何疑问或评论请移步到<a href="/en-US/docs/Talk:CSS/Getting_Started/SVG_and_CSS">讨论区</a>。</p> -<p>在这个演示中，支持SVG的浏览器知道如何显示SVG元素。样式表只是修改其呈现的方式。同样，这对HTML和XUL文档也是适用的。你也可以将CSS用于XML文档。（与HTML相比，）XML没有预先为元素定义样式。下一个节将对此进行演示: <a href="/en-US/docs/Web/Guide/CSS/Getting_started/XML_data">XML data</a></p> 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 ---- -<p>{{CSSTutorialTOC}}{{previousPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Layout", "布局")}}</p> - -<p>这是<a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started">CSS入门教程</a>的第13部分，将介绍更多高级的选择器，以及格式表格的一些特定方法。你将创建一个包含表格的新样例文档，然后对它进行样式排版。</p> - -<h2 class="clearLeft" id="信息_表格">信息: 表格</h2> - -<p>表格是一个矩形网格中的信息安排。一些表格相当复杂，不同的浏览器对复杂的表格将会有不同的展示结果。</p> - -<p>当你设计你的文档时，使用一个表格来表示一系列信息的<a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started/Selectors#relselectors">关系</a>。因为信息的意义依然清晰，所以不同浏览器用稍微不同的方式来展示表格是没有关系的。</p> - -<p>创建表格的时候，不要用一些非常规的方式构造特殊的可视化布局，本教程的前一页（<a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started/Layout">布局</a>）使用的技术可以更好的达成目的。</p> - -<h3 id="表格结构">表格结构</h3> - -<p>在表格中，信息显示在一个个的<em>单元格</em>（<em>cell</em>）中.</p> - -<p>在页面横向上一条直线的单元格构成了<em>行</em>（<em>row</em>）。</p> - -<p>在一些表格中，行可能被分组。表格开始的特定的行组是<em>表头</em> （<em>header</em>）。表格最后的特定行组是<em>表尾</em>（<em>footer</em>）。表格中主要的行就是<em>表体</em>（<em>body</em>），这些表体也可能被分组。</p> - -<p>在页面纵向上一条直线的单元格构成了<em>列</em>（<em>column</em>），但是在CSS表格中，列的使用是受限的。</p> - -<div class="tuto_example"> -<div class="tuto_type">示例</div> - -<p>在<a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started/Selectors">选择器</a>那章的<a href="/zh-CN/Web/Guide/CSS/Getting_Started/Selectors#relselectors">基于关系的选择器</a>就是一个五行十个单元格的表格。</p> - -<p>第一行是表头，其余四行是表体，没有表尾。</p> - -<p>表中有两列。</p> -</div> - -<p>本教程仅仅涵盖简单表格，其呈现结果完全可以预测。在一个简单表格里，每个单元格仅占用一行一列。你可以用CSS将一个单元格扩展到多行或者多列来构造复杂表格，但是这样的表格已超出了这个基本教程所讲述的范围。</p> - -<h3 id="边框">边框</h3> - -<p>单元格没有外边距。</p> - -<p>但是单元格有边框和内边距。默认情况下，边框被表格的{{cssxref("border-spacing")}}属性值间隔。你也可以通过设置表格的{{cssxref("border-collapse")}}属性值为collapse来完全移除间隔。</p> - -<div class="tuto_example"> -<div class="tuto_type">示例</div> - -<p>这有三个表格。</p> - -<p>左边的表格有0.5 em的边框间隔，中间的表格是0边框间隔，右边的表格是拥有collapse的边框。</p> - -<div style="background-color: white; border: 2px outset #36b; padding: 1em; display: inline-block;"> -<table style="background-color: lime; border-collapse: separate; display: inline-block;"> - <tbody> - <tr> - <td style="border: 1px solid #c00; text-align: center;">Clubs</td> - <td style="border: 1px solid #c00; text-align: center;">Hearts</td> - </tr> - <tr> - <td style="border: 1px solid #c00; text-align: center;">Diamonds</td> - <td style="border: 1px solid #c00; text-align: center;">Spades</td> - </tr> - </tbody> -</table> - -<table style="background-color: lime; border-collapse: separate; display: inline-block; margin-left: 2em;"> - <tbody> - <tr> - <td style="border: 1px solid #c00; text-align: center;">Clubs</td> - <td style="border: 1px solid #c00; text-align: center;">Hearts</td> - </tr> - <tr> - <td style="border: 1px solid #c00; text-align: center;">Diamonds</td> - <td style="border: 1px solid #c00; text-align: center;">Spades</td> - </tr> - </tbody> -</table> - -<table style="background-color: lime; border-collapse: collapse; display: inline-block; margin-left: 2em;"> - <tbody> - <tr> - <td style="border: 1px solid #c00; text-align: center;">Clubs</td> - <td style="border: 1px solid #c00; text-align: center;">Hearts</td> - </tr> - <tr> - <td style="border: 1px solid #c00; text-align: center;">Diamonds</td> - <td style="border: 1px solid #c00; text-align: center;">Spades</td> - </tr> - </tbody> -</table> -</div> - -<h3 id="标题">标题</h3> - -<p>{{HTMLElement("caption")}}元素是用在整个表格的一个标签。默认下，它显示在表格的顶部。</p> - -<p>可以设置{{HTMLElement("caption")}}的{{cssxref("caption-side")}}属性值为bottom来将标签移到表格的底部。</p> - -<p>想要样式化caption的文本，可以使用任何常规的文本属性。</p> - -<div class="tuto_example"> -<div class="tuto_type">示例</div> - -<p>这个表格有一个在底部的标题。</p> - -<pre class="brush: css">#demo-table > caption { - caption-side: bottom; - font-style: italic; - text-align: right; -} -</pre> - -<table style="background-color: white; border: 2px outset #3366bb; padding: 1em 6em 1em 1em;"> - <tbody> - <tr> - <td> - <table> - <caption>Suits</caption> - <tbody> - <tr> - <td> - <table style="border-collapse: collapse;"> - <tbody> - <tr> - <td style="border: 1px solid gray; text-align: center;">Clubs</td> - <td style="border: 1px solid gray; text-align: center;">Hearts</td> - </tr> - <tr> - <td style="border: 1px solid gray; text-align: center;">Diamonds</td> - <td style="border: 1px solid gray; text-align: center;">Spades</td> - </tr> - </tbody> - </table> - </td> - </tr> - </tbody> - </table> - </td> - </tr> - </tbody> -</table> -</div> - -<h3 id="空单元格">空单元格</h3> - -<p>你可以通过为表格元素指定{{cssxref("empty-cells")}}属性值show来显示空单元格（就是其边框和背景）。</p> - -<p>你也可以指定empty-cells: hide;来隐藏边框和背景，那么如果一个单元格的父元素设置了背景，背景将通过空单元格显示出来。</p> - -<div class="tuto_example"> -<div class="tuto_type">实例</div> - -<p>这些表格有苍绿色的背景，其单元格有苍灰色的背景和深灰色的边框。</p> - -<p>左边的表格，空单元格是显示的。在右边，空单元格是隐藏的。</p> - -<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;"> - <tbody> - <tr> - <td style="padding-right: 2em;"> - <table style="background-color: #ddffdd;"> - <tbody> - <tr> - <td style="border: 1px solid #555; background-color: #eee;"> </td> - <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Hearts</td> - </tr> - <tr> - <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Diamonds</td> - <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Spades</td> - </tr> - </tbody> - </table> - </td> - <td style="padding-right: 6em;"> - <table style="background-color: #ddffdd;"> - <tbody> - <tr> - <td> </td> - <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Hearts</td> - </tr> - <tr> - <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Diamonds</td> - <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Spades</td> - </tr> - </tbody> - </table> - </td> - </tr> - </tbody> -</table> -</div> - -<div class="tuto_details"> -<div class="tuto_type">细节</div> - -<p>请查看CSS规范中的<a href="http://www.w3.org/TR/CSS21/tables.html">表格</a>来获得更多关于表格的细节信息。</p> - -<p>规范中有比该教程更进一步的信息，但它不包括浏览器可能会影响复杂表格之间的差异。</p> -</div> - -<h2 id="实例_设计表格样式">实例: 设计表格样式</h2> - -<ol> - <li>创建一个新的HTML文档, <code>doc3.html。</code> 复制粘贴以下内容，请确保通过滚动获取全部内容： - - <div style="height: 36em; overflow: auto;"> - <pre class="brush: 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> -</pre> - </div> - </li> - <li>创建一个新的样式表 <code>style3.css。复制粘贴一些内容，通过滚动获取全部内容：</code> - <pre class="brush: 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; -} -</pre> - </li> - <li>在浏览器打开文档，它将看起来像下面一样： - <table style="background-color: white; border: 2px outset #3366bb; padding: 1em 6em 1em 1em;"> - <tbody> - <tr> - <td> - <div> - <p style="font: bold 200% sans-serif; text-align: left; border-bottom: .2em solid #4ca; margin: 0px 0px .5em 0px;">Oceans</p> - - <div style="border: 1px solid #7a7; background-color: #efe;"> - <table style="background-color: #eeffee; border-collapse: collapse; font: 100% sens-serif; padding-right: .5em; text-align: right;"> - <tbody> - <tr style="text-align: center; color: blue;"> - <th> </th> - <th>Area</th> - <th style="padding-left: .5em; padding-right: .5em;">Mean depth</th> - </tr> - <tr style="font-style: italic; color: gray;"> - <th> </th> - <th style="padding-left: .5em; padding-right: .5em;">million km<sup>2</sup></th> - <th style="padding-left: .5em; padding-right: .5em;">m</th> - </tr> - <tr> - <th style="padding-right: .5em;">Arctic:</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">13,000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">1,200</td> - </tr> - <tr> - <th style="padding-right: .5em;">Atlantic:</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">87,000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">3,900</td> - </tr> - <tr> - <th style="padding-right: .5em;">Pacific:</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">180,000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">4,000</td> - </tr> - <tr> - <th style="padding-right: .5em;">Indian:</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">75,000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">3,900</td> - </tr> - <tr> - <th style="padding-left: .5em; padding-right: .5em;">Southern:</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">20,000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">4,500</td> - </tr> - <tr> - <th style="padding-right: .5em; color: blue;">Total:</th> - <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;">361,000</td> - <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;"> </td> - </tr> - <tr> - <th style="padding-right: .5em; color: blue;">Mean:</th> - <td style="background-color: #cee; padding: .5em .5em .5em 3em;">72,000</td> - <td style="background-color: #cee; padding: .5em .5em .5em 3em;">3,800</td> - </tr> - </tbody> - </table> - </div> - </div> - </td> - </tr> - </tbody> - </table> - </li> - <li>对比样式表里显示表格的规则来确保你理解每一条规则的效果。如果你发现你不明白某一条，注释掉，然后刷新浏览器来看看发生什么。下面是关于该表格一些注意事项： - <ul> - <li>标题是放在表格边框的外面的;</li> - <li>如果你在可选项中设置了最小点尺寸，它可能会影响km<sup>2</sup>这样的上标;</li> - <li>有三个空单元格，其中两个显示了表格的背景色，第三个有单元格自己的背景和上边框;</li> - <li>冒号是通过样式表来添加的。</li> - </ul> - </li> -</ol> - -<div class="tuto_example"> -<div class="tuto_type">挑战</div> - -<p>更改样式表来使表格像下面一样显示：</p> - -<table style="background-color: white; border: 2px outset #3366bb; padding: 1em 6em 1em 1em;"> - <tbody> - <tr> - <td> - <div> - <div style="border: 1px solid #7a7; background-color: #efe;"> - <table style="background-color: #eeffee; border-collapse: collapse; font: 100% sens-serif; padding-right: .5em; text-align: right;"> - <tbody> - <tr style="text-align: center; color: blue;"> - <th> </th> - <th>Area</th> - <th style="padding-left: .5em; padding-right: .5em;">Mean depth</th> - </tr> - <tr style="font-style: italic; color: gray;"> - <th> </th> - <th style="padding-left: .5em; padding-right: .5em;">million km<sup>2</sup></th> - <th style="padding-left: .5em; padding-right: .5em;">m</th> - </tr> - <tr> - <th style="padding-right: .5em;">Arctic:</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">13,000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">1,200</td> - </tr> - <tr> - <th style="padding-right: .5em;">Atlantic:</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">87,000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">3,900</td> - </tr> - <tr> - <th style="padding-right: .5em;">Pacific:</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">180,000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">4,000</td> - </tr> - <tr> - <th style="padding-right: .5em;">Indian:</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">75,000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">3,900</td> - </tr> - <tr> - <th style="padding-left: .5em; padding-right: .5em;">Southern:</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">20,000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">4,500</td> - </tr> - <tr> - <th style="padding-right: .5em; color: blue;">Total:</th> - <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;">361,000</td> - <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;"> </td> - </tr> - <tr> - <th style="padding-right: .5em; color: blue;">Mean:</th> - <td style="background-color: #cee; padding: .5em .5em .5em 3em;">72,000</td> - <td style="background-color: #cee; padding: .5em .5em .5em 3em;">3,800</td> - </tr> - </tbody> - </table> - </div> - - <p style="font: italic 100% sans-serif; text-align: right; border-top: .4em solid #4ca; margin: 1em 0px 0px 0px;">Oceans</p> - </div> - </td> - </tr> - </tbody> -</table> -</div> - -<p><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Tables" title="en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Tables">查看</a>挑战的答案。</p> - -<h2 id="接下来">接下来?</h2> - -<p>{{nextPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Media", "媒体")}}这是本教程关于CSS属性和值的最后一页。请查看CSS规范中的<a href="http://www.w3.org/TR/CSS21/propidx.html">完全属性表</a>来获得完整的属性和值的信息。</p> - -<p><a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started/Media">下一页</a>将再次着眼于CSS样式表的目的和结构。</p> -</div> 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 ---- -<p>{{ CSSTutorialTOC() }}</p> - -<p>{{previousPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Readable_CSS", "创建可读性良好的CSS")}} 这是<a href="/en-US/docs/Web/Guide/CSS/Getting_Started">CSS入门教程</a>系列教程的第7部分；本节讲述了更多的有关文本的样式。你可以通过更改示例样式来使用不同的字体。</p> - -<h2 class="clearLeft" id="资料：文本样式">资料：文本样式</h2> - -<p>CSS提供了几个属性用来操作字体。</p> - -<p>我们先来看一个简写属性 {{ cssxref("font") }}，使用这个属性可以很方便的指定其他的字体属性。比如：</p> - -<ul> - <li>字体加粗，字体的风格：斜体和字体变形：小型大写字母</li> - <li>字体的大小</li> - <li>行高</li> - <li>字体</li> -</ul> - -<div class="tuto_example"> -<div class="tuto_type">示例</div> - -<pre class="brush:css">p {font: italic 75%/125% "Comic Sans MS", cursive;} -</pre> - -<p>这条规则定义了字体的几个属性，使整个段落文本都变成斜体。</p> - -<p>字体大小设置为每个段落父元素字体大小的3/4，行高设置为125%（比常规的间隔稍大一些）。</p> - -<p>文本字体设置为 Comic Sans MS，假如该字体不被浏览器支持则使用默认字体：cursive。</p> - -<p><span style="line-height: 1.5;">这条规则还把bold和small-caps这些效果给去掉了（设置它们的值为normal）。</span></p> -</div> - -<h3 id="sect1"> </h3> - -<h3 id="字体">字体</h3> - -<p>你无法预料到用户是否可以访问样式表里定义的字体。所以在设置字体时，在属性后指定一个替代的字体列表是个不错的主意。</p> - -<p>在这个字体列表的最后加上系统字体中的一个，如：serif,sans-serif,cursive,fantasy或monospace。</p> - -<p>如果字体不支持样式表里设置的字体特征，浏览器会使用另一种字体。比如，样式表中包含字体不支持的特殊字符，如果浏览器发现另一种字体支持这些特殊字符，那浏览器就会选择使用这种字体。</p> - -<p>使用 {{ cssxref("font-family") }} 属性指定文本的字体。</p> - -<p>简体中文的字体示例：</p> - -<p>Windows：font-family:微软雅黑;</p> - -<p>Mac OS：font-family:"Songti SC";</p> - -<h3 id="字号">字号</h3> - -<p>浏览器用户浏览页面时，可以覆盖页面默认的文号大小，也可以改变页面的字号大小。所以说尽可能的使用相对的字号大小对你来说是有意义的。</p> - -<p>你可使用系统内置的值来设置字号，比如small,medium和large。你也可以使用相对父元素字号大小的值来设置，比如：smaller,larger,150%或1.5em。1“em”等于1个字母“m”的宽度（相对于父元素字号大小）;因此1.5em就是1.5倍的父元素字号大小。</p> - -<p>如果有必要你也可以指定一个实际的大小，比如14px(14像素)应用于显示设备或14pt(14点)应用于打印设备。但是实际大小不能应用于视力受损用户的设备上，因为这些设备不支持指定实际的值。一个比较容易实现的策略是给顶级的文档元素指定一个系统内置的值如medium，然后再给它的子元素设置个相对值。</p> - -<p>使用{{ cssxref("font-size") }} 属性指定字体的大小。</p> - -<h3 id="行高">行高</h3> - -<p>行高用来指定行与行之间的距离。如果你的文档中有一个很长的段落由很多行组成，而且这个段落的字号还比较小，这时给它指定一个稍大的间距，这样阅读起来会更方便。</p> - -<p>使用 {{ cssxref("line-height") }} 属性指定文本的行间距。</p> - -<h3 id="装饰">装饰</h3> - -<p>单独的 {{ cssxref("text-decoration") }}就可以为文本指定其他风格，比如underline或line-through。你也可以把值设置成none，把这些风格取消掉。</p> - -<h3 id="其他属性">其他属性</h3> - -<p>使用<span style="line-height: 1.5;">{{ cssxref("font-style") }}</span><code style="font-size: 14px;">: italic;指定文本为斜体</code><code style="font-size: 14px;">;</code></p> - -<p><code style="font-size: 14px;">使用</code><span style="line-height: 1.5;"> </span><code style="font-size: 14px;">{{ cssxref("font-weight") }}: bold;指定文本加粗;</code></p> - -<p>使用<span style="line-height: 1.5;"> </span><code style="font-size: 14px;">{{ cssxref("font-variant") }}: small-caps;指定文本为小型大写字母;</code></p> - -<p>如果我们想单独设置某个效果失效，我们可以把其相应的属性设置为normal或inherit.</p> - -<div class="tuto_details"> -<div class="tuto_type">详细资料</div> - -<p>我们也可以采用其他方式指定文本样式。</p> - -<p><span style="line-height: 1.5;">比如，这里提到的几个属性的其他值。</span></p> - -<p>在一个复杂的样式表中，应该避免使用font属性，因为它的副作用（重置其他个体属性）。</p> - -<p>字体相关的全部细节，可以在CSS规范里查看<a class="external" href="http://www.w3.org/TR/CSS21/fonts.html" style="line-height: 1.5;">Fonts</a><span style="line-height: 1.5;"> 。文本修饰相关可以查看</span><span style="line-height: 1.5;"> </span><a class="external" href="http://www.w3.org/TR/CSS21/text.html" style="line-height: 1.5;">Text</a><span style="line-height: 1.5;"> 。</span></p> - -<p>如果我们不想使用系统上的默认字体库，我们可以使用{ { cssxref(@font-face)} }指定一个在线字体。然而，这要求用户的浏览器支持该字体。</p> -</div> - -<h2 id="实践：指定字体">实践：指定字体</h2> - -<p>对于一个简单的页面，我们可以设置 {{ HTMLElement("body") }}元素的字体，然后页面中的其他元素继承这个设置。</p> - -<ol> - <li>编辑我们的样式表。</li> - <li>添加以下规则到你的样式表中。推荐这个规则放在css文件的开头: - <pre class="eval">body {font: 16px "Comic Sans MS", cursive;} -</pre> - </li> - <li>添加一个该规则的注释，可以添加空格匹配你的整体样式布局。</li> - <li>保存文件并刷新浏览器查看效果。如果你的系统有Comic Sans MS或cursive字体，这两种字体都不支持斜体。你的浏览器会自动选择另一种字体实现斜体，效果如第一行。 - <table style="border: 2px outset #36b; padding: 1em;"> - <tbody> - <tr> - <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> - </tr> - <tr> - <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> - </tr> - </tbody> - </table> - </li> - <li>从浏览器的菜单栏中选择 视图 > 字体大小 > 放大（或视图 > 缩放 > 放大）。即使你在样式里指定了字体为16px。用户浏览网页时，还是可以改变字体字号的大小。</li> -</ol> - -<div class="tuto_example"> -<div class="tuto_type">挑战</div> - -<p>不改变什么，让6个初始字母的字号大小调整为2倍于浏览默认的衬线字体:</p> - -<table> - <tbody> - <tr> - <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: green; font: 200% serif;">S</strong>tyle <strong style="color: green; font: 200% serif;">S</strong>heets</td> - </tr> - <tr> - <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: red; font: 200% serif;">S</strong>tyle <strong style="color: red; font: 200% serif;">S</strong>heets</td> - </tr> - </tbody> -</table> - -<div class="tuto_details" id="tutochallenge"> -<div class="tuto_type">Possible solution</div> - -<p>Add the following style declaration to the <code>strong</code> rule:</p> - -<pre class="brush: css"> font: 200% serif; -</pre> -If you use separate declarations for <code>font-size</code> and <code>font-family</code>, then the <code>font-style</code> setting on the first paragraph is <em>not</em> overridden. - -<p> </p> -<a class="hideAnswer" href="#challenge">Hide solution</a></div> -<a href="#tutochallenge" title="Display a possible solution for the challenge">查看答案.</a></div> - -<h2 id="下一节">下一节?</h2> - -<p>{{nextPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Color", "颜色")}}示例文档已经使用几个颜色命名。下一节列表中将列出标准的颜色名称，并且介绍其他的定义颜色的方式。</p> 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 ---- -<div>{{CSSTutorialTOC}}</div> - -<p>{{previousPage("/zh-CN/docs/CSS/开始", "开始")}} 作为<span class="seoSummary"> <a href="/en/CSS/Getting_Started" title="en/CSS/Getting Started">CSS 入门指南</a> 教程的第一部分，本文解释了什么是 CSS。你需要创建一个文档以便用于接下来的学习。</span></p> - -<h2 class="clearLeft" id="资料_什么是_CSS">资料: 什么是 CSS</h2> - -<p>Cascading Style Sheets (<dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn>) 是一门指定文档该如何呈现给用户的语言。</p> - -<p><em>文档</em><span style="line-height: inherit;"> 是信息的集合，它使用一门 </span><em>标记语言</em><span style="line-height: inherit;"> 作为结构。</span></p> - -<p>将一篇文档 <em>呈现 </em>给用户是指将文档转换成你的听众能够使用的一种形式。火狐、Chrome或IE等浏览器，用于将文档以可视的形式进行呈现，如在计算机屏幕、投影仪或打印机上。</p> - -<div class="tuto_example"> -<div class="tuto_type">示例</div> - -<ul> - <li>你现在阅读的这个网页就是文档。<br> - 网页中的信息通常使用标记语言 HTML (HyperText Markup Language) 来组织它的结构。</li> - <li>一个应用中的对话框，也称为模态窗口，也是文档。<br> - 这样的对话框可能也会使用类似于 XUL 这样的标记语言。Mozilla 的有些应用使用了该语言。</li> -</ul> -</div> - -<p>在该教程中，如果使用像下方这样标题为 <strong>更多细节</strong> 的框，里面会包含额外信息。如果你迫切的想完成整个教程，那么可以跳过这些方框，等到以后有时间再回来看。当然也可以在碰到方框的时候去阅读这些内容，或者更进一步的，按照里面提供的链接去了解更多细节。</p> - -<div class="tuto_details"> -<div class="tuto_type">更多细节</div> - -<p>一个文档并不等同于一个文件。它甚至可能不会保存在一个文件中。</p> - -<p>举例来说，你现在阅读的这个文档就不是保存在一个文件中。当你的浏览器请求该页面时，服务器会查询数据库生成文档，将散落在众多文件中的文档的碎片搜集起来。然而在本教程中，你使用的都是保存在文件中的文档。</p> - -<p>关于文档与标记语言的更多信息，可以查看本网站的其他部分—例如：</p> - -<table style="background-color: inherit; margin-left: 2em;"> - <tbody> - <tr> - <td><a href="/en/HTML" title="en/HTML">HTML</a></td> - <td>用于 web 页面</td> - </tr> - <tr> - <td><a href="/en/XML" title="en/XML">XML</a></td> - <td>用于结构化文档</td> - </tr> - <tr> - <td><a href="/en/SVG" title="en/SVG">SVG</a></td> - <td>用于图形</td> - </tr> - <tr> - <td><a href="/en/XUL" title="en/XUL">XUL</a></td> - <td>用于 Mozilla 中的用户界面</td> - </tr> - </tbody> -</table> - -<p>在教程的第二部分，你会看到使用这些标记语言的例子。</p> -</div> - -<p><em> </em>为用户<em>展现 </em><span style="line-height: inherit;">文档意味着将其转换成一个可读性良好的格式。像 Firefox， Chrome 或是 Internet Explorer 这样的浏览器倾向于使用更视觉化的方式来展现文档 — 例如，在计算机屏幕，投影仪或是打印机上。</span></p> - -<div class="tuto_details"> -<div class="tuto_type">更多细节</div> - -<p>CSS 并非仅仅用于浏览器，也不仅限于视觉展现。按照 CSS 的正式术语来讲，将文档呈现给用户的程序称为<em>用户代理</em>(UA)。浏览器只是用户代理的其中之一。不过在教程的第一部分中，你将只在浏览器中使用 CSS。</p> - -<p>要了解更多 CSS 术语定义的相关内容，请查看 CSS 规范的 <a class="external" href="http://www.w3.org/TR/CSS21/conform.html#q1">定义</a>。</p> -</div> - -<h2 id="动手：创建一个文档">动手：创建一个文档</h2> - -<ol> - <li>在你的电脑中创建一个新的文件夹，用于保存和管理本指南中的练习。</li> - <li>打开你的文本编辑器并创建一个新文件。该文件将用于保存后续练习中的文档。</li> - <li>将下面的内容复制粘贴进文本文件中。保存文件，将其命名为 <code>doc1.html</code> - <pre class="brush: 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> -</pre> - </li> - <li>在你的浏览器中开启一个新的标签页或窗口，打开文件。 - <p>你会看到一串开头字母大写的文本，像这样：</p> - - <table style="border: 2px outset #36b; padding: 1em;"> - <tbody> - <tr> - <td><strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets</td> - </tr> - </tbody> - </table> - - <p>由于你的浏览器与该 wiki 的设置可能不同，所以你看到的内容与上面显示的不一定相符合。如果在字体、间距或颜色有区别，请不要担心，因为这些内容暂时无关紧要。</p> - </li> -</ol> - -<h2 id="接下来是什么？">接下来是什么？</h2> - -<p>{{nextPage("/zh-CN/docs/CSS/开始/为何使用CSS", "为什么使用 CSS?")}}现在你的文档中还没有使用 CSS。在<a href="/zh-CN/docs/CSS/Getting_Started/Why_use_CSS" title="/en-US/docs/CSS/Getting_Started/Why_use_CSS">下一节</a>中，你将会使用 CSS 来指定样式。</p> 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 ---- -<p>{{ CSSTutorialTOC() }}</p> - -<p>{{ previousPage("/zh-CN/docs/CSS/开始/What_is_CSS", "什么是CSS?") }}<span class="seoSummary">这是<a href="/en-US/docs/Web/Guide/CSS/Getting_started" title="en-US/docs/Web/Guide/CSS/Getting_started">CSS入门教程</a> 的第二章节，解释了CSS与文档的关系。在下面的练习中，你将学习如何给你在第一章节中创建的示例文档添加CSS样式表。</span></p> - -<h2 class="clearLeft" id="信息_为何使用CSS？">信息: 为何使用CSS？</h2> - -<p>CSS帮助您将文档信息的内容 和如何展现它的细节相分离。众所周知，如何展现文档的细节即为<em>样式</em>(<em>style</em>)。您可以将样式从它的内容分离出来，以便您能够：</p> - -<ul> - <li>避免重复</li> - <li>更容易维护</li> - <li>为不同的目的，使用不同的样式而内容相同</li> -</ul> - -<div class="tuto_example"> -<div class="tuto_type">例如</div> - -<p>您的网站可能有成千上万的页面外观相似。使用CSS，您可以将样式信息存储在公共的文件中以供所有的页面共用。</p> - -<p>当用户显示页面时，用户的浏览器将样式信息和页面内容一同加载。</p> - -<p>当用户打印页面时，您可以提供不同的样式信息，以便于打印出来的页面更易于阅读。</p> -</div> - -<p>总之，在HTML中，您使用标记语言来描述文档的内容而不是它的样式。您可以使用CSS来指定它的样式而不是它的内容。 (在本教程后续内容中，您会看到此种的例外情况。)</p> - -<div class="tuto_details"> -<div class="tuto_type">更多的细节</div> - -<p>像HTML之类的标记语言也会提供指定样式的方法。</p> - -<p>例如，在HTML中，您可以使用<code><b></code>标签来加粗文字，同时，您也可以在页面的<code><body>标记中指定背景颜色。</code></p> - -<p>当您使用CSS时，您通常要避免使用标记语言的这些特性，以便您所有的文档样式信息保存在同一地方。</p> -</div> - -<h2 id="行动：创建样式表">行动：创建样式表</h2> - -<ol> - <li>在与前面相同的目录中，新建另一个文本文件。该文件将成为您的样式表。请将它命名为：<code>style1.css</code></li> - <li>在您的CSS文件中，复制、粘贴下面的行，并保存该文件: - <pre class="brush: css">strong {color: red;} -</pre> - </li> -</ol> - -<h3 id="连接您的文档和样式表">连接您的文档和样式表</h3> - -<ol> - <li>为将您的文档和样式表相连，请编辑您的HTML文件。并添加下面高亮的行： - <pre class="brush: html; highlight:[6];"><!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> -</pre> - </li> - <li>保存该文件并刷新您的浏览器。该样式表将首字母显示为红色，如下所示： - <table style="border: 2px outset #3366bb; padding: 1em;"> - <tbody> - <tr> - <td><span style="color: red;"><strong>C</strong></span>ascading <span style="color: red;"><strong>S</strong></span>tyle <span style="color: red;"><strong>S</strong></span>heets</td> - </tr> - </tbody> - </table> - </li> -</ol> - -<div class="tuto_example" id="challenge"> -<div class="tuto_type">挑战</div> - -<p>除了红色外，CSS允许使用其它的颜色名称。</p> - -<p>不查询参考手册，请在您使用的样式表找出五个以上的颜色名称。</p> - -<div class="tuto_details" id="tutochallenge"> -<div class="tuto_type">Possible solution</div> - -<p>CSS supports common color names like <code>orange</code>, <code>yellow</code>, <code>blue</code>, <code>green</code>, or <code>black</code>. It also supports some more exotic color names like <code>chartreuse</code>, <code>fuschia</code>, or <code>burlywood</code>. See <a href="/en-US/docs/CSS/color_value" title="The CSS color data type">CSS Color value</a> for a complete list as well as other ways of specifying colors.</p> -<a class="hideAnswer" href="#challenge">Hide solution</a></div> -<a href="#tutochallenge" title="Display a possible solution for the challenge">请参考解答。</a></div> - -<h2 id="下一节？">下一节？</h2> - -<p>{{nextPage("/zh-CN/docs/CSS/开始/How_CSS_works", "CSS如何工作。")}}现在您将示例文档与独立的样式表连在了一起，您已准备好学习<a href="/zh-CN/docs/Web/Guide/CSS/Getting_started/How_CSS_works" title="/en-US/docs/Web/Guide/CSS/Getting_started/How_CSS_works">更多的</a>关于您的浏览器在显示文档时如何将它们组合在一起。</p> 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 ---- -<div>{{cssref}}</div> - -<p><strong>媒体查询</strong>（<strong>Media queries</strong>）非常实用，尤其是当你想要根据设备的大致类型（如打印设备与带屏幕的设备）或者特定的特征和设备参数（例如屏幕分辨率和浏览器{{glossary("viewport", "视窗")}}宽度）来修改网站或应用程序时。</p> - -<p>媒体查询常被用于以下目的：</p> - -<ul> - <li>有条件的通过 {{cssxref("@media")}} 和 {{cssxref("@import")}} <a href="/zh-CN/docs/Web/CSS/At-rule">at-rules</a> 用<a href="/en-US/docs/Web/CSS">CSS</a> 装饰样式。</li> - <li>用<code>media=</code> 属性为{{HTMLElement("style")}}, {{HTMLElement("link")}}, {{HTMLElement("source")}}和其他<a href="/zh-CN/docs/Web/HTML">HTML</a>元素指定特定的媒体类型。如:</li> -</ul> - -<pre><code><link rel="stylesheet" src="styles.css" media="screen" /> -<link rel="stylesheet" src="styles.css" media="print" /></code> -</pre> - -<ul> - <li>使用{{domxref("Window.matchMedia()")}} 和{{domxref("MediaQueryList.addListener()")}} 方法来<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries">测试和监控媒体状态</a>。</li> -</ul> - -<div class="note"> -<p><strong>注意：</strong>本页的例子使用CSS <code>@media</code> 的方式来说明目的，但是对于所有类型的媒体查询，基本语法均相同。</p> -</div> - -<h2 id="语法">语法</h2> - -<p>每条媒体查询语句都由一个可选的<em>媒体类型</em>和任意数量的<em>媒体特性</em>表达式构成。可以使用多种<em>逻辑操作符</em>合并多条媒体查询语句。媒体查询语句不区分大小写。</p> - -<p>当媒体类型（如果指定）与在其上显示文档的设备匹配并且所有媒体功能表达式都计算为true时，媒体查询将计算为true。 涉及未知媒体类型的查询始终为false。</p> - -<div class="note"> -<p><strong>注意：</strong> 即使媒体查询返回false，带有媒体查询附加到其{{HTMLElement("link")}}标记的样式表<a href="http://scottjehl.github.com/CSS-Download-Tests/">仍将下载</a>。 但是，除非查询结果变为true，否则其内容将不适用。</p> -</div> - -<h3 id="媒体类型">媒体类型</h3> - -<p><em>媒体类型</em>（<em>Media types</em>）描述设备的一般类别。除非使用 <code>not</code> 或 <code>only</code> 逻辑操作符，媒体类型是可选的，并且会（隐式地）应用 <code>all</code> 类型。</p> - -<dl> - <dt><code id="all">all</code></dt> - <dd>适用于所有设备。</dd> - <dt><code id="print">print</code></dt> - <dd>适用于在打印预览模式下在屏幕上查看的分页材料和文档。 （有关特定于这些格式的格式问题的信息，请参阅<a href="/zh-CN/docs/Web/CSS/Paged_Media">分页媒体</a>。）</dd> - <dt><code id="screen">screen</code></dt> - <dd>主要用于屏幕。</dd> - <dt><code id="speech">speech</code></dt> - <dd>主要用于语音合成器。</dd> -</dl> - -<div class="note"><strong>被废弃的媒体类型：</strong> CSS2.1 和 <a href="https://drafts.csswg.org/mediaqueries-3/#background">Media Queries 3</a> 定义了一些额外的媒体类型(<code>tty</code>, <code>tv</code>, <code>projection</code>, <code>handheld</code>, <code>braille</code>, <code>embossed</code>, 以及 <code>aural</code>)，但是他们在<a href="http://dev.w3.org/csswg/mediaqueries/#media-types">Media Queries 4</a> 中已经被废弃，并且不应该被使用。<code>aural</code>类型被替换为具有相似效果的<code>speech</code>。</div> - -<h3 id="媒体特性">媒体特性</h3> - -<p><em>媒体特性</em>（<em>Media features</em>）描述了 {{glossary("user agent")}}、输出设备，或是浏览环境的具体特征。媒体特性表达式是完全可选的，它负责测试这些特性或特征是否存在、值为多少。每条媒体特性表达式都必须用括号括起来。</p> - -<table> - <thead> - <tr> - <th>名称</th> - <th>简介</th> - <th>备注</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{cssxref("@media/any-hover", "any-hover")}}</td> - <td>是否有任何可用的输入机制允许用户（将鼠标等）悬停在元素上？</td> - <td>在 Media Queries Level 4 中被添加。</td> - </tr> - <tr> - <td>{{cssxref("@media/any-pointer", "any-pointer")}}</td> - <td>可用的输入机制中是否有任何指针设备，如果有，它的精度如何？</td> - <td>在 Media Queries Level 4 中被添加。</td> - </tr> - <tr> - <td>{{cssxref("@media/aspect-ratio", "aspect-ratio")}}</td> - <td>视窗（viewport）的宽高比</td> - <td></td> - </tr> - <tr> - <td>{{cssxref("@media/color", "color")}}</td> - <td>输出设备每个像素的比特值，常见的有 8、16、32 位。如果设备不支持输出彩色，则该值为 0</td> - <td></td> - </tr> - <tr> - <td>{{cssxref("@media/color-gamut", "color-gamut")}}</td> - <td>用户代理和输出设备大致程度上支持的色域</td> - <td>在 Media Queries Level 4 中被添加。</td> - </tr> - <tr> - <td>{{cssxref("@media/color-index", "color-index")}}</td> - <td>输出设备的颜色查询表（color lookup table）中的条目数量，如果设备不使用颜色查询表，则该值为 0</td> - <td></td> - </tr> - <tr> - <td>{{cssxref("@media/device-aspect-ratio", "device-aspect-ratio")}} {{obsolete_inline}}</td> - <td>输出设备的宽高比</td> - <td>已在 Media Queries Level 4 中被弃用。</td> - </tr> - <tr> - <td>{{cssxref("@media/device-height", "device-height")}} {{obsolete_inline}}</td> - <td>输出设备渲染表面（如屏幕）的高度</td> - <td>已在 Media Queries Level 4 中被弃用。</td> - </tr> - <tr> - <td>{{cssxref("@media/device-width", "device-width")}} {{obsolete_inline}}</td> - <td>输出设备渲染表面（如屏幕）的宽度</td> - <td>已在 Media Queries Level 4 中被弃用。</td> - </tr> - <tr> - <td>{{cssxref("@media/display-mode", "display-mode")}}</td> - <td> - <p>应用程序的显示模式，如web app的manifest中的<a href="/zh-CN/docs/Web/Manifest#display"><code>display</code></a> 成员所指定</p> - </td> - <td>在 <a href="http://w3c.github.io/manifest/#the-display-mode-media-feature">Web App Manifest spec</a>被定义.</td> - </tr> - <tr> - <td>{{cssxref("@media/forced-colors", "forced-colors")}}</td> - <td>检测是user agent否限制调色板</td> - <td>在 Media Queries Level 5 中被添加。</td> - </tr> - <tr> - <td>{{cssxref("@media/grid", "grid")}}</td> - <td>输出设备使用网格屏幕还是点阵屏幕？</td> - <td></td> - </tr> - <tr> - <td>{{cssxref("@media/height", "height")}}</td> - <td>视窗（viewport）的高度</td> - <td></td> - </tr> - <tr> - <td>{{cssxref("@media/hover", "hover")}}</td> - <td> - <p>主要输入模式是否允许用户在元素上悬停</p> - </td> - <td>在 Media Queries Level 4 中被添加。</td> - </tr> - <tr> - <td>{{cssxref("@media/inverted-colors", "inverted-colors")}}</td> - <td>user agent或者底层操作系统是否反转了颜色</td> - <td>在 Media Queries Level 5 中被添加。</td> - </tr> - <tr> - <td>{{cssxref("@media/light-level", "light-level")}}</td> - <td>环境光亮度</td> - <td>在 Media Queries Level 5 中被添加。</td> - </tr> - <tr> - <td>{{cssxref("@media/monochrome", "monochrome")}}</td> - <td> - <p>输出设备单色帧缓冲区中每个像素的位深度。如果设备并非黑白屏幕，则该值为 0</p> - </td> - <td></td> - </tr> - <tr> - <td>{{cssxref("@media/orientation", "orientation")}}</td> - <td>视窗（viewport）的旋转方向</td> - <td></td> - </tr> - <tr> - <td>{{cssxref("@media/overflow-block", "overflow-block")}}</td> - <td> - <p>输出设备如何处理沿块轴溢出视窗(viewport)的内容</p> - </td> - <td>在 Media Queries Level 4 中被添加。</td> - </tr> - <tr> - <td>{{cssxref("@media/overflow-inline", "overflow-inline")}}</td> - <td> - <p>沿内联轴溢出视窗(viewport)的内容是否可以滚动？</p> - </td> - <td>在 Media Queries Level 4 中被添加。</td> - </tr> - <tr> - <td>{{cssxref("@media/pointer", "pointer")}}</td> - <td> - <p>主要输入机制是一个指针设备吗？如果是，它的精度如何？</p> - </td> - <td>在 Media Queries Level 4 中被添加。</td> - </tr> - <tr> - <td>{{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}}</td> - <td>探测用户倾向于选择亮色还是暗色的配色方案</td> - <td>在 Media Queries Level 5 中被添加。</td> - </tr> - <tr> - <td>{{cssxref("@media/prefers-contrast", "prefers-contrast")}}</td> - <td>探测用户是否有向系统要求提高或降低相近颜色之间的对比度</td> - <td>在 Media Queries Level 5 中被添加。</td> - </tr> - <tr> - <td>{{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}}</td> - <td>用户是否希望页面上出现更少的动态效果</td> - <td>在 Media Queries Level 5 中被添加。</td> - </tr> - <tr> - <td>{{cssxref("@media/prefers-reduced-transparency", "prefers-reduced-transparency")}}</td> - <td>用户是否倾向于选择更低的透明度</td> - <td>在 Media Queries Level 5 中被添加。</td> - </tr> - <tr> - <td>{{cssxref("@media/resolution", "resolution")}}</td> - <td>输出设备的像素密度（分辨率）</td> - <td></td> - </tr> - <tr> - <td>{{cssxref("@media/scan", "scan")}}</td> - <td>输出设备的扫描过程（适用于电视等）</td> - <td></td> - </tr> - <tr> - <td>{{cssxref("@media/scripting", "scripting")}}</td> - <td>探测脚本（例如 JavaScript）是否可用</td> - <td>在 Media Queries Level 5 中被添加。</td> - </tr> - <tr> - <td>{{cssxref("@media/update-frequency", "update")}}</td> - <td>输出设备更新内容的渲染结果的频率</td> - <td>在 Media Queries Level 4 中被添加。</td> - </tr> - <tr> - <td>{{cssxref("@media/width", "width")}}</td> - <td>视窗（viewport）的宽度，包括纵向滚动条的宽度</td> - <td></td> - </tr> - </tbody> -</table> - -<h3 id="逻辑操作符">逻辑操作符</h3> - -<p><em>逻辑操作符</em>（<em>logical operators</em>） <code>not</code>, <code>and</code>, 和 <code>only</code> 可用于联合构造复杂的媒体查询，您还可以通过用逗号分隔多个媒体查询，将它们组合为一个规则。</p> - -<h4 id="and"><code>and</code></h4> - -<p> <code>and</code> 操作符用于将多个媒体查询规则组合成单条媒体查询，当每个查询规则都为真时则该条媒体查询为真，它还用于将媒体功能与媒体类型结合在一起。</p> - -<h4 id="not"><code>not</code></h4> - -<p><code>not</code>运算符用于否定媒体查询，如果不满足这个条件则返回true，否则返回false。 如果出现在以逗号分隔的查询列表中，它将仅否定应用了该查询的特定查询。 如果使用not运算符，则还必须指定媒体类型。</p> - -<div class="note"> -<p><strong>注意：</strong>在Level 3中，<code>not</code>关键字不能用于否定单个媒体功能表达式，而只能用于否定整个媒体查询。</p> -</div> - -<h4 id="only"><code>only</code></h4> - -<p><code>only</code>运算符仅在整个查询匹配时才用于应用样式，并且对于防止较早的浏览器应用所选样式很有用。 当不使用<code>only</code>时，旧版本的浏览器会将<code>screen and (max-width: 500px)</code>简单地解释为<code>screen</code>，忽略查询的其余部分，并将其样式应用于所有屏幕。 如果使用<code>only</code>运算符，则<em>还必须指定</em>媒体类型。</p> - -<h4 id="逗号"><code>,</code> (逗号)</h4> - -<p>逗号用于将多个媒体查询合并为一个规则。 逗号分隔列表中的每个查询都与其他查询分开处理。 因此，如果列表中的任何查询为true，则整个media语句均返回true。 换句话说，列表的行为类似于逻辑或<code>or</code>运算符。</p> - -<h2 id="定位媒体类型">定位媒体类型</h2> - -<p>媒体类型描述了给定设备的一般类别。 尽管通常在设计网站时会考虑屏幕，但您可能希望创建针对特殊设备（例如打印机或基于音频的屏幕阅读器）的样式。 例如，此CSS针对打印机：</p> - -<pre class="brush: css">@media print { ... } -</pre> - -<p>您还可以定位多个设备。 例如，此<code>@media</code>规则使用两个媒体查询来同时定位屏幕和打印设备</p> - -<pre class="brush: css">@media screen, print { ... } -</pre> - -<p>有关所有媒体类型的列表，请参见<a class="internal" href="#Media_types">Media types</a>。 由于它们仅以非常广泛的术语描述设备，因此只有少数几种可用。 要定位更具体的属性，请改用<em>媒体功能</em>。</p> - -<h2 id="定位媒体特性">定位媒体特性</h2> - -<p>媒体功能描述了给定的{{glossary("user agent")}}的输出设备或环境的特定特征。 例如，您可以将特定样式应用于宽屏显示器，使用鼠标的计算机，或应用于在弱光条件下使用的设备。 当用户的主要输入机制（例如鼠标）可以悬停在元素上时，如下为一个示例：</p> - -<pre class="brush: css">@media (hover: hover) { ... } -</pre> - -<p>许多媒体功能都是<em>范围功能</em>，这意味着可以在它们前面加上“最小”或“最大”来表示“最小条件”或“最大条件”约束。 例如，仅当您的浏览器的{{glossary("viewport")}}宽度等于或小于12450px时，此CSS才会应用样式：</p> - -<pre class="brush: css">@media (max-width: 12450px) { ... } -</pre> - -<p>如果您在未指定值的情况下创建媒体功能查询，则该样式将全部被应用，只要该查询的值不为零（或在Level 4中为<code>none</code>）即可。 例如，此CSS将适用于任何带有彩色屏幕的设备：</p> - -<pre class="brush: css">@media (color) { ... } -</pre> - -<p>如果某个功能不适用于运行浏览器的设备，则涉及该媒体功能的表达式始终为false。 例如，将不会使用嵌套在以下查询中的样式，因为没有语音专用设备具有屏幕长宽比：</p> - -<pre class="brush: css">@media speech and (aspect-ratio: 11/5) { ... } -</pre> - -<p>有关更多媒体功能<a href="#Media_features">media feature</a>示例，请参阅每个特定功能的参考页。</p> - -<h2 id="创建复杂查询">创建复杂查询</h2> - -<p>有时您可能想创建一个取决于多个条件的媒体查询。 这就是<em>逻辑运算符</em>使用的场景：<code>not</code>，<code>and</code>，和 <code>only</code>。 此外，您可以将多个媒体查询合并到一个<em>逗号分隔的列表</em>中。 这使您可以在不同情况下应用相同的样式。</p> - -<p>在前面的示例中，我们已经看到<code>and</code>运算符用于将媒体类型与媒体功能分组。 and运算符还可以将多个媒体功能组合到单个媒体查询中。 同时，<code>not</code>运算符会否定媒体查询，从而基本上颠倒了它的正常含义。 唯一的运算符可防止较早的浏览器应用样式。</p> - -<div class="note"> -<p><strong>注意：</strong> 在大多数情况下，默认情况下，如果未指定其他类型，则使用<code>all</code>媒体类型。 但是，如果使用<code>not</code>或<code>only</code>运算符，则必须显式指定媒体类型。</p> -</div> - -<h3 id="结合多种类型和特性">结合多种类型和特性</h3> - -<p><code>and</code>关键字将媒体功能与媒体类型或其他媒体功能组合在一起。 此示例结合了两种媒体功能，以将样式限制为宽度至少为30 em的横向的设备：</p> - -<pre class="brush: css">@media (min-width: 30em) and (orientation: landscape) { ... } -</pre> - -<p>要将样式限制为带有屏幕的设备，可以将媒体功能链接到<code>screen</code>媒体类型：</p> - -<pre class="brush: css">@media screen and (min-width: 30em) and (orientation: landscape) { ... }</pre> - -<h3 id="测试多重查询">测试多重查询</h3> - -<p>当用户的设备与各种媒体类型，功能或状态中的任何一种匹配时，可以使用逗号分隔的列表来应用样式。 例如，如果用户设备的最小高度为680px或为纵向模式的屏幕设备，则以下规则将应用其样式：</p> - -<pre class="brush: css">@media (min-height: 680px), screen and (orientation: portrait) { ... } -</pre> - -<p>以上面的示例为例，如果用户使用的打印机的页面高度为800像素，则media语句将返回true，因为将应用第一个查询。 同样，如果用户使用的是纵向模式的智能手机，并且视口高度为480px，则将应用第二个查询，并且media语句仍将返回true。</p> - -<h3 id="反转查询的含义">反转查询的含义</h3> - -<p><code>not</code>关键字会反转整个媒体查询的含义。 它只会否定要应用的特定媒体查询。 （因此，它不会应用于以逗号分隔的媒体查询列表中的每个媒体查询。）<code>not</code>关键字不能用于否定单个功能查询，只能用于否定整个媒体查询。 看看以下<code>not</code>关键字的例子：</p> - -<pre class="brush: css">@media not all and (monochrome) { ... } -</pre> - -<p>所以上述查询等价于：</p> - -<pre class="brush: css">@media not (all and (monochrome)) { ... } -</pre> - -<p>而不是：</p> - -<pre class="brush: css example-bad">@media (not all) and (monochrome) { ... }</pre> - -<p>再看另一个例子，如下媒体查询：</p> - -<pre class="brush: css">@media not screen and (color), print and (color) { ... } -</pre> - -<p>等价于：</p> - -<pre class="brush: css">@media (not (screen and (color))), print and (color) { ... }</pre> - -<h3 id="提升老版本浏览器兼容性">提升老版本浏览器兼容性</h3> - -<p><code>only</code>关键字可防止不支持带有媒体功能的媒体查询的旧版浏览器应用给定的样式。 <em>它对现代浏览器没有影响。</em></p> - -<pre class="brush: css">@media only screen and (color) { ... } -</pre> - -<h2 id="版本_4_中的语法改进">版本 4 中的语法改进</h2> - -<p>媒体查询4级规范对语法进行了一些改进，以使用具有“范围”类型（例如宽度或高度，减少冗余）的功能进行媒体查询。 级别4添加了用于编写此类的查询范围上下文。 例如，使用最大宽度<code>max-</code> 功能，我们可以编写以下代码：</p> - -<div class="blockIndicator note"> -<p><strong>Note:</strong> 媒体查询4级规范在现代浏览器中具有合理的支持，但某些媒体功能并未得到很好的支持。 有关更多详细信息，请参见 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/@media#Browser_compatibility"><code>@media</code> browser compatibility table</a>。</p> -</div> - -<pre class="brush: css">@media (max-width: 30em) { ... }</pre> - -<p>在媒体查询4级规范可以这样写：</p> - -<pre class="brush: css">@media (width <= 30em) { ... } -</pre> - -<p>使用<code>min-</code>和<code>max-</code>可以测试一个在两个值之间的宽度</p> - -<pre class="brush: css">@media (min-width: 30em) and (max-width: 50em) { ... }</pre> - -<p>用4级语法书写如下</p> - -<pre class="brush: css">@media (30em <= width <= 50em ) { ... } - -</pre> - -<p>媒体查询4级规范还添加了用<strong>and</strong>, <strong>not</strong>, 和 <strong>or</strong>实现的完整的布尔运算来合并媒体查询的方法。</p> - -<h3 id="使用_not否定一个特性">使用 <code>not</code>否定一个特性</h3> - -<p>在媒体功能周围使用<code>not()</code>会否定查询中的该特性。 例如，如果设备没有悬停功能，则<code>not(hover)</code>将被匹配：</p> - -<pre class="brush: css">@media (not(hover)) { ... }</pre> - -<h3 id="用_or测试多个特性">用 <code>or</code>测试多个特性</h3> - -<p>您可以使用<code>or</code>测试多个功能之间的匹配，如果任何功能为true，则解析为true。 例如，以下查询测试具有单色显示或悬停功能的设备：</p> - -<pre class="brush: css">@media (not (color)) or (hover) { ... }</pre> - -<h2 id="参见">参见</h2> - -<ul> - <li><a href="/zh-CN/docs/Web/CSS/Media_Queries/Testing_media_queries">使用编程方法测试媒体查询</a></li> - <li><a href="http://davidwalsh.name/animate-media-queries">CSS Animations Between Media Queries</a></li> - <li><a href="/zh-CN/docs/Web/CSS/Mozilla_Extensions#Media_features">Extended Mozilla media features</a></li> - <li><a href="/zh-CN/docs/Web/CSS/Webkit_Extensions#Media_features">Extended WebKit media features</a></li> -</ul> 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 ---- -<div>{{cssref}}</div> - -<p><span style="line-height: 1.5;">CSS 的 </span> {{ cssxref("background-size") }}<span style="line-height: 1.5;"> 属性能调整背景图片的大小，从而替代了用原始大小显示图片的默认行为。你可以随意的缩放背景图。</span></p> - -<h2 id="Tiling_a_large_image" name="Tiling_a_large_image">拼一张大图</h2> - -<p><span style="line-height: 1.5;">来考虑一张大图，一个1233*1233像素的火狐图标。我们想将这张图的四个副本拼到一个300*300像素的正方形里</span>（出于某种原因，很可能是某个非常糟糕的网站设计）<span style="line-height: 1.5;">，最终的效果如下：</span></p> - -<p><img alt="screenshot1.png" class="default internal" src="/@api/deki/files/4001/=screenshot1.png"></p> - -<p>用下面的 CSS 可以实现这种效果：</p> - -<pre class="brush: css; highlight:[8]">.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; -} </pre> - -<div>没必要再用带前缀的 background-size 了，<span style="line-height: 1.5;">尽管你可能考虑到要兼容一些非常老的浏览器版本，而用带前缀的写法。</span></div> - -<h2 id="Stretching_an_image" name="Stretching_an_image">拉伸图片</h2> - -<p>你可以同时指定图片纵向和横向的大小，如下：</p> - -<pre class="brush:css">background-size: 300px 150px; -</pre> - -<p>结果会是这样的：<br> - <img alt="screenshot3.png" class="default internal" src="/@api/deki/files/4003/=screenshot3.png"></p> - -<h2 id="Scaling_an_image_up" name="Scaling_an_image_up">放大图片</h2> - -<p>另一方面，你可以在背景里放大一张图片。我们把 16*16px 的图标放大到 300*300px：</p> - -<p><img alt="screenshot2.png" class="default internal" src="/@api/deki/files/4002/=screenshot2.png"></p> - -<pre class="brush: css; highlight:[5]">.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; -} -</pre> - -<p>正如你所看到的，CSS 的写法实际上是基本相同的。</p> - -<h2 id="Special_values.3A_.22contain.22_and_.22cover.22" name="Special_values.3A_.22contain.22_and_.22cover.22">特殊值: "contain" 和 "cover"</h2> - -<p>除了{{cssxref("<length>")}} 值外，{{ cssxref("background-size") }} 还提供了另外两个特殊的尺寸值：contain 和 cover。</p> - -<h3 id="contain" name="contain"><code>contain</code></h3> - -<p><span style="line-height: 1.5;">contain 值指定可以不用考虑容器的大小，</span><span style="line-height: 1.5;">把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域</span><span style="line-height: 1.5;">。</span><span style="line-height: 1.5;">在支持背景图缩放的浏览器（比如Firefox 3.6+）中，改变这个窗口的大小，</span><span style="line-height: 1.5;">来看看下方这个例子。</span></p> - -<pre class="brush:html"><div class="bgSizeContain"> - <p>Try resizing this window.<code>Right-click->This Frame->Open Frame in New Tab</code></p> -</div></pre> - -<pre class="brush:css;highlight:[4]">.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; -}</pre> - -<p>{{ EmbedLiveSample("contain", "100%", "220") }}</p> - -<h3 id="cover" name="cover"><code>cover</code></h3> - -<p><span style="line-height: 1.5;">cover 属性指定背景图可以被调整到任意大小，</span><span style="line-height: 1.5;">以使背景图完全覆盖背景区域</span><span style="line-height: 1.5;">。</span></p> - -<pre class="brush:html"><div class="bgSizeCover"> - <p>Try resizing this window.Right-click->This Frame->Open Frame in New Tab</p> -</div></pre> - -<pre class="brush:css;highlight:[4]">.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; -}</pre> - -<p>{{ EmbedLiveSample("cover", "100%", "220") }}</p> - -<h2 id="See_also" name="See_also">另请参阅</h2> - -<ul> - <li>{{ cssxref("background-size") }}</li> - <li>{{ cssxref("background") }}</li> -</ul> 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 ---- -<div>{{cssref}}</div> - -<p>{{Glossary("DOM")}} 提供了通过编程方法来获得<a href="/zh-CN/docs/Web/CSS/Media_Queries">媒体查询</a>结果的特性。这是通过 {{domxref("MediaQueryList")}} 接口和它的方法来实现的。创建了 <code>MediaQueryList</code> 对象之后，就可以通过它来检查查询结果，或者设置事件监听器，在查询结果发生变化时自动接收到通知。</p> - -<h2 id="创建媒体查询列表">创建媒体查询列表</h2> - -<p>在获取查询结果前，首先要创建查询列表，也就是 <code>MediaQueryList</code> 对象来存放媒体查询。为了实现这个目的，可以使用 {{domxref("window.matchMedia")}} 方法。</p> - -<p>举个例子，设置一个用来判断设备的旋转方向（横屏还是竖屏）的查询列表：</p> - -<pre class="brush: js">var mediaQueryList = window.matchMedia("(orientation: portrait)"); -</pre> - -<h2 id="检查查询结果">检查查询结果</h2> - -<p>一旦创建了媒体查询列表，你就可以通过检查它的 <code>matches</code> 属性来获取相应的查询结果，上述属性会直接返回查询结果：</p> - -<pre class="brush: js">if (mediaQueryList.matches) { - /* 设备的旋转方向为纵向 portrait */ -} else { - /* 设备的旋转方向不是纵向，也就是横向 landscape */ -} -</pre> - -<h2 id="接收查询提醒">接收查询提醒</h2> - -<p>如果你需要持续观察查询结果值的变化情况，那么，注册一个<a href="/zh-CN/docs/Web/API/EventTarget/addEventListener">监听器</a>比手动检查查询结果要高效很多。要注册监听器，只要在 {{domxref("MediaQueryList")}} 对象上使用 <code>addListener()</code> 方法，并使用一个回调函数作为其参数。这样，就通过实现 {{domxref("MediaQueryListListener")}} 接口指定了一个监听器。每当查询结果发生变化，比如从 <code>true</code> 变为 <code>false</code> 时，就会调用一遍传入的回调函数。</p> - -<pre class="brush: js">// 创建查询列表 -const mediaQueryList = window.matchMedia("(orientation: portrait)"); - -// 定义回调函数 -function handleOrientationChange(mql) { - // ... -} - -// 先运行一次回调函数 -handleOrientationChange(mediaQueryList); - -// 为查询列表注册监听器，同时将回调函数传给监听器 -mediaQueryList.addListener(handleOrientationChange); -</pre> - -<p>上述代码创建了一个屏幕方向的测试查询列表 <code>mediaQueryList</code>，并且添加了事件监听器。需要注意的是，当我们添加监听后，我们其实直接调用了一次监听。这会让我们的监听器以目前设备的屏幕方向来初始化判定代码。换句话说，如果我们代码中设定设备处于竖屏模式，而实际上它在启动时处于横屏模式，那么我们在后面的判定就会出现矛盾。</p> - -<p>然后，我们就能在 <code>handleOrientationChange()</code> 方法中检查查询结果，比如，可以设置屏幕方向变化后的逻辑处理代码：</p> - -<pre class="brush: js">function handleOrientationChange(evt) { - if (evt.matches) { - /* The viewport is currently in portrait orientation */ - } else { - /* The viewport is currently in landscape orientation */ - } -} -</pre> - -<h2 id="终止查询通知">终止查询通知</h2> - -<p>如果不再需要再接收媒体查询值变化的相关通知，那么，只要调用 <code>MediaQueryList</code> 的 <code>removeListener()</code> 方法，就可以方便地移除监听：</p> - -<pre class="brush: js">mediaQueryList.removeListener(handleOrientationChange); -</pre> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<h3 id="MediaQueryList_接口"><code>MediaQueryList</code> 接口</h3> - - - -<p>{{Compat("api.MediaQueryList")}}</p> - -<h2 id="另见">另见</h2> - -<ul> - <li><a href="/zh-CN/docs/CSS/Media_queries">Media queries</a></li> - <li>{{domxref("window.matchMedia()") }}</li> - <li>{{domxref("MediaQueryList") }}</li> - <li>{{domxref("MediaQueryListListener") }}</li> -</ul> 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 ---- -<p>« <a href="/en/CSS" title="CSS">CSS</a> «<a href="/en/CSS/Understanding_z-index" style="font-size: 14px; line-height: 1.5;" title="Understanding CSS z-index"><span class="title" style="display: inline !important;">理解z-index</span></a></p> -<h3 id="使用_cssxref(z-index)">使用 {{ cssxref("z-index") }}</h3> -<p>在第一个例子 <a href="/en/CSS/Understanding_z-index/Stacking_without_z-index" title="en/CSS/Understanding_z-index/Stacking_without_z-index">Stacking without z-index</a>中， 我们描述了默认的摆放顺序。 当你需要指定不同的排列顺序时， 只要给元素指定一个z-index的数值就可以了。 </p> -<p> </p> -<p><span style="font-size: 14px; line-height: 1.5;">该属性必须是整数(正负均可)， 它体现了元素在z轴的位置。 如果你对z轴体系不了解， 你也可以把它理解成“层叠”， 每个层都有一个顺序数， 顺序数大的层在上面， 小的在下面。 </span></p> -<p><strong>注意！z-index只对指定了</strong> <a href="/en/CSS/position" title="position">positioned</a><strong>属性的元素有效。</strong></p> -<ul> - <li><em>底层: 距离观察者最远</em></li> - <li>...</li> - <li> -3 层</li> - <li> -2 层</li> - <li> -1 层</li> - <li> 0 层 <em>默认层</em></li> - <li> 1 层</li> - <li> 2 层</li> - <li> 3 层</li> - <li>...</li> - <li><em>顶部: 最接近观察者</em></li> -</ul> -<div class="note"> - <p><strong>注释:</strong></p> - <ul> - <li>当没有指定z-index的时候， 所有元素都在会被渲染在默认层(0层)</li> - <li>当多个元素的z-index属性相同的时候(在同一个层里面)，那么将按照 <a href="/en/CSS/Understanding_z-index/Stacking_without_z-index" title="Stacking without z-index">Stacking without z-index</a> 中描述的规则进行布局。 </li> - </ul> -</div> -<p>在下一个例子中， 所有的层都是用z-index进行排序的。 元素div#5 的z-index无效， 因为他没有被指定position属性。 </p> -<p><img alt="Example of stacking rules modified using z-index" class="internal" src="/@api/deki/files/912/=Understanding_zindex_03.png"></p> -<h3 id="Example_source_code"><strong>Example source code</strong></h3> -<pre class="brush: 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 { - 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> -</pre> -<h3 id="See_also">See also</h3> -<ul> - <li><a href="/en/CSS/Understanding_z-index/Stacking_without_z-index" title="en/CSS/Understanding_z-index/Stacking_without_z-index">Stacking without z-index</a> : Default stacking rules</li> - <li><a href="/en/CSS/Understanding_z-index/Stacking_and_float" title="en/CSS/Understanding_z-index/Stacking_and_float">Stacking and float</a> : How floating elements are handled</li> - <li><a href="/en/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">The stacking context</a> : Notes on the stacking context</li> - <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_1" title="en/CSS/Understanding_z-index/Stacking_context_example_1">Stacking context example 1</a> : 2-level HTML hierarchy, z-index on the last level</li> - <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_2" title="en/CSS/Understanding_z-index/Stacking_context_example_2">Stacking context example 2</a> : 2-level HTML hierarchy, z-index on all levels</li> - <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_3" title="en/CSS/Understanding_z-index/Stacking_context_example_3">Stacking context example 3</a> : 3-level HTML hierarchy, z-index on the second level</li> -</ul> -<div class="originaldocinfo"> - <h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3> - <ul> - <li>Author(s): Paolo Lombardi</li> - <li>This article is the english translation of an article I wrote in italian for <a class="external" href="http://www.yappy.it">YappY</a>. I grant the right to share all the content under <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li> - <li>Last Updated Date: July 9th, 2005</li> - </ul> -</div> -<p>{{ languages( { "fr": "fr/CSS/Comprendre_z-index/Ajout_de_z-index" } ) }}</p> 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 ---- -<p>{{cssref}}</p> - -<p><span style="line-height: inherit;">通常情况下，<a href="/zh-CN/docs/Glossary/HTML">HTML</a>页面可以被认为是二维的，因为文本，图像和其他元素被排列在页面上而不重叠。在这种情况下，只有一个渲染进程，所有元素都知道其他元素所占用的空间。 </span>{{cssxref("z-index")}}<span style="line-height: inherit;">属性可让你在渲染内容时调整对象分层的顺序。</span></p> - -<blockquote> -<p><em>在 CSS 2.1 中, 所有的盒模型元素都处于三维坐标系中。 除了我们常用的横坐标和纵坐标， 盒模型元素还可以沿着“z 轴”层叠摆放， 当他们相互覆盖时， z 轴顺序就变得十分重要。</em></p> -</blockquote> - -<p>(参见 <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#z-index">CSS 2.1 Section 9.9.1 - Layered presentation</a>)</p> - -<p>这意味着其实 CSS 允许你在现有的渲染引擎上层叠的摆放盒模型元素。 所有的层都可以用一个整数( z 轴顺序)来表明当前层在 z 轴的位置。 数字越大， 元素越接近观察者。Z 轴顺序用 CSS 的 <span style="line-height: inherit;">{{ cssxref("z-index") }} 属性来指定。</span></p> - -<p>使用 <code>z-index</code> 很简单： 给它指定一个整数值即可。 然而，在层叠比较复杂的 HTML 元素上使用 <code>z-index</code> 时，结果可能让人觉得困惑，甚至不可思议。 这是由复杂的元素排布规则导致的。 更多细节请参见 <span style="line-height: inherit;"> </span><a class="external" href="http://www.w3.org/TR/CSS21/zindex.html" style="line-height: inherit;">CSS-2.1 Appendix E</a> 。</p> - -<p>本文将通过一些简单的例子来解释这些规则。</p> - -<ol> - <li><a href="/zh-CN/docs/Web/Guide/CSS/Understanding_z_index/Stacking_without_z-index" title="zh-CN/CSS/Understanding_z-index/Stacking_without_z-index">Stacking without z-index</a> : 默认的摆放规则，即不含有 z-index 属性时</li> - <li><a href="/zh-CN/CSS/Understanding_z-index/Stacking_and_float" title="zh-CN/CSS/Understanding_z-index/Stacking_and_float">Stacking and float</a> : 浮动元素的处理方式</li> - <li><a href="/zh-CN/CSS/Understanding_z-index/Adding_z-index" title="zh-CN/CSS/Understanding_z-index/Adding_z-index">Adding z-index</a> : 使用 z-index 来改变堆放顺序</li> - <li><a href="/zh-CN/CSS/Understanding_z-index/The_stacking_context" title="zh-CN/CSS/Understanding_z-index/The_stacking_context">The stacking context</a> : 内容堆放注意事项</li> - <li><a href="/zh-TW/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1" title="zh-CN/CSS/Understanding_z-index/Stacking_context_example_1">Stacking context example 1</a> : 在两层元素的第二层上使用 z-index</li> - <li><a href="/zh-CN/docs/Web/Guide/CSS/Understanding_z_index/Stacking_context_example_2" title="zh-CN/CSS/Understanding_z-index/Stacking_context_example_2">Stacking context example 2</a> : 在两层元素的所有层上使用 z-index</li> - <li><a href="/zh-CN/docs/Web/Guide/CSS/Understanding_z_index/Stacking_context_example_3" title="zh-CN/CSS/Understanding_z-index/Stacking_context_example_3">Stacking context example 3</a> : 在三层元素的第二层上使用 z-index</li> -</ol> - -<div class="originaldocinfo"> -<p> </p> - -<h2 id="Original_Document_Information" name="Original_Document_Information">原始文档信息</h2> - -<p> </p> - -<ul> - <li>作者: Paolo Lombardi</li> - <li>This article is the English translation of an article I wrote in Italian for <a class="external" href="http://www.yappy.it">YappY</a>. I grant the right to share all the content under <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li> - <li>上次更新时间: 2005年7月9日</li> -</ul> -</div> 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 ---- -<p>« <a href="/zh-CN/CSS" title="CSS">CSS</a> « <a href="/zh-CN/CSS/Understanding_z-index" title="Understanding CSS z-index"><span class="title">理解 CSS 中的 z-index</span></a></p> - -<h3 id="层叠与浮动">层叠与浮动</h3> - -<p>对于浮动的块元素来说，层叠顺序变得有些不同。浮动块元素被放置于非定位块元素与定位块元素之间：</p> - -<ol> - <li>根元素的背景与边框</li> - <li>位于普通流中的后代块元素按照它们在 HTML 中出现的顺序层叠</li> - <li>浮动块元素</li> - <li>后代中的定位元素按照它们在 HTML 中出现的顺序层叠</li> -</ol> - -<p>实际上，在接下来的例子中你会看到，非定位块元素(DIV #4)的背景与边框丝毫不会受到浮动块元素的影响，但内容却恰恰相反。出现这种情况是由于 CSS 的标准浮动行为引起的。</p> - -<p>这种行为可以通过前一章列表的改进版本来解释：</p> - -<ol> - <li>根元素的背景与边框</li> - <li>位于普通流中的后代块元素按照它们在 HTML 中出现的顺序层叠</li> - <li>浮动块元素</li> - <li>常规流中的后代行内元素</li> - <li>后代中的定位元素按照它们在 HTML 中出现的顺序层叠</li> -</ol> - -<div class="note"><strong>注意：</strong> 在下面的例子中，除了非定位的那个块元素外，所有的块元素都是半透明的，以便来显示层叠顺序。如果减少非定位元素(DIV #4)的透明度，会发生很诡异的事情：该元素的背景和边框会出现在浮动块元素上方，但是仍然处于定位元素的下方。我不能确定这是规范的 bug 或是怪异的解析。(设置透明度会隐式的创建一个层叠上下文。)</div> - -<p>{{ EmbedLiveSample('该示例的源码', '563', '255', '', 'Web/Guide/CSS/Understanding_z_index/Stacking_and_float') }}</p> - -<h3 id="该示例的源码"><strong>该示例的源码</strong></h3> - -<pre class="brush: html"><!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> -</pre> - -<h3 id="相关链接">相关链接</h3> - -<ul> - <li><a href="/zh-CN/CSS/Understanding_z-index/Stacking_without_z-index" title="zh-CN/CSS/Understanding_z-index/Stacking_without_z-index">未使用 z-index 的层叠</a>：默认层叠规则</li> - <li><a href="/zh-CN/CSS/Understanding_z-index/Adding_z-index" title="zh-CN/CSS/Understanding_z-index/Adding_z-index">使用 z-index 的层叠</a>： 使用 z-index 来改变默认层叠顺序</li> - <li><a href="/zh-CN/CSS/Understanding_z-index/The_stacking_context" title="zh-CN/CSS/Understanding_z-index/The_stacking_context">层叠上下文</a>：关于层叠上下文的注意事项</li> - <li><a href="/zh-CN/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1" title="zh-CN/CSS/Understanding_z-index/Stacking_context_example_1">层叠上下文示例 1</a>：两层嵌套标签的 HTML 中，z-index 作用在内层标签上</li> - <li><a href="/zh-CN/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2" title="zh-CN/CSS/Understanding_z-index/Stacking_context_example_2">层叠上下文示例 2</a>：两层嵌套标签的 HTML 中，z-index 作用在内外层标签上</li> - <li><a href="/zh-CN/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3" title="zh-CN/CSS/Understanding_z-index/Stacking_context_example_3">层叠上下文示例 3</a>：三层嵌套标签的 HTML 中，z-index 作用在中间层标签上</li> -</ul> - -<div class="originaldocinfo"> -<h3 id="Original_Document_Information" name="Original_Document_Information">原始文档信息</h3> - -<ul> - <li>作者: Paolo Lombardi</li> - <li>该文档的英文原始版本是从我为 <a class="external" href="http://www.yappy.it">YappY</a> 写的意大利文章翻译而来的，该文章版权为 <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li> - <li>上次更新于：2014 年 11 月 3 日</li> -</ul> -</div> - -<p> </p> 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 ---- -<p>« <a href="/en/CSS" title="CSS">CSS</a> « <a href="/en/CSS/Understanding_z-index" title="Understanding CSS z-index">Understanding CSS z-index</a></p> - -<h3 id="Stacking_context_层叠上下文_例子_1">Stacking context 层叠上下文 例子 1</h3> - -<p>先看一个基础的例子。在根元素的层叠上下文中，有两个都是相对定位且没有设置 <code>z-index</code> 属性的 DIV（DIV #1 和 DIV #3）。在 DIV #1 中有一个绝对定位的 DIV #2，而在 DIV #3 中有一个绝对定位的 DIV #4，DIV #2 和 DIV #4 也都没有设置 <code>z-index</code> 属性。</p> - -<p>现在唯一的层叠上下文就是根元素的上下文。因为没有 <code>z-index</code> 值，所有的元素按照出现（在 HTML 中）的顺序层叠。</p> - -<p><img alt="Stacking context example 1" class="internal" src="/@api/deki/files/914/=Understanding_zindex_05a.png"></p> - -<p>如果给 DIV #2 设置一个正的 <code>z-index</code> 值 (不能是 <code>0</code> 或 <code>auto</code>) ，那么 DIV #2 会渲染在其他所有 DIV 之上。</p> - -<p><img alt="Stacking context example 1" class="internal" src="/@api/deki/files/915/=Understanding_zindex_05b.png"></p> - -<p>然后如果给 DIV #4 也设置一个正的 <code>z-index</code> 值，且这个值比给的 DIV #2 设置的值要大，则 DIV #4 会渲染在其他所有 DIV（包括 DIV #2）之上。</p> - -<p><img alt="Stacking context example 1" class="internal" src="/@api/deki/files/916/=Understanding_zindex_05c.png"></p> - -<p>在这个列子中，DIV #2 和 DIV #4 不是兄弟关系（因为它们的父元素不同）。即便如此，我们也可以通过 <code>z-index</code> 来控制 DIV #4 和 DIV #2 的层叠关系。这是因为，DIV #1 和 DIV #3 没有设置 <code>z-index</code> 的值，所以它们不会创建层叠上下文。这就意味着 DIV #1 和 DIV #3 的所有内容（包括 DIV #2 和 DIV #4）都属于同一个层叠上下文（即根元素的层叠上下文）。</p> - -<p>就层叠上下文而言，DIV #1 和 DIV #3 隶属于根元素，因此层次结构如下所示：</p> - -<ul> - <li>根层叠上下文（root stacking context） - <ul> - <li>DIV #2 (z-index 1)</li> - <li>DIV #4 (z-index 2)</li> - </ul> - </li> -</ul> - -<div class="note"><strong>注意：</strong> DIV #1 和 DIV #3 不是透明的。记住所有设置了 opacity 小于 1 的定位元素都会隐式地生成一个层叠上下文（和给元素增加一个 z-index 值的效果相同）。上述的例子是为了说明，当父元素没有生成一个层叠上下文环境的时候，各元素是怎么层叠的。</div> - -<h2 id="Example"><strong>Example</strong></h2> - -<h3 id="HTML"><strong>HTML</strong></h3> - -<pre class="brush: 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> -</pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: 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; -}</pre> - -<h3 id="Result">Result</h3> - -<p>{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1') }}</p> - -<h3 id="See_also">See also</h3> - -<ul> - <li><a href="/en/CSS/Understanding_z-index/Stacking_without_z-index" title="en/CSS/Understanding_z-index/Stacking_without_z-index">Stacking without z-index</a> : Default stacking rules</li> - <li><a href="/en/CSS/Understanding_z-index/Stacking_and_float" title="en/CSS/Understanding_z-index/Stacking_and_float">Stacking and float</a> : How floating elements are handled</li> - <li><a href="/en/CSS/Understanding_z-index/Adding_z-index" title="en/CSS/Understanding_z-index/Adding_z-index">Adding z-index</a> : Using z-index to change default stacking</li> - <li><a href="/en/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">The stacking context</a> : Notes on the stacking context</li> - <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_2" title="en/CSS/Understanding_z-index/Stacking_context_example_2">Stacking context example 2</a> : 2-level HTML hierarchy, z-index on all levels</li> - <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_3" title="en/CSS/Understanding_z-index/Stacking_context_example_3">Stacking context example 3</a> : 3-level HTML hierarchy, z-index on the second level<span id="cke_bm_89E" style="display: none;"> </span></li> -</ul> - -<div class="originaldocinfo"> -<h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3> - -<ul> - <li>Author(s): Paolo Lombardi</li> - <li>This article is the english translation of an article I wrote in italian for <a class="external" href="http://www.yappy.it">YappY</a>. I grant the right to share all the content under <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li> - <li>Last Updated Date: July 9th, 2005</li> -</ul> -</div> 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 ---- -<p>« <a href="/en/CSS" title="CSS">CSS</a> «<a href="/en/CSS/Understanding_z-index" title="Understanding CSS z-index"> 理解CSS z-index</a></p> - -<h3 id="层叠上下文示例_2">层叠上下文示例 2</h3> - -<p>这是一个非常简单的例子, 但它是理解层叠上下文这个概念的关键。还是和之前的例子中一样的四个DIV，不过现在z-index属性被分配在两个水平的层次结构中。</p> - -<p>{{ EmbedLiveSample('Example_source_code', '352', '270', '', 'Web/Guide/CSS/Understanding_z_index/Stacking_context_example_2') }}</p> - -<p>可以看到现在DIV #2 (z-index: 2)在DIV #3 (z-index: 1)的上面，因为他们都属于同一个层叠上下文（根元素创建的层叠上下文），所以z-index的值决定了元素如何叠放。</p> - -<p>奇怪的是DIV #2 (z-index: 2)在DIV #4 (z-index: 10)的上面，尽管DIV #2的z-index值小于DIV #4。原因在于它们不属于同一个层叠上下文。DIV #4处于DIV #3所创建的层叠上下文中，而整个DIV #3（包含其后代元素）是在DIV #2下面的。</p> - -<p>为了更好的理解这种情况, 这里列出了层叠上下文的层次结构:</p> - -<ul> - <li>根上下文（root stacking context） - <ul> - <li>DIV #2 (z-index 2)</li> - <li>DIV #3 (z-index 1) - <ul> - <li>DIV #4 (z-index 10)</li> - </ul> - </li> - </ul> - </li> -</ul> - -<div class="note"><strong>Note:</strong> 值得记住的是，通常HTML的层次结构和层叠上下文的层次结构是不同的。在层叠上下文的层次结构中，没有创建层叠上下文的元素同其父级处于一个层叠上下文。</div> - -<h3 id="示例源码"><strong>示例源码</strong></h3> - -<pre class="brush: 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> -</pre> - -<h3 id="相关文章">相关文章</h3> - -<ul> - <li><a href="/en/CSS/Understanding_z-index/Stacking_without_z-index" title="en/CSS/Understanding_z-index/Stacking_without_z-index">Stacking without z-index</a> : Default stacking rules</li> - <li><a href="/en/CSS/Understanding_z-index/Stacking_and_float" title="en/CSS/Understanding_z-index/Stacking_and_float">Stacking and float</a> : How floating elements are handled</li> - <li><a href="/en/CSS/Understanding_z-index/Adding_z-index" title="en/CSS/Understanding_z-index/Adding_z-index">Adding z-index</a> : Using z-index to change default stacking</li> - <li><a href="/en/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">The stacking context</a> : Notes on the stacking context</li> - <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_1" title="en/CSS/Understanding_z-index/Stacking_context_example_1">Stacking context example 1</a> : 2-level HTML hierarchy, z-index on the last level</li> - <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_3" title="en/CSS/Understanding_z-index/Stacking_context_example_3">Stacking context example 3</a> : 3-level HTML hierarchy, z-index on the second level</li> -</ul> - -<div class="originaldocinfo"> -<h3 id="Original_Document_Information" name="Original_Document_Information">原文信息</h3> - -<ul> - <li>Author(s): Paolo Lombardi</li> - <li>This article is the english translation of an article I wrote in italian for <a class="external" href="http://www.yappy.it">YappY</a>. I grant the right to share all the content under <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li> - <li>Last Updated Date: July 9th, 2005</li> -</ul> -</div> - -<p> </p> 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 ---- -<p>« <a href="/en/CSS" title="CSS">CSS</a> « <a href="/en/CSS/Understanding_z-index" title="Understanding CSS z-index">Understanding CSS z-index</a></p> - -<h3 id="层叠上下文示例_3">层叠上下文示例 3</h3> - -<p>最后一个例子展示了，在多层级的HTML结构中混合了多个定位元素且使用类选择器设置z-index属性时出现的问题。</p> - -<p>我们来看一个用多个定位的div实现的三级菜单的例子，二级菜单和三级菜单在鼠标悬停或点击其父元素时才出现，通常这样的菜单在客户端和服务端都是由脚本生成的，所以样式规则不是通过ID选择器设置而是通过类选择器设置。</p> - -<p>如果这个三级菜单有部分区域重叠，管理层叠顺序就会成为一个问题。</p> - -<p>{{ EmbedLiveSample('Example_source_code', '320', '330', '', 'Web/Guide/CSS/Understanding_z_index/Stacking_context_example_3') }}</p> - - - -<p>一级菜单仅仅是相对定位，所以没有创建层叠上下文。</p> - -<p>二级菜单相对其父元素（一级菜单）绝对定位，要使二级菜单在所有一级菜单的上方，则需要使用z-index。此时每个二级菜单都创建了一个层叠上下文，而三级菜单也处于其父元素（二级菜单）创建的上下文中。</p> - -<p>这样一来，在HTML结构中处于三级菜单后面的二级菜单，则会显示在三级菜单的上方，因为所有的二级菜单都使用了同样的z-index值，所以处于同一个层叠上下文中。</p> - -<p>为了能更好地理解这种情况，这里列出了层叠上下文的层次结构:</p> - -<ul> - <li>root stacking context - <ul> - <li>LEVEL #1 - <ul> - <li>LEVEL #2 (z-index: 1) - <ul> - <li>LEVEL #3</li> - <li>...</li> - <li>LEVEL #3</li> - </ul> - </li> - <li>LEVEL #2 (z-index: 1)</li> - <li>...</li> - <li>LEVEL #2 (z-index: 1)</li> - </ul> - </li> - <li>LEVEL #1</li> - <li>...</li> - <li>LEVEL #1</li> - </ul> - </li> -</ul> - -<p>可以通过移除不同级别的菜单之间的重叠，或者使用ID选择器指定独立的（不同的）z-index值，或者减少HTML的层级来解决这个问题。</p> - -<div class="note"><strong>Note:</strong> 在源码中你会看到三级菜单和二级菜单是由一个绝对定位元素包含很多div来实现的，这种方式在需要同时定位一组元素时很有用。</div> - -<h3 id="示例源码"><strong>示例源码</strong></h3> - -<pre class="brush: 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; } - -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> -</pre> - -<h3 id="相关文章">相关文章</h3> - -<ul> - <li><a href="/en/CSS/Understanding_z-index/Stacking_without_z-index" title="en/CSS/Understanding_z-index/Stacking_without_z-index">Stacking without z-index</a> : Default stacking rules</li> - <li><a href="/en/CSS/Understanding_z-index/Stacking_and_float" title="en/CSS/Understanding_z-index/Stacking_and_float">Stacking and float</a> : How floating elements are handled</li> - <li><a href="/en/CSS/Understanding_z-index/Adding_z-index" title="en/CSS/Understanding_z-index/Adding_z-index">Adding z-index</a> : Using z-index to change default stacking</li> - <li><a href="/en/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">The stacking context</a> : Notes on the stacking context</li> - <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_1" title="en/CSS/Understanding_z-index/Stacking_context_example_1">Stacking context example 1</a> : 2-level HTML hierarchy, z-index on the last level</li> - <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_2" title="en/CSS/Understanding_z-index/Stacking_context_example_2">Stacking context example 2</a> : 2-level HTML hierarchy, z-index on all levels</li> -</ul> - -<div class="originaldocinfo"> -<h3 id="Original_Document_Information" name="Original_Document_Information">原文信息</h3> - -<ul> - <li>Author(s): Paolo Lombardi</li> - <li>This article is the english translation of an article I wrote in italian for <a class="external" href="http://www.yappy.it">YappY</a>. I grant the right to share all the content under <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li> - <li>Last Updated Date: July 9th, 2005</li> -</ul> -</div> - -<p><strong>Note</strong>: 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.</p> 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 ---- -<p style="height: 15px;">« <a href="/zh-CN/CSS" title="CSS">CSS</a> « <a href="/zh-CN/CSS/Understanding_z-index" title="Understanding CSS z-index"><span class="title">理解 CSS z-index</span></a></p> - -<h3 id="不含z-index的堆叠">不含z-index的堆叠</h3> - -<p>当没有元素包含z-index属性时，元素按照如下顺序堆叠（从底到顶顺序）：</p> - -<ol> - <li>根元素的背景和边界</li> - <li>普通流(无定位)里的块元素(没有position或者position:static;)按HTML中的出现顺序堆叠</li> - <li>定位元素按HTML中的出现顺序堆叠</li> -</ol> - -<p>在接下来的例子中，相对和绝对定位的块元素的大小和位置刚好说明上述堆叠规则。</p> - -<div class="note"> -<p><strong>Notes:</strong></p> - -<ul> - <li>在一组由不含有任何z-index属性的同类元素，如例子中的定位块元素（DIV #1 至 #4），这些元素按照它们在HTML结构中出现的顺序堆叠，而不管它们的定位属性如何。</li> - <li> - <p>普通流中不含有定位属性的标准块元素（DIV #5）始终先于定位元素渲染并出现在定位元素的下层，即便它们在HTML结构中出现的位置晚于定位元素也是如此。</p> - </li> -</ul> -</div> - -<p><img alt="understanding_zindex_01.png" class="default internal" src="/@api/deki/files/910/=understanding_zindex_01.png"></p> - -<p> </p> - -<h3 id="Example" name="Example">示例</h3> - -<pre class="brush: 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; } - -#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> - -</pre> - -<h3 id="See_also">See also</h3> - -<ul> - <li><a href="/zh-CN/CSS/Understanding_z-index/Stacking_and_float" title="en/CSS/Understanding_z-index/Stacking_and_float">堆叠与浮动</a> : 浮动元素的处理方式</li> - <li><a href="/zh-CN/CSS/Understanding_z-index/Adding_z-index" title="en/CSS/Understanding_z-index/Adding_z-index">增加 z-index</a> : 使用z-index来改变堆放顺序</li> - <li><a href="/zh-CN/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">堆叠上下文</a> : 堆叠上下文的注意事项</li> - <li><a href="/zh-CN/CSS/Understanding_z-index/Stacking_context_example_1" title="en/CSS/Understanding_z-index/Stacking_context_example_1">堆叠上下文示例 1</a> : 在两层元素的第二层上使用 z-index</li> - <li><a href="/zh-CN/CSS/Understanding_z-index/Stacking_context_example_2" title="en/CSS/Understanding_z-index/Stacking_context_example_2">堆叠上下文示例 2</a> : 在两层元素的所有层上使用 z-index</li> - <li><a href="/zh-CN/CSS/Understanding_z-index/Stacking_context_example_3" title="en/CSS/Understanding_z-index/Stacking_context_example_3">堆叠上下文示例 3</a> : 在三层元素的第二层上使用 z-index<span id="cke_bm_94E" style="display: none;"> </span></li> -</ul> - -<p> </p> - -<div class="originaldocinfo"> -<h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3> - -<ul> - <li>Author(s): Paolo Lombardi</li> - <li>This article is the english translation of an article I wrote in italian for <a class="external" href="http://www.yappy.it">YappY</a>. I grant the right to share all the content under <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li> - <li>Last Updated Date: July 9th, 2005</li> -</ul> -</div> - -<p>{{ languages( { "fr": "fr/CSS/Comprendre_z-index/Empilement_sans_z-index" } ) }}</p> 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 ---- -<div>{{cssref}}</div> - -<p>我们假定用户正面向（浏览器）视窗或网页，而 HTML 元素沿着其相对于用户的一条虚构的 z 轴排开，<strong>层叠上下文</strong>就是对这些 HTML 元素的一个三维构想。众 HTML 元素基于其元素属性按照优先级顺序占据这个空间。</p> - -<h2 id="层叠上下文">层叠上下文</h2> - -<p>在本篇之前的部分——<a href="/en-US/docs/CSS/Understanding_z-index/Adding_z-index" style="line-height: 1.5;" title="Adding z-index">运用 z-index</a><span style="line-height: 1.5;">，（我们认识到）某些元素</span><span style="line-height: 1.5;">的渲染顺序是由其 <code>z-index</code> 的值影响的。</span>这是因为这些元素具有能够使他们形成一个<em>层叠上下文</em>的特殊属性<em>。</em></p> - -<p>文档中的层叠上下文由满足以下任意一个条件的元素形成：</p> - -<ul> - <li>文档根元素（<code><html></code>）；</li> - <li>{{cssxref("position")}} 值为 <code>absolute</code>（绝对定位）或 <code>relative</code>（相对定位）且 {{cssxref("z-index")}} 值不为 <code>auto</code> 的元素；</li> - <li>{{cssxref("position")}} 值为 <code>fixed</code>（固定定位）或 <code>sticky</code>（粘滞定位）的元素（沾滞定位适配所有移动设备上的浏览器，但老的桌面浏览器不支持）；</li> - <li>flex ({{cssxref("flexbox")}}) 容器的子元素，且 {{cssxref("z-index")}} 值不为 <code>auto</code>；</li> - <li>grid ({{cssxref("grid")}}) 容器的子元素，且 {{cssxref("z-index")}} 值不为 <code>auto</code>；</li> - <li>{{cssxref("opacity")}} 属性值小于 <code>1</code> 的元素（参见 <a href="http://www.w3.org/TR/css3-color/#transparency" title="http://www.w3.org/TR/css3-color/#transparency">the specification for opacity</a>）；</li> - <li>{{cssxref("mix-blend-mode")}} 属性值不为 <code>normal</code> 的元素；</li> - <li>以下任意属性值不为 <code>none</code> 的元素： - <ul> - <li>{{cssxref("transform")}}</li> - <li>{{cssxref("filter")}}</li> - <li>{{cssxref("perspective")}}</li> - <li>{{cssxref("clip-path")}}</li> - <li>{{cssxref("mask")}} / {{cssxref("mask-image")}} / {{cssxref("mask-border")}}</li> - </ul> - </li> - <li>{{cssxref("isolation")}} 属性值为 <code>isolate</code> 的元素；</li> - <li>{{cssxref("-webkit-overflow-scrolling")}} 属性值为 <code>touch</code> 的元素；</li> - <li>{{cssxref("will-change")}} 值设定了任一属性而该属性在 non-initial 值时会创建层叠上下文的元素（参考<a href="http://dev.opera.com/articles/css-will-change-property/">这篇文章</a>）；</li> - <li>{{cssxref("contain")}} 属性值为 <code>layout</code>、<code>paint</code> 或包含它们其中之一的合成值（比如 <code>contain: strict</code>、<code>contain: content</code>）的元素。</li> -</ul> - -<p>在层叠上下文中，子元素同样也按照上面解释的规则进行层叠。 重要的是，其子级层叠上下文的 <code>z-index</code> 值只在父级中才有意义。子级层叠上下文被自动视为父级层叠上下文的一个独立单元。</p> - -<p>总结:</p> - -<ul> - <li>层叠上下文可以包含在其他层叠上下文中，并且一起创建一个层叠上下文的层级。</li> - <li>每个层叠上下文都完全独立于它的兄弟元素：当处理层叠时只考虑子元素。</li> - <li>每个层叠上下文都是自包含的：当一个元素的内容发生层叠后，该元素将被作为整体在父级层叠上下文中按顺序进行层叠。</li> -</ul> - -<div class="note"><strong>Note:</strong> 层叠上下文的层级是 HTML 元素层级的一个子级，因为只有某些元素才会创建层叠上下文。可以这样说，没有创建自己的层叠上下文的元素会被父层叠上下文<em>同化</em>。</div> - -<h2 id="示例">示例</h2> - -<p><img alt="Example of stacking rules modified using z-index" src="/@api/deki/files/913/=Understanding_zindex_04.png"></p> - -<p>在这个例子中，每个被定位的元素都创建了独自的层叠上下文，因为他们被指定了定位属性和 <code>z-index</code> 值。我们把层叠上下文的层级列在下面：</p> - -<ul> - <li>Root - <ul> - <li>DIV #1</li> - <li>DIV #2</li> - <li>DIV #3 - <ul> - <li>DIV #4</li> - <li>DIV #5</li> - <li>DIV #6</li> - </ul> - </li> - </ul> - </li> -</ul> - -<p>请一定要注意 DIV #4，DIV #5 和 DIV #6 是 DIV #3 的子元素，所以它们的层叠完全在 DIV #3 中被处理。一旦 DIV #3 中的层叠和渲染处理完成，DIV #3 元素就被作为一个整体传递与兄弟元素的 DIV 在 root（根）元素进行层叠。</p> - -<div class="note"> -<p><strong>注意：</strong></p> - -<ul> - <li>DIV #4 被渲染在 DIV #1 之下，因为 DIV #1 的 z-index (5) 在 root 元素的层叠上下文中生效，而 DIV #4 的 z-index (6) 在 DIV #3 的层叠上下文中生效。因此，DIV #4 在 DIV #1 之下，因为 DIV #4 归属于 z-index 值较低的 DIV #3 元素。</li> - <li>由此可得 DIV #2 (z-index 2) 被渲染在 DIV #5 (z-index 1) 之下，因为 DIV #5 归属于 z-index 较高的 DIV #3 元素。</li> - <li>DIV #3 的 z-index 值是 4，但是这个值独立于 DIV #4，DIV #5 和 DIV #6 的 z-index 值，因为他们从属于不同的层叠上下文。</li> - <li>分辨出层叠的元素在 Z 轴上的<em>渲染顺序</em>的一个简单方法是将它们想象成一系列的版本号，子元素是其父元素版本号之下的次要版本。通过这个方法我们可以轻松地看出为什么一个 z-index 为 1 的元素（DIV #5）层叠于一个 z-index 为 2 的元素（DIV #2）之上，而一个 z-index 为 6 的元素（DIV #4）层叠于 z-index 为 5 的元素（DIV #1）之下。在我们的例子中（依照最终渲染次序排列）： - <ul> - <li>Root - <ul> - <li>DIV #2 - z-index 为 2</li> - <li>DIV #3 - z-index 为 4 - <ul> - <li>DIV #5 - z-index 为 1，在一个 z-index 为 4 的元素内层叠，所以渲染次序为 4.1</li> - <li>DIV #6 - z-index 为 3，在一个 z-index 为 4 的元素内层叠，所以渲染次序为 4.3</li> - <li>DIV #4 - z-index 为 6，在一个 z-index 为 4 的元素内层叠，所以渲染次序为 4.6</li> - </ul> - </li> - <li>DIV #1 - z-index 为 5</li> - </ul> - </li> - </ul> - </li> -</ul> -</div> - -<h2 id="示例源码">示例源码</h2> - -<h3 id="HTML">HTML</h3> - -<pre><code><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></code></pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: 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; -}</pre> - -<h3 id="Result">Result</h3> - -<p>{{EmbedLiveSample('示例源码', '100%', '396') }}</p> - -<h2 id="参考">参考</h2> - -<ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index">Stacking without the z-index property</a>: The stacking rules that apply when <code>z-index</code> is not used.</li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float">Stacking with floated blocks</a>: How floating elements are handled with stacking.</li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index">Using z-index</a>: How to use <code>z-index</code> to change default stacking.</li> - <li><a href="/en-US/docs/CSS/Understanding_z-index/Stacking_context_example_1" title="CSS/Understanding_z-index/Stacking_context_example_1">Stacking context example 1</a> : 2-level HTML hierarchy, z-index on the last level</li> - <li><a href="/en-US/docs/CSS/Understanding_z-index/Stacking_context_example_2" title="CSS/Understanding_z-index/Stacking_context_example_2">Stacking context example 2</a> : 2-level HTML hierarchy, z-index on all levels</li> - <li><a href="/en-US/docs/CSS/Understanding_z-index/Stacking_context_example_3" title="CSS/Understanding_z-index/Stacking_context_example_3">Stacking context example 3</a> : 3-level HTML hierarchy, z-index on the second level</li> -</ul> - -<div class="originaldocinfo"> -<h2 id="Original_Document_Information" name="Original_Document_Information">原始文档信息</h2> - -<ul> - <li>作者: Paolo Lombardi</li> - <li>此文是我用意大利语写给 <a href="http://www.yappy.it">YappY</a> 的英文版本。我授权以 <a href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license </a>将所有内容分享。</li> - <li>上次更新时间: July 9th, 2005</li> -</ul> -</div> 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 ---- -<div>{{CSSRef}}</div> - -<p><strong>CSS 渐变</strong> {{cssxref("<image>")}} 类型的一种特殊类型 {{cssxref("<gradient>")}} 表示，由两种或多种颜色之间的渐进过渡组成。您可以选择三种类型的渐变：线性 (由 {{cssxref("linear-gradient")}} 函数创建)，径向(由 {{cssxref("radial-gradient")}} 函数创建) 和圆锥 (由 {{cssxref("conic-gradient")}} 函数创建)。您还可以使用 {{cssxref("repeating-linear-gradient")}} 和 {{cssxref("repeating-radial-gradient")}} 函数创建重复渐变。</p> - -<p>渐变可以在任何使用 <code><image></code> 的地方使用，例如在背景中。 由于渐变是动态生成的，因此它们可以消除对传统用于实现类似效果的栅格图像文件的需求。 此外，由于渐变是由浏览器生成的，因此在放大时它们看起来比栅格图像更好，并且可以动态调整大小。</p> - -<p>我们将从线性渐变开始介绍，然后以线性渐变为例介绍所有渐变类型支持的功能，然后继续介绍径向渐变，圆锥渐变和重复渐变。</p> - -<h2 id="使用线性渐变">使用线性渐变</h2> - -<p>线性渐变创建了一条沿直线前进的颜色带。</p> - -<div> -<h3 id="基础线性渐变">基础线性渐变</h3> - -<p>要创建最基本的渐变类型，您只需指定两种颜色即可。 这些被称为色标。 至少指定两个色标，也可以指定任意数量。</p> - -<div class="hidden"> -<pre class="brush: html notranslate" dir="rtl"><div class="simple-linear"></div></pre> - -<pre class="brush: css notranslate">div { - width: 120px; - height: 120px; -}</pre> -</div> - -<pre class="brush: css notranslate">.simple-linear { - background: linear-gradient(blue, pink); -}</pre> - -<p>{{ EmbedLiveSample('A_basic_linear_gradient', 120, 120) }}</p> -</div> - -<div> -<h3 id="改变渐变方向">改变渐变方向</h3> - -<p>默认情况下，线性渐变的方向是从上到下， 你可以指定一个值来改变渐变的方向。</p> - -<div class="hidden"> -<pre class="brush: html notranslate"><div class="horizontal-gradient"></div></pre> - -<pre class="brush: css notranslate">div { - width: 120px; - height: 120px; -}</pre> -</div> - -<pre class="brush: css notranslate">.horizontal-gradient { - background: linear-gradient(to right, blue, pink); -} -</pre> - -<p>{{ EmbedLiveSample('Changing_the_direction', 120, 120) }}</p> -</div> - -<div> -<h3 id="对角线渐变">对角线渐变</h3> - -<p>你甚至可以设置渐变方向为从一个对角到另一个对角。</p> - -<div class="hidden"> -<pre class="brush: html notranslate"><div class="diagonal-gradient"></div></pre> - -<pre class="brush: css notranslate">div { - width: 200px; - height: 100px; -}</pre> -</div> - -<pre class="brush: css notranslate">.diagonal-gradient { - background: linear-gradient(to bottom right, blue, pink); -} -</pre> - -<p>{{ EmbedLiveSample('Diagonal_gradients', 200, 100) }}</p> -</div> - -<div> -<h3 id="设置渐变角度">设置渐变角度</h3> - -<p>如果你想要更精确地控制渐变的方向，你可以给渐变设置一个具体的角度。</p> - -<div class="hidden"> -<pre class="brush: html notranslate"><div class="angled-gradient"></div></pre> - -<pre class="brush: css notranslate">div { - width: 120px; - height: 120px; -}</pre> -</div> - -<pre class="brush: css notranslate">.angled-gradient { - background: linear-gradient(70deg, blue, pink); -} -</pre> - -<p>{{ EmbedLiveSample('Using_angles', 120, 120) }}</p> - -<p>在使用角度的时候, <code>0deg</code> 代表渐变方向为从下到上, <code>90deg</code> 代表渐变方向为从左到右，诸如此类正角度都属于顺时针方向。 而负角度意味着逆时针方向。</p> - -<p><img alt="linear_redangles.png" class="default internal" src="/files/3811/linear_red_angles.png"></p> -</div> - -<h2 id="声明颜色和创建效果">声明颜色和创建效果</h2> - -<p>所有的CSS渐变类型都是一个位置依赖的颜色范围。CSS渐变产生的颜色可以随位置不断变化，从而产生平滑的颜色过渡。也可以创建纯色带和两种颜色之间的硬过渡。以下内容适用于所有渐变函数：</p> - -<div> -<h3 id="使用多种颜色">使用多种颜色</h3> - -<p>无需局限于使用两种颜色，你想使用多少种颜色都可以！ 默认情况下，所设置颜色会均匀分布在渐变路径中。</p> - -<div class="hidden"> -<pre class="brush: html notranslate"><div class="auto-spaced-linear-gradient"></div> -</pre> - -<pre class="brush: css notranslate">div { - width: 120px; - height: 120px; -}</pre> -</div> - -<pre class="brush: css notranslate">.auto-spaced-linear-gradient { - background: linear-gradient(red, yellow, blue, orange); -} -</pre> - -<p>{{ EmbedLiveSample('Using_more_than_two_colors', 120, 120) }}</p> -</div> - -<div> -<h3 id="颜色终止位置">颜色终止位置</h3> - -<p>你不需要让你设置的颜色在默认位置终止。 你可以通过给每个颜色设置0，1%或者2%或者其他的绝对数值来调整它们的位置。如果你将位置设置为百分数， <code>0%</code> 表示起始点, 而100%表示终点，但是如果需要的话你也可以设置这个范围之外的其他值来达到你想要的效果。如果有些位置你没有明确设置，那么它将会被自动计算，第一种颜色会在0%处停止，而最后一种颜色是100%，至于其他颜色则是在它邻近的两种颜色的中间停止。 </p> - -<div class="hidden"> -<pre class="brush: html notranslate"><div class="multicolor-linear"></div> -</pre> - -<pre class="brush: css notranslate">div { - width: 120px; - height: 120px; -}</pre> -</div> - -<pre class="brush: css notranslate">.multicolor-linear { - background: linear-gradient(to left, lime 28px, red 77%, cyan); -} -</pre> - -<p>{{ EmbedLiveSample('Positioning_color_stops', 120, 120) }}</p> -</div> - -<div> -<h3 id="创建实线">创建实线</h3> - -<p>要在两种颜色之间创建一条硬线，即创建一个条纹而不是逐渐过渡，可以将相邻的颜色停止设置为相同的位置。在此示例中，两种颜色在50%标记处共享一个颜色停止点，即渐变的一半：</p> - -<div class="hidden"> -<pre class="brush: html notranslate"><div class="striped"></div> -</pre> - -<pre class="brush: css notranslate">div { - width: 120px; - height: 120px; -}</pre> -</div> - -<pre class="brush: css notranslate">.striped { - background: linear-gradient(to bottom left, cyan 50%, palegoldenrod 50%); -}</pre> - -<p>{{ EmbedLiveSample('Creating_hard_lines', 120, 120) }}</p> -</div> - -<div> -<h3 id="渐变提示">渐变提示</h3> - -<p>默认情况下，渐变会平滑地从一种颜色过渡到另一种颜色。你可以通过设置一个值来将渐变的中心点移动到指定位置。 在如下示例中, 我们将渐变的中心点由50%设为10%。</p> - -<div class="hidden"> -<pre class="brush: html notranslate" dir="rtl"><div class="color-hint"></div> -<div class="simple-linear"></div></pre> - -<pre class="brush: css notranslate">div { - width: 120px; - height: 120px; float: left; margin-right: 10px; -}</pre> -</div> - -<pre class="brush: css notranslate">.color-hint { - background: linear-gradient(blue, 10%, pink); -} -.simple-linear { - background: linear-gradient(blue, pink); -}</pre> - -<p>{{ EmbedLiveSample('Gradient_hints', 120, 120) }}</p> -</div> - -<div> -<h3 id="创建色带和条纹">创建色带和条纹</h3> - -<p>要在渐变中包含一个实心的非过渡颜色区域，请包含颜色起止点的两个位置。颜色起止点可以有两个位置，这相当于两个连续颜色在不同位置具有相同的颜色起止点。颜色将在第一个颜色起止点时达到完全饱和，保持该饱和度到第二个颜色起止点，并通过相邻颜色起止点的第一个位置过渡到相邻颜色起止点的颜色。</p> - -<div class="hidden"> -<pre class="brush: html notranslate"><div class="multiposition-stops"></div> -<div class="multiposition-stop2"></div> -</pre> - -<pre class="brush: css notranslate">div { - width: 120px; - height: 120px; - float: left; margin-right: 10px; box-sizing: border-box; -}</pre> -</div> - -<pre class="brush: css notranslate">.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% ); -} -</pre> - -<p>{{ EmbedLiveSample('Creating_color_bands_stripes', 120, 120) }}</p> - -<p>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.</p> - -<p>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.</p> - -<p>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.</p> -</div> - -<div> -<h3 id="Controlling_the_progression_of_a_gradient">Controlling the progression of a gradient</h3> - -<p>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:</p> - -<div class="hidden"> -<pre class="brush: html notranslate"><div class="colorhint-gradient"></div> <div class="regular-progression"></div> - -</pre> - -<pre class="brush: css notranslate">div { - width: 120px; - height: 120px; - float: left; margin-right: 10px; box-sizing: border-box; -}</pre> -</div> - -<pre class="brush: css notranslate">.colorhint-gradient { - background: linear-gradient(to top, black, 20%, cyan); -} -.regular-progression { - background: linear-gradient(to top, black, cyan); -} -</pre> - -<p>{{ EmbedLiveSample('Controlling_the_progression_of_a_gradient', 120, 120) }}</p> -</div> - -<h3 id="Overlaying_gradients">Overlaying gradients</h3> - -<p>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.</p> - -<div class="hidden"> -<pre class="brush: html notranslate"><div class="layered-image"></div> -</pre> - -<pre class="brush: css notranslate">div { - width: 300px; - height: 150px; -}</pre> -</div> - -<pre class="brush: css notranslate">.layered-image { - background: linear-gradient(to right, transparent, mistyrose), - url("https://mdn.mozillademos.org/files/15525/critters.png"); -} -</pre> - -<p>{{ EmbedLiveSample('Overlaying_gradients', 300, 150) }}</p> - -<h3 id="Stacked_gradients">Stacked gradients</h3> - -<p>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.</p> - -<div class="hidden"> -<pre class="brush: html notranslate"><div class="stacked-linear"></div> -</pre> - -<pre class="brush: css notranslate">div { - width: 200px; - height: 200px; -}</pre> -</div> - -<pre class="brush: css notranslate">.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%); -} -</pre> - -<p>{{ EmbedLiveSample('Stacked_gradients', 200, 200) }}</p> - -<h2 id="Using_radial_gradients">Using radial gradients</h2> - -<p>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.</p> - -<h3 id="A_basic_radial_gradient">A basic radial gradient</h3> - -<p>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:</p> - -<div class="hidden"> -<pre class="brush: html notranslate"><div class="simple-radial"></div> -</pre> - -<pre class="brush: css notranslate">div { - width: 240px; - height: 120px; -}</pre> -</div> - -<pre class="brush: css notranslate">.simple-radial { - background: radial-gradient(red, blue); -} -</pre> - -<p>{{ EmbedLiveSample('A_basic_radial_gradient', 120, 120) }}</p> - -<h3 id="Positioning_radial_color_stops">Positioning radial color stops</h3> - -<p>Again like linear gradients, you can position each radial color stop with a percentage or absolute length.</p> - -<div class="hidden"> -<pre class="brush: html notranslate"><div class="radial-gradient"></div> -</pre> - -<pre class="brush: css notranslate">div { - width: 120px; - height: 120px; -}</pre> -</div> - -<pre class="brush: css notranslate">.radial-gradient { - background: radial-gradient(red 10px, yellow 30%, #1e90ff 50%); -} -</pre> - -<p>{{ EmbedLiveSample('Positioning_radial_color_stops', 120, 120) }}</p> - -<h3 id="Positioning_the_center_of_the_gradient">Positioning the center of the gradient</h3> - -<p>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.</p> - -<div class="hidden"> -<pre class="brush: html notranslate"><div class="radial-gradient"></div> -</pre> - -<pre class="brush: css notranslate">div { - width: 120px; - height: 240px; -}</pre> -</div> - -<pre class="brush: css notranslate">.radial-gradient { - background: radial-gradient(at 0% 30%, red 10px, yellow 30%, #1e90ff 50%); -} -</pre> - -<p>{{ EmbedLiveSample('Positioning_the_center_of_the_gradient', 120, 120) }}</p> - -<h3 id="Sizing_radial_gradients">Sizing radial gradients</h3> - -<p>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.</p> - -<h4 id="Example_closest-side_for_ellipses">Example: closest-side for ellipses</h4> - -<p>This example uses the <code>closest-side</code> 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.</p> - -<div class="hidden"> -<pre class="brush: html notranslate"><div class="radial-ellipse-side"></div> -</pre> - -<pre class="brush: css notranslate">div { - width: 240px; - height: 100px; -}</pre> -</div> - -<pre class="brush: css notranslate">.radial-ellipse-side { - background: radial-gradient(ellipse closest-side, - red, yellow 10%, #1e90ff 50%, beige); -} -</pre> - -<p>{{ EmbedLiveSample('Example_closest-side_for_ellipses', 240, 100) }}</p> - -<h4 id="Example_farthest-corner_for_ellipses">Example: farthest-corner for ellipses</h4> - -<p>This example is similar to the previous one, except that its size is specified as <code>farthest-corner</code>, 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.</p> - -<div class="hidden"> -<pre class="brush: html notranslate"><div class="radial-ellipse-far"></div> -</pre> - -<pre class="brush: css notranslate">div { - width: 240px; - height: 100px; -}</pre> -</div> - -<pre class="brush: css notranslate">.radial-ellipse-far { - background: radial-gradient(ellipse farthest-corner at 90% 90%, - red, yellow 10%, #1e90ff 50%, beige); -} -</pre> - -<p>{{ EmbedLiveSample('Example_farthest-corner_for_ellipses', 240, 100) }}</p> - -<h4 id="Example_closest-side_for_circles">Example: closest-side for circles</h4> - -<p>This example uses <code>closest-side</code>, 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.</p> - -<div class="hidden"> -<pre class="brush: html notranslate"><div class="radial-circle-close"></div> -</pre> - -<pre class="brush: css notranslate">div { - width: 240px; - height: 120px; -}</pre> -</div> - -<pre class="brush: css notranslate">.radial-circle-close { - background: radial-gradient(circle closest-side at 25% 75%, - red, yellow 10%, #1e90ff 50%, beige); -} -</pre> - -<p>{{ EmbedLiveSample('Example_closest-side_for_circles', 240, 120) }}</p> - -<h3 id="Stacked_radial_gradients">Stacked radial gradients</h3> - -<p>Just like linear gradients, you can also stack radial gradients. The first specified is on top, the last on the bottom.</p> - -<div class="hidden"> -<pre class="brush: html notranslate"><div class="stacked-radial"></div> -</pre> - -<pre class="brush: css notranslate">div { - width: 200px; - height: 200px; -}</pre> -</div> - -<pre class="brush: css notranslate">.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%; -} -</pre> - -<p>{{ EmbedLiveSample('Stacked_radial_gradients', 200, 200) }}</p> - -<h2 id="Using_repeating_gradients">Using repeating gradients</h2> - -<p>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.</p> - -<p>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.</p> - -<div> -<h3 id="Repeating_linear_gradients">Repeating linear gradients</h3> - -<p>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.</p> - -<div class="hidden"> -<pre class="brush: html notranslate"><div class="repeating-linear"></div> -</pre> - -<pre class="brush: css notranslate">div { - width: 120px; - height: 120px; -}</pre> -</div> - -<pre class="brush: css notranslate">.repeating-linear { - background: repeating-linear-gradient(-45deg, red, red 5px, blue 5px, blue 10px); -} -</pre> - -<p>{{ EmbedLiveSample('Repeating_linear_gradients', 120, 120) }}</p> -</div> - -<div> -<h3 id="Multiple_repeating_linear_gradients">Multiple repeating linear gradients</h3> - -<p>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 <a href="/en-US/docs/Web/CSS/background-size">background-sizes</a>, optionally with different <a href="/en-US/docs/Web/CSS/background-position">background-position</a> property values, for each gradient image. We are using transparency.</p> - -<p>In this case the gradient lines are 300px, 230px, and 300px long.</p> - -<div class="hidden"> -<pre class="brush: html notranslate"><div class="multi-repeating-linear"></div> -</pre> - -<pre class="brush: css notranslate">div { - width: 600px; - height: 400px; -}</pre> -</div> - -<pre class="brush: css notranslate">.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); -} -</pre> - -<p>{{ EmbedLiveSample('Multiple_repeating_linear_gradients', 600, 400) }}</p> -</div> - -<h3 id="Plaid_gradient">Plaid gradient</h3> - -<p>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:</p> - -<div class="hidden"> -<pre class="brush: html notranslate"><div class="plaid-gradient"></div></pre> - -<pre class="brush: css notranslate">div { - width: 200px; - height: 200px; -}</pre> -</div> - -<pre class="brush: css notranslate">.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); -} -</pre> - -<p>{{ EmbedLiveSample('Plaid_gradient', 200, 200) }}</p> - -<h3 id="Repeating_radial_gradients">Repeating radial gradients</h3> - -<p>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.</p> - -<div class="hidden"> -<pre class="brush: html notranslate"><div class="repeating-radial"></div> -</pre> - -<pre class="brush: css notranslate">div { - width: 120px; - height: 120px; -}</pre> -</div> - -<pre class="brush: css notranslate">.repeating-radial { - background: repeating-radial-gradient(black, black 5px, white 5px, white 10px); -} -</pre> - -<p>{{ EmbedLiveSample('Repeating_radial_gradients', 120, 120) }}</p> - -<h3 id="Multiple_repeating_radial_gradients">Multiple repeating radial gradients</h3> - -<div class="hidden"> -<pre class="brush: html notranslate"><div class="multi-target"></div> -</pre> - -<pre class="brush: css notranslate">div { - width: 250px; - height: 150px; -}</pre> -</div> - -<pre class="brush: css notranslate">.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; -} -</pre> - -<p>{{ EmbedLiveSample('Multiple_repeating_radial_gradients', 250, 150) }}</p> - -<h3 id="Plaid_gradient_2">Plaid gradient</h3> - -<p>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:</p> - -<pre class="notranslate"><div class="plaid-gradient"></div></pre> - -<pre class="notranslate">div { - width: 200px; - height: 200px; -}</pre> - -<pre class="notranslate">.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); -} -</pre> - -<p>{{ EmbedLiveSample('Plaid_gradient', 200, 200) }}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>Gradient functions: {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}}</li> - <li>Gradient-related CSS data types: {{cssxref("<gradient>")}}, {{cssxref("<image>")}}</li> - <li>Gradient-related CSS properties: {{cssxref("background")}}, {{cssxref("background-image")}}</li> - <li><a class="external" href="http://lea.verou.me/css3patterns/">CSS Gradients Patterns Gallery, by Lea Verou</a></li> - <li><a class="external" href="http://standardista.com/cssgradients">CSS3 Gradients Library, by Estelle Weyl</a></li> - <li><a href="https://cssgenerator.org/gradient-css-generator.html">Gradient CSS Generator</a></li> -</ul> 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 ---- -<p>{{CSSRef("CSS Multi-columns")}}</p> - -<p><strong>CSS多列布局 </strong>扩展<em>块布局模式</em>，以便更容易地定义多列文本。如果一行太长，人们阅读文本很麻烦; 如果眼睛从一行的终点移动到下一个行的开始需要太长时间，它们就会丢失它们所在的行。因此，为了最大限度地利用大屏幕，作者应该将宽度不等的文本列并排放置，就像报纸一样。</p> - -<p>糟糕的是如果不使用CSS和HTML在特定的位置强制换行，或者严格限制文本中允许的标记，或者夸张地使用脚本的话，这是不可能实现的。该限制通过从传统的块级布局模块中延伸出来的新的CSS属性得以解决。</p> - -<h2 id="使用多列布局">使用多列布局</h2> - -<h3 id="列计数器和宽度">列计数器和宽度</h3> - -<p>有两个CSS属性控制是否实现多列布局和显示多少列： {{ Cssxref("column-count") }} and {{ Cssxref("column-width") }}。</p> - -<p>属性 <code>column-count</code> 设置特定数量的列数。例如，</p> - -<pre class="brush: html"><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> -</pre> - -<p>会以两列的方式显示内容：(如果你正使用支持多列布局的浏览器的话):</p> - -<p style="">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</p> - -<p>属性 <code>column-width</code> 设置期望的最小列宽。如果 <code>column-count</code> 没有设置，那么浏览器就会以合适的宽度尽量显示更多的列。</p> - -<pre class="brush: html"><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> -</pre> - -<p>变成：</p> - -<p style="-moz-column-width: 20em; -webkit-column-width: 20em; 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</p> - -<p>详细细节在 <a class="external" href="http://www.w3.org/TR/css3-multicol/">CSS3规范</a> 中。</p> - -<p>在多列块中，内容会自动从一列换到另一列中。所有 HTML， CSS 和 DOM 功能在列之间都得到支持, 比如编辑和打印。</p> - -<h3 id="columns_属性简写"><code>columns</code> 属性简写</h3> - -<p>多数时候，网页设计者都会使用 {{ cssxref("column-count") }} 和 {{ cssxref("column-width") }} 的一个. 由于它们的值没有重叠，一般使用简写属性 {{ cssxref("columns") }}。例如，</p> - -<p>CSS声明 <code>column-width:12em</code> 可替换成：</p> - -<pre class="brush: html"><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> -</pre> - -<p style="-moz-column-width: 12em; -moz-columns: 12em; -webkit-columns: 12em; 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</p> - -<p>CSS声明 <code>column-count:4</code> 可替换成：</p> - -<pre class="brush: html"><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> -</pre> - -<p style="-moz-columns: 4; -webkit-columns: 4; 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</p> - -<p>CSS声明 <code>column-width:8em</code> 和 <code>column-count:12</code> 可替换成：</p> - -<pre class="brush: html"><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> -</pre> - -<p style="-moz-columns: 12 8em; -webkit-columns: 12 8em; 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</p> - -<h3 id="高度平衡">高度平衡</h3> - -<p>CSS3多列规范需要列高平衡：即，浏览器自动设置最大列高，因此每列中的内容高度大致相同。Firefox浏览器是这样的。</p> - -<p>然而，一些情况下，明确设置最大列高也是有用的，这样内容从第一列开始，尽可能多的生成列，甚至会溢出右边沿。因此，如果通过设置{{ cssxref("height") }} 或 {{ cssxref("max-height") }} 属性来限制列高，在生成新的一列之前每一列都会仅允许增加到这个高度。该模型对布局来说也更高效。</p> - -<h3 id="列间隙">列间隙</h3> - -<p>列之间有缝隙。建议值为1em。该值可通过设置多列模块的 {{ Cssxref("column-gap") }} 属性来修改：</p> - -<pre class="brush: html"><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> -</pre> - -<p style="-moz-column-width: 20em; -webkit-column-width: 20em; 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</p> - -<h2 id="优雅降级">优雅降级</h2> - -<p>多列属性会被不支持多列模型的浏览器忽略。因此，为这些浏览器创建单列结构而为支持多列的浏览器创建多列结构相对来说比较简单。</p> - -<p>注意不是所有的浏览器都支持不带前缀的属性名。为了在大多数现代浏览器中应用这种特性，每个属性必须写三次： 一次用 {{ property_prefix("-moz") }} 前缀，一次用 {{ property_prefix("-webkit") }} 前缀，一次不使用前缀</p> - -<h2 id="讨论">讨论</h2> - -<p>CSS3 多列特性能帮助网页设计者最优化使用屏幕资源。如果你是一位具有丰富想象力的开发者，你会发现多列特性更多的好处，特别是在高度平衡特性方面。</p> - -<h2 id="其它">其它</h2> - -<ul> - <li><a class="external" href="http://weblogs.mozillazine.org/roc/archives/2005/03/gecko_18_for_we.html" rel="freelink">http://weblogs.mozillazine.org/roc/a...18_for_we.html</a></li> -</ul> - -<div id="xunlei_com_thunder_helper_plugin_d462f475-c18e-46be-bd10-327458d045bd"> </div> - -<div id="xunlei_com_thunder_helper_plugin_d462f475-c18e-46be-bd10-327458d045bd"> </div> - -<div id="xunlei_com_thunder_helper_plugin_d462f475-c18e-46be-bd10-327458d045bd"> </div> 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' ---- -<p>{{CSSRef}}</p> - -<p>为了辅助标识那些指向文档特定部分链接的目标, <a class="external" href="http://www.w3.org/TR/css3-selectors/#target-pseudo">CSS3 选择器</a> 引入了<code> {{ Cssxref(":target") }} </code><a href="/en/CSS/Pseudo-classes" title="Pseudo-classes">伪类</a>. Netscape 7.1 已经在 Netscape 系列中加入了这个伪类的支持, 这一新的举措让页面作者能够辅助用户在较大的页面中定位。 </p> - -<h3 id="Picking_a_Target" name="Picking_a_Target">选择一个目标</h3> - -<p><code>{{ Cssxref(":target") }} 伪类用来指定那些包含片段标识符的 URI 的目标元素样式。</code> 例如, <code><span class="nowiki">http://developer.mozilla.org/en/docs/Using_the_:target_selector#Example</span></code> 这个 URI 包含了 <code>#Example 片段标识符。</code> 在HTML中, 标识符是元素的id或者name属性,。由于这两者位于相同的命名空间， 因此， 这个示例 URI 指向的是文档顶层的 "Example" 。</p> - -<p>假设你想修改 URI 指向的任何 h2 元素，但是又不想把样式应用到任何其它同类型的元素，那么以下示例足够简单有用：</p> - -<pre>h2:target {font-weight: bold;}</pre> - -<p>同样的，将样式应用于特定的文档片段也是可行的。这是通过使用 URI 中相同的标识符实现的。例如，要在 #Example 文档片段中加入边框，我们可以通过如下代码实现： </p> - -<pre>#Example:target {border: 1px solid black;}</pre> - -<h3 id="Targeting_the_Root_Element" name="Targeting_the_Root_Element">定位所有元素</h3> - -<p>如果想要创建应用于所有目标元素的样式，那么可以使用通用选择器：</p> - -<pre>:target {color: red;} -</pre> - -<h3 id="Example" name="Example">示例</h3> - -<p>在以下示例中， 5个链接指向了同一文档中的元素。例如，选择 "First" 链接会导致<code> <h1 id="one"> </code>成为目标元素。 注意，由于目标元素有可能会被放置到浏览器窗口的顶层，因此文档可能会跳到新的滚动位置。</p> - -<div id="example"> -<pre><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></pre> -</div> - -<h3 id="Conclusion" name="Conclusion">结论</h3> - -<p>在片段标识符指向部分文档的情况下，读者可能会对到底应该阅读文档的哪一部分感到疑惑。通过对不同的目标元素的样式进行修饰, 读者的相关疑惑会减少或者消除。</p> - -<h3 id="Related_Links" name="Related_Links">相关链接</h3> - -<ul> - <li><a class="external" href="http://www.w3.org/TR/css3-selectors/#target-pseudo">CSS3 Selectors #target-pseudo</a></li> - <li><a class="internal" href="/En/CSS/:target" title="En/CSS/:target">CSS Reference :target</a></li> -</ul> - -<div class="originaldocinfo"> -<h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3> - -<ul> - <li>Author(s): Eric Meyer, Standards Evangelist, Netscape Communications</li> - <li>Last Updated Date: Published 30 Jun 2003</li> - <li>Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.</li> - <li>Note: This reprinted article was originally part of the DevEdge site.</li> -</ul> -</div> 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 ---- -<p><span style="color: #4d4e53;">{{CSSRef}}</span></p> - -<p>CSS 视觉格式化模型（<em>visual formatting model）</em>是用来处理和在视觉媒体上显示文档时使用的计算规则。该模型是 CSS 的基础概念之一。</p> - -<div class="hidden"> -<p> </p> -</div> - -<p><span style="line-height: inherit;">视觉格式化模型会根据<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">CSS盒子模型</a>将文档中的元素转换为一个个盒子，</span><span style="line-height: inherit;">每个盒子的布局由以下因素决定：</span></p> - -<ul> - <li>盒子的尺寸：精确指定、由约束条件指定或没有指定</li> - <li>盒子的类型：行内盒子（inline）、行内级盒子（inline-level）、原子行内级盒子（atomic inline-level）、块盒子（block）</li> - <li><a href="/zh-CN/docs/CSS/Box_positioning_scheme" title="CSS/Box positioning scheme">定位方案（positioning scheme）</a>：普通流定位、浮动定位或绝对定位</li> - <li>文档树中的其它元素：即当前盒子的子元素或兄弟元素</li> - <li>{{glossary("viewport", "视口")}}尺寸与位置</li> - <li>所包含的图片的尺寸</li> - <li>其他的某些外部因素</li> -</ul> - -<p>该模型会根据盒子的包含块（<em>containing block）的</em>边界来渲染盒子。通常，盒子会创建一个包含其后代元素的包含块，但是盒子并不由包含块所限制，<span style="line-height: inherit;">当盒子的布局跑到包含块的外面时称为</span><span style="line-height: inherit;">溢出（</span><em>overflow）</em><span style="line-height: inherit;">。</span></p> - -<div class="note"> -<p><span style="line-height: inherit;">译注：本文有很多相近的术语，阅读时需仔细，否则容易造成误解。为了方便读者，这里我将其整理一下。</span></p> - -<p> </p> - -<ul> - <li><strong>块</strong>：block，一个抽象的概念，一个块在文档流上占据一个独立的区域，块与块之间在垂直方向上按照顺序依次堆叠。</li> - <li><strong>包含块</strong>：containing block，包含其他盒子的块称为包含块。</li> - <li><strong>盒子</strong>：box，一个抽象的概念，由CSS引擎根据文档中的内容所创建，主要用于文档元素的定位、布局和格式化等用途。盒子与元素并不是一一对应的，有时多个元素会合并生成一个盒子，有时一个元素会生成多个盒子（如匿名盒子）。</li> - <li><strong>块级元素</strong>：block-level element，元素的 <code>display</code> 为 <code>block</code>、<code>list-item</code>、<code>table</code> 时，该元素将成为块级元素。元素是否是块级元素仅是元素本身的属性，并不直接用于格式化上下文的创建或布局。</li> - <li><strong>块级盒子</strong>：block-level box，由块级元素生成。一个块级元素至少会生成一个块级盒子，但也有可能生成多个（例如列表项元素）。</li> - <li><strong>块盒子</strong>：block box，如果一个块级盒子同时也是一个块容器盒子（见下），则称其为块盒子。除具名块盒子之外，还有一类块盒子是匿名的，称为匿名块盒子（Anonymous block box），匿名盒子无法被CSS选择符选中。</li> - <li><strong>块容器盒子</strong>：block container box或block containing box，块容器盒子侧重于当前盒子作为“容器”的这一角色，它不参与当前块的布局和定位，它所描述的仅仅是当前盒子与其后代之间的关系。换句话说，块容器盒子主要用于确定其子元素的定位、布局等。</li> -</ul> - -<p>注意：盒子分为“块盒子”和“块级盒子”两种，但元素只有“块级元素”，而没有“块元素”。下面的“行内级元素”也是一样。</p> - -<ul> - <li><strong>行内级元素</strong>：inline-level element，<code>display</code> 为 <code>inline</code>、<code>inline-block</code>、<code>inline-table</code> 的元素称为行内级元素。与块级元素一样，元素是否是行内级元素仅是元素本身的属性，并不直接用于格式化上下文的创建或布局。</li> - <li><strong>行内级盒子</strong>：inline-level box，由行内级元素生成。行内级盒子包括行内盒子和原子行内级盒子两种，区别在于该盒子是否参与行内格式化上下文的创建。</li> - <li><strong>行内盒子</strong>：inline box，参与行内格式化上下文创建的行内级盒子称为行内盒子。与块盒子类似，行内盒子也分为具名行内盒子和匿名行内盒子（anonymous inline box）两种。</li> - <li><strong>原子行内级盒子</strong>：atomic inline-level box，不参与行内格式化上下文创建的行内级盒子。原子行内级盒子一开始叫做原子行内盒子（atomic inline box），后被修正。原子行内级盒子的内容不会拆分成多行显示。</li> -</ul> - -<p>另外，本文的英文原文仍未最后定稿，因此部分内容并不完整。待英文原文更新后应及时更新译文。</p> -</div> - -<h2 id="盒子的生成">盒子的生成</h2> - -<p><span style="line-height: inherit;">盒子的生成是 CSS 视觉格式化模型的一部分，用于从文档元素生成盒子。盒子有不同的类型，不同类型的盒子的格式化方法也有所不同。盒子的类型取决于 CSS </span>{{ cssxref("display") }} 属性。</p> - -<h3 id="块级元素与块盒子">块级元素与块盒子</h3> - -<p><span style="line-height: inherit;">当元素的</span> {{ cssxref("display") }} 为 <code>block</code>、<code>list-item</code> 或 <code>table</code><span style="line-height: inherit;"> 时，该元素将成为块级元素。一个块级元素会被格式化成一个块（例如文章的一个段落），默认按照垂直方向依次排列。</span></p> - -<p>每个块级盒子都会参与<a href="/en-US/docs/CSS/block_formatting_context" title="block formatting context">块格式化上下文（block formatting context）</a>的创建，而每个块级元素都会至少生成一个块级盒子，即主块级盒子（<em>principal block-level</em><em> box）。有</em>一些元素，比如列表项会生成额外的盒子来放置项目符号，而那些会生成列表项的元素可能会生成更多的盒子。不过，多数元素只生成一个主块级盒子。 </p> - -<p>主块级盒子包含由后代元素生成的盒子以及内容，同时它也会参与<a href="/zh-CN/docs/CSS/Positioning_scheme" title="CSS/Positioning scheme">定位方案</a>。</p> - -<p><img alt="venn_blocks.png" class="internal lwrap" src="/@api/deki/files/5995/=venn_blocks.png" style="float: left;">一个块级盒子可能也是一个块容器盒子。块容器盒子（<em>block container box）要么</em>只包含其它块级盒子，要么只包含行内盒子并同时创建一个行内<a href="/en-US/docs/CSS/Inline_formatting_context" title="CSS/Inline formatting context">格式化上下文（inline formatting context）</a>。</p> - -<p>能够注意到块级盒子与块容器盒子是不同的这一点很重要。前者描述了元素与其父元素和兄弟元素之间的行为，而后者描述了元素跟其后代之间的行为。有些块级盒子并不是块容器盒子，比如表格；而有些块容器盒子也不是块级盒子，比如非替换行内块和非替换表格单元格。</p> - -<p>一个同时是块容器盒子的块级盒子称为块盒子（<em>block box）。</em></p> - -<h4 id="匿名块盒子" style="">匿名块盒子</h4> - -<p>在某些情况下进行视觉格式化时，需要添加一些增补性的盒子，这些盒子不能用CSS选择符选中，因此称为匿名盒子（<em>anonymous boxes）</em>。</p> - -<p><span style="line-height: inherit;">CSS选择器不能作用于匿名盒子(</span><em>anonymous boxes</em><span style="line-height: inherit;">)，所以它不能被样式表赋予样式。也就是说，此时所有可继承的 CSS 属性值都为</span> <code>inherit</code> ，而所有不可继承的 CSS 属性值都为 <code>initial</code>。</p> - -<p>块包含盒子可能只包含行内级盒子，也可能只包含块级盒子，但通常的文档都会同时包含两者，在这种情况下，就会在相邻的行内级盒子外创建<span style="line-height: inherit;">匿名块盒子。</span></p> - -<h3 id="示例">示例</h3> - -<p>考虑下面的HTML代码，假设 {{ HTMLElement("div") }} 和 {{ HTMLElement("p") }} 都保持默认的样式（即它们的 <code>display</code> 为 <code>block</code>）：</p> - -<pre class="brush: html"><div>Some inline text <p>followed by a paragraph</p> followed by more inline text.</div> -</pre> - -<p>此时会产生两个匿名块盒子：一个是 <code><p></code> 元素前面的那些文本（<code>Some inline text</code>），另一个是 <p> 元素后面的文本（<code>followed by more inline text.</code>）。此时会生成下面的块结构：</p> - -<p><img alt="" src="https://developer.mozilla.org/@api/deki/files/5996/=anonymous_block-level_boxes.png" style="height: 137px; width: 597px;"></p> - -<p>显示为：</p> - -<pre>Some inline text -followed by a paragraph -followed by more inline text. -</pre> - -<p>对这两个匿名盒子来说，程序员无法像 {{ HTMLElement("p") }} 元素那样控制它们的样式，因此它们会从 {{ HTMLElement("div") }} 那里继承那些可继承的属性，如 {{ cssxref("color") }}。其他不可继承的属性则会设置为 <code>initial</code>，比如，因为没有为它们指定 {{ cssxref("background-color") }}，因此其具有默认的透明背景，而 <code><p></code> 元素的盒子则能够用CSS指定背景颜色。类似地，两个匿名盒子的文本颜色总是一样的。</p> - -<p>另一种会创建匿名块盒子的情况是一个行内盒子中包含一或多个块盒子。此时，包含块盒子的盒子会拆分为两个行内盒子，分别位于块盒子的前面和后面。块盒子前面的所有行内盒子会被一个匿名块盒子包裹，块盒子后面的行内盒子也是一样。因此，块盒子将成为这两个匿名块盒子的兄弟盒子。</p> - -<p>如果有多个块盒子，而它们中间又没有行内元素，则会在这些盒子的前面和后面创建两个匿名块盒子。</p> - -<h3 id="示例_2">示例</h3> - -<p>考虑下面的HTML代码，假设 {{ HTMLElement("p") }} 的 <code>display</code> 为 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">inline</span></font>，{{ HTMLElement("span") }} 的 <code>display</code> 为 <code>block</code>：</p> - -<pre class="brush: html"><code><p>Some <em>inline</em> text <span>followed by a paragraph</span> followed by more inline text.</p></code> -</pre> - -<p>此时会产生两个匿名块盒子：一个是 <code><span></code> 元素前面的文本（<code>Some <em>inline</em> text</code>），另一个是其之后的文本（<code>followed by more inline text.</code>）。此时会生成下面的块结构：</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13625/anonymous_block_box_break.png" style="height: 137px; width: 597px;"></p> - -<p>显示为：</p> - -<pre>Some inline text -followed by a paragraph -followed by more inline text. -</pre> - -<h3 id="行内级元素和行内盒子">行内级元素和行内盒子</h3> - -<p>如果一个元素的 {{ cssxref("display") }} 属性为 <code>inline</code>、<code>inline-block</code> 或 <code>inline-table</code>，则称该元素为行内级元素。显示时，它不会生成内容块，但是可以与其他行内级内容一起显示为多行。一个典型的例子是包含多种格式内容（如强调文本、图片等）的段落，就可以由行内级元素组成。</p> - -<p><img alt="" class="internal lwrap" src="https://developer.mozilla.org/@api/deki/files/6008/=venn_inlines.png" style="float: left; height: 287px; width: 384px;"></p> - -<div class="warning"> -<p>该图使用了过时的术语，见下面的“注意”（译注：指图中的 “Atomic inline boxes”）。除此之外该图还有一个错误，右边的黄色部分应该完全包含左侧的椭圆（类似于数学上的超集），因为标准所说的是“如果行内级元素生成的盒子参与行内格式化上下文的创建，则该盒子为一个行内级盒子”，见“CSS 2.2标准的9.2.2节”。</p> -</div> - -<p>行内级元素会生成行内级盒子，该盒子同时会参与行内格式化上下文（<a href="https://developer.mozilla.org/zh-CN/docs/CSS/Inline_formatting_context">inline formatting context</a>）的创建。行内盒子既是行内级盒子，也是一个其内容会参与创建其容器的行内格式化上下文的盒子，比如所有具有 <code>display:inline</code> 样式的非替换盒子。如果一个行内级盒子的内容不参与行内格式化上下文的创建，则称其为原子行内级盒子。而通过替换行内级元素或 <code>display</code> 值为 <code>inline-block</code> 或 <code>inline-table</code> 的元素创建的盒子不会像行内盒子一样可以被拆分为多个盒子。</p> - -<div class="note"> -<p>注意：开始的时候，原子行内级盒子叫做原子行内盒子，这并不准确，因为它们并不是行内盒子。后来在一次勘误时修正了这一问题。不过，当你见到某些文章中使用了“原子行内盒子”的时候，你尽可以将其理解为“原子行内级盒子”，因为这仅仅是一个名字的修改。</p> -</div> - -<div class="note"> -<p>在同一个行内格式化上下文中，原子行内级盒子不能拆分成多行：</p> - -<pre class="brush: html"><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> -</pre> - -<p>可能会显示为：</p> - -<p>The text in the span can be split into several<br> - lines as it is an inline box.</p> - -<p>而：</p> - -<pre class="brush: html"><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> -</pre> - -<p>则可能显示为：</p> - -<p>The text in the span <br> - cannot be split into several lines as it is an<br> - inline-block box.</p> - -<p>其中的“cannot be split into several lines as it”永远不会换行。</p> -</div> - -<h4 id="匿名行内盒子">匿名行内盒子</h4> - -<div>类似于块盒子，CSS引擎有时候也会自动创建一些行内盒子。这些行内盒子无法被选择符选中，因此是匿名的，它们从父元素那里继承那些可继承的属性，其他属性保持默认值 <code>initial</code>。</div> - -<div> </div> - -<div>一种常见的情况是CSS引擎会自动为直接包含在块盒子中的文本创建一个行内格式化上下文，在这种情况下，这些文本会被一个足够大的匿名行内盒子所包含。但是如果仅包含空格则有可能不会生成匿名行内盒子，因为空格有可能会由于 {{ cssxref("white-space") }} 的设置而被移除，从而导致最终的实际内容为空。</div> - -<div> </div> - -<div class="note">示例 TBD</div> - -<h3 id="其他类型的盒子">其他类型的盒子</h3> - -<h4 id="行盒子">行盒子</h4> - -<p>行盒子由行内格式化上下文创建，用来显示一行文本。在块盒子内部，行盒子总是从块盒子的一边延伸到另一边（译注：即占据整个块盒子的宽度）。当有浮动元素时，行盒子会从向左浮动的元素的右边缘延伸到向右浮动的元素的左边缘。</p> - -<div>行盒子更多是以技术性目的而存在的，Web开发者通常不需要关心。</div> - -<h4 id="Run-in_盒子">Run-in 盒子</h4> - -<div>Run-in 盒子通过 <code>display:run-in</code> 来定义，它可以是块盒子，也可以是行内盒子，这取决于紧随其后的盒子的类型。Run-in 盒子可以用来在可能的情况下将标题嵌入文章的第一个段落中。</div> - -<div> </div> - -<div class="note"> -<p>注意：Run-in 盒子已经在CSS 2.1的标准中移除了，但可能会在CSS 3中作为一个实验性的内容再次加入。因此最好不要将其用于正式项目。</p> -</div> - -<h4 id="由其他模型引入的盒子">由其他模型引入的盒子</h4> - -<div>除了行内格式化上下文和块格式化上下文之外，CSS还定义了几种内容模型，这些模型同样可以应用于元素。这些模型一般用来描述布局，它们可能会定义一些额外的盒子类型：</div> - -<div> </div> - -<ul> - <li><a href="https://developer.mozilla.org/zh-CN/docs/CSS/table-layout">表格内容模型</a>可能会创建一个表格包装器盒子和一个表格盒子，以及多个其他盒子如表格标题盒子等</li> - <li><a href="https://developer.mozilla.org/zh-CN/docs/CSS/Using_CSS_multi-column_layouts">多列内容模型</a>可能会在容器盒子和内容之间创建多个列盒子</li> - <li>实验性的网格内容模型或flex-box内容模型同样会创建一些其他种类的盒子</li> -</ul> - -<h4 id="定位规则">定位规则</h4> - -<p>一旦生成了盒子以后，CSS引擎就需要定位它们以完成布局。下面是定位盒子时所使用的规则：</p> - -<ul> - <li>普通流：按照次序依次定位每个盒子</li> - <li>浮动：将盒子从普通流中单独拎出来，将其放到外层盒子的某一边</li> - <li>绝对定位：按照绝对位置来定位盒子，其位置根据盒子的包含元素所建立的绝对坐标系来计算，因此绝对定位元素有可能会覆盖其他元素</li> -</ul> - -<h3 id="普通流">普通流</h3> - -<div>在普通流中，盒子会依次放置。在块格式化上下文中，盒子在垂直方向依次排列；而在行内格式化上下文中，盒子则水平排列。当CSS的 {{ cssxref("position") }} 属性为 <code>static</code> 或 <code>relative</code>，并且 {{ cssxref("float") }} 为 <code>none</code> 时，其布局方式为普通流。</div> - -<h3 id="示例_3">示例</h3> - -<div class="note"> -<p>在普通流的块格式化上下文中，盒子会垂直依次排列：</p> - -<p>[TODO 图片]</p> - -<p>在普通流的行内格式化上下文中，盒子会水平依次排列：</p> - -<p>[TODO 图片]</p> -</div> - -<div class="note"> -<p>普通流又有两种情况：静态定位和相对定位：</p> - -<p>{{ cssxref("position") }} 为 <code>static</code> 时为静态定位，此时每个盒子根据普通流所计算出的确切位置来定位。</p> - -<p>[TODO 图片]</p> - -<p>当 {{ cssxref("position") }} 为 <code>relative</code> 时为相对定位，此时每个盒子还会根据 {{ cssxref("top") }}、{{ cssxref("bottom") }}、{{ cssxref("left") }} 和 {{ cssxref("right") }} 属性的值在其原本所在的位置上产生指定大小的偏移。</p> -</div> - -<h3 id="浮动">浮动</h3> - -<p>在浮动定位中，浮动盒子会浮动到当前行的开始或尾部位置。这会导致普通流中的文本及其他内容会“流”到浮动盒子的边缘处，除非元素通过 {{ cssxref("clear") }} 清除了前面的浮动。</p> - -<p>一个盒子的 {{ cssxref("float") }} 值不为 <code>none</code>，并且其 {{ cssxref("position") }} 为 <code>static</code> 或 <code>relative</code> 时，该盒子为浮动定位。如果将 {{ cssxref("float") }} 设置为 <code>left</code>，浮动盒子会定位到当前行盒子的开始位置（左侧），如果设置为 <code>right</code>，浮动盒子会定位到当前行盒子的尾部位置（右侧）。不管是左浮动还是右浮动，行盒子都会伸缩以适应浮动盒子的大小。</p> - -<p>[TODO 图片]</p> - -<h3 id="绝对定位">绝对定位</h3> - -<p>在绝对定位中，盒子会完全从当前流中移除，并且不会再与其有任何联系（译注：此处仅指定位和位置计算，而绝对定位的元素在文档树中仍然与其他元素有父子或兄弟等关系），其位置会使用 {{ cssxref("top") }}、{{ cssxref("bottom") }}、{{ cssxref("left") }} 和 {{ cssxref("right") }} 相对其<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/All_About_The_Containing_Block">包含块</a>进行计算。</p> - -<p>如果元素的 {{ cssxref("position") }} 为 <code>absolute</code> 或 <code>fixed</code>，该元素为绝对定位。</p> - -<p>对固定位置的元素来说，其包含块为整个视口，该元素相对视口进行绝对定位，因此滚动时元素的位置并不会改变。</p> - -<h2 id="参见">参见</h2> - -<ul> - <li>{{css_key_concepts}}</li> -</ul> diff --git a/files/zh-cn/web/guide/html/content_editable/index.html b/files/zh-cn/web/guide/html/editable_content/index.html index 00f44d6fd7..00f44d6fd7 100644 --- a/files/zh-cn/web/guide/html/content_editable/index.html +++ b/files/zh-cn/web/guide/html/editable_content/index.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/editable_content/rich-text_editing_in_mozilla/index.html index f237e94b61..f237e94b61 100644 --- a/files/zh-cn/web/guide/html/content_editable/rich-text_editing_in_mozilla/index.html +++ b/files/zh-cn/web/guide/html/editable_content/rich-text_editing_in_mozilla/index.html 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 ---- -<p>这往往是有益的Web站点能够创建链接或按钮，点击后，打开一个新的出站电子邮件。例如，这可能会创造一个“联系我们”按钮时使用。这是使用完成<span class="seoSummary">{{HTMLElement("a")}} </span>元素和mailto URL方案。<span class="seoSummary">.</span></p> - -<h2 id="Mailto_基础">Mailto 基础</h2> - -<p>以它最基础和最常用的形式，一个<code>mailto</code>链接仅简单的指明目标收件人的邮箱地址。例如：</p> - -<pre class="brush: html"><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></pre> - - - -<p>这导致链接看起来像这样: <a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>.</p> - -<p>事实上, 目标收件人邮件地址都是可选的。 如果你不添加它 (也就是，你的{{htmlattrxref("href", "a")}} 是简单的 "mailto:")，用户的邮件客户端将打开一个新的外发电子邮件窗口，该窗口尚未指定目标地址。这通常非常有用，因为用户可以单击“共享”链接以将电子邮件发送到他们选择的地址。</p> - -<h2 id="指定细节">指定细节</h2> - -<p>除了电子邮件地址，您还可以提供其他信息。事实上, 任何标准的邮件头字段都可以添加到您提供的<code>mailto</code> URL中。 最广泛使用的是： "subject", "cc", and "body" (这不是真正的标题字段，但允许您为新电子邮件指定简短内容消息). 每个字段及其值都被指定为一个查询字词（query term）。</p> - -<div class="blockIndicator note"> -<dl> - <dt>译者注：</dt> -</dl> - -<ul> - <li>`subject`：主题</li> - <li>`cc`：抄送到次要收件人（与邮件有关但无需做出应答的个人或组织）</li> - <li> `bcc`：密送到其他收件人。主要、次要收件人不应该获得密送收件人的身份。</li> - <li>`body`：邮件内容</li> -</ul> -</div> - -<div class="note"> -<p><strong>Note:</strong> 每个字段的值都必须进行编码 (也就是, 带有非印刷字符和空格 <a href="http://en.wikipedia.org/wiki/Percent-encoding">percent-escaped</a>).</p> -</div> - -<h3 id="样品mailto_网址">样品mailto 网址</h3> - -<p>这有一些有关<code> mailto</code> 的示例链接:</p> - -<ul> - <li><a href="mailto:">mailto:</a></li> - <li><a href="mailto:nowhere@mozilla.org">mailto:nowhere@mozilla.org</a></li> - <li><a href="mailto:nowhere@mozilla.org,nobody@mozilla.org">mailto:nowhere@mozilla.org,nobody@mozilla.org</a></li> - <li><a href="mailto:nowhere@mozilla.org?cc=nobody@mozilla.org">mailto:nowhere@mozilla.org?cc=nobody@mozilla.org</a></li> - <li><a href="mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&subject=This%20is%20the%20subject">mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&subject=This%20is%20the%20subject</a></li> -</ul> - -<p>请注意，使用＆符号来分隔mailto URL中的每个字段。这是标准的URL查询表示法。</p> - -<h3 id="例子">例子</h3> - -<p>如果您想创建一封要求订阅新闻通讯的外发电子邮件, 您可能会使用一个 <code>mailto链接，像这样</code>:</p> - -<pre class="brush: html"><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></pre> - -<p>结果链接看起来像这样: <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>.</p> - -<section id="Quick_Links"> -<ol> - <li>{{HTMLElement("a")}}</li> - <li>{{RFC(6068, "The 'mailto' URI Scheme")}}</li> - <li>{{RFC(5322, "Internet Message Format")}}</li> - <li><a href="http://www.url-encode-decode.com/">URL encode/decode online</a></li> -</ol> -</section> 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 ---- -<div>HTML5中的表单元素和属性提供了比HTML4更多的语义标记，并取消了大量的在HTML4不可缺少的脚本和样式。HTML5中的表单功能为用户提供了更好的体验，使表单在不同网站之间更一致，并向用户提供有关数据输入的即时反馈。它们还为使用禁用脚本的浏览器的用户提供相同的用户体验。</div> - -<div> </div> - -<div>本文总结了HTML5中的表单变化。有关使用表单的详细指南，请参阅我们更多的<a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms">HTML表单指南</a>。</div> - -<div> </div> - -<h2 id="The_input_element" name="The_input_element"><code><input></code> 元素</h2> - -<p><code>{{HTMLElement("input")}}</code> 的 {{htmlattrxref("type", "input")}} 特性拥有更多的值。（请观看 {{HTMLElement("input")}} 获得完整列表）</p> - -<ul> - <li><code>search</code>: 这个元素呈现为一个搜索框。除了换行符会自动从输入中移除，无其他强制性语法。</li> - <li><code>tel</code>: 这个元素可现为一个编辑电话号码的输入控件。因为电话号码国际化差异非常明显，所以除了换行符会自动从输入中移除，无其他强制性语法。你可以使用如 {{htmlattrxref("pattern", "input")}} 与 {{htmlattrxref("maxlength", "input")}} 等属性来限制输入到控件中的值。</li> - <li><code>url</code>: 这个元素呈现为一个编辑<a class="external" href="http://en.wikipedia.org/URL" title="http://en.wikipedia.org/wiki/URL">URL</a> 的输入控件。换行符与首尾的空格将会被自动去除。</li> - <li> - <p><code>email</code>: 这个元素呈现为一个邮件地址。换行符会被自动去除。可以设置一个无效的邮件地址，但若满足输入框的限制，必须遵守在<span style="font-family: Arial; font-size: medium; line-height: 26px;">扩展的巴科斯范式(ABNF)中的规范：</span><code style="font-size: 14px;">1*( atext / "." ) "@" ldh-str 1*( "." ldh-str )</code><span style="line-height: 1.5em;"> 其中</span><code style="font-size: 14px;">atext</code><span style="line-height: 1.5em;"> 在规范</span><a class="external" href="http://tools.ietf.org/html/rfc5322#section-3.2.3" style="line-height: 1.5em;">RFC 5322 section 3.2.3</a> 中被定义<span style="line-height: 1.5em;">,而</span><code style="font-size: 14px;">ldh-str在规范</code><a class="external" href="http://tools.ietf.org/html/rfc1034#section-3.5" style="line-height: 1.5em;">RFC 1034 section 3.5</a> 中被定义。<span style="line-height: 1.5em;">.</span></p> - - <div class="note"><strong>注意:</strong> 若设置{{htmlattrxref("multiple", "input")}}属性，{{HTMLElement("input")}} 区域中可以用逗号分割的方式，输入多个email, 但 Firefox不支持.</div> - </li> -</ul> - -<p> {{HTMLElement("input")}} 元素也拥有一些新的特性。</p> - -<ul> - <li>{{htmlattrxref("list", "input")}}： {{HTMLElement("datalist")}} 元素的 ID，该元素的内容，{{HTMLElement("option")}} 元素被用作提示信息，会在 input 的建议区域作为提议显示出来。</li> - <li>{{htmlattrxref("pattern", "input")}}： 一个正则表达式，用于检查控件的值，能够作用于 {{htmlattrxref("type", "input")}} 值是 <code>text，</code> <code>tel，</code> <code>search，</code> <code>url，</code> 和 <code>email 的 input 元素。</code></li> - <li>{{htmlattrxref("form", "input")}}： 一个字符串，用于表明该 input 属于哪个 {{HTMLElement("form")}} 元素。一个 input 只能存在于一个表单中。</li> - <li>{{htmlattrxref("formmethod", "input")}}：一个字符串，用于表明表单提交时会使用哪个 HTTP 方法 (GET 或 POST)；如果定义了它，则可以覆盖 {{HTMLElement("form")}} 元素上的 {{htmlattrxref("method", "form")}} 特性。只有当 {{htmlattrxref("type", "input")}} 值为 <code>image</code> 或 <code>submit，并且 </code>{{htmlattrxref("form", "input")}} 特性被设置的情况下， {{htmlattrxref("formmethod", "input")}} 才能生效。</li> - <li>{{htmlattrxref("x-moz-errormessage", "input")}} {{non-standard_inline}}： 一个字符串，当表单字段验证失败后显示错误信息。该值为 Mozilla 扩展，并非标准。</li> -</ul> - -<h2 id="text_input">text input</h2> - -<dl> - <dt> </dt> -</dl> - -<p>这个程序段段定义了一个用户可以输入的一行input。</p> - -<pre><code><form> - Enter your Name <input type="text" name="name"> -</form></code></pre> - -<h2 id="checkboxes"><strong>checkboxes</strong></h2> - -<p>这个程序段允许用户选择多个选项。</p> - -<pre><code><input type="checkbox" name="chk" value="" checked> Do you want the newsletter</code></pre> - -<h2 id="The_form_element" name="The_form_element">Radio < input> element</h2> - -<pre><code><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></code></pre> - -<h2 id="The_form_element" name="The_form_element"><code><form></code> 元素</h2> - -<p>{{HTMLElement("form")}} 元素有了一个新特性：</p> - -<ul> - <li>{{htmlattrxref("novalidate", "form")}}：设置了该特性不会在表单提交之前对其进行验证。</li> -</ul> - -<h2 id="The_datalist_element" name="The_datalist_element"><code><datalist> 元素</code></h2> - -<p>{{HTMLElement("datalist")}} 元素会在填写 <span style="line-height: inherit;">{{HTMLElement("input")}} 字段时，显示一列</span><span style="line-height: inherit;"> {{HTMLElement("option")}} 作为提示。</span></p> - -<p>你可以使用 {{HTMLElement("input")}} 元素上的<span style="line-height: inherit;"> {{htmlattrxref("list", "input")}} 特性来将一个特定的 input 与特定的</span><span style="line-height: inherit;"> {{HTMLElement("datalist")}} 元素做关联。</span></p> - -<h2 id="The_output_element" name="The_output_element"><code><output></code> 元素</h2> - -<p><code>{{HTMLElement("output")}}</code> 元素表示计算的结果。</p> - -<p>你可以使用 {{htmlattrxref("for", "output")}} 特性来在 <code>{{HTMLElement("output")}}</code> 元素与文档内其他能够影响运算的元素(例如，input 或参数)建立关联。 {{htmlattrxref("for", "output")}} 特性的值是以空格做分隔的其他元素的 ID 列表。</p> - -<p>{{non-standard_inline}} Gecko 2.0 (其他浏览器并非如此) 支持为 <span style="line-height: inherit;">{{HTMLElement("output")}} 元素自定义有效性约束(</span><span style="line-height: 21px;">validity constraints</span><span style="line-height: inherit;">)与错误信息，可以对其使用如下 CSS 伪类：</span><span style="line-height: inherit;">{{Cssxref(":invalid")}}， {{Cssxref(":valid")}}， {{Cssxref(":-moz-ui-invalid")}}，与 {{Cssxref(":-moz-ui-valid")}}。在如下情况会显得很有用：例如计算结果违反了业务规则，但却并非因为特定的 input 值出现错误(例如，</span><span style="line-height: inherit;">「百分比总数不能超过100</span><span style="line-height: inherit;">」</span><span style="line-height: inherit;">)。</span></p> - -<h2 id="The_placeholder_attribute" name="The_placeholder_attribute">placeholder 特性</h2> - -<p>{{htmlattrxref("placeholder", "input")}} 特性作用于 <code>{{HTMLElement("input")}}</code> 与 <code>{{HTMLElement("textarea")}}</code> 元素上，提示用户此域内能够输入什么内容。placeholder 中的文本不能包含回车与换行。</p> - -<h2 id="The_autofocus_attribute" name="The_autofocus_attribute">autofocus 特性</h2> - -<p>{{htmlattrxref("autofocus", "input")}} 特性让你能够指定一个表单控件，当页面载入后该表单自动获得焦点，除非用户覆盖它，例如在另一个控件中输入值。一个文档内只有一个表单能够拥有 <code>autofocus</code> 特性，它是一个 Boolean 值。这个特性适用于 <code>{{HTMLElement("input")}}，</code> <code>{{HTMLElement("button")}}，</code> <code>{{HTMLElement("select")}}，与<font face="Lucida Grande, Lucida Sans Unicode, DejaVu Sans, Lucida, Arial, Helvetica, sans-serif"> </font></code><code>{{HTMLElement("textarea")}}</code> 元素。例外情况是，如果一个 {{htmlattrxref("autofocus", "input")}} 元素的 {{htmlattrxref("type", "input")}} 特性值设置成了 <code>hidden，则</code><span style="line-height: inherit;"> </span><code style="font-size: 14px; line-height: inherit;">autofocus</code><span style="line-height: inherit;"> 无法生效(就是说，你无法让一个隐藏控件自动获得焦点)。</span></p> - -<h2 id="The_label.control_DOM_property" name="The_label.control_DOM_property">label.control DOM 属性</h2> - -<p><code><a href="/en-US/docs/DOM/HTMLLabelElement" title="DOM/HTMLLabelElement">HTMLLabelElement</a></code> DOM 接口除了为 <code>{{HTMLElement("label")}}</code> 元素提供了对应的特性外，还提供了一个额外的属性。 <strong>control</strong> 属性返回被打上标签的控件，就是 label 适用的控件，由 {{htmlattrxref("for", "label")}} 特性(如果定义的话) 或是第一个后代元素控件来确定。</p> - -<h2 id="Constraint_Validation" name="Constraint_Validation">约束验证</h2> - -<p>HTML5 为客户端表单的验证提供了语法与 API。当然这些功能无法取代服务器端验证，<span style="line-height: inherit;">出于安全性与数据完整性的考虑，服务器端验证仍然必不可少，但是客户端验证能够通过对输入数据的即时反馈来提供良好的用户体验。</span></p> - -<p>如果 {{HTMLElement("input")}} 元素设置了<span style="line-height: inherit;"> </span><code style="font-size: 14px; line-height: inherit;">title 特性，当验证失败时，特性值会显示在提示信息中。如果</code><span style="line-height: inherit;"> </span><code style="font-size: 14px; line-height: inherit;">title</code><span style="line-height: inherit;"> 设置为空字符串，则不会显示提示信息。如果没有设置 </span><code style="font-size: 14px; line-height: inherit;">title</code><span style="line-height: inherit;"> 特性，会使用标准验证信息(例如通过 {{htmlattrxref("x-moz-errormessage")}} 特性指定，或调用 </span><code style="font-size: 14px; line-height: inherit;">setCustomValidity()</code><span style="line-height: inherit;"> 方法) 代为显示。</span></p> - -<div class="note"><strong>注意：</strong> 约束验证不支持表单中的 {{HTMLElement("button")}} 元素；若想基于表单的验证结果来改变按钮的样式，可以使用 {{cssxref(":-moz-submit-invalid")}} 伪类。</div> - -<h3 id="HTML_Syntax_for_Constraint_Validation" name="HTML_Syntax_for_Constraint_Validation">约束验证的 HTML 语法</h3> - -<p>下列 HTML5 语法中的条目用于为表单数据指定约束。</p> - -<ul> - <li>{{HTMLElement("input")}}, {{HTMLElement("select")}}， 和 {{HTMLElement("textarea")}} 元素上的 {{htmlattrxref("required", "input")}} 特性，指定必须提供该元素的值。(在 {{HTMLElement("input")}} 元素上， {{htmlattrxref("required", "input")}} 只能与特定的 {{htmlattrxref("type", "input")}} 特性值结合起来生效。)</li> - <li>{{HTMLElement("input")}} 元素上的 {{htmlattrxref("pattern", "input")}} 特性用于限定元素值必须匹配一个特定的正则表达式。</li> - <li>{{HTMLElement("input")}} 元素上的 {{htmlattrxref("min", "input")}} 与 {{htmlattrxref("max", "input")}} 特性限定了能够输入元素的最大与最小值。</li> - <li>{{HTMLElement("input")}} 元素的 {{htmlattrxref("step", "input")}} 特性(与 {{htmlattrxref("min", "input")}} 与 {{htmlattrxref("max", "input")}} 特性结合使用) 限定了输入值的间隔。如果一个值与允许值的梯级不相符，则它无法通过验证。</li> - <li>{{HTMLElement("input")}} 与 {{HTMLElement("textarea")}} 元素的 {{htmlattrxref("maxlength", "input")}} 特性限制了用户能够输入的最大字符数(在 Unicode 代码点内)。</li> - <li>{{htmlattrxref("type", "input")}} 的 <code>url</code> 与 <code>email</code> 值分别用于限制输入值是否为有效的 URL 或电子邮件地址。</li> -</ul> - -<p>此外，若要阻止对表单进行约束验证，你可以在 <span style="line-height: inherit;">{{HTMLElement("form")}} 上设置</span><span style="line-height: inherit;"> </span><span style="line-height: inherit;">{{htmlattrxref("novalidate", "form")}} 特性，或在 </span><span style="line-height: inherit;">{{HTMLElement("button")}} 与 {{HTMLElement("input")}} 元素(当 </span><span style="line-height: inherit;">{{htmlattrxref("type", "input")}} 是 </span><code style="font-size: 14px; line-height: inherit;">submit</code><span style="line-height: inherit;"> 或 </span><code style="font-size: 14px; line-height: inherit;">image</code><span style="line-height: inherit;">)上设置 </span><span style="line-height: inherit;">{{htmlattrxref("formnovalidate", "button")}} 特性。这些特性指定了当表单提交时不做验证。</span></p> - -<h3 id="Constraint_Validation_API" name="Constraint_Validation_API">约束验证 API</h3> - -<p>下面这些 DOM 属性与方法和约束验证相关，能够在客户端脚本中使用：</p> - -<ul> - <li><code><a href="/en-US/docs/DOM/HTMLFormElement" title="DOM/HTMLFormElement">HTMLFormElement</a></code> 对象上的 <code>checkValidity()</code> 方法，当表单的相关元素都通过了它们的约束验证时返回 true，否则返回 false。</li> - <li>在 <a href="/en-US/docs/HTML/Content_categories#Form-associated" title="HTML/Content Categories#form-associated">表单相关元素</a>上： - <ul> - <li><code>willValidate</code> 属性，如果元素的约束没有被符合则值为 false。</li> - <li><code>validity</code> 属性，是一个 <code><a href="/en-US/docs/DOM/ValidityState" title="DOM/ValidityState Interface">ValidityState</a></code> 对象，表示元素当前所处的验证状态(就是说约束成功或是失败)。</li> - <li><code>validationMessage</code> 属性，用于描述与元素相关约束的失败信息。</li> - <li><code>checkValidity()</code> 方法，如果元素没有满足它的任意约束，返回false，其他情况返回 true。</li> - <li><code>setCustomValidity()</code> 方法，设置自定义验证信息，用于即将实施与验证的约束来覆盖预定义的信息。</li> - </ul> - </li> -</ul> - -<div>{{HTML5ArticleTOC}}</div> 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 开发 - - 帮助 - - 指南 - - 综述 ---- -<div class="callout-box"> -<div style="font: normal 20px 'Bebas Neue','League Gothic',Haettenschweiler,Impact,'Arial Narrow',sans-serif; text-transform: uppercase;">HTML5 演示</div> - -<p>展示了实战中的最新 HTML 技术的 <a href="/zh-CN/demos/tag/tech:html5" title="demos/tag/tech:css3/">演示汇总</a>。</p> - -<p><a href="/zh-CN/docs/HTML/HTML5" title="html5"><img alt="HTML5_Logo_128.png" class="default internal" src="/@api/deki/files/6020/=HTML5_Logo_128.png"></a></p> -</div> - -<p><span class="seoSummary"><strong>HTML5</strong> 是 <a href="/zh-CN/docs/HTML" title="HTML">HTML</a> 标准的最新演进版本。 </span>这个术语代表了两个不同的概念：</p> - -<p><span class="seoSummary">它是</span><span style="line-height: 1.5;">一个新的 HTML </span><em>语言</em><span style="line-height: 1.5;">版本</span><span style="line-height: 1.5;">包含了新的元素，属性和行为，</span><span class="seoSummary" style="line-height: 1.5;">同时包含了一系列可以被用来让 Web 站点和应用更加多样化，功能更强大的技术。</span><span style="line-height: 1.5;"> 这套技术往往被称作 </span><em>HTML5 和它的朋友们，</em><span style="line-height: 1.5;">通常简称为 </span><em>HTML5</em><span style="line-height: 1.5;">。</span></p> - -<p>从要对全部所有的 Web 开发人员有用这一点出发，这个参考页面链接了有关 HTML5 技术的大量资源，并且基于它们各自的功能，把它们归类成了若干组。</p> - -<ul> - <li><em>语义</em>：能够让你更恰当地描述你的内容是什么。</li> - <li><em>连通性</em>：能够让你和服务器之间通过创新的新技术方法进行通信。</li> - <li><em>离线 & 存储</em>：能够让网页在客户端本地存储数据以及更高效地离线运行。</li> - <li><em>多媒体</em>：使 video 和 audio 成为了在所有 Web 中的一等公民。</li> - <li><em>2D/3D 绘图 & 效果</em>：提供了一个更加分化范围的呈现选择。</li> - <li><em>性能 & 集成</em>：提供了非常显著的性能优化和更有效的计算机硬件使用。</li> - <li><em>设备访问 Device Access</em>：能够处理各种输入和输出设备。</li> - <li><em>样式设计</em>: 让作者们来创作更加复杂的主题吧！</li> -</ul> - -<div class="cleared row topicpage-table"> -<div class="section"> -<h2 id="语义" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3827/HTML5_Semantics_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">语义</h2> - -<dl> - <dt><a href="/zh-CN/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document" title="HTML5 文档的节段和外形概要">HTML5 中的节段和外观概要</a></dt> - <dd>HTML5 中新的外观概要和节段元素一览: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("aside")}} 和 {{HTMLElement("hgroup")}}.</dd> - <dt><a href="/zh-CN/docs/Web/Guide/HTML/Using_HTML5_audio_and_video" title="使用 HTML5 的音频和视频">使用 HTML5 的音频和视频</a></dt> - <dd>{{HTMLElement("audio")}} 和 {{HTMLElement("video")}} 元素嵌入并能够操作新的多媒体内容。</dd> - <dt><a href="/zh-CN/docs/HTML/Forms_in_HTML" title="HTML5 的表单">HTML5 的表单</a></dt> - <dd>看一下 HTML5 中对 web 表单的改进：约束确认 API，一些新的属性，{{HTMLElement("input")}} 属性的一些新值 {{htmlattrxref("type", "input")}} 和新的 {{HTMLElement("output")}} 元素。</dd> - <dt>新的语义元素</dt> - <dd>除了区段，媒体和表单元素之外，众多的新元素，像 {{HTMLElement("mark")}}， {{HTMLElement("figure")}}， {{HTMLElement("figcaption")}}， {{HTMLElement("data")}}， {{HTMLElement("time")}}， {{HTMLElement("output")}}， {{HTMLElement("progress")}}， 或者 {{HTMLElement("meter")}}，也增加了<a href="/zh-CN/docs/Web/Guide/HTML/HTML5/HTML5_element_list" title="HTML/HTML5/HTML5_element_list">有效的 HTML5 元素</a>的数量。</dd> - <dt>{{HTMLElement("iframe")}} 的改进</dt> - <dd>使用 {{htmlattrxref("sandbox", "iframe")}}， {{htmlattrxref("seamless", "iframe")}}， 和 {{htmlattrxref("srcdoc", "iframe")}} 属性，作者们现在可以精确控制 {{HTMLElement("iframe")}} 元素的安全级别以及期望的渲染。</dd> - <dt><a href="/zh-CN/docs/MathML" title="MathML">MathML</a></dt> - <dd>允许直接嵌入数学公式。</dd> - <dt><a href="/zh-CN/docs/Web/Guide/HTML/HTML5/Introduction_to_HTML5" title="HTML/HTML5/Introduction_to_HTML5">HTML5 入门</a></dt> - <dd>本文介绍了如何标示在网页设计或 Web 应用程序中使用 HTML5 时碰到的问题。</dd> - <dt><a href="/zh-CN/docs/HTML/HTML5/HTML5_Parser" title="HTML/HTML5/HTML5 parser">HTML5 兼容的解析器</a></dt> - <dd>用于把 HTML5 文档的字节转换成 DOM 的解释器，已经被扩展了，并且现在精确地定义了在所有情况下使用的行为，甚至当碰到无效的 HTML 这种情况。这就导致了 HTML5 兼容的浏览器之间极大的可预测性和互操作性。</dd> -</dl> - -<h2 id="连通性" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3839/HTML5_Connectivity_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">连通性</h2> - -<dl> - <dt><a href="/zh-CN/docs/WebSockets" title="WebSockets">Web Sockets</a></dt> - <dd>允许在页面和服务器之间建立持久连接并通过这种方法来交换非 HTML 数据。</dd> - <dt><a href="/zh-CN/docs/Server-sent_events/Using_server-sent_events" title="Server-sent_events/Using_server-sent_events">Server-sent events</a></dt> - <dd>允许服务器向客户端推送事件，而不是仅在响应客户端请求时服务器才能发送数据的传统范式。</dd> - <dt><a href="/zh-CN/docs/WebRTC" title="WebRTC">WebRTC</a></dt> - <dd>这项技术，其中的 RTC 代表的是即时通信，允许连接到其他人，直接在浏览器中控制视频会议，而不需要一个插件或是外部的应用程序。</dd> -</dl> - -<h2 id="离线_存储" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3833/HTML5_Offline_Storage_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">离线 & 存储</h2> - -<dl> - <dt><a href="/zh-CN/docs/HTML/Using_the_application_cache" title="Offline_resources_in_Firefox">离线资源：应用程序缓存</a></dt> - <dd>火狐全面支持 HTML5 离线资源规范。其他大多数针对离线资源仅提供了某种程度上的支持。</dd> - <dt><a href="/zh-CN/docs/Online_and_offline_events" title="Online_and_offline_events">在线和离线事件</a></dt> - <dd>Firefox 3 支持 WHATWG 在线和离线事件，这可以让应用程序和扩展检测是否存在可用的网络连接，以及在连接建立和断开时能感知到。</dd> - <dt><a href="/zh-CN/docs/Web/Guide/API/DOM/Storage/Storage" title="DOM/Storage">WHATWG 客户端会话和持久化存储 (又名 DOM 存储)</a></dt> - <dd>客户端会话和持久化存储让 web 应用程序能够在客户端存储结构化数据。</dd> - <dt><a href="/zh-CN/docs/IndexedDB" title="IndexedDB">IndexedDB</a></dt> - <dd>是一个为了能够在浏览器中存储大量结构化数据，并且能够在这些数据上使用索引进行高性能检索的 Web 标准。</dd> - <dt><a href="/zh-CN/docs/Using_files_from_web_applications" title="Using_files_from_web_applications">自 web 应用程序中使用文件</a></dt> - <dd>对新的 HTML5 文件 API 的支持已经被添加到 Gecko 中，从而使 Web 应用程序可以访问由用户选择的本地文件。这包括使用 <a href="/zh-CN/docs/HTML/Element/Input#attr-type" title="HTML/Element/input#attr-type"><strong>type</strong></a> <span style="font-family: courier new;">file</span> 的 <span style="font-family: monospace;">{{HTMLElement("input")}}</span> 元素的新的 <a href="/zh-CN/docs/HTML/Element/Input#attr-multiple" title="HTML/Element/input#attr-multiple"><strong>multiple</strong></a> 属性针对多文件选择的支持。 还有 <a href="/zh-CN/docs/DOM/FileReader" title="DOM/FileReader"><code>FileReader</code></a>。</dd> -</dl> - -<h2 id="多媒体" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3835/HTML5_Multimedia_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">多媒体</h2> - -<dl> - <dt><a href="/zh-CN/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">使用 HTML5 音视频</a></dt> - <dd>{{HTMLElement("audio")}} 和 {{HTMLElement("video")}} 元素嵌入并支持新的多媒体内容的操作。</dd> - <dt><a href="/zh-CN/docs/WebRTC" title="WebRTC">WebRTC</a></dt> - <dd>这项技术，其中的 RTC 代表的是即时通信，允许连接到其他人，直接在浏览器中控制视频会议，而不需要一个插件或是外部的应用程序。</dd> - <dt><a href="/zh-CN/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">使用 Camera API</a></dt> - <dd>允许使用，操作计算机摄像头，并从中存储图像。Allows to use, manipulate and store an image from the computer's camera.</dd> - <dt>Track 和 WebVTT</dt> - <dd> {{HTMLElement("track")}} 元素支持字幕和章节。<a href="/zh-CN/docs/HTML/WebVTT" title="HTML/WebVTT">WebVTT</a> 一个文本轨道格式。</dd> -</dl> - -<h2 id="3D_图像_效果" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3841/HTML5_3D_Effects_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">3D, 图像 & 效果</h2> - -<dl> - <dt><a href="/zh-CN/docs/Canvas_tutorial" title="Canvas tutorial">Canvas 教程</a></dt> - <dd>了解有关新的 <code>{{HTMLElement("canvas")}}</code> 元素以及如何在火狐中绘制图像和其他对象。</dd> - <dt><a href="/zh-CN/docs/Drawing_text_using_a_canvas" title="Drawing_text_using_a_canvas">HTML5 针对 <code><canvas></code> 元素的文本 API</a></dt> - <dd>HTML5 文本 API 现在由 {{HTMLElement("canvas")}} 元素支持。</dd> - <dt><a href="/zh-CN/docs/WebGL" title="WebGL">WebGL</a></dt> - <dd>WebGL 通过引入了一套非常地符合 OpenGL ES 2.0 并且可以用在 HTML5 {{HTMLElement("canvas")}} 元素中的 API 给 Web 带来了 3D 图像功能。</dd> - <dt><a href="/zh-CN/docs/SVG" title="SVG">SVG</a></dt> - <dd>一个基于 XML 的可以直接嵌入到 HTML 中的矢量图像格式。</dd> - <dt> </dt> -</dl> -</div> - -<div class="section"> -<h2 id="性能_集成" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3831/HTML5_Performance_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">性能 & 集成</h2> - -<dl> - <dt><a href="/zh-CN/docs/DOM/Using_web_workers" title="Using web workers">Web Workers</a></dt> - <dd>能够把 JavaScript 计算委托给后台线程，通过允许这些活动以防止使交互型事件变得缓慢。</dd> - <dt><code><a href="/zh-CN/docs/DOM/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code> Level 2</dt> - <dd>允许异步读取页面的某些部分，允许其显示动态内容，根据时间和用户行为而有所不同。这是在 <a href="/zh-CN/docs/AJAX" title="AJAX">Ajax</a>背后的技术。</dd> - <dt>即时编译的 JavaScript 引擎</dt> - <dd>新一代的 JavaScript 引擎功能更强大，性能更杰出。</dd> - <dt><a href="https://developer.mozilla.org/zh-CN/docs/DOM/Manipulating_the_browser_history" title="DOM/Manipulating_the_browser_history">History API</a></dt> - <dd>允许对浏览器历史记录进行操作。这对于那些交互地加载新信息的页面尤其有用。</dd> - <dt><a href="/zh-CN/docs/HTML/Content_Editable" title="HTML/Content Editable">conentEditable 属性：把你的网站改变成 wiki !</a></dt> - <dd>HTML5 已经把 contentEditable 属性标准化了。了解更多关于这个特性的内容。</dd> - <dt><a href="/zh-CN/docs/DragDrop/Drag_and_Drop" title="DragDrop/Drag_and_Drop">拖放</a></dt> - <dd>HTML5 的拖放 API 能够支持在网站内部和网站之间拖放项目。同时也提供了一个更简单的供扩展和基于 Mozilla 的应用程序使用的 API。</dd> - <dt><a href="/zh-CN/docs/HTML/Focus_management_in_HTML" title="Focus_management_in_HTML">HTML 中的焦点管理</a></dt> - <dd>支持新的 HTML5 <code>activeElement</code> 和 <code>hasFocus</code> 属性。</dd> - <dt><a href="/zh-CN/docs/Web-based_protocol_handlers" title="Web-based_protocol_handlers">基于 Web 的协议处理程序</a></dt> - <dd>你现在可以使用 <code>navigator.registerProtocolHandler()</code> 方法把 web 应用程序注册成一个协议处理程序。</dd> - <dt><a href="/zh-CN/docs/DOM/window.requestAnimationFrame" title="DOM/window.requestAnimationFrame"><code>requestAnimationFrame</code></a></dt> - <dd>允许控制动画渲染以获得更优性能。</dd> - <dt><a href="/zh-CN/docs/DOM/Using_fullscreen_mode" title="DOM/Using_full-screen_mode">全屏 API</a></dt> - <dd>为一个网页或者应用程序控制使用整个屏幕，而不显示浏览器界面。</dd> - <dt><a href="/zh-CN/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">指针锁定 API</a></dt> - <dd>允许锁定到内容的指针，这样游戏或者类似的应用程序在指针到达窗口限制时也不会失去焦点。</dd> - <dt><a href="/zh-CN/docs/Online_and_offline_events" title="Online_and_offline_events">在线和离线事件</a></dt> - <dd>为了构建一个良好的具有离线功能的 web 应用程序，你需要知道什么时候你的应用程序确实离线了。顺便提一句，在你的应用程序又再回到在线状态时你也需要知道。</dd> -</dl> - -<h2 id="设备访问" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3837/HTML5_Device_Access_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">设备访问</h2> - -<dl> - <dt><a href="/zh-CN/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">使用 Camera API</a></dt> - <dd>允许使用和操作计算机的摄像头，并从中存取照片。</dd> - <dt><a href="/zh-CN/docs/DOM/Touch_events" title="DOM/Touch_events">触控事件</a></dt> - <dd>对用户按下触控屏的事件做出反应的处理程序。</dd> - <dt><a href="/zh-CN/docs/WebAPI/Using_geolocation" title="Using_geolocation">使用地理位置定位</a></dt> - <dd>让浏览器使用地理位置服务定位用户的位置。</dd> - <dt><a href="/zh-CN/docs/Detecting_device_orientation" title="Detecting_device_orientation">检测设备方向</a></dt> - <dd>让用户在运行浏览器的设备变更方向时能够得到信息。这可以被用作一种输入设备（例如制作能够对设备位置做出反应的游戏）或者使页面的布局跟屏幕的方向相适应（横向或纵向）。</dd> - <dt><a href="/zh-CN/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">指针锁定 API</a></dt> - <dd>允许锁定到内容的指针，这样游戏或者类似的应用程序在指针到达窗口限制时也不会失去焦点。</dd> -</dl> - -<h2 id="样式" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3829/HTML5_Styling_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">样式</h2> - -<p><a href="/zh-CN/docs/CSS" title="CSS">CSS</a> 已经扩展到能够以一个更加复杂的方法给元素设置样式。这通常被称为 <a href="/zh-CN/docs/CSS/CSS3" title="CSS/CSS3">CSS3</a>, 尽管 CSS 已经不再是很难触动的规范，并且不同的模块并不全部位于 level 3：其中一些位于 level 1 而另一些位于 level 4，覆盖了所有中间的层次。</p> - -<dl> - <dt>新的背景样式特性</dt> - <dd>现在可以使用 {{cssxref("box-shadow")}} 给逻辑框设置一个阴影，而且还可以设置 <a href="/zh-CN/docs/CSS/Multiple_backgrounds" title="CSS/Multiple_backgrounds">多背景</a>。</dd> - <dt>更精美的边框</dt> - <dd>现在不仅可以使用图像来格式化边框，使用 {{cssxref("border-image")}} 和它关联的普通属性，而且可以通过 {{cssxref("border-radius")}} 属性来支持圆角边框。</dd> - <dt>为你的样式设置动画</dt> - <dd>使用 <a href="/zh-CN/docs/CSS/Using_CSS_transitions" title="CSS/Using_CSS_transitions">CSS Transitions</a> 以在不同的状态间设置动画，或者使用 <a href="/zh-CN/docs/CSS/Using_CSS_animations" title="CSS/Using_CSS_animations">CSS Animations</a> 在页面的某些部分设置动画而不需要一个触发事件，你现在可以在页面中控制移动元素了。</dd> - <dt>排版方面的改进</dt> - <dd>作者拥有更高的控制已达到更佳的排版。他们不但可以控制 {{cssxref("text-overflow")}} 和 <a href="/zh-CN/docs/CSS/hyphens" title="CSS/hyphens">hyphenation</a>， 而且也可以给它设置一个 <a href="/zh-CN/docs/CSS/text-shadow" title="CSS/text-shadow">阴影</a> 或者更精细地控制它的 <a href="/zh-CN/docs/CSS/text-decoration" title="SVG/Attribute/text-decoration">decorations</a>。感谢新的 {{cssxref("@font-face")}} 规则，现在我们可以下载并应用自定义的字体了。.</dd> - <dt>新的展示性布局</dt> - <dd>为了提高设计的灵活性，已经有两种新的布局被添加了进来：<a href="/zh-CN/docs/CSS/Using_CSS_multi-column_layouts" title="CSS/Using_CSS_multi-column_layouts">CSS 多栏布局</a>, 以及 <a href="/zh-CN/docs/CSS/Flexbox" title="CSS/Flexbox">CSS 灵活方框布局</a>。</dd> -</dl> -</div> -</div> - -<p>译注：</p> - -<p>被废弃的重复链接：https://developer.mozilla.org/zh-CN/docs/HTML5_junk</p> 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 ---- -<p>这里列出了所有<strong>标准化的 HTML5 元素</strong>，使用起始标签描述，按照功能分组。与列出所有标准化的、非标准化的、有效的、废弃的标签的 <a href="/zh-CN/docs/HTML/Element" title="HTML/Element">HTML 元素索引</a> 不同的是，该页只列出有效的 HTML5 元素。新网站应当只使用这里列出的元素。</p> - -<p>符号 <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a> 代表该元素是在 HTML5 中新增的。另外注意，这里列出的其他元素可能在 HTML5 标准中得到了扩充或经过修改。</p> - -<h2 id="根元素">根元素</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Element</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{HTMLElement("html")}}</td> - <td>代表 HTML 或 XHTML 文档的根。其他所有元素必须是这个元素的子节点。</td> - </tr> - </tbody> -</table> - -<h2 id="文档元数据">文档元数据</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Element</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{HTMLElement("head")}}</td> - <td>代表关于文档元数据的一个集合，包括脚本或样式表的链接或内容。</td> - </tr> - <tr> - <td>{{HTMLElement("title")}}</td> - <td>定义文档的标题，将显示在浏览器的标题栏或标签页上。该元素只能包含文本，包含的标签不会被解释。</td> - </tr> - <tr> - <td>{{HTMLElement("base")}}</td> - <td>定义页面上相对 URL 的基准 URL。</td> - </tr> - <tr> - <td>{{HTMLElement("link")}}</td> - <td>用于链接外部资源到该文档。</td> - </tr> - <tr> - <td>{{HTMLElement("meta")}}</td> - <td>定义其他 HTML 元素无法描述的元数据。</td> - </tr> - <tr> - <td>{{HTMLElement("style")}}</td> - <td>用于内联 CSS。</td> - </tr> - </tbody> -</table> - -<h2 id="脚本">脚本</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Element</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{HTMLElement("script")}}</td> - <td>定义一个内联脚本或链接到外部脚本。脚本语言是 JavaScript。</td> - </tr> - <tr> - <td>{{HTMLElement("noscript")}}</td> - <td>定义当浏览器不支持脚本时显示的替代文字。</td> - </tr> - <tr> - <td>{{HTMLElement("template")}}<a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> - <td>通过 JavaScript 在运行时实例化内容的容器。</td> - </tr> - </tbody> -</table> - -<h2 id="章节">章节</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Element</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{HTMLElement("body")}}</td> - <td> - <div>代表 HTML 文档的内容。在文档中只能有一个 <code><body></code> 元素。</div> - </td> - </tr> - <tr> - <td>{{HTMLElement("section")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> - <td>定义文档中的一个章节。</td> - </tr> - <tr> - <td>{{HTMLElement("nav")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> - <td>定义只包含导航链接的章节。</td> - </tr> - <tr> - <td>{{HTMLElement("article")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> - <td>定义可以独立于内容其余部分的完整独立内容块。</td> - </tr> - <tr> - <td>{{HTMLElement("aside")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> - <td>定义和页面内容关联度较低的内容——如果被删除，剩下的内容仍然很合理。</td> - </tr> - <tr> - <td><a href="/zh-CN/docs/HTML/Element/Heading_Elements"><code><h1>,<h2>,<h3>,<h4>,<h5>,<h6></code></a></td> - <td>标题元素实现了六层文档标题，<code><h1></code> 是最大的标题，<code><h6></code> 是最小的标题。标题元素简要地描述章节的主题。</td> - </tr> - <tr> - <td>{{HTMLElement("header")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> - <td>定义页面或章节的头部。它经常包含 logo、页面标题和导航性的目录。</td> - </tr> - <tr> - <td>{{HTMLElement("footer")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> - <td>定义页面或章节的尾部。它经常包含版权信息、法律信息链接和反馈建议用的地址。</td> - </tr> - <tr> - <td>{{HTMLElement("address")}}</td> - <td>定义包含联系信息的一个章节。</td> - </tr> - <tr> - <td>{{HTMLElement("main")}}<a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> - <td>定义文档中主要或重要的内容。</td> - </tr> - </tbody> -</table> - -<h2 id="组织内容">组织内容</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Element</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{HTMLElement("p")}}</td> - <td>定义一个段落。</td> - </tr> - <tr> - <td>{{HTMLElement("hr")}}</td> - <td>代表章节、文章或其他长内容中段落之间的分隔符。</td> - </tr> - <tr> - <td>{{HTMLElement("pre")}}</td> - <td>代表其内容已经预先排版过，格式应当保留 。</td> - </tr> - <tr> - <td>{{HTMLElement("blockquote")}}</td> - <td>代表引用自其他来源的内容。</td> - </tr> - <tr> - <td>{{HTMLElement("ol")}}</td> - <td>定义一个有序列表。</td> - </tr> - <tr> - <td>{{HTMLElement("ul")}}</td> - <td>定义一个无序列表。</td> - </tr> - <tr> - <td>{{HTMLElement("li")}}</td> - <td>定义列表中的一个列表项。</td> - </tr> - <tr> - <td>{{HTMLElement("dl")}}</td> - <td>定义一个定义列表（一系列术语和其定义）。</td> - </tr> - <tr> - <td>{{HTMLElement("dt")}}</td> - <td>代表一个由下一个 <code><dd></code> 定义的术语。</td> - </tr> - <tr> - <td>{{HTMLElement("dd")}}</td> - <td>代表出现在它之前术语的定义。</td> - </tr> - <tr> - <td>{{HTMLElement("figure")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> - <td>代表一个和文档有关的图例。</td> - </tr> - <tr> - <td>{{HTMLElement("figcaption")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> - <td>代表一个图例的说明。</td> - </tr> - <tr> - <td>{{HTMLElement("div")}}</td> - <td>代表一个通用的容器，没有特殊含义。</td> - </tr> - </tbody> -</table> - -<h2 id="文字形式">文字形式</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Element</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{HTMLElement("a")}}</td> - <td>代表一个链接到其他资源的<em>超链接</em> 。</td> - </tr> - <tr> - <td>{{HTMLElement("em")}}</td> - <td>代表<em>强调</em> 文字。</td> - </tr> - <tr> - <td>{{HTMLElement("strong")}}</td> - <td>代表<em>特别重要</em> 文字。</td> - </tr> - <tr> - <td>{{HTMLElement("small")}}</td> - <td>代表<em>注释</em> ，如免责声明、版权声明等，对理解文档不重要。</td> - </tr> - <tr> - <td>{{HTMLElement("s")}}</td> - <td>代表<em>不准确或不相关</em> 的内容。</td> - </tr> - <tr> - <td>{{HTMLElement("cite")}}</td> - <td>代表<em>作品标题</em> 。</td> - </tr> - <tr> - <td>{{HTMLElement("q")}}</td> - <td>代表内联的<em>引用</em> 。</td> - </tr> - <tr> - <td>{{HTMLElement("dfn")}}</td> - <td>代表一个术语包含在其最近祖先内容中的<em>定义</em> 。</td> - </tr> - <tr> - <td>{{HTMLElement("abbr")}}</td> - <td>代表<em>省略</em> 或<em>缩写</em> ，其完整内容在 <code>title</code> 属性中。</td> - </tr> - <tr> - <td>{{HTMLElement("data")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> - <td>关联一个内容的<em>机器可读的等价形式</em> （该元素只在 WHATWG 版本的 HTML 标准中，不在 W3C 版本的 HTML5 标准中）。</td> - </tr> - <tr> - <td>{{HTMLElement("time")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> - <td>代表<em>日期</em> 和<em>时间</em> 值；机器可读的等价形式通过 <code>datetime</code> 属性指定。</td> - </tr> - <tr> - <td>{{HTMLElement("code")}}</td> - <td>代表<em>计算机代码</em> 。</td> - </tr> - <tr> - <td>{{HTMLElement("var")}}</td> - <td>代表<em>代码中的变量</em> 。</td> - </tr> - <tr> - <td>{{HTMLElement("samp")}}</td> - <td>代表程序或电脑的<em>输出</em> 。</td> - </tr> - <tr> - <td>{{HTMLElement("kbd")}}</td> - <td>代表<em>用户输入</em> ，一般从键盘输出，但也可以代表其他输入，如语音输入。</td> - </tr> - <tr> - <td>{{HTMLElement("sub")}},{{HTMLElement("sup")}}</td> - <td>分别代表<em>下标</em> 和<em>上标</em> 。</td> - </tr> - <tr> - <td>{{HTMLElement("i")}}</td> - <td>代表一段<em>不同性质</em> 的文字，如技术术语、外文短语等。</td> - </tr> - <tr> - <td>{{HTMLElement("b")}}</td> - <td>代表一段<em>需要被关注</em> 的文字。</td> - </tr> - <tr> - <td>{{HTMLElement("u")}}</td> - <td>代表一段需要<em>下划线</em>呈现的文本注释，如标记出拼写错误的文字等。</td> - </tr> - <tr> - <td>{{HTMLElement("mark")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> - <td>代表一段需要被高亮的<em>引用</em> 文字。</td> - </tr> - <tr> - <td>{{HTMLElement("ruby")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> - <td>代表被<em>ruby 注释</em> 标记的文本，如中文汉字和它的拼音。</td> - </tr> - <tr> - <td>{{HTMLElement("rt")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> - <td>代表<em>ruby 注释</em> ，如中文拼音。</td> - </tr> - <tr> - <td>{{HTMLElement("rp")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> - <td>代表 ruby 注释两边的<em>额外插入文本</em> ，用于在不支持 ruby 注释显示的浏览器中提供友好的注释显示。</td> - </tr> - <tr> - <td>{{HTMLElement("bdi")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> - <td>代表需要<em>脱离</em> 父元素文本方向的一段文本。它允许嵌入一段不同或未知文本方向格式的文本。</td> - </tr> - <tr> - <td>{{HTMLElement("bdo")}}</td> - <td>指定子元素的<em>文本方向</em> ，显式地覆盖默认的文本方向。</td> - </tr> - <tr> - <td>{{HTMLElement("span")}}</td> - <td>代表一段没有特殊含义的文本，当其他语义元素都不适合文本时候可以使用该元素。</td> - </tr> - <tr> - <td>{{HTMLElement("br")}}</td> - <td>代表<em>换行</em> 。</td> - </tr> - <tr> - <td>{{HTMLElement("wbr")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> - <td>代表<em>建议换行 (Word Break Opportunity)</em> ，当文本太长需要换行时将会在此处添加换行符。</td> - </tr> - </tbody> -</table> - -<h2 id="编辑">编辑</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Element</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{HTMLElement("ins")}}</td> - <td>定义<em>增加</em> 到文档的内容。</td> - </tr> - <tr> - <td>{{HTMLElement("del")}}</td> - <td>定义从文档<em>移除</em> 的内容。</td> - </tr> - </tbody> -</table> - -<h2 id="嵌入内容">嵌入内容</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Element</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{HTMLElement("img")}}</td> - <td>代表一张<em>图片</em> 。</td> - </tr> - <tr> - <td>{{HTMLElement("iframe")}}</td> - <td>代表一个<em>内联的框架</em> 。</td> - </tr> - <tr> - <td>{{HTMLElement("embed")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> - <td>代表一个<em>嵌入</em> 的外部资源，如应用程序或交互内容。</td> - </tr> - <tr> - <td>{{HTMLElement("object")}}</td> - <td>代表一个<em>外部资源</em> ，如图片、HTML 子文档、插件等。</td> - </tr> - <tr> - <td>{{HTMLElement("param")}}</td> - <td>代表 <code><object></code> 元素所指定的插件的<em>参数</em> 。</td> - </tr> - <tr> - <td>{{HTMLElement("video")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> - <td>代表一段<em>视频</em> 及其视频文件和字幕，并提供了播放视频的用户界面。</td> - </tr> - <tr> - <td>{{HTMLElement("audio")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> - <td>代表一段<em>声音</em> ，或<em>音频流</em> 。</td> - </tr> - <tr> - <td>{{HTMLElement("source")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> - <td>为 <code><video></code> 或 <code><audio></code> 这类媒体元素指定<em>媒体源</em> 。</td> - </tr> - <tr> - <td>{{HTMLElement("track")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> - <td>为 <code><video></code> 或 <code><audio></code> 这类媒体元素指定<em>文本轨道（字幕）</em> 。</td> - </tr> - <tr> - <td>{{HTMLElement("canvas")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> - <td>代表<em>位图区域</em> ，可以通过脚本在它上面实时呈现图形，如图表、游戏绘图等。</td> - </tr> - <tr> - <td>{{HTMLElement("map")}}</td> - <td>与 <code><area></code> 元素共同定义<em>图像映射</em> 区域。</td> - </tr> - <tr> - <td>{{HTMLElement("area")}}</td> - <td>与 <code><map></code> 元素共同定义<em>图像映射</em> 区域。</td> - </tr> - <tr> - <td>{{SVGElement("svg")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> - <td>定义一个嵌入式<em>矢量图</em> 。</td> - </tr> - <tr> - <td>{{MathMLElement("math")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> - <td>定义一段<em>数学公式</em> 。</td> - </tr> - </tbody> -</table> - -<h2 id="表格">表格</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Element</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{HTMLElement("table")}}</td> - <td>定义<em>多维数据</em> 。</td> - </tr> - <tr> - <td>{{HTMLElement("caption")}}</td> - <td>代表<em>表格的标题</em> 。</td> - </tr> - <tr> - <td>{{HTMLElement("colgroup")}}</td> - <td>代表表格中一组<em>单列或多列</em> 。</td> - </tr> - <tr> - <td>{{HTMLElement("col")}}</td> - <td>代表表格中的<em>列</em> 。</td> - </tr> - <tr> - <td>{{HTMLElement("tbody")}}</td> - <td>代表表格中一块<em>具体数据</em> （表格主体）。</td> - </tr> - <tr> - <td>{{HTMLElement("thead")}}</td> - <td>代表表格中一块<em>列标签</em> （表头）。</td> - </tr> - <tr> - <td>{{HTMLElement("tfoot")}}</td> - <td>代表表格中一块<em>列摘要</em> （表尾）。</td> - </tr> - <tr> - <td>{{HTMLElement("tr")}}</td> - <td>代表表格中的<em>行</em> 。</td> - </tr> - <tr> - <td>{{HTMLElement("td")}}</td> - <td>代表表格中的<em>单元格</em> 。</td> - </tr> - <tr> - <td>{{HTMLElement("th")}}</td> - <td>代表表格中的<em>头部单元格</em> 。</td> - </tr> - </tbody> -</table> - -<h2 id="表单">表单</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Element</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{HTMLElement("form")}}</td> - <td>代表一个<em>表单</em> ，由控件组成。</td> - </tr> - <tr> - <td>{{HTMLElement("fieldset")}}</td> - <td>代表<em>控件组</em> 。</td> - </tr> - <tr> - <td>{{HTMLElement("legend")}}</td> - <td>代表 <code><fieldset></code> 控件组的<em>标题</em> 。</td> - </tr> - <tr> - <td>{{HTMLElement("label")}}</td> - <td>代表表单控件的<em>标题</em> 。</td> - </tr> - <tr> - <td>{{HTMLElement("input")}}</td> - <td>代表允许用户编辑数据的<em>数据区</em> （文本框、单选框、复选框等）。</td> - </tr> - <tr> - <td>{{HTMLElement("button")}}</td> - <td>代表<em>按钮</em> 。</td> - </tr> - <tr> - <td>{{HTMLElement("select")}}</td> - <td>代表<em>下拉框</em> 。</td> - </tr> - <tr> - <td>{{HTMLElement("datalist")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> - <td>代表提供给其他控件的<em>一组预定义选项</em> 。</td> - </tr> - <tr> - <td>{{HTMLElement("optgroup")}}</td> - <td>代表一个<em>选项分组</em> 。</td> - </tr> - <tr> - <td>{{HTMLElement("option")}}</td> - <td>代表一个 <code><select></code> 元素或 <code><datalist></code> 元素中的一个<em>选项</em></td> - </tr> - <tr> - <td>{{HTMLElement("textarea")}}</td> - <td>代表<em>多行文本框</em> 。</td> - </tr> - <tr> - <td>{{HTMLElement("keygen")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> - <td>代表一个<em>密钥对生成器</em> 控件。</td> - </tr> - <tr> - <td>{{HTMLElement("output")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> - <td>代表<em>计算值</em> 。</td> - </tr> - <tr> - <td>{{HTMLElement("progress")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> - <td>代表<em>进度条</em> 。</td> - </tr> - <tr> - <td>{{HTMLElement("meter")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> - <td>代表<em>滑动条</em> 。</td> - </tr> - </tbody> -</table> - -<h2 id="交互元素">交互元素</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Element</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{HTMLElement("details")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> - <td>代表一个用户可以(点击)获取额外信息或控件的<em>小部件</em> 。</td> - </tr> - <tr> - <td>{{HTMLElement("summary")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> - <td>代表 <code><details></code> 元素的<em>综述</em> 或<em>标题</em> 。</td> - </tr> - <tr> - <td>{{HTMLElement("menuitem")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> - <td>代表一个用户可以点击的菜单项。</td> - </tr> - <tr> - <td>{{HTMLElement("menu")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> - <td>代表菜单。</td> - </tr> - </tbody> -</table> - -<h2 id="另请参阅">另请参阅</h2> - -<ul> - <li><a href="/zh-CN/docs/HTML/HTML5" title="HTML/HTML5">一系列 HTML5 文档</a>。</li> - <li><a href="/zh-CN/docs/HTML/Element" title="HTML/Element">所有 HTML 标签的参考</a>，包括 HTML5 中不再有效的元素。</li> -</ul> 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 ---- -<p>这个页面提供了有关HTML5的主题链接，有些链接一般与HTML5关联但实际上并不是HTML标准，为了方便这些内容也被整理到这里。</p> -<h2 id="HTML"><span class="author-g-lqfq0qqpckp8p3co">HTML</span></h2> -<h3 id="Audio_和_video"><span class="author-g-lqfq0qqpckp8p3co">Audio</span><span class="author-g-101xw018h73xu61x"> 和 video</span></h3> -<div class="ace-line"> - Firefox 3.5引入对HTML5<audio>和<video>元素的支持，提供向HTML文档轻松嵌入媒体资源的能力。参考：<span class="author-g-101xw018h73xu61x url"><a href="/en/Using_HTML5_audio_and_video" title="En/Using_audio_and_video_in_Firefox">在 Firefox 中使用audio和video</a></span></div> -<div class="ace-line"> - </div> -<h3 id="Canvas"><span class="author-g-101xw018h73xu61x">Canvas</span></h3> -<p><Canvas>是HTML新元素，可以用于通过脚本（常用 <a href="../../../../en/JavaScript" rel="internal">JavaScript</a>）绘制图像，例如，它可以用来绘制图表，合成照片甚至实现动画。</p> -<p>参考：</p> -<ul> - <li><span class="author-g-101xw018h73xu61x url"><a href="/en/HTML/Canvas" title="en/HTML/Canvas">Canvas</a></span> 元素</li> - <li><a href="/en/Canvas_tutorial" title="en/Canvas tutorial">Canvas 教程</a></li> -</ul> -<h3 id="WebGL_(独立规范)"><span class="author-g-101xw018h73xu61x">WebGL </span>(独立规范)</h3> -<div class="ace-line"> - 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.</div> -<div class="ace-line" id="magicdomid483"> - <span class="author-g-101xw018h73xu61x">Reference: </span><span class="author-g-101xw018h73xu61x url"><a href="/en/WebGL" title="en/WebGL">WebGL</a></span></div> -<h3 id="Inline_SVG_and_MathML"><span class="author-g-101xw018h73xu61x">Inline SVG and MathML</span></h3> -<div class="ace-line"> - HTML5 parsing liberates MathML and SVG from XML and makes them available in the main file format of the Web.</div> -<div class="ace-line" id="magicdomid543"> - <span class="author-g-101xw018h73xu61x">Reference: </span></div> -<ul> - <li><span class="author-g-101xw018h73xu61x url"><a href="/en/SVG" title="en/SVG">SVG</a></span></li> - <li><a href="/en/MathML" title="en/MathML">MathML</a></li> -</ul> -<h3 id="New_link_relations"><span class="author-g-101xw018h73xu61x">New link relations</span></h3> -<div class="ace-line" id="magicdomid407"> - Link relations complement the <a> tag and specify why you're pointing to another page.</div> -<div class="ace-line"> - Reference:</div> -<h3 id="Web_forms"><span class="author-g-101xw018h73xu61x">Web forms</span></h3> -<div class="ace-line"> - 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.</div> -<div class="ace-line" id="magicdomid169"> - <span class="author-g-101xw018h73xu61x">Reference:</span></div> -<ul> - <li><span class="author-g-101xw018h73xu61x url"><a href="/en/HTML/Forms_in_HTML" title="en/HTML/HTML5/Forms_in_HTML5">Forms in HTML5</a></span></li> - <li><span class="author-g-101xw018h73xu61x url"><a href="/en/Using_files_from_web_applications" title="en/Using_files_from_web_applications">Using files from web applications</a></span></li> -</ul> -<h3 id="Microformats_(separate_specification)"><span class="author-g-101xw018h73xu61x">Microformats (separate specification)</span></h3> -<div class="ace-line" id="magicdomid448"> - 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.</div> -<div class="ace-line"> - Reference: <span class="author-g-101xw018h73xu61x url"><a href="/en/Using_microformats" title="en/Using_microformats">Using microformats</a></span></div> -<div class="ace-line"> - See also: <a class="external" href="http://www.microformats.org" title="http://www.microformats.org">http://www.microformats.org</a></div> -<h3 id="Semantic_tags"><span class="author-g-101xw018h73xu61x">Semantic tags</span></h3> -<div class="ace-line"> - The HTML5 specification brings several new elements to web developers allowing them to describe the structure of a web document with a standard semantics.</div> -<div class="ace-line"> - Reference:</div> -<ul> - <li><a href="/en/Sections_and_Outlines_of_an_HTML5_document" title="en/Sections and Outlines of an HTML5 document">Sections and Outlines of an HTML5 document</a></li> - <li>{{ HTMLElement("article") }}</li> - <li>{{ HTMLElement("aside") }}</li> - <li>{{ HTMLElement("figcaption") }}</li> - <li>{{ HTMLElement("figure") }}</li> - <li>{{ HTMLElement("footer") }}</li> - <li>{{ HTMLElement("header") }}</li> - <li>{{ HTMLElement("mark") }}</li> - <li>{{ HTMLElement("nav") }}</li> - <li>{{ HTMLElement("section") }}</li> - <li>{{ HTMLElement("time") }}</li> -</ul> -<h2 id="JavaScript_(separate_specifications)"><span class="author-g-lqfq0qqpckp8p3co">JavaScript </span>(separate specifications)</h2> -<h3 id="Client-Side_Storage"><span class="author-g-101xw018h73xu61x">Client-Side Storage</span></h3> -<div class="ace-line"> - Firefox supports the HTML 5 specification for offline caching of web applications' resources and offline storage of data.</div> -<div class="ace-line"> - Reference:</div> -<ul> - <li><span class="author-g-101xw018h73xu61x url"><a href="/en/Using_the_Application_Cache" title="en/Using_the_Application_Cache">Offline resources in Firefox</a></span></li> - <li><span class="author-g-101xw018h73xu61x url"><a href="/en/DOM/Storage" title="en/DOM/Storage">DOM Storage</a></span></li> -</ul> -<h3 id="IndexedDB"><span class="author-g-101xw018h73xu61x">IndexedDB</span></h3> -<div class="ace-line" id="magicdomid361"> - <a class="external" href="http://dev.w3.org/2006/webapi/IndexedDB/">IndexedDB</a> 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.</div> -<div class="ace-line"> - Reference: <a href="/en/IndexedDB" title="en/IndexedDB">IndexedDB</a></div> -<h3 id="Web_workers_(separate_specification)"><span class="author-g-101xw018h73xu61x">Web workers </span><span class="author-g-101xw018h73xu61x">(separate specification)</span></h3> -<div class="ace-line"> - 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.</div> -<div class="ace-line" id="magicdomid143"> - <span class="author-g-101xw018h73xu61x">Reference: </span><span class="author-g-101xw018h73xu61x url"><a href="/En/DOM/Using_web_workers" title="En/Using_web_workers">Using web workers</a></span></div> -<h3 id="New_events"><span class="author-g-101xw018h73xu61x">New events</span></h3> -<div class="ace-line"> - 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.</div> -<div class="ace-line" id="magicdomid161"> - <span class="author-g-101xw018h73xu61x">Reference: </span><span class="author-g-101xw018h73xu61x url"><a href="/en/Online_and_offline_events" title="en/Online_and_offline_events">Online and offline events</a></span></div> -<h3 id="Drag_and_drop"><span class="author-g-101xw018h73xu61x">Drag and drop</span></h3> -<div class="ace-line"> - 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.</div> -<div class="ace-line"> - Reference: <span class="author-g-101xw018h73xu61x url"><a href="/En/DragDrop/Drag_and_Drop" title="En/DragDrop/Drag_and_Drop">Drag and Drop</a></span></div> -<h3 id="Protocol_handler"><span class="author-g-101xw018h73xu61x">Protocol handler</span></h3> -<div class="ace-line"> - <p>It's fairly common to find web pages link to resources using non-<code>http</code> protocols. You can think of this as a <em>desktop-based</em> protocol handler.</p> - <p>Reference: <span class="author-g-101xw018h73xu61x url"><a href="/en/Web-based_protocol_handlers" title="en/Web-based_protocol_handlers">Web-based protocol handler</a></span></p> - <h3 id="Geolocation">Geolocation</h3> -</div> -<div class="ace-line"> - 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.</div> -<div class="ace-line" id="magicdomid294"> - <span class="author-g-101xw018h73xu61x">Reference: </span><span class="author-g-101xw018h73xu61x url"><a href="/En/Using_geolocation" title="En/Using_geolocation">Using geolocation</a></span></div> -<div class="ace-line"> - <span class="author-g-101xw018h73xu61x url">See also: <a class="external" href="http://dev.w3.org/geo/api/spec-source.html" title="Geolocation Spec">Geolocation Specification</a></span></div> -<div class="ace-line"> - <h3 id="Focus_attributes"><span class="author-g-101xw018h73xu61x">Focus attributes</span></h3> - <div class="ace-line"> - The focus atributes let a script understand if an element has the focus of the user and then act accordingly.</div> - <div class="ace-line" id="magicdomid231"> - <span class="author-g-101xw018h73xu61x">Reference: </span><span class="author-g-101xw018h73xu61x url"><a href="/en/Focus_management_in_HTML" title="en/Focus_management_in_HTML">Focus management in HTML</a></span></div> - <span class="author-g-101xw018h73xu61x"> </span></div> -<h2 id="CSS_(separate_specifications)"><span class="author-g-lqfq0qqpckp8p3co">CSS</span> (separate specifications)</h2> -<h3 id="New_CSS_selectors"><span class="author-g-101xw018h73xu61x">New CSS selectors</span></h3> -<div class="ace-line"> - The following page shows the CSS3 support in Firefox and the new elements for HTML5.</div> -<div class="ace-line" id="magicdomid759"> - <span class="author-g-101xw018h73xu61x">Ref</span><span class="author-g-101xw018h73xu61x">erence: </span><span class="author-g-101xw018h73xu61x url"><a href="/en/Mozilla_CSS_support_chart" title="en/Mozilla_CSS_support_chart">Mozilla CSS support chart</a></span></div> -<h3 id="Typography">Typography</h3> -<p>The following pages show some of the typography attributes introduced by CSS3.</p> -<div class="ace-line"> - Text wrap:</div> -<ul> - <li><span class="author-g-101xw018h73xu61x url"><a href="/En/CSS/Word-wrap" title="en/CSS/word-wrap">Word-wrap</a></span></li> - <li><span class="author-g-101xw018h73xu61x url"><a href="/en/CSS/text-overflow" title="en/CSS/text-overflow">Text-overflow</a></span></li> - <li><a href="/en/CSS/@font-face" title="En/CSS/@font-face"><span class="author-g-101xw018h73xu61x url">@font-face</span></a></li> -</ul> -<h3 id="Layout"><span class="author-g-101xw018h73xu61x url">Layout</span></h3> -<div class="ace-line" id="magicdomid656"> - <span class="author-g-101xw018h73xu61x">Columns:</span></div> -<ul> - <li><span class="author-g-101xw018h73xu61x url"><a href="/en/CSS/Using_CSS_multi-column_layouts" title="en/CSS/CSS3_Columns">CSS3 Multi-columns</a></span></li> - <li><a href="/en/Using_flexbox" title="en/Using_flexbox">Flexbox</a></li> -</ul> -<h3 id="Visual">Visual</h3> -<div class="ace-line"> - The following pages show some of the visual attributes introduced by CSS3.</div> -<ul> - <li><span class="author-g-101xw018h73xu61x">Opacity:</span> <span class="author-g-101xw018h73xu61x url"><a href="/en/CSS/opacity" title="en/CSS/opacity">opacity</a></span></li> - <li><span class="author-g-101xw018h73xu61x">Hue Saturation Color:</span> <span class="author-g-101xw018h73xu61x url"><a href="/en/CSS/color" title="en/CSS/color">color</a></span></li> - <li><span class="author-g-101xw018h73xu61x">Rounded Corners:</span> <a href="/en/CSS/border-radius" title="En/CSS/Border-radius">border-radius</a></li> - <li><span class="author-g-101xw018h73xu61x">Gradients:</span> <span class="author-g-101xw018h73xu61x url"><a href="/en/CSS/Using_CSS_gradients" title="en/Using_gradients">Using gradients</a></span></li> - <li><span class="author-g-101xw018h73xu61x">Shadows:</span> - <ul> - <li><span class="author-g-101xw018h73xu61x url"><a href="/en/CSS/text-shadow" title="en/CSS/text-shadow">text-shadow</a></span></li> - <li><span class="author-g-101xw018h73xu61x url"><a href="/En/CSS/Box-shadow" title="En/CSS/Box-shadow">box-shadow</a></span></li> - </ul> - </li> - <li><span class="author-g-101xw018h73xu61x">Background:</span> <span class="author-g-101xw018h73xu61x url"><a href="/en/CSS/background" title="en/CSS/background">background</a></span></li> -</ul> -<h3 id="Dynamic_effects">Dynamic effects</h3> -<div class="ace-line"> - CSS also introduces dynamic effects:</div> -<ul> - <li><span class="author-g-101xw018h73xu61x">Transitions:</span> <span class="author-g-101xw018h73xu61x url"><a href="/en/CSS/CSS_transitions" title="en/CSS/CSS_transitions">CSS transitions</a></span></li> - <li><span class="author-g-101xw018h73xu61x">Animations:</span> <a href="/en/CSS/CSS_animations" title="en/CSS/CSS_animations">CSS animations</a></li> - <li><span class="author-g-101xw018h73xu61x">Transforms:</span> <span class="author-g-101xw018h73xu61x url"><a href="/En/CSS/Using_CSS_transforms" title="En/CSS/Using_CSS_transforms">Using CSS transforms</a></span></li> -</ul> -<p>{{ languages( { "ja": "ja/HTML/HTML5/HTML5_Thematic_Classification"} ) }}</p> 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 ---- -<p>以下技巧都是基于通用的知识和经验。</p> - -<p>一个好的页面不仅要给访客提供一个更有交互性的站点，同时也需要降低你的服务器压力和网络请求。后者对于那些高访问量的站点，或在有爆炸性新闻出现等特殊情况下会出现流量突增的站点来说尤为关键。</p> - -<p>页面加载性能的优化不仅仅是针对那些带宽有限的拨号上网或移动设备用户需要看的内容，对于提供给宽带用户访问的内容同样重要并且可以导致巨大的提升，哪怕对于那些拥有最快网速的访客。</p> - -<h2 id="Tips" name="Tips">Tips</h2> - -<h3 id=".E5.87.8F.E5.B0.8F.E9.A1.B5.E9.9D.A2.E7.9A.84.E5.A4.A7.E5.B0.8F" name=".E5.87.8F.E5.B0.8F.E9.A1.B5.E9.9D.A2.E7.9A.84.E5.A4.A7.E5.B0.8F">减小页面的大小</h3> - -<p>直至今日，页面的大小仍是页面加载性能的最重要因素。</p> - -<p>通过压缩——排除不必要空格，注释，和将脚本、CSS放入外部文件等减小页面的大小，可以在页面结构改变很小的情况下提高下载性能。</p> - -<p>诸如 <a class="external" href="http://tidy.sourceforge.net/">HTML Tidy</a> 这类的工具可以从有效的HTML源文件中自动截去行首空格和额外的空行，其它工具则可以通过重新格式化源代码来压缩JavaScript或者通过混淆源码将长<font color="#000000" face="Microsoft YaHei"><span style="font-size: 13px; line-height: normal; white-space: nowrap;">标识符</span></font>替换为短标识符来减小文件大小。</p> - -<h3 id="Minimize_the_number_of_files" name="Minimize_the_number_of_files">最小化文件数量</h3> - -<p>减少一个页面引用的文件数量可以降低在下载一个页面的过程中需要的<a href="https://developer.mozilla.org/en-US/docs/HTTP">HTTP</a>请求数量，从而减少这些请求的收发时间。</p> - -<p>根据其缓存设置，浏览器可能会为每个所引用的文件发送一个带 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/Headers/If-Modified-Since">If-Modified-Since</a> 的请求给网络服务器，以查询这些文件自上次加载后是否有被修改。查询引用文件上次修改时间会花费太多时间，导致网页首屏延迟，这是因为在渲染页面之前浏览器必须确认每个文件的修改时间。</p> - -<p>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.</p> - -<h3 id="使用_CDN">使用 CDN</h3> - -<p>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.</p> - -<p>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 <a href="http://www.webperformancetoday.com/2012/04/02/latency-101-what-is-latency-and-why-is-it-such-a-big-deal/">latency</a>.</p> - -<p>Further reading:</p> - -<ul> - <li><a href="https://www.incapsula.com/cdn-guide/what-is-cdn-how-it-works.html">Understanding CDNs</a></li> -</ul> - -<h3 id="Reduce_domain_lookups" name="Reduce_domain_lookups">减少域名查找</h3> - -<p>每个独立的域名都会消耗DNS查找的时间，页面加载时间会随着独立域名数量、CSS链接数量、JavaScript还有图片资源的数量增加而增加。</p> - -<p>这条可能算不上实用，然而，在你的页面中尽量少的使用来自不同域名的资源链接。</p> - -<ul> -</ul> - -<h3 id="Cache_reused_content" name="Cache_reused_content">缓存重用的内容</h3> - -<p>确保任何内容可以被缓存，并且拥有一个合理的有效期。</p> - -<p>特别要注意 <code>Last-Modified</code> 头，它会让页面高效的缓存。 自上次修改之后，这部分 header 指示将信息传递给用户代理（要加载这些信息的文件）。大部分网页服务器会自动追加 <code>Last-Modified</code> header 部分到静态页面（如 <code>.html</code>，<code>.css</code>），基于上次修改的日期储存在文件系统中。至于动态页面（如 <code>.php</code>，<code>.aspx</code>），便无法做到，这部分请求的头也就不会被发送出去。</p> - -<p>所以，特别是动态产生的页面，花点时间研究一下这个课题会是有益的。或许有些什么关联，无论怎样，这么做在那些不能被缓存的网页中都会节省很多的页面请求。</p> - -<p>更多信息：</p> - -<ol> - <li><a href="http://fishbowl.pastiche.org/2002/10/21/http_conditional_get_for_rss_hackers">HTTP Conditional Get for RSS Hackers</a></li> - <li><a href="http://annevankesteren.nl/archives/2005/05/http-304">HTTP 304: Not Modified</a></li> - <li><a href="http://en.wikipedia.org/wiki/HTTP_ETag">HTTP ETag on Wikipedia</a></li> - <li><a href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec13.html">Caching in HTTP</a></li> -</ol> - -<h3 id="Optimally_order_the_components_of_the_page" name="Optimally_order_the_components_of_the_page">高效地排列页面组件</h3> - -<p>在页面最初显示时，会首先下载页面内容以及所需的CSS和JavaScript，这样在页面加载时用户可以最快获得外观的反馈。由于内容通常都是文本，有利于在传输过程中压缩，因此给用户以更快的响应。</p> - -<p>页面中任何具有动态特性的资源需要在页面被完全加载后才可以使用，所以最好在初始化时关闭动态特性（disable dynamic features ），等页面加载完后再打开它。这样JavaScript就会在网页内容之后才加载，有助于提升页面加载的整体表现。</p> - -<h3 id="Reduce_the_number_of_inline_scripts" name="Reduce_the_number_of_inline_scripts">减少内联脚本的数量</h3> - -<p>内联脚本在页面加载过程中消耗很多资源，因为解析器认为内联脚本会改变页面结构。通常，尽量少的使用内联脚本和减少用<code>document.write()</code>来输出内容，在一定情况下可以加速整体页面的载入。现在浏览器中一般使用现代的 W3C DOM 方法操作页面内容，优于使用<code>document.write()</code>的传统方法。</p> - -<h3 id="Use_modern_CSS_and_valid_markup" name="Use_modern_CSS_and_valid_markup">使用现代CSS和合法标记</h3> - -<p>使用现代CSS减少标记（markup）的用量，可以减少对（spacer）图片的需求。在布局方面，图片通常可以用风格化的文本（text）来替代，这样会“节省”许多资源。</p> - -<p>使用合法标记还有其它优点。首先，浏览器在解释HTML时无需做错误校正（除了一些哲理性的问题，例如，是允许用户输入格式不一致，而后再用程序“校准”或统一化呢？ 还是加强约束规则，限制用户输入的格式？）。</p> - -<p>再者，合法标记可以让那些给你的网站做预处理的工具功能最大化。例如，<a class="external external-icon" href="http://tidy.sourceforge.net/">HTML Tidy</a> 可以移除空白（whitespace）和可选的末尾标记（ending tags）；然而，在有严重的错误标记的网页中这些工具便无法工作。</p> - -<h3 id="Chunk_your_content" name="Chunk_your_content">给内容分块</h3> - -<p>使用 table 布局是一种不应该再采用的传统方法，而应运用 <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats">floats</a>, <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning">positioning</a>, <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox">flexbox</a>, 或 <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids">grids</a> 来布局。</p> - -<p>当然，table 仍是不失为一种有效的展示表格数据的方式。为了帮助浏览器更快速的渲染你的页面，你应该避免嵌套 table。</p> - -<p>相较于这种深度的嵌套：</p> - -<pre class="line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>table</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>table</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>table</span><span class="punctuation token">></span></span> - ... - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>table</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>table</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>table</span><span class="punctuation token">></span></span></code></pre> - -<p>用下图这样的非嵌套结构更好一些：</p> - -<pre class="line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>table</span><span class="punctuation token">></span></span>...<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>table</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>table</span><span class="punctuation token">></span></span>...<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>table</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>table</span><span class="punctuation token">></span></span>...<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>table</span><span class="punctuation token">></span></span></code></pre> - -<p>可参见 <a href="https://www.w3.org/TR/css-flexbox-1/" title="https://www.w3.org/TR/css-flexbox-1/">CSS Flexible Box Layout</a> 和 <a href="https://www.w3.org/TR/css-grid-1/" title="https://www.w3.org/TR/css-grid-1/">CSS Grid Layout</a> 规范。</p> - -<h3 id="Minify_and_compress_SVG_assets">Minify and compress SVG assets</h3> - -<p>SVG produced by most drawing applications often contains unnecessary metadata which can be removed. Configure your servers, apply gzip compression for SVG assets.</p> - -<h3 id="Minify_and_compress_your_images">Minify and compress your images</h3> - -<p>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 <a href="https://compressjpeg.com/">Compress Jpeg</a> or <a href="https://tinypng.com/">Tiny PNG</a>,.</p> - -<h3 id="Specify_sizes_for_images_and_tables" name="Specify_sizes_for_images_and_tables">指定图像和表格的大小</h3> - -<p>如果浏览器可以即时决定你的照片（images）和表格（tables）宽高，它在展示网页时就不必进行内容重新排版。这不仅可以加速网页的显示，还能在网页完成加载的过程中防止恼人的布局改变。因此，图片的 <code>height</code> 和 <code>width</code> 应尽可能确定下来。</p> - -<p>表格可以使用 CSS 选择器：综合性能：</p> - -<pre class="line-numbers language-html"><code class="language-html">table-layout: fixed;</code></pre> - -<p>用 <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col"><col></a></code> 和 <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/colgroup"><colgroup></a></code> 元素来指定列宽。</p> - -<h3 id="Choose_your_user_agent_requirements_wisely" name="Choose_your_user_agent_requirements_wisely">合理的选择 user-agent</h3> - -<p>为使页面设计得到极大提升，应确保在工程中指定一个合理的user-agent。不要奢求你的内容在所有浏览器中都完美的展现，特别是在那些低版本的浏览器中。</p> - -<p>理想情况下，你的页面运行的最小环境要基于现代浏览器，这个浏览器起码要支持一些相关的标准（如 html5 标准）。可以是最近版本的火狐，IE，谷歌Chrome，Opera还有Safari。</p> - -<p>需要注意一下，这篇文章当中的许多tips都是些技术性常识，可以不必担心浏览器的支持需求而应用到任何user-agent和网页中去。</p> - -<h3 id="尽可能使用_async_和_defer">尽可能使用 async 和 defer</h3> - -<p>确保 JavaScript 脚本兼容 <a href="https://developer.mozilla.org/en-US/docs/HTML/Element/script#Attributes" title="https://developer.mozilla.org/en-US/docs/HTML/Element/script">async</a> 和 <a href="https://developer.mozilla.org/en-US/docs/HTML/Element/script#Attributes" title="https://developer.mozilla.org/en-US/docs/HTML/Element/script">defer</a>，任何时候都要尽可能使用 <a href="https://developer.mozilla.org/en-US/docs/HTML/Element/script#Attributes" title="https://developer.mozilla.org/en-US/docs/HTML/Element/script">async</a> ，特别是当你有较多的 script 标签时。</p> - -<p>这样在加载 JavaScript 的过程中页面就不会重新绘制，否则，浏览器在不具有这些特性的 script 标签后就不会重绘任何东西。</p> - -<p>注意：这些特性在页面第一次加载时会有所帮助，你可以这样用但不能指靠它在所有的浏览器中起作用。如果你遵循指南（guidelines）写出了非常优秀的 JavaScript 代码，也不必要再去修改它了。</p> - -<h2 id="Example_page_structure" name="Example_page_structure">页面结构示例</h2> - -<p>· <code>{{htmlelement('html')}}</code></p> - -<dl> - <dd>· <code>{{htmlelement('head')}}</code></dd> -</dl> - -<dl> - <dd> - <dl> - <dd>· <code>{{htmlelement('link')}} </code>...<br> - CSS 文件用来修饰页面外观。在调试维护中把不相关的 CSS 拆分在不同文件中，且尽量减少文件的数量可以提高性能。</dd> - </dl> - </dd> -</dl> - -<dl> - <dd> - <dl> - <dd>· <code>{{htmlelement('script')}} </code>...<br> - JavaScript 文件用来实现<strong>页面加载时需要的函数</strong>，而避免在页面加载后才能运行的 JavaScript。</dd> - <dd>在调试维护中把不相关的 JavaScript 拆分在不同文件中，且尽量减少文件的数量可以提高性能。</dd> - </dl> - </dd> -</dl> - -<dl> - <dd>· <code>{{htmlelement('body')}}</code></dd> - <dd>· 用户能在完整页面下载完之前就可以看到的页面小分块 ( <code>{{htmlelement('header')}}</code>/ <code>{{htmlelement('main')}}/</code> <code>{{htmlelement('table')}}</code>) 。</dd> -</dl> - -<dl> - <dd> - <dl> - <dd>· <code>{{htmlelement('script')}} </code>...</dd> - <dd>DHTML 脚本通常在页面完全加载或者所有必要的对象（objects）已初始化完毕之后才能运行。没有必要在页面内容之前加载这些脚本，这只会拖慢页面加载和初始化的体验。</dd> - <dd>在调试维护中把不相关的 script 拆分在不同文件中，且尽量减少文件的数量可以提高性能。</dd> - <dd>如有图像用到了反转效果，你应该在页面内容下载完后预加载这些图像。</dd> - </dl> - </dd> -</dl> - -<h2 id="Related_Links" name="Related_Links">相关链接</h2> - -<ul> - <li>书籍： <a href="http://www.websiteoptimization.com/">"Speed Up Your Site" by Andy King</a></li> - <li>非常棒、讲的很全 <a class="external external-icon" href="http://developer.yahoo.com/performance/rules.html" title="http://developer.yahoo.com/performance/rules.html">Best Practices for Speeding Up Your Web Site</a> (Yahoo!)</li> - <li>用来分析和优化的工具: <a href="https://developers.google.com/speed/pagespeed/" title="https://developers.google.com/speed/pagespeed/">Google PageSpeed Tools</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Paint_Flashing_Tool">Paint Flashing Tool</a></li> -</ul> - -<div class="originaldocinfo"> -<h3 id=".E6.96.87.E7.AB.A0.E5.8E.9F.E5.A7.8B.E4.BF.A1.E6.81.AF" name=".E6.96.87.E7.AB.A0.E5.8E.9F.E5.A7.8B.E4.BF.A1.E6.81.AF">文章原始信息</h3> - -<ul> - <li>作者：Bob Clary, Technology Evangelist, Netscape Communications</li> - <li>最后更新：Published 2003年4月4日</li> - <li>版权信息：Copyright © 2001-2003 Netscape. All rights reserved.</li> - <li>注意：This reprinted article was originally part of the DevEdge site.</li> -</ul> -</div> - -<div class="noinclude"></div> - -<p>{{ 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" } ) }}</p> 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 ---- -<p>{{LearnSidebar}}</p> - -<p><a href="/en-US/docs/Web/Guide/HTML/HTML5" title="/en-US/docs/Web/Guide/HTML/HTML5">HTML5</a>是具有扩展性的设计，它初衷是数据应与特定的元素相关联，但不需要任何定义。<a href="/en-US/docs/Web/HTML/Global_attributes#data-*">data-* 属性</a>允许我们在标准内于HTML元素中存储额外的信息，而不需要使用类似于 <a href="/en-US/docs/Web/API/Element.classList">classList</a>，标准外属性，DOM额外属性或是 <a href="/en-US/docs/Web/API/Node.setUserData">setUserData</a> 之类的技巧。</p> - -<h2 id="HTML_语法">HTML 语法</h2> - -<p>语法非常简单。所有在元素上以<code>data-</code>开头的属性为数据属性。比如说你有一篇文章，而你又想要存储一些不需要显示在浏览器上的额外信息。请使用data属性：</p> - -<pre class="brush: html"><article - id="electriccars" - data-columns="3" - data-index-number="12314" - data-parent="cars"> -... -</article></pre> - -<h2 id="JavaScript_访问">JavaScript 访问</h2> - -<p>在外部使用<a href="/en-US/docs/Web/JavaScript" title="/en-US/docs/Web/JavaScript">JavaScript</a>去访问这些属性的值同样非常简单。你可以使用{{domxref("Element.getAttribute", "getAttribute()")}}配合它们完整的HTML名称去读取它们，但标准定义了一个更简单的方法：{{domxref("DOMStringMap")}}你可以使用{{domxref("HTMLElement.dataset", "dataset")}}读取到数据。</p> - -<p>为了使用<code>dataset</code>对象去获取到数据属性，需要获取属性名中<code>data-</code>之后的部分(要注意的是破折号连接的名称需要改写为骆驼拼写法(如"index-number"转换为"indexNumber"))。</p> - -<pre class="brush: js">var article = document.querySelector('#electriccars'); - -article.dataset.columns // "3" -article.dataset.indexNumber // "12314" -article.dataset.parent // "cars"</pre> - -<p>每一个属性都是一个可读写的字符串。在上面的例子中，<code>article.dataset.columns = 5</code>.将会调整属性的值为5。</p> - -<h2 id="CSS_访问">CSS 访问</h2> - -<p>注意，data设定为HTML属性，他们同样能被<a href="/en-US/docs/Web/CSS" title="/en-US/docs/Web/CSS">CSS</a>访问。比如你可以通过<a href="/en-US/docs/Web/CSS/content" title="/en-US/docs/Web/CSS/content">generated content</a>使用函数{{cssxref("attr")}}来显示data-parent的内容：</p> - -<pre class="brush: css">article::before { - content: attr(data-parent); -}</pre> - -<p>你也同样可以在CSS中使用<a href="/en-US/docs/Web/CSS/Attribute_selectors" title="/en-US/docs/Web/CSS/Attribute_selectors">属性选择器</a>根据data来改变样式：</p> - -<pre class="brush: css">article[data-columns='3'] { - width: 400px; -} -article[data-columns='4'] { - width: 600px; -}</pre> - -<p>你可以在这个<a href="http://jsbin.com/ujiday/2/edit">JSBin </a>里看到全部演示。</p> - -<p>Data属性同样可以存储不断变化的信息，比如游戏的得分。使用CSS选择器与JavaScript去访问可以让你得到花俏的效果，这里你并不需要用常规的编写方案来编写代码。有关使用生成内容和CSS转换（<a href="https://jsbin.com/atawaz/3/edit">JSBin示例</a>）的示例，请参阅此<a href="https://www.youtube.com/watch?v=On_WyUB1gOk">视频</a>。</p> - -<p>数据值是字符串。必须在选择器中引用数值才能使样式生效。</p> - -<h2 id="Issues">Issues</h2> - -<p>不要在data attribute里储存需要显示及访问的内容，因为一些其他的技术可能访问不到它们。另外爬虫不能将data attribute的值编入索引中。</p> - -<p>IE的支持度及显示效果是最主要讨论的问题。IE11+支持这个标准，但所有更早期的版本都不支持<a href="http://caniuse.com/#feat=dataset">dataset</a>。为了支持IE10及以下的版本，你必须使用{{domxref("Element.getAttribute", "getAttribute()")}} 来访问。另外，<a href="http://jsperf.com/data-dataset">读取 data-attributes的行为</a>相比JS存储数据会慢。使用dataset 会比使用getAttribute()读取数据来得慢。</p> - -<p>尽管如此,对于那些与元素相关的数据,这依然是一个很好的解决方案.</p> - -<p>在FireFox 49.0.2(其他版本也有可能)中,javascript将无法读出包含1022个及以上字符的data属性(EcmaScript 4).</p> - -<h2 id="参阅" style="line-height: 30px; font-size: 2.14285714285714rem;">参阅</h2> - -<div> </div> - -<ul> - <li>该文章源自 <a href="https://hacks.mozilla.org/2012/10/using-data-attributes-in-javascript-and-css/" title="https://hacks.mozilla.org/2012/10/using-data-attributes-in-javascript-and-css/">Using data attributes in JavaScript and CSS on hacks.mozilla.org</a>.</li> - <li>在 SVG 2中也同样支持自定义data属性; 请参看{{domxref("SVGElement.dataset")}} 和{{SVGAttr("data-*")}}.</li> - <li><a href="http://www.sitepoint.com/use-html5-data-attributes/">How to use HTML5 data attributes</a> (Sitepoint)</li> -</ul> 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 ---- -<p>HTML5 通过HTML标签“audio”和“video”来支持嵌入式的媒体，使开发者能够方便地将媒体嵌入到HTML文档中。</p> - -<h2 id="嵌入媒体">嵌入媒体</h2> - -<p>在HTML中嵌入媒体：</p> - -<div style="overflow: hidden;"> -<pre class="brush: html"><video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls> - 你的浏览器不支持 <code>video</code> 标签. -</video></pre> - -<p>这个例子展示了一个带有回放控制器的可播放视频，视频来源于Theora网站。</p> - -<p>下面是一个将音频<span style="font-size: 14.3999996185303px; line-height: 16.7999992370605px;">嵌入</span>到HTML文档的例子。</p> - -<pre class="brush: html"><audio src="/test/audio.ogg"> -你的浏览器不支持audio标签 -</audio></pre> -</div> - -<p>src属性可以设置为一个音频文件的URL或者本地文件的路径。</p> - -<div style="overflow: hidden;"> -<pre class="brush: html"><audio src="audio.ogg" controls autoplay loop> -你的浏览器不支持audio标签 -</audio></pre> -</div> - -<p>这个例子的代码中使用了HTML的“audio”元素的一些属性：</p> - -<ul> - <li><code>controls</code> : 为网页中的音频显示标准的HTML5控制器。</li> - <li><code>autoplay</code> : 使音频自动播放。</li> - <li><code>loop</code> : 使音频自动重复播放。</li> -</ul> - -<div style="overflow: hidden;"> -<pre class="brush: html"><audio src="audio.mp3" preload="auto" controls></audio></pre> -</div> - -<p>preload属性用来缓冲audio元素的大文件，有三个属性值可供设置：</p> - -<ul> - <li><code>"none"</code> 不缓冲文件</li> - <li><code>"auto"</code> 缓冲音频文件</li> - <li><code>"metadata"</code> 仅仅缓冲文件的元数据</li> -</ul> - -<p>可以用 {{ HTMLElement("source") }} 标签来指定多个文件，以为不同浏览器提供可支持的编码格式。例如：</p> - -<pre class="brush: html"><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> -</pre> - -<p>当浏览器支持Ogg格式的时候， 该代码会播放Ogg文件。 如果浏览器不支持Ogg，浏览器会播放MPEG-4 file。参见列表 <a href="https://developer.mozilla.org/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements">audio和video元素支持的媒体格式</a> 来查看不同浏览器对视频音频编码格式的支持情况。</p> - -<p>你也可以指定视频文件需要的视频编解码器的值；这样允许浏览器做出更加正确的决定：</p> - -<pre class="brush: html"><video controls> - <source src="foo.ogg" type="video/ogg; codecs=dirac, speex"> - Your browser does not support the <code>video</code> element. -</video></pre> - -<p>在这里，我们指定video标签使用Dirac和Speex的视频编解码器。如果浏览器支持Ogg，但是不支持指定的编解码器，则视频不会被加载。</p> - -<p>如果类型属性没有被指定，媒体类型将返回至服务器然后检查浏览器是否可以解决；如果不能被执行，就检查下一个来源。如果没有任何一个指定的来源元素可以使用，则分派一个错误事件给video标签。如果指定了类型属性，那么将会与浏览器能够播放的类型做对比，如果其没有被识别，甚至不会被向服务器发出询问；相反，下一个来源会被同时检查。</p> - -<p>点击 <a href="https://developer.mozilla.org/en-US/docs/DOM/Media_events">媒体事件</a> 来查看完整的媒体回放事件列表。要查看不同浏览器支持的媒体格式的详细信息， 点击 <a href="https://developer.mozilla.org/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements">Media formats supported by the audio and video elements.</a></p> - -<h2 id="媒体回放控制">媒体回放控制</h2> - -<p>当你已经用新的元素将媒体嵌入 HTML 文档以后，你就可以用 JavaScript 代码 采用编程的方式来控制它们。比如说，如果你想（重新）开始播放，可以写如下的代码：</p> - -<pre class="brush: js">var v = document.getElementsByTagName("video")[0]; -v.play(); -</pre> - -<p>头一行是取得当前文档中第一个视频元素，下一行调用了该元素的 <a href="/en-US/docs/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement#play()" title="nsIDOMHTMLMediaElement#play()"><code>play()</code></a> 方法， 这一方法在实现媒体元素的接口中定义。</p> - -<p>控制一个 HTML5 音频播放器的播放、暂停、增减音量等则直接了当：</p> - -<pre class="brush: html"><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> -</pre> - -<h2 id="终止媒体下载">终止媒体下载</h2> - -<p>停止媒体播放很简单，只要调用 pause() 方法即可，然而浏览器还会继续下载媒体直至媒体元素被垃圾回收机制回收。</p> - -<p>以下是即刻停止媒体下载的方法：</p> - -<pre class="brush: js">var mediaElement = document.getElementById("myMediaElementID"); -mediaElement.pause(); -mediaElement.src=''; -//or -mediaElement.<code>removeAttribute("src");</code> -</pre> - -<p>通过移除媒体元素的 <code>src</code> 属性（或者直接将其设为一个空字符串——这取决于具体浏览器）， 你可以摧毁该元素的内部解码，从而结束媒体下载。removeAttribute() 操作并不干净， 而将<video>元素的 'src' 属性设为空字符串可能会引起我们不想要的请求（Mozilla Firefox 22）。</p> - -<p> </p> - -<h2 id="在媒体中查找">在媒体中查找</h2> - -<p>媒体元素支持在媒体的内容中从当前播放位置移到某个特定点。 这是通过设置元素的属性<code>currentTime的值来达成的；有关元素属性的详细信息请看</code>{{ domxref("HTMLMediaElement") }} 。 简单的设置那个你希望继续播放的以秒为单位时间值。</p> - -<p>你可以使用元素的属性seekable来决定媒体目前能查找的范围。它返回一个你可以查找的{{ domxref("TimeRanges") }} 时间对象。</p> - -<pre class="brush: js">var mediaElement = document.getElementById('mediaElementID'); -mediaElement.seekable.start(); // 返回开始时间 (in seconds) -mediaElement.seekable.end(); // 返回结束时间 (in seconds) -mediaElement.currentTime = 122; // 设定在 122 seconds -mediaElement.played.end(); // 返回浏览器播放的秒数 -</pre> - -<h2 id="标记播放范围">标记播放范围</h2> - -<p><font face="Consolas"><font color="#4d4e53">在给一个<audio>或者<video>元素标签</font>指定媒体的URI的时候，你可以选择性地加入一些额外信息来指定媒体将要播放的部分。要这样做的话，需要附加一个哈希标志("#")，后面跟着媒体片段的描述。</font></p> - -<p><font face="Consolas">一条指定时间范围的语句：</font></p> - -<pre>#t=[starttime][,endtime]</pre> - -<p>时间值可以被指定为秒数（如浮点数）或者为以冒号分隔时/分/秒格式（像2小时5分钟1秒表示为2:05:01）。</p> - -<p>一些例子：</p> - -<dl> - <dt><span class="nowiki">http://foo.com/video.ogg#t=10,20</span></dt> - <dd>指定视频播放范围为从第10秒到第20秒.</dd> - <dt><span class="nowiki">http://foo.com/video.ogg#t=,10.5</span></dt> - <dd>指定视频从开始播放到第10.5秒.</dd> - <dt><span class="nowiki">http://foo.com/video.ogg#t=,02:00:00</span></dt> - <dd>指定视频从开始播放到两小时.</dd> - <dt><span class="nowiki">http://foo.com/video.ogg#t=60</span></dt> - <dd>指定视频从第60秒播放到结束.</dd> -</dl> - -<div class="note"> -<p>媒体元素URI中播放范围部分的规范已被加入到 Gecko 9.0 {{ geckoRelease("9.0") }}. 当下, 这是Geoko <a class="external" href="http://www.w3.org/TR/media-frags/" title="http://www.w3.org/TR/media-frags/">Media Fragments URI specification</a> 唯一实现的部分，并且只有是在非地址栏给媒体元素指定来源时才可使用。</p> -</div> - -<h2 id="备选项">备选项</h2> - -<p>在HTML之间，例如，不支持HTML5媒体的浏览器可以处理媒体元素的开始和结束标记.你可以利用这一点给这些浏览器添加一些备项。</p> - -<p>此节给视频提供了两个可能的备选项，在各种情况下，如果浏览器支持HTML5视频，它就会被使用，否则，会使用备选项。</p> - -<h3 id="使用Flash">使用Flash</h3> - -<p>{{ HTMLElement("video") }} <font color="#4d4e53">标签</font>不被支持时可以使用Flash播放Flash格式的影像。</p> - -<pre class="brush: html"><video src="video.ogv" controls> - <object data="flvplayer.swf" type="application/x-shockwave-flash"> - <param value="flvplayer.swf" name="movie"/> - </object> -</video></pre> - -<p>注意不要在object标签中加入class、id以兼容IE以外的浏览器。</p> - -<h3 id="使用Java_小程序播放Ogg视频">使用Java 小程序播放Ogg视频</h3> - -<p>这里有一个名为Cortado的Java小程序，在不支持HTML5视频的浏览器你可以用它作为备选项来播放Ogg视频:</p> - -<pre class="brush: html"><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></pre> - -<p>如果你没有给cortado object元素创建一个备用的子元素，像上面的 {{ HTMLElement("p") }} 元素，没有安装java的Firfox3.5设备就会错误的通知用户需要安装一个插件才能查看页面内容.</p> - -<p>{{ h1_gecko_minversion("错误处理", "2.0") }}</p> - -<p>Geocko2.0首发{{ geckoRelease("2.0") }}, 错误处理已经被修订符合HTML5的最新版规范。 取缔把错误事件发送给媒体元素自生的方式，现在把它交付给子代中的 {{ HTMLElement("source") }}元素对应导致错误的来源。</p> - -<p>这使你可以查到是哪个资源加载失败，哪个是可用的。</p> - -<pre class="brush: html"><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></pre> - -<p>由于专利限制，Firefox不支持MP4和3GP，ID为“mp4_src"和"3gp_src"的 {{ HTMLElement("source") }} 元素在Ogg资源加载之前将会接收到错误事件。这些资源会根据出现的顺序尝试被加载，一旦有一个资源加载成功，剩下的资源就不会被加载。</p> - -<h3 id="没有资源加载成功时的检测">没有资源加载成功时的检测</h3> - -<p>检测是否所有的子{{ HTMLElement("source") }} 元素都加载失败，检查媒体元素的networkState属性值。如果值为HTMLMediaElement.NETWORK_NO_SOURCE，就可以知道所以的资源都加载失败了。</p> - -<p>如果这时你通过插入一个新的 {{ HTMLElement("source") }} 元素作为媒体元素的子元素的方法添加一个新资源，Gecko会尝试加载指定的资源。</p> - -<h3 id="没有资源可用时显示备用内容">没有资源可用时显示备用内容</h3> - -<p>另一个显示视频的备用内容的方法是在最后一个source元素上增加一个错误处理器。</p> - -<pre class="brush: html"><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> - -</pre> - -<pre class="brush: js">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); -</pre> - -<h2 id="相关文章">相关文章</h2> - -<ul> - <li>The media-related HTML elements: {{ HTMLElement("audio") }}, {{ HTMLElement("video") }}, {{ HTMLElement("source") }};</li> - <li><a href="/en-US/docs/Manipulating_video_using_canvas" title="Manipulating video using canvas">Manipulating video using canvas</a></li> - <li><a href="/en-US/docs/Introducing_the_Audio_API_Extension" title="Introducing the Audio API Extension">Introducing the Audio API Extension</a></li> - <li>{{ interface("nsIDOMHTMLMediaElement") }}</li> - <li><a href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements" title="Media formats supported by the audio and video elements">Media formats supported by the audio and video elements</a></li> - <li><a class="external" href="http://en.flossmanuals.net/ogg-theora/" title="http://en.flossmanuals.net/ogg-theora/">Theora Cookbook</a></li> - <li><a class="external" href="http://popcornjs.org/" title="http://popcornjs.org/">Popcorn.js - The HTML5 Media Framework</a></li> - <li><a class="external" href="http://www.html5video.org/kaltura-html5/" title="http://www.html5video.org/kaltura-html5/">Kaltura Video Library Solution</a>, a JavaScript library (mwEmbed) which supports a seamless fallback with HTML5, VLC Player, Java Cortado and OMTK Flash Vorbis player. (It is used by Wikimedia)</li> - <li><a class="external" href="http://omtk.org/flash/index.html" title="http://omtk.org/flash/index.html">OMTK - Flash</a>, a Flash library which implements a Vorbis decoder</li> - <li><a class="external" href="http://www.projekktor.com" title="http://www.projekktor.com">Projekktor Player</a>, a JavaScript wrapper for audio- and video-tags with flash fallback, open source, GPL</li> - <li><a class="external" href="http://www.theora.org/cortado/" title="http://www.theora.org/cortado/">Applet Cortado</a>, an audio/video playback solution in Java maintained by Xiph.org</li> - <li><a class="external" href="http://videojs.com" title="Video.js HTML5 Video Player">Video.JS</a>, an open source HTML5 video player and framework.</li> - <li><a class="external" href="http://mediaelementjs.com/" title="http://mediaelementjs.com/">MediaElement.js</a> - open source HTML5 audio/video framework with a custom Flash shim that mimic HTML5 media API for older browsers.</li> - <li><a class="external" href="http://www.hdwebplayer.com" title="http://www.hdwebplayer.com">Flv Player</a> - HTML5 fallback support video player</li> - <li><a href="/en-US/docs/DASH_Adaptive_Streaming" title="/en-US/docs/DASH_Adaptive_Streaming">DASH - Dynamic Adaptive Streaming over HTTP</a> - for HTML5 video</li> -</ul> 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/using_html_sections_and_outlines/index.html index 2eeb6fe100..2eeb6fe100 100644 --- a/files/zh-cn/web/guide/html/sections_and_outlines_of_an_html5_document/index.html +++ b/files/zh-cn/web/guide/html/using_html_sections_and_outlines/index.html 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 +--- +<p>不论你是刚开始Web开发，还是想学习Web开发，这些链接都能帮助你。至少，立刻我们就能在这儿看到很多链接。</p> +<div class="note"> + <strong>Note:</strong> This page is obviously a stub; we need to generate content here.</div> +<table class="mainpage-table" style="width: 1097px; height: 113px;"> + <tbody> + <tr> + <td> + <h2 id="文档主题">文档主题</h2> + <p>暂无文章，欢迎补充。</p> + </td> + <td> + <h2 id="资源">资源</h2> + <dl> + <dt> + <a class="external" href="http://www.w3schools.com.cn/" title="http://www.w3schools.com.cn/">w3schools</a></dt> + <dd> + 免费Web开发教程，从HTML入门到进阶Web技术。</dd> + </dl> + </td> + </tr> + </tbody> +</table> +<p> </p> 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 +--- +<p><strong>WOFF</strong>（网页开放字体格式） 是由 Mozilla 与 Type Supply, LettError 及其他组织协同开发的一种新的网页字体格式。它使用了一种压缩版本，类似于 TrueType, OpenType, Open Font 所采用的 SFNT 结构，不过还添加了共用数据及用户私有数据结构，其中包括了自定义空间，其允许厂家和经销商提供许可证。</p> + +<p>WOFF 有以下三点优势：</p> + +<ol> + <li>字体采用压缩格式，相对于使用不压缩的 TrueType, OpenType 的网站，将占用更少的带宽，获得更快的加载速度。</li> + <li>许多字体经销商并不愿意将 TrueType 或 OpenType 的许可证颁发给网站，他们更愿意颁发 WOFF 的许可证。这对于网站开发者来说将是一个福音。</li> + <li>无论是收费还是免费的浏览器厂家都喜欢 WOFF 格式，因此它很可能成为未来的主流与跨平台字体格式。</li> +</ol> + +<h2 id="使用_WOFF">使用 WOFF</h2> + +<p>通过 {{ cssxref("@font-face") }} 这个 CSS 属性来为你的网站使用 WOFF 字体。它的工作方式与 OpenType 和 TrueType 十分相似，除了因使用压缩技术而使你的内容更快地加载。</p> + +<h2 id="相关工具">相关工具</h2> + +<ul> + <li><a href="https://people.mozilla.org/~jkew/woff/">Tools for working with WOFF</a> fonts are available. <code>sfnt2woff</code> 和 <code>woff2sfnt</code> 将转换为 WOFF 或 OpenType.</li> +</ul> + +<h2 id="Specifications" name="Specifications">文档</h2> + +<table> + <thead> + <tr> + <th scope="col">文档</th> + <th scope="col">状态</th> + <th scope="col">注释</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('WOFF2.0', '', '')}}</td> + <td>{{Spec2('WOFF2.0')}}</td> + <td>新压缩算法</td> + </tr> + <tr> + <td>{{SpecName('WOFF1.0', '', '')}}</td> + <td>{{Spec2('WOFF1.0')}}</td> + <td>原始规格</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容">浏览器兼容</h2> + +<p>{{Compat("css.at-rules.font-face")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{ cssxref("@font-face") }} </li> +</ul> |