CSS Syntax
A CSS conjunto de regras consiste em um seletor e um bloco de declaração:
Os pontos seletor para o elemento HTML que você quer denominar.
O bloco de declaração contém uma ou mais declarações separadas por ponto e vírgula.
Cada declaração inclui um nome de propriedade CSS e um valor, separados por dois pontos.
Uma declaração CSS sempre termina com um ponto e vírgula, e blocos de declaração são cercadas por chaves.
No exemplo a seguir todos <p> elementos será de centro-alinhados, com uma cor de texto vermelho:
CSS seletores
Seletores CSS são utilizados para "find" (ou selecione) elementos HTML com base em seu nome de elemento, id, classe, atributo, e muito mais.
O seletor de elemento
O seletor de elemento seleciona elementos com base no nome do elemento.
Você pode selecionar todos <p> elementos em uma página como esta (neste caso, todos os <p> elementos será de centro-alinhados, com uma cor de texto vermelho):
O seletor de id
O seletor id usa o atributo id de um elemento HTML para selecionar um elemento específico.
O id de um elemento deve ser único dentro de uma página, para que o seletor id é usado para selecionar um elemento único!
Para selecionar um elemento com um id específico, escrever um personagem cardinal (#), seguido da identificação do elemento.
A regra de estilo abaixo será aplicada ao elemento HTML com id="para1" :
 | Nota: um nome de ID não pode começar com um número! |
|---|
O seletor de classe
O seletor de classe seleciona elementos com um atributo de classe específico.
Para selecionar elementos com uma classe específica, escreva uma period (.) caráter, seguido do nome da classe.
No exemplo abaixo, todos os elementos HTML com class="center" será vermelho e alinhado ao centro:
Você também pode especificar que elementos HTML única específicos deverão ser afectados por uma classe.
No exemplo abaixo, única <p> elementos com class="center" será o centro-alinhados:
elementos HTML também pode se referir a mais de uma classe.
No exemplo abaixo, o <p> elemento será denominado de acordo com a class="center" e class="large" :
| Nota: um nome de classe não pode começar com um número! |
|---|
agrupamento seletores
Se você tem elementos com as mesmas definições de estilo, como este:
h1
{
text-align: center;
color: red;
}
h2
{
text-align: center;
color: red;
}
p
{
text-align: center;
color: red;
}Será melhor para agrupar os selectores, para minimizar o código.
Para agrupar seletores, separe cada selector com uma vírgula.
No exemplo abaixo temos agrupados os seletores do código acima:
CSS Comentários
Os comentários são usados para explicar o código, e pode ajudar quando você editar o código-fonte em uma data posterior.
Os comentários são ignorados pelos navegadores.
Um comentário CSS começa com /* and ends with */ . Os comentários também podem abranger várias linhas:
Exemplo
p
{
color: red;
/* This is a single-line comment */
text-align: center;
}
/* This is
a multi-line
comment */
Tente você mesmo " Teste-se com exercícios!
Exercício 1 » Exercício 2» Exercício 3 » Exercício 4»