|
|
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 |
Html Tutorial
Introducing The Web And Html
What Goes Into A Web Page?
Starting Your Web Page
Lines, Line Breaks, And Paragraphs
Lists
Images
Links
Text
Special Characters
Tables
Page Layout With Tables
Frames
Forms
Multimedia
Scripts
Introducing Cascading Style Sheets
Creating Style Rules
Fonts
Text Formatting
Padding, Margins, And Borders
Colors And Backgrounds
Tables Table Styles
Element Positioning
Defining Pages For Printing
Javascript
Dynamic Html
Dynamic Html With Css
Introduction To Server-side Scripting
Introduction To Database-driven Web Publishing
Creating A Weblog
Introduction To Xml
Xml Processing And Implementations
Testing And Validating Your Documents
Webdevelopment Software
Choosing A Service Provider
Uploading Your Site With Ftp
Publicizing Your Site And Building Your Audience
Maintaining Your Site
The Web Development Process
Developing And Structuring Content
Designing For Usability And Accessibility
Designing For An International Audience
Security
Privacy
All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd
Wisdomjobs.com is one of the best job search sites in India.