Propriedades de TEXT DECORATION em CSS

Hello, there! Se você trabalha com design de páginas web, é essencial que domine as propriedades e valores possíveis de serem usados em CSS, a linguagem que é usada para estilizar os elementos presentes em uma página.

E hoje você vai ver quais são os elementos que podemos estilizar na propriedade text-decoration. Let's get started!

Propriedades de TEXT DECORATION em CSS

A propriedade text-decoration é usada quando queremos adicionar uma pequena decoração a um texto. Essa decoração será uma linha e é você quem definirá o estilo dela: pode ser uma linha vermelha sinuosa logo abaixo do texto, e até uma linha azul tracejada em cima dele. Take a look:

1. Text-Decoration-Line: Posição da linha

Com text-decoration-line você definirá a posição da linha que será usada na decoração. Existem 4 possibilidades:

• Overline: linha acima do texto
• Line-through: linha atravessando o meio do texto
• Underline: linha abaixo do texto
• Overline underline: uma linha acima e outra abaixo do texto

For example:

    h1 {
        text-decoration-line: overline;
    }

2. Text-Decoration-Color: Cor da linha

Para definir a cor da linha você pode usar o código hexadecimal dela (como #FF0000 para a cor vermelha), ou simplesmente dizer qual é a cor desejada em inglês. For example:

• Red: vermelho
• Blue: azul
• Green: verde
• Orange: laranja
• Yellow: amarelo

3. Text-Decoration-Style: Estilo da linha

Com essa propriedade você vai definir o estilo da linha. Existem 5 possibilidades:

• Solid: sólida
• Double: dupla
• Dotted: pontilhada
• Dashed: tracejada
• Wavy: sinuosa

4. Text-Decoration-Thickness: Espessura da linha

Por último, para definir a espessura da linha, você pode usar tanto um valor em pixels (como "5px", por exemplo) ou em porcentagem (como "25%").

Lembre-se que dessas quatro propriedades, apenas a primeira, text-decoration-line, é obrigatória, e as outras três são opcionais. Take a look at this example:

    h1 {
        text-decoration-line: underline;
        text-decoration-color: red; 
        text-decoration-style: double;
        text-decoration-thickness: 5px; 
    }

Este exemplo criaria uma linha dupla vermelha de 5 pixels logo abaixo de um título em h1.

Para finalizar, um uso muito frequente dessa propriedade ocorre quando não queremos que os links da nossa página tenham uma linha logo abaixo (o que acontece por padrão). Nesse caso, para remover a linha, basta usar o código abaixo:

    a {
        text-decoration: none;
    }

O valor none define "nenhum" para a text decoration de todos os links.

Can you think of more ways to apply text decoration to your webpages? (Você consegue pensar em mais maneiras de aplicar text decoration a suas páginas web?)

Continue estudando com a gente no nosso artigo "Entrevista de emprego para especialistas em redes sociais". See you!

Aproveite e faça nosso teste de nível de inglês. Ou baixe nossa apostila que te ensina como aprender inglês de maneira eficiente!

Quer realmente aprender outras línguas, como inglês e espanhol? Conheça os nossos cursos que reforçam o aprendizado de inglês e espanhol.