CSS: The Definitive Guide, 3rd Edition (67 page)
Read CSS: The Definitive Guide, 3rd Edition Online
Authors: Eric A. Meyer
Tags: #COMPUTERS / Web / Page Design
Although the first stage of the Web's development was primarily visual in nature, the
need to provide web content in other media led to the introduction of medium-specific
styling in CSS. The ability to take the same document and customize its presentation in
a manner best suited to different output media is deeply powerful. Although its most
common application is to create "printer-friendly" styles for documents, we've also seen
how projection styles can be used to create slideshows with Opera.
While aural styles would be very useful for blind users, there are only two programs
as of this writing that support even a fragment of this portion of CSS, and the media
typeauraldefined in CSS2.x will not be carried
forward to future versions of CSS. Instead, the media typespeechhas been set aside for future work in auditory rendering of
documents.
This is a shorthand method to express all of the individual background properties
within a single declaration. Use of this property is generally encouraged over the
individual properties, as it has a slightly better support profile in older browsers
and doesn't take as long to type.
- Values:
[
|| || || || ] | inherit- Initial value:
Refer to individual properties
- Applies to:
All elements
- Inherited:
No
- Percentages:
Values are allowed for
- Computed value:
See individual properties
This property defines whether the background image scrolls along with the element
when the document is scrolled. This can be used to create "aligned" backgrounds; see
Chapter 9
for more details.
- Values:
scroll|fixed|inherit- Initial value:
scroll- Applies to:
All elements
- Inherited:
No
- Computed value:
As specified
This
sets a solid color for the background of the element. This color fills the content,
padding, and border areas of the element, extending to the outer edge of the
element's border. Borders that have transparent sections, such as dashed borders,
will show the background color through the transparent sections.
- Values:
| transparent|inherit- Initial value:
transparent- Applies to:
All elements
- Inherited:
No
- Computed value:
As specified
This places an image in the background of the element. Depending on the value ofbackground-repeat, the image may tile
infinitely, along one axis, or not at all. The initial background image (the origin
image) is placed according to the value ofbackground-position.
- Values:
| none|inherit- Initial value:
none- Applies to:
All elements
- Inherited:
No
- Computed value:
Absolute URI
This property sets the position of the background's origin image (as defined bybackground-image); this is the point from which
any background repetition will occur.
- Values:
[[
| | left|center|right] [] | | top|center|bottom]?] |
[[left|center|right]||
[top|center|bottom]] |inherit- Initial value:
0% 0%- Applies to:
Block-level and replaced elements
- Inherited:
No
- Percentages:
Refer to the corresponding point on both the element and the origin
image- Computed value:
The absolute length offsets, if
is specified; otherwise,
percentage values
This defines the
tiling pattern for the background image. Note that the axis-related repeat values
actually cause repetition in
both
directions along the relevant
axis. The repetition begins from the origin image, which is defined as the value ofbackground-imageand is placed according to the
value ofbackground-position.
- Values:
repeat|repeat-x|repeat-y|no-repeat|inherit- Initial value:
repeat- Applies to:
All elements
- Inherited:
No
- Computed value:
As specified
This is a shorthand property that defines the width, color, and style of an
element's border. Note that while none of the values are actually required, omitting
a border style will result in no border being applied because the default border
style isnone.
- Values:
[
|| || ]
|inherit- Initial value:
Refer to individual properties
- Applies to:
All elements
- Inherited:
No
- Computed value:
As specified
This shorthand property defines the width, color, and style of the bottom border
of an element. As withborder, omission of a
border style will result in no border appearing.
- Values:
[
|| || ]
|inherit- Initial value:
Not defined for shorthand properties
- Applies to:
All elements
- Inherited:
No
- Computed value:
See individual properties (
border-width, etc.)
This property sets the color for the visible portions of the bottom border of an
element. Only a solid color can be defined, and the border's style must be a value
other thannoneorhiddenfor any border to appear.
- Values:
| transparent|inherit- Initial value:
The value of
colorfor the
element- Applies to:
All elements
- Inherited:
No
- Computed value:
If no value is specified, use the computed value of the property
colorfor the same element; otherwise, as
specified
This defines the
style for the bottom border of an element. The value must be something other thannonefor any border to appear. In CSS1, HTML
user agents were only required to supportsolidandnone.
- Values:
none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|inherit- Initial value:
none- Applies to:
All elements
- Inherited:
No
- Computed value:
As specified
This sets the width for the bottom border of an element, which will take effect
only if the border's style is something other thannone. If the border style isnone, the
border width is effectively reset to0. Negative
length values are not permitted.
- Values:
thin|medium|thick|| inherit- Initial value:
medium- Applies to:
All elements
- Inherited:
No
- Computed value:
Absolute length;
0if the style
of
the border isnoneorhidden
This shorthand property sets the color for the visible portions of the overall
border of an element or sets a different color for each of the four sides. Remember
that a border's style must be something other thannoneorhiddenfor any border to
appear.
- Values:
[
| transparent]{1,4} |inherit- Initial value:
Not defined for shorthand properties
- Applies to:
All elements
- Inherited:
No
- Computed value:
See individual properties (
border-top-color, etc.)
This shorthand property
defines the width, color, and style of
the left border of an element. As withborder, omission of a border style will result in no
border appearing.
- Values:
[
|| || ]
|inherit- Initial value:
Not defined for shorthand properties
- Applies to:
All elements
- Inherited:
No
- Computed value:
See individual properties (
border-width, etc.)
This property sets the color for the visible portions of the left border of an
element. Only a solid color can be defined, and the border's style must be something
other thannoneorhiddenfor any border to appear.
- Values:
| transparent|inherit- Initial value:
The value of
colorfor the
element- Applies to:
All elements
- Inherited:
No
- Computed value:
If no value is specified, use the computed value of the property
colorfor the same element; otherwise, as
specified