لطفا منتظر باشید ...
• Table of Contents• Reviews• CD-ROM• Reader Reviews• Errata• AcademicDreamweaver MX 2004: The Missing ManualBy
David Sawyer McFarland Publisher: O''ReillyPub Date: February 2004ISBN: 0-596-00631-4Pages: 840Slots: 1.0
Dreamweaver MX 2004: The Missing Manual
enables both first-time and experienced web designers to
bring stunning, interactive web sites to life. What sets
this new edition apart is the crystal-clear writing, welcome
humor, and exclusive features. With over 500 illustrations,
a handcrafted index, and the clarity of thought that has
made bestsellers of every Missing Manual to date, this new
edition is the ultimate atlas for Dreamweaver MX 2004.
6.5 More About Styles
As you begin to pile styles onto your pages, you may start to notice some peculiar
behaviors as styles start to interact. The rules governing these interactions can be
complex, but boil down to two main concepts: inheritance and cascading.
6.5.1 Inheritance
Imagine that you've created a new style by redefining the paragraph tag (<p>). This
style has a font type of Arial, is red, and is 24 pixels tall. Then you select a single
word in a paragraph and apply bold formatting to it. When you use the Property
inspector's bold button to do this, Dreamweaver quietly wraps that word in a pair of
<strong> HTML tags (Dreamweaver MX 2004 doesn't use the <b> tag when making
text boldsee Section 3.3.2).
When a browser loads the page, it formats all paragraphs in Arial, red, 24 pixels, because
that's how you defined the <p> tag. But what happens when the browser suddenly
encounters the <strong> tag? Since you didn't redefine the <strong> tag in red, Arial,
24 pixels, the browser scratches its little silicon head: Should the browser just resort
to the default font, size, and color when it gets to the <strong> tag?
No, of course not. The bolded word should look just like the rest of the paragraph
Arial, red, 24 pixelsbut be bold too. And indeed, that's how cascading style sheets
work: the <strong> tag inherits the formatting of the surrounding <p> tags.
Just as human babies inherit traitseye color, for examplefrom their biological
parents, nested HTML tags inherit the properties of tags that surround them. A tag
that's nested inside of another tagthat <strong> tag inside the <p> tag, for example
is called a child, while the enclosing tag is called the parent.
Inheritance passes from parent to child. So, in this example, the <p> tag (the parent)
passes on the Arial font, red color, and 24 pixel size to the <strong> tag (the child).
But just as children have their own unique qualities, the <strong> tag adds its own
qualityboldnessto the properties of its parent.
NOTE
Inheritance applies to all styles, not just HTML tag styles. If you apply a class style, for example, to
a <td> (table cell) tag, all tags inside the cellparagraphs, images, and so oninherit the properties of the
class style.
Inheritance comes in quite handy at times. For instance, say you want to display all
text on a page (paragraphs, headings, unordered lists, and links) using the Verdana
font. You could, of course, knock off for the week and redefine every html tag used
to format text<h1>, <h2>, <p>, <a>, <ul>, and so on, or create a class style and
then manually apply it to all text on the page.
NOTE
For more information on inheritance, the Web offers some useful articles. For example,
www.creativepro.com/story/feature/14776l?origin=story
takes you through the ins and outs of basic inheritance. The article
at
www.brainjar.com/css/using/default3.asp
offers specific code examples. And
www.ddj.com/documents/s=2370/nam1011137269/indexl
is called "Style Inheritance: Friend and Foe," which speaks for itself.
However, a better and faster technique is to take advantage of inheritance. Every Web
page contains a <body> tag, which contains all the elements of your page. The <body>
tag, therefore, is the parent of all HTML you see in a pageimages, paragraphs,
headings, and so on. To quickly format all text, you could create an HTML tag style
for the <body> tag using Verdana, or create a class style using that font and apply it
to the <body> tag. Every bit of text inside the bodyall childrenthen inherit the
Verdana font property.
NOTE
Note: Actually, not all CSS properties are inherited. The Border property, for instance, is not inherited by child
tags. Use Dreamweaver's built-in CSS Reference to see which properties are inherited (see Section 10.5).
6.5.2 Cascading
At times, styles can conflict. Let's say you redefine the <h1> tag in an external style
sheet, so that all <h1> tags will show up in red, using the Arial font. But now you
attach this external style sheet to a Web page that already has an internal style sheet,
whose <h1> tag style has been set to Times, 24 pixels.
When a Web browser has to display any text formatted as a Heading 1 paragraph, it
runs into a little dilemma. The page has two different stylestwo sets of formatting
rulesfor the same tag. So which does the browser choose: the style from the internal
style sheet or the style from the external style sheet?
The answer is both. The browser merges the two styles into a sort of hybrid, following
these rules:
Properties that don't conflict are applied as usual. In the above example, the red
color property only exists in the external style, while only the internal style speci-
fies a font size. So far, the browser knows that, for this page, text inside <h1> tags
should be both red and 24 pixels tall.
When properties do conflict, a Web browser uses the property from the "closest"
or more specific style. External styles (since they're in a separate file) are not as
specific as the internal styles, which were created specifically to style this one page.
In this case, the font Times (specified in the <h1> tag style in the internal style
sheet) wins.
To summarize this example, then, the Web browser determines that text inside an
<h1> tag on this Web page should be Times, red, 24 pixels tall.
This cascading effect applies to all styles, including class styles and the advanced styles
discussed on Section 6.6. When there's a direct conflict between properties from a class
style and an HTML tag style, the class style prevails. Because class styles must be
applied directly to a tag<h1 class="specialHeadline">they are considered more
specific than the HTML tag style. After all, you added the style to a specific instance
of the <h1> tag on the page.
NOTE
Note: In the CSS version of rock-paper-scissors, HTML text formatting beats CSS formatting. So if you add
new, improved CSS styles to old Web pages that include out-of-date HTML formatting (see the note on Section 3.3.1), your CSS styles won't work. To eliminate this conflict, remove the <font> tag from the page's code using Dreamweaver's Search and Replace tool (Section 19.3) or the Clean Up HTML/XHTML command (Section 15.5).
These same rules apply when child elements inherit properties from parent elements,
as described on Section 6.5. For example, if you apply a purple, Arial-font class style to
the body of a page, then the child elements (anything within the <body> tag) inherits
those properties. If you then redefine the paragraph tag so that paragraph text is green,
paragraph text will inherit the Arial font from the body, but will ignore the purple
color in favor of the green you specified when redefining its ownparagraphtag.
To learn more than you probably ever wanted to know about cascading, visit the
following Web pages:
www.blooberry.com/indexdot/css/topics/cascade
nemesis1.f2o.org/aarchive?id=4
www.w3.org/TR/REC-CSS2/cascadel#cascade
6.5.3 Using the Relevant CSS Panel
If you haven't yet set this book aside in hopes that the swelling in your brain will
subside, you've probably absorbed the notion that the application of style properties
can be quite complex. With all this inheritance and cascading going on, it's very easy
for styles to collide in unpredictable ways. To help you discern how styles interact and
ferret out possible style conflicts, Dreamweaver MX 2004 introduces a new toolthe
Relevant CSS panel (Figure 6-10).
The Relevant CSS panel lists all styles that affect the current selection in the
document window. The styles are listed in order of most general (top) to
most specific (bottom). The most specific rulein this example, the .sidebar
class stylewins out in the battle of inherited properties (see Section 6.5).
The Relevant CSS panel is part of the Tag inspector and has the same style-editing
features as the Rule inspector described on Section 6.4.2, but its main purpose is to show
which styles affect a given selection. For example, Figure 6-10 shows that four styles
are affecting the formatting of a single paragraph of text: 3 tag styles (<body>, <p>,
and <p>) and one class style (.sidebar). Why two <p> tag styles? One is in an external
style sheet, while the other belongs to the page's internal style sheet.
Selecting a style in the list at the top of the panel displays that style's properties at the
bottom. This lower area works just like the Rule inspector described on Section 6.4.2 for
editing style properties. For example, in Figure 6-10, the Tag inspector lists a variety
of properties for the .sidebar style, including background-color, border, float, fontfamily,
and so on.
You can edit any of these properties by retyping, say, or choosing from a pop-up menu.
Clicking the second-to-last style in the lista <p> tag styleshows that it has a setting
for the Font-family property. In addition, there's a red line through the property
name, indicating that it doesn't apply to the current selection. Because the more specific
.sidebar class style also has the font-family property set, in the battle of cascading style
properties, it wins (see Section 6.5 for more on inheritance and cascading).
If your Web pages are elegantly simple and use only a couple of styles, you may not
find much need for the Relevant CSS panel. But as you become more proficient (and
adventurous) with CSS, you'll find that this panel is a great way to untangle masses
of colliding and conflicting styles.
The Relevant CSS panel lets
you easily view all the properties
for your Web page's
styles. A red line (circled in
these images) strikes out
properties that don't apply to
the given selection. In this example,
the font-family in the
second <p> style is overridden
by the Font-family property
in the more specific .sidebar
class style. Likewise, the
sidebar class also overrides
the Margin-left property in the
top <p> style.
