Sintaxe e Semântica do CSS

Sintaxe do CSS

Elemento	Descrição	Exemplo
Sintaxe do CSS	A estrutura básica de uma regra CSS é composta por um seletor e um bloco de declaração.	p { color: blue; font-size: 16px; }
Seletor	Identifica quais elementos HTML serão estilizados.	p (parágrafo), .classe (classe), #id (id)
Bloco de Declaração	Contém uma ou mais declarações de estilo, delimitado por {}.	{ color: blue; font-size: 16px; }
Declaração	Define uma propriedade CSS e seu valor, separados por : e terminados por ;.	color: blue;
Propriedade	Aspecto do elemento que será estilizado.	color, font-size
Valor	Especifica o valor da propriedade CSS.	blue, 16px

Tipos de Seletores

Tipo de Seletor	Descrição	Exemplo
Seletor de Tipo	Seleciona todos os elementos de um tipo específico.	h1 { color: red; }
Seletor de Classe	Seleciona todos os elementos que possuem uma classe específica.	.classe { background-color: yellow; }
Seletor de ID	Seleciona o elemento único que possui um ID específico.	#id { margin: 20px; }
Seletores Combinados	Seleciona elementos baseados em relações hierárquicas ou combinadas.	div p { color: green; } (descendente), div > p { color: blue; } (filho)
Pseudo-classes	Aplica estilos a elementos com base em seu estado.	a:hover { text-decoration: underline; }
Pseudo-elementos	Aplica estilos a partes específicas de um elemento.	p::first-line { font-weight: bold; }

Classes e IDs

Tipo	Descrição	Exemplo
Classe	Permite reutilizar estilos para múltiplos elementos.	.container { background-color: #eaeaea; padding: 20px; }
ID	Define estilos únicos para um elemento específico.	#main-title { color: #333; font-size: 24px; }

Unidades de Medida

Unidade de Medida	Descrição	Exemplo
Absolutas	Unidades fixas de medida.	px (pixels), cm (centímetros), mm (milímetros), in (polegadas), pt (pontos), pc (picas)
Relativas	Unidades relativas ao elemento pai ou à tela.	em (tamanho da fonte do elemento pai), rem (tamanho da fonte da raiz), % (percentual), vw (viewport width), vh (viewport height)

Propriedades Comuns

Propriedade Comum	Descrição	Exemplo
Cor e Fundo	Define a cor do texto e o fundo dos elementos.	color: #333;, background-color: #f4f4f4;
Texto e Fontes	Define a aparência do texto e fontes.	font-size: 16px;, font-family: Arial, sans-serif;, text-align: center;
Espaçamento	Define margens e preenchimentos ao redor dos elementos.	margin: 20px;, padding: 10px;
Borda e Sombra	Define bordas e sombras ao redor dos elementos.	border: 1px solid #000;, box-shadow: 2px 2px 5px rgba(0,0,0,0.5);

Exemplos Avançados

Exemplo Avançado	Descrição	Exemplo
Uso de Classes e IDs	Define estilos específicos para classes e IDs.	.container { background-color: #eaeaea; padding: 20px; }, #main-title { color: #333; font-size: 24px; }
Layouts com Flexbox	Cria layouts flexíveis e responsivos.	.flex-container { display: flex; justify-content: space-between; align-items: center; }, .flex-item { flex: 1; margin: 10px; }