As classes e os ID

As classes

Pode revelar-se interessante afectar estilos diferentes às mesmas balizas. Para isto, as especificações CS introduziram o conceito de classe.

A definição das classes é tão simples como a dos estilos. Consiste em definir a baliza seleccionada (como para uma declaração de estilo), seguidamente acrescentar-lhe um ponto (.) e o nome que se deseja dar à classe. O nome da classe pode ser composto por letras (acentuadas ou não), números e travessões:

Selecteur_de_balise.Nom-de-la-classe {  
   propriété de style: Valeur;  
   propriété de style: Valeur;  
   ...;  
           }

Onde “Nom-de-la-classe” representa o nome dado à classe.

Chamada de uma classe

Para invocar uma classe no código HTML, basta acrescentar um atributo class à baliza:
Vejamos a classe Vermelha aplicada à baliza b :

B.rouge {font: Verdana 12px; color: #FF0000; }

A chamada desta classe no código far-se-á da maneira seguinte:

<B class= " Vermelho " > Texto a pôr vermelho e em negrito </B>

As classes universais

É possível não definir uma baliza, neste caso a classe poderá ser utilizada em qualquer baliza para a qual o estilo seleccionado tenha um sentido! Fala-se então de classe universal (às vezes, de classe independente). A definição de tal classe faz-se precedendo muito simplesmente o nome da classe de um ponto:

. Nom-de-la-classe {propriedade de estilo: Valor; propriedade de estilo: Valor…}

Imaginemos a classe “importante” seguinte

.important {font-tipo: arial; color: red; font-weight: bold}A chamada desta classe pode ser feita a partir de qualquer elemento HTML para o qual a definição é válida:

<h1 class= " importante " >Attention ceci est un avertissement</h1>  
<i class= " importante " > (é favor ter em conta) </i>

Note a ausência de ponto na chamada da classe.

As pseudo-classes

As pseudo-classes permitem afinar o estilo aplicado a um certo número de balizas, definindo uma reacção a um acontecimento ou a uma posição relativa da baliza nas outras balizas.

Contrariamente às classes, o nome das pseudo-classes é predefinido, não é por conseguinte possível criar as suas próprias pseudo-classes. Existem vários tipos de pseudo-classes:

• As pseudo-classes dinâmicas,
• As pseudo-classes de relação,
• As pseudo-classes de língua,
• As pseudo-classes first-child,
• As pseudo-classes de página,
• Os pseudo-elementos.

As pseudo-classes dinâmicas

As pseudo-classes dinâmicas permitem alterar o estilo de uma baliza em função de um acontecimento (movimento do rato, clique, ou clique numa tecla do teclado). Existem três:

• A pseudo-classe :hover permite afectar um estilo à baliza seleccionada aquando da passagem do cursor do rato:

  A:hover {font-decoration: underline;

• A pseudoclasse :focus permite definir um estilo para a baliza seleccionada quando o focus lhe é dado (por exemplo, aquando de um clique num elemento de formulário):

  TEXTAREA:focus {color: #FF0000;}

• A pseudoclasse :active permite definir um estilo para a baliza seleccionada quando o utilizador clica no elemento (entre o momento em que o utilizador clica no botão do rato e o larga):

  A:active {color: #FF0000;}

As pseudo-classes dinâmicas não são reconhecidas da mesma maneira por todos os navegadores..

As pseudo-classes de ligação

As pseudos-classes deligação são pseudo-classes específicas da baliza <A>:

• A pseudoclasse : link permite definir o estilo das ligações hipertexto ainda não consultadas pelo cliente
• A pseudoclasse : visited permite definir o estilo das ligações hipertexto que o cliente já visitou

É possível que certos navegadores considerem uma ligação como não visitada se não for consultada durante um longo período de tempo.

A pseudo-classe descendente

Uma pseudo-classe descendente permite aplicar um estilo à primeira baliza num elemento. A sintaxe desta pseudo-classe é a seguinte:

Element_Parent > Balise:first-child {style;}

Assim, a declaração seguinte aplica-se à primeira baliza <A> situada num jogo de balizas <P> </P>:

P > A:first-child {color: #00FF00;}

Desta maneira, a baliza <A> seguinte possuirá o estilo acima:

<P align="justify">  
  <A href="http://pt.kioskea.net">Kioskea</A>  
  </P>

A baliza <A> seguinte, em contrapartida, não será tida em conta porque não é a primeira baliza após a baliza <P>:

<P align="justify">  
  <BR/<  
  <A href="http://pt.kioskea.net">Kioskea</A>  
  </P>

As pseudo-classes de texto

As pseudo-classes de texto permitem aplicar um estilo a uma parte do texto delimitado pelas balizas às quais se aplicam. Assim, as pseudo-classes de texto utilizam-se geralmente conjuntamente com a baliza de parágrafo (<P>).

Existem duas pseudo-classes de texto:

• : first-Line: permite aplicar um estilo à primeira linha de um parágrafo.

  P:first-line { text-transform: uppercase }

• : first-letter : permite aplicar um estilo à primeira letra de um parágrafo para produzir um efeito tipográfico. O exemplo seguinte, por exemplo, duplica a dimensão e põe em negrito a primeira letra de um parágrafo:

  P:first-letter { font-size: 200%; font-weight: bold; }

As pseudo-classes de língua

É possível definir um estilo em função da língua do documento (especificado nas rubricas HTTP ou as balizas méta) ou da língua de um elemento HTML ou XML (especificado graças ao atributo opcional LANG) se esta for precisada.

Uma pseudo-classe de língua utiliza a notação seguinte :

• : lang (Língua). A pseudo-classe de língua seguinte permite definir as aspas de acordo com a notação francesa

  HTML:lang(fr) { quotes: '« ' ' »' }

As pseudo-classes de página

O selectionador @page permite alterar a definição da formatação de uma página HTML (dimensão, margem, etc.) aquando da impressão, como as margens (margin-left, margin-top, margin-right, margin-bottom), o tamanho (size). É então necessário imaginar a página web como um conjunto de páginas que constituem uma obra em papel.

As pseudo-classes de página permitem assim seleccionar as páginas da esquerda, da direita ou a primeira página de um documento.

Existem diferentes pseudo-classes de página:

• @page:left : permite definir as propriedades das páginas de esquerda.

  @page:left { size: landscape; margin-left: 2cm; }

• @page:right :permite definir as propriedades das páginas de direita.

  @page:right { size:landscape; margin-left: 2.5cm; }

• @page:first : permite definir as propriedades da primeira página de um documento.

  @page:first { size: portrait; 

margin-left: 2.5cm; margin-right: 2cm; margin-bottom: 1cm; margin-top: 4cm;}

Os selectores de ID

O selector de ID (identificador) permite fazer referência a um elemento único de uma página localizado pelo seu identificador. Os ID servem nomeadamente para localizar elementos HTML graças ao JavaScript.

A sintaxe de um selector IDEM é a seguinte:

#nom_ID { style }

Tal estilo chama-se como segue:

<BALISE ID="nom_ID" > ... </BALISE>

Pode existir apenas um ID por página! Note igualmente a ausência de # na chamada do selector ID

Última modificação do dia Terça 21 de Julho de 2009 às 18:09:08.Este documento, intitulado « As classes de estilo (CSS) »a partir de Kioskea (pt.kioskea.net) está disponibilizado sob a licença Creative Commons. Você pode copiar, modificar cópias desta página, nas condições estipuladas pela licença, como esta nota aparece claramente.