Chapter13, Książki, Rest Inf, xml bible [ EN ],

[ Pobierz całość w formacie PDF ]
Cascading Style
Sheets Level 2
13
✦ ✦ ✦ ✦
In This Chapter:
was published by the W3C in 1998, surpassing CSS
Level 1 to make the formatting of XML and HTML documents
more powerful than ever. Of course, CSS2 fights the same
backwards-compatibility battles with HTML that CSS1 fought.
However, with XML, CSS2 can format content on both paper
and the Web almost as well as a desktop publishing program
like PageMaker or Quark XPress.
T
he Cascading Style Sheets Level 2 (CSS2) specification
What’s New in
CSS2?
Selecting elements
Formatting a page
Visual formatting
Caution
Most of the rules discussed here are not yet implemented
by the common browsers. Internet Explorer 5.0 and Mozilla
5.0 browsers should begin implementing some of these
styles, but full implementation is still some time away.
Boxes
Counters and
automatic numbering
Aural style sheets
What’s New in CSS2?
CSS2 incorporates many features that Web developers and
designers have long requested from browser vendors. The
specification has more than doubled in size from CSS1, and is
not only a compilation of changes and new features, but a
redraft of the original specification. This makes this
specification a single source for all Cascading Style Sheet
syntax, semantics, and rules.
✦ ✦ ✦ ✦
On the
CD-ROM
The complete CSS Level 2 specification is available on the
Web at
and on the
CD in the specs/css2 folder. This is possibly the most read-
able specification document ever produced by the W3C
and is well worth rereading.
As with all new specifications it takes some time for the
popular software to support them fully, and CSS2 is no
exception. As you will discover while reading through this
CHAPTER
390
Part III
Style Languages
chapter, both Internet Explorer 5.0 and Mozilla 5.0 are just starting to implement
these properties. The ones that have not yet been implemented have been noted
for your convenience.
The many new features of CSS2 enable you to more precisely select and format
elements in your document. New pseudo-classes and pseudo-elements enable you
to select the first child of an element, adjust an element when it receives focus, or
control the placement of other elements automatically around specified element
selections. Media types let you apply different styles to documents that will appear
in different media such as printed pages, computer monitors, and radio broadcasts.
Support for paged media like printouts and slide shows has been drastically
improved with much stronger control over page breaks. Elements can now be
formatted in tables as well as block and inline boxes. Sequences and lists can be
automatically numbered and indented. More support is provided for non-Western
languages like Arabic and Chinese. And for the first time you can apply aural styles
that specify not how a document is rendered, but rather how it is read. In addition,
CSS2 changes the implementation of some of CSS1’s features.
New Pseudo-classes
Pseudo-classes select elements that have something in common but do not
necessarily have the same type. The
:hover
pseudo-class, for example, refers to
whichever element the cursor is currently over, regardless of the element’s type.
CSS2 has seven new pseudo-classes, which are outlined below:
:first-child
: The
:first-child
pseudo-class selects the first child of an
element.
:focus
: The
:focus
pseudo-class selects the object that has the focus; that
is, the one into which input will go if the user types a key on the keyboard.
:hover
: The
:hover
pseudo-class selects a designated, but not activated
object.
:lang
: The
:lang
pseudo-class selects those elements written in a specific
language as identified by the
xml:lang
attribute.
:first
: The
:first
pseudo-class selects the first page of a document when it
is being printed.
:left:
The
:left
pseudo-class selects the left-hand pages (normally these
are the even-numbered pages) of a document printout, as if the hard copy
material were going to be in a book.
:right
: The
:right
pseudo-class selects the right-hand pages (normally
these are the odd-numbered pages) of a document printout, as if the hard
copy material were going to be bound.
Chapter 13
Cascading Style Sheets Level 2
391
New Pseudo-Elements
Pseudo-elements identify specific elements by information other than what’s
readily available from the XML input. For example, in CSS1 and CSS2,
:first-line
and
:first-letter
are pseudo-elements that select the first line and letter of an
element, even though these aren’t necessarily represented by any element.
CSS2 adds two new pseudo-elements,
:after
and
:before
. The
:after
pseudo-
element enables you to insert objects after the specified element. These objects can
be images, automatic counters, or text. The
:before
pseudo-element enables you
to insert objects before a specified element. These objects can also be images,
automatic counters, or text.
Media Types
CSS2 defines ten media types in which information is presented such as Braille,
computer displays, ink on paper, and television. CSS2 lets you specify different
styles for different media. For example, it’s more important to use larger fonts for
low-resolution computer displays than for 1200 dpi printing.
Paged Media
CSS2 provides control over page breaks and methods of identifying individual pages
in a document so that designers can format printed documents, without affecting
the appearance of the documents on screen.
Internationalization
As the Internet expands beyond the English- speaking world, more advances are
being made in supporting the thousands of languages spoken and written both
currently and throughout history. CSS2 adds support for Unicode and bi-directional
text so you can style Chinese and Hebrew as easily as English and French.
Visual Formatting Control
CSS2 adds more formatting properties to provide more precise control over the
objects that make up a document. You can now specify the absolute positions and
dimensions of elements. There are also more display styles to use when creating
elements. Shadows can be applied to text. Fonts and colors can be specified as “the
same as” a user interface element like a menu item or an icon label. You can change
the cursor shown when the pointer moves over different elements.
Tables
Improvements in the
display
property make it easy to treat XML elements as
table-like structures, better controlling their alignment.
392
Part III
Style Languages
Generated Content
Automatically generated counters, numbering systems, and list markers enable
document authors to force applications to create information on the fly, as the
document is being rendered. Numbers can be recalculated on the fly whenever
a document changes, rather than having to be painstakingly inserted by hand.
Aural Style Sheets
In an effort to make information dispersal friendlier for all individuals, CSS2 has
incorporated specific properties that cover the features of a speech-synthesizing
system. These properties enable the document author to control the richness,
pitch, and other properties of the speaker’s voice for each element within the
document.
New Implementations
The CSS2 specification also changes the implementation of some features originally
included in CSS1. These include the cascade mechanism, pseudo-classes, and a
variety of other properties.
Pseudo-classes and Elements
The
:link
,
:visited
, and
:active
pseudo-classes no longer have to be
designated independently of each other, and can be used together.
Inheritance
In CSS1, only some properties were able to inherit values from their parents. In
CSS2, all properties can inherit their value from their parent element by setting the
value to the keyword
inherit
. When a property is inherited, the property takes on
the same value as the nearest parent element.
Note
Because every property can have the value
inherit
, I will omit any explanation
of this value in the discussions of the individual properties that follow.
Cascade Mechanism
In CSS1 the
!important
designator can force an author’s style sheet to take
precedence over a reader’s style sheet. CSS2 reverses this precedence so that
reader preferences take precedence over author preferences. The default result,
when working with both author and reader style sheets, is that the user’s style
sheet overrides the author’s. However, if the author declares a property
!important
, this adds more force to the specification, making it override the
reader’s style sheet. However, if the reader also declares a rule
!important
,
this overrides a
!important
declaration in the author’s style sheet. In other
words, the reader gets the last word.
Chapter 13
Cascading Style Sheets Level 2
393
Display Property
The default value of the
display
property is now
inline
rather than
block
.
Margins and Padding
In CSS1, some of the margin properties were ignored when other properties were
set, for example,
margin-right
would be ignored if both
margin-left
and
width
were set. This decision was independent of the direction of the text and the align-
ment of the object. CSS2 makes the decision between altering the left or right
margin dependent on the direction of the text of the object.
Selecting Elements
Browsers that support CSS2, such as Internet Explorer and Mozilla, can more
specifically select an element or object to which a style rule is applied. Using CSS2
you can select elements based upon the pattern they create in the document tree,
by simply designating their element name, id, or through a combination of element
and attribute settings.
Pattern Matching
CSS2 pattern matching identifies specific elements in the document tree. The
syntax of the pattern-matching selector can be anything from a simple element
name to a complex system of contextual patterns like those shown in Table 13-1. An
element matches a pattern if it meets all of the requirements of the specified
pattern. In XML this includes case-sensitivity.
Table 13-1
CSS2 Selector Syntax for Pattern Matching
Syntax
Meaning
*
This is the universal selector, and matches any element.
X
Matches any element by the name of “X”.
X Y
Matches any element with the name “Y” that is a descendent of
an element with the name “X”. For example: all
VERSE
descendents of
SONNET
elements.
X > Y
Matches any “Y” element that is a child of an element “X”. For
example: all
VERSE
children of a
STANZA
element.
X:first-child
Matches all “X” elements that are the first child of their parents.
For example: the first
STANZA
element in a
SONNET
element.
Continued
[ Pobierz całość w formacie PDF ]

Chapter13, Książki, Rest Inf, xml bible [ EN ],

Odnośniki