|
July 26, 1998
 |
 |
Putting Style Sheets in Perspective
text-decoration
|
- Initial Value:
- none
- Allowed Values:
- none
- underline
- overline
- line-through
- blink
- Applies to:
- all elements
- Inherited?:
- no
|
Let's try something a little fancier.
To add
Underline,
Overline,
Line-through
(Strike-out) or
Blink
use the text-decoration property.
none
The text-decoration value of "none" answers the popular question
of "How do I remove the line underneath my links?"
<STYLE TYPE="text/css">
<!--
A:link {text-decoration: none;}
-->
</STYLE>
|
The WDVL
|
This is cool because you can also add the hover property which will
cause your link to change color when the mouse passes over it.
(Note: Only in some browsers) Run your mouse over the
WDVL link above to see it change colors.
A:hover { color : #ff6600;
background : transparent;
}
|
underline
<STYLE TYPE="text/css">
<!--
B {text-decoration: underline; }
-->
</STYLE>
</HEAD>
<BODY>
<B>underlined text</B>
|
underlined text
|
<STYLE TYPE="text/css">
<!--
B {color: blue;
background: yellow;
text-decoration: underline;
}
EM {color: red;
background: transparent;
}
-->
</STYLE>
|
W3C
specifies that Line color is taken from the
font color of the element
that contained the text-decoration property when that element
contains a descendant element. This sounds as if even though
EM is specified as red text, the line color remains blue.
Obviously, this property is not fully supported by the browsers
as the line color is taking on the color of the descendant.
|
overline
I'm not quite sure why anyone would want a line over the
text, but apparently it was deemed necessary.
<STYLE TYPE="text/css">
<!--
I {text-decoration: overline;}
-->
</STYLE>
|
This is a sample of a line
over the text. |
| This property does not work in major
browsers, so if you don't see the overline, you're probably
using a browser that doesn't display it. |
line-through
The line-through property is handy if you want to make it appear
as if you have crossed out some text.
<STYLE TYPE="text/css">
<!--
SPAN {text-decoration: line-through;}
-->
</STYLE>
|
Some text with
a line
through it.
|
The position, color and thickness of the under, over and through
line can not be controlled. Some
fonts will specify the position and thickness of the line
themselves. In cases where the font doesn't indicate the position
and thickness of the line, the browsers will compute approximate
values based on the font size.
|
Not all browsers will support all of the text-decoration
properties. If you compare this page in the "two biggies",
you'll find that one of them displays overline, while the
other displays blink. |
blink
The Blink property should be used with extreme caution. I say this
because it is often used to excess by the novice. Blink has a
tendancy to be annoying, distracting the viewer and breaking
concentration.
<STYLE TYPE="text/css">
<!--
B {text-decoration: blink}
-->
</STYLE>
|
Blinking Text
|
Additional Resources:
Putting Style Sheets in Perspective: font
Putting Style Sheets in Perspective: Index
Putting Style Sheets in Perspective: text-transform
|
