CSS: A regra CSS e sua sintaxe
Por Cosme Fa | 31 de Março de 2006
A regra CSS e sua sintaxe
- seletor {
- propiedade: valor;
- }
No seletor o local onde voc ir inserir qual elemento ter a regra que voc definir. Pode ser body, span, div, h1, h3, p… E claro, uma class ou id.
Na propiedade voc ir comear a definir as regras do seu seletor como por exemplo: font-size, background-color, margin…
No valor voc poder estar definindo um valor para a sua propiedade, no caso seria: font-size:11px;.
Exemplo de sintaxe
Vamos formatar todos os pargrafos do site.
- p {
- font-family: Arial, Verdana, sans-serif;
- font-size:11px;
- color:#000000;
- }
- Primeiro defini a fonte do texto, a padro Arial, caso no exista ser substituda por Verdana, caso Verdana no exista ela ser substituda por qualquer fonte no computador que no tenha serifa.
- Defini o tamanho da fonte para 11 (onze) pixels.
- A cor ser preto. Eu poderia ter inserido a palavra black no lugar do valor #000000.
Agrupamento
O agrupamento de seletores um mtodo bastante prtico de definir regras de estilizao e posicionamento para diversos elementos ao mesmo tempo.
Exemplo de Agrupamento
Agrupando todos os cabealhos do documento com a mesma estilizao. Texto com o valor #444444 e alinhado ao centro.
- h1, h2, h3, h4, h5, h6 {
- color:#444444;
- text-align:center;
- }
O Seletor Classe
Com o seletor classe voc poder definir diferentes estilos para diversos tipos de elementos XHTML.
Exemplo de Seletor Classe
- .pequeno {
- font-size:10px;
- }
- .maior {
- font-size:16px;
- }
Agora no nosso XHTML:
- <p>Lorem ipsum dolor <span class=”pequeno”>sit amet</span>, consectetuer <span class=”maior”>adipiscing elit</span>
In eros est, <span class=”pequeno”>ultricies</span> quis, sagittis auctor, <span class=”maior”>condimentum</span> a, nunc.</p>
Repare que o seletor classe necessrio inserir no CSS um ponto antes do nome. Voc pode repetir as classes quantas vezes quiser.
No use caracteres especiais e nmeros para definir o nome de um seletor, e evite colocar letras maisculas. 
O Seletor ID
possvel definir estilos de elementos no XHTML com o seletor de identificao (id). O seletor de identificao definido com a #. Diferente das Classes, cada ID s poder ser utilizado uma nica vez. Normalmente usamos para definir posicionamento e estilizao de titulo, topo, menu, corpo e rodap.
Exemplo de Seletor ID
Vamos definir uma regra para o nosso topo. Ele ter fundo cinza.
- #topo {
- background-color:#cccccc;
- }
Nosso XHTML ficar assim:
- <div id=”topo”></div>
Comentrios no CSS
bom comentar no seu cdigo CSS para poder futuramente lembrar onde comeou a definir tal bloco, etc. Os comentrios, como nas demais linguagens, ignorado pelos browsers. Como na linguagem C, os comentrios comeam com " / * " e terminam com " */ ".
Exemplo de Comentrios no CSS
- /* Aqui comea o topo */ #topo { background-color:#cccccc;
Cuidado para no sujar muito seu cdigo com comentrios. s vezes tentando se organizar, acaba se perdendo no cdigo.
Ae muleke.. isso mesmo.. ensinando a galera…
Ae, blz?
Muito bom!
Mas aqui em meu IE est com um pequeno problema nos cdigos!
Eles esto aparecendo muito para a esquerda, ou seja, no consigo ler os primeiros caracteres!
Flw ai
Oi Cosme, zicou seu codigo.. aqui no firefox ta estranho.. ta feio demais amigo.. arruma ae, ta parecendo q o css nao esta sendo carregado.
Fuiii
Parabns pelo artigo cara, pode apostar, ir ajudar a muita gente…
Abraos
ah e verdadee esqueci de comentar… teu site no Firefox est bem zuado mesmo… no estou criticando, apenas te dando uma dica… Como o amigo de cima falou, o CSS est falhando e est aparecendo alguns trechos do cdigo ao invs da pgina em si…
Exemplo
fim da caixa eu gosto de ler
e outros
truncou geral aqui o layout do blog cosme
seu blog ta meio zoniado no FF cabra.
ESt timo o comentrio, mas o design do seu site est “estourando” no firefox, o contedo ta passando do layout. Abrao/!
Alcir Lima Webdesigner e trabalha com desenvolvimento de sites / criao de sites. Profissional qualificado e certificado pela Macromedia. Visite seu site e solicite um oramento sem compromisso.http://www.alcirlima.com.br