Sintaxe das regras CSS


A regra CSS e sua sintaxe

Uma regra CSS é uma declaração que segue uma sintaxe própria e que define como será aplicado estilo a um ou mais elementos HTML.
Um conjunto de regras CSS formam uma Folha de Estilos.
Uma regra CSS, na sua forma mais elementar, compõe-se de três partes: um seletor, uma propriedade e um valor e tem a sintaxe conforme mostrado abaixo:

seletor { propriedade: valor; }

Seletor: é o elemento HTML (ou uma classe a aplicar a um elemento HTML) para o qual a regra será válida. (por exemplo:

        <p>, <h1>, <form>        

, . minhaclasse, etc…);

Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo: font, color, background, etc…).

Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo arial, cor azul, fundo verde, etc…)

Na sintaxe de uma regra CSS, escreve-se o seletor e a seguir a propriedade e valor separados por dois pontos e entre chaves { }. Quando mais de uma propriedade for definida na regra, deve-se usar ponto-e-vírgula para separá-las.
O ponto-e-vírgula é facultativo no caso de propriedade única e também após a declaração da última propriedade no caso de mais de uma.

Vejamos alguns exemplos de regra CSS:

          
p {
   font-size: 12px; /* ponto-e-vírgula é facultativo */
   }

body {
color: #000000;
background: #FFFFFF;
font-weight: bold; /*ponto-e-vírgula é facultativo */
}
          

No primeiro exemplo, o seletor é o elemento HTML

     <p>     

parágrafo.
No segundo exemplo o seletor é documento todo (body – a página web), e as propriedades declaradas com seus respectivos valores são:
a cor da fonte: preta
a cor do fundo: branca
o peso da fonte: negrito

Dica 1: é de boa técnica usar-se sempre o ponto-e-vírgula após cada regra para uma propriedade;
Dica 2: escreva suas regras CSS digitando uma propriedade em cada linha. Isto facilita a manutenção e atualização das Folhas de Estilo;
Dica 3: Insira comentários nas suas Folhas de Estilo. Eles facilitaram a voce se lembrar no futuro, de detalhes da programação, que certamente serão esquecidos com o tempo.

Tudo de bom !!!

Publicado em 18 de dezembro de 2008, em CSS e marcado como . Adicione o link aos favoritos. Deixe um comentário.

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: