|
|
Ordered lists have elements that are preceded by numbers or letters and are meant to provide a sequence of ordered steps for an activity. For example, this book uses numbered lists when stepping the reader through a process. Such a list might resemble the following:
Ordered lists use the ordered list tag (<ol>) to delimit the entire list and the list item tag (<li>) to delimit each individual list item.
In the preceding example, the list has three elements numbered with Arabicnumbers. This is the default for ordered lists in HTML, as shown in the followingcode, whose output is shown . The default ordered list uses Arabic numbers for its items
The default ordered list uses Arabic numbers for its items
To specify a different type of identifier for each item, you would use the list-style attribute and define a style for the list, as shown in the following code:
This code results in the list items being prefaced with uppercase letters.
The upper-alpha value of the list-style attribute causes the ordered list elements to be prefaced with uppercase letters.
Note Using letters or Roman numerals only makes sense for organizational lists (outlines, and so on), not for lists that outline a series of steps—especially if the steps must be followed in order.
The list-style-type property supports the following values in CSS2:
Note Some of the list-style-types are font-dependent—that is, they are only supported on certain fonts. If you are using a type such as hiragana with a Latin-based font, you will not get the results you intend. The list-style-types are self -explanatory.
The default type is typically decimal, but can be defined by the individual client browser. Keep in mind that your document’s font and language options must support the language character sets used by the list-type. Ordered lists also support the list-style-position property. This property controls where the number or character preceding each item appears. The property has two possible values:
The default is outside, and the difference between the two options is shown in
The list-style-position property controls where the list item numbers/characters appear—outside or inside the list item margins.
Changing the Start Value of Ordered Lists
Previous versions of HTML allowed the use of the start attribute in the <ol> tag to control what number or letter the list began with. For example, the following code starts a list with the decimal number 12: <ol start=“12” style=“list-style: decimal;”> However, the start attribute of the <ol> tag was deprecated, and a replacement CSS style has yet to be defined. Although you can use the start attribute, your document will no longer validate against strict HTML.
If you find yourself needing consistent, yet flexible numbering, consider using the new CSS2 automatic counters and numbering feature. This feature uses the content property along with the new counter-increment and counter-reset properties to provide a flexible yet powerful automatic counter function.
The following style code will define a counter and cause any <ol> list to begin with an item number of 12:
This code introduces quite a few CSS2 concepts—pseudo-elements, counters, and related properties and methods. However, it isn’t as complex as it might first appear:
The ol definition causes the counter (list) to be reset to 11 every time the <ol> tag is used—that is, at the beginning of every ordered list.
Using the preceding styles along with the following list code in a document results in a list with items numbered 12-15:
Counters are a new, powerful feature of CSS2. Unfortunately, at the time of this writing, only the Opera browser fully supports counters. However, the other browsers are sure to follow suit. You’ll find more information on counters and the content property
list-style: <list-style-type> <list-style-image>
<list-style-position>
You can use this one property to specify one, two, or all three list-style properties in one declaration. For example, to define an ordered list with lowercase letters and inside positioning, you could use the following tag:
|
|
HTML Related Tutorials |
|
---|---|
XML Tutorial | HTML 4 Tutorial |
HTML 5 Tutorial | Java Tutorial |
CSS Tutorial | XHTML Tutorial |
All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd
Wisdomjobs.com is one of the best job search sites in India.