Common Types of
Property Value
Many
WCSS properties accept the same type of property values. For example,
you assign a length value to define the border width, margin and
padding, and a color value to define the foreground color, background
color and border color.
There
are three common types of property value in WAP CSS cascading style
sheets:
Length
Color
URL
Length
Length
values are used to define heights, widths, thicknesses, etc. A length
value can be of the following units:
%
-- Percentage
px
-- Pixel
em
-- Font size of the element. For example, if the current font size
is 12 points, 1 em = 12 points and 2.5 em = 30 points
ex
-- x-height of the element's font. x-height means the height of the
"x" character. Typically, it is equal to 1/2 of the font
size. For example, if the current font size is 12 points, 1 ex = 6
points and 2.5 ex = 15 points
cm
-- Centimeter
mm
-- Millimeter
in
-- Inch
pt
-- Point. 1 pt = 1/72 in
pc
-- Pica. 1 pc = 12 pt
Examples
of WCSS style statements:
Note
that there is no space between the value and the unit. For example,
you should use "margin-top: 1px" instead of "margin-top:
1 px".
Color
A
color is represented by a RGB (Red Green Blue) value in WAP CSS
cascading style sheets. For example, the white color is consisted of
100% red, 100% green and 100% blue, and the red color is consisted of
100% red, 0% green and 0% blue.
There
are four ways to specify a RGB value in WAP CSS. They are described
in the following table.
|
Different
ways to specify a RGB value in WCSS
|
Examples
of WCSS statement
|
|
rgb(r%,
g%, b%)
r,
g and b can be any value from 0 to 100.
|
p
{color: rgb(100%, 100%, 100%)} specifies the white color as the
text color of paragraphs.
h1
{color: rgb(100%, 0%, 0%)} specifies the red color as the text
color of level-1 headings.
|
|
rgb(r,
g, b)
r,
g and b can be any value from 0 to 255.
|
p
{color: rgb(255, 255, 255)} specifies the white color as the text
color of paragraphs.
h1
{color: rgb(255, 0, 0)} specifies the red color as the text color
of level-1 headings.
|
|
#rrggbb
r,
g and b can be any hexadecimal digit (i.e. 0-9, a-f). So, the
maximum value that can be assigned to each color source is ff (255
in decimal) and the minimum value is 00 (0 in decimal).
|
p
{color: #ffffff} specifies the white color as the text color of
paragraphs.
h1
{color: #ff0000} specifies the red color as the text color of
level-1 headings.
|
|
#rgb
This
is the short form of the #rrggbb format. r, g and b can be any
hexadecimal digit (0-9, a-f). The conversion from the #rgb format
to the #rrggbb format can be achieved by duplicating the digit of
each color source. For example, the red color is represented as
#f00 in the #rgb format, and #ff0000 in the #rrggbb format.
|
p
{color: #fff} specifies the white color as the text color of
paragraphs.
h1
{color: #f00} specifies the red color as the text color of level-1
headings.
|
The
following 16 colors are predefined in the WCSS standard. You can
specify their color names directly to properties. For example, the
WCSS style "p {color: blue}" specifies the blue color as
the text color of paragraphs.
|
Predefined
colors in WCSS
|
RGB
value
|
RGB
hexadecimal value
|
|
Aqua
|
rgb(0,
255, 255)
|
#00ffff
|
|
Black
|
rgb(0,
0, 0)
|
#000000
|
|
Blue
|
rgb(0,
0, 255)
|
#0000ff
|
|
Fuchsia
|
rgb(255,
0, 255)
|
#ff00ff
|
|
Gray
|
rgb(128,
128, 128)
|
#808080
|
|
Green
|
rgb(0,
128, 0)
|
#008000
|
|
Lime
|
rgb(0,
255, 0)
|
#00ff00
|
|
Maroon
|
rgb(128,
0, 0)
|
#800000
|
|
Navy
|
rgb(0,
0, 128)
|
#000080
|
|
Olive
|
rgb(128,
128, 0)
|
#808000
|
|
Purple
|
rgb(128,
0, 128)
|
#800080
|
|
Red
|
rgb(255,
0, 0)
|
#ff0000
|
|
Silver
|
rgb(192,
192, 192)
|
#c0c0c0
|
|
Teal
|
rgb(0,
128, 128)
|
#008080
|
|
White
|
rgb(255,
255, 255)
|
#ffffff
|
|
Yellow
|
rgb(255,
255, 0)
|
#ffff00
|
URL
URL
values are used to specify the location of some files in WCSS
cascading style sheets. A URL property value is placed inside the
parentheses of url().
Here
are some examples:
Some
people like to enclose URLs within double quotes or single quotes.
Such syntax is also valid in WCSS.
If
a relative URL is included in an external style sheet, the URL will
be referenced relative to the location of the external style sheet
instead of the XHTML MP document.
|
Feedback Form (ExpandCollapse)
|
|
|
