Sintaxe e seleção de elementos

Introdução à Sintaxe CSS

CSS, ou Cascading Style Sheets, é uma linguagem de estilo utilizada para descrever a apresentação de um documento escrito em HTML ou XML. A sintaxe do CSS é simples e consiste em um conjunto de regras. Cada regra é composta por um seletor e um bloco de declarações. O seletor indica qual elemento HTML a regra deve ser aplicada, enquanto o bloco de declarações contém as propriedades e valores que definem o estilo.

Estrutura Básica de uma Regra CSS

Uma regra CSS é composta por:

• Seletor: Indica o elemento HTML que será estilizado.
• Declaração: Conjunto de propriedades e valores que definem o estilo.

Exemplo de uma regra CSS:

h1 {
  color: blue;
  font-size: 20px;
}

Neste exemplo, o seletor h1 aplica as declarações de cor e tamanho de fonte aos elementos <h1> do documento HTML.

Seletores CSS

Os seletores são uma parte fundamental do CSS, pois eles definem quais elementos HTML serão afetados pelas regras de estilo. Existem diferentes tipos de seletores que permitem uma seleção precisa dos elementos:

Seletores Simples

• Seletor de Tipo: Seleciona elementos pelo nome da tag. Exemplo: p seleciona todos os parágrafos.
• Seletor de Classe: Seleciona elementos com um atributo de classe específico. Exemplo: .classe seleciona todos os elementos com a classe 'classe'.
• Seletor de ID: Seleciona um elemento com um atributo de ID específico. Exemplo: #id seleciona o elemento com o ID 'id'.

Seletores Combinadores

Os combinadores permitem combinar seletores para selecionar elementos baseados em suas relações com outros elementos:

• Combinador Descendente: Seleciona elementos que são descendentes de um elemento específico. Exemplo: div p seleciona todos os parágrafos dentro de divs.
• Combinador Filho: Seleciona elementos que são filhos diretos de um elemento específico. Exemplo: ul > li seleciona apenas os li que são filhos diretos de uma ul.
• Combinador Adjacente: Seleciona o elemento imediatamente após um elemento específico. Exemplo: h1 + p seleciona o parágrafo imediatamente após um h1.
• Combinador de Irmãos Gerais: Seleciona todos os elementos que são irmãos de um elemento específico. Exemplo: h1 ~ p seleciona todos os parágrafos que são irmãos de um h1.

Pseudo-classes e Pseudo-elementos

As pseudo-classes e pseudo-elementos permitem aplicar estilos com base em informações que não estão contidas no documento HTML:

• Pseudo-classes: Selecionam elementos com base em seu estado. Exemplo: a:hover aplica estilo a links quando o usuário passa o mouse sobre eles.
• Pseudo-elementos: Selecionam uma parte específica de um elemento. Exemplo: p::first-line aplica estilo à primeira linha de um parágrafo.

Propriedades CSS Comuns

O CSS oferece uma ampla gama de propriedades que permitem controlar a aparência dos elementos:

Propriedades de Texto

• color: Define a cor do texto.
• font-size: Define o tamanho da fonte.
• font-weight: Define o peso da fonte (negrito, normal, etc.).
• text-align: Alinha o texto (esquerda, direita, centro, justificado).

Propriedades de Layout

• margin: Define a margem ao redor de um elemento.
• padding: Define o preenchimento dentro de um elemento.
• border: Define a borda de um elemento.
• width e height: Define a largura e altura de um elemento.

Propriedades de Cor de Fundo

• background-color: Define a cor de fundo de um elemento.
• background-image: Define uma imagem de fundo para um elemento.

Especificidade e Cascata

No CSS, a especificidade determina quais regras de estilo são aplicadas quando múltiplas regras se aplicam ao mesmo elemento. A especificidade é calculada com base nos seletores usados. Regras com seletor de ID têm maior especificidade do que regras com seletor de classe, que por sua vez têm maior especificidade do que regras com seletor de tipo.

A cascata refere-se à forma como as regras de estilo são aplicadas. Se duas regras têm a mesma especificidade, a última regra no código terá precedência. É importante entender a cascata e a especificidade para evitar conflitos de estilo e garantir que o CSS funcione conforme o esperado.

Conclusão

Compreender a sintaxe e a seleção de elementos no CSS é fundamental para criar estilos eficazes e eficientes para seus sites. Ao dominar os diferentes tipos de seletores e como usá-los em conjunto com propriedades CSS, você poderá criar layouts complexos e esteticamente agradáveis que funcionam bem em uma variedade de dispositivos e navegadores.