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).
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
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
(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
vagyline-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
, ordashed).
text-decoration-thickness
(en-US)- Beállítja a díszítő vonal vastagságát.
Régebbi meghatározás
Initial value (en-US) | as each of the properties of the shorthand:
|
---|---|
Applies to | all elements. It also applies to ::first-letter (en-US) and ::first-line (en-US). |
Inherited (en-US) | no |
Computed value (en-US) | as each of the properties of the shorthand:
|
Animation type | as each of the properties of the shorthand:
|
Régebbi szintaxis
<'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)
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 (en-US); 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 (en-US) é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
- The individual text-decoration properties are
text-decoration-line
(en-US),text-decoration-color
(en-US), andtext-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.