Book HomeCascading Style Sheets: The Definitive GuideSearch this book Thursday 02nd of July 2015 05:34:24 AM

10.9. Summary

CSS2 obviously covers a lot of ground, and exploring it in detail would probably have added at least four more chapters to this book, not to mention dramatically bulking up some of the chapters that already exist. However, since so little of CSS2 has actually been implemented at this writing, we felt it was better to provide an overview that was light on details. After all, the specification may change as implementations reveal flaws, and we'd rather stick to describing things that are fairly reliable.

For quick reference purposes, Table 10-1 gives a quick summary of everything new in CSS2.

Table 10-1. New Properties in CSS2

New Properties in CSS2

text-shadow
font-size-
adjust
font-stretch
unicode-bidi
cursor
outline
outline-color
outline-style
outline-width
content
quotes
counter-reset
counter-increment
marker-offset
border-top-color
border-right-color
border-bottom-color
border-left-color
border-top-style
border-right-style
border-bottom-style
border-left-style
position
direction
top
right
bottom
left
z-index
min-width
max-width
min-height
max-height
overflow
clip
visibility
page-break-before
page-break-after
page-break-inside
orphans
widows
size
marks
border-collapse
border-spacing
table-layout
border-spacing
empty-cells
caption-side
speak-header-cell
volume
speak
pause-before
pause-after
pause
cue-before
cue-after
cue
play-during
azimuth
elevation
speech-rate
voice-family
pitch
pitch-range
stress
richness
speak-punctuation
speak-rate
speak-numeral
speak-time

New Pseudo-Classes and Pseudo-Elements in CSS2

:hover
:left
:right
:first
:before
:after

New @-rules in CSS2

@media

top: 50%; bottom: 0; left: 50%; right: 0;

In this example, the outer left edge of the positioned element isplaced halfway across the containing block. This is its offset fromthe left edge of the containing block. The outer right edge of thepositioned element, however, is not offset from the right edge of thecontaining block, so the two are coincident. Similar reasoning holdstrue for the top and bottom of the positioned element: the outer topedge is placed halfway down the containing block, but the outerbottom edge is not moved up from the bottom. This leads to

@font-face
@page

Table 10-2. New Values in CSS2

All Properties

inherit

The display Property

run-in
compact
marker
table
inline-table
table-row-group
table-column-group
table-header-group
table-footer-group
table-row
table-cell
table-caption 

The font Property

caption
icon
menu
message-box
small-caption
status-bar

The list-style-type Property

decimal-leading-zero
hebrew
georgian
armenian
cjk-ideographic
hiragana
katakana
hiragana-iroha
katakana-iroha
lower-greek

The color values

active-border
active-caption
app-workspace
background
button-face
button-highlight
button-text
caption-text
gray-text
highlight
highlight-text
inactive-border
inactive-caption
info-background
info-text
menu
menu-text
scrollbar
three-d-dark-shadow
three-d-face
three-d-highlight
three-d-lightshadow
three-d-shadow
window
window-frame
window-text

The vertical-align Property

length 


Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.

BODY {color: purple;}

then, by default, the border around the image will be purple. Of course, to get that border to appear, you have to do a little work first.

7.4.1. Borders with Style

We'll talk about the border's style first because it is the most important part of a border. It's most important not because it controls so its padding will still be 10% of the width of the paragraph's parent.There will, therefore, be half as much padding on this paragraph as thaton the first paragraph.</P>

Figure 7-59

Figure 7-59. Padding, percentages, and the widths of parent

We've seen this before, of course -- in Section 7.3, "Margins", in case you don't remember -- butit's worth reviewing again, just to see how it operates.

7.5.2. Single-Side Padding

other list-style properties. It applies to all elements with a display value of list-item ; in ordinary HTML, this is any <LI> element.

Example

UL {list-style: square url(bullet3.gif) outer;}  /* values are inherited by LI elements */
declare an image which is to be used as the "bullet" in an unordered or ordered list. This style applies to elements with a display value of list-item (e.g., <LI> elements). The position of the

Even if this isn't something you're likely to use often,it can still come in very handy. For example, you could define stylesto apply to entire documents:

HTML:lang(de) {color: black; background: yellow;}

Thus would all HTML documents marked as German be shown as black texton a yellow background. This marking could be made with thelang attribute, in a META tagin the document's head, or even as a value in thedocument's HTTP headers. This is somewhat similar to the

These min-max properties can be very useful in conjunction with loated elements as well. For example, you can allow a floated element's width to be relative to the width of its parent element (which is its containing block), while also making sure that the float's width never goes below 10em. The reverse approach is also possible:

This will set the float to be 40em wide, unless that would be more than 40% the width of the containing block, in which case the float will be narrowed.