Classification properties
Classification properties
These properties classify elements into categories more than they set
specific visual parameters.
The list-style properties describe how list items (i.e. elements with a
'display' value of 'list-item') are formatted. The list-style properties can be
set on any element, and it will inherit normally down the tree. However, they
will only be have effect on elements with a 'display' value of 'list-item'. In
HTML this is typically the case for the 'LI' element.
'display'
Value: block | inline | list-item | none
Initial:
block
Applies to: all elements
Inherited:
no
Percentage values: N/A
This property describes how/if an element is displayed on the canvas (which
may be on a printed page, a computer display etc.).
An element with a 'display' value of 'block' opens a new box. The box is
positioned relative to adjacent boxes according to the CSS formatting model.
Typically, elements like 'H1' and 'P' are of type 'block'. A value of
'list-item' is similar to 'block' except that a list-item marker is added. In
HTML, 'LI' will typically have this value.
An element with a 'display' value of 'inline' results in a new inline box
on the same line as the previous content. The box is dimensioned according to
the formatted size of the content. If the content is text, it may span several
lines, and there will be a box on each line. The margin, border and padding
properties apply to 'inline' elements, but will not have any effect at the line
breaks.
A value of 'none' turns off the display of the element, including children
elements and the surrounding box.
P { display: block }
EM { display: inline }
LI { display: list-item
}
IMG { display: none }
The last rule turns off the display of images.
The initial value of 'display' is 'block', but a UA will typically have
default values for all HTML elements according to the suggested rendering of
elements in the HTML specification .
CSS1 core: UAs may ignore 'display' and use only the UA's default
values.
'white-space'
Value: normal | pre | nowrap
Initial: normal
Applies
to: block-level elements
Inherited: yes
Percentage
values: N/A
This property declares how whitespace inside the element is handled: the
'normal' way (where whitespace is collapsed), as 'pre' (which behaves like the
'PRE' element in HTML) or as 'nowrap' (where wrapping is done only through BR
elements):
PRE { white-space: pre }
P { white-space: normal
}
The initial value of 'white-space' is 'normal', but a UA will typically
have default values for all HTML elements according to the suggested rendering
of elements in the HTML specification.
CSS1 core: UAs may ignore the 'white-space' property in author's and
reader's style sheets, and use the UA's default values instead.
'list-style-type'
Value: disc | circle | square | decimal | lower-roman | upper-roman
| lower-alpha | upper-alpha | none
Initial: disc
Applies to:
elements with 'display' value 'list-item'
Inherited:
yes
Percentage values: N/A
This property is used to determine the appearance of the list-item marker
if 'list-style-image' is 'none' or if the image pointed to by the URL cannot be
displayed.
OL { list-style-type: decimal } /* 1 2 3
4 5 etc. */
OL { list-style-type: lower-alpha } /* a b c
d e etc. */
OL { list-style-type: lower-roman } /* i ii
iii iv v etc. */
'list-style-image'
Value: <url> | none
Initial: none
Applies
to: elements with 'display' value 'list-item'
Inherited:
yes
Percentage values: N/A
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
'list-style-type' marker.
UL { list-style-image:
url(http://png.com/ellipse.png) }
'list-style-position'
Value: inside | outside
Initial: outside
Applies
to: elements with 'display' value 'list-item'
Inherited:
yes
Percentage values: N/A
The value of 'list-style-position' determines how the list-item marker is
drawn with regard to the content.
'list-style'
Value: [disc | circle | square | decimal | lower-roman | upper-roman
| lower-alpha | upper-alpha | none] || [inside | outside] || [<url> |
none]
Initial: not defined for shorthand properties
Applies
to: elements with 'display' value 'list-item'
Inherited:
yes
Percentage values: N/A
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.
UL { list-style: upper-roman inside
}
UL UL { list-style: circle outside
}
LI.square { list-style: square
}
Setting 'list-style' directly on 'LI' elements can have unexpected results.
Consider:
<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>
Since the specificity 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 to set
'list-style' only on the list type elements:
OL.alpha { list-style: lower-alpha
}
UL { list-style: disc
}
In the above example, inheritance will transfer the 'list-style' values
from 'OL' and 'UL' elements to 'LI' elements.
A URL value can be combined with any other value:
UL { list-style:
url(http://png.com/ellipse.png) disc }
In the example above, the 'disc' will be used when the image is
unavailable.
|
