22.12.2013 Views

W3C CSS2 Cascading Style Sheets, level 2 - instructional media + ...

W3C CSS2 Cascading Style Sheets, level 2 - instructional media + ...

W3C CSS2 Cascading Style Sheets, level 2 - instructional media + ...

SHOW MORE
SHOW LESS

You also want an ePaper? Increase the reach of your titles

YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.

Example(s):<br />

The following style sheet numbers nested list items as "1", "1.1", "1.1.1", etc.<br />

OL { counter-reset: item }<br />

LI { display: block }<br />

LI:before { content: counters(item, "."); counter-increment: item }<br />

12.5.2 Counter styles<br />

By default, counters are formatted with decimal numbers, but all the styles available<br />

for the ’list-style-type’ property are also available for counters. The notation<br />

is:<br />

counter(name)<br />

for the default style, or:<br />

counter(name, ’list-style-type’)<br />

All the styles are allowed, including ’disc’, ’circle’, ’square’, and ’none’.<br />

Example(s):<br />

H1:before { content: counter(chno, upper-latin) ". " }<br />

H2:before { content: counter(section, upper-roman) " - " }<br />

BLOCKQUOTE:after { content: " [" counter(bq, hebrew) "]" }<br />

DIV.note:before { content: counter(notecntr, disc) " " }<br />

P:before { content: counter(p, none) }<br />

12.5.3 Counters in elements with ’display: none’<br />

An element that is not displayed (’display’ set to ’none’) cannot increment or reset<br />

a counter.<br />

Example(s):<br />

For example, with the following style sheet, H2s with class "secret" do not<br />

increment ’count2’.<br />

H2.secret {counter-increment: count2; display: none}<br />

Elements with ’visibility’ set to ’hidden’, on the other hand, do increment counters.<br />

12.6 Markers and lists<br />

Most block-<strong>level</strong> elements in CSS generate one principal block box. In this<br />

section, we discuss two CSS mechanisms that cause an element to generate two<br />

boxes: one principal [p. 97] block box (for the element’s content) and one separate<br />

marker box (for decoration such as a bullet, image, or number). The marker<br />

box may be positioned inside or outside the principal box. Unlike :before and<br />

:after content, the marker box does not affect the position of the principal box,<br />

whatever the positioning scheme.<br />

The more general of the two mechanisms is new in <strong>CSS2</strong> and is called<br />

markers. The more limited mechanism involves the list [p. 168] properties of<br />

CSS1. The list properties give authors quick results for many common ordered<br />

and unordered list scenarios. However, markers give authors precise control over<br />

marker content and position. Markers may be used with counters [p. 160] to<br />

163

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!