Szöveg díszítés

A szöveg díszítés (text-decoration) rövidített CSS tulajdonság a szöveget díszítő vonalakat állítja be. Ez a tulajdonság egy rövidítés, amely az alábbi tulajdonságokat foglalja magába: text-decoration-line (en-US) (szöveg díszítő vonal), text-decoration-color (en-US) (-szín), text-decoration-style (en-US) (-stílus), és az újabb text-decoration-thickness (en-US) (-vastagság).

A szöveg díszítések leszármazott szövegelemekre is érvényesek lesznek. Ez annyit jelent, hogyha egy elemen specifikálunk valamilyen szöveg díszítést, akkor a leszármazott elem nem tudja majd eltávolítani ezt a díszítést. Vegyük például ezt a jelölő nyelvi elemet: <p>Ez a szöveg néhány <em>hangsúlyos, kiemelt szót</em> is tartalmaz.</p>, és ezt a stílus szabályt: p { text-decoration: underline; }. Ez esetben a teljes paragrafusra érvényes lenne az aláhúzás. Az em { text-decoration: none; } stílus szabály nem hozna változást, a teljes bekezdés megmaradna aláhúzottan. Azonban az  em { text-decoration: overline; } egy második szöveg díszítést is bevezetne, és egy felső vonal is megjelenne a kiemelt szavakon ("hangsúlyos, kiemelt szót" szavakon).

A text-decoration tulajdonság egy rövidítés, mely magába foglalja az alábbi CSS tulajdonságokat: szín, vonal, stílus, vastagság.

• text-decoration-color
• text-decoration-line
• text-decoration-style
• text-decoration-thickness

A text-decoration tulajdonságot egy vagy több érték megadásával is létrehozhatjuk, melyeket szóközzel kell elválasztanunk. Ezek az értékek fogják képviselni a fentebb is említett tulajdonságokat, melyeket a text-decoration magába foglal.

text-decoration-line (en-US)

Beállítja a díszítő vonal elhelyezését: a szöveg alá, fölé, vagy rá (áthúzás) is kerülhet. (underline, overline vagy line-through).

text-decoration-color (en-US)

Beállítja a díszítő vonal színét.

text-decoration-style (en-US)

Beállítja a díszítő vonal stílusát, például egyszerű vonal, hullámos, vagy szaggatott ( solid, wavy, or dashed).

text-decoration-thickness (en-US)

Beállítja a díszítő vonal vastagságát.

<'text-decoration-line'> (en-US) || (en-US) <'text-decoration-style'> (en-US) || (en-US) <'text-decoration-color'> (en-US) || (en-US) <'text-decoration-thickness'> (en-US)

.under {
  text-decoration: underline red;
}

.over {
  text-decoration: wavy overline lime;
}

.line {
  text-decoration: line-through;
}

.plain {
  text-decoration: none;
}

.underover {
  text-decoration: dashed underline overline;
}

.thick {
  text-decoration: solid underline purple 4px;
}

.blink {
  text-decoration: blink;
}

<p class="under">Ezen szöveg alatt látható egy vonal.</p>
<p class="over">Ezen szöveg fölött látható egy vonal.</p>
<p class="line">Ez a szöveg át van húzva.</p>
<p>Ez a <a class="plain" href="#">link nincs aláhúzva</a>,
    mint ahogyan a linkeknél alapvetően látni szoktuk.
Óvatosan használjuk ezt a formázást a linkeken, hiszen a
felhasználók sokszor erre az alap formázásra támaszkodnak,
ha linkeket keresnek a szövegben.</p>
<p class="underover">Ezen szöveg fölött <em>és</em> alatt is van vonal.</p>
<p class="thick">Ezen szöveg alatt látható egy vastag lila
aláhúzás azon böngészőkben, melyek támogatják ezt a formázást.</p>
<p class="blink">Ez a szöveg villog, ha olyan böngészőt
használsz, ami támogatja ezt a formázást.</p>

• The individual text-decoration properties are text-decoration-line (en-US), text-decoration-color (en-US), and text-decoration-style (en-US).
• The list-style (en-US) attribute controls the appearance of items in HTML <ol> (en-US) and <ul> (en-US) lists.