---
title: Szöveg díszítés
slug: Web/CSS/text-decoration
tags:
  - CSS tulajdonság
  - szöveg díszítés
translation_of: Web/CSS/text-decoration
original_slug: CSS/text-decoration
---
<div>{{CSSRef}}</div>

<p><span class="seoSummary">A szöveg díszítés (<strong><code>text-decoration)</code></strong> 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:</span> {{cssxref("text-decoration-line")}} (szöveg díszítő vonal), {{cssxref("text-decoration-color")}} (-szín), {{cssxref("text-decoration-style")}} (-stílus), és az újabb {{cssxref("text-decoration-thickness")}} (-vastagság).</p>

<div>{{EmbedInteractiveExample("pages/css/text-decoration.html")}}</div>



<p>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: <code>&lt;p&gt;Ez a szöveg néhány &lt;em&gt;hangsúlyos, kiemelt szót&lt;/em&gt; is tartalmaz.&lt;/p&gt;</code>, és ezt a stílus szabályt: <code>p { text-decoration: underline; }.</code> Ez esetben a teljes paragrafusra érvényes lenne az aláhúzás. Az <code>em { text-decoration: none; }</code> stílus szabály nem hozna változást, a teljes bekezdés megmaradna aláhúzottan. Azonban az  <code>em { text-decoration: overline; }</code> egy második szöveg díszítést is bevezetne, és egy felső vonal is megjelenne a kiemelt szavakon ("<code>hangsúlyos, kiemelt szót</code>" szavakon).</p>

<h2 id="A_szabályban_foglalt_tulajdonságok">A szabályban foglalt tulajdonságok</h2>

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

<ul>
 <li><code><a href="/en-US/docs/Web/CSS/text-decoration-color">text-decoration-color</a></code></li>
 <li><a href="/en-US/docs/Web/CSS/text-decoration-line"><code>text-decoration-line</code></a></li>
 <li><a href="/en-US/docs/Web/CSS/text-decoration-style"><code>text-decoration-style</code></a></li>
 <li><a href="/en-US/docs/Web/CSS/text-decoration-thickness"><code>text-decoration-thickness</code></a></li>
</ul>

<h2 id="Szintaxis">Szintaxis</h2>

<p id="Values">A <code>text-decoration</code> 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 <code>text-decoration </code>magába foglal.</p>

<h3 id="Értékek">Értékek</h3>

<dl>
 <dt>{{cssxref("text-decoration-line")}}</dt>
 <dd>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. (<code>underline, overline</code> vagy <code>line-through).</code></dd>
 <dt>{{cssxref("text-decoration-color")}}</dt>
 <dd>Beállítja a díszítő vonal színét.</dd>
 <dt>{{cssxref("text-decoration-style")}}</dt>
 <dd>Beállítja a díszítő vonal stílusát, például egyszerű vonal, hullámos, vagy szaggatott ( <code>solid</code>, <code>wavy</code>, or <code>dashed).</code></dd>
 <dt>{{cssxref("text-decoration-thickness")}}</dt>
 <dd>Beállítja a díszítő vonal vastagságát.</dd>
</dl>

<h2 id="Régebbi_meghatározás">Régebbi meghatározás</h2>

<p>{{CSSInfo}}</p>

<h2 id="Régebbi_szintaxis">Régebbi szintaxis</h2>

<pre class="syntaxbox notranslate">{{csssyntax}}</pre>

<h2 id="Példák">Példák</h2>

<h3 id="Szöveg_díszítés_bemutatása">Szöveg díszítés bemutatása</h3>

<pre class="brush: css notranslate">.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;
}
</pre>

<pre class="brush: html notranslate">&lt;p class="under"&gt;Ezen szöveg alatt látható egy vonal.&lt;/p&gt;
&lt;p class="over"&gt;Ezen szöveg fölött látható egy vonal.&lt;/p&gt;
&lt;p class="line"&gt;Ez a szöveg át van húzva.&lt;/p&gt;
&lt;p&gt;Ez a &lt;a class="plain" href="#"&gt;link nincs aláhúzva&lt;/a&gt;,
    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.&lt;/p&gt;
&lt;p class="underover"&gt;Ezen szöveg fölött &lt;em&gt;és&lt;/em&gt; alatt is van vonal.&lt;/p&gt;
&lt;p class="thick"&gt;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.&lt;/p&gt;
&lt;p class="blink"&gt;Ez a szöveg villog, ha olyan böngészőt
használsz, ami támogatja ezt a formázást.&lt;/p&gt;
</pre>

<p>{{EmbedLiveSample('Példák','auto','320')}}</p>

<h2 id="Specifikációk">Specifikációk</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specifikáció</th>
   <th scope="col">Státusz</th>
   <th scope="col">Komment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS4 Text Decoration')}}</td>
   <td>{{Spec2('CSS4 Text Decoration')}}</td>
   <td>A {{cssxref("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.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Text Decoration', '#text-decoration-property', 'text-decoration')}}</td>
   <td>{{Spec2('CSS3 Text Decoration')}}</td>
   <td>Átalakítva rövidített tulajdonsággá. A {{cssxref('text-decoration-style')}} érték támogatása hozzáadva.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'text.html#lining-striking-props', 'text-decoration')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Nincs szignifikáns változtatás.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1', '#text-decoration', 'text-decoration')}}</td>
   <td>{{Spec2('CSS1')}}</td>
   <td>Kezdeti definiálás.</td>
  </tr>
 </tbody>
</table>

<h2 id="Böngésző_kompatibilitás">Böngésző kompatibilitás</h2>



<p>{{Compat("css.properties.text-decoration")}}</p>

<h2 id="Lásd_még">Lásd még</h2>

<ul>
 <li>The individual text-decoration properties are {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-color")}}, and {{cssxref("text-decoration-style")}}.</li>
 <li>The {{cssxref("list-style")}} attribute controls the appearance of items in HTML {{HTMLElement("ol")}} and {{HTMLElement("ul")}} lists.</li>
</ul>