1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
|
---
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><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>
|
