13. WCSS List Properties
Two kinds of lists are very often used in mobile Internet sites. They are the unordered list (<ul>) and the ordered list (<ol>). WCSS contains several list properties that can help you control how a list should be presented on the screen of a mobile device.
13.1. Changing the Bullet Shape of Unordered Lists (list-style-type Property)
An unordered list is created with the <ul> tag. The <ul></ul> 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 unordered list with three items:
<ul>
<li>List
item 1</li>
<li>List item 2</li>
<li>List
item 3</li>
</ul>
Each item in an unordered list begins with a bullet. The default bullet is a disc. To change the bullet to other shape, you need the list-style-type WCSS property. Four bullet shapes are available. They are:
disc
circle
square
none
The list-style-type WCSS property can be applied to both the <ul> element and the <li> element. If it is applied to an <ul> element, all <li> elements enclosed in the <ul></ul> tags will be affected; if it is applied to a <li> element, only that list item will be affected.
The following XHTML MP/WAP CSS example illustrates how to use the list-style-type WCSS property to change the bullet shape of an unordered list. It can help you understand the effect of applying the list-style-type WCSS property to <ul> elements and <li> elements.
<?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>All
items in this unordered list begin with a circle bullet:</p>
<ul
style="list-style-type:
circle">
<li>List item
1</li>
<li>List item 2</li>
<li>List
item 3</li>
</ul>
<p>Different
items in this unordered list have a different bullet
shape:</p>
<ul>
<li
style="list-style-type:
disc">Disc bullet</li>
<li
style="list-style-type:
circle">Circle bullet</li>
<li
style="list-style-type:
square">Square
bullet</li>
</ul>
</body>
</html>
This is the result of the above XHTML MP/WAP CSS example in a mobile phone browser:
|
|
| Previous Page | Page 19 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