13.2. Changing the Sequence Value Type of Ordered Lists (list-style-type Property)
An ordered list is created with the <ol> tag. The <ol></ol> tag pair encloses a number of <li></li> tag pairs. Each <li></li> tag pair is a list item. For example, the following markup creates an ordered list with three items:
<ol>
<li>List
item 1</li>
<li>List item 2</li>
<li>List
item 3</li>
</ol>
Each item in an ordered list begins with a sequence value. The default sequence value type is decimal (i.e. 1, 2, 3, ...). To change the sequence value type, you can make use of the list-style-type WCSS property. Six sequence value types are available. They are:
decimal (1, 2, 3, ...)
upper-alpha (A, B, C, ...)
lower-alpha (a, b, c, ...)
upper-roman (I, II, III, ...)
lower-roman (i, ii, iii, ...)
none
Specifying a numbering type other than the default decimal is very useful when you want to build an outline by nesting different ordered lists. The following XHTML MP/WAP CSS example helps you understand how to build an outline with different levels having different sequence value types by using the list-style-type WCSS property:
<?xml
version="1.0"?>
<!DOCTYPE html PUBLIC
"-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>WAP
CSS Tutorial</title>
</head>
<body>
<p>Table
of Contents</p>
<ol style="list-style-type:
upper-roman">
<li>WAP CSS Tutorial
Ch1
<ol style="list-style-type:
upper-alpha">
<li>Section
A</li>
<li>Section
B</li>
</ol>
</li>
<li>WAP
CSS Tutorial Ch2
<ol style="list-style-type:
upper-alpha">
<li>Section
A</li>
<li>Section
B</li>
<li>Section
C</li>
</ol>
</li>
<li>WAP
CSS Tutorial Ch3
<ol style="list-style-type:
upper-alpha">
<li>Section
A</li>
</ol>
</li>
</ol>
</body>
</html>
This is the result of the above XHTML MP/WAP CSS example in a mobile phone browser:
|
|
13.3. Using Image Files as List Bullets (list-style-image Property)
WCSS allows mobile Internet application developers to specify their own image files as list bullets. The list-style-image WCSS property is used for such purpose.
The list-style-image WCSS property takes an absolute or relative URL of an image file. The URL should contain in the parentheses of url(). For example:
list-style-image: url(bullet.gif)
Further details about URL property values can be found in the "Common Types of Property Value: URL" section of this WAP CSS tutorial.
The following XHTML MP/WAP CSS example demonstrates how the list-style-image WCSS property can be used to set an image file as list bullets. The screen shots that follow show the result in some mobile phone browsers.
<?xml
version="1.0"?>
<!DOCTYPE html PUBLIC
"-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>WAP
CSS Tutorial</title>
</head>
<body>
<p>Table
of Contents</p>
<hr/>
<ul
style="list-style-image: url(blue_bullet.gif)">
<li>WAP
CSS Tutorial Chapter 1</li>
<li
style="list-style-image: url(red_bullet.gif)">WAP
CSS Tutorial Chapter 2</li>
<li>WAP CSS Tutorial
Chapter 3</li>
</ul>
</body>
</html>
|
|
Openwave mobile browsers include some icons that are stored locally on a mobile phone. They can be used as list bullets. Here is an example that makes use of the icon named "rightarrow1" as list bullets:
ul {list-style-image: localsrc("rightarrow1")}
However, we will not discuss this feature in detail, since it is Openwave-specific and it does not work on non-Openwave WAP browsers.
| Previous Page | Page 20 of 39 | Next Page |  |
- 1. WCSS (WAP CSS) Introduction
- 2. Wireless CSS and Wireless Profile CSS
- 3. Advantages of Using WAP CSS Style Sheets on Mobile Internet Sites
- 4. Disadvantages of Using WAP CSS Style Sheets on Mobile Internet Sites
- 5. Syntax Rules of WCSS
- 6. Comments in WCSS
- 7. How to Apply WCSS Styles to an XHTML MP Document
- 8. Different Types of Selectors
- 9. Div and Span Element of XHTML MP
- 10. Cascading Rules for Handling Multiple Groups of WCSS Styles Applied to the Same Element
- 11. Common Types of Property Value
- 12. WCSS Font and Text Properties
- 13. WCSS List Properties
- 14. WCSS Color Properties
- 15. WCSS Border Properties
- 16. WAP Specific Extensions to CSS
- 17. WCSS Access Key Extension
- 18. WCSS Input Extension
- 19. WCSS Marquee Extension
- 20. Matching WCSS Cascading Style Sheets to Different User Agents