HOME PAGE JAVASCRIPT
Botões Cálculos Datas Essenciais Janelas Flutuantes Menus
HTML CSS FLASH PHP ASP GERADORES CORES MISCELANEA Contato  






Pseudos-elementos

Os pseudo-elementos permitem associar efeitos especiais a seletores ou partes dos mesmos.
Sintaxe:
seletor:pseudo-elemento {propriedade: valor;}

first-letter Usado para obter um efeito especial na primeira letra de um texto.

propriedades:

  • font  Propriedades de letras
  • color  Propriedades de cores
  • background  Propriedades de fundo
  • margin  Propriedades de margens
  • padding  Propriedades de espaçamentos
  • border  Propriedades de bordas
  • text-decoration Decoração do texto
  • vertical-align (somente para "float: none)
  • text-transform Transformação do texto
  • line-height Altura das linhas
  • float
  • clear

Exemplo: p:first-letter { font-size: 250%; float: left }


first-line  Usado para obter um efeito especial na primeira linha de um texto.

propriedades

  • font Propriedades de letras
  • color Propriedades de cores
  • background Propriedades de fundo
  • word-spacing Espaçamento entre palavras
  • letter-spacing Espaçamento entre letras
  • text-decoration Decoração do texto
  • vertical-align Alinhamento vertical
  • text-transform Transformação do texto
  • line-height Altura das linhas
  • clear

Exemplo: p:first-line { color: #F00; font-variant: small-caps }


Os pseudo-elementos também podem ser combinados com classes.
Com esta regra é possível definir diferentes efeitos para pseudos-elementos de uma determinada página.
Sintaxe:
seletor.classe:pseudo-elemento {propriedade: valor;}

Exemplo:
p.combinado:first-letter { color: #FF0000 }
<p class="combinado">
O código faz com que a primeira letra de cada parágrafo que tenha class="combinado" seja escrita na cor vermelha.</p><p>Os parágrafos que não tenham esta classe não serão afetados.</p>