diff options
Diffstat (limited to 'files/zh-cn/web/css/css_lists_and_counters')
| -rw-r--r-- | files/zh-cn/web/css/css_lists_and_counters/consistent_list_indentation/index.html | 107 | ||||
| -rw-r--r-- | files/zh-cn/web/css/css_lists_and_counters/using_css_counters/index.html | 121 |
2 files changed, 228 insertions, 0 deletions
diff --git a/files/zh-cn/web/css/css_lists_and_counters/consistent_list_indentation/index.html b/files/zh-cn/web/css/css_lists_and_counters/consistent_list_indentation/index.html new file mode 100644 index 0000000000..8f5b208489 --- /dev/null +++ b/files/zh-cn/web/css/css_lists_and_counters/consistent_list_indentation/index.html @@ -0,0 +1,107 @@ +--- +title: 调整列表缩进 +slug: Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation +tags: + - CSS + - Guide + - NeedsUpdate + - Web + - 列表 + - 缩进 +translation_of: Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation +original_slug: Web/Guide/CSS/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/css/css_lists_and_counters/using_css_counters/index.html b/files/zh-cn/web/css/css_lists_and_counters/using_css_counters/index.html new file mode 100644 index 0000000000..3ae54b4940 --- /dev/null +++ b/files/zh-cn/web/css/css_lists_and_counters/using_css_counters/index.html @@ -0,0 +1,121 @@ +--- +title: 使用CSS计数器 +slug: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters +tags: + - CSS + - CSS List + - Web + - counter + - 教程 +translation_of: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters +original_slug: Web/Guide/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> |