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 (szöveg díszítő vonal), text-decoration-color (-szín), text-decoration-style (-stílus), és az újabb text-decoration-thickness (-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 szabályban foglalt tulajdonságok

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.

Szintaxis

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.

Értékek

text-decoration-line
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
Beállítja a díszítő vonal színét.
text-decoration-style
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
Beállítja a díszítő vonal vastagságát.

Régebbi meghatározás

Initial valueas each of the properties of the shorthand:
Applies toall elements. It also applies to ::first-letter and ::first-line.
Inheritedno
Computed valueas each of the properties of the shorthand:
Animation typeas each of the properties of the shorthand:

Régebbi szintaxis

<'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'> || <'text-decoration-thickness'>

Példák

Szöveg díszítés bemutatása

.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>

Specifikációk

Specifikáció Státusz Komment
CSS Text Decoration Module Level 4 Working Draft A text-decoration-thickness; tulajdonság hozzáadva. Megjegyzés: ez még hivatalosan nem része a rövidített stílus szabálynak - ez még nincs meghatározva.
CSS Text Decoration Module Level 3
The definition of 'text-decoration' in that specification.		 Candidate Recommendation Átalakítva rövidített tulajdonsággá. A text-decoration-style érték támogatása hozzáadva.
CSS Level 2 (Revision 1)
The definition of 'text-decoration' in that specification.		 Recommendation Nincs szignifikáns változtatás.
CSS Level 1
The definition of 'text-decoration' in that specification.		 Recommendation Kezdeti definiálás.

Böngésző kompatibilitás

BCD tables only load in the browser

Lásd még