Texto tachado CSS: Mais explicação sobre as tags del e s

Indicação
Texto tachado CSS: Mais explicação sobre as tags del e s

Nesta postagem, vamos explorar como aplicar o estilo de texto tachado usando CSS. Pois, o texto tachado é útil quando se deseja indicar que um determinado trecho de texto não está mais válido ou atualizado. Então, veremos como utilizar essa formatação de maneira simples e eficiente.

Conteúdo

O básico do CSS

Antes de mergulharmos no texto tachado, é importante ter uma compreensão básica do CSS. O CSS (Cascading Style Sheets) é uma linguagem de estilo utilizada para definir a aparência dos elementos HTML em uma página da web. Portanto, com o CSS, podemos controlar o tamanho, a cor, a fonte e muitos outros aspectos visuais dos elementos.

Como aplicar o CSS a um documento HTML

Existem várias maneiras de aplicar o CSS a um documento HTML:

  1. Inline: aplicando o estilo diretamente ao elemento HTML usando o atributo style.
  2. Interno: definindo estilos dentro da tag <style> no cabeçalho do documento HTML.
  3. Externo: criando um arquivo CSS separado e vinculando-o ao documento HTML usando a tag <link>.

Estilizando texto com tachado

Agora que temos uma noção básica de CSS, vamos aprender como estilizar texto com tachado. O texto tachado é representado por uma linha horizontal que atravessa o texto. Logo, isso pode ser usado para indicar que o conteúdo não está mais válido ou para criar um efeito visual interessante.

Propriedade CSS para texto tachado

A propriedade CSS que permite aplicar o estilo de texto tachado é text-decoration. Para adicionar o efeito de tachado, usamos o valor line-through. Aqui está um exemplo de como aplicar essa propriedade:

				
					.texto-tachado {
  text-decoration: line-through;
}

				
			

Utilizando as tags del e s

Além de utilizar o CSS, também podemos utilizar as tags HTML <del> e <s> para indicar texto tachado. Ambas as tags têm a mesma finalidade, mas diferem ligeiramente na semântica.

A tag <del> é usada para representar conteúdo que foi removido ou deletado, enquanto a tag <s> é usada para representar conteúdo que não é mais válido, mas não necessariamente removido.

Aqui está um exemplo de como utilizar as tags:

				
					<del>Este texto está tachado.</del>

<s>Este texto está tachado.</s>

				
			

Dicas para o uso do texto tachado

Aqui estão algumas dicas para utilizar o texto tachado de forma efetiva:

  • Reserve o texto tachado para indicar conteúdo desatualizado ou inválido.
  • Evite usar o texto tachado em excesso, pois pode dificultar a leitura.
  • Utilize o texto tachado com moderação para destacar informações importantes.

Exemplo de uso

Aqui está um exemplo completo de como utilizar o texto tachado em um documento HTML:

				
					
<style>
    .texto-tachado {
      text-decoration: line-through;
    }
</style>

<p class="texto-tachado">Este texto está tachado.</p>

				
			

Ao aplicar a classe texto-tachado, o texto será exibido com uma linha horizontal atravessando-o, indicando que não está mais válido.

Conclusão

Nesta postagem, exploramos como estilizar texto com tachado usando CSS. Em resumo, a propriedade text-decoration: line-through permite adicionar facilmente esse efeito visual aos elementos HTML. 

Além disso, também aprendemos sobre as tags <del> e <s>, que oferecem uma forma semântica de indicar texto tachado. 

Agora você pode aplicar essa técnica para indicar conteúdo desatualizado ou apenas para criar um estilo único em suas páginas da web. Experimente e divirta-se com o CSS!

Como se tornar um desenvolvedor Web?

Não é necessário ter um certificado ou formação específica para ser um desenvolvedor web. Porque o importante é obter conhecimentos teóricos e práticos sobre programação, e assim irá adquirir experiência para entrar no mercado de programação web.

Certamente deve estar animado para começar a sua jornada, saiba que estou focado para fazer conteúdos excepcionais que irão te ajudar! Então não perca tempo e cadastre-se logo abaixo para não perder nenhuma novidade e ficar sempre por dentro

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Pratique, acesse o editor HTML
mokup phone
Aprenda a desenvolver para a web de graça!

Cadastrar agora

*Não enviamos spam, ao enviar você aceita nossas políticas de privacidade.

Pesquisa
*A busca não retorna histórias,
para isso visite a página histórias
Digite aqui para obter os resultados da pesquisa!
Ebook Criar com HTML e CSS - Mukup

Cadastrar agora

Aprenda a desenvolver para a web de graça! Mais ebook de bônus.

*Não enviamos spam, ao enviar você aceita nossas políticas de privacidade.