[CSS] - Sintaxes

~ 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: 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á 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.

No entanto é de boa técnica usar-se sempre o ponto-e-vírgula após cada regra para uma propriedade.

Ver os exemplos abaixo:

Código:


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

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

No exemplo abaixo, o seletor é o "documento todo" (body - a página web), a propriedade é o fundo do documento e o valor é a cor branca.

Código:


body {
background: #FFFFFF;
}

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

Código:

h3 {
font-family: "Comic Sans MS"
}

Para maior legibilidade das folhas de estilo, é de boa prática usar linhas distintas para escrever cada uma das declarações — propriedade e seu valor —, como mostrado abaixo:

Código:

p {
text-align: right;
color: #FF0000;
}

Isto não é obrigatório! A regra abaixo tem o mesmo efeito da regra acima e ambas as sintaxes estão corretas:

Código:

p {text-align: right;color: #FF0000;}

NOTA: A razão do uso de ponto e vírgula na última declaração ou mesmo quando só há uma declaração é que durante a fase de projeto da Folha CSS quase sempre estaremos acresentando novas declarações e a última declaração quase nunca é a última na fase de projeto. Assim, esta prática certamente nos poupará revisões por ter esquecido um ponto e vírgula.!!!!

~ Agrupamento de Seletores

Uma regra CSS quando válida para vários seletores, estes podem ser agrupados. Separe cada seletor com uma vírgula. No exemplo abaixo agrupamos todos os elementos cabeçalho. A cor de todos os cabeçalhos será verde.

Código:

h1, h2, h3, h4, h5, h6 {
color: #00FF00;
}

~ O seletor classe

Mas você não 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 do HTML, usando classes diferentes para cada um deles.

A sintaxe para o seletor classe é mostrada abaixo. Elemento HTML mais um nome qualquer que você "inventa" precedido de . (ponto):

Código:

 elemento HTML.minhaclasse {
propriedade: valor;
}

Nota: Para o nome que você "inventa" evite usar números e caracteres especiais. Tanto quanto possível use só letras de a-z e de A-Z. Há restrições quanto ao uso de números e caracteres. Minha experiência e conselho: Use só letras!

Por exemplo: suponha que você queira ter dois tipos de parágrafos em seu documento: um parágrafo com letras na cor preta e um parágrafo com letras na cor azul.

Código:

p.corum {
color:#000000;
}
   
p.cordois {
color:#0000FF;
}

No seu documento HTML as regras seriam aplicadas conforme abaixo:
<p class ="corum"> este parágrafo terá cor preta.</p>

Código:

<p class ="cordois">
este parágrafo terá cor azul.
</p>

Em CSS 1 não é válido atribuir mais de uma classe para um elemento HTML. O exemplo abaixo está errado:

Código:

<p class ="corum" class ="cordois">
Aqui há um erro.
</p>

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

Código:

<p class ="corum cordois">
Aqui não há erro.
</p>

Ao criar uma classe você talvez queira que ela seja aplicável 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 qualquer elemento HTML ao qual você deseja atribuir cor azul:

Código:

.cortres {
    color: #0000FF;
    }

No exemplo a seguir tanto o cabeçalho <h2> como o parágrafo <p> terão cor azul:

Código:

<h2 class="cortres">
Este cabeçalho é azul.
</h2>
   
<p class="cortres">
Este parágrafo é azul.
</p >

~ O seletor ID

O seletor ID difere do seletor de classe, por ser ÚNICO. Um seletor ID só pode ser aplicado a UM e somente UM elemento HTML dentro do documento.

Você pode "inventar" um nome e com ele criar uma ID a qual definirá as regras CSS. Uma ID só pode ser aplicada a UM elemento HTML.

A sintaxe para o seletor ID é mostrada abaixo. Um nome qualquer que você "inventa" precedido de # ("tralha", "jogo-da-velha"):

Código:

#minhaID {
propriedade: valor;
   }

Nota: Para o nome que você "inventa" evite usar números e caracteres especiais. Tanto quanto possível use só letras de a-z e de A-Z. Há restrições quanto ao uso de números e caracteres. Minha experiência e conselho: Use só letras!
Inserindo comentários nas CSS

Você pode inserir comentários nas CSS para explicar seu código, e principalmente ajudá-lo a relembrar de como você estruturou e qual a finalidade de partes importantes do código. Daqui há alguns meses a menos que você seja um privilegiado, terá esquecido a maior parte daquilo que você levou horas para "bolar". O comentário introduzido no código, será ignorado pelo browser. Um comentário nas CSS começa com o "/*", e termina com " */". Veja o exemplo abaixo:

Código:

/* este é um comentário*/
p {
font-size: 14px;      /* este é outro comentário*/
color: #000000;
font-family: Arial, Serif;
}

FONTE: http://maujor.com/