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

Read CSS: The Definitive Guide, 3rd Edition Online

Authors: Eric A. Meyer

Tags: #COMPUTERS / Web / Page Design

font-style

This sets the font to use an italic, oblique, or normal
font face. Italic text is generally defined as a separate face within the font
family. It is theoretically possible for a user agent to compute a slanted font face
from the normal face.

Values:

italic
|
oblique
|
normal
|
inherit

Initial value:

normal

Applies to:

All elements

Inherited:

Yes

Computed value:

As specified

font-variant

This property is basically used to define small-caps text. It is theoretically
possible for a user agent to compute a small-caps font face from the normal face.

Values:

small-caps
|
normal
|
inherit

Initial value:

normal

Applies to:

All elements

Inherited:

Yes

Computed value:

As specified

font-weight

This property sets the font weight used in rendering an element's text. The
numeric value
400
is equivalent to the keyword
normal
, and
700
is equivalent to
bold
. Each numeric
value must be at least as light as the next lowest number and at least as heavy as
the next highest number.

Values:

normal
|
bold
|
bolder
|
lighter
|
100
|
200
|
300
|
400
|
500
|
600
|
700
|
800
|
900
|
inherit

Initial value:

normal

Applies to:

All elements

Inherited:

Yes

Computed value:

One of the numeric values (
100
, etc.),
or one of the numeric values plus one of the relative values (
bolder
or
lighter
)

height

This defines the height of
an element's content
area, outside of which padding, borders, and margins are added. This property is
ignored for inline nonreplaced elements. Negative length and percentage values are
not permitted.

Values:

| |
auto
|
inherit

Initial value:

auto

Applies to:

Block-level and replaced elements

Inherited:

No

Percentages:

Calculated with respect to the height of the containing block

Computed value:

For
auto
and percentage values, as
specified; otherwise, an absolute length, unless the property does not apply
to the element (then
auto
)

left

This property defines the offset between the left outer margin edge of a
positioned element and the left edge of its containing block.

Values:

| |
auto
|
inherit

Initial value:

auto

Applies to:

Positioned elements (that is, elements for which the value of
position
is something other than
static
)

Inherited:

No

Percentages:

Refer to the width of the containing block

Computed value:

For relatively positioned elements, see Note; for
static
elements,
auto
; for length values, the corresponding absolute length; for
percentage values, the specified value; otherwise,
auto

Note:

For relatively positioned elements, the computed value of
left
always equals
right

letter-spacing

This defines the amount of whitespace to be inserted between the character boxes
of text. Since character glyphs are typically narrower than their character boxes,
length values create a modifier to the usual spacing between letters. Thus,
normal
is synonymous with
0
. Negative length values are permitted and will cause letters to bunch
closer together.

Values:

|
normal
|
inherit

Initial value:

normal

Applies to:

All elements

Inherited:

Yes

Computed value:

For length values, the absolute length; otherwise,
normal

line-height

This property influences
the layout of line boxes. When applied to a block-level element, it defines the
minimum distance between baselines within that element, but not the maximum. The
difference between the computed values of
line-height
and
font-size
(called
"leading" in CSS) is split in half and added to the top and bottom of each piece of
content in a line of text. The shortest box that can enclose all of those pieces of
content is the line box. A raw number value assigns a scaling factor, which is
inherited instead of a computed value. Negative values are not permitted.

Values:

| | |
normal
|
inherit

Initial value:

normal

Applies to:

All elements (but see text regarding replaced and block-level
elements)

Inherited:

Yes

Percentages:

Relative to the font size of the element

Computed value:

For length and percentage values, the absolute value; otherwise, as
specified

list-style

This is a shorthand property that condenses all the other list-style properties.
Because it applies to any element that has a
display
of
list-item
, it will apply
only to
li
elements in ordinary HTML and XHTML,
although it can be applied to any element and inherited by
list-item
elements.

Values:

[ || ||
] |
inherit

Initial value:

Refer to individual properties

Applies to:

Elements whose
display
value is
list-item

Inherited:

Yes

Computed value:

See individual properties

list-style-image

This specifies an image to be used as the marker on an ordered or unordered list
item. The placement of the image with respect to the content of the list item can be
broadly controlled using
list-style-position
.

Values:

|
none
|
inherit

Initial value:

none

Applies to:

Elements whose
display
value is
list-item

Inherited:

Yes

Computed value:

For values, the absolute URI; otherwise,
none

list-style-position

This property is
used to declare the position of the list marker with respect to the content of the
list item. Outside markers are placed some distance from the border edge of the list
item, but the distance is not defined in CSS. Inside markers are treated as though
they were an inline element inserted at the beginning of the list item's content.

Values:

inside
|
outside
|
inherit

Initial value:

outside

Applies to:

Elements whose
display
value is
list-item

Inherited:

Yes

Computed value:

As specified

list-style-type

This is used to declare the type of marker system to be used in the presentation
of a list.

CSS2.1 values:

disc
|
circle
|
square
|
decimal
|
decimal-leading-zero
|
lower-roman
|
upper-roman
|
lower-greek
|
lower-latin
|
upper-latin
|
armenian
|
georgian
|
none
|
inherit

CSS2 values:

disc
|
circle
|
square
|
decimal
|
decimal-leading-zero
|
upper-alpha
|
lower-alpha
|
upper-roman
|
lower-roman
|
lower-greek | hebrew |
armenian | georgian | cjk-ideographic | hiragana | katakana |
hiragana-iroha | none
|
inherit

Initial value:

disc

Applies to:

Elements whose
display
value is
list-item

Inherited:

Yes

Computed value:

As specified

margin

This shorthand property sets the width of the
overall margin for an element or sets the widths of each individual side margin.
Vertically adjacent margins of
block-level elements are collapsed, whereas inline
elements effectively do not take top and bottom margins. The left and right margins
of inline elements do not collapse, nor do margins on floated elements. Negative
margin values are permitted, but use them with caution.

Values:

[ | |
auto
]{1,4} |
inherit

Initial value:

Not defined

Applies to:

All elements

Inherited:

No

Percentages:

Refer to the width of the containing block

Computed value:

See individual properties

Other books

El cero y el infinito by Arthur Koestler
Black Sheep by Tabatha Vargo
Mr Knightley’s Diary by Amanda Grange
But Enough About Me by Jancee Dunn
Locked In by Z. Fraillon
One Shot Too Many by Nikki Winter