CSS: The Definitive Guide, 3rd Edition (69 page)

Read CSS: The Definitive Guide, 3rd Edition Online

Authors: Eric A. Meyer

Tags: #COMPUTERS / Web / Page Design

BOOK: CSS: The Definitive Guide, 3rd Edition
2.14Mb size Format: txt, pdf, ePub
clear

This defines the sides of an element on which no
floating elements may appear. In CSS1 and CSS2, this is accomplished by automatically
increasing the top margin of the cleared element. In CSS2.1, clearance space is added
above the element's top margin, but the margin itself is not altered. In either case,
the end result is that the element's top outer border edge is just below the bottom
outer margin edge of a floated element on the declared side.

Values:

left
|
right
|
both
|
none
|
inherit

Initial value:

none

Applies to:

Block-level elements

Inherited:

No

Computed value:

As specified

clip

This is used to define a clipping
rectangle inside of
which the content of an absolutely positioned element is visible. Content outside
this clipping area is treated according to the value of
overflow
. The clipping area can be smaller or larger than the content
area of the element.

Values:

rect(
top
,
right
,
bottom
,
left
)
|
auto
|
inherit

Initial value:

auto

Applies to:

Absolutely positioned elements (in CSS2,
clip
applied to block-level and replaced elements)

Inherited:

No

Computed value:

For a rectangle, a set of four computed lengths representing the edges of
the clipping rectangle; otherwise, as specified

color

This property sets the foreground color of an
element, which in HTML rendering means the text of an element; raster images are not
affected by
color
. This is also the color applied
to any borders of the element, unless overridden by
border-color
or one of the other border color properties (
border-top-color
, etc.).

Values:

|
inherit

Initial value:

User agent-specific

Applies to:

All elements

Inherited:

Yes

Computed value:

As specified

content

This is the property used to define the generated content placed before or after
an element. By default, this is likely to be inline content, but the type of box the
content creates can be controlled using the property
display
.

Values:

normal
| [ | |
|
attr(

)
|
open-quote
|
close-quote
|
no-open-quote
|
no-close-quote
]+ |
inherit

Initial value:

normal

Applies to:

:before
and
:after
pseudo-elements

Inherited:

No

Computed value:

For values, an absolute URI; for attribute references, the
resulting string; otherwise, as specified

counter-increment

With this property, counters can be incremented (or decremented) by any value,
positive or negative. If no is supplied, it defaults to
1
.

Values:

[ ? ]+ |
none
|
inherit

Initial value:

User agent-dependent

Applies to:

All elements

Inherited:

No

Computed value:

As specified

counter-reset

With this property,
counters can be set or reset to any value, positive or negative. If no
is supplied, it defaults to
0
.

Values:

[ ? ]+ |
none
|
inherit

Initial value:

User agent-dependent

Applies to:

All elements

Inherited:

No

Computed value:

As specified

cursor

This defines the cursor shape to be used when a mouse pointer is placed within the
boundary of an element (although CSS2.1 does not define which edge creates this
boundary).

Values:

[[,]* [
auto
|
default
|
pointer
|
crosshair
|
move
|
e-resize
|
ne-resize
|
nw-resize
|
n-resize
|
se-resize
|
sw-resize
|
s-resize
|
w-resize
|
text
|
wait
|
help
|
progress
]] |
inherit

Initial value:

auto

Applies to:

All elements

Inherited:

Yes

Computed value:

For values, an absolute URI; otherwise, as specified

direction

This property specifies the base writing direction of blocks and the direction of
embeddings and overrides for the Unicode bidirectional algorithm. User agents that do
not support bidirectional text are permitted to ignore this property.

Values:

ltr
|
rtl
|
inherit

Initial value:

ltr

Applies to:

All elements

Inherited:

Yes

Computed value:

As specified

display

This is used to define the kind of display box an element generates during layout.
Gratuitous use of
display
with a document type
such as HTML can be dangerous, as it upsets the display hierarchy already defined in
HTML. In the case of XML, which has no such built-in hierarchy,
display
is indispensable.

Values:

none
|
inline
|
block
|
inline-block
|
list-item
|
run-in
|
table
|
inline-table
|
table-row-group
|
table-header-group
|
table-footer-group
|
table-row
|
table-column-group
|
table-column
|
table-cell
|
table-caption
|
inherit

Initial value:

inline

Applies to:

All elements

Inherited:

No

Computed value:

Varies for floated, positioned, and root elements (see CSS2.1, section
9.7); otherwise, as specified

Note:

The values
compact
and
marker
appeared in CSS2 but were dropped from
CSS2.1 due to a lack of widespread support

float

This defines the direction in which an element is
floated. It has traditionally been applied to images to let text flow around them,
but in CSS, any element may be floated. A floated element will generate a block-level
box no matter what kind of element it may be. Floated nonreplaced elements should be
given an explicit width; otherwise, they may tend to become as narrow as possible.

Values:

left
|
right
|
none
|
inherit

Initial value:

none

Applies to:

All elements

Inherited:

No

Computed value:

As specified

font

This is a shorthand property used to set two or more aspects of an element's font
all at once. It can also be used to set the element's font to match an aspect of the
user's computing environment using keywords such as
icon
. Note that if these keywords are not used, the minimum font value
must include the font size and family.

Values:

[[ || || ]?
[ / ]? ] |
caption
|
icon
|
menu
|
message-box
|
small-caption
|
status-bar
|
inherit

Initial value:

Refer to individual properties

Applies to:

All elements

Inherited:

Yes

Percentages:

Calculated with respect to the parent element for and
with respect to the element's for

Computed value:

See individual properties (
font-style
,
etc.)

font-family

This defines a
font family to be used in the display of an element's text. Note that use of a
specific font family (e.g., Geneva) is wholly dependent on that family being
available on a user's machine; no font downloading is implied by this property.
Therefore, the use of generic family names as a fallback is strongly encouraged.

Values:

[[ | ],]* [ |
] |
inherit

Initial value:

User agent-specific

Applies to:

All elements

Inherited:

Yes

Computed value:

As specified

font-size

This sets the size of the font for an element. Note that it actually sets the
height of the character boxes in the font; the actual character glyphs may be taller
or shorter than these boxes (usually shorter). Each keyword must be larger than the
next smallest keyword and smaller than the next biggest keyword. Negative length and
percentage values are not permitted.

Values:

xx-small
|
x-small
|
small
|
medium
|
large
|
x-large
|
xx-large
|
smaller
|
larger
|
| |
inherit

Initial value:

medium

Applies to:

All elements

Inherited:

Yes

Percentages:

Calculated with respect to the parent element's font size

Computed value:

An absolute length

Other books

The Invisible Man from Salem by Christoffer Carlsson
The Secret Generations by John Gardner
1 Dog Collar Crime by Adrienne Giordano
Satisfaction Guaranteed by Charlene Teglia
God of the Rodeo by Daniel Bergner
Rescue! by Bindi Irwin
Mind the Gap (In Too Deep) by McMillin, Casey