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






Classes e Id

Identificadores | Pseudo-Classes

Classes

As classes são utilizadas para definir diversos estilos a serem aplicados as tags HTML de um documento.

Sintaxe
. XXXX {propriedade:valor}
onde XXXX é uma palavra qualquer de sua livre escolha. Observe que a palavra deverá ser precedida de um ponto.

Com a sintaxe acima é possível aplicar um estilo a qualquer elemento HTML, bastando inserir dentro da TAG do elemento a ser estilizado o parâmetro CLASS  da seguinte forma:

class="XXXX"

Exemplos práticos:

1 - Em uma folha de estilo externa  -  Ilustração

supor que temos a seguinte definição numa folha de estilo externa:

.fundoamarelo { background-color: yellow; }

e que na página devidamente "linkada" a essa folha de estilo externa desejamos aplicar o parâmetro class  ao parágrafo
<p>Este parágrafo está evidenciado com fundo amarelo</p>
e ao título
<h2>Este título também possui fundo amarelo</h2>

para isto, basta inserir o parâmetro class nesses elementos da seguinte forma:

<p class="fundoamarelo">Este parágrafo está evidenciado com fundo amarelo</p>
<h2 class="fundoamarelo">Este título também possui fundo amarelo</h2>

e o resultado obtido é como segue:

Este parágrafo está evidenciado com fundo amarelo

Este título também possui fundo amarelo


2 - Em uma folha de estilo interna

supor que na seção HEAD da página temos a seguinte definição de estilo:

<style type="text/css">
.textoverde {
font: 14px Courier;
color: #008000;
}
</style>

e que desejamos aplicar essa definição de classe a alguns elementos da página, como por exemplo as tags p, div e table abaixo:

<p>Primeiro parágrafo</p>
<div>Tabela 1<table border="1" width="100">
<tr><td>Kithomepage</td><td>Kithomepage</td></tr>
<tr><td>Kithomepage</td><td>Kithomepage</td></tr>
</table>
</div>
<p>Segundo parágrafo</p>

 então, basta inserir o parâmetro class nos elementos pretendidos da seguinte forma:

<p class="textoverde">Primeiro parágrafo</p>
<div class="textoverde">Tabela 1<table class="textoverde" border="1" width="100">
<tr><td>Kithomepage</td><td>Kithomepage</td></tr>
<tr><td>Kithomepage</td><td>Kithomepage</td></tr>
</table>
</div>
<p class="textoverde">Segundo parágrafo</p>

e o resultado é como segue:

Primeiro parágrafo

Tabela 1
KithomepageKithomepage
KithomepageKithomepage

Segundo parágrafo

 

Obs: os parágrafos do exemplo acima, sofreram uma combinação de estilos (o aplicado ao exemplo na seção Head) e o de uma folha de estilo externa aplicada a esta página.

Caso haja necessidade de se definir diversos estilos a uma mesma tag html, basta colocar o seletor (elemento html) no início da definição.
Exemplo: Imagine que se deseja definir dois tipos diferentes de parágrafo; um alinhado à direita e outro alinhado ao centro.
<html>
<head>
<style type="text/css">
p.direita { text-align: right }
p.centro { text-align: center }
</style>
</head>
<body>
<p class="direita">Este parágrafo está alinhado a direita.</p>
<p class="centro">Este parágrafo está alinhado ao centro.</p>
</body>
</html>

Resultado:

Este parágrafo está alinhado a direita.

Este parágrafo está alinhado ao centro.


Identificadores

Os identificadores são similares as classes, porém se aplicam a um e somente um elemento HTML

A sintaxe para o seletor ID é composta de um nome qualquer precedido do símbolo # (tralha):
seletor#nomequalquer {propriedade: valor}

Exemplo:

<style type="text/css">p#identificador1 {text-align: center; color: red}</style>

<p id="identificador1">Este parágrafo está alinhado ao centro e tem cor vermelha.</p>
<div id="identificador1">Este elemento não está alinhado ao centro e não tem cor vermelha porque não é parágrafo.

Resultado:

Este parágrafo está alinhado ao centro e tem cor vermelha.

Este elemento não está alinhado ao centro e não tem cor vermelha porque não é um parágrafo.

 

OBS: Se desejar que a regra se aplique a qualquer elemento basta substituir o seletor por um asterístico  *  da seguinte forma:
*#nomequalquer{propriedade: valor}

Exemplo:

<style type="text/css">
*# identificador2 {text-align: center; color: red}</style>

<p id="identificador2">Este parágrafo está alinhado ao centro e tem cor vermelha.</p>
<div id="identificador2">Este elemento está alinhado ao centro e tem cor vermelha.

Resultado:

Este parágrafo está alinhado ao centro e tem cor vermelha.

Este elemento está alinhado ao centro e tem cor vermelha.


Pseudos-Classes

Os pseudo-classes (também conhecidos por 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">......</p>

O código faz com que a primeira letra de cada parágrafo que tenha class="combinado" seja escrita na cor vermelha.

Os parágrafos que não tenham esta classe não serão afetados