Pseudo-elementos para estilização de texto

7.1 Pseudo-elemento ::first-letter

Os pseudo-elementos ::first-letter e ::first-line oferecem ferramentas poderosas para estilizar as primeiras letras e linhas de elementos de texto. Esses pseudo-elementos são amplamente usados para criar vários efeitos tipográficos, melhorando a legibilidade e a estética do texto nas páginas web.

O pseudo-elemento ::first-letter permite estilizar a primeira letra de um bloco de texto. É frequentemente usado para criar efeitos decorativos, como letras iniciais ampliadas ou estilizadas em parágrafos.

    
      seletor::first-letter {
        /* estilos */
      }
    
  

Exemplo de uso do ::first-letter

Neste exemplo, a primeira letra do parágrafo é aumentada, destacada em negrito e colorida em azul. As propriedades float: left e margin-right criam o efeito de "letra capitular", afastando o resto do texto:

    
      /* Estilização da primeira letra do parágrafo */

      p::first-letter {
        font-size: 2em;
        font-weight: bold;
        color: #3498db;
        float: left;
        margin-right: 0.1em;
      }
    
  

Propriedades suportadas para ::first-letter

O pseudo-elemento ::first-letter suporta várias propriedades, incluindo:

• font
• color
• background
• margin
• padding
• border
• float
• text-transform
• text-decoration

Com estas propriedades, você pode controlar de forma flexível a aparência da primeira letra do texto.

Exemplo de estilização avançada do ::first-letter

Neste exemplo, a primeira letra tem efeitos adicionais - sombra de texto e tamanho maior:

    
      /* Estilização da primeira letra do parágrafo com efeitos adicionais */

      p::first-letter {
        font-size: 3em;
        font-weight: bold;
        color: #e74c3c;
        float: left;
        margin-right: 0.2em;
        line-height: 1;
        text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
      }
    
  

7.2 Pseudo-elemento ::first-line

O pseudo-elemento ::first-line permite estilizar a primeira linha de um bloco de texto. É usado para criar vários efeitos tipográficos, como alterar a fonte ou a cor da primeira linha, melhorando a percepção visual do texto.

Sintaxe:

    
      seletor::first-line {
        /* estilos */
      }
    
  

Exemplo de uso do ::first-line

Neste exemplo, a primeira linha do parágrafo é destacada em negrito, colorida em verde e recebe um fundo cinza claro:

    
      /* Estilização da primeira linha do parágrafo */

      p::first-line {
        font-weight: bold;
        color: #2ecc71;
        background-color: #f0f0f0;
      }
    
  

Propriedades suportadas para ::first-line

O pseudo-elemento ::first-line suporta várias propriedades, incluindo:

• font
• color
• background
• margin
• padding
• border
• line-height
• text-transform
• text-decoration
• letter-spacing
• word-spacing

Elas permitem controlar de forma flexível a aparência da primeira linha do texto.

Exemplo de estilização avançada do ::first-line

Neste exemplo, a primeira linha recebe efeitos adicionais, como transformação de texto para maiúsculas e alteração do espaçamento entre letras e palavras:

    
      /* Estilização da primeira linha do parágrafo com efeitos adicionais */

      p::first-line {
        font-weight: bold;
        color: #e67e22;
        background-color: #f9f9f9;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        word-spacing: 0.2em;
      }
    
  

7.3 Uso combinado de ::first-letter e ::first-line

Os pseudo-elementos ::first-letter e ::first-line podem ser usados juntos para criar efeitos tipográficos complexos.

Exemplo de uso combinado

Neste exemplo, a primeira letra do parágrafo e a primeira linha recebem estilizações diferentes, criando um efeito visual complexo e interessante:

    
      /* Estilização da primeira letra e primeira linha do parágrafo */

      p::first-letter {
        font-size: 2.5em;
        font-weight: bold;
        color: #3498db;
        float: left;
        margin-right: 0.1em;
      }

      p::first-line {
        font-weight: bold;
        color: #2ecc71;
        background-color: #f0f0f0;
      }
    
  

Exemplo completo

Neste exemplo, a primeira letra do parágrafo é ampliada e destacada em azul, enquanto a primeira linha do parágrafo é destacada em negrito e verde com fundo cinza:

    
      /* Estilização da primeira letra do parágrafo */

      p::first-letter {
        font-size: 2.5em;
        font-weight: bold;
        color: #3498db;
        float: left;
        margin-right: 0.1em;
      }

      /* Estilização da primeira linha do parágrafo */

      p::first-line {
        font-weight: bold;
        color: #2ecc71;
        background-color: #f0f0f0;
      }
    
  

    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Exemplo de pseudo-elementos ::first-letter e ::first-line</title>
          <link rel="stylesheet" href="styles.css">
        </head>
        <body>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam quis risus eget urna mollis ornare vel eu leo.</p>
        </body>
      </html>
    
  

1

Tarefa

Frontend SELF PT, nível 30, lição 2

Bloqueado

Primeira linha

Primeira linha

Abrir

1

Tarefa

Frontend SELF PT, nível 30, lição 2

Bloqueado

Estilização Combinada

Estilização Combinada

Abrir