CSS
Uma regra CSS
segue uma sintaxe própria que define como será aplicado estilo a um ou mais elementos da marcação HTML
de uma página. A regra, 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 a seguir:
seletor { propriedade: valor; }
- seletor: é um elemento da marcação
HTML
identificado pelo seu nome (por exemplo:<p>
,<h1>
,<form>
), pelo nome de uma classe aplicada ao elemento da marcaçãoHTML
(por exemplo:.topo
,.principal
,.menu
), pelo nome de um identificador ID aplicado ao elemento da marcaçãoHTML
(por exemplo:#tudo
,#auxiliar
,#rodape
) ou por qualquer outro identificadorCSS
de elementos ou trechos da marcaçãoHTML
, genericamente denominados de seletoresCSS
. - propriedade: é a propriedade do elemento
HTML
ao qual será aplicada a estilização definida no valor (por exemplo: tamanho da fonte, cor do texto, altura do elemento). - valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo arial, cor azul, fundo verde, altura igual a 300px)
Ao conjunto propriedade: valor denominamos declaração CSS
.
Na sintaxe de uma regra CSS
, escreve-se o seletor e a seguir a propriedade e o valor separados por dois pontos e colocados entre chaves {
}
.
É possível escrever mais de uma declaração CSS
em uma regra com o objetivo de estilizar-se várias propriedades de um mesmo seletor. Neste caso deve-se usar ponto-e-vírgula para separar as declarações CSS
constantes da regra CSS
. O ponto-e-vírgula é facultativo quando a regra CSS
for constituída de uma só declaração CSS
e também facultativo após a última declaração CSS
quando houver mais de uma declaração CSS
.
É recomendável que se use, sempre, o ponto-e-vírgula após cada declaração CSS
, pois no caso de futuramente ter que se acrescentar mais declarações na regra CSS
não se corra o risco de esquecer eventual ponto-e-vírgula inicialmente omitido.
**Agrupamento de Seletores**
Agrupando seletores pode-se fazer com que uma regra CSS
seja aplicada a mais de um seletor. Para agrupar seletores separe-os com uma vírgula. No exemplo abaixo agrupamos todos o elementos cabeçalho de níveis 1 e 2 os parágrafos e o elemento com a classe .box
. A cor do texto de todos eles será verde.
h1, h2, p, .box {
color: green;
}
**Seletor classe**
Mas você não está restrito somente aos elementos HTML
(tags) para aplicar regras de estilo.
Você pode "inventar" um nome e defini-lo como valor a ser atribuído ao atributo class
(classe) do elemento HTML
. O nome "inventado" será o seletor para aplicar declarações 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):
elemento.nomedaclasse {
propriedade: valor;
}
Seletor ID
O seletor ID difere do seletor classe, por ser ÚNICO. Um seletor ID de determinado nome só pode ser definido a UM e somente UM elemento HTML dentro do documento.
Você pode "inventar" um nome e com ele criar um ID que será o seletor para definir a regra 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 #
("cerquilha"/"tralha"/"jogo-da-velha"):
#meuID {
propriedade: valor;
}
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. Um comentário nas CSS
começa com o sinal /*
e termina com */
:
/* este é um comentário*/
p {
font-size: 14px; /* este é outro comentário*/
color: #000;
font-family: Arial, Serif;
}
No seu exemplo:
.e1{}
: estilo será aplicado na classe.e1
#e1{}
: estilo será aplicado no id#e1
e1 e2{}
: o estilo será aplicado dentro do elementoe2
que está dentro dee1
, vou te dar um exemplo:Suponha que
e1
seja atable
ee2
atd
, que tem a classepadrao
:.table td.padrao { font-size: 10pt; color: red; }
Todas as
td
, que tiverem a classepadrao
, datable
terão tamanho da fonte10pt
e cor vermelha.
e1,e2{}
: aplica o estilo nos dois.e1 *{}
: aplica o estilo para todos os elementos dentro dee1
,e1{}
: aplica o estilo noe1
, um exemplo seria obody
:body { min-width: 650px; }
.e1 a:link{}
= olha o exemplo, ele "muda" o estilo de um link quando você passa o mouse sobre ele:a:hover { background-color: yellow; }
Referência: