Szöveg díszítés

Ez a fordítás hiányos. Segítsen a cikk angolról történő lefordításában

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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
text-decorationChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 3Opera Full support 3.5Safari Full support 1WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0
blink
Deprecated
Chrome No support NoEdge No support NoFirefox No support 1 — 23IE No support NoOpera No support 4 — 15Safari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support 4 — 23Opera Android No support 10.1 — 14Safari iOS No support NoSamsung Internet Android No support No
ShorthandChrome Full support 57Edge Full support 79Firefox Full support 36
Full support 36
Partial support 6
IE No support NoOpera Full support 44Safari Full support 8
Prefixed
Full support 8
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
WebView Android Full support 57Chrome Android Full support 57Firefox Android Full support 36
Full support 36
Partial support 6
Opera Android Full support 43Safari iOS Full support 8
Prefixed
Full support 8
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Samsung Internet Android Full support 7.0
text-decoration-thickness included in shorthand
ExperimentalNon-standard
Chrome No support NoEdge No support NoFirefox Full support 70IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

Lásd még