HTML cơ bản - p 15 pdf

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 buttons, and text elds. e preceding CSS statement provides a light yellow background 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 elements 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 selection 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> <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 From the Library of Wow! eBook ptg 126 Chapter 3: Elements of Style <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. ese include the following: :root e root of the document :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 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 common 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 version 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 characters 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 . 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 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. 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