لطفا منتظر باشید ...
8.3 Style Classes
CSS2 classes allow you to create several
different styles for the same element, at the document level or in an
external style sheet. Later in a document, you explicitly select
which style to apply to that particular instance of the tag by
including the style-related class attribute with
the name value of one of the previously defined
styles.
8.3.1 Regular Classes
In a technical paper, you might want to define one paragraph style
for the abstract, another for equations, and a third for centered
quotations. Differentiate these paragraphs by defining each as a
different style class:
<style type="text/css">
<!--
p.abstract {font-style: italic;
margin-left: 0.5cm;
margin-right: 0.5cm}
p.equation {font-family: Symbol;
text-align: center}
h1, p.centered {text-align: center;
margin-left: 0.5cm;
margin-right: 0.5cm}
-->
</style>
Notice first in the example that defining a class is simply a matter
of appending a period-separated class name as a suffix to the tag
name as the selector in a style rule. Unlike the XHTML-compliant
selector, which is the name of the standard tag and must be in
lowercase, the class name can be any sequence of letters, numbers,
and hyphens, but it must begin with a letter.[6] Careful, though: case does
matter, so abstract is not the same as
AbsTRact. Classes, like selectors, may be included
with other selectors, separated by commas, as in the third example.
The only restriction on classes is that they cannot be nested; for
example, p.equation.centered is not allowed.
[6] Due to
its support of JavaScript style sheets, Netscape 4 cannot handle
class names that happen to match JavaScript keywords. The class
"abstract," for instance, generates
an error in Netscape 4.
Accordingly, the first rule in the example creates a class of
paragraph styles named abstract whose text is
italic and indented from the left and right margins by 0.5
centimeters. Similarly, the second paragraph style class,
equation, instructs the browser to center the text
and to use the Symbol typeface to display the text. The last style
rule creates a style with centered text and 0.5-centimeter margins,
applying this style to all level-1 headers as well as creating a
class of the <p> tag named
centered with that style.
To use a particular class of a tag, you add the
class attribute to the tag, as in this example
(rendered by Internet Explorer in Figure 8-3):
<p class=abstract>
This is the abstract paragraph. See how the margins are indented?
</p>
<h3>The equation paragraph follows</h3>
<p class=equation>
a = b + 1
</p>
<p class=centered>
This paragraph's text should be centered.
</p>
Figure 8-3. Use classes to distinguish different styles for the same tag
For each paragraph, the value of the class
attribute is the name of the class to be used for that tag.
8.3.2 Generic Classes
You
may also define a class without associating it with a particular tag
and apply that class selectively through your documents for a variety
of tags. For example:
.italic {font-style: italic}creates a generic class named italic. To use it,
simply include its name with the class attribute.
So, for instance, use <p
class=italic> or <h1
class=italic> to create an italic paragraph or
header.
Generic classes are quite handy and make it easy to apply a
particular style to a broad range of tags. Netscape and Internet
Explorer support CSS2 generic classes.
8.3.3 ID Classes
Almost all HTML
tags accept the id attribute, which assigns to the
element an identifier that is unique within the document. This
identifier can be the target of a URL, used by automated
document-processing tools, and can also be used to specify a style
rule for the element.
To create a style class that the styles-conscious browser applies to
only those contents of your document explicitly tagged with the
id attribute, follow the same syntax as for style
classes, except with a # character before the
class name instead of a period. For example:
<style>
<!--
#yellow {color : yellow}
h1#blue {color : blue}
-->
</style>
Within your document, use that same id name to
apply the style, such as <h1
id=blue> to create a blue heading. Or, as in
the example, use id=yellow elsewhere in the
document to turn a tag's contents yellow. You can
mix and match both class and id
attributes, giving you a limited ability to apply two independent
style rules to a single element.
There is a dramatic drawback to using style classes this way: the
HTML and XHTML standards dictate that the value of the
id attribute be unique for each instance in which
it's used within the document. Yet here, we have to
use the same value to apply the style class more than once.
Even though current browsers let you get away with it, we strongly
discourage creating and using the id kinds of
style classes. Stick to the standard style class convention to create
correct, robust documents.
8.3.4 Pseudoclasses
In addition to
conventional style classes, the CSS2 standard defines pseudoclasses,
which allow you to define the display style for certain tag
states, such as changing the display style when
a user selects a hyperlink. You create pseudoclasses like regular
classes, but with two notable differences: they are attached to the
tag name with a colon instead of a period, and
they have predefined names, not arbitrary ones you may give them.
There are seven pseudoclasses, three of which are explicitly
associated with the <a> tag.
8.3.4.1 Hyperlink pseudoclasses
CSS2-compliant browsers distinguish
three special states for the hyperlinks created by the
<a> tag: not yet visited, currently being
visited, and already visited. The browser may change the appearance
of the tag's contents to indicate its state, such as
with underlining or color. Through pseudoclasses, you can control how
these states get displayed by defining styles for
a:link (not visited), a:active
(being visited), and a:visited.
The :link
pseudoclass controls the appearance of links that are not selected by
the user and have not yet been visited. The :active
pseudoclass defines the appearance of links that are currently
selected by the user and are being processed by the browser. The
:visited
pseudoclass defines those links that the user has already visited.
To completely define all three states of the
<a>
tag, you might write:
a:link {color: blue}
a:active {color: red; font-weight: bold}
a:visited {color: green}In this example, the styles-conscious browser is supposed to render
unvisited links in blue. When the user selects a link, the browser
should change its text color to red and make it bold. Once visited,
the link reverts to conventional green text.
8.3.4.2 Interaction pseudoclasses
The CSS2 standard defines two new
pseudoclasses that, along with
:active, relate to user actions and advise the
interactive agent, such as a browser, how to display the affected
element as the user interacts with the element. In other words, these
two pseudoclasses hover
and
focus
are dynamic.
For instance, when you drag the mouse over a hyperlink in your
document, the browser may change the mouse-pointer icon. Hovering can
be associated with a style that is in effect only while the mouse is
over the element. For example, if you add the
:hover pseudoclass to our example list of
hyperlink style rules:
a:hover {color: yellow}the text associated with unvisited links normally is rendered in blue
but turns yellow when you point to it with the mouse, red while you
visit it, and green after you're done visiting.
Similarly, the :focus pseudoclass lets you change
the style for an element when it becomes the object of attention. An
element may be under focus when you tab to it, click on it, or,
depending on the browser, advance the cursor to it. Regardless of how
the focus got to the element, the style rules associated with the
focus pseudoclass are applied only while the element has the focus.
8.3.4.3 Nesting and language pseudoclasses
The CSS2
:first-child
pseudoclass lets you specify how an element may be rendered when it
is the first instance, a.k.a.
"child," of the containing element.
For instance, the following rule gets applied to a paragraph when it
is the first element of a division; there can be no intervening
elements (notice the special greater-than bracket syntax relating the
first child with its parent element):
div > p:first-child {font-style: italic}Accordingly, the first paragraph in the following HTML fragment would
be rendered in italics by a CSS2-compliant browser because it is the
first child element of its division. Conversely, the second paragraph
comes after a level-2 header, which is the first child of the second
division. So, that second paragraph in the example gets rendered in
plain text, because it is not the first child of its division:
<div>
<p>
I get to be in italics.
</p>
</div>
<div>
<h2> New Division</h2>
<p>
I'm in plain text because my paragraph is a second child of the division.
Finally, the CSS2 standard defines a new pseudoclass that lets you
select an element based on its language. For instance, you might
include the lang=fr attribute in a
<div> tag to instruct the browser that the
division contains French language text. The browser may specially
treat the text. Or, you may impose a specific style with the
pseudoclass :lang
. For example:
div:lang(it) {font-family: Roman}says that text in divisions of a document that contain the Italian
language should use the Roman font family. Appropriate,
don't you think? Notice that you specify the
language in parentheses immediately after the lang
keyword. Use the same two-letter ISO standard code for the
pseudoclass :lang as you do for the
lang attribute. [Section 3.6.1.2]
8.3.4.4 Browser support of pseudoclasses
None of the popular browsers support the
:lang, :first-child, or
:focus pseudoclasses yet. All the current popular
browsers support the :link,
:active, :hover, and
:visited pseudoclasses for the hyperlink tag
(<a>). Even though
:active also may be used for other elements, none
of the browsers yet support applications beyond the
<a> tag.
8.3.5 Mixing Classes
You can mix pseudoclasses with regular classes by appending the
pseudoclass name to the selector's class name. For
example, here are some rules that define plain, normal, and fancy
anchors:
a.plain:link, a.plain:active, a.plain:visited {color: blue}
a:link {color: blue}
a:visited {color: green}
a:active {color: red}
a.fancy:link {font-style: italic}
a.fancy:visited {font-style: normal}
a.fancy:active {font-weight: bold; font-size: 150%}The plain version of <a>
is always blue, no matter what the state of the link is. Accordingly,
normal links start out blue, turn red when active, and convert to
green when visited. The fancy link inherits the
color scheme of the normal <a> tag but adds
italic text for unvisited links, converts back to normal text after
being visited, and actually grows 50% in size and becomes bold when
active.
A word of warning about that last property of the
fancy class: specifying a font-size change for a
transient display property results in lots of browser redisplay
activity when the user clicks on the link. Given that some browsers
run on slow machines, this redisplay may be annoying to your readers.
Given also that implementing that sort of display change is something
of a pain, it is unlikely that most browsers will support radical
appearance changes in <a> tag
pseudoclasses.
8.3.6 Class Inheritance
Classes inherit the style properties of
their generic base tags. For instance, all the properties of the
plain <p> tag apply to a specially defined
paragraph class, except where the class overrides a particular
property.
Classes cannot inherit from other classes, only from the unclassed
versions of the tags they represent. In general, therefore, you
should put as many common styles as possible into the rule for the
basic version of a tag and create classes only for those properties
that are unique to that class. This makes maintenance and sharing of
your style classes easier, especially for large document
collections.
