Sintaxe do CSS

Neste tutorial, você aprenderá como definir regras CSS em uma tabela de estilos, onde você pode definir estilos para elementos HTML usando propriedades CSS. Diferentes elementos HTML podem ter diferentes propriedades CSS que podem ser configuradas. As propriedades CSS podem ser organizadas em regras CSS. As regras CSS combinam um conjunto de propriedades CSS e aplicam todas essas propriedades aos elementos HTML correspondentes às regras CSS.

Entenda a sintaxe do CSS

A tabela de estilos CSS é composta por um conjunto de regras, que são interpretadas pelo navegador da web e aplicadas aos elementos correspondentes no documento, como parágrafos, títulos, etc.

As regras CSS têm duas partes principais, um seletor e uma ou mais declarações:

O seletor especifica qual elemento da página HTML a regra CSS deve aplicar.

enquanto as declarações dentro do bloco determinam o formato do elemento na página da web. Cada declaração contém uma propriedade e um valor, esses valores são separados por dois pontos (:）separadas por ponto e vírgula (;）termina e o grupo de declarações é delimitado por chaves{}.

Esta propriedade é a que você deseja alterar o estilo. Elas podem ser fonte, cor, fundo, etc. Cada propriedade tem um valor, por exemplo, a propriedade cor pode ter valor azulou#0000FFetc.

h1　{cor:azul;texto-align:center;}

Para tornar o CSS mais legível, você pode colocar uma declaração em cada linha, conforme exemplo a seguir:

h1　{
　　　　color: blue;
　　　　text-align: center;
　　　}

No exemplo acimah1é um seletor,coloretext-aligné um atributo CSS, enquanto o dadoblue (h1cor do texto no rótulo é azul)ecenter(h1alinhamento de texto no rótulo centralizado)são os valores correspondentes desses atributos.

Escrever comentários com CSS

Normalmente, os comentários são adicionados para tornar o código-fonte mais fácil de entender. Eles podem ajudar outros desenvolvedores (ou você mesmo quando editar o código-fonte no futuro) a entender o que você está tentando fazer com CSS. Os comentários são importantes para os programadores, mas são ignorados pelos navegadores.

Os comentários CSS começam com/*para encerrar*/como exemplo:

/*　Este é um comentário CSS　*/
h1　{
　　　　color: blue;
　　　　text-align: center;
}
/*　Este é um multi-comentário CSS que se estende por mais de uma linha　*/
p {
　　　　font-size:　18px;
　　　　text-transform: uppercase;
}

Você também pode comentar parte do código CSS para depuração, conforme exemplo a seguir:

h1　{
　　　　color: blue;
　　　　text-align: center;}
/*p {
　　　　font-size:　18px;
　　　　text-transform: uppercase;}
*/

Case sensitive no CSS

Embora os nomes dos atributos CSS e muitos valores de atributo não sejam case sensitive. Mas os seletores CSS são case sensitive, por exemplo:.maincontentE.mainContentSão dois diferentes seletores de classe, são case sensitive.

Portanto, para segurança, você deve assumir que todos os componentes das regras CSS são case sensitive.

EmCapítulo seguinteAqui, você aprenderá vários tipos de seletores de CSS.