diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
| commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
| tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/zh-cn/web/guide/css | |
| parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
| download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip | |
initial commit
Diffstat (limited to 'files/zh-cn/web/guide/css')
38 files changed, 7841 insertions, 0 deletions
diff --git a/files/zh-cn/web/guide/css/block_formatting_context/index.html b/files/zh-cn/web/guide/css/block_formatting_context/index.html new file mode 100644 index 0000000000..04ccc3bedb --- /dev/null +++ b/files/zh-cn/web/guide/css/block_formatting_context/index.html @@ -0,0 +1,198 @@ +--- +title: 块格式化上下文 +slug: Web/Guide/CSS/Block_formatting_context +tags: + - BFC + - Block Formatting Context + - CSS + - 块格式化上下文 +translation_of: Web/Guide/CSS/Block_formatting_context +--- +<p>{{ CSSRef() }}</p> + +<p><strong title="BFC">块格式化上下文（Block Formatting Context，BFC）</strong> 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。</p> + +<p>下列方式会创建<strong>块格式化上下文</strong>：</p> + +<ul> + <li>根元素（<code><html>）</code></li> + <li>浮动元素（元素的 {{ cssxref("float") }} 不是 <code>none</code>）</li> + <li>绝对定位元素（元素的 {{ cssxref("position") }} 为 <code>absolute</code> 或 <code>fixed</code>）</li> + <li>行内块元素（元素的 {{ cssxref("display") }} 为 <code>inline-block</code>）</li> + <li>表格单元格（元素的 {{ cssxref("display") }} 为 <code>table-cell</code>，HTML表格单元格默认为该值）</li> + <li>表格标题（元素的 {{ cssxref("display") }} 为 <code>table-caption</code>，HTML表格标题默认为该值）</li> + <li>匿名表格单元格元素（元素的 {{ cssxref("display") }} 为 <code>table<font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">、</span></font></code><code>table-row</code>、 <code>table-row-group<font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">、</span></font></code><code>table-header-group<font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">、</span></font></code><code>table-footer-group</code>（分别是HTML table、row、tbody、thead、tfoot 的默认属性）或 <code>inline-table</code>）</li> + <li>{{ cssxref("overflow") }} 值不为 <code>visible</code> 的块元素</li> + <li>{{ cssxref("display") }} 值为 <code><a href="https://drafts.csswg.org/css-display/#valdef-display-flow-root">flow-root</a></code> 的元素</li> + <li>{{ cssxref("contain") }} 值为 <code>layout</code>、<code>content </code>或 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">paint</span></font> 的元素</li> + <li>弹性元素（{{ cssxref("display") }} 为 <code>flex</code> 或 <code>inline-flex </code>元素的直接子元素）</li> + <li>网格元素（{{ cssxref("display") }} 为 <code>grid</code> 或 <code>inline-grid</code> 元素的直接子元素）</li> + <li>多列容器（元素的 {{ cssxref("column-count") }} 或 {{ cssxref("column-width") }} 不为 <code>auto<font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">，包括 </span></font></code><code>column-count</code> 为 <code>1</code>）</li> + <li><code>column-span</code> 为 <code>all</code> 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（<a href="https://github.com/w3c/csswg-drafts/commit/a8634b96900279916bd6c505fda88dda71d8ec51">标准变更</a>，<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=709362">Chrome bug</a>）。</li> +</ul> + +<p>块格式化上下文包含创建它的元素内部的所有内容.</p> + +<p>块格式化上下文对浮动定位（参见 {{ cssxref("float") }}）与清除浮动（参见 {{ cssxref("clear") }}）都很重要。浮动定位和清除浮动时只会应用于同一个BFC内的元素。浮动不会影响其它BFC中元素的布局，而清除浮动只能清除同一BFC中在它前面的元素的浮动。外边距折叠（<a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Margin collapsing</a>）也只会发生在属于同一BFC的块级元素之间。</p> + +<h2 id="Specifications" name="Specifications">范例</h2> + +<h3 id="让浮动内容和周围的内容等高">让浮动内容和周围的内容等高</h3> + +<p>为了更好的理解BFC，我们先看看下面这些。</p> + +<p>在下面的例子中，我们让 <code><div></code> 元素浮动，并给它一个边框效果。<code><div> </code>里的内容现在已经在浮动元素周围浮动起来了。由于浮动的元素比它旁边的元素高，所以 <code><div> </code>的边框穿出了浮动。正如我们在这篇文章中 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow">guide to in-flow and out of flow elements</a> 解释的，浮动脱离了文档流，所以 <code><div></code> 的 <code>background</code> 和 <code>border</code> 仅仅包含了内容，不包含浮动。</p> + +<h4 id="使用overflow_auto">使用<code>overflow: auto</code></h4> + +<p>创建一个会包含这个浮动的 BFC，通常的做法是设置父元素 <code>overflow: auto</code> 或者设置其他的非默认的 <code>overflow: visible</code> 的值。</p> + +<p>设置 <code>overflow: auto</code> 创建一个新的BFC来包含这个浮动。我们的 <code><div></code> 元素现在变成布局中的迷你布局。任何子元素都会被包含进去。</p> + +<p>使用 <code>overflow</code> 来创建一个新的 BFC，是因为 <code>overflow</code> 属性告诉浏览器你想要怎样处理溢出的内容。当你使用这个属性只是为了创建 BFC 的时候，你可能会发现一些不想要的问题，比如滚动条或者一些剪切的阴影，需要注意。另外，对于后续的开发，可能不是很清楚当时为什么使用 <code>overflow</code>。所以你最好添加一些注释来解释为什么这样做。</p> + +<h4 id="使用display_flow-root">使用<code>display: flow-root</code></h4> + +<p>一个新的 <code>display</code> 属性的值，它可以创建无副作用的 BFC。在父级块中使用 <code>display: flow-root</code> 可以创建新的 BFC。</p> + +<p>给 <code><div></code> <code>display: flow-root</code> 属性后，<code><div></code> 中的所有内容都会参与 BFC，浮动的内容不会从底部溢出。</p> + +<p>关于值 <code>flow-root</code>的这个名字，当你明白你实际上是在创建一个行为类似于根元素 （浏览器中的<code><html></code>元素） 的东西时，就能发现这个名字的意义了——即创建一个上下文，里面将进行 flow layout。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><code><div class="blue"></div> +<div class="red-outer"> + <div class="red-inner">red inner</div> +</div></code></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate"><code>.blue, .red-inner { + height: 50px; + margin: 10px 0; +} + +.blue { + background: blue; +} + +.red-outer { + overflow: hidden; + background: red; +}</code></pre> + +<p>{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/float.html", '100%', 720)}}</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/bfc-overflow.html", '100%', 720)}}</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/bfc-flow-root.html", '100%', 620)}}</p> + +<h3 id="Exclude_external_floats">Exclude external floats</h3> + +<p>In the following example, we are using <code>display:flow-root</code> and floats to implement double columns layout, beacuse an element in the normal flow that establishes a new <abbr title="Block Formatting Context">BFC</abbr> must not overlap the margin box of any floats in the same block formatting context as the element itself.</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="notranslate"><section> + <div class="float">Try to resize this outer float</div> + <div class="box"><p>Normal</p></div> +</section> +<section> + <div class="float">Try to resize this outer float</div> + <div class="box" style="display:flow-root"><p><code>display:flow-root</code><p></div> +</section></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="notranslate">section { + height:150px; +} +.box { + background-color: rgb(224, 206, 247); + border: 5px solid rebeccapurple; +} +.box[style] { + background-color: aliceblue; + border: 5px solid steelblue; +} +.float { + float: left; + overflow: hidden; /* required by resize:both */ + resize: both; + margin-right:25px; + width: 200px; + height: 100px; + background-color: rgba(255, 255, 255, .75); + border: 1px solid black; + padding: 10px; +} +</pre> + +<p>{{EmbedLiveSample("example2", 200, 300)}}</p> + +<p>Rather than inline-blocks with width:<percentage>, in this case we don't have to specify the width of the right div.</p> + +<p>Note that flexbox is a more efficient way to implement muti columns layout in morden CSS.</p> + +<h3 id="外边距塌陷">外边距塌陷</h3> + +<p>创建新的 BFC 避免两个相邻 <code><div></code> 之间的 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">外边距合并</a> 问题</p> + +<h4 id="HTML_3">HTML</h4> + +<pre class="notranslate"><div class="blue"></div> +<div class="red-outer"> + <div class="red-inner">red inner</div> +</div> +</pre> + +<h4 id="CSS_3">CSS</h4> + +<pre class="notranslate">.blue, .red-inner { + height: 50px; + margin: 10px 0; +} + +.blue { + background: blue; +} + +.red-outer { + overflow: hidden; + background: red; +} +</pre> + +<p>{{EmbedLiveSample("Margin_collapsing", 120, 120)}}</p> + +<h2 id="Specifications" name="Specifications">规范</h2> + +<table> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Display', '#block-formatting-context', 'Block Formatting Context')}}</td> + <td>{{Spec2('CSS3 Display')}}</td> + <td>define BFC(abbr) etc.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'visuren.html#block-formatting', 'Block Formatting Context')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="See_Also" name="See_Also">另见</h2> + +<ul> + <li>{{ cssxref("float") }}、{{ cssxref("clear") }}</li> + <li>{{css_key_concepts}}</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 new file mode 100644 index 0000000000..1426940c48 --- /dev/null +++ b/files/zh-cn/web/guide/css/consistent_list_indentation/index.html @@ -0,0 +1,106 @@ +--- +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 new file mode 100644 index 0000000000..4a8fa17797 --- /dev/null +++ b/files/zh-cn/web/guide/css/counters/index.html @@ -0,0 +1,120 @@ +--- +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 new file mode 100644 index 0000000000..4a3e2bb7c9 --- /dev/null +++ b/files/zh-cn/web/guide/css/css_image_sprites/index.html @@ -0,0 +1,49 @@ +--- +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 new file mode 100644 index 0000000000..922f62c536 --- /dev/null +++ b/files/zh-cn/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/web/guide/css/getting_started/boxes/index.html b/files/zh-cn/web/guide/css/getting_started/boxes/index.html new file mode 100644 index 0000000000..05d0dffafc --- /dev/null +++ b/files/zh-cn/web/guide/css/getting_started/boxes/index.html @@ -0,0 +1,330 @@ +--- +title: 盒模型 +slug: Web/Guide/CSS/Getting_started/Boxes +translation_of: Learn/CSS/Building_blocks +--- +<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 new file mode 100644 index 0000000000..8bc02fb698 --- /dev/null +++ b/files/zh-cn/web/guide/css/getting_started/cascading_and_inheritance/index.html @@ -0,0 +1,124 @@ +--- +title: 层叠和继承 +slug: Web/Guide/CSS/Getting_started/Cascading_and_inheritance +translation_of: Learn/CSS/Building_blocks/Cascade_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 new file mode 100644 index 0000000000..bab181afd1 --- /dev/null +++ b/files/zh-cn/web/guide/css/getting_started/color/index.html @@ -0,0 +1,332 @@ +--- +title: Color +slug: Web/Guide/CSS/Getting_started/Color +translation_of: Learn/CSS/Introduction_to_CSS/Values_and_units#Colors +--- +<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 new file mode 100644 index 0000000000..f3f9a0797b --- /dev/null +++ b/files/zh-cn/web/guide/css/getting_started/content/index.html @@ -0,0 +1,160 @@ +--- +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 new file mode 100644 index 0000000000..b43fc34302 --- /dev/null +++ b/files/zh-cn/web/guide/css/getting_started/how_css_works/index.html @@ -0,0 +1,120 @@ +--- +title: CSS如何工作 +slug: Web/Guide/CSS/Getting_started/How_CSS_works +translation_of: Learn/CSS/First_steps/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 new file mode 100644 index 0000000000..9e9aefd3d9 --- /dev/null +++ b/files/zh-cn/web/guide/css/getting_started/index.html @@ -0,0 +1,58 @@ +--- +title: CSS入门教程 +slug: Web/Guide/CSS/Getting_started +tags: + - CSS + - 'CSS:Getting_Started' + - CSS入门 + - CSS教程 + - Web + - 初学者 + - 教程 +translation_of: Learn/CSS/First_steps +--- +<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 new file mode 100644 index 0000000000..c5ccd6e901 --- /dev/null +++ b/files/zh-cn/web/guide/css/getting_started/javascript/index.html @@ -0,0 +1,171 @@ +--- +title: JavaScript 与 CSS +slug: Web/Guide/CSS/Getting_started/JavaScript +translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents +--- +<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 new file mode 100644 index 0000000000..cd58ff4d63 --- /dev/null +++ b/files/zh-cn/web/guide/css/getting_started/layout/index.html @@ -0,0 +1,367 @@ +--- +title: 布局 +slug: Web/Guide/CSS/Getting_started/Layout +translation_of: Learn/CSS/CSS_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 new file mode 100644 index 0000000000..94cb7f3c1a --- /dev/null +++ b/files/zh-cn/web/guide/css/getting_started/lists/index.html @@ -0,0 +1,323 @@ +--- +title: Lists +slug: Web/Guide/CSS/Getting_started/Lists +translation_of: Learn/CSS/Styling_text/Styling_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 new file mode 100644 index 0000000000..ef181eedcc --- /dev/null +++ b/files/zh-cn/web/guide/css/getting_started/media/index.html @@ -0,0 +1,391 @@ +--- +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 new file mode 100644 index 0000000000..a3ef5d29ec --- /dev/null +++ b/files/zh-cn/web/guide/css/getting_started/readable_css/index.html @@ -0,0 +1,166 @@ +--- +title: 创建可读性良好的CSS +slug: Web/Guide/CSS/Getting_started/Readable_CSS +translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable +--- +<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 new file mode 100644 index 0000000000..51f8693438 --- /dev/null +++ b/files/zh-cn/web/guide/css/getting_started/selectors/index.html @@ -0,0 +1,413 @@ +--- +title: 选择器 +slug: Web/Guide/CSS/Getting_started/Selectors +translation_of: Learn/CSS/Building_blocks/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 new file mode 100644 index 0000000000..f2e753baca --- /dev/null +++ b/files/zh-cn/web/guide/css/getting_started/svg_and_css/index.html @@ -0,0 +1,191 @@ +--- +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 new file mode 100644 index 0000000000..7a7e442207 --- /dev/null +++ b/files/zh-cn/web/guide/css/getting_started/tables/index.html @@ -0,0 +1,508 @@ +--- +title: 表格 +slug: Web/Guide/CSS/Getting_started/Tables +translation_of: Learn/CSS/Building_blocks/Styling_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 new file mode 100644 index 0000000000..2f8f9f7629 --- /dev/null +++ b/files/zh-cn/web/guide/css/getting_started/text_styles/index.html @@ -0,0 +1,157 @@ +--- +title: 文本样式 +slug: Web/Guide/CSS/Getting_started/Text_styles +translation_of: Learn/CSS/Styling_text/Fundamentals +--- +<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 new file mode 100644 index 0000000000..0f015ab172 --- /dev/null +++ b/files/zh-cn/web/guide/css/getting_started/what_is_css/index.html @@ -0,0 +1,114 @@ +--- +title: What is CSS +slug: Web/Guide/CSS/Getting_started/What_is_CSS +translation_of: Learn/CSS/First_steps/How_CSS_works +--- +<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 new file mode 100644 index 0000000000..f312b080a3 --- /dev/null +++ b/files/zh-cn/web/guide/css/getting_started/why_use_css/index.html @@ -0,0 +1,104 @@ +--- +title: 为何使用CSS？ +slug: Web/Guide/CSS/Getting_started/Why_use_CSS +tags: + - CSS + - 'CSS:入门' + - NeedsLiveSample +translation_of: Learn/CSS/First_steps/How_CSS_works +--- +<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/getting_started/xml_data/index.html b/files/zh-cn/web/guide/css/getting_started/xml_data/index.html new file mode 100644 index 0000000000..bbdbd784f5 --- /dev/null +++ b/files/zh-cn/web/guide/css/getting_started/xml_data/index.html @@ -0,0 +1,241 @@ +--- +title: XML 数据 +slug: Web/Guide/CSS/Getting_started/XML_data +tags: + - CSS + - Web + - 中级 + - 实例 + - 开始学CSS + - 指南 + - 需要更新 +translation_of: Archive/Beginner_tutorials/XML_data +--- +<p>{{ CSSTutorialTOC() }}</p> + +<p>此页面包含一个如何使用CSS和XML数据的示例。</p> + +<p>你将创建一个XML文档范例，和使之在浏览器中展现的样式表。</p> + +<p>这是 <a href="../../../../en/CSS/Getting_Started" rel="internal">CSS tutorial</a> 第二部分的第三节。<br> + 前一章节: <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/SVG_and_CSS" title="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/SVG_and_CSS">SVG</a><br> + 后一章节: <a href="/en/CSS/Getting_Started/XBL_bindings" title="https://developer.mozilla.org/en/CSS/Getting_Started/XBL_bindings">XBL binding</a></p> + +<h3 id="Information:_XML_data" name="Information:_XML_data">信息: XML 数据</h3> + +<p><em><a href="/en/XML" title="en/XML">XML</a></em> (eXtensible Markup Language 可扩展标记语言) 是一种可用于任何类型的结构化数据的通用型语言。</p> + +<p>默认情况下，Mozilla 浏览器会将 XML 按照非常类似XML文件的原始数据的方式展现。你可以看到定义数据结构的具体的标签。</p> + +<p>通过将你的XML文档与CSS样式表链接，你可以定义展现XML的其他方式。为了实现这一点，样式表建立了映射规则，将XML文档中的标签映射为HTML中使用的展现类型。</p> + +<table style="background-color: #fffff4; border: 1px solid #36b; margin-bottom: 1em; padding: 1em;"> + <caption>示例</caption> + <tbody> + <tr> + <td>XML文档中的数据采用<<code>INFO></code> 标签。你希望文档中的 <small>INFO</small> 元素像 HTML 的段落一样展现。. + <p>在该文档的样式表中，你指定了 <small>INFO</small> 元素的展现方式：</p> + + <div style="width: 30em;"> + <pre class="eval"> +INFO { + display: block; + margin: 1em 0; + } +</pre> + </div> + </td> + </tr> + </tbody> +</table> + +<p>在display属性中最常用的值是：</p> + +<table style="margin-left: 2em;"> + <tbody> + <tr> + <td style="padding-right: 2em;"><code>block</code></td> + <td>Displayed like HTML's <small>DIV</small> (for headings, paragraphs)</td> + </tr> + <tr> + <td><code>inline</code></td> + <td>Displayed like HTML's <small>SPAN</small> (for emphasis within text)</td> + </tr> + </tbody> +</table> + +<p>如同对待HTML一样，通过设置字体、间距和其他细节来添加你自己的样式规则。</p> + +<table style="background-color: #f4f4f4; border: 1px solid #36b; margin-bottom: 1em; padding: 1em;"> + <caption>更多细节</caption> + <tbody> + <tr> + <td>其他display的值可以展现类似于列表项目的元素，或者类似表格组件的元素。 + <p>请查看CSS规范中的<a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-display">The display property</a> ，来获取全部display类型。</p> + + <p>单独使用CSS，display的结构必须与文档结构一致。其它方式是修改display的结构—例如：使用XBL添加内容，使用JavaScript修改DOM。</p> + + <p>请查看 <a href="/en/XML" title="en/XML">XML</a> 页面，来获取更多关于XML in Mozilla的信息。</p> + </td> + </tr> + </tbody> +</table> + +<h3 id="Action:_An_XML_demonstration" name="Action:_An_XML_demonstration">实例: XML 演示</h3> + +<p>新建一个 XML 文件： <code>doc9.xml </code>。复制粘帖以下内容，注意滚动以获得全部：</p> + +<div style="width: 48em; height: 12em; overflow: auto;"> +<pre><?xml version="1.0"?> +<!-- XML demonstration --> + +<?xml-stylesheet type="text/css" href="style9.css"?> + +<!DOCTYPE planet> +<planet> + +<ocean> +<name>Arctic</name> +<area>13,000</area> +<depth>1,200</depth> +</ocean> + +<ocean> +<name>Atlantic</name> +<area>87,000</area> +<depth>3,900</depth> +</ocean> + +<ocean> +<name>Pacific</name> +<area>180,000</area> +<depth>4,000</depth> +</ocean> + +<ocean> +<name>Indian</name> +<area>75,000</area> +<depth>3,900</depth> +</ocean> + +<ocean> +<name>Southern</name> +<area>20,000</area> +<depth>4,500</depth> +</ocean> + +</planet> +</pre> +</div> + +<p>新建一个 CSS 文件： <code>style9.css 。</code>复制粘帖以下内容，注意滚动以获得全部：</p> + +<div style="width: 48em; height: 12em; overflow: auto;"> +<pre>/*** XML demonstration ***/ + +planet:before { + display: block; + width: 8em; + font-weight: bold; + font-size: 200%; + content: "Oceans"; + margin: -.75em 0px .25em -.25em; + padding: .1em .25em; + background-color: #cdf; + } + +planet { + display: block; + margin: 2em 1em; + border: 4px solid #cdf; + padding: 0px 1em; + background-color: white; + } + +ocean { + display: block; + margin-bottom: 1em; + } + +name { + display: block; + font-weight: bold; + font-size: 150%; + } + +area { + display: block; + } + +area:before { + content: "Area: "; + } + +area:after { + content: " million km\B2"; + } + +depth { + display: block; + } + +depth:before { + content: "Mean depth: "; + } + +depth:after { + content: " m"; + } +</pre> +</div> + +<p>在你的浏览器中打开该文档：</p> + +<table style="border: 2px outset #36b; padding: 1em;"> + <tbody> + <tr> + <td> + <div style="border: 2px solid #cdf; border-bottom: none; padding: .5em 8em 1em .5em;"> + <p style="font-size: 150%; font-weight: bold; margin: -1em 0px 0px 0px; padding: .1em .25em; background-color: #cdf; width: 8em;">Oceans</p> + + <p style="font-size: 75%; margin: .25em 0px 0px 0px; line-height: 110%;"><strong>Arctic</strong><br> + Area: 13,000 million km²<br> + Mean depth: 1,200 m</p> + + <p style="font-size: 75%; margin: .5em 0px 0px 0px; line-height: 110%;"><strong>Atlantic</strong><br> + Area: 87,000 million km²<br> + Mean depth: 3,900 m</p> + + <p style="font-size: 75%; margin: .5em 0px 0px 0px; line-height: 110%;"><strong>. . .</strong></p> + </div> + </td> + </tr> + </tbody> +</table> + +<p><br> + 此演示的注解：</p> + +<ul> + <li>Unicode 字符 上标 2（在 "million km²" 中），在CSS文件中被编码为 <code>\B2</code> 。</li> + <li>标题 "Oceans" 有一个负的上边距，所以它可以上移至边框顶部显示。</li> +</ul> + +<p> </p> + +<table style="background-color: #fffff4; border: 1px solid #36b; margin-bottom: 1em; padding: 1em;"> + <caption>挑战</caption> + <tbody> + <tr> + <td>修改样式表使文档可以作为表格展现。 + <p>（请参见 CSS 规范的 <a class="external" href="http://www.w3.org/TR/CSS21/tables.html">Tables</a> 章节作为参考。）</p> + </td> + </tr> + </tbody> +</table> + +<h4 id="What_next.3F" name="What_next.3F">接下来？</h4> + +<p>如果你难以理解此页面，或者你有其他意见，请提交到讨论页： <a href="/Talk:en/CSS/Getting_Started/XML_data" title="Talk:en/CSS/Getting_Started/XML_data">Discussion</a> 。</p> + +<p>这是本教程的最后一页。请查看此 wiki 的 <a href="/en/CSS" title="en/CSS">CSS</a> 主页，获取更多Mozilla CSS 信息。</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 new file mode 100644 index 0000000000..bfb15efa67 --- /dev/null +++ b/files/zh-cn/web/guide/css/media_queries/index.html @@ -0,0 +1,412 @@ +--- +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 new file mode 100644 index 0000000000..8fa031d0b8 --- /dev/null +++ b/files/zh-cn/web/guide/css/scaling_background_images/index.html @@ -0,0 +1,113 @@ +--- +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 +--- +<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 new file mode 100644 index 0000000000..0d33436410 --- /dev/null +++ b/files/zh-cn/web/guide/css/testing_media_queries/index.html @@ -0,0 +1,90 @@ +--- +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 new file mode 100644 index 0000000000..acd3b034ce --- /dev/null +++ b/files/zh-cn/web/guide/css/understanding_z_index/adding_z-index/index.html @@ -0,0 +1,158 @@ +--- +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 new file mode 100644 index 0000000000..19f49650d1 --- /dev/null +++ b/files/zh-cn/web/guide/css/understanding_z_index/index.html @@ -0,0 +1,47 @@ +--- +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 new file mode 100644 index 0000000000..9312c1759d --- /dev/null +++ b/files/zh-cn/web/guide/css/understanding_z_index/stacking_and_float/index.html @@ -0,0 +1,158 @@ +--- +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 new file mode 100644 index 0000000000..59f298d269 --- /dev/null +++ b/files/zh-cn/web/guide/css/understanding_z_index/stacking_context_example_1/index.html @@ -0,0 +1,133 @@ +--- +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 new file mode 100644 index 0000000000..3c21bef062 --- /dev/null +++ b/files/zh-cn/web/guide/css/understanding_z_index/stacking_context_example_2/index.html @@ -0,0 +1,142 @@ +--- +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 new file mode 100644 index 0000000000..f7d2972c7c --- /dev/null +++ b/files/zh-cn/web/guide/css/understanding_z_index/stacking_context_example_3/index.html @@ -0,0 +1,190 @@ +--- +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 new file mode 100644 index 0000000000..a5aaebdc95 --- /dev/null +++ b/files/zh-cn/web/guide/css/understanding_z_index/stacking_without_z-index/index.html @@ -0,0 +1,161 @@ +--- +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 new file mode 100644 index 0000000000..6d96e3e198 --- /dev/null +++ b/files/zh-cn/web/guide/css/understanding_z_index/the_stacking_context/index.html @@ -0,0 +1,240 @@ +--- +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 new file mode 100644 index 0000000000..21460cd820 --- /dev/null +++ b/files/zh-cn/web/guide/css/using_css_gradients/index.html @@ -0,0 +1,717 @@ +--- +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 new file mode 100644 index 0000000000..593e14fd47 --- /dev/null +++ b/files/zh-cn/web/guide/css/using_multi-column_layouts/index.html @@ -0,0 +1,130 @@ +--- +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 new file mode 100644 index 0000000000..65883df437 --- /dev/null +++ b/files/zh-cn/web/guide/css/using_the__colon_target_selector/index.html @@ -0,0 +1,68 @@ +--- +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 new file mode 100644 index 0000000000..640f3abbc9 --- /dev/null +++ b/files/zh-cn/web/guide/css/visual_formatting_model/index.html @@ -0,0 +1,282 @@ +--- +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> |