:: A regra 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: 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:
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.
body {
background: #FFFFFF;
}Se o valor for uma palavra composta, deverá estar entre aspas duplas " ", ou simples ':
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:
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:
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.
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):
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.
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>
<p class ="cordois">
este parágrafo terá cor azul.
</p>Este item foi atualizado em 2007/07/03
Em CSS 1 não é válido atribuir mais de uma classe para um elemento HTML. O exemplo abaixo está errado:
<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.
<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:
.cortres {
color: #0000FF;
}No exemplo a seguir tanto o cabeçalho <h2> como o parágrafo <p> terão cor azul:
<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" :-)):
#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:
/* este é um comentário*/
p {
font-size: 14px; /* este é outro comentário*/
color: #000000;
font-family: Arial, Serif;
}Este artigo foi traduzido para o russo. Grato ao Nikolay.
Última modificação: 2008/11/20 09:12:23 GMT
Criado em: 2003-12-10
