diff options
Diffstat (limited to 'files/hu/web/css/text-decoration/index.html')
| -rw-r--r-- | files/hu/web/css/text-decoration/index.html | 150 |
1 files changed, 150 insertions, 0 deletions
diff --git a/files/hu/web/css/text-decoration/index.html b/files/hu/web/css/text-decoration/index.html new file mode 100644 index 0000000000..22de3ad153 --- /dev/null +++ b/files/hu/web/css/text-decoration/index.html @@ -0,0 +1,150 @@ +--- +title: Szöveg díszítés +slug: CSS/text-decoration +tags: + - CSS tulajdonság + - szöveg díszítés +translation_of: Web/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><p>Ez a szöveg néhány <em>hangsúlyos, kiemelt szót</em> is tartalmaz.</p></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"><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> +</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> |