📄 text.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>Text</TITLE><link rel="stylesheet" href="style/default.css" type="text/css"><link rel="prev" href="fonts.html"><link rel="next" href="tables.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="fonts.html">previous</a> <a href="tables.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">16 Text</H1><div class="subtoc"><p><strong>Contents</strong> <ul class="toc"> <li class="tocline2"><a href="text.html#indentation-prop" class="tocxref">16.1 Indentation: the <span class="propinst-text-indent">'text-indent'</span> property</a> <li class="tocline2"><a href="text.html#alignment-prop" class="tocxref">16.2 Alignment: the <span class="propinst-text-align">'text-align'</span> property</a> <li class="tocline2"><a href="text.html#q3" class="tocxref">16.3 Decoration</a> <ul class="toc"> <li class="tocline3"><a href="text.html#lining-striking-props" class="tocxref">16.3.1 Underlining, overlining, striking, and blinking: the <span class="propinst-text-decoration">'text-decoration'</span> property</a> <li class="tocline3"><a href="text.html#text-shadow-props" class="tocxref">16.3.2 Text shadows: the <span class="propinst-text-shadow">'text-shadow'</span> property</a> </ul> <li class="tocline2"><a href="text.html#spacing-props" class="tocxref">16.4 Letter and word spacing: the <span class="propinst-letter-spacing">'letter-spacing'</span> and <span class="propinst-word-spacing">'word-spacing'</span> properties</a> <li class="tocline2"><a href="text.html#caps-prop" class="tocxref">16.5 Capitalization: the <span class="propinst-text-transform">'text-transform'</span> property</a> <li class="tocline2"><a href="text.html#white-space-prop" class="tocxref">16.6 Whitespace: the <span class="propinst-white-space">'white-space'</span> property</a> </ul></div><P>The properties defined in the following sections affect the visualpresentation of characters, spaces, words, and paragraphs.<H2>16.1 <a name="indentation-prop">Indentation</a>: the <a href="text.html#propdef-text-indent" class="noxref"><spanclass="propinst-text-indent">'text-indent'</span></a> property</H2><div class="propdef"><dl><dt><span class="index-def" title="'text-indent'"><a name="propdef-text-indent" class="propdef-title"><strong>'text-indent'</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-length" class="noxref"><span class="value-inst-length"><length></span></a> | <a href="syndata.html#value-def-percentage" class="noxref"><span class="value-inst-percentage"><percentage></span></a> | <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>0<tr valign=baseline><td><em>Applies to:</em> <td>block-level elements<tr valign=baseline><td><em>Inherited:</em> <td>yes<tr valign=baseline><td><em>Percentages:</em> <td>refer to width of containing block<tr valign=baseline><td><em>Media:</em> <td><a href="media.html#visual-media-group" class="noxref">visual</a></table></dl></div><P>This property specifies the indentation of the first line of textin a block. More precisely, it specifies the indentation of thefirst box that flows into the block's first <ahref="visuren.html#line-box">line box</a>. The box is indented withrespect to the left (or right, for right-to-left layout) edge of theline box. User agents should render this indentation as blank space.<P>Values have the following meanings:</P><dl><dt><span class="index-inst" title="<length>"><a name="x1" href="syndata.html#value-def-length" class="noxref"><spanclass="value-inst-length"><strong><length></strong></span></a></span><dd>The indentation is a fixed length.<dt><span class="index-inst" title="<percentage>"><a name="x2" href="syndata.html#value-def-percentage" class="noxref"><spanclass="value-inst-percentage"><strong><percentage></strong></span></a></span><dd>The indentation is a percentage of the containingblock width.</dl><P>The value of <a href="text.html#propdef-text-indent" class="noxref"><spanclass="propinst-text-indent">'text-indent'</span></a> may be negative, butthere may be implementation-specific limits. <div class="example"><P style="display:none">Example(s):</P><P>The following example causes a '3em' text indent.<PRE> P { text-indent: 3em }</PRE></div><H2>16.2 <a name="alignment-prop">Alignment:</a> the <a href="text.html#propdef-text-align" class="noxref"><spanclass="propinst-text-align">'text-align'</span></a> property</H2><div class="propdef"><dl><dt><span class="index-def" title="'text-align'"><a name="propdef-text-align" class="propdef-title"><strong>'text-align'</strong></a></span><dd><table class="propinfo" cellspacing=0 cellpadding=0><tr valign=baseline><td><em>Value:</em> <td>left | right | center | justify | <a href="syndata.html#value-def-string" class="noxref"><span class="value-inst-string"><string></span></a> | <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>depends on user agent and writing direction<tr valign=baseline><td><em>Applies to:</em> <td>block-level elements<tr valign=baseline><td><em>Inherited:</em> <td>yes<tr valign=baseline><td><em>Percentages:</em> <td>N/A<tr valign=baseline><td><em>Media:</em> <td><a href="media.html#visual-media-group" class="noxref">visual</a></table></dl></div><P>This property describes how inline content of a block is aligned. Valueshave the following meanings:</P><dl><dt><strong>left</strong>, <strong>right</strong>, <strong>center</strong>, and <strong>justify</strong><dd>Left, right, center, and double justify text, respectively.<dt><span class="index-inst" title="<string>"><a name="x4" href="syndata.html#value-def-string" class="noxref"><spanclass="value-inst-string"><strong><string></strong></span></a></span><dd>Specifies a string on which cells in a table column willalign (see the section on <a href="tables.html#column-alignment">horizontal alignment in a column</a> for details and an example).This value applies <em>only</em> to <a href="tables.html">table</a> cells. If set on other elements, it will be treated as 'left' or'right', depending on whether <a href="visuren.html#propdef-direction" class="noxref"><spanclass="propinst-direction">'direction'</span></a> is 'ltr', or 'rtl',respectively.</dl><P>A block of text is a stack of <a href="visuren.html#line-box">lineboxes</a>. In the case of 'left', 'right' and 'center', this property specifieshow the inline boxes within each line box align with respect to the linebox's left and right sides; alignment is not with respect to the <ahref="visuren.html#viewport">viewport</a>. In the case of 'justify',the UA may stretch the inline boxes in addition to adjusting theirpositions. (See also <a href="text.html#propdef-letter-spacing" class="noxref"><spanclass="propinst-letter-spacing">'letter-spacing'</span></a> and <a href="text.html#propdef-word-spacing" class="noxref"><spanclass="propinst-word-spacing">'word-spacing'</span></a>.)<div class="example"><P style="display:none">Example(s):</P><P> In this example, note that since <a href="text.html#propdef-text-align" class="noxref"><spanclass="propinst-text-align">'text-align'</span></a> is inherited, allblock-level elements inside the DIV element with 'class=center' willhave their inline content centered. <PRE>DIV.center { text-align: center }</PRE></div><div class="note"><P><em><strong>Note.</strong>The actual justification algorithm used is user-agent and written languagedependent.</em><P><em><span class="index-inst" title="conformance"><a name="x5"href="conform.html#conformance">Conforming user agents</a></span> mayinterpret the value 'justify' as 'left' or 'right', depending onwhether the element's default writing direction is left-to-right orright-to-left, respectively.</em></div><H2><a name="q3">16.3 Decoration</a></H2><H3>16.3.1 <a name="lining-striking-props">Underlining, overlining, striking, andblinking</a>: the <a href="text.html#propdef-text-decoration" class="noxref"><spanclass="propinst-text-decoration">'text-decoration'</span></a>property</H3><div class="propdef"><dl><dt><span class="index-def" title="'text-decoration'"><a name="propdef-text-decoration" class="propdef-title"><strong>'text-decoration'</strong></a></span><dd><table class="propinfo" cellspacing=0 cellpadding=0><tr valign=baseline><td><em>Value:</em> <td>none | [ underline || overline || line-through || blink ] | <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>none<tr valign=baseline><td><em>Applies to:</em> <td>all elements<tr valign=baseline><td><em>Inherited:</em> <td>no (see prose)<tr valign=baseline><td><em>Percentages:</em> <td>N/A<tr valign=baseline><td><em>Media:</em> <td><a href="media.html#visual-media-group" class="noxref">visual</a></table></dl></div><P> This property describes decorations that are added to the text ofan element. If the property is specified for a <ahref="visuren.html#block-level">block-level</a> element, it affectsall inline-level descendants of the element. If it is specified for (oraffects) an <a href="visuren.html#inline-level">inline-level</a> element, itaffects all boxes generated by the element. If the element has nocontent or no text content (e.g., the IMG element in HTML), useragents must <a href="syndata.html#ignore">ignore</a> this property.<P>Values have the following meanings:</p><dl><dt><strong>none</strong><dd>Produces no text decoration.<dt><strong>underline</strong><dd>Each line of text is underlined.<dt><strong>overline</strong><dd>Each line of text has a line above it.<dt><strong>line-through</strong><dd>Each line of text has a line through the middle<dt><strong>blink</strong><dd>Text blinks (alternates between visible and invisible).<a href="conform.html#conformance">Conforming user agents</a>are not required to support this value.</dl><P> The color(s) required for the text decoration should be derivedfrom the <a href="colors.html#propdef-color" class="noxref"><span class="propinst-color">'color'</span></a> property value.<P> This property is not inherited, but descendant boxes of ablock box should be formatted with the same decoration (e.g.,they should all be underlined). The color of decorations should remainthe same even if descendant elements have different <a href="colors.html#propdef-color" class="noxref"><spanclass="propinst-color">'color'</span></a> values.<div class="example"><P style="display:none">Example(s):</P><P>In the following example for HTML, the text content of all A elements acting as hyperlinks will be underlined:</p><PRE>A[href] { text-decoration: underline }</PRE></div><H3>16.3.2 <a name="text-shadow-props">Text shadows</a>: the <a href="text.html#propdef-text-shadow" class="noxref"><spanclass="propinst-text-shadow">'text-shadow'</span></a> property</H3><div class="propdef"><dl><dt><span class="index-def" title="'text-shadow'"><a name="propdef-text-shadow" class="propdef-title"><strong>'text-shadow'</strong></a></span><dd><table class="propinfo" cellspacing=0 cellpadding=0><tr valign=baseline><td><em>Value:</em> <td>none | [<a href="syndata.html#value-def-color" class="noxref"><span class="value-inst-color"><color></span></a> || <a href="syndata.html#value-def-length" class="noxref"><span class="value-inst-length"><length></span></a> <a href="syndata.html#value-def-length" class="noxref"><span class="value-inst-length"><length></span></a> <a href="syndata.html#value-def-length" class="noxref"><span class="value-inst-length"><length></span></a>? ,]*[<a href="syndata.html#value-def-color" class="noxref"><span class="value-inst-color"><color></span></a> || <a href="syndata.html#value-def-length" class="noxref"><span class="value-inst-length"><length></span></a> <a href="syndata.html#value-def-length" class="noxref"><span class="value-inst-length"><length></span></a> <a href="syndata.html#value-def-length" class="noxref"><span class="value-inst-length"><length></span></a>?] | <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>none<tr valign=baseline><td><em>Applies to:</em> <td>all elements<tr valign=baseline><td><em>Inherited:</em> <td>no (seeprose)<tr valign=baseline><td><em>Percentages:</em> <td>N/A<tr valign=baseline><td><em>Media:</em> <td><a href="media.html#visual-media-group" class="noxref">visual</a></table></dl></div><P>This property accepts a comma-separated list of shadow effects tobe applied to the text of the element. The shadow effects are appliedin the order specified and may thus overlay each other, but they willnever overlay the text itself. Shadow effects do not alter the size ofa box, but may extend beyond its boundaries. The <Ahref="visuren.html#stack-level">stack level</a> of the shadow effectsis the same as for the element itself.<P>Each shadow effect must specify a shadow offset and may optionallyspecify a blur radius and a shadow color.<P>A shadow offset is specified with two <span class="index-inst"title="<length>"><a name="x8" href="syndata.html#value-def-length" class="noxref"><spanclass="value-inst-length"><length></span></a></span> values thatindicate the distance from the text. The first length valuespecifies the horizontal distance to the right of the text. A negativehorizontal length value places the shadow to the left of the text. Thesecond length value specifies the vertical distance below the text. Anegative vertical length value places the shadow above the text.<P>A blur radius may optionally be specified after the shadow offset.The blur radius is a length value that indicates the boundaries of theblur effect. The exact algorithm for computing the blur effect is notspecified.<P>A color value may optionally be specified before or after thelength values of the shadow effect. The color value will be used asthe basis for the shadow effect. If no color is specified, the valueof the <a href="colors.html#propdef-color" class="noxref"><span class="propinst-color">'color'</span></a> property will beused instead.<P>Text shadows may be used with the <ahref="selector.html#first-letter"> :first-letter</a> and <ahref="selector.html#first-line">:first-line</a> pseudo-elements.<div class="example"><P style="display:none">Example(s):</P><P>The example below will set a text shadow to the right and below theelement's text. Since no color has been specified, the shadow willhave the same color as the element itself, and since no blur radius isspecified, the text shadow will not be blurred:</p><PRE>H1 { text-shadow: 0.2em 0.2em }</PRE>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -