Menu
Coddy logo textTech

Decoração de Texto

Parte da seção Styling with CSS do Journey de HTML da Coddy. Lição 22 de 76.

No CSS, a propriedade text-decoration é usada para adicionar ou remover decorações ao texto dentro de um elemento HTML. Essa propriedade permite sublinhar, sobrelinhar ou riscar o texto, fornecendo destaque visual ou indicando estados específicos.

Valores comuns para text-decoration incluem:

  • none: Remove qualquer decoração de texto. Este é o valor padrão.
  • underline: Adiciona um sublinhado ao texto.
  • overline: Adiciona uma linha acima do texto.
  • line-through: Adiciona uma linha no meio do texto (riscado).

Por exemplo:

a {
    text-decoration: none;
}

.underline {
    text-decoration: underline;
}

.strike {
    text-decoration: line-through;
}
challenge icon

Desafio

Fácil

Você recebeu um documento HTML com um parágrafo (<p>) que contém um elemento âncora (<a>) e uma divisão (<div>). Sua tarefa é usar a propriedade text-decoration para estilizar esses elementos. Siga as etapas abaixo:

  1. Escreva uma regra CSS que tenha como alvo todos os elementos <a>. Defina text-decoration como none para remover o sublinhado padrão.
  2. Adicione um atributo class com o valor "underline" ao elemento <p>.
  3. Escreva uma regra CSS que tenha como alvo todos os elementos com a classe underline. Defina text-decoration como underline.
  4. Adicione um atributo class com o valor "strike" ao elemento <div>.
  5. Escreva uma regra CSS que tenha como alvo todos os elementos com a classe strike. Defina text-decoration como line-through.
FORMATO DE SAÍDA OBRIGATÓRIO: [Seu conteúdo traduzido aqui]

Experimente você mesmo

<html>
<head>
    <title>Text Decoration</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <p>This is a paragraph with a <a href="#">link</a>.</p>
    <div>This is a division.</div>
</body>
</html>
quiz iconTeste seus conhecimentos

Esta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.

Todas as lições de Styling with CSS

Pratique por conta própria: Playground de Web