HTML cơ bản - p 15 pdf

The first-child pseudo-class selects an element if it is the first child of its parent element.. These include the following: :nth-childn An element that is the nth child of its parent :

Trang 1

input[type="text"] { background-color: #ffff99; }

input elements exist within interactive forms (see Chapter 2, “The HTML Language”) and come in a variety of types, including checkboxes, radio

but-tons, and text fields The preceding CSS statement provides a light yellow

back-ground color to input text fields 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- eleele-ments allow for the

selection of specific parts of a document element, such as its first line of text

The pseudo-class or pseudo-element name is appended to the rest of the

selec-tion expression, separated by a colon (:)

The 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 first statement just shown could be written as a

{ color: blue; } with the same result The 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 defined in CSS, and browser manufacturers

might or might not implement such features

3 Currently, Internet Explorer version 6 is the only browser with significant market share that recognizes

the hover state only with anchor elements.

Trang 2

The 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 The following CSS statement gives a light-yellow

background only to the text input element that currently has the keyboard’s

focus This 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

The first-child pseudo-class selects an element if it is the first 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>

<style type="text/css">

body { font-family: sans-serif; }

a { text-decoration: none; } /* don't underline links */

li { float: left; /* horizontal list */

padding: 25em;

margin-right: 5px;

border: 2px black outset; /* shaded buttons */

list-style-type: none; }

li:first-child { background-color: black; }

li:first-child a { color: white; }

</style>

</head>

<body>

<ul>

continues

Trang 3

<li><a href="home.html">Home</a></li>

<li><a href="about.html">About</a></li>

<li><a href="contact.html">Contact Us</a></li>

</ul>

</body>

</html>

Figure 3.2: A horizontal menu styled with the first-child pseudo-class

CSS3 greatly expanded the list of pseudo-classes with additional structural classes that, like :first-child, permit the selection of any element based on its

relationships to other elements in the DOM These include the following:

:nth-child(n) An element that is the nth child of its parent

: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 first child of its parent :last-child An element that is the last child of its parent :first-of-type An element that is the first 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)

Trang 4

: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 The 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 first character of the first 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>

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>

Trang 5

Figure 3.3: Styling an initial “drop cap”

The before and after pseudo-elements select the points just before and after, 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] "; }

The first CSS statement inserts a smiley-face icon (if the image file exists at the

URL provided) after any paragraph that has a class attribute with the value

joke The 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 The 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 specification of font families, styles, weight, size, and color—

is the foremost class of these properties

Typography

The font family or typeface sets the document’s tone CSS lets you set both

specific 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 The web

author may write a CSS rule calling for a specific font, such as Copperplate or

Futura, but if the reader does not have those specific fonts in his device, the

browser substitutes a different font

Trang 6

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, Microsoft released a set of core fonts for the Web and

made it available as a free download for both Windows and Macintosh

com-puters Microsoft later ended the free download policy but continued to ship

the core fonts with its operating systems and Office 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

The following font properties can be specified 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; }

The font-family property takes a comma-delimited string of names The

first 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

Trang 7

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

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, LucidaHandwriting 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 file 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 —

monospace —

cursive —

fantasy —

abcdefghijklmnopqrstuvwxyz

Trang 8

Figure 3.4: Generic font families displayed

FoNT ST y LE

The font-style property can have any one of four values: normal, italic,

oblique, or inherit The 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

That is, an oblique style is achieved by slanting the normal style, whereas an

italic style may be a separate font resource with different serifs on the

charac-ters or altered punctuation symbols In the vast majority of cases this won’t

make a difference 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 W E iG HT

The 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 There is no guarantee that a browser will

render text with a font weight of 700 any differently 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:

Trang 9

p.intro em { font-weight: bold; }

li:first { font-weight: 900; } /* the bolder the better */

FoNT VA r iANT

The font-variant property is basically for defining small-caps text Here are a

couple examples:

h3.post-title { font-variant: small-caps; }

#outline dt { font-variant: normal; }

FoNT S i z E

The 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 The 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 The absolute size values are lengths of

inches (in), centimeters (cm), millimeters (mm), points (pt), or picas (pc)

The 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 different font sizes using the :before pseudo-element to self-describe

each span element This 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>

Trang 10

body { padding: 24px; }

span:before { content: attr(style); }

</style>

</head>

<body>

 

 

 

 

 

 

 

 

 

</body>

</html>

Figure 3.5: font-size values displayed

Định dạng
Số trang	10
Dung lượng	809,55 KB