Book HomeCascading Style Sheets: The Definitive GuideSearch this book Wednesday 29th of June 2016 07:25:47 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
@font-face
@page

Table 10-2. New Values in CSS2

not required. Can you nest sub-lists within lists? Soitanly! Levels aredifferentiated by indent and bullet or number styleOrdered lists let you specify TYPE and an ordinal VALUE for a listor any individual list item: In-Line Images

Okay, now that you know how to format text on the page, let's includesome in-line images.  The web supports images in GIF, JPEGor PNG formats. GIFs can have up to 256 colors.  JPEGs andPNGs can have millions (although clients' monitors may not display themall). JPEGs use a "lossy" compression that reduces image quality; GIFs

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.

with FONT tags: 
<FONT SIZE="n" FACE="name" COLOR="color">... </FONT>

Be careful about specifying fonts in the <BASEFONT> or <FONT>tag.  You can count on all browsers having the basic fonts--Arial,Courier and Times Roman--but browsers that don't have the font you specifywill simply substitute some other font, and the effect you want may bediminished or lost.  The <BASEFONT> or <FONT>tags can list multiple fonts in order of preference.  The list shouldinclude a generic font family as a last resort, e.g. isn't otherwise possible.

Figure 6-34

Figure 6-34. Creating a "triple border" on H2 elements

We can take that further and decide to set a wavy border along the top of each H1 element, as illustrated in Figure 6-35. The image is colored in such a way that it blends with the background color and produces the wavy effect shown:

H1 {background-image: url(wavybord.gif); background-repeat: repeat-x;
background-color: #CCCCCC;}
Figure 6-35

Figure 6-35. Setting a wavy top border on H1 elements

the chapter, we'll see how this can be useful.

The other value, auto, allows for some even moreinteresting effects. It acts much the same as settingauto on margins, but in positioning, this canpermit the creation of elements that are only as wide or tall as theyneed to be in order to display their content, without having toexactly specify how high or wide that will be. We'll explorethis in detail later in the chapter as well.

and negative values cause outward offsets.

TIP

The description of offsetting the outer edges is based on an erratum.The original CSS2 specification actuallysays that the content edges are offset, but it has been widely agreedthat this is a serious error, and in fact, readings of other parts ofthe specification show that it is the outer edges that are offset.

If you wish to suppress the display of bullets altogether, then none is the value you seek. none will cause the user agent to refrain from putting anything where the bullet would ordinarily be, although it does not interrupt the counting in ordered lists. Thus, the following markup would have the result shown in Figure 7-80:

OL LI {list-style-type: decimal;}
LI.off {list-style-type: none;}