TUTORIAL CSS SINTAXE ELEMENTOS E REGRAS CSS I        6 de 9

elementos das regras css

Vamos relembrar quais são os elementos que compõe uma regra CSS:

p (seletor) {

font-size (propriedade): 2em (valor);

}

Qualquer elemento HTML é um possível seletor CSS. O seletor é simplesmente o elemento que está ligado a um estilo particular.

Um simples seletor pode ter diferentes classes, permitindo, assim, que tenha diferentes estilos. Veja o exemplo abaixo:

  p.azul {

      color: #336699;

  }

  p.preto {

      color: #000000;

  }

Criamos para o seletor "p" duas classes: azul e preto.

As classes podem ser declaradas, também, sem associar-se a um seletor específico:

  .branco {

     color: white;

  }

Ao conjunto propriedade + valor, no exemplo acima, respectivamente, color e white,  damos o nome de DECLARAÇÃO.

No exemplo acima descrevemos as regras para o seletor p (parágrafo), definindo para a propriedade color um valor white. Temos então que a regra CSS, conceitualmente, é assim composta:

 SELETOR {

 PROPRIEDADE: VALOR;

 }

Determinado seletor comporta um número determinado de propriedades, as quais se atribui um valor respectivo.

Veja o exemplo abaixo:

p {
width: 250px;
font-family: verdana;
font-size: 12px;
color: blue;
}

No exemplo, para o seletor "p", estão definidas quatro propriedades: width, font-family, font-size e color. Para tais propriedades foram estabelecidos, respectivamente, os seguintes valores: 250px, verdana, 12px e blue.

Na prática estabelecemos um parágrafo com largura de 250 píxels (px); estilo de fonte verdana; com um tamanho de 12 píxels (px) e cor azul.

Veja o resultado do exemplo supracitado para o seletor p (parágrafo).

Podemos concluir, a partir de então, que para cada seletor há um grupo determinado de propriedades por ele comportadas, bem como valores valores que lhes são respectivos.

Antes de elencar os principais seletores, cumpre destacar quais são as unidades de valor que podem ser utilizadas, suas características e peculiaridades, bem como vantagens e desvantagens de aplicação de cada uma delas.

A primeira pergunta que naturalmente seria razoável ser formulada é a seguinte: no exemplo anterior, caso suprimíssemos a propriedade font-size, qual seria a aparência da página que utilizamos como exemplo ?

Veja o modelo proposto:

  p {
  width: 250px;
  font-family: verdana;
  color: blue;
  }

Visualize este exemplo, sem a propriedade font-size

Cabe fazer uma advertência referente  à utilização equivocada de nomenclatura quanto dos termos componentes de uma regra CSS, o que para além de uma simples impropriedade, pode caracterizar um ruído de comunicação que pode resultar em situações indesejáveis, como por exemplo, inutilização de parte do conteúdo teórico de determinado material e inaplicação de exemplos e conteúdos.

Neste sentido, os erros mais comuns que devem ser evitados são os seguintes:

1. Atribuir ao termo "seletor" a denominação de "elemento".

2. Atribuir ao termo "propriedade" a denominação de "seletor" ou "atributo".

3. Atribuir ao termo "declaração" a denominação de "regra" ou "função".

Você irá se deparar com uma enorme e criativa variedade de combinações de nomes e termos como componentes de uma regra CSS: utilize a nomenclatura estabelecida pelo W3C.

SELETORES ID

Os ID's dos seletores são identificados pelo sinal # (tralha) que precede o nome que lhe foi dado.

Veja o exemplo:

  # exemploid {

  font-size: 12px;

  } 

A princípio pode parecer que "classes" e "ID's" são a mesma coisa, não é ? Pois bem, não são ! As classes podem ser, como revela o próprio nome, utilizadas para uma ou mais ocorrências por página, enquanto os ID's não devem ser utilizados mais de uma vez na mesma página. 

MARCAÇÃO SEMÂNTICA

Primeiramente, vamos definir semântica: é o estudo da relação dos signos com aquilo que eles significam. De maneira prática, podemos entender como marcação semântica a adequação dos seletores (signos) com os seus respectivos significados.

Traduzindo em miúdos: você não deve utilizar para a colocação de um título ou sub-título o elemento "p" (signo), uma vez que ele deve ser utilizado para marcar parágrafos (significado), sendo correta a utilização, para tanto, dos elementos "h1" a "h6".

Para diminuir ou eliminar completamente os erros de marcação - erros que irão contribuir, por exemplo, para reduzir as suas chances de aparecer melhor colocado nos principais buscadores -procure identificar o que determinado elemento significa e utilizá-lo apropriadamente.

Lembre-se que cada elemento HTML, com exceção dos elementos div e span têm uma finalidade específica, ou seja, um significado próprio.

3 (TRÊS) DICAS LEGAIS

Há 3 (três) dicas legais e importantes sobre a sintaxe e forma de organização das regras CSS:

a. Prefira colocar o seletor na primeira linha e as propriedades e valores respectivos, cada qual em uma outra linha, como no exemplo acima:

Linha 1 - p {

Linha 2 - width: 250px;

Linha 3 - font-family: verdana;

Linha 4 - color: blue;

}

Como acima, mantenha a chave de fechamento após a última declaração e dê ao menos uma linha de espaço entre uma regra CSS e outra;

b. Cada declaração deve ser separa da que a sucede por ";" (ponto-e-vírgula). Assim, fica claro não ser obrigatório o uso de ponto-e-vírgula ao final da última declaração, já que, por óbvio, não há outra que lhe suceda. A despeito disto, recomendamos a utilização de ponto-e-vírgula ao final da última declaração, evitando que eventual acréscimo de comando e esquecimento de promover a alteração devida, acabe por resultar em erro de código e ocorrência de um problema plenamente evitável;

c. Observe que a ausência de declaração de definição de valores para uma certa propriedade irá retornar um valor padrão estabelecido pelo browser (navegador) utilizado. Vamos utilizar o  exemplo anterior (exemplo 2), acrescentando ao corpo de página um link sem qualquer definição de formatação e estilo em CSS. Veja o conteúdo incluído:

<body>

.......

<a target="_blank" href="http://www.emprimeiro.com.br/">Veja a formatação deste link</a>
 

.......

</body>

Faça uso do IE (Internet Explorer) versão 7 e do Firefox versão 2.0 ou superiores e veja a aparência, sem qualquer definição de estilo, para o link criado nesta página

Experimente reproduzir o exemplo acima com a inclusão da tag "p", (também nos navegadores IE e Firefox), assim: 

<p><a target="_blank" href="http://www.emprimeiro.com.br/">Veja a formatação deste link</a></p>

No próximo tutorial iremos comentar a diferença de aparência entre o exemplo fornecido e o exercício proposto e daremos continuidade ao tema ora abordado. 

e-mail para contato: Caso queira, disponibilizamos endereço eletrônico para contato. Alertamos para o fato de que nem todos os e-mails recebidos serão respondidos de maneira individualizada, sendo certo, contudo, que todos serão atenciosamente lidos e examinados. Fale conosco através do e-mail tutoriaiscss@emprimeiro.com.br que estará disponível até o dia 31 de dezembro do ano corrente. Nosso próximo tutorial - SINTAXE E ELEMENTOS DAS REGRAS CSS - II - que será brevemente publicado. Até lá.

Publicado em: 16/06/2008 - Atualizado em: 06/08/2008.