Read CSS: The Definitive Guide, 3rd Edition Online
Authors: Eric A. Meyer
Tags: #COMPUTERS / Web / Page Design
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.
left
|right
|both
|none
|inherit
none
Block-level elements
No
As specified
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 ofoverflow
. The clipping area can be smaller or larger than the content
area of the element.
rect(
top
,right
,bottom
,left
)
|auto
|inherit
auto
Absolutely positioned elements (in CSS2,clip
applied to block-level and replaced elements)
No
For a rectangle, a set of four computed lengths representing the edges of
the clipping rectangle; otherwise, as specified
This property sets the foreground color of an
element, which in HTML rendering means the text of an element; raster images are not
affected bycolor
. This is also the color applied
to any borders of the element, unless overridden byborder-color
or one of the other border color properties (border-top-color
, etc.).
inherit
User agent-specific
All elements
Yes
As specified
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 propertydisplay
.
normal
| [ attr(
)
|open-quote
|close-quote
|no-open-quote
|no-close-quote
]+ |inherit
normal
:before
and:after
pseudo-elements
No
For
resulting string; otherwise, as specified
With this property, counters can be incremented (or decremented) by any value,
positive or negative. If no 1
.
[none
|inherit
User agent-dependent
All elements
No
As specified
With this property,
counters can be set or reset to any value, positive or negative. If no0
.
[none
|inherit
User agent-dependent
All elements
No
As specified
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).
[[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
auto
All elements
Yes
For
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.
ltr
|rtl
|inherit
ltr
All elements
Yes
As specified
This is used to define the kind of display box an element generates during layout.
Gratuitous use ofdisplay
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.
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
inline
All elements
No
Varies for floated, positioned, and root elements (see CSS2.1, section
9.7); otherwise, as specified
The valuescompact
andmarker
appeared in CSS2 but were dropped from
CSS2.1 due to a lack of widespread support
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.
left
|right
|none
|inherit
none
All elements
No
As specified
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 asicon
. Note that if these keywords are not used, the minimum font value
must include the font size and family.
[[ caption
|icon
|menu
|message-box
|small-caption
|status-bar
|inherit
Refer to individual properties
All elements
Yes
Calculated with respect to the parent element for
with respect to the element's
See individual properties (font-style
,
etc.)
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.
[[inherit
User agent-specific
All elements
Yes
As specified
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.
xx-small
|x-small
|small
|medium
|large
|x-large
|xx-large
|smaller
|larger
|inherit
medium
All elements
Yes
Calculated with respect to the parent element's font size
An absolute length