CHAPTER 10 ■ STYLING TEXT
Text Decoration
HTML
<h1>Text Decoration</h1><p>
<code>text-decoration:
<span class="t1">underline</span> <span class="t2">overline</span>
<span class="t3">line-through</span></code><br /><br /><code>border</code>:
<span class="t4">Under 4</span> <span class="t5">Under 5</span>
<span class="t6">Under 6</span> <span class="t7">Over 7</span>
<span class="t8">Over 8</span> <span class="t9">Over 9</span> <br /><br /><code>background</code>:
<span class="t10">Under 10</span> <span class="t11">Under 11</span>
<span class="t12">Under 12</span> <span class="t13">Over 13</span>
<span class="t14">Over 14</span> <span class="t15">Thru 15</span>
</p>CSS
.t1 { text-decoration:underline; } *.t2 { text-decoration:overline; }
.t3 { text-decoration:line-through; }.t4 { border-bottom:1px solid black; } *.t5 { border-bottom:1px dotted black; }
.t6 { border-bottom:2px dashed gray; } *.t7 { border-top:3px double red; }
.t8 { border-top:4px groove blue; } *.t9 { border-top:6px ridge green; }.t10 { background:repeat-x left bottom url("tight-dot.gif"); padding-bottom:0px; }
.t11 { background:repeat-x left bottom url("dotted.gif"); padding-bottom:0px; }
.t12 { background:repeat-x left bottom url("wavy-green.gif"); padding-bottom:2px; }
.t13 { background:repeat-x left top url("diamond-blue.gif"); padding-top:3px; }
.t14 { background:repeat-x left top url("gradient3.gif"); padding-top:2px; }
.t15 { background:repeat-x left center url("wavy-red3.gif"); padding:5px; }