csswg-drafts/css2/lists.src at b9e705f23f70f50426e4d9c803652b455bb61ba2 · bocoup/csswg-drafts · GitHub

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
<!DOCTYPE HTML SYSTEM "http://www.w3.org/TR/WD-html40/sgml/HTML4.dtd">
<html lang="en">
<!-- $Id: lists.src,v 1.5 1997-09-08 23:58:10 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>
Elements with a <span class="propinst-display">'display'</span>
property value of 'list-item' are formatted as other block level
elements, but preceded by a list-item 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>
For example:

<PRE>
  &lt;STYLE type="text/css"&gt;
    UL         { list-style: outside }
    UL.compact { list-style: inside }
  &lt;/STYLE&gt;

  &lt;UL&gt;
    &lt;LI&gt;first list item comes first
    &lt;LI&gt;second list item comes second
  &lt;/UL&gt;

  &lt;UL class=compact&gt;
    &lt;LI&gt;first list item comes first
    &lt;LI&gt;second list item comes second
  &lt;/UL&gt;
</PRE>

<P> The above example may be formatted as:

<PRE>
  * first list item
    comes first

  * second list item
    comes second


  * first list
  item comes first

  * second list
  item comes second
</PRE>
</div>

<P>In right-to-left text, the markers would have been on the right
side of the box.

<H3><a name="list-props">List properties</a></H3>

<H4><a name="propdef-list-style-type">'list-style-type'</a></H4>
<!-- #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>disk
<dd>A disc (exact presentation is UA-dependent)
<dt>circle
<dd>A circle (exact presentation is UA-dependent)
<dt>square
<dd>A square (exact presentation is UA-dependent)
<dt>decimal
<dd>Decimal numbers, beginning with 0.
<dt>lower-roman
<dd>Lower case roman numerals (i, ii, iii, iv, v, etc.)
<dt>upper-roman
<dd>Upper case roman numerals (I, II, III, IV, V, etc.)
<dt>lower-alpha
<dd>Lower case ascii letters (a, b, c, ... z)
<dt>upper-alpha
<dd>Upper case ascii letters (A, B, C, ... Z)
<dt>none
<dd>No list marker
</dl>

<div class="example"><P>
For example, the following HTML document:
<PRE>
&lt;STYLE&gt;
  OL { list-style-type: lower-roman }
&lt;/STYLE&gt;
&lt;BODY&gt;
&lt;OL&gt;
&lt;LI&gt; This is the first item.
&lt;LI&gt; This is the second item.
&lt;LI&gt; This is the third item.
&lt;/OL&gt;
&lt;/BODY&gt;
</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>

<H4><a name="propdef-list-style-image">'list-style-image'</a></H4>
<!-- #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>

<H4><a name="propdef-list-style-position">'list-style-position'</a></H4>
<!-- #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.

<H4><a name="propdef-list-style">'list-style'</a></H4>
<!-- #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 }
  UL UL { list-style: circle outside }
  LI.square { list-style: square }
</PRE>
</div>


<P> Setting <span class="propinst-list-style">'list-style'</span>
directly on LI elements in HTML can have unexpected results.
Consider:

<div class="deprecated-example"><P>
<span class="example-title">DEPRECATED EXAMPLE:</span><br>
<PRE>
  &lt;STYLE type="text/css"&gt;
    OL.alpha LI  { list-style: lower-alpha }
    UL LI        { list-style: disc }
  &lt;/STYLE&gt;
  &lt;BODY&gt;
    &lt;OL class=alpha&gt;
      &lt;LI&gt;level 1
      &lt;UL&gt;
         &lt;LI&gt;level 2
      &lt;/UL&gt;
    &lt;/OL&gt;
  &lt;/BODY&gt;
</PRE>

<P> Since the specificity (as defined in the <a
href="./cascade.html#cascading-order">cascading order</a> is higher
for the first rule in the style sheet in the example above, it will
override the second rule on all LI elements and only 'lower-alpha'
list styles will be used.

It is therefore recommended that <span
class="propinst-list-style">'list-style'</span> only be set on the
list type elements:

<PRE>
  OL.alpha  { list-style: lower-alpha }
  UL        { list-style: disc }
</PRE>

<P> In the above example, inheritance will transfer the <span
class="propinst-list-style">'list-style'</span> values from OL and
UL elements to LI elements.
</div>


<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>