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 */
}body {
background: #FFFFFF;
}Se o valor for uma palavra composta, deverá estar entre aspas duplas " ", ou simples ':
h3 {
font-family: "Comic Sans MS"
}p {
text-align: right;
color: #FF0000;
}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;
}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><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 IDsó 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;
}Inserindo comentários nas CSS
Você pode inserir comentários nas CSS para explicar seucó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;
}
0 comentários:
Postar um comentário
Gostou do que encontrou aqui?
Comente este artigo que acabou de ler.
Quer entrar em contato ou tirar alguma dúvida? Formulário de Contato
Nos comentários dos artigos escreva apenas o que for referente ao tema.
Antes de Comentar leia nossa Política para Comentários para saber como interagir com nossos artigos, tirar suas dúvidas e ser respondido(a).