14. WCSS
Color Properties
14.1. Setting Foreground
and Background Colors (color and background-color Properties)
Two
WCSS color properties, color
and background-color,
can be used to define the colors of an XHTML MP element rendered on
the screen.
The
color WCSS property is
used to specify the foreground color, while the background-color
WCSS property is used to specify the background color. Valid values
for these two properties are color keywords (for example, black,
white, blue, etc), RGB values (for example, rgb(255, 0, 0),
rgb(100%, 0%, 0%), etc), or hexadecimal RGB values (for example,
#ff0000, #fff, etc). If you want to obtain further information about
color property values, you can go back to the "Common
Types of Property Value: Color" section of this WAP CSS
tutorial.
Here
are some example WAP CSS style rules that demonstrate the usage of
color and
background-color:
color:
red
color:
rgb(255, 0, 0)
background-color:
rgb(100%, 0%, 0%)
background-color:
#ff0000
background-color:
#f00
All
the above property values (i.e. red, rgb(255, 0, 0), rgb(100%, 0%,
0%), #ff0000, #f00) represent the same color and they can be used
interchangeably.
The
following XHTML MP/WAP CSS example demonstrates how to set the
foreground color and background color of table cells. This example
can help you understand better how the color
and background-color
WAP CSS properties can be used.
(colorPropertiesEg1.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>Setting
Table Color</title> </head>
<body> <table
style="color: white; background-color:
purple"> <tr> <td>Cell
A</td> <td>Cell B</td> <td>Cell
C</td> </tr>
<tr style="color:
yellow; background-color: #0000ff"> <td>Cell
D</td> <td>Cell E</td> <td
rowspan="2" style="color: rgb(255, 0, 0);
background-color: rgb(100%, 100%, 0%)">Cell
F</td> </tr>
<tr> <td
colspan="2">Cell
G</td> </tr> </table> </body> </html>
What
we do in the above XHTML MP/WCSS example is like this:
We
specify white as the foreground (text) color and purple as the
background color of the whole table.
We
override the color settings of the second table row. We specify
yellow as the foreground color and blue (#0000ff) as the background
color of the second table row.
We
override the color settings of the third cell of the second table
row. We specify red (rgb(255, 0, 0)) as the foreground color and
yellow (rgb(100%, 100%, 0%)) as the background color of this table
cell.
The
result of the example in a mobile phone browser is shown below:
 Nokia
Mobile Browser 4.0
|
Feedback Form (ExpandCollapse)
|
|