» »

Como fazer texto tachado em CSS. Tags HTML usadas para formatar texto Como alterar a cor do texto

Para rasurar texto em HTML, use a tag batida:

  1. Eletrônica
  2. Siroezhkin
  3. Smirnov
  4. Chizhikov
  5. Kukushkina

O resultado da execução deste código:

  1. Eletrônica
  2. Siroezhkin
  3. Smirnov
  4. Chizhikov
  5. Kukushkina

Esta tag não possui atributos. Em vez de uma tag HTML batida uma versão abreviada também pode ser usada - é(da mesma forma, negrito - b, itálico - eu, sublinhado - você):

Construtor LEGO"Nubex"

Como você pode ver o resultado é semelhante:

Conjunto de construção LEGO "Nubex"

Usando uma etiqueta é E batidaé considerado incorreto do ponto de vista de validação de código (é necessário usar um transitivo). Ou outra opção é usar CSS.

Texto tachado: CSS

Com CSS, o texto pode ser "decareado" usando a propriedade decoração de texto. Esta propriedade pode assumir os seguintes valores:

  • passagem de linha- usado para riscar texto;
  • sublinhado- sublinha o texto;
  • sobrepor- usado para colocar uma linha acima do texto (texto sobrelinhado);
  • piscar- flashes de teste (a cada segundo);
  • nenhum- permite cancelar todos os efeitos aplicados ao texto.

Os valores especificados podem ser aplicados simultaneamente, para isso é necessário escrever os parâmetros necessários separados por um espaço. Por exemplo, aplique sublinhado, sobrelinhado e piscando ao mesmo tempo:

Decoração de texto: sublinhado piscando sobreposto;

Agora vamos fazer o texto tachado usando CSS:

Texto tachado CSS - "Nubex"

Construtor LEGO Sites Nubex



Descrição

Adiciona decoração de texto na forma de sublinhado, riscado, uma linha acima do texto e piscando. Você pode aplicar mais de um estilo por vez listando os valores separados por espaços.

Sintaxe

decoração de texto: [piscar || passagem de linha || sobrepor || sublinhado] | nenhum | herdar

Valores

piscar Define o texto para piscar. Esse texto desaparece periodicamente, aproximadamente uma vez por segundo, e depois reaparece em seu lugar original. Atualmente, esse valor não é compatível com navegadores e está obsoleto em CSS3, sendo recomendada animação. line-through Cria texto line-through (exemplo). overline Uma linha passa sobre o texto (exemplo). sublinhado Define o texto a ser sublinhado (exemplo). nenhum Cancela todos os efeitos, incluindo links sublinhados, que é definido por padrão. herdar O valor é herdado do pai.

HTML5 CSS2.1 IE Cr Op Sa Fx

decoração de texto

Ataque estratégico



Modelo de objeto

document.getElementById("elementID ").style.textDecoration

document.getElementById("elementID ").style.textDecorationBlink

document.getElementById("elementID ").style.textDecorationLineThrough

document.getElementById("elementID ").style.textDecorationNone

document.getElementById("elementID ").style.textDecorationOverLine

document.getElementById("elementID ").style.textDecorationUnderline

Navegadores

Versões do Internet Explorer até 7.0 inclusive não suportam o valor herdado. A linha obtida usando o valor line-through no IE7 está posicionada mais alta do que em outros navegadores; Este bug foi corrigido no IE8.

Olá a todos! Em artigos anteriores aprendemos muito sobre links e imagens. Agora é hora de passar para o texto. Neste artigo falarei sobre as tags HTML mais populares que são usadas para dar uma certa aparência ao texto.

Então, primeiro, crie um documento de texto em branco no Bloco de Notas. Depois disso, altere sua extensão de txt para html. Abrimos simultaneamente usando um navegador e um editor de texto, por exemplo, o mesmo bloco de notas. Eu recomendo usar o programa para esses fins Macromedia Dreamweaver ou Bloco de notas++.

Usando o editor, editaremos nosso documento e veremos o que fizemos usando um navegador.

Para que as alterações tenham efeito, você deve primeiro salvar as alterações no editor pressionando o disquete ou a combinação de teclas Ctr+S e, em seguida, atualizar o mesmo documento no navegador.

Títulos de texto de diferentes níveis

Os títulos não são apenas uma parte importante do design do texto, mas também uma das ferramentas de otimização interna. No texto HTML, os títulos são definidos por tags . Para ver como ficarão, escreva o seguinte código no documento:

Coloque aqui o texto que deseja como título

O número 2 próximo à letra h indica o nível do título. Existem 6 níveis no total. O primeiro nível é o título do artigo. Todo o resto são títulos de seções e subseções.

Texto em negrito, sublinhado e itálico

Tag , , resolver facilmente este problema
É assim que você pode definir texto em negrito em HTML
É assim que o itálico é definido
Este será o texto sublinhado

Se precisarmos aplicar várias propriedades ao texto ao mesmo tempo, simplesmente aninhamos as tags uma dentro da outra.

Negrito itálico

Alterando o tamanho da fonte

O tamanho da fonte do texto é definido em HTML usando a tag , que possui um atributo "tamanho".

Tamanho da fonte 5

Como mudar a cor do texto

A cor do texto é definida pela mesma tag usando o atributo “color”

Texto vermelho

O texto como foi digitado

HTML tem um recurso bastante desagradável. Se você digitou um texto que contém vários espaços seguidos, um após o outro, o navegador mostrará apenas um espaço. Em alguns casos, é necessário exibir o texto exatamente como foi digitado. A tag é usada para isso 

Este texto terá a aparência conforme foi digitado

Bem, provavelmente isso é tudo. Naturalmente, as possibilidades de modificação de texto usando tags HTML são bastante limitadas. Na maioria dos casos isto não é suficiente. Neste caso, é recomendado usar css. CSS Esta é uma abreviatura que, traduzida para o russo, significa folhas de estilo em cascata. Falaremos mais sobre isso em uma das lições a seguir.

Texto tachado

De modo geral, em HTML você pode definir texto tachado usando três tags diferentes ao mesmo tempo. Tag E são exibidos corretamente em todos os navegadores, no entanto, seu uso não é recomendado. Eles nem estão incluídos nas especificações XHTML e HTML5. Então, para criar texto tachado, recomendo usar a tag .

Texto tachado

Visualmente, o resultado do uso desta tag não será diferente dos dois primeiros. No entanto, carrega um significado ligeiramente diferente. Esta tag deve ser usada para riscar informações desatualizadas ou incorretas. Esta tag possui 2 atributos:

citar - pretende conter um link para um documento que contenha o motivo da exclusão desta informação

datetime - destina-se a armazenar a hora da última edição da informação.

A tag ainda é amplamente usada para riscar texto em código HTML. , que é uma grafia abreviada da tag . Entre os muitos significados da palavra inglesa “strike” estão “riscar” e “riscar”. Veja como são os resultados do uso dessas duas tags:

  2. texto riscado usando tag → texto tachado usando tag

Como você pode ver, o resultado é idêntico. Todos os navegadores modernos entendem essas tags, mas, mesmo assim, o uso de ambas não é recomendado. Eles estão completamente ausentes das especificações XHTML e HTML5. E a especificação HTML 4.0 também é descrita como indesejável.

A razão para isso é que as tags E pertencem a uma classe das chamadas tags de formatação física. Ou seja, eles não carregam nenhuma carga semântica e apenas determinam o estilo de exibição do texto. No entanto, a própria linguagem de marcação HTML destina-se especificamente à marcação semântica de texto. E para formatação visual, são usadas folhas de estilo CSS.

E embora você possa não se importar com esses detalhes acadêmicos, ainda assim não use essas tags desatualizadas. Se você precisar tachar o texto em HTML, é melhor usar a tag . Aqui está o resultado de usá-lo:

  1. texto riscado usando tag → texto tachado usando tag

Como você pode ver, visualmente não há diferença entre , E , mas no significado há uma diferença muito grande.

Marcação projetado para marcar linhas de texto excluídas. Ou seja, carrega certas informações lógicas sobre o texto e pertence à classe das chamadas tags HTML semânticas. Formatando texto como tachado quando aplicado – este não é o propósito desta etiqueta, mas apenas uma consequência da sua essência lógica.

Repito mais uma vez: se você não se importa com a ideologia da linguagem de marcação HTML e apenas o efeito visual é importante, basta considerar que a tag é destinada a riscar texto mas não ou . Pelo menos pelas mesmas razões pelas quais escreve “profissionalismo” e não “profissionalismo”.

Além disso, a etiqueta mais funcional do que E . Pode transmitir informações adicionais sobre o texto usando os atributos “cite” e “datetime”:

  • Atributo " citar" pretende conter um link para um documento que dê o motivo da exclusão deste texto e, talvez, outros detalhes sobre sua edição.
  • Atributo " data hora» destina-se a indicar a data e hora de edição deste texto.

O que você deve fazer se precisar exibir o texto tachado, mas não quiser marcá-lo como excluído? Como mencionado acima, CSS irá ajudá-lo. Mais especificamente, a propriedade “text-decoration”, que possui o valor “line-through”. Por exemplo, é assim que você pode fazer:

  1. tachado de texto usando CSS → Texto tachado CSS

Muito código? Concordar. Portanto, você pode reduzi-lo colocando as instruções CSS em um arquivo separado. Nele você pode, por exemplo, descrever a classe do texto tachado da seguinte forma:

S ( text-decoration: line-through; ) Isso permitirá que você escreva em código HTML como este:

  1. Texto tachado CSS → Texto tachado CSS

Este código também é mais longo do que no caso de , mas se você quiser ingressar na Web semântica, terá que aceitar essa redundância. Feliz riscar!

Publicações anteriores:

Vejamos todas as maneiras de criar texto tachado usando HTML e CSS. Existem duas opções de implementação:

  • Através de tags HTML , E
  • Através da propriedade CSS text-decoration

1. Texto tachado usando tags HTML , E

Todo o texto está entre tags HTML , E fica riscado. A incomum letra s vem de uma abreviatura da palavra inglesa "strike".

Não há diferença visual entre as três tags. No entanto, a última opção usando a tag html é considerado preferível porque é compatível com o padrão HTML5. Outras tags não são suportadas (é claro que serão exibidas corretamente, mas não passarão na validação).

Fonte normal. Texto tachado via tag s

Texto simples. Texto tachado por meio de strike tag

Texto simples. Texto tachado via del tag

Converte na página para

Fonte normal. Texto tachado via tag s

Texto simples. Texto tachado por meio de strike tag

Texto simples. Texto tachado via del tag

2. Texto tachado por meio da propriedade CSS text-decoration

CSS possui uma propriedade text-decoration que é responsável por sublinhar o texto.

Sintaxe de decoração de texto CSS

decoração de texto: nenhum|sublinhado|overline|line-through|herdar;
  • nenhum - texto sem decoração
  • sublinhado - sublinhado
  • overline - sublinhado
  • line-through - texto tachado
  • piscar - texto piscando (recomenda-se não usar este valor)

Estamos interessados ​​no valor line-through, que especifica o tachado do texto.