diff options
Diffstat (limited to 'files/zh-cn/orphaned/web/guide')
| -rw-r--r-- | files/zh-cn/orphaned/web/guide/css/css基础/index.html | 57 | ||||
| -rw-r--r-- | files/zh-cn/orphaned/web/guide/html/html/index.html | 181 |
2 files changed, 238 insertions, 0 deletions
diff --git a/files/zh-cn/orphaned/web/guide/css/css基础/index.html b/files/zh-cn/orphaned/web/guide/css/css基础/index.html new file mode 100644 index 0000000000..922f62c536 --- /dev/null +++ b/files/zh-cn/orphaned/web/guide/css/css基础/index.html @@ -0,0 +1,57 @@ +--- +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/orphaned/web/guide/html/html/index.html b/files/zh-cn/orphaned/web/guide/html/html/index.html new file mode 100644 index 0000000000..ee911ca9a1 --- /dev/null +++ b/files/zh-cn/orphaned/web/guide/html/html/index.html @@ -0,0 +1,181 @@ +--- +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> |