12.4 Automaticcounters and numbering
Automatic numbering in CSS 2.1 is controlled with two properties,'counter-increment'and'counter-reset'. Thecounters defined by these properties are used with the counter() andcounters() functions of the the
- 'counter-reset'
Value: [<identifier><integer>? ]+ | none |inherit Initial: none Applies to: all elements Inherited: no Percentages: N/A Media: all Computed value: as specified
- 'counter-increment'
Value: [<identifier><integer>? ]+ | none |inherit Initial: none Applies to: all elements Inherited: no Percentages: N/A Media: all Computed value: as specified
The
The'counter-reset'property also contains a list of one or more names of counters, eachone optionally followed by an integer. The integer gives the value thatthe counter is set to on each occurrence of the element. The defaultis 0.
The keywords 'none', 'inherit' and 'initial' must not be used ascounter names. A value of 'none' on its own means no counters arereset, resp. incremented. 'Inherit' on its own has its usual meaning(see6.2.1). 'Initial' isreserved for future use.
Example(s):
This example shows a way to number chapters and sections with"Chapter 1", "1.1", "1.2", etc.
BODY { counter-reset: chapter; /* Create a chapter counter scope */}H1:before { content: "Chapter " counter(chapter) ". "; counter-increment: chapter; /* Add 1 to chapter */}H1 { counter-reset: section; /* Set section to 0 */}H2:before { content: counter(chapter) "." counter(section) " "; counter-increment: section;}If an element increments/resets a counter and also uses it (in the'content' property of its:before or :after pseudo-element), the counter is usedafterbeing incremented/reset.
If an element both resets and increments a counter, the counter isreset first and then incremented.
If the same counter is specified more than once in the value of the'counter-reset' and
Example(s):
The following example will reset the 'section' counter to 0:
H1 { counter-reset: section 2 section }The following example will increment the 'chapter' counter by 3:
H1 { counter-increment: chapter chapter 2 }The'counter-reset'property follows the cascading rules. Thus, due to cascading, thefollowing style sheet:
H1 { counter-reset: section -1 }H1 { counter-reset: imagenum 99 }will only reset 'imagenum'. To reset both counters, they have to bespecified together:
H1 { counter-reset: section -1 imagenum 99 }12.4.1Nested counters and scope
Counters are "self-nesting", in the sense that resetting a counterin a descendant element or pseudo-element automatically creates a newinstance of the counter. This is important for situations like listsin HTML, where elements can be nested inside themselves to arbitrarydepth. It would be impossible to define uniquely named counters foreach level.
Example(s):
Thus, the following suffices to number nested list items. Theresult is very similar to that of setting 'display:list-item' and'list-style: inside' on the LI element:
OL { counter-reset: item }LI { display: block }LI:before { content: counter(item) ". "; counter-increment: item }Thescopeof a counter starts at the first element in the document that has a'counter-reset' for thatcounter and includes the element's descendants and its followingsiblings with their descendants. However, it does not include anyelements in the scope of a counter with the same name created by a 'counter-reset' on alater sibling of the element or by a later 'counter-reset' on the sameelement.
If
In the example above, an OL will create a counter, and all childrenof the OL will refer to that counter.
If we denote by item[n] thenth instance of the "item"counter, and by "{" and "}" the beginning and end of ascope, then the following HTML fragment will use the indicatedcounters. (We assume the style sheet as given in the example above).
<OL> <!-- {item[0]=0 --> <LI>item</LI> <!-- item[0]++ (=1) --> <LI>item <!-- item[0]++ (=2) --> <OL> <!-- {item[1]=0 --> <LI>item</LI> <!-- item[1]++ (=1) --> <LI>item</LI> <!-- item[1]++ (=2) --> <LI>item <!-- item[1]++ (=3) --> <OL> <!-- {item[2]=0 --> <LI>item</LI> <!-- item[2]++ (=1) --> </OL> <!-- --> <OL> <!-- }{item[2]=0 --> <LI>item</LI> <!-- item[2]++ (=1) --> </OL> <!-- --> </LI> <!-- } --> <LI>item</LI> <!-- item[1]++ (=4) --> </OL> <!-- --> </LI> <!-- } --> <LI>item</LI> <!-- item[0]++ (=3) --> <LI>item</LI> <!-- item[0]++ (=4) --></OL> <!-- --><OL> <!-- }{item[0]=0 --> <LI>item</LI> <!-- item[0]++ (=1) --> <LI>item</LI> <!-- item[0]++ (=2) --></OL> <!-- -->Example(s):
Another example, showing how scope works when counters are used onelements that are not nested, is the following. This shows how thestyle rules given above to number chapters and sections would apply tothe markup given.
<!--"chapter" counter|"section" counter --><body> <!-- {chapter=0 | --> <h1>About CSS</h1> <!-- chapter++ (=1) | {section=0 --> <h2>CSS 2</h2> <!-- | section++ (=1) --> <h2>CSS 2.1</h2> <!-- | section++ (=2) --> <h1>Style</h1> <!-- chapter++ (=2) |}{ section=0 --></body> <!-- | } -->The 'counters()' function generates a string composed of all of thecounters with the same name that are in scope, separated by a givenstring.
Example(s):
The following style sheet numbers nested list items as "1", "1.1", "1.1.1", etc.
OL { counter-reset: item }LI { display: block }LI:before { content: counters(item, ".") " "; counter-increment: item }12.4.2Counter styles
By default, counters are formatted with decimal numbers, but all thestyles available for the
counter(name)
for the default style, or:
counter(name, <'list-style-type'>)
All the styles are allowed, including 'disc', 'circle', 'square',and 'none'.
Example(s):
H1:before { content: counter(chno, upper-latin) ". " }H2:before { content: counter(section, upper-roman) " - " }BLOCKQUOTE:after { content: " [" counter(bq, lower-greek) "]" }DIV.note:before { content: counter(notecntr, disc) " " }P:before { content: counter(p, none) }12.4.3Counters in elements with 'display: none'
An element that is not displayed (
Example(s):
For example, with the following style sheet,H2s with class "secret" do not increment 'count2'.
H2.secret {counter-increment: count2; display: none}Pseudo-elements that are not generated also cannot increment orreset a counter.
Example(s):
For example, the following does not increment 'heading':
h1::before { content: normal; counter-increment: heading;}Elements with'visibility'set to 'hidden', on the other hand,do increment counters.
12.5Lists
CSS 2.1 offers basic visual formatting of lists. An element with'display: list-item' generates aprincipal block box for the element'scontent and, depending on the values of 'list-style-type' and'list-style-image', possibly also a marker box as a visual indicationthat theelement is a list item.
Thelistproperties describe basic visual formatting of lists:they allow style sheets to specify the marker type (image, glyph, ornumber), and the marker position with respect to the principal box(outside it or within it before content). They do not allow authors tospecify distinct style (colors, fonts, alignment, etc.) for the listmarker or adjust its position with respect to the principal box; thesemay be derived from the principal box.
Thebackgroundproperties apply to the principal box only; an 'outside' markerbox is transparent.
12.5.1Lists: the'list-style-type' ,'list-style-image' ,'list-style-position' , and'list-style' properties
- 'list-style-type'
Value: disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none |inherit Initial: disc Applies to: elements with 'display: list-item' Inherited: yes Percentages: N/A Media: visual Computed value: as specified
This property specifies appearance of the list item marker if'list-style-image' hasthe value 'none' or if the image pointed to by the URI cannot bedisplayed. The value 'none' specifies no marker, otherwise there arethree types of marker: glyphs, numbering systems, and alphabeticsystems.
Glyphs are specified withdisc,circle, andsquare. Their exactrendering depends on the user agent.
Numbering systems are specified with:
- decimal
- Decimal numbers, beginning with 1.
- decimal-leading-zero
- Decimal numbers padded by initial zeros (e.g., 01, 02, 03, ..., 98, 99).
- lower-roman
- Lowercase roman numerals (i, ii, iii, iv, v, etc.).
- upper-roman
- Uppercase roman numerals (I, II, III, IV, V, etc.).
- georgian
- Traditional Georgian numbering (an, ban, gan, ..., he, tan, in, in-an, ...).
- armenian
- Traditional uppercase Armenian numbering.
Alphabetic systems are specified with:
- lower-latin orlower-alpha
- Lowercase ascii letters (a, b, c, ... z).
- upper-latin orupper-alpha
- Uppercase ascii letters (A, B, C, ... Z).
- lower-greek
- Lowercase classical Greek alpha, beta, gamma, ... (α, β, γ, ...)
This specification does not define how alphabetic systems wrap atthe end of the alphabet. For instance, after 26 list items,'lower-latin' rendering is undefined. Therefore, for long lists, werecommend that authors specify true numbers.
CSS 2.1 does not define how the list numbering is reset andincremented. This is expected to be defined in the CSS List Module[CSS3LIST].
For example, the following HTML document:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"><HTML> <HEAD> <TITLE>Lowercase latin numbering</TITLE> <STYLE type="text/css"> ol { list-style-type: lower-roman } </STYLE> </HEAD> <BODY> <OL> <LI> This is the first item. <LI> This is the second item. <LI> This is the third item. </OL> </BODY></HTML>might produce something like this:
i This is the first item. ii This is the second item.iii This is the third item.
The list marker alignment (here, right justified) depends on the user agent.
- 'list-style-image'
Value: <uri> | none |inherit Initial: none Applies to: elements with 'display: list-item' Inherited: yes Percentages: N/A Media: visual Computed value: absolute URI or 'none'
This property sets the image that will be used as the list itemmarker. When the image is available, it will replace the marker setwith the
The size of the image is calculated from the following rules:
- If the image has a intrinsic width and height, the used width andheight are the intrinsic width and height.
- Otherwise, if the image has an intrinsic ratio and either anintrinsic width or an intrinsic height, the used width/height is thesame as the provided intrinsic width/height, and the used value of themissing dimension is calculated from the provided dimension and theratio.
- Otherwise, if the image has an intrinsic ratio, the used width is1em and the used height is calculated from this width and theintrinsic ratio. If this would produce a height larger than 1em, thenthe used height is instead set to 1em and the used width is calculatedfrom this height and the intrinsic ratio.
- Otherwise, the image's used width is its intrinsic width if it hasone, or else 1em. The image's used height is its intrinsic height ifit has one, or else 1em.
Example(s):
The following example sets the marker at the beginning of each listitem to be the image "ellipse.png".
ul { list-style-image: url("http://png.com/ellipse.png") }- 'list-style-position'
Value: inside | outside |inherit Initial: outside Applies to: elements with 'display: list-item' Inherited: yes Percentages: N/A Media: visual Computed value: as specified
This property specifies the position of the marker box withrespect to theprincipal block box. Values have the following meanings:
- outside
- The marker box is outside the principal block box. Theposition of the list-item marker adjacent to floats is undefined inCSS 2.1. CSS 2.1 does not specify the preciselocation of the marker box or its position in the paintingorder, but doesrequire that for list items whose 'direction' property is 'ltr' themarker box be on the left side of the content and for elements whose'direction' property is 'rtl' the marker box be on the right side ofthe content.The marker box is fixed with respect to the principal block box'sborder and does not scroll with the principal block box's content.In CSS 2.1, a UA may hide the marker ifthe element's'overflow' is otherthan 'visible'. (This is expected to change in the future.)The size or contents of the marker box may affect the height of theprincipal block box and/or the height of its first line box, and insome cases may cause the creation of a new line box.
- inside
- The marker box is placed as the first inline box in the principalblock box, before the element's content and before any :beforepseudo-elements. CSS 2.1 does not specifythe precise location of the marker box.
For example:
<HTML> <HEAD> <TITLE>Comparison of inside/outside position</TITLE> <STYLE type="text/css"> ul { list-style: outside } ul.compact { list-style: inside } </STYLE> </HEAD> <BODY> <UL> <LI>first list item comes first <LI>second list item comes second </UL> <UL> <LI>first list item comes first <LI>second list item comes second </UL> </BODY></HTML>The above example may be formatted as:
In right-to-left text, the markers would have been on the rightside of the box.
- 'list-style'
Value: [<'list-style-type'> ||<'list-style-position'> ||<'list-style-image'> ] |inherit Initial: see individual properties Applies to: elements with 'display: list-item' Inherited: yes Percentages: N/A Media: visual Computed value: see individual properties
The'list-style' propertyis a shorthand notation for setting the three properties
Example(s):
ul { list-style: upper-roman inside } /* Any "ul" element */ul > li > ul { list-style: circle outside } /* Any "ul" child of an "li" child of a "ul" element */Although authors may specify
ol.alpha li { list-style: lower-alpha } /* Any "li" descendant of an "ol" */ ol.alpha > li { list-style: lower-alpha } /* Any "li" child of an "ol" */Authors who use only thedescendant selector maynot achieve the results they expect. Consider the following rules:
<HTML> <HEAD> <TITLE>WARNING: Unexpected results due to cascade</TITLE> <STYLE type="text/css"> ol.alpha li { list-style: lower-alpha } ul li { list-style: disc } </STYLE> </HEAD> <BODY> <OL> <LI>level 1 <UL> <LI>level 2 </UL> </OL> </BODY></HTML>The desired rendering would have level 1 list items with'lower-alpha' labels and level 2 items with 'disc' labels. However,thecascading order willcause the first style rule (which includes specific class information)to mask the second. The following rules solve the problem by employingachildselector instead:
ol.alpha > li { list-style: lower-alpha }ul li { list-style: disc }Another solution would be to specify
ol.alpha { list-style: lower-alpha }ul { list-style: disc }Inheritance will transfer the
Example(s):
A URI value may be combined with any other value, as in:
ul { list-style: url("http://png.com/ellipse.png") disc }In the example above, the 'disc' will be used when the image isunavailable.
A value of 'none' within the
Example(s):
For example, a value of 'none' for the
ul { list-style: none }The result is that no list-item marker is displayed.
[8]ページ先頭