5 5 1.5 = 2.25em).
When using custom bullet images, be wary of making them too large. Some browsers
clip the bullet image, and some place the list contents at the foot of the image. In all
cases, the results look terrible.
WORKING WITH TYPE
109
3
html {
font-size: 100%;
}
body {
font-size: 62.5%;
font-family: Verdana, Arial,
?? Helvetica, sans-serif;
}
li {
font-size: 1.5em;
}
The simple workaround for this is to use a contextual selector??”li li??”to set an explicit
font-size value for list items within list items, as shown in the following rule.
li li {
font-size: 1em;
}
With this, all nested lists take on the same font-size value as the parent list, which in this
case is 1.5em.
list-style-position property
This property has two values: inside and outside. The latter is how list items are usually
displayed: the bullet is placed in the list margin, and the left margin of the text is always
indented. However, if you use inside, bullets are placed where the first text character
would usually go, meaning that the text will wrap underneath the bullet.
list-style-type property
The list-style-type property is used to amend the bullets in an unordered or ordered
list, enabling you to change the default bullets to something else (other than a custom
image). In an unordered list, this defaults to disc (a black bullet), but other values are
available, such as circle (a hollow disc bullet), square (a square bullet), and none, which
results in no bullet points.
Pages:
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