The Text-Decoration Property


The text-decoration property does not specify a font property, although it seems to fit best in this chapter because it affects type. The property is used to add underlining, overlining, strike-out, or a blinking effect to the text.

Name:

text-decoration

Value:

none | [underline | | overline | | line-through | | blink]

Initial:

none

Applies to:

all elements

Inherited:

no (but see the following text)

Percentages:

N/A


The value is either none, meaning no decoration, or any combination of the following:

  • underline An underline is added below the text.

  • overline An overline is added above the text.

  • line-through A horizontal line is inserted through the text (also known as strike-out).

  • blink The text is made to blink.

In many browsers, underlining is used with the A element to mark the status of hyperlinks. The default style sheet for those browsers includes a rule like this:

A:link, A:visited, A:active { text-decoration: underline }

You cannot specify the exact position and thickness of the decorations. Many fonts come with indications of the preferred thicknesses of an overline, underline, and line-through and their distances from the base-line, and the browser tries to use those thickness and distance values. Otherwise, it computes appropriate values based on the size of the font. The color of the lines will be the same as the color of the text.

You have a similar lack of precise control over the blink decoration. The blinking text is shown in its own colors about half of the time; how it looks the other half is not specified. It may be invisible or it may be shown in a different color so that the two colors show alternately. Most browsers blink at a rate of approximately half a second on and half a second off. Not all browsers can blink, and, of course, blink has no effect when the document is printed.

The text-decoration property is not inherited. However, a decoration on a parent will continue in child elements. The effect of this continuation differs from the effect that would result if we were to give the child element its own decoration. For example, suppose you added this rule to your style sheet:

EM { text-decoration: underline }

In the following, the underline decoration affects all the EM element, even the child element, STRONG:

 Some <EM>very, <STRONG>very</STRONG> important things</EM> resulted from this effort.

The result would look like this:

Some very, very important things resulted from this effort.

The color of the decoration (if any) also continues across child elements. Thus, even if STRONG had a different color value, its underline would still have been black.

The reason text-decoration is not inherited has to do with possible future additions to this property. For example, suppose the decoration were a fancy border (see Figure 5.16). The EM rule in the style sheet would change from text-decoration: underline to, say, text-decoration: deco-border (note, this value is not yet available in CSS). The child element is included as part of the decoration of its parent. Figure 5.16(b) shows the effect if the child element were to inherit the fancy box value of its parent. The child would have a fancy border of its own in addition to that of its parent.

Figure 5.16. (a) The decoration continues across the embedded element; (b) the embedded element has its own decoration.




Cascading Style Sheets(c) Designing for the Web
Cascading Style Sheets: Designing for the Web (3rd Edition)
ISBN: 0321193121
EAN: 2147483647
Year: 2003
Pages: 215

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