Cascading Style Sheet Units


Several cascading style sheet attributes use standard units to define measurements, styles, colors, and other identifiers. Throughout this appendix, unit measurements have been enclosed within angle brackets (< >). The following section lists the values associated with each unit type.

<absolute-size>

Absolute sizes refer to font sizes computed and kept by the user's browser. The following values are from smallest to largest:

xx-small x-small small medium large x-large xx-large


<angle>

Angle values are used with aural style sheets. Their format is an optional sign character (+ or -) immediately followed by a number. The following are angle units:

deg

Degrees

grad

Gradients

rad

Radians


<border-style>

These properties specify the type of line that surrounds a box's border. The borderstyle value type can take one of the following:

none

Forces border width to zero

dotted

A series of dots

dashed

A series of short line segments

solid

A single line segment

double

Two solid lines, with the sum of the two lines and the space between them equaling the value of border-width

groove

Renders a border that looks as though it were carved into the canvas

ridge

Renders a border that looks as though it were coming out of the canvas

inset

Renders a border that looks like the entire box is embedded in the canvas

outset

Renders a border that looks like the entire box is coming out of the canvas


<border-width>

The border-width property sets the width of the border area. It can take one of the following values:

thin

A thin border

medium

A medium border

thick

A thick border

<length>

An explicit value (cannot be negative)


<color>

Colors can be defined by keyword (as defined in HTML 4.01) or by a numerical RGB specification. Following are the accepted formats:

Keyword:

aqua | black | blue | fuchsia | gray | green | lime | maroon | navy | olive | purple | red | silver | teal | white | yellow

#rgb

Example for blue: { color: #00f }

#rrggbb

Example for blue: { color: #0000ff }

rgb (integer range)

Example for blue: { color: rgb(0,0,255) }

rgb (float range)

Example for blue: { color: rgb(0%, 0%, 100%) }


<family-name>

Fonts can be specified by the name of a font family of choice. Examples of this are Arial, Times New Roman, Helvetica, Baskerville, and so on. Font family names that contain white space (tabs, line feeds, carriage returns, form feeds, and so on) should be enclosed by quotation marks.

<frequency>

Frequency identifiers are used with aural style sheets. The format is a number immediately followed by one of the following identifiers:

Hz

Hertz

kHz

Kilohertz


<generic-family>

Authors are encouraged to use generic font family names as a last alternative, in case a user does not have a specified font on his or her system. Generic font family names are keywords and must not be enclosed in quotation marks. The following are examples of each:

serif

Times New Roman, MS Georgia, Garamond

sans-serif

Arial, Helvetica, Futura, Gill Sans

cursive

Zapf-Chancery, Caflisch Script

fantasy

Critter, Cottonwood

monospace

Courier, MS Courier New, Prestige


<generic-voice>

Generic voices are the aural equivalent of generic font family names (refer to the preceding section) and are used in conjunction with <voice-family>. The following are possible generic voice values:

male female child


<integer>

An integer consists of one or more digits (0 through 9). It may be preceded by a - or a + to indicate the sign. See also <number>.

<length>

Lengths are specified by an optional sign character (+ or -) immediately followed by a number with or without a decimal point, immediately followed by one of the following unit identifiers:

Relative values

em

The font size of the relevant font

ex

The x-height of the relevant font

px

Pixels, relative to the viewing device

Absolute values

pt

Points (1/72nd of an inch)

in

Inches

cm

Centimeters

mm

Millimeters

pc

Picas (12 points, or 1/6 of an inch)


<number>

A number can consist of an integer, or it can be zero or more digits, followed by a dot (.), followed by one or more digits. A number may be preceded by a - or a + to indicate its sign. See also <integer>.

<percentage>

Percentage values are always relative to another value, such as a length. The format is an optional sign character (+ or -), immediately followed by a number, immediately followed by %.

<relative-size>

Relative sizes are interpreted relative to the font size of the parent element. The following are possible values:

larger smaller


<shape>

In CSS2, the only valid shape value is rect(<top> <right> <bottom> <left>, where the four descriptors specify offsets from the respective sides of the box.

<specific-voice>

Specific voice values are the aural style sheet equivalent of font-family. Values are specific names of a voice (for example: teacher, comedian, preacher, and so on).

<time>

Time units are used with aural style sheets. Their format is a number immediately followed by one of the following identifiers:

ms

milliseconds

s

seconds


<uri>

URI (Uniform Resource Indicator) values are used to designate addresses of page elements such as images. The format of a URI is url (followed by optional white space, followed by an optional single quote or double quotation mark, followed by the URI itself, followed by an optional single or double quote, followed by optional white space). To clarify, here is an example of the proper syntax:

body { background: url("http://www.foo.com/images/background.gif") }=





Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day
Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day (5th Edition)
ISBN: 0672328860
EAN: 2147483647
Year: 2007
Pages: 305

Similar book on Amazon

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net