Texto Sublinhado em CSS - text-decoration: underline
Continuando em nossos tutoriais sobre formatação de textos em CSS, vamos aprender como usar sublinhados nas fontes, que são aquelas linhas horizontais que ficam abaixo das letras, como por exemplo:"Este trecho do tutorial está sublinhado"
O uso mais comum de letras sublinhadas é nos links, onde geralmente são sublinhados com alguma cor (geralmente azul para links que ainda não foram visitados e tom de vermelho para assinalar links já visitados).
Para fazermos esse feito, usamos a propriedade text-decoration com o valor "underline", que significa sublinhado em inglês.
Assim, a sintaxe em CSS é:
text-decoration: underline;
Por exemplo, o seguinte código:
<p style="text-decoration: underline;">Tutorial completo de CSS - Curso HTML Progressivo</p>
Cria a seguinte frase sublinhada:
"Tutorial completo de CSS - Curso HTML Progressivo"
Você também pode usar direto na folha de estilos .css:
p { text-decoration: underline; }
Fonte sobrelinhada em CSS - text-decoration: overline
Caso não tenha percebido, o sub de sublinhado (ou under de underline) querem dizer embaixo, abaixo da fonte.
Porém, o que poucos sabem é que é possível mudar de posição essa linha que está embaixo do texto, colocando-a para cima, é o efeito de fonte sobrelinhado (linha acima), que em inglês é chamado de overline.
Assim, a sintaxe para textos sobrelinhados em CSS, que também se dá através da propriedade text-decoration, é:
text-decoration: overline;
Por exemplo, para produzir o seguinte efeito:
Como usar uma linha acima do texto/fonte em CSS
Usamos o seguinte código:
<p style="text-decoration: overline;">Como usar uma linha acima do texto/fonte em CSS</p>
Fonte Riscada em CSS - text-decoration: line-through
Já ensinamos como colocar a linha embaixo (sublinhado), em cima (sobrelinhado) e agora vamos ensinar como colocar ela no meio.Isso mesmo, é possível colocar a linha passando pelo meio da fonte, como se estivesse riscando ou cortando ela., e também através da propriedade text-decoration, que deve receber o valor "line-through", que significa "linha atravessante ou cortante", em inglês.
A sintaxe é:
text-decoration: line-through;
Por exemplo, para fazer o seguinte texto:
"Criar sites é difícil exige muito estudo e dedicação."
Usamos o seguinte código HTML & CSS:
<p>Criar sites <span style="text-decoration: line-through;"> é difícil </span> exige muito estudo e dedicação.</p>
Este tipo de decoração é muito comum de se ver em lojas e propagandas, onde eles cortam o valor do preços para dizer que baixaram ou que aumentaram o desconto:
Este curso de Webmaster custa apenas R$1.000,00 R$500,00 !
Aproveite! Agora o desconto é de 20% 50% !
Como fazer o texto piscar em CSS: text-decoration: blink
Sim, é possível fazer um texto piscar em CSS com o valor "blink" da propriedade "text-decoration".A sintaxe fica:
text-decoration: blink;
E ao fazer isso a opacidade da fonte vai de 0% até 100%.
Porém, não é recomendado usar este efeito, pois é super desagradável, feio e ninguém vai gostar (a não ser que esteja fazendo um site sobre a banda Restart).
Esse efeito não é, realmente, muito usado, tanto que ele não funciona em todos os navegadores (funciona no Firefox, por enquanto, por exemplo).
Sem efeitos de sublinhado, sobrelinhado e riscado - text-decoration: none
E por fim, e não menos importante, vamos falar do valor "none" da propriedade "text-decoration", que como o próprio nome pode sugerir, ela define que nenhum outro valor do text-decoration em CSS estará atuando.A sintaxe em CSS desse estilo é:
text-decoration: none;
E um dos usos mais comuns é para tirar, por exemplo, o sublinhado quem vem, automaticamente nos links.
Por exemplo, vejamos um exemplo de código HTML de um link comum, e de um link que teve seu sublinhado retirado com a text-decoration em CSS:
<a href="#" style="text-decoration: none;">Link com none</a> <a href="#">Link sem none</a>
Vejam o efeito desse código:
Link com none
Link sem none
Um comentário:
Muito útil e esclarecedor.
Postar um comentário