Post

Tag (SPAN) - Estilizando Partes de Texto

Postado em
Por Vagner Leite
3 min de leitura

Objetivo da Aula:

Nesta aula, você aprenderá sobre a tag HTML <span>, como usá-la para aplicar estilos a partes específicas de texto e como integrá-la com CSS para personalizar a aparência do conteúdo.

1. Introdução à Tag <span>

O que é a Tag <span>?

  • A tag <span> é um elemento de nível de bloco usado para estilizar e agrupar partes específicas de texto ou conteúdo dentro de um bloco maior. Ao contrário da tag <div>, que é usada para criar divisões maiores, o <span> é usado para partes menores e inline.

Importância da Tag <span>:

  • Estilização Localizada: Permite aplicar estilos CSS a partes específicas do texto sem afetar o restante do conteúdo.
  • Agrupamento Inline: Facilita a aplicação de estilos e formatação a porções menores de texto dentro de elementos maiores.

2. Sintaxe e Uso da Tag <span>

2.1. Estrutura Básica

Exemplo de Uso Simples:

1

<p>Este é um texto com <span class="highlight">destaque</span> aplicado a uma parte específica.</p>
  • Descrição: A tag <span> é usada para aplicar uma classe CSS chamada highlight a uma parte específica do texto dentro de um parágrafo.

2.2. Aplicando Estilos com CSS

Exemplo de Estilo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exemplo de Span</title>
  <style>
    .highlight {
      background-color: yellow;
      font-weight: bold;
    }
    .important {
      color: red;
      font-style: italic;
    }
  </style>
</head>
<body>
  <p>Este é um texto com <span class="highlight">destaque</span> e uma <span class="important">parte importante</span>.</p>
</body>
</html>
  • Descrição: A classe highlight aplica um fundo amarelo e negrito ao texto, enquanto a classe important aplica cor vermelha e itálico.

2.3. Uso Avançado

Exemplo com Várias Classes:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Span com Múltiplas Classes</title>
  <style>
    .special {
      color: #fff;
      background-color: #007bff;
      padding: 2px 4px;
      border-radius: 3px;
    }
  </style>
</head>
<body>
  <p>Este texto contém uma <span class="special">classificação especial</span> aplicada a uma parte específica.</p>
</body>
</html>
  • Descrição: A classe special aplica um estilo visual distinto, como cor de fundo, cor do texto, padding e bordas arredondadas, a uma parte específica do texto.

3. Práticas Recomendadas

Uso Adequado de <span>:

  • Estilização de Texto: Utilize <span> para estilizar partes de texto dentro de blocos maiores sem alterar a estrutura do documento.
  • Evite Excessos: Não use <span> para agrupamentos maiores ou para dividir blocos de conteúdo; utilize <div> ou outras tags semânticas conforme necessário.

Exemplo de Estrutura Completa:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Uso de Span</title>
  <style>
    .highlight {
      background-color: #ffff00;
      font-weight: bold;
    }
    .important {
      color: #ff0000;
      font-style: italic;
    }
  </style>
</head>
<body>
  <h1>Exemplo de Uso de Span</h1>
  <p>Aprenda a usar a tag <span class="highlight">span</span> para estilizar <span class="important">partes específicas</span> do texto.</p>
</body>
</html>

4. Resumo e Conclusão

  • Recapitulando:
    • A tag <span> é usada para estilizar partes específicas de texto dentro de elementos maiores.
    • É ideal para aplicar estilos localizados e formatação em blocos de texto.
    • Use CSS para personalizar a aparência de texto dentro de <span>.
  • Próximos Passos:
    • Na próxima aula, você aprenderá sobre listas HTML (<ul>, <ol>, <li>), que ajudam a organizar o conteúdo em formatos de lista ordenada e não ordenada.

Exercícios Práticos:

  1. Estilizar Texto:
    • Crie uma página HTML e use a tag <span> para aplicar estilos a diferentes partes de um texto. Experimente diferentes propriedades CSS como cor, fundo e fontes.
  2. Aplicar Múltiplas Classes:
    • Adicione várias classes CSS a elementos <span> e veja como isso afeta a formatação e o estilo do texto.
  3. Desafio Extra:
    • Desenvolva uma página com texto formatado usando <span> para destacar diferentes partes, como termos importantes, citações ou palavras-chave.

Esta aula forneceu uma visão detalhada sobre a tag <span> e como usá-la para aplicar estilos a partes específicas do texto. Com esse conhecimento, você pode aprimorar a apresentação do seu conteúdo de forma eficaz.

voltar

ninja
ninja html tags span
Esta postagem está licenciada sob CC BY 4.0 pelo autor.