| |
Most block-level elements in CSS generate one principal block
box. Two CSS mechanisms cause an element to generate two boxes: one principal block box (for the element's content) and one separate marker box (for decoration such as a bullet, image, or number). The marker box may be positioned inside or outside the principal box. The marker box does not affect the position of the principal box, whatever the positioning scheme.
The simple list properties allow basic visual formatting of lists. The list properties allow authors to specify the marker type (image, glyph, or number) and its position with respect to the principal box (outside it or within it before content). They do not allow authors to specify distinct style (colors, fonts, alignment, etc.) for the list marker or adjust its position with respect to the principal box.
Once we use 'list-style' to define the list, it appears that OL and UL are interchangeable.
The first List Item has 'style="background: pink/skyblue"' added. This takes precedent over the inherited background colour used in the heading row.
OL list-style-type: lower-roman ;
background: pink;
- This is the first OL item.
- This is the second item.
UL list-style-type: lower-roman ;
background: skyblue;
- This is the first UL item.
- This is the second item.
OL list-style: inside lower-roman ;
background: pink;
- This is the first OL item.
- This is the second item.
UL list-style: inside lower-roman ;
background: skyblue;
- This is the first UL item.
- This is the second item.
Examples using 'list-style-position' with an unordered 'list-style-image'.
Smily <UL or OL, style="list-style: inside url('smily.gif') disc;
background: skyblue; ">
OL list-style: inside disc ;
background: pink;
- This is the first OL item.
- This is the second item.
UL list-style: inside disc ;
background: skyblue;
- This is the first UL item. style="background: pink "
- This is the second item.
OL list-style: outside disc ;
background: pink;
- This is the first OL item.
- This is the second item.
UL list-style: outside disc ;
background: skyblue;
- This is the first UL item.
- This is the second item.
Changes Number 1, add a margin - three widths
OL class="withroman" Words one margin: 0;
- List one margin-left: 5%;
- List two margin-left: 10%;
<OL style="list-style-type: lower-roman; margin: 0;
background: bisque; color: brown;">class="withroman" Words one
<LI style="margin-left: 5%; background: palegreen">List one
<LI style="margin-left: 10%; background: palegreen">List two
</OL>
And now try UL
UL class="withroman" Words one
- List one margin-left: 5%;
- List two margin-left: 10%;
Changes Number 2, OL now
class="withroman" Words one
- List one
- List two
Why the white space? It is provided by margin: 5%
OL list-style-type: lower-roman ; margin: 10%; background: pink;
- This is the first OL item. margin-left: 5%; green
- This is the second item, has no style features.
- This is the third item. green
UL list-style: url('smily.gif') disc ;
margin: 5%; background: skyblue;
- This is the first UL item. margin-left: 5%; green
- This is the second item, has no style features.
- This is the third item. green
<UL style="list-style-type: lower-roman; margin: 5%;
background: skyblue; ">UL list-style-type: lower-roman ;
margin: 5%; background: skyblue;
<LI style="margin-left: 5%; background: palegreen">
This is the first UL item. margin-left: 5%; green
<LI> This is the second item, has no style features.
<LI style="margin-left: 5%; background: palegreen">
This is the third item. green
</UL>
|