Javascript [Electronic resources] : The Definitive Guide (4th Edition) نسخه متنی

18.1 Styles and Style Sheets with CSS

Styles in CSS are specified as a
semicolon-separated list of name/value attribute pairs, where each
name and value are separated by colons. For example, the following
style specifies bold, blue, underlined text:

font-weight: bold; color: blue; text-decoration: underline;

The CSS standard defines quite a few style attributes you can set.
Table 18-1 lists all the attributes except for
those used only in audio style sheets. You are not expected to
understand or be familiar with all these attributes, their values, or
their meanings. As you become familiar with CSS and use it in your
documents and scripts, however, you may find this table a convenient
quick reference. For more complete documentation on CSS, consult

Cascading Style Sheets: The Definitive Guide , by
Eric Meyer (O'Reilly), or

Dynamic HTML: The
Definitive Guide , by Danny Goodman (O'Reilly). Or
read the specification itself -- you can find it at http://www.w3c.org/TR/REC-CSS2/.

The second column of Table 18-1 shows the allowed
values for each style attribute. It uses the grammar used by the CSS
specification. Items in fixed-width
font are keywords and should appear exactly as
shown. Items in

italics specify a data type such
as a string or a length. Note that the

length
type is a number followed by a units specification such as
px (for pixels). See a CSS reference for details
on the other types. Items that appear in
italic
fixed-width
font represent the set of values allowed
by some other CSS attribute. In addition to the values shown in the
table, each style attribute may have the value "inherit",
to specify that it should inherit the value from its parent.

Values separated by a | are alternatives; you must
specify exactly one. Values separated by || are
options; you must specify at least one, but you may specify more than
one, and they can appear in any order. Square brackets
[] are used for grouping values. An asterisk
(*) specifies that the previous value or group may
appear zero or more times, a plus sign (+)
specifies that the previous value or group may appear one or more
times, and a question mark (?) specifies that the
previous item is optional and may appear zero or one time. Numbers
within curly braces specify a number of repetitions. For example, {2}
specifies that the previous item must be repeated twice, and {1,4}
specifies that the previous item must appear at least once and no
more than four times. (This repetition syntax may seem familiar: it
is the same one used by JavaScript regular expressions, discussed in
Chapter 10.)

Table 18-1. CSS style attributes and their values

The
CSS standard allows certain style attributes that are commonly used
together to be combined using special shortcut attributes. For
example, the font-family,
font-size, font-style, and
font-weight attributes can all be set at once
using a single font attribute:

font: bold italic 24pt helvetica;

In fact, some of the attributes listed in Table 18-1 are themselves shortcuts. The
margin and padding attributes
are shortcuts for attributes that specify margins, padding, and
borders for each of the individual sides of an element. Thus, instead
of using the margin attribute,
margin-left, margin-right,
margin-top, and margin-bottom,
and similarly for padding.

18.1.1 Applying Style Rules to Document Elements

You can apply style attributes to
the elements of a document in a number of ways. One way is to use
them in the style attribute of an
HTML tag. For
example, to set the margins of an individual paragraph, you can use a
tag like this:

<p style="margin-left: 1in; margin-right: 1in;">

One of the important goals of CSS is to separate document content and
structure from document presentation. Specifying styles with the
style attribute of individual HTML tags does not
accomplish this (although it can be a useful technique for DHTML). To
achieve the separation of structure from presentation, we use
style sheets, which group all the style
information into a single place. A CSS style sheet consists of a set
of style rules. Each rule begins with a selector that specifies the
document element or elements to which it applies, followed by a set
of style attributes and their values within curly braces. The
simplest kind of rule defines styles for one or more specific tag
names. For example, the following rule sets the margins and
background color for the <body> tag:

body { margin-left: 30px; margin-right: 15px; background-color: #ffffff } 

The following rule specifies that text within
<h1> and <h2>
headings should be centered:

h1, h2 { text-align: center; }

In the previous example, note the use of a comma to separate the tag
names to which the styles are to apply. If the comma is omitted, the
selector specifies a contextual rule that applies only when one tag
is nested within another. For example, the following rules specify
that <blockquote> tags are displayed in an
italic font, but text inside an <i> tag
inside a <blockquote> is displayed in plain,
nonitalic text:

blockquote { font-style: italic; }
blockquote i { font-style: normal; }

Another kind of style sheet rule uses a different selector to specify
a

class of elements to
which its styles should be applied. The class of an element is
defined by the class
attribute of the HTML tag. For example, the following rule specifies
that any tag with the attribute class="attention"
should be displayed in bold:

.attention { font-weight: bold; } 

Class selectors can be combined with tag name selectors. The
following rule specifies that when a <p> tag
has the class="attention" attribute, it should be
displayed in red, in addition to being displayed in a bold font (as
specified by the previous rule):

p.attention { color: red; }

Finally, style sheets can contain rules that apply only to individual
elements that
have a specified id attribute. The following rule
specifies that the element with an id attribute
equal to "p1" should not be shown:

#p1 { visibility: hidden; } 

We've seen the id attribute before: it is
used with the DOM function getElementById( ) to
return individual elements of a document. As you might imagine, this
kind of element-specific style sheet rule is useful when we want to
manipulate the style of an individual element. Given the previous
rule, for example, a script might switch the value of the
visibility attribute from
hidden to visible, causing the
element to dynamically appear.

18.1.2 Associating Style Sheets with Documents

You can incorporate a style sheet into
an HTML document by
placing it between <style> and
</style> tags within the
<head> of the document, or you can store the
style sheet in a file of its own and reference it from the HTML
document using a <link> tag. You can also
combine these two techniques by creating a document-specific style
sheet between <style> tags that references
or imports a document-independent style sheet using the special
@import "at-rule." Consult a CSS
reference for details on @import.

18.1.3 The Cascade

Recall that the C in
CSS stands for
"cascading." This term indicates that the style rules
that apply to any given element in a document can come from a cascade
of different sources. Each web browser typically has its own default
styles for all HTML elements and may allow the user to override these
defaults with a user style sheet. The author of a document can define
style sheets within <style> tags or in
external files that are linked in or imported into other style
sheets. The author may also define inline styles for individual
elements with the HTML
style
attribute.

The CSS specification includes a complete set of rules for
determining which rules from the cascade take precedence over the
other rules. Briefly, however, what you need to know is that the user
style sheet overrides the default browser style sheet, author style
sheets override the user style sheet, and inline styles override
everything. The exception to this general rule is that user style
attributes whose values include the !important
modifier override author styles. Within a style sheet, if more than
one rule applies to an element, styles defined by the most specific
rule override conflicting styles defined by less specific rules.
Rules that specify an element id are the most
specific. Rules that specify a class are next.
Rules that specify only tag names are the least specific, but rules
that specify multiple nested tag names are more specific than rules
that specify only a single tag name.

18.1.4 Versions of CSS

At the time of this writing, there
are two versions of the
CSS standard. CSS1 was adopted in
December, 1996 and defines attributes for specifying colors, fonts,
margins, borders, and other basic styles. Netscape 4 and Internet
Explorer 4 both implement at least partial support for CSS1. The
second edition of the standard, CSS2, was adopted in May, 1998; it
defines a number of more advanced features, most notably support for
absolute positioning of elements. The advanced
features of CSS2 are supported only in sixth-generation browsers.
Fortunately, however, the crucial positioning features of CSS2 began
the standardization process as part of a separate CSS-Positioning
(CSS-P) effort, and therefore some of these DHTML-enabling features
are available in fourth-generation browsers. Work continues on a
third edition of the CSS standard. You can find the CSS
specifications and working drafts at http://www.w3.org/Style/CSS/.

18.1.5 CSS Example

Example 18-1 is an HTML file that defines and uses a
style sheet. It demonstrates the previously described tag name,
class, and ID-based style rules, and it also has an example of an
inline style
defined with the style attribute. Remember that
this example is meant only as an overview of CSS syntax and
capabilities. Full coverage of CSS is beyond the scope of this book.

Example 18-1. Defining and using Cascading Style Sheets

<head>
<style type="text/css">
/* Specify that headings display in blue italic text. */
h1, h2 { color: blue; font-style: italic }
/* 
* Any element of class="WARNING" displays in big bold text with large margins
* and a yellow background with a fat red border.
*/
.WARNING { 
font-weight: bold;
font-size: 150%;
margin: 0 1in 0 1in; /* top right bottom left */
background-color: yellow; 
border: solid red 8px;
padding: 10px;       /* 10 pixels on all 4 sides */
}
/*
* Text within an h1 or h2 heading within an element with class="WARNING" 
* should be centered, in addition to appearing in blue italics.
*/
.WARNING h1, .WARNING h2 { text-align: center }
/* The single element with id="P23" displays in centered uppercase. */
#P23 {
text-align: center;
text-transform: uppercase;
}
</style>
</head>
<body>
<h1>Cascading Style Sheets Demo</h1>
<div class="WARNING">
<h2>Warning</h2>
This is a warning!
Notice how it grabs your attention with its bold text and bright colors.
Also notice that the heading is centered and in blue italics.
</div>
<p id="P23">
This paragraph is centered<br>
and appears in uppercase letters.<br>
<span style="text-transform: none">
Here we explicitly use an inline style to override the uppercase letters.
</span>
</p>
</body>