forked from w3c/csswg-drafts
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathlists.src
More file actions
305 lines (252 loc) · 9.38 KB
/
Copy pathlists.src
File metadata and controls
305 lines (252 loc) · 9.38 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="en">
<!-- $Id: lists.src,v 1.12 1997-11-27 03:25:32 ian Exp $ -->
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<TITLE>Lists</TITLE>
<LINK rel="next" href="tables.html">
<LINK rel="previous" href="text.html">
<LINK rel="STYLESHEET" href="style/default.css" type="text/css">
</HEAD>
<BODY>
<H1 align="center">Lists</H1>
<H2>Visual formatting of lists</H2>
CSS allows authors to control the visual presentation of lists in a
number of ways:
<ul>
<li>Authors may specify a marker that appears before each list item.
<li>Markers may be placed outside or inside the list item's
content.
<li>Markers may be represented by predefined shapes (bullets,
circles, squares), numerals (arabic, roman, letters, etc.), or
images.
<li>With <a
href="./selector.html#descendant-selectors">descendant selectors</a>
and <a
href="./selector.html#child-selectors">child selectors</a>,
it's possible to specify different marker types depending on the depth
of embedded lists.
</ul>
<P>Elements with a <span class="propinst-display">'display'</span>
property value of 'list-item' are formatted visually like other block-level elements, only each list item is preceded by a marker. The type
of marker and its placement is determined by the <a
href="#list-props">list properties</a> described below.
<div class="example"><P>
The following rule applies to list item (LI) elements in HTML. The
<span class="propinst-display">'display'</span> property declares
the presentation of the LI element to be a "list-item", and the <span
class="propinst-list-style">'list-style'</span> property means that no
marker will appear next to list items:
<PRE>
LI { display: list-item; list-style: none }
<UL>
<LI> This is the first list item, formatted as a block.
<LI> This is the second list item.
<LI> This is the third.
</UL>
</PRE>
<P>The list might be formatted as follows:</P>
<img src="./images/list-none.gif" alt="A list with no markers.">
<P>The illustration shows the relationship between the current left
margin and the margins and padding of the list element (UL) and the
list items (LI). (The lines delimiting the margins and padding are not
rendered).
<P>If we change the <span
class="propinst-list-style">'list-style'</span> to "square":
<PRE>
LI { display: list-item; list-style: square }
</PRE>
<P> each list item will be preceded by a small square. However, the
placement of the square does not affect the block formatting of the
list item content:</P>
<img src="./images/list-square.gif" alt="A list with square markers.">
</div>
<div class="note"><P>
<em><strong>Note.</strong></em>
<ul>
<li><em>CSS2 does not include a property to adjust the separation between a
list marker and the content of its list item.</em></li>
<li><em>There is no "list" presentation for other types of list structures
(e.g., "definition lists" declared by DL, DT, and DD in HTML). Each
part of a definition list is simply a block element.</em></li>
</ul>
</div>
<H3><a name="list-props">List properties</a>: <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>
</H3>
<!-- #include src=properties/list-style-type.srb -->
<P> This property is used to determine the appearance of the
list item marker if <span
class="propinst-list-style-image">'list-style-image'</span> is 'none'
or if the image pointed to by the URL cannot be displayed.
<P>The possible values have the following meanings:
<dl>
<dt><strong>disc</strong>
<dd>A disc (exact presentation is UA-dependent)
<dt><strong>circle</strong>
<dd>A circle (exact presentation is UA-dependent)
<dt><strong>square</strong>
<dd>A square (exact presentation is UA-dependent)
<dt><strong>decimal</strong>
<dd>Decimal numbers, beginning with 0.
<dt><strong>lower-roman</strong>
<dd>Lower case roman numerals (i, ii, iii, iv, v, etc.)
<dt><strong>upper-roman</strong>
<dd>Upper case roman numerals (I, II, III, IV, V, etc.)
<dt><strong>lower-alpha</strong>
<dd>Lower case ascii letters (a, b, c, ... z)
<dt><strong>upper-alpha</strong>
<dd>Upper case ascii letters (A, B, C, ... Z)
<dt><strong>none</strong>
<dd>No marker
</dl>
<div class="example"><P>
For example, the following HTML document:
<PRE>
<STYLE>
OL { list-style-type: lower-roman }
</STYLE>
<BODY>
<OL>
<LI> This is the first item.
<LI> This is the second item.
<LI> This is the third item.
</OL>
</BODY>
</PRE>
<P>might produce something like this:
<PRE>
i This is the first item.
ii This is the second item.
iii This is the third item.
</PRE>
</div>
<!-- #include src=properties/list-style-image.srb -->
<P> This property sets the image that will be used as the list item
marker. When the image is available it will replace the marker set
with the <span
class="propinst-list-style-type">'list-style-type'</span> marker.
<div class="example"><P>
The following example sets the marker at the beginning of each list
item to be the image "ellipse.png".
<PRE>
UL { list-style-image: url(http://png.com/ellipse.png) }
</PRE>
</div>
<!-- #include src=properties/list-style-position.srb -->
<P> The value of <span
class="propinst-list-style-position">'list-style-position'</span>
determines how the list item marker is drawn with regard to the
content.
<dl>
<dt><strong>outside</strong>
<dd>The list item marker is outside the box that is generated for the
list item.
<dt><strong>inside</strong>
<dd>The list item marker is the first part of the box that is generated for the
list item. The list item's contents flow after the marker.
</dl>
<P>In either case, the placement of the marker does not affect
the relationship between the list item's box and the pertinent margin
(depending on script direction).
<div class="example"><P>
For example:
<PRE>
<STYLE type="text/css">
UL { list-style: outside }
UL.compact { list-style: inside }
</STYLE>
<UL>
<LI>first list item comes first
<LI>second list item comes second
</UL>
<UL class=compact>
<LI>first list item comes first
<LI>second list item comes second
</UL>
</PRE>
<P> The above example may be formatted as:</P>
<img src="./images/list-inout.gif" alt="Difference between inside and outside list style position">
</div>
<P>In right-to-left text, the markers would have been on the right
side of the box.
<!-- #include src=properties/list-style.srb -->
<P> The <span class="propinst-list-style">'list-style'</span> property
is a shorthand notation for setting the three properties <span
class="propinst-list-style-type">'list-style-type'</span>, <span
class="propinst-list-style-image">'list-style-image'</span>, and <span
class="propinst-list-style-position">'list-style-position'</span> at
the same place in the style sheet.
<div class="example"><P>
<PRE>
UL { list-style: upper-roman inside } /* Any UL*/
UL ~ UL { list-style: circle outside } /* Any UL child of a UL*/
</PRE>
</div>
<P>Although authors may specify <span
class="propinst-list-style">'list-style'</span> 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 <a
href="./selector.html#descendant-selectors">descendant selector</a>
and the second a (more specific) <a
href="./selector.html#child-selectors">child
selector.</a>
<PRE class="example">
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 */
</PRE>
<P>Authors who only use the contextual selector may not achieve
the results they expect. Consider the following rules:
<PRE class="example">
<STYLE type="text/css">
OL.alpha LI { list-style: lower-alpha }
UL LI { list-style: disc }
</STYLE>
<BODY>
<OL class=alpha>
<LI>level 1
<UL>
<LI>level 2
</UL>
</OL>
</BODY>
</PRE>
<P>The desired rendering would have level 1 list items with
'lower-alpha' labels and level 2 items with 'disc' labels. However,
the <a href="./cascade.html#cascading-order">cascading order</a> will
cause the first style rule (which includes specific class information)
to mask the second. The following rules solve the problem by employing
a <a href="./selector.html#child-selectors">child
selector</a> instead:
<PRE class="example">
<STYLE type="text/css">
OL.alpha ~ LI { list-style: lower-alpha }
UL LI { list-style: disc }
</STYLE>
</PRE>
<P>Another solution would be to specify <span
class="propinst-list-style">'list-style'</span> information only on
the list type elements:
<PRE>
<STYLE type="text/css">
OL.alpha { list-style: lower-alpha }
UL { list-style: disc }
</STYLE>
</PRE>
<P>Inheritance will transfer the <span
class="propinst-list-style">'list-style'</span> values from OL and
UL elements to LI elements. This is the recommended way to
specify list style information.
<div class="example"><P>
<P> A URL value can be combined with any other value, as in:
<PRE>
UL { list-style: url(http://png.com/ellipse.png) disc }
</PRE>
<P> In the example above, the 'disc' will be used when the image is
unavailable.
</div>
</body>
</html>