aboutsummaryrefslogtreecommitdiff
path: root/files/pt-br/web/css/text-decoration
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2020-12-08 14:42:52 -0500
committerPeter Bengtsson <mail@peterbe.com>2020-12-08 14:42:52 -0500
commit074785cea106179cb3305637055ab0a009ca74f2 (patch)
treee6ae371cccd642aa2b67f39752a2cdf1fd4eb040 /files/pt-br/web/css/text-decoration
parentda78a9e329e272dedb2400b79a3bdeebff387d47 (diff)
downloadtranslated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.gz
translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.bz2
translated-content-074785cea106179cb3305637055ab0a009ca74f2.zip
initial commit
Diffstat (limited to 'files/pt-br/web/css/text-decoration')
-rw-r--r--files/pt-br/web/css/text-decoration/index.html205
1 files changed, 205 insertions, 0 deletions
diff --git a/files/pt-br/web/css/text-decoration/index.html b/files/pt-br/web/css/text-decoration/index.html
new file mode 100644
index 0000000000..6c4aaa93ad
--- /dev/null
+++ b/files/pt-br/web/css/text-decoration/index.html
@@ -0,0 +1,205 @@
+---
+title: text-decoration
+slug: Web/CSS/text-decoration
+tags:
+ - CSS
+ - PrecisaDeCompatibilidade
+ - Propriedade CSS
+ - Referencia
+ - Texto CSS
+translation_of: Web/CSS/text-decoration
+---
+<p>{{CSSRef}}</p>
+
+<h2 id="Resumo">Resumo</h2>
+
+<p>A propriedade <strong><code>text-decoration</code></strong> do CSS é usada para definir a formatação de  <code>underline</code>, <code>overline</code>, <code>line-through</code> ou <code>blink</code>. As decorações underline e overline são posicionadas abaixo e acima do texto (respectivamente), e line-through cortando-o.</p>
+
+<p>A propriedade text-decoration desenha em elementos descendentes. Isso significa que não é possivel desabilitar em um descendente uma decoração que foi especificada em um de seus antecessores. Por exemplo, no markup <code>&lt;p&gt;Esse texto tem &lt;em&gt;alguns elementos enfatizados&lt;/em&gt; nele.&lt;/p&gt;</code>, a regra de estilo <code>p { text-decoration: underline; }</code> faria com que todo o parágrafo fosse sublinhado. A regra <code>em { text-decoration: none; }</code> não causaria qualquer mudanca; o parágrafo inteiro ainda estaria sublinhado. Entretanto, a regra <code>em { text-decoration: overline; }</code> iria decorar o trecho "alguns elementos enfatizados".</p>
+
+<div class="note style-wrap">
+<p><strong>Nota: </strong>CSS 3 transformou a propriedade Text-Decoration para forma reduzida, usando as seguintes propriedades: {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, e {{cssxref("text-decoration-style")}}. Como em outras propriedades reduzidas, isso significa que ele reseta o valor de cada uma para padrão se não for explicitamente especificada na forma reduzida.</p>
+</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="brush: css">/* Valores Chave */
+text-decoration: none; /* Sem decoração */
+text-decoration: underline red; /* Sublinhado vermelho */
+text-decoration: underline wavy red; /* Sublinhado ondulado vermelho */
+
+/* Valores Globais */
+text-decoration: inherit;
+text-decoration: initial;
+text-decoration: unset;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<p>A propriedade <code>text-decoration</code> é escrita de forma reduzida e pode usar os valores de cada uma das propriedades: {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-color")}}, e {{cssxref("text-decoration-style")}}</p>
+
+<h3 id="Sintaxe_Formal">Sintaxe Formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<pre class="brush: css">h1.under {
+ text-decoration: underline;
+}
+h1.over {
+ text-decoration: overline;
+}
+p.line {
+ text-decoration: line-through;
+}
+p.blink {
+ text-decoration: blink;
+}
+a.none {
+ text-decoration: none;
+}
+p.underover {
+ text-decoration: underline overline;
+}
+</pre>
+
+<pre class="brush: html" style="display: none;">&lt;h1 class="under"&gt;Underlined Header&lt;/h1&gt;
+&lt;p class="line"&gt;If you want to strike out text, use line-through.&lt;/p&gt;
+&lt;p class="blink"&gt;This text might blink for you - if you use Explorer, it will not.&lt;/p&gt;
+&lt;h1 class="over"&gt;and now an overlined header.&lt;/h1&gt;
+&lt;p&gt;This &lt;a class="none" href="textdecoration.html"&gt;link will not be underlined&lt;/a&gt;, as most links are by default. Be careful with removing the text decoration on links since most users depend on the underline to signify a hyperlink.&lt;/p&gt;
+&lt;p class="underover"&gt;This text has both underline and overline.&lt;/p&gt;
+</pre>
+
+<p>{{EmbedLiveSample('Examples','100%','310')}}</p>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+ <tr>
+ <th scope="col">Especificação</th>
+ <th scope="col">Status</th>
+ <th scope="col">Comentários</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>{{SpecName('CSS3 Text Decoration', '#text-decoration-property', 'text-decoration')}}</td>
+ <td>{{Spec2('CSS3 Text Decoration')}}</td>
+ <td>Transformado em uma propriedade reduzida. Adicionado suporte para o valor {{cssxref('text-decoration-style')}}.</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('CSS2.1', 'text.html#lining-striking-props', 'text-decoration')}}</td>
+ <td>{{Spec2('CSS2.1')}}</td>
+ <td>Sem mudanças significantes.</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('CSS1', '#text-decoration', 'text-decoration')}}</td>
+ <td>{{Spec2('CSS1')}}</td>
+ <td>Definição inicial.</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_Browser">Compatibilidade de Browser</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+ <tr>
+ <th>Feature</th>
+ <th>Firefox (Gecko)</th>
+ <th>Chrome</th>
+ <th>Internet Explorer</th>
+ <th>Opera</th>
+ <th>Safari</th>
+ </tr>
+ <tr>
+ <td>Suporte básico</td>
+ <td>{{CompatGeckoDesktop("1.0")}}</td>
+ <td>1.0</td>
+ <td>3.0</td>
+ <td>3.5</td>
+ <td>1.0</td>
+ </tr>
+ <tr>
+ <td><font face="Consolas, Liberation Mono, Courier, monospace">Valor blink</font></td>
+ <td>{{CompatGeckoDesktop("1.0")}}<br>
+ {{CompatGeckoDesktop("23.0")}}<sup>[1]</sup></td>
+ <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+ <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+ <td>4.0<br>
+ 15.0<sup>[1]</sup></td>
+ <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+ </tr>
+ <tr>
+ <td>Propriedade reduzida</td>
+ <td>{{CompatGeckoDesktop("6.0")}}<sup>[3]</sup><br>
+ {{CompatGeckoDesktop("36.0")}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>7.1<sup>[2]</sup></td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+ <tr>
+ <th>Feature</th>
+ <th>Firefox Mobile (Gecko)</th>
+ <th>Android</th>
+ <th>IE Phone</th>
+ <th>Opera Mobile</th>
+ <th>Safari Mobile</th>
+ </tr>
+ <tr>
+ <td>Suporte básico</td>
+ <td>{{CompatGeckoMobile("1.0")}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ </tr>
+ <tr>
+ <td><font face="Consolas, Liberation Mono, Courier, monospace">Valor blink</font></td>
+ <td>{{CompatGeckoDesktop("1.0")}}<br>
+ {{CompatGeckoDesktop("23.0")}}<sup>[1]</sup></td>
+ <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+ <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+ <td>4.0<sup>[1]</sup></td>
+ <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+ </tr>
+ <tr>
+ <td>Propriedade reduzida</td>
+ <td>{{CompatGeckoMobile("6.0")}}<sup>[3]</sup><br>
+ {{CompatGeckoMobile("36.0")}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>8<sup>[1]</sup></td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] O valor <code>blink </code>não tem nenhum efeito.</p>
+
+<p>[2] Safari não suporta {{cssxref("text-decoration-style")}}.</p>
+
+<p>[3] Essa versão do Gecko tem implementação parcial.</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>O atributo {{cssxref("list-style")}} controla a aparência dos itens em listas {{HTMLElement("ol")}} e {{HTMLElement("ul")}} no HTML.</li>
+</ul>