Section 18.6. Text Decoration


18.6. Text Decoration

Use the text-decoration element to specify underlines , overlines (a line over the text), strike-throughs , and the blinking effect .

text-decoration

Values:

     none | underline | overline | line-through | blink 

Initial value:

     none 

Applies to:

All elements

Inherited:

No, but a text decoration is "drawn through" any child elements (see explanation in this section).

The values for text-decoration are fairly intuitive: underline causes an element to be underlined, overline draws a line over the element, and line-through draws a line through the middle of the element and replaces the deprecated strike and s elements in HTML. text-decoration variations are shown in Figure 18-10.

Figure 18-10. The text-decoration property


There is also an optional blink value that causes the text to flash on and off like the dreaded Netscape blink element (the blink value is deliberately still not supported by Internet Explorer).

The text-decoration property has one strange behavior you should be aware of. Although text-decoration values applied to a block element are not inherited by the block's child elements, the line gets drawn through the child elements anyway. The line (such as an underline, overline, or line-through) will go through the inline elements even if they explicitly have text-decoration set to none, as shown in this example and the bottom of Figure 18-10.

     <p style="text-decoration: underline">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <strong style="text-decoration: none">This strong element is not underlined.</strong> Pellentesque pharetra, urna in laoreet tincidunt, nunc quam eleifend libero, a tincidunt purus augue eu felis. Phasellus quis ante. Sed mi. </p> 

There is currently no way to turn decoration off for child elements. The solution is to apply the style to spans in the desired parts of the text instead of the block element itself.

The most popular use of the text-decoration property is to turn off the underlines that automatically appear under links by setting text-decoration to none, as shown here:

     a:link, a:visited { text-decoration: none; } 

This should be done with some care, however, as the underline is a strong visual cue that text is clickable. Removing the underline may cause the link to be missed. If you turn the underline off, be sure that other cues such as color or weight contrast compensate.

Similarly, because underlines have become so associated with hypertext , adding an underline to text that is not a link may be misleading and even frustrating. In the days of typewriters, underlines were used in place of italic text. Consider whether italics may be an acceptable alternative to underlines.




Web Design in a Nutshell
Web Design in a Nutshell: A Desktop Quick Reference (In a Nutshell (OReilly))
ISBN: 0596009879
EAN: 2147483647
Year: 2006
Pages: 325

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net