| Using the text-decoration property (Table 4.11), you can adorn the text in one of four ways: underline, overline, line-through, or blink. Used to add emphasis, these decorations attract the reader's eye to important areas or passages on your Web page. Table 4.11. Text-Decoration ValuesVALUE | COMPATIBILITY |
|---|
none | IE3, FF1, S1, O3.5, CSS1 | underline | IE3, FF1, S1, O3.5, CSS1 | overline | IE4, FF1, S1, O3.5, CSS1 | line-through | IE3, FF1, S1, O3.5, CSS1 | blink[*] | IE4, FF1 S1, O4, CSS1 |
[*] Although initially supported, many browsers have dropped support or allow blinking to be turned off.
This example (Figure 4.12) is a mish-mash of decorations, but it allows you to see what happens when you go crazy with all the possibilities. Figure 4.12. There are a variety of ways to decorate your text, but the most useful is underlining. 
To define text decorations: | | 1. | text-decoration:
Type the text-decoration property name, followed by a colon (:), in the CSS definition list (see Code 4.10 on the next page).
Code 4.10. You can add multiple text decoration styles to the same text at once by combining decorations inherited from parent to child.| [View full width] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/  xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>CSS, DHTML & Ajax | Decorating Text</title> <style type="text/css"> <!-- body { font-size: 1.2em; font-family: Georgia, "Times New Roman", times, serif; text-decoration: none; } h1 { text-decoration: overline underline; } h2 { text-decoration:underline; } p { text-decoration: underline; } p em { text-decoration: line-through; } .chapterTitle { text-decoration: none; } p.author { text-decoration: none; } --> </style> </head> <body> <div > <h1>Alice's Adventures in Wonderland</h1> <p >Lewis Carroll</p> <h2>CHAPTER VIII<br /> <span >The Queen's Croquet-Ground</span></h2> </div> <p>A large rose-tree stood near the entrance of the garden: the roses growing on it were white, but there were three gardeners at it, busily painting them red. <em>Alice thought this a very curious thing,</em> and she went nearer to watch them, and just as she came up to them she heard one of them say, 'Look out now, Five! Don't go splashing paint over me like that!'</p> </body> </html>
|
| 2. | overline
Type a value for the text-decoration property. Choose one of the following:
underline, which places a line below the text overline, which places a line above the text line-through, which places a line through the middle of the text (also called strikethrough) blink, which causes the text to blink on and off none, which overrides decorations set elsewhere
| 3. | underline;
You can also type a space and another text-decoration value (Table 4.11). As long as the first value is not none, you can use multiple text decorations by adding more values in a list separated by spaces, as follows:
overline underline blink
|
 Tips
Notice in the example that although the chapterTitle class has its text decoration set to none, it is still underlined. Text decorations are applied across an entire text block element, rather than on a letter-by-letter basis. This means that a child element cannot override the text decoration set by its parent, unless the style is set to none. Although a child element can not override its parent's text decoration, child elements can have additional text decoration added to them. Notice in the example that the emphasis tag uses strikethrough, which is added to the underlining already supplied by the paragraph tag. Many visitors don't like blinking text, especially on Web pages where they spend a lot of time. In fact, many browsers allow the user to disable blinking or simply ignore it. Use this decoration sparingly. Striking through text is useful for text that you want to show as being deleted. For example, I've used strikethrough in online catalogs that include sale prices. I show the original price in strikethrough, with the sale price next to it. Underlining is often associated with hypertext links. See the sidebar "Underlining Links" for a better way to deal with link styles.
Underlining Links? Setting text-decoration: none; in the <a> tag overrides the underline in hypertext links, even if the visitor's browser is set to underline links. In my experience, many visitors look for underlining to identify links. Although I don't like underlining for linksit clutters the page, and CSS offers many alternatives to identify linksI receive angry e-mails from visitors when I turn off underlining. One alternative to using the text-decoration property for underlining is to use the border-bottom property with the link tag to provide faux-underlining. This gives you much better control over how the underline is presented, even allowing you to use different colors. For more detail, see "Styling Navigation and Links" in Chapter 21. |
|
