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:
(listPropertiesEg2.xhtml)
<?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.
(listPropertiesEg3.xhtml)
<?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>
 Nokia
Mobile Browser 4.0
|
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.
Feedback Form (ExpandCollapse)
|
|