📄 generate.html
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><title>Generated content, automatic numbering, and lists</title><link rel="stylesheet" href="style/default.css" type="text/css"><link rel="prev" href="visufx.html"><link rel="next" href="page.html"><link rel="contents" href="cover.html#minitoc"><link rel="CSS-properties" href="propidx.html" title="properties"><link rel="index" href="indexlist.html" title="index"></head><body><div class="navbar" align="center"><p><a href="visufx.html">previous</a> <a href="page.html">next</a> <a href="cover.html#minitoc">contents</a> <a href="propidx.html">properties</a> <a href="indexlist.html">index</a> </div><hr class="navbar"><h1 align="center">12 <a name="generated-text">Generated</a> <a name="x0"><span class="index-def"title="generated content">content</span></a>, automatic <a name="x1"><spanclass="index-def" title="automatic numbering">numbering</span></a>,and lists</h1><div class="subtoc"><p><strong>Contents</strong> <ul class="toc"> <li class="tocline2"><a href="generate.html#before-after-content" class="tocxref">12.1 The <span class="index-def" title=":before|pseudo-elements:::before|before">:before</span> and <span class="index-def" title=":after|pseudo-elements:::after|after">:after</span> pseudo-elements</a> <li class="tocline2"><a href="generate.html#content" class="tocxref">12.2 The <span class="propinst-content">'content'</span> property</a> <li class="tocline2"><a href="generate.html#compact-run-in-gen" class="tocxref">12.3 Interaction of :before and :after with <span class="index-inst" title="compact"><span class="value-inst-compact">'compact'</span></span> and <span class="index-inst" title="run-in"><span class="value-inst-run-in">'run-in'</span></span> elements</a> <li class="tocline2"><a href="generate.html#quotes" class="tocxref">12.4 Quotation marks</a> <ul class="toc"> <li class="tocline3"><a href="generate.html#quotes-specify" class="tocxref">12.4.1 Specifying quotes with the <span class="propinst-quotes">'quotes'</span> property</a> <li class="tocline3"><a href="generate.html#quotes-insert" class="tocxref">12.4.2 Inserting quotes with the <span class="propinst-content">'content'</span> property</a> </ul> <li class="tocline2"><a href="generate.html#counters" class="tocxref">12.5 Automatic <span class="index-def" title="counters">counters</span> and numbering</a> <ul class="toc"> <li class="tocline3"><a href="generate.html#scope" class="tocxref">12.5.1 Nested counters and scope</a> <li class="tocline3"><a href="generate.html#counter-styles" class="tocxref">12.5.2 Counter styles</a> <li class="tocline3"><a href="generate.html#q10" class="tocxref">12.5.3 Counters in elements with 'display: none'</a> </ul> <li class="tocline2"><a href="generate.html#q11" class="tocxref">12.6 Markers and lists</a> <ul class="toc"> <li class="tocline3"><a href="generate.html#markers" class="tocxref">12.6.1 Markers: the <span class="propinst-marker-offset">'marker-offset'</span> property</a> <li class="tocline3"><a href="generate.html#lists" class="tocxref">12.6.2 Lists: the <span class="propinst-list-style-type">'list-style-type'</span>, <span class="propinst-list-style-image">'list-style-image'</span>, <span class="propinst-list-style-position">'list-style-position'</span>, and <span class="propinst-list-style">'list-style'</span> properties</a> </ul> </ul></div><p>In some cases, authors may want user agents to render contentthat does not come from the <a href="conform.html#doctree">documenttree</a>. One familiar example of this is a numbered list; the authordoes not want to list the numbers explicitly, he or she wants theuser agent to generate them automatically. Similarly, authorsmay want the user agent to insert the word"Figure" before the caption of a figure, or "Chapter 7" before theseventh chapter title. For audio or braille in particular, user agentsshould be able to insert these strings.<p>In CSS2, content may be generated by several mechanisms:</p><ul><li>The <a href="generate.html#propdef-content" class="noxref"><span class="propinst-content">'content'</span></a>property, in conjunction with the :before and :after pseudo-elements.<li>The <a href="aural.html#propdef-cue-before" class="noxref"><span class="propinst-cue-before">'cue-before'</span></a>,<a href="aural.html#propdef-cue-after" class="noxref"><span class="propinst-cue-after">'cue-after'</span></a>aural properties (see the chapteron <a href="aural.html">aural style sheets</a>). When the <a href="generate.html#propdef-content" class="noxref"><spanclass="propinst-content">'content'</span></a> property is combined with the aural propertiesthey are rendered in the following order: :before, <a href="aural.html#propdef-cue-before" class="noxref"><spanclass="propinst-cue-before">'cue-before'</span></a>, (<a href="aural.html#propdef-pause-before" class="noxref"><spanclass="propinst-pause-before">'pause-before'</span></a>), the element'scontent, (<a href="aural.html#propdef-pause-after" class="noxref"><span class="propinst-pause-after">'pause-after'</span></a>),<a href="aural.html#propdef-cue-after" class="noxref"><span class="propinst-cue-after">'cue-after'</span></a>, and :after.<li>Elements with a value of 'list-item'for the <a href="visuren.html#propdef-display" class="noxref"><span class="propinst-display">'display'</span></a> property.</ul><P>Below we describe the mechanisms associated with the <a href="generate.html#propdef-content" class="noxref"><spanclass="propinst-content">'content'</span></a> property.<h2>12.1 <a name="before-after-content">The</a> <a name="x2"><span class="index-def"title=":before|pseudo-elements:::before|before">:before</span></a> and <a name="x5"><spanclass="index-def" title=":after|pseudo-elements:::after|after">:after</span></a>pseudo-elements</h2><p>Authors specify the style and location of generated content withthe :before and :after pseudo-elements. As their names indicate, the:before and :after pseudo-elements specify the location of contentbefore and after an element's <a href="conform.html#doctree">documenttree</a> content. The <a href="generate.html#propdef-content" class="noxref"><span class="propinst-content">'content'</span></a>property, in conjunction with these pseudo-elements, specifies what isinserted.<div class=example><P style="display:none">Example(s):</P><p>For example, the following rule inserts the string "Note: "before the content of every P element whose "class" attribute has the value "note":</p><pre>P.note:before { content: "Note: " }</pre></div><P>The formatting objects (e.g., boxes) generated by an element includegenerated content. So, for example, changing the above style sheetto:</p><pre class="example">P.note:before { content: "Note: " }P.note { border: solid green }</pre><P>would cause a solid green border to be rendered around the entireparagraph, including the initial string.<P>The :before and :after pseudo-elements <ahref="cascade.html#inheritance">inherit</a> any inheritable propertiesfrom the element in the document tree to which they are attached.</p><div class=example><P style="display:none">Example(s):</P><p>For example, the following rules insert an open quote mark before everyQ element. The color of the quote mark will be red, but the font willbe the same as the font of the rest of the Q element:</p><pre>Q:before { content: open-quote; color: red}</pre></div><p>In a :before or :after pseudo-element declaration, non-inheritedproperties take their <a href="cascade.html#initial-value">initialvalues</a>.</p><div class=example><P style="display:none">Example(s):</P><p>So, for example, because the initial value of the <a href="visuren.html#propdef-display" class="noxref"><spanclass="propinst-display">'display'</span></a> property is 'inline', thequote in the previous example is inserted as an inline box (i.e.,on the same line as the element's initial text content).The next example explicitly sets the <a href="visuren.html#propdef-display" class="noxref"><span class="propinst-display">'display'</span></a> property to'block', so that the inserted text becomes a block:</p><pre>BODY:after { content: "The End"; display: block; margin-top: 2em; text-align: center;}</pre><P>Note that an audio user agent would speak the words "The End" afterrendering the rest of the BODY content.</div> <P>User agents must ignore the following properties with :before and:after pseudo-elements: <a href="visuren.html#propdef-position" class="noxref"><spanclass="propinst-position">'position'</span></a>, <a href="visuren.html#propdef-float" class="noxref"><spanclass="propinst-float">'float'</span></a>, <a href="#lists">list</a>properties, and <a href="tables.html">table</a> properties.<P>The :before and :after pseudo-elements elements allow values of the <a href="visuren.html#propdef-display" class="noxref"><span class="propinst-display">'display'</span></a>property as follows:<ul><li>If the <a href="selector.html#subject">subject</a> of the selector is a <a href="visuren.html#block-level">block-level</a> element, allowed values are 'none', 'inline', 'block', and 'marker'. If the value of the <a href="visuren.html#propdef-display" class="noxref"><span class="propinst-display">'display'</span></a>has any other value, the pseudo-element will behave as if the valuewere 'block'. <li>If the <a href="selector.html#subject">subject</a> of the selector is an <a href="visuren.html#inline-level">inline-level</a> element, allowed values are 'none' and 'inline'.If the value of the <a href="visuren.html#propdef-display" class="noxref"><span class="propinst-display">'display'</span></a>has any other value, the pseudo-element will behave as if the valuewere 'inline'.</ul><div class="note"><P><em><strong>Note.</strong> Other values may be permitted infuture levels of CSS.</em></div><h2>12.2 <a name="content">The</a> <a href="generate.html#propdef-content" class="noxref"><spanclass="propinst-content">'content'</span></a> property</h2><div class="propdef"><dl><dt><span class="index-def" title="'content'"><a name="propdef-content" class="propdef-title"><strong>'content'</strong></a></span><dd><table class="propinfo" cellspacing=0 cellpadding=0><tr valign=baseline><td><em>Value:</em> <td>[ <a href="syndata.html#value-def-string" class="noxref"><span class="value-inst-string"><string></span></a> | <a href="syndata.html#value-def-uri" class="noxref"><span class="value-inst-uri"><uri></span></a> | <a href="syndata.html#value-def-counter" class="noxref"><span class="value-inst-counter"><counter></span></a> | attr(X) | open-quote | close-quote| no-open-quote | no-close-quote ]+ | <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit">inherit</span></a><tr valign=baseline><td><em>Initial:</em> <td>empty string<tr valign=baseline><td><em>Applies to:</em> <td>:before and :after pseudo-elements<tr valign=baseline><td><em>Inherited:</em> <td>no<tr valign=baseline><td><em>Percentages:</em> <td>N/A<tr valign=baseline><td><em>Media:</em> <td><a href="media.html#all-media-group" class="noxref">all</a></table></dl></div><p>This property is used with the :before and :after pseudo-elementsto generate content in a document. Values have the followingmeanings:</p><dl><dt><span class="index-inst" title="<string>"><a name="x9" href="syndata.html#value-def-string" class="noxref"><spanclass="value-inst-string"><strong><string></strong></span></a></span><dd>Text content (see the section on <a href="syndata.html#strings">strings</a>).<dt><span class="index-inst" title="<uri>"><a name="x10" href="syndata.html#value-def-uri" class="noxref"><spanclass="value-inst-uri"><strong><uri></strong></span></a></span><dd>The value is a URI that designates an external resource.If a user agent cannot support the resource because of the<a href="media.html">media types</a> it supports, it must ignore the resource.<strong>Note.</strong> CSS2 offers nomechanism to change the size of the embedded object, or to provide atextual description, like the "alt" or "longdesc" attributes do forimages in HTML. This may change in future levels of CSS.<dt><span class="index-inst" title="<counter>"><a name="x11" href="syndata.html#value-def-counter" class="noxref"><spanclass="value-inst-counter"><strong><counter></strong></span></a></span><dd><a href="syndata.html#counter">Counters</a> may be specifiedwith two different functions: 'counter()' or 'counters()'. ⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -