[ Pobierz całość w formacie PDF ]
] | inherit
Initial:
not defined for shorthand properties
Applies to:
elements with ’display: list-item’
Inherited:
yes
Percentages: N/A
Media:
visual
The ’list-style’ property is a shorthand notation for setting the three properties
’list-style-type’, ’list-style-image’, and ’list-style-position’ at the same place in the
style sheet.
Example(s):
UL { list-style: upper-roman inside } /* Any UL */
UL UL { list-style: circle outside } /* Any UL child of a UL */
Although authors may specify ’list-style’ information directly on list item
elements (e.g., LI in HTML), they should do so with care. The following rules look
similar, but the first declares a descendant selector [p. 56] and the second a
(more specific) child selector. [p. 57]
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 the descendant selector [p. 56] may not achieve the
results they expect. Consider the following rules:
HTML
HEAD
TITLEWARNING: 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 class="alpha"
LIlevel 1
UL
LIlevel 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, the cascading order [p. 73] will
cause the first style rule (which includes specific class information) to mask the
second. The following rules solve the problem by employing a child selector
[p. 57] instead:
OL.alpha LI { list-style: lower-alpha }
UL LI { list-style: disc }
Another solution would be to specify ’list-style’ information only on the list type
elements:
172
OL.alpha { list-style: lower-alpha }
UL
{ list-style: disc }
Inheritance will transfer the ’list-style’ values from OL and UL elements to LI
elements. This is the recommended way to specify list style information.
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 is unavailable.
A value of ’none’ for the ’list-style’ property sets both ’list-style-type’ and
’list-style-image’ to ’none’:
UL { list-style: none }
The result is that no list-item marker is displayed.
173
174
13 Paged media
Contents
13.1 Introduction to paged media .
.
.
.
.
.
.
13.2 Page boxes: the @page rule
.
.
.
.
.
.
13.2.1 Page margins
.
.
.
.
.
.
.
.
13.2.2 Page size: the ’size’ property .
.
.
.
.
Rendering page boxes that do not fit a target sheet
Positioning the page box on the sheet
.
.
.
13.2.3 Crop marks: the ’marks’ property
.
.
.
.
13.2.4 Left, right, and first pages .
.
.
.
.
.
13.2.5 Content outside the page box .
.
.
.
.
13.3 Page breaks
.
.
.
.
.
.
.
.
.
.
13.3.1 Break before/after elements: ’page-break-before’,
’page-break-after’, ’page-break-inside’
.
.
.
.
13.3.2 Using named pages: ’page’
.
.
.
.
.
13.3.3 Breaks inside elements: ’orphans’, ’widows’
.
13.3.4 Allowed page breaks .
.
.
.
.
.
.
13.3.5 Forced page breaks
.
.
.
.
.
.
.
13.3.6 "Best" page breaks
.
.
.
.
.
.
.
13.4 Cascading in the page context
.
.
.
.
.
.
.
.
. 175
.
.
. 176
.
.
. 176
.
.
. 177
.
.
. 178
.
.
. 178
.
.
. 179
.
.
. 179
.
.
. 180
.
.
. 180
.
.
. 181
.
.
. 182
.
.
. 182
.
.
. 183
.
.
. 184
.
.
. 184
.
.
. 185
13.1 Introduction to paged media
Paged media (e.g., paper, transparencies, pages that are displayed on computer
screens, etc.) differ from continuous media [p. 79] in that the content of the docu-
ment is split into one or more discrete pages. To handle page breaks, CSS2
extends the visual formatting model [p. 95] as follows:
1. The page box [p. 176] extends the box model [p. 81] to allow authors to
specify the size of a page, its margins, etc.
2. The page model extends the visual formatting model [p. 95] to account for
page breaks. [p. 180]
The CSS2 page model specifies how a document is formatted within a rectan-
gular area -- the page box [p. 176] -- that has a finite width and height. The page
box does not necessarily correspond to the real sheet where the document will
ultimately be rendered (paper, transparency, screen, etc.). The CSS page model
specifies formatting in the page box, but it is the user agent’s responsibility to
transfer the page box to the sheet. Some transfer possibilities include:
Transferring one page box to one sheet (e.g., single-sided printing).
Transferring two page boxes to both sides of the same sheet (e.g.,
double-sided printing).
Transferring N (small) page boxes to one sheet (called "n-up").
175
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Transferring one (large) page box to N x M sheets (called "tiling").
Creating signatures. A signature is a group of pages printed on a sheet,
which, when folded and trimmed like a book, appear in their proper
sequence.
Printing one document to several output trays.
Outputting to a file.
Although CSS2 does not specify how user agents transfer page boxes to
sheets, it does include certain mechanisms for telling user agents about the
target sheet size and orientation [p. 177] .
13.2 Page boxes: the @page rule
The page box is a rectangular region that contains two areas:
The page area. The page area includes the boxes laid out on that page. The
edges of the page area act as the initial containing block [p. 96] for layout
that occurs between page breaks.
The margin area, which surrounds the page area.
Note. In CSS2, the border properties [p. 88] and padding properties [p. 87] do
not apply to pages; they may in the future.
Authors specify the dimensions, orientation, margins, etc. of a page box within
an @page rule. An @page rule consists of the keyword "@page", a page selec-
tor (followed with no intervening space by an optional page pseudo-class), and a
block of declarations (said to be in the page context).
The page selector specifies for which pages the declarations apply. In CSS2,
page selectors may designate the first page, all left pages, all right pages, or a
page with a specific name.
The dimensions of the page box are set with the ’size’ property. The dimen-
sions of the page area are the dimensions of the page box minus the margin
area.
Example(s):
For example, the following @page rule sets the page box size to 8.5 x 11
inches and creates ’2cm’ margin on all sides between the page box edge and the
page area:
@page { size 8.5in 11in; margin: 2cm }
The ’marks’ property in an @page rule specifies crop and cross marks for the
page box.
13.2.1 Page margins
The margin properties [p. 85] (’margin-top’, ’margin-right’, ’margin-bottom’,
[ Pobierz całość w formacie PDF ]
