Tutorial CSS - Regras CSS

http://maujor.com/tutorial/sintaxetut.php

CSS Site do Maujor

Tutoriais CSS, Web Standards, Tableless, Acessibilidade, HTML, XHTML, Padres Web, por Maurcio Samy Silva

:: A regra CSS e sua sintaxe ::

Este tutorial foi atualizado em: 12/03/2011

A regra CSS e sua sintaxe

Uma regra CSS uma declarao que segue uma sintaxe prpria 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, compe-se de trs partes: um seletor, uma propriedade e um valor e tem a sintaxe conforme mostrado abaixo: seletor { propriedade: valor; } Seletor: genericamente, o elemento HTML identificado por sua tag, ou por uma classe, ou por uma ID, ou etc., e para o qual a regra ser vlida (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 caracterstica especfica 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 pontoe-vrgula para separ-las. O ponto-e-vrgula facultativo no caso de propriedade nica e tambm aps a declarao da ltima propriedade quando houver mais de uma.

1 de 6

03/03/2013 21:43

Tutorial CSS - Regras CSS

http://maujor.com/tutorial/sintaxetut.php

No entanto de boa tcnica usar-se sempre o ponto-e-vrgula aps cada regra para uma propriedade. Observe os exemplos a seguir que esclarecem a sintaxe da regra CSS.

01. 02. 03. 04. 05. 06. 07. 08.

p { font-size: 12px; /* ponto-e-vrgula facultativo */ }

body { color: #000; background: #fff; font-weight: bold; /*ponto-e-vrgula facultativo */ 09. }
No exemplo a seguir, o seletor o "documento todo" (body - a pgina web), a propriedade a cor do fundo do documento e o valor a cor branca.

1. body { 2. background-color: #fff; 3. }

Se o valor for uma palavra composta, dever estar entre aspas duplas " ", ou simples ':

1. h3 { 2. font-family: "Comic Sans MS"; 3. }

Para maior legibilidade das folhas de estilo, de boa prtica usar linhas distintas para escrever cada uma das declaraes propriedade e seu valor , como mostrado a seguir.

1. p { 2. text-align: right; 3. color: #f00; 4. }

Isto no obrigatrio. A regra CSS a seguir tem o mesmo efeito da regra anterior e ambas as sintaxes esto corretas.

1. p {text-align: right;color: #f00;}

2 de 6

03/03/2013 21:43

Tutorial CSS - Regras CSS

http://maujor.com/tutorial/sintaxetut.php

NOTA: A razo do uso de ponto e vrgula na ltima declarao ou mesmo quando s h uma declarao que durante a fase de desenvolvimento da Folha CSS quase sempre estaremos acresentando novas declaraes e a ltima declarao quase nunca a ltima naquela fase. Assim, esta prtica certamente nos poupar revises por ter esquecido um ponto e vrgula.

Agrupamento de Seletores
Uma regra CSS quando vlida para vrios seletores, estes podem ser agrupados. Separe cada seletor com uma vrgula. No exemplo abaixo agrupamos todos os elementos cabealho. A cor de todos os cabealhos ser verde.

1. h1, h2, h3, h4, h5, h6 { 2. color: #0f0; 3. }

O seletor classe
Mas voc no est restrito somente aos elementos HTML (tags) para aplicar regras de estilo. Voc pode "inventar" um nome e com ele criar uma classe a qual definir as regras CSS. E o mais interessante das classes, que elas podem ser aplicadas a qualquer elemento HTML. E mais ainda, voc pode aplicar estilos diferentes para o mesmo tipo de elemento da HTML, usando classes diferentes para cada um deles. A sintaxe para o seletor classe mostrada a seguir. Elemento HTML mais um nome qualquer que voc "inventa" precedido de . (ponto):

1. elemento.minhaclasse { 2. propriedade: valor; 3. }

Nota: Para o nome que voc "inventa" evite usar nmeros e caracteres especiais. Tanto quanto possvel use s letras de a-z e de A-Z. H restries quanto ao uso de nmeros e caracteres. Minha experincia e conselho: use somente letras e os caracteres - (trao) e _ (sublinhado). A HTML5 acabou com a restrio dos caracteres e na sintaxe dela voc pode usar qualquer caractere exceto espao em branco, contudo meu conselho anterior continua vlido. Por exemplo: suponha que voc precisa de dois estilos para pargrafos em seu documento: um pargrafo com letras na cor preta e um pargrafo com letras na cor azul. Crie duas classes conforme mostrado a seguir.

3 de 6

03/03/2013 21:43

Tutorial CSS - Regras CSS

http://maujor.com/tutorial/sintaxetut.php

1. p.cor-um { 2. color:#000; 3. } 4. 5. p.cor-dois { 6. color:#0ff; 7. }

Ao escolher nomes para classes no use nomes que lembrem a apresentao. Prefira nomes que lembrem a estrutura. Para o exemplo mostrado nomear as classes .cor-preta e .cor-azul uma pssima escolha. Se no futuro voc resolver alterar a cor dos elementos azuis para verde vai ficar com uma regra CSS sem sentido. No seu documento HTML as classes seriam aplicadas conforme abaixo:

1. <p class ="cor-um"> este pargrafo ser na cor preta.</p> 2. 3. <p class ="cor-dois">este pargrafo ser na cor azul.</p>
Em CSS 1 no vlido atribuir mais de uma classe para um elemento HTML. O exemplo abaixo est errado:

1. <p class ="cor-um" class ="cor-dois"> 2. Aqui o texto do pargrafo. 3. </p>

Nota: CSS 2 mudou este conceito, permitindo declarar mais de uma classe, desde que o nome das classes sejam separados por um espao.

1. <p class ="cor-um cor-dois"> 2. Aqui o texto do pargrafo. 3. </p>

Nesse caso aplicam-se ao pargrafo as regras CSS definidas nas duas classes. Havendo conflito de declaraes aplica-se o efeito cascata. No nosso caso o pargrafo ser na cor definida na regra CSS declarada por ltimo na folha de estilo. Ao criar uma classe voc talvez queira que ela seja aplicvel a qualquer elemento HTML. Neste caso basta que se omita o nome do elemento antes da classe. Por exemplo: a regra CSS a seguir pode ser aplicada a

4 de 6

03/03/2013 21:43

Tutorial CSS - Regras CSS

http://maujor.com/tutorial/sintaxetut.php

qualquer elemento HTML ao qual voc deseja atribuir cor azul:

1. .cor-tres { 2. color: #00f; 3. }

No exemplo a seguir tanto o cabealho <h2> como o pargrafo <p> sero na cor azul:

1. 2. 3. 4. 5. 6. 7.

<h2 class="cor-tres"> Este cabealho na cor azul. </h2> <p class="cor-tres"> Este pargrafo na cor azul. </p >

O seletor ID
O seletor ID difere do seletor classe, por ser NICO. Um seletor ID de determinado nome s pode ser aplicado a UM e somente UM elemento HTML dentro do documento. Voc pode "inventar" um nome e com ele criar um ID ao qual definir as regras CSS. Um determinado ID s pode ser aplicado a UM elemento HTML. A sintaxe para o seletor ID mostrada a seguir. Um nome qualquer que voc "inventa" precedido do sinal # ("tralha" ou "jogo-da-velha" :-)):

1. #meuID { 2. propriedade: valor; 3. }

Nota: Para o nome que voc "inventa" evite usar nmeros e caracteres especiais. Tanto quanto possvel use s letras de a-z e de A-Z . H restries quanto ao uso de nmeros e caracteres. Minha experincia e conselho: use somente letras e os caracteres - (trao) e _ (sublinhado). A HTML5 acabou com a restrio dos caracteres e na sintaxe dela voc pode usar qualquer caractere exceto espao em branco, contudo meu conselho anterior continua vlido.

Inserindo comentrios nas CSS

Voc pode inserir comentrios nas CSS para explicar seu cdigo, e principalmente ajud-lo a relembrar de

5 de 6

03/03/2013 21:43

Tutorial CSS - Regras CSS

http://maujor.com/tutorial/sintaxetut.php

como voc estruturou e qual a finalidade de partes importantes do cdigo. Daqui h alguns meses a menos que voc seja um privilegiado, ter esquecido a maior parte daquilo que voc levou horas para "bolar". O comentrio introduzido no cdigo, ser ignorado pelo navegador. Um comentrio nas CSS comea com o "/*", e termina com " */". Veja o exemplo abaixo:

1. /* este um comentrio*/ 2. p { 3. font-size: 14px; /* este outro comentrio*/ 4. color: #000; 5. font-family: Arial, Serif; 6. }
Este artigo foi traduzido para o russo. Grato ao Nikolay.

6 de 6

03/03/2013 21:43