HTML cơ bản - p 15 pdf

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (809.55 KB, 10 trang )

ptg
124 Chapter 3: Elements of Style
input[type="text"] { background-color: #ffff99; }
input elements exist within interactive forms (see Chapter 2, “e HTML
Language”) and come in a variety of types, including checkboxes, radio but-
tons, and text elds. e preceding CSS statement provides a light yellow back-
ground color to input text elds like this:
<input type="text" size="32"/>
Pseudo-Classes and Pseudo-Elements
Pseudo-classes extend the capability of CSS statements to select HTML ele-
ments based on certain states or circumstances. Pseudo- elements allow for the
selection of specic parts of a document element, such as its rst line of text.
e pseudo-class or pseudo-element name is appended to the rest of the selec-
tion expression, separated by a colon (:).
e most common use of pseudo-classes is to detect and style the various
states of links created by anchor elements. For example, the following four CSS
statements set the colors of hyperlinked text, depending on whether the link is
in its normal state, whether the mouse is hovering over the link, whether the
link is active (hover and hold down the mouse button), and whether the link is
in the visited state:
a:link { color: blue; }
a:hover { color: green; }
a:active { color: red; }
a:visited { color: purple; }
Because these four link states are mutually exclusive and represent all the pos-
sible states of a hypertext link, it is usually not necessary to specify the link
state. In other words, the rst statement just shown could be written as a
{ color: blue; } with the same result. e link pseudo-class is included to
enable authors to overwrite previously set CSS rules for the same element.
Modern browsers permit all elements to have the hover state, not just links
created by the anchor element.

3
In theory, other elements can have link, active,
and visited states. But this is not dened in CSS, and browser manufacturers
might or might not implement such features.
3. Currently, Internet Explorer version 6 is the only browser with signicant market share that recognizes
the hover state only with anchor elements.
From the Library of Wow! eBook
ptg
Pseudo-Classes and Pseudo-Elements 125
e focus pseudo-class is used in a similar way to select elements when they
have focus. Typically, this applies to input and other form elements when the
user’s cursor is positioned in the element and text can be entered from the
keyboard into the element. e following CSS statement gives a light-yellow
background only to the text input element that currently has the keyboard’s
focus. is is a nice user interface feature, especially when you present the user
with a long form that has many
input elements:
input[type="text"]:focus { background-color: #ffff99; }
Other elements can have keyboard focus. Anchor elements, for example,
can have focus if the browser permits the user to press the Tab key to move
sequentially through page links.
e
first-child pseudo-class selects an element if it is the rst child of its
parent element. Example 3.2 illustrates this feature using a simple horizontal
list of links. Figure 3.2 shows how this HTML appears in a browser.
Example 3.2: The first-child pseudo-class
<!DOCTYPE html>
<html>
<head>
<title>Example 3.2</title>

:nth-last-child(n) An element that is the nth child of its parent,
counting from the last one
:nth-of-type(n) An element that is the nth sibling of its type
:nth-last-of-type(n) An element that is the nth sibling of its type,
counting from the last one
:first-child An element that is the rst child of its parent
:last-child An element that is the last child of its parent
:first-of-type An element that is the rst sibling of its type
:last-of-type An element that is the last sibling of its type
Example 3.2: The first-child pseudo-class (continued)
From the Library of Wow! eBook
ptg
Pseudo-Classes and Pseudo-Elements 127
:only-child An element that is the only child of its parent
:only-of-type An element that is the only sibling of its type
:empty An element that has no children or text
Pseudo-elements are similar to pseudo-classes but select a portion of the
element’s content instead of the entire element. e first-line and first-
letter pseudo-elements are the most commonly used. Example 3.3 shows how
to create a “drop cap” letter using the first-letter pseudo-element applied to
a first-child pseudo-class. Only the rst character of the rst paragraph in
each division is enlarged to 300 percent of its normal size. Figure 3.3 shows
how a browser displays this code.
Example 3.3: Using the first-letter pseudo-element to create a
“drop cap” letter
<!DOCTYPE html>
<html>
<head>
<title>Example 3.3</title>
<style type="text/css">

body { padding: 0 36px; font-family: cursive; }
h3 { text-align: center; }
div p:first-child:first-letter { font-size: 300%; color: #999; }
</style>
</head>
<body>
<h3>The Raven</h3>
<div>
Once upon a midnight dreary, while I pondered, weak and weary,
Over many quaint and curious volume of forgotten lore—
While I nodded, nearly napping, suddenly there came a tapping, As
of some one gently rapping, rapping at my chamber door.
</div>
</body>
</html>
From the Library of Wow! eBook
ptg
128 Chapter 3: Elements of Style
Figure 3.3: Styling an initial “drop cap”
e before and after pseudo-elements select the points just before and
aer, respectively, the element, allowing the author to insert content at those
points. Here are two examples:
p.joke:after { content: url(/icons/smiley.gif); }
a[href]:before { content: "[LINK] "; }
e rst CSS statement inserts a smiley-face icon (if the image le exists at the
URL provided) aer any paragraph that has a class attribute with the value
joke. e second statement inserts the text [LINK] before any anchor element
that has an href attribute. It should be emphasized that using the before and
after pseudo-elements is not an acceptable means of inserting meaningful
content into a page. e content will not be visible to robots or other user

agents that ignore CSS.
Now that you understand how to select HTML elements in CSS, it is time
to look at the various element properties that can be set in CSS statements.
Typography—the specication of font families, styles, weight, size, and color—
is the foremost class of these properties.
Typography
e font family or typeface sets the document’s tone. CSS lets you set both
specic fonts and generic font families. Although there are now mechanisms
for embedding fonts in a document, by and large, most web pages depend
on the fonts resident in the reader’s device used to display the page. e web
author may write a CSS rule calling for a specic font, such as Copperplate or
Futura, but if the reader does not have those specic fonts in his device, the
browser substitutes a dierent font.
From the Library of Wow! eBook
ptg
Typography 129
Note: Font files that reside on a web server and are made available for
downloading to be used in a web page are called webfonts. All modern
browsers support the use of webfonts to some extent, but there is no com-
mon accepted standard for the file formats.
In the late 1990s, Microso released a set of core fonts for the Web and
made it available as a free download for both Windows and Macintosh com-
puters. Microso later ended the free download policy but continued to ship
the core fonts with its operating systems and Oce products. Over time, this
collection of “safe web fonts” has been expanded and today includes Helvetica,
Arial, Arial Black, Times, Times New Roman, Courier, Courier New, Palatino,
Garamond, Bookman Old Style, Avant Garde, Verdana, Georgia, Comic Sans
MS, Trebuchet MS, Impact, Tahoma, and others.
Helvetica is a general-purpose sans serif font with a wide range of appli-
cations. It is one of the most commonly used fonts. Along with Times and

Courier, it was a native font on PostScript printers. Arial is an updated ver-
sion of Helvetica that has been optimized for both screen and print. Times
is a serif font designed for newspaper text. Times New Roman is an updated
and optimized version of Times that is better for screen reading. Courier and
its updated cousin, Courier New, are monospace fonts that provide the feel of
typewritten text. Verdana is a sans serif font with wide lowercase letters, mak-
ing it suitable for headlines but generally not for body text. Tahoma is about
halfway between Verdana and Arial. Comic Sans MS has an informal, hand-
drawn feel. Impact and Arial Black are dramatic fonts well suited for titles and
headings.
e following font properties can be specied in a CSS statement:
font-
family, font-style, font-size, font-weight, and font-variant. Here are some
examples in which I’ve highlighted the properties and values:
p { font-family: Arial, Helvetica, sans-serif; }
h3 { font-style: italic; }
ul { font-size: 1.2em; }
p.alert { font-weight: bold; }
h4 { font-variant: small-caps; }
e font-family property takes a comma-delimited string of names. e
rst name is the preferred font to be used, and the remaining names are suc-
cessive fallbacks in case a font is not resident on the reader’s device. Authors
From the Library of Wow! eBook
ptg
130 Chapter 3: Elements of Style
are encouraged to place a generic font family name as the last fallback choice.
Most browsers recognize the generic font family names listed in Table 3.1.
Table 3.1: Font families recognized by most browsers
Family Name Properties Examples
sans-serif Proportional, without

serifs
Helvetica, Arial, Geneva,
Verdana, Tahoma
serif Proportional, with serifs Times, Times New Roman,
Georgia, Bookman Old Style
monospace Fixed-width; code or
typewriter style
Courier, Courier New,
Monaco, Andale Mono
cursive Curved strokes;
handwriting style
Comic Sans MS, Lucida
Handwriting
fantasy Anything unusual Papyrus, Klingon
To test your browser’s styling of these generic font families, copy the code
shown in Example 3.4 into the body of an HTML le or anywhere else you can
enter HTML code to create a page you can display. Figure 3.4 shows how this
code rendered in my browser.
Example 3.4: HTML code for displaying generic font families

sans-serif —
abcdefghijklmnopqrstuvwxyz 
serif —
abcdefghijklmnopqrstuvwxyz 
monospace —
abcdefghijklmnopqrstuvwxyz 
cursive —
abcdefghijklmnopqrstuvwxyz 
fantasy —
abcdefghijklmnopqrstuvwxyz

From the Library of Wow! eBook
ptg
Typography 131
Figure 3.4: Generic font families displayed
FONT ST YLE
e font-style property can have any one of four values: normal, italic,
oblique, or inherit. e normal style is a font with vertical strokes. Inherit
means to adopt the font-style property of the parent element. Italic style is
slanted in the forward direction of the text. Oblique is also slanted, but simply.
at is, an oblique style is achieved by slanting the normal style, whereas an
italic style may be a separate font resource with dierent serifs on the charac-
ters or altered punctuation symbols. In the vast majority of cases this won’t
make a dierence and should not be relied on as an element of design. Here
are a couple examples:
address { font-style: italic; }
h4 cite { font-style: normal; }
FONT WEIGHT
e font-weight property can have the values normal, bold, and inherit. It
can also have the relative values bolder and lighter. Or it can take one of the
following “hundred” weights: 100, 200, 300, 400, 500, 600, 700, 800, or 900. 100
is the lightest, and 900 is the boldest. ere is no guarantee that a browser will
render text with a font weight of 700 any dierently than text with a weight
of 600, because this can depend on other font properties, such as font-family,
font-size, and font-style. Here are a couple examples:
From the Library of Wow! eBook
ptg
132 Chapter 3: Elements of Style
p.intro em { font-weight: bold; }
li:first { font-weight: 900; } /* the bolder the better */

FONT VARIANT
e font-variant property is basically for dening small-caps text. Here are a
couple examples:
h3.post-title { font-variant: small-caps; }
#outline dt { font-variant: normal; }
FONT SIZE
e font-size property provides a wide range of values to specify how big the
characters should appear. It can be given in pixels or as a named, relative, or
absolute size value. e named sizes are like clothing sizes:
xx-small
x-small
small
medium
large
x-large
xx-large
Relative values include the keywords smaller and larger; length values using
the em, ex, and px units; and percentages. e absolute size values are lengths of
inches (in), centimeters (cm), millimeters (mm), points (pt), or picas (pc).
e medium value should be about 16 pixels, although that may vary among
browsers, especially browsers on mobile devices. Example 3.5 displays a num-
ber of dierent font sizes using the :before pseudo-element to self-describe
each span element. is trick will not work with older versions of Internet
Explorer. Figure 3.5 shows how this code displays in my Firefox browser.
Example 3.5: HTML source code for displaying font size values
<!DOCTYPE html>
<html>
<head>
<title>Example 3.5</title>
<style type="text/css">

From the Library of Wow! eBook
ptg
Typography 133
body { padding: 24px; }
span:before { content: attr(style); }
</style>
</head>
<body>


 
 
 
 
 
 



 
 
 


</body>
</html>
Figure 3.5: font-size values displayed
From the Library of Wow! eBook

HTML cơ bản - p 15 pdf

Tài liệu liên quan

Tài liệu bạn tìm kiếm đã sẵn sàng tải về