diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
commit | 074785cea106179cb3305637055ab0a009ca74f2 (patch) | |
tree | e6ae371cccd642aa2b67f39752a2cdf1fd4eb040 /files/pt-br/web/css/text-decoration | |
parent | da78a9e329e272dedb2400b79a3bdeebff387d47 (diff) | |
download | translated-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.html | 205 |
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><p>Esse texto tem <em>alguns elementos enfatizados</em> nele.</p></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;"><h1 class="under">Underlined Header</h1> +<p class="line">If you want to strike out text, use line-through.</p> +<p class="blink">This text might blink for you - if you use Explorer, it will not.</p> +<h1 class="over">and now an overlined header.</h1> +<p>This <a class="none" href="textdecoration.html">link will not be underlined</a>, 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.</p> +<p class="underover">This text has both underline and overline.</p> +</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> |