CSS
No site do Maujor tem um tutorial sobre CSS muito bom, vou deixar aqui algumas partes relevantes.
A regra CSS tem sua própria sintaxe e define como o estilo será aplicado aos elementos do HTML:
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)
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çõesCSS
constantes da regraCSS
. O ponto-e-vírgula é facultativo quando a regraCSS
for constituída de uma só declaraçãoCSS
e também facultativo após a última declaraçãoCSS
quando houver mais de uma declaraçãoCSS
.
**Agrupamento de Seletores**
A regra será aplicada a mais de um seletor, basta utilizar a vírgula(,
).
h1, h2, p, .box {
color: green;
}
**Seletor classe** Você pode criar uma regra para uma classe específica e colocá-la no HTML como o atributo `class`. No seu código CSS, utilize o nome da sua classe precedido de ponto(`.`):
elemento.nomedaclasse {
propriedade: valor;
}
Seletor ID
A grande diferença entre o seletor id e o de classe é a unicidade. Ou seja, um seletor id de determinado nome só pode ser definido a um e somente um elemento
HTML
dentro do documento.
É a mesma ideia da classe, porém o id
é precedido do #
("cerquilha"/"tralha"/"jogo-da-velha"):
#meuID {
propriedade: valor;
}
Inserindo comentários nas CSS
Comentários em CSS começam 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: