Thông tin tài liệu
So far you have learned how to create CSS rules using simple selectors—type
selectors based on the HTML tag and class or id selectors based on attributes in
the HTML.
A type selector is simply the name of an HTML tag minus the
<> angle brackets. For
example:
h1 { color: blue; }
This selects all <h1> tags and specifies that they’re the color blue. Type selectors are the
easiest to use because they’re so straightforward, but they’re also very limited. What if
you want only some of the <h1> tags to be blue and others to be green? That’s when
you’d use class and id selectors.
82 Hour 5
Although I said type selectors had to be HTML tags, I must admit that’s only
half true. They actually have to be any sort of legitimate element for the
language you’re styling; this is how you can use CSS with XML, for example.
And in fact, you don’t have to have the actual tag present! HTML (but not
XML or XHTML) lets you leave out certain tag declarations entirely, such as the
<body> element. The opening and closing tags are implied. If you have a rule
based on body, such as ‘body { font-family: Arial; }’, a CSS-compliant
browser will still apply your font to the implied <body> even though no tags
are present.
In Hour 4, “Using CSS with HTML,” you learned how you can set class and id selec-
tors in your rules based on HTML attributes of class and id,such as
#here { font-size: large; }
.there { color: green; }
An id selector uniquely identifies part of a page, whereas a class selector allows you to
identify specific tags as being part of a certain set you’ve defined.
Using class and id Selectors
You can combine class selectors (or even id selectors) with <div> tags to desig-
nate specific sections of a page that should receive special styling. For example,
consider the HTML page shown in Listing 5.1, which has a class attribute set on
each <div> tag.
09 0672324091 ch05 6/13/02 10:39 AM Page 82
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
LISTING 5.1 HTML Sections Set via <div> and class
<! imgtip-5.1.html >
<! Accessibility tips for images >
<! By Kynn Bartlett, kynn@kynn.com >
<html>
<head>
<title>Image Accessibility</title>
<link type=”text/css” rel=”stylesheet”
media=”screen” href=”tips-5.2.css”>
</head>
<body>
<div class=”nav”>
<a href=”http://access.idyllmtn.com”>access.idyllmtn.com</a>
·
<a href=”http://access.idyllmtn.com/tips/”>Tips</a>
·
<! this page’s short title >
Images
</div>
<div class=”header”>
<h1>Image Accessibility</h1>
<h2>Making your graphics accessible</h2>
</div>
<div class=”tips”>
<p>
Here’s some helpful tips on making your graphical
content accessible to users who can’t see images:
</p>
<ul>
<li>Always include an <tt>alt</tt> attribute on your
<tt><img></tt> tag.</li>
<li>The <tt>alt</tt> attribute should contain a short
replacement for the graphic, in text. If the image
itself has text, list that in <tt>alt</tt>.</li>
<li>If the image is purely decorative and doesn’t convey
any additional information, use <tt>alt=””</tt>.</li>
<li>If there is more information in the graphic than you
can convey in a short <tt>alt</tt> attribute, such
as the information in a graph or chart, then use
the <tt>longdesc</tt> attribute to give the URL of
a page which describes the graphic in text.</li>
</ul>
</div>
<div class=”footer”>
<hr>
<address>
Copyright © 2002 by Kynn Bartlett
</address>
Selectors 83
5
continues
09 0672324091 ch05 6/13/02 10:39 AM Page 83
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
</div>
</body>
</html>
As you can see, you linked in an external style sheet, tips-5.2.css,using a <link> tag.
That style sheet defines a style for each section of the page; your sections are “
nav,”
“
header,” “tips,” and “footer.” The style sheet is shown in Listing 5.2.
LISTING 5.2 Sectional Styles Using Classes
/* tips-5.2.css */
/* By Kynn Bartlett, kynn@kynn.com */
.nav /* Navigation bar */
{
font-family: Verdana, sans-serif;
}
.header /* Top heading of the page */
{
color: white;
background-color: maroon;
font-family: Verdana, sans-serif;
}
.tips /* A list of tips for accessibility */
{
color: white;
background-color: gray;
font-family: Arial, sans-serif;
}
.footer /* Bottom of the page */
{
color: green;
background-color: white;
font-family: “Times New Roman”, serif;
}
The effect of applying these styles is shown in Figure 5.1. You’ll notice that I’ve used
background colors to make two of the <div> sections visible; in practice, this can be a
somewhat unattractive effect; some of my examples are written simply to illustrate a
principle rather than to be aesthetically appealing, especially in the limited black, white,
and gray shades available in this book.
84 Hour 5
LISTING 5.1 Continued
09 0672324091 ch05 6/13/02 10:39 AM Page 84
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
The Universal Selector
In addition to type, class, and id selectors, CSS also defines a universal selector. The
universal selector applies to all tags and content within a page and is represented by an
asterisk (*). Here’s an example of a universal selector rule:
* { color: blue; }
Selectors 85
5
FIGURE 5.1
Netscape 6 displays
sectional styles set by
<div> and class.
Workaround for Netscape 4 and Internet Explorer
The 4.0 versions of both Netscape and Internet Explorer do not support the
universal selector. For this reason, you’ll probably want to write your univer-
sal selectors to also include the <body> tag, like this:
*, body { font-family: Arial; }
If you’re writing a rule that uses the universal selector and there’s something else to that
rule, such as a class selector, you can leave out the asterisk. In fact, the general way of
writing class selectors is just a special case of the universal selector with the asterisk
omitted. The following two declarations are identical:
09 0672324091 ch05 6/13/02 10:39 AM Page 85
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
*.there { color: green; }
.there { color: green; }
You may wonder why there’s a need for a universal selector; as you’ve seen before, you
can affect the style of an entire page by using a selector of the <body> tag. It’s important
to understand that the universal selector sets the style on all elements and doesn’t just set
an inherited default. What do I mean? Consider the following style sheet:
* { color: green; }
h1 { color: blue; }
Let’s assume you’ll link that to an HTML file that includes this:
<h1>This is <em>very</em> important</h1>
What color will the word “very” be? It will be green and in the middle of a blue headline
because the universal rule says everything has the color green explicitly set, just as if
there were a rule for every possible element, reading
element { color: green; }
In practice, you’d probably want the color of the <em> to inherit from the <h1>’s style, so
you need to be very careful about when and where you use a universal selector. You’ll
learn more about inheritance in Hour 7, “Cascading and Inheritance.”
Combining Simple Selectors
To get the most utility out of your CSS rules, you’ll want to write combined rules.
You’ve already learned a little about grouping selectors together; now you’ll see how you
can use descendant selectors as well.
Grouping Selectors
As you learned in Hour 2, you can combine rules by listing the selectors together, sepa-
rating them by commas. You can combine any sort of selectors in this way, such as in the
following rule:
/* Anything that is sorta heading-like is in Arial;
only odd headings are maroon and the rest are green */
h1, h2, h3, h4, h5, h6, .heading, .standout, #headline
{ font-family: Arial; }
h1, h3, h5, dt, .heading, .standout, #headline
{ font-color: maroon; }
h2, h4, h6
{ font-color: green; }
You could have written the same set of rules in this manner:
/* Anything that is sorta heading-like is in Arial;
only odd headings are maroon, and the rest are green */
86 Hour 5
09 0672324091 ch05 6/13/02 10:39 AM Page 86
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
h1, h3, h5, dt, .heading, .standout, #headline
{ font-family: Arial;
font-color: maroon; }
h2, h4, h6
{ font-family: Arial;
font-color: green; }
Writing it the first way makes it easier to change the font color if you need to; the declara-
tion font-family: Arial; appears only one place in your document. The way you group
your rules can improve the ease with which you can modify them. Note, though, that
there’s a drawback to this approach, as well; to change how one type of selector is ren-
dered (say, anything in the standout class), you’ll need to edit several rules. There are no
hard-and-fast guidelines, therefore, about how you can group your rules in modules; as
you gain experience with CSS, you’ll form your own methods for style rules grouping.
Descendant Selectors
One of the most useful ways to group selectors together is to use a descendant selector.
A descendant, in HTML and XML, is an element that’s completely contained within
another element’s content. As an example, the <h2> is a descendant of the <div>, and the
<em> of the <h1>,in Listing 5.3. The <em> is also a descendant of the <div>,as it’s con-
tained by both the <div> and the <h1>.
LISTING 5.3 Descendants in HTML
<! babe-5.3.html >
<! By Kynn Bartlett kynn@kynn.com >
<html>
<head>
<title>Best Family Movie Ever</title>
<link type=”text/css” rel=”stylesheet”
href=”babe-5.4.css”>
<style type=”text/css”>
</style>
</head>
<body>
<div class=”header”>
<h1>Movie Review: <cite>Babe</cite></h1>
<p>
Mini-Review by Joe Moviefan
</p>
</div>
<div class=”opinion”>
<h2>The Best Family Movie <em>Ever</em></h2>
<p>
The movie <cite>Babe</cite> was the best family
movie ever produced! This great movie featured
Selectors 87
5
continues
09 0672324091 ch05 6/13/02 10:39 AM Page 87
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
talking animals, a cantankerous old man, and
subtle-yet-Oscar-winning special effects who
could ask for more? The clever writing and
humorous touches make this all-ages movie great
for children while still very enjoyable by
adults. Feel like a kid again see
<cite>Babe</cite>!
</p>
</div>
<hr>
<div class=”footer”>
<p>
Copyright © 2002 by
<a href=”mailto:joe@kynn.com”>Joe Moviefan</a>
</p>
</div>
</body>
</html>
Descendant selectors define rules based on where a given tag appears within the page by
combining together simple selectors, separated by spaces. For example, here’s a rule to
change the color of all <cite> tags contained within paragraphs:
p cite { color: white; background-color: black; }
You’ll notice that I listed the outside tag first and then the inside. If you did it the other
way around, you wouldn’t match anything because there are no cite tags that contain
paragraph tags.
If you add this rule to the
<style> element of your HTML page from Listing 5.3, you
get the effect shown in Figure 5.2. Notice that the <cite> within the <h1> is not styled
by this rule, just the <cite> inside the <p> element.
It’s important to keep in mind that a descendant selector means any descendant, not just
an immediate child. A descendant could be an element inside an element inside an ele-
ment. This allows us to make rules that apply to any descendant element, no matter how
deeply it’s nested.
You can combine section styles (set via
class and <div>) with element-based type selec-
tors, as well; for example, the following code changes the font face of <p> tags within
the header section but modifies no others:
.header p { font-family: “Courier New”, monospace; }
The effects of this rule are shown in Figure 5.3.
88 Hour 5
LISTING 5.3 Continued
09 0672324091 ch05 6/13/02 10:39 AM Page 88
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Selectors 89
5
FIGURE 5.2
Netscape 6 displays
the second
<cite>
with your chosen style.
Header paragraph
FIGURE 5.3
Changing the header
paragraph font style, as
shown in Netscape 6.
09 0672324091 ch05 6/13/02 10:39 AM Page 89
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
A more complete style sheet that demonstrates how to set a number of different combined selec-
tors is listed in Listing 5.4. Figure 5.4 shows how Listing 5.3 looks with this style sheet applied.
LISTING 5.4 A Variety of Selectors in a Single Style Sheet
/* babe-5.4.css: Style sheet for Babe review */
/* Written by Kynn Bartlett <kynn@kynn.com> */
body
{
font-family: Arial, sans-serif;
color: black;
background-color: white;
}
.header h1
{
font-family: Verdana, sans-serif;
color: fuchsia;
}
.header p
{
font-family: “Courier New”, monospace;
color: teal;
font-size: larger;
}
.header cite
{
color: purple;
}
.opinion h2
{
color: white;
background-color: navy;
font-family: Arial, sans-serif;
}
em
{
font-size: larger;
}
p cite
{
color: white;
background-color: black;
}
90 Hour 5
09 0672324091 ch05 6/13/02 10:39 AM Page 90
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Pseudo-classes and Pseudo-elements
In addition to type selectors and class selectors, CSS also allows pseudo-class and
pseudo-element selectors.
A pseudo-class selector is a selector based on a set of predefined qualities that an HTML
element can possess. These qualities function in practice similar to a
class attribute on
the element, so in CSS terms, they are called pseudo-classes. No actual
class attributes
exist in the markup that correspond to these pseudo-classes; instead, they represent some
Selectors 91
5
Body Text
Footer
Opinion
Header
.footer
{
font-family: “Times New Roman”, serif;
font-size: small;
}
.footer a
{
color: green;
}
FIGURE 5.4
Displaying various
selectors in Netscape 6.
LISTING 5.4 Continued
09 0672324091 ch05 6/13/02 10:39 AM Page 91
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
[...]... can think of these boxes as containers that hold other boxes or that hold text values Each box in the CSS box model is held within by another box, except for the box corresponding to the root node in our tree The outer box is called the containing box A block-containing box can hold other block boxes or inline boxes; an inline-containing box can hold only inline boxes In Figure 6.3, you can see the tree... display: block Grade and inline Notes A- A few quirks; see Hour 11, “Styling Links” Basic margins A Basic borders A Basic padding A The CSS Box Model 113 Everything described in this hour should be reasonably safe to use; specific quirks for margin, border, and padding are described in Hour 13 Q&A Q What kind of element is a table cell? Is that block or inline? A It’s neither inline nor block The display... { margin: 1em; } Margins are always transparent, meaning that whatever background color is set on the containing box will shine through There’s one more thing you need to know about margins, and that’s collapsing margins The vertical margins—those above and below the element—do something called collapsing, which means that only the largest value of the margins between two elements is used Margins will... The margin, border, padding, and content of a box 6 margin border padding this is the content padding border margin 110 Hour 6 You’ll learn more about the margin, border, and padding properties in Hour 13, “Borders and Boxes”; this hour is a general introduction to the box model, and we’ll get into more detail about other property values later in the book The margin Property The margin is an invisible... constrained in some way (by other The CSS Box Model 105 block elements, by CSS properties, or by HTML markup), they’ll stretch across the whole page One thing you’ll notice when you start using CSS is that your headers ( and friends) go all the way across! Set the background-color property on an and you’ll see how big it really is Inline An inline element doesn’t begin and end lines; instead,... is contained within the flow of the text Examples of inline tags include , , , , , and Inline elements flow one after another in a line, with no line breaks, horizontally across the page until the end of the available space is used up; then they just continue where they left off on the next line down The display Property You can change the type of an element by using the... need to Certain CSS properties can be set only on block or inline elements; for example, the text-indent property (which you’ll learn about in Hour 12, “Alignment and Spacing”) applies only to block elements Block A block element is one that is intended to be displayed as a distinct block of content, starting and ending with a new line Besides the tag, other block elements in HTML include ,... style sheet and also has its own embedded CSS rules within a element in the Such a page is listed in Listing 7.2 LISTING 7.2 An HTML Page with Tips on Color Use Accessibility of Color Cascading and Inheritance 117 LISTING 7.2 Continued yahoo { background-color: silver; color:... borders (and margins and padding) around inline elements as well as block elements; this sets a thin black border around tags: i { border: 1px solid black; } The padding Property The space surrounding the content is the padding; this could be thought of as whitespace because there’s nothing in it (no content or border), but keep in mind that it doesn’t have to be white The padding is always the... and display Web pages • How to set margins, borders, and padding on a box Displaying Content in CSS The content of a Web page is the information encoded within the HTML page, found between the opening and closing tags of the HTML markup These tags define the structure of the content, a framework that gives meaning to the content For example, consider the following HTML: 104 Hour 6 This is the tricky . because
<a> is the only visible linking element in HTML. Here’s an example CSS rule using :link:
a:link { color: red; }
Visited links are those that the user. 5.4
Displaying various
selectors in Netscape 6.
LISTING 5.4 Continued
09 0672 3240 91 ch05 6/13/02 10:39 AM Page 91
Please purchase PDF Split-Merge on www.verypdf.com
Ngày đăng: 21/01/2014, 16:20
Xem thêm: Tài liệu Sams Teach Yourself CSS in 24 Hours- P3 pdf, Tài liệu Sams Teach Yourself CSS in 24 Hours- P3 pdf
