|
|
|
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>
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:
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"?>
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"?>
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.
|
