diff options
Diffstat (limited to 'files/zh-cn/conflicting/learn/css/styling_text')
3 files changed, 638 insertions, 0 deletions
diff --git a/files/zh-cn/conflicting/learn/css/styling_text/fundamentals/index.html b/files/zh-cn/conflicting/learn/css/styling_text/fundamentals/index.html new file mode 100644 index 0000000000..fd67fc382c --- /dev/null +++ b/files/zh-cn/conflicting/learn/css/styling_text/fundamentals/index.html @@ -0,0 +1,156 @@ +--- +title: 理解下划线 +slug: Understanding_Underlines +tags: + - 'CSS:Articles' +translation_of: >- + Learn/CSS/Styling_text/Fundamentals#Font_style_font_weight_text_transform_and_text_decoration +translation_of_original: Understanding_Underlines +--- +<p>对于 Web 设计者来说, 想移除其设计中某些 (或全部) 超链接的下划线是相当常见的事情。但是由于在过去浏览器中的一些不标准的行为, 一些人在删除超链接中下划线的正确方法方面存在一些问题。最常见的错误是这样做：</p> + +<pre class="notranslate"><a href="link.html"> +<span style="text-decoration: none;">一个链接</span> +</a></pre> + +<p>与大部分人的想法相反，这样去除下划线是不应该的。本文将会探讨去除下滑的正确方法及其原因。正确的处理下划线有很大的好处，譬如简洁的标签及高可读性的源代码。</p> + +<h3 id="How_Text_Gets_Decorated" name="How_Text_Gets_Decorated">文字是如何被加上修饰线（decoration）的</h3> + +<p>了解如何正确删除下划线之前，我们先了解一下修饰线（<code>decoration</code> 下同）是如何被应用的。首先，让我们先思考一个 <code>span</code> 在一个 <code>p</code> 中会是什么样子。</p> + +<pre class="brush: html notranslate"><p><span style="text-decoration: underline;"> +这里有一些文字 +</span></p></pre> + +<p>很明显，就像下面所展示的：文字被加上了下划线。</p> + + + +<p><u>这里有一些文字。</u></p> + + + +<p>现在，让我们添加再添加一个 <code>span</code> 嵌套在之前的 <code>span</code> 里面。然后再给后加的 <code>span</code> 一个不一样的线样式：</p> + +<pre class="brush: html notranslate"><p><span style="text-decoration: underline;"> +这里有一些 +<span style="text-decoration: overline;">额外的</span> +文字。 +</span></p></pre> + + + +<p><u>这里有一些<span style="text-decoration: overline;">额外的</span>文字。</u></p> + + + +<p>我们发现此例的 “额外的” 一词出现了既有上划线也有下划线的情况。但是这为什么呢？我们仅给最里面 <code>span</code> 标签设置了上划线。<code>text-decoration</code> 的值并不会被继承。那么为什么 “额外的” 下面会有下划线呢？</p> + +<p>现在让我们把最里面 <code>span</code> 的文字颜色（<code>color</code> 下同）改一下，比如红色，我们就能知道怎么回事了。</p> + + + +<p><u>这里有一些<span style="color: red; text-decoration: overline;">额外的</span>文字。</u></p> + + + +<p>上划线和文字一起变成了红色，但是下划线并没有。这是因为下划线实际上是外面 <code>span</code> 的一部分，它只是在最里面 <code>span</code> 的下方经过而已。如果我们给外面的 <code>span</code> 加个背景，我们一般是希望背景也能穿过里面 <code>span</code> 显示出来。同样的，父级的文字修饰线就会显示在子级元素上，即使你并没有给子级元素设置或继承修饰线。</p> + +<p>现在，让我们明确地移除里面 <code>span</code> 的修饰线样式。</p> + +<pre class="brush: html notranslate"><p><span style="text-decoration: underline;"> +这里有一些 +<span style="text-decoration: none; color: red;">额外的</span> +文字。 +</span></p></pre> + +<p>这样意味着不应有任何修饰线样式在里面的 <code>span</code> 上，但是这样并不会阻止外面的 <code>span</code> 显示下划线。这就和 “把里面 <code>span</code> 的背景设为透明并不会让我们看不到外面 <code>span</code> (或者 <code>body</code> 之类的) 的背景” 一样。我们可以在下面看见，下划线仍旧是外面 <code>span</code> 的颜色。</p> + + + +<p><u>这里有一些<span style="color: red; text-decoration: none;">额外的</span>文字。</u></p> + + + +<p>那么让我们考虑一下这种情况：你在一个超链接 <code>a</code> 里添加了一个 <code>span</code> ，如果你想移除链接的下划线。但是因为上面所说的原因，你是没办法这样达成目的：</p> + +<pre class="notranslate"><a href="http://developer.netscape.com/">这个链接 +<span style="text-decoration: none; font-weight: bold;"> +有个span +</span>在里面</a></pre> + + + + + + + +<p>因此，我们不能使用这种方式移除下划线，我们需要其他的方法。而这其他的方法比你想象的要简单许多。</p> + +<h3 id="How_to_Really_Turn_Off_Underlines" name="How_to_Really_Turn_Off_Underlines">如何真正地将下划线移除</h3> + +<p>答案很简单：如果你不希望超链接拥有下划线，那么请直接关闭该标签本身的下划线。通过覆写在链接中的<code>span</code>的样式来修改下划线是不会在正常的浏览器中起效的，这是一种多余的无用行为。</p> + +<p>比方说，如果你想移除页面中所有超链接的下划线，那么最简单的办法是：</p> + +<pre class="notranslate">a:link, a:visited {text-decoration: none;}</pre> + +<p>另一个常见情况是仅从一组选定的链接中删除其中的下划线。比方说，在页面顶部的导航链接通常不会设有下划线。在这种情况下，你最好的选择是使用 class 或者 id 属性对目标元素进行分类，然后编写对应的样式。比方说，假设在下面的表格中有你希望修改的链接标签，那么给<code>table</code>本身追加一个<code>id</code>属性就是你首先需要做的。</p> + +<pre class="notranslate"><table id="navbar"> +<tr> +<td><a href="link1.html">Home</a></td> +<td><a href="link2.html">Electronics</a></td> +<td><a href="link3.html">Accessories</a></td> +<td><a href="link4.html">Software</a></td> +<td><a href="link5.html">Checkout</a></td> +</tr> +</table></pre> + +<p>有了 <code>id</code> 之后, 我们现在就可以为其编写一条CSS规则：</p> + +<p><code>table#navbar a {text-decoration: none;}</code></p> + +<p>这种方法最大的额外好处就是你可以基于此规则为这些链接扩展其他样式，比如：</p> + +<pre class="notranslate">table#navbar a {text-decoration: none; color: yellow; +font: 10px sans-serif; letter-spacing: 1px; padding: 0 1em;}</pre> + +<p>当然，你也可以直接将你希望修改样式的链接赋上特定的 class ，在有些情况下这是十分有必要的。而且，在绝大多数情况下 ，使用与本页面类似的方法将有效地帮助到其他作者。Of course, you could put classes directly on the links you wish to style, and in some cases that's necessary. However, in the majority of cases, authors will be well served by an approach similar to the one shown here.</p> + +<h3 id="Other_Decorations" name="Other_Decorations">其他修饰线</h3> + +<p>本文重点介绍下划线，因为下划线是迄今为止在网络上使用的最常见的文本修饰。不过，此处讨论的原理适用于任何形式的装饰。如果文本设置了删除线样式，则该样式将穿透元素的文本以及任何子元素的文本，无论<code>text-decoration</code>的值是多少。举个例子：This article has focused on underlines because they are by far the most common text decoration in use on the Web. However, the principles discussed here apply to any form of decoration. If text is styled with a strike-through line, then that will run through the element's text and the text of any descendant elements, no matter what value they are given for <code>text-decoration</code>. As an example:</p> + +<pre class="notranslate"><p style="text-decoration: line-through;"> +This text has been +<span style="text-decoration: none; color: red;">stricken</span> +with a line. +</p></pre> + +<p>The text in this paragraph will all be stricken, although the word "stricken" will be red. This is shown in Figure 6.</p> + + + +<h3 id="Conclusion" name="Conclusion">结论</h3> + +<p>Although some browsers will let you get away with it, the use of <code>span</code> to "switch off" text decorations is not correct CSS and will not work in CSS-conformant browsers. Thus, many Web sites authored to proprietary behavior will not display as the designer intended in more recent browsers. Fortunately, there are several benefits to abandoning this legacy code practice in favor of directly styling hyperlinks.</p> + +<h3 id="Recommendations" name="Recommendations">建议</h3> + +<ul> + <li><strong>不要</strong>尝试通过<code>span</code>标签来修饰链接，这是一种无效的行为——在使用规范CSS的浏览器中，它不能够去除类似下划线等装饰线。</li> + <li>利用CSS选择器，通过class或id属性对元素进行进行分类来提高CSS的效率。.</li> +</ul> + +<div class="originaldocinfo"> +<h3 id=".E6.96.87.E7.AB.A0.E5.8E.9F.E5.A7.8B.E4.BF.A1.E6.81.AF" name=".E6.96.87.E7.AB.A0.E5.8E.9F.E5.A7.8B.E4.BF.A1.E6.81.AF">文章原始信息</h3> + +<ul> + <li>作者： Eric A. Meyer, Netscape Communications</li> + <li>最后更新： Published 2002年3月5日</li> + <li>版权信息： Copyright © 2001-2003 Netscape. All rights reserved.</li> + <li>注意： This reprinted article was originally part of the DevEdge site.</li> +</ul> +</div> diff --git a/files/zh-cn/conflicting/learn/css/styling_text/fundamentals_5a3f2ce7cc4f23ec431e57a447af0711/index.html b/files/zh-cn/conflicting/learn/css/styling_text/fundamentals_5a3f2ce7cc4f23ec431e57a447af0711/index.html new file mode 100644 index 0000000000..f7d1d38b23 --- /dev/null +++ b/files/zh-cn/conflicting/learn/css/styling_text/fundamentals_5a3f2ce7cc4f23ec431e57a447af0711/index.html @@ -0,0 +1,158 @@ +--- +title: 文本样式 +slug: Web/Guide/CSS/Getting_started/Text_styles +translation_of: Learn/CSS/Styling_text/Fundamentals +translation_of_original: Web/Guide/CSS/Getting_started/Text_styles +--- +<p>{{ CSSTutorialTOC() }}</p> + +<p>{{previousPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Readable_CSS", "创建可读性良好的CSS")}} 这是<a href="/en-US/docs/Web/Guide/CSS/Getting_Started">CSS入门教程</a>系列教程的第7部分；本节讲述了更多的有关文本的样式。你可以通过更改示例样式来使用不同的字体。</p> + +<h2 class="clearLeft" id="资料：文本样式">资料：文本样式</h2> + +<p>CSS提供了几个属性用来操作字体。</p> + +<p>我们先来看一个简写属性 {{ cssxref("font") }}，使用这个属性可以很方便的指定其他的字体属性。比如：</p> + +<ul> + <li>字体加粗，字体的风格：斜体和字体变形：小型大写字母</li> + <li>字体的大小</li> + <li>行高</li> + <li>字体</li> +</ul> + +<div class="tuto_example"> +<div class="tuto_type">示例</div> + +<pre class="brush:css">p {font: italic 75%/125% "Comic Sans MS", cursive;} +</pre> + +<p>这条规则定义了字体的几个属性，使整个段落文本都变成斜体。</p> + +<p>字体大小设置为每个段落父元素字体大小的3/4，行高设置为125%（比常规的间隔稍大一些）。</p> + +<p>文本字体设置为 Comic Sans MS，假如该字体不被浏览器支持则使用默认字体：cursive。</p> + +<p><span style="line-height: 1.5;">这条规则还把bold和small-caps这些效果给去掉了（设置它们的值为normal）。</span></p> +</div> + +<h3 id="sect1"> </h3> + +<h3 id="字体">字体</h3> + +<p>你无法预料到用户是否可以访问样式表里定义的字体。所以在设置字体时，在属性后指定一个替代的字体列表是个不错的主意。</p> + +<p>在这个字体列表的最后加上系统字体中的一个，如：serif,sans-serif,cursive,fantasy或monospace。</p> + +<p>如果字体不支持样式表里设置的字体特征，浏览器会使用另一种字体。比如，样式表中包含字体不支持的特殊字符，如果浏览器发现另一种字体支持这些特殊字符，那浏览器就会选择使用这种字体。</p> + +<p>使用 {{ cssxref("font-family") }} 属性指定文本的字体。</p> + +<p>简体中文的字体示例：</p> + +<p>Windows：font-family:微软雅黑;</p> + +<p>Mac OS：font-family:"Songti SC";</p> + +<h3 id="字号">字号</h3> + +<p>浏览器用户浏览页面时，可以覆盖页面默认的文号大小，也可以改变页面的字号大小。所以说尽可能的使用相对的字号大小对你来说是有意义的。</p> + +<p>你可使用系统内置的值来设置字号，比如small,medium和large。你也可以使用相对父元素字号大小的值来设置，比如：smaller,larger,150%或1.5em。1“em”等于1个字母“m”的宽度（相对于父元素字号大小）;因此1.5em就是1.5倍的父元素字号大小。</p> + +<p>如果有必要你也可以指定一个实际的大小，比如14px(14像素)应用于显示设备或14pt(14点)应用于打印设备。但是实际大小不能应用于视力受损用户的设备上，因为这些设备不支持指定实际的值。一个比较容易实现的策略是给顶级的文档元素指定一个系统内置的值如medium，然后再给它的子元素设置个相对值。</p> + +<p>使用{{ cssxref("font-size") }} 属性指定字体的大小。</p> + +<h3 id="行高">行高</h3> + +<p>行高用来指定行与行之间的距离。如果你的文档中有一个很长的段落由很多行组成，而且这个段落的字号还比较小，这时给它指定一个稍大的间距，这样阅读起来会更方便。</p> + +<p>使用 {{ cssxref("line-height") }} 属性指定文本的行间距。</p> + +<h3 id="装饰">装饰</h3> + +<p>单独的 {{ cssxref("text-decoration") }}就可以为文本指定其他风格，比如underline或line-through。你也可以把值设置成none，把这些风格取消掉。</p> + +<h3 id="其他属性">其他属性</h3> + +<p>使用<span style="line-height: 1.5;">{{ cssxref("font-style") }}</span><code style="font-size: 14px;">: italic;指定文本为斜体</code><code style="font-size: 14px;">;</code></p> + +<p><code style="font-size: 14px;">使用</code><span style="line-height: 1.5;"> </span><code style="font-size: 14px;">{{ cssxref("font-weight") }}: bold;指定文本加粗;</code></p> + +<p>使用<span style="line-height: 1.5;"> </span><code style="font-size: 14px;">{{ cssxref("font-variant") }}: small-caps;指定文本为小型大写字母;</code></p> + +<p>如果我们想单独设置某个效果失效，我们可以把其相应的属性设置为normal或inherit.</p> + +<div class="tuto_details"> +<div class="tuto_type">详细资料</div> + +<p>我们也可以采用其他方式指定文本样式。</p> + +<p><span style="line-height: 1.5;">比如，这里提到的几个属性的其他值。</span></p> + +<p>在一个复杂的样式表中，应该避免使用font属性，因为它的副作用（重置其他个体属性）。</p> + +<p>字体相关的全部细节，可以在CSS规范里查看<a class="external" href="http://www.w3.org/TR/CSS21/fonts.html" style="line-height: 1.5;">Fonts</a><span style="line-height: 1.5;"> 。文本修饰相关可以查看</span><span style="line-height: 1.5;"> </span><a class="external" href="http://www.w3.org/TR/CSS21/text.html" style="line-height: 1.5;">Text</a><span style="line-height: 1.5;"> 。</span></p> + +<p>如果我们不想使用系统上的默认字体库，我们可以使用{ { cssxref(@font-face)} }指定一个在线字体。然而，这要求用户的浏览器支持该字体。</p> +</div> + +<h2 id="实践：指定字体">实践：指定字体</h2> + +<p>对于一个简单的页面，我们可以设置 {{ HTMLElement("body") }}元素的字体，然后页面中的其他元素继承这个设置。</p> + +<ol> + <li>编辑我们的样式表。</li> + <li>添加以下规则到你的样式表中。推荐这个规则放在css文件的开头: + <pre class="eval">body {font: 16px "Comic Sans MS", cursive;} +</pre> + </li> + <li>添加一个该规则的注释，可以添加空格匹配你的整体样式布局。</li> + <li>保存文件并刷新浏览器查看效果。如果你的系统有Comic Sans MS或cursive字体，这两种字体都不支持斜体。你的浏览器会自动选择另一种字体实现斜体，效果如第一行。 + <table style="border: 2px outset #36b; padding: 1em;"> + <tbody> + <tr> + <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> + </tr> + <tr> + <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> + </tr> + </tbody> + </table> + </li> + <li>从浏览器的菜单栏中选择 视图 > 字体大小 > 放大（或视图 > 缩放 > 放大）。即使你在样式里指定了字体为16px。用户浏览网页时，还是可以改变字体字号的大小。</li> +</ol> + +<div class="tuto_example"> +<div class="tuto_type">挑战</div> + +<p>不改变什么，让6个初始字母的字号大小调整为2倍于浏览默认的衬线字体:</p> + +<table> + <tbody> + <tr> + <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: green; font: 200% serif;">S</strong>tyle <strong style="color: green; font: 200% serif;">S</strong>heets</td> + </tr> + <tr> + <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: red; font: 200% serif;">S</strong>tyle <strong style="color: red; font: 200% serif;">S</strong>heets</td> + </tr> + </tbody> +</table> + +<div class="tuto_details" id="tutochallenge"> +<div class="tuto_type">Possible solution</div> + +<p>Add the following style declaration to the <code>strong</code> rule:</p> + +<pre class="brush: css"> font: 200% serif; +</pre> +If you use separate declarations for <code>font-size</code> and <code>font-family</code>, then the <code>font-style</code> setting on the first paragraph is <em>not</em> overridden. + +<p> </p> +<a class="hideAnswer" href="#challenge">Hide solution</a></div> +<a href="#tutochallenge" title="Display a possible solution for the challenge">查看答案.</a></div> + +<h2 id="下一节">下一节?</h2> + +<p>{{nextPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Color", "颜色")}}示例文档已经使用几个颜色命名。下一节列表中将列出标准的颜色名称，并且介绍其他的定义颜色的方式。</p> diff --git a/files/zh-cn/conflicting/learn/css/styling_text/styling_lists/index.html b/files/zh-cn/conflicting/learn/css/styling_text/styling_lists/index.html new file mode 100644 index 0000000000..8a85655517 --- /dev/null +++ b/files/zh-cn/conflicting/learn/css/styling_text/styling_lists/index.html @@ -0,0 +1,324 @@ +--- +title: Lists +slug: Web/Guide/CSS/Getting_started/Lists +translation_of: Learn/CSS/Styling_text/Styling_lists +translation_of_original: Web/Guide/CSS/Getting_started/Lists +--- +<p>{{ CSSTutorialTOC() }}</p> + +<p>{{ previousPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Content", "内容") }} 这是<a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS入门教程</a> 教程的第10部分; 它将向你描述你如何用CSS来指定列表的外观. 你将创建一个新的包含列表的示例文件，和一个新的定义列表的样式表。</p> + +<h2 class="clearLeft" id="信息_列表">信息: 列表</h2> + +<p>如果你完成了上一节的挑战任务，你就知道如何在列表项前面插入内容。</p> + +<p>CSS为列表提供了专门的属性。如果可以，使用这些属性通常会比较方便。</p> + +<p>使用{{ cssxref("list-style") }} 属性来指定列表项标记的样式。</p> + +<p>你的CSS中的选择器可以选中列表项 (比如, {{ HTMLElement("li") }})。也可以选中列表项的父节点 (比如, {{ HTMLElement ("ul") }})。此时列表项会继承父节点的样式。</p> + +<h3 id="无序列表">无序列表</h3> + +<p>无序列表的每个列表项都用同样的方式标记。</p> + +<p>CSS 有三种标记样式：</p> + +<ul style="padding-left: 2em;"> + <li style="list-style-type: disc;"><code>disc</code></li> + <li style="list-style-type: circle;"><code>circle</code></li> + <li style="list-style-type: square;"><code>square</code></li> +</ul> + +<p>你可以指定一个图片的URL来自定义标记样式。</p> + +<div class="tuto_example"> +<div class="tuto_type">例</div> + +<p>下面的规则为不同类的列表项指定了不同的标记：</p> + +<pre class="brush:css">li.open {list-style: circle;} +li.closed {list-style: disc;} +</pre> + +<p>这些类被用于列表项时，用以区分打开和关闭的列表项 (比如，在一个待办事项列表中)：</p> + +<pre class="brush:css"><ul> + <li class="open">Lorem ipsum</li> + <li class="closed">Dolor sit</li> + <li class="closed">Amet consectetuer</li> + <li class="open">Magna aliquam</li> + <li class="closed">Autem veleum</li> +</ul> +</pre> + +<p>结果：</p> + +<table style="background-color: white; border: 2px outset #36b; padding: 1em;"> + <tbody> + <tr> + <td> + <ul style="padding-right: 6em;"> + <li style="list-style-type: circle;">Lorem ipsum</li> + <li style="list-style-type: disc;">Dolor sit</li> + <li style="list-style-type: disc;">Amet consectetuer</li> + <li style="list-style-type: circle;">Magna aliquam</li> + <li style="list-style-type: disc;">Autem veleum</li> + </ul> + </td> + </tr> + </tbody> +</table> +</div> + +<h3 id="有序列表">有序列表</h3> + +<p>在有序列表中，每个列表项都被标记了不同的序号。</p> + +<p>用{{ cssxref("list-style") }} 属性指定标记样式：</p> + +<ul style="padding-left: 2em;"> + <li style=""><code>decimal</code></li> + <li style=""><code>lower-roman</code></li> + <li style=""><code>upper-roman</code></li> + <li style=""><code>lower-latin</code></li> + <li style=""><code>upper-latin</code></li> +</ul> + +<div class="tuto_example"> +<div class="tuto_type">例</div> + +<p>这条规则指定类名包含<span style="font-family: courier new,andale mono,monospace; line-height: normal;">info的</span><span style="line-height: 1.5;">{{ HTMLElement("ol") }} 元素的列表项用大写字母标序</span></p> + +<pre class="brush:css">ol.info {list-style: upper-latin;} +</pre> + +<p>{{ HTMLElement("li") }} 元素继承了ol的样式：</p> + +<table style="background-color: white; border: 2px outset #36b; padding: 1em;"> + <tbody> + <tr> + <td> + <ul> + <li style="padding-right: 6em; list-style-type: upper-latin;">Lorem ipsum</li> + <li style="padding-right: 6em; list-style-type: upper-latin;">Dolor sit</li> + <li style="padding-right: 6em; list-style-type: upper-latin;">Amet consectetuer</li> + <li style="padding-right: 6em; list-style-type: upper-latin;">Magna aliquam</li> + <li style="padding-right: 6em; list-style-type: upper-latin;">Autem veleum</li> + </ul> + </td> + </tr> + </tbody> +</table> +</div> + +<div class="tuto_details"> +<div class="tuto_type">更多细节</div> + +<p>{{ cssxref("list-style") }} 属性是一个快捷写法。在复杂的样式表中你可能更希望用单独的属性设置不同的属性值。欲查看这些单独的属性和更详细的CSS指定列表的方法，见 {{ cssxref("list-style") }}参考页。</p> + +<p>如果你使用如HTML这类提供了方便的无序列表<span style="line-height: 1.5;"> ({{ HTMLElement("ul") }}) 和有序列表</span><span style="line-height: 1.5;">({{ HTMLElement("ol") }})</span><span style="line-height: 1.5;">的标记语言，就尽量使用这些标签。当然，你完全可以将 {{ HTMLElement("ul") }} 显示成有序列表，将 {{ HTMLElement("ol") }} 显示成无序列表。</span></p> + +<p>浏览器实现列表样式略有不同。不要奢望样式表可以让列表在所有浏览器中显示的完全一样。</p> +</div> + +<h3 id="计数器">计数器</h3> + +<div style="border: 1px solid red; padding: 6px; margin: 0 0 .5em -6px; width: 100%;"> +<p><strong>注意: </strong> 一些浏览器不支持计数器。<a class="external" href="http://www.quirksmode.org/" style="line-height: 1.5;" title="http://www.quirksmode.org/">Quirks Mode site</a><span style="line-height: 1.5;"> 的</span><a class="external" href="http://www.quirksmode.org/css/contents.html" style="line-height: 1.5;" title="http://www.quirksmode.org/css/contents.html">CSS contents and browser compatibility</a><span style="line-height: 1.5;"> 页有更多这方面的兼容表格可以参考。</span><span style="line-height: 1.5;"> </span><a href="/en-US/docs/Web/Guide/CSS_Reference" style="line-height: 1.5;" title="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS_Reference">CSS Reference</a><span style="line-height: 1.5;"> 也有浏览器兼容性表格。</span></p> +</div> + +<p>你可以用计数器来计数任何元素，不仅是列表元素。比如，在某些文档中你可能想计数标题和段落。</p> + +<p>要想计数，你必须定义一个计数器。</p> + +<p>在计数开始前的某个元素上，设置 {{ cssxref("counter-reset") }}属性以重置计数器。被计数元素的父节点是一个不错的选择。当然，任何出现在被计数元素前面的元素都可以。</p> + +<p>设置每个需要计数的元素的{{ cssxref("counter-increment") }} 属性为你的计数器名。</p> + +<p>通过为选择器增加 {{ cssxref(":before") }} 或 {{ cssxref(":after") }} 并设置 <code>content</code> 属性来显示计数器。 (如上一节所示, <strong><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Content" title="en-US/docs/Web/Guide/CSS/Getting_Started/Content">内容</a></strong>).</p> + +<p>在<code>content属性</code>的值中设置 <code>counter()，</code>在括号内填上计数器的名字。可选的是设置计数器类型。其类型和前面一节 <strong>有序列表 </strong>中相同。</p> + +<p>正常情况下，显示计数器的元素也会递增计数器。</p> + +<div class="tuto_example"> +<div class="tuto_type">例</div> + +<p>这条规则会为每个类名中包含<span style="font-family: courier new,andale mono,monospace; line-height: normal;">numbered的</span><span style="line-height: 1.5;">{{ HTMLElement("h3") }} 元素初始化计数器 mynum：</span></p> + +<pre class="brush:css">h3.numbered {counter-reset: mynum;} +</pre> + +<p> </p> + +<p>这条规则为每个类名包含<span style="font-family: courier new,andale mono,monospace; line-height: normal;">numbered的</span><span style="line-height: 1.5;">{{ HTMLELement("p") }}元素</span><span style="line-height: 1.5;">显示并递增</span><span style="line-height: 1.5;">计数器：</span></p> + +<pre class="brush:css">p.numbered:before { + content: counter(mynum) ": "; + counter-increment: mynum; + font-weight: bold;} +</pre> + +<p>结果：</p> + +<table style="background-color: white; border: 2px outset #36b; padding: .5em 6em .5em 1em;"> + <tbody> + <tr> + <td><strong>Heading</strong> + + <p><strong>1: </strong>Lorem ipsum</p> + + <p><strong>2: </strong>Dolor sit</p> + + <p><strong>3: </strong>Amet consectetuer</p> + + <p><strong>4: </strong>Magna aliquam</p> + + <p><strong>5: </strong>Autem veleum</p> + </td> + </tr> + </tbody> +</table> +</div> + +<div class="tuto_details"> +<div class="tuto_type">更多细节</div> + +<p>除非所有看你文档的人的浏览器都支持计数器，否则你不能使用计数器。</p> + +<p>如果你可以使用计数器，那么你可以单独设置计数器的样式。如上面例子所示：计数器是粗体，但列表不是。</p> + +<p>你还可以用更复杂的方式使用计数器。比如，计数章节, 标题, 子标题以及段落。详见CSS规范中的 <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#counters">Automatic counters and numbering</a> 。</p> +</div> + +<h2 id="实例_设计列表样式">实例: 设计列表样式</h2> + +<p><code><font face="Open Sans, sans-serif"><span style="line-height: 21px;">新建</span></font>doc2.html：</code></p> + +<pre class="brush:html;"><!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + <title>Sample document 2</title> + <link rel="stylesheet" href="style2.css"> + </head> + <body> + + <h3 id="oceans">The oceans</h3> + <ul> + <li>Arctic</li> + <li>Atlantic</li> + <li>Pacific</li> + <li>Indian</li> + <li>Southern</li> + </ul> + + <h3 class="numbered">Numbered paragraphs</h3> + <p class="numbered">Lorem ipsum</p> + <p class="numbered">Dolor sit</p> + <p class="numbered">Amet consectetuer</p> + <p class="numbered">Magna aliquam</p> + <p class="numbered">Autem veleum</p> + + </body> +</html> +</pre> + +<p>新建<code>style2.css</code>：</p> + +<pre class="brush:css;">/* numbered paragraphs */ +h3.numbered {counter-reset: mynum;} + +p.numbered:before { + content: counter(mynum) ": "; + counter-increment: mynum; + font-weight: bold; +} +</pre> + +<p>如果布局和注释不符合你的口味，随便改。</p> + +<p>在浏览器中打开。如果你的浏览器支持计数器，你将看到下面的样子。如果不支持，你将看不到数字序号。 (甚至冒号都看不到)：</p> + +<table style="background-color: white; border: 2px outset #36b; padding: 0 6em 1em 1em;"> + <tbody> + <tr> + <td> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">The oceans</p> + + <ul style=""> + <li>Arctic</li> + <li>Atlantic</li> + <li>Pacific</li> + <li>Indian</li> + <li>Southern</li> + </ul> + + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">Numbered paragraphs</p> + + <p><strong>1: </strong>Lorem ipsum</p> + + <p><strong>2: </strong>Dolor sit</p> + + <p><strong>3: </strong>Amet consectetuer</p> + + <p><strong>4: </strong>Magna aliquam</p> + + <p><strong>5: </strong>Autem veleum</p> + </td> + </tr> + </tbody> +</table> + +<div class="tuto_example"> +<div class="tuto_type">挑战</div> + +<p>增加一条规则，用罗马数字i到v计数大洋的名字</p> + +<table style="background-color: white; border: 2px outset #36b; padding: 0 6em 1em 1em;"> + <tbody> + <tr> + <td> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">The oceans</p> + + <ul style=""> + <li>Arctic</li> + <li>Atlantic</li> + <li>Pacific</li> + <li>Indian</li> + <li>Southern</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<p> </p> + +<p>修改样式，将标题用大写字母加括号的方式标序：</p> + +<table style="background-color: white; border: 2px outset #36b; padding: 0 6em 1em 1em;"> + <tbody> + <tr> + <td> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">(A) The oceans</p> + + <p><strong>. . .</strong></p> + + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">(B) Numbered paragraphs</p> + + <p><strong>. . .</strong></p> + </td> + </tr> + </tbody> +</table> +</div> + +<p><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Lists" title="en-US/docs/Web/Guide/CSS/Getting started/Challenge solutions#Lists">答案</a></p> + +<h2 id="接下来">接下来?</h2> + +<p>{{ nextPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Boxes", "盒模型") }}浏览器显示你的样例文档，在将元素放置在页面上时，会在元素周围创建空间。下一章节将向你描述如何使用CSS来和元素下的形状一起工作，元素下的形状我们称为<a href="/zh-CN/docs/CSS/%E5%BC%80%E5%A7%8B/Boxes">盒子</a>（<a href="/zh-CN/docs/CSS/%E5%BC%80%E5%A7%8B/Boxes" title="en-US/docs/Web/Guide/CSS/Getting_Started/Boxes">boxes</a>）。</p> + +<p> </p> |