Cascading Style Sheets (CSS) permite transformar a aparência de suas páginas da web. De fontes e cores a espaçamento e layout geral, todos os tipos de ferramentas de design estão ao seu alcance. Embora CSS seja uma linguagem complicada em sua totalidade, existem apenas dois conceitos básicos que você precisa entender para começar.
Tudo começa identificando exatamente qual parte da página você deseja estilizar.
CSS = Seletores + Declarações
Um arquivo CSS contém uma série de regras que descrevem como um arquivo HTML deve ser formatado. Cada regra consiste em duas partes: o que estilizar e como estilizar. A primeira parte é controlada por uma série de termos conhecidos como “seletores”.
Os exemplos neste artigo incluem declarações de estilo, mas não são o foco: são os próprios seletores.
Historicamente, havia três níveis de seletor CSS (ou versões) com vários graus de suporte do navegador. Em 2020, de acordo com Eu posso usar, todos eles estão disponíveis para mais de 99% dos usuários em todo o mundo.
Seletores de nível 1
O nível 1 introduziu os quatro tipos fundamentais de seletores que cobrem um grande número de casos, ainda hoje.
| padronizar | Partidas |
|---|---|
E |
todos os elementos E |
.c |
todos os elementos com class = “c” |
#myid |
o elemento com id = “myid” |
E F |
um elemento F dentro de um elemento E |
| Pseudo-classes | |
E:link |
um hiperlink para uma página que não foi visitada anteriormente |
E:visited |
um hiperlink para uma página que já foi visitada |
E:active |
um hiperlink que está atualmente selecionado |
| Pseudo-elementos | |
E::first-line |
a primeira linha formatada de um elemento E |
E::first-letter |
a primeira letra formatada de um elemento E |
Seletor de tipo
O seletor mais simples é o “seletor de tipo”. Ele tem como alvo todas as instâncias de um elemento, como um parágrafo ou texto em negrito:
p { margin-bottom: 0; }
b { font-family: sans-serif; }Class Selector
O atributo class permite que mais semânticas sejam adicionadas a um elemento HTML, como um tipo específico de parágrafo. Esses elementos podem ser selecionados em CSS da seguinte maneira:
.intro { font-weight: bold; }Este seletor corresponderia a:
<p class="intro">…</p>Mas observe que também corresponderia a:
<ul class="intro">…</ul>Se você deseja que ele se aplique apenas a parágrafos de introdução, pode combinar o seletor de tipo e o seletor de classe:
p.intro { font-weight: bold; }Seletor de ID
O atributo HTML id deve ser único em um documento, por exemplo, se você tiver:
<div id="contents">…</div>Esse deve ser o único elemento com um id de “conteúdo”. Um seletor de ID permite que você direcione esse elemento específico em um documento:
#contents { color: #333; }Seletor de descendente
Estritamente, um “combinador”, porque este seletor trata do espaço entre dois outros. HTML é hierárquico, conforme explicado em nossa visão geral do DOM. Um seletor descendente permite que um elemento seja identificado por seu contexto dentro de outro elemento:
table b { font-weight: normal; }Pseudo classes e elementos
Os pseudo seletores têm como alvo classes ou elementos que não existem explicitamente, mas são disponibilizados de qualquer maneira. Pense neles como bônus de conteúdo especial:
p::first-line { text-transform: uppercase; }Listas de seletores
Use uma vírgula para combinar os seletores em uma lista se quiser aplicar o mesmo conjunto de regras a cada um. Ao invés de:
th { padding: 1em; }
td { padding: 1em; }Você pode escrever:
th, td { padding: 1em; }Especificidade
Uma folha de estilo é uma série de regras que usam um seletor para corresponder a um elemento, mas o que acontece quando mais de uma regra corresponde a um determinado elemento? O comportamento resultante é regido pela “especificidade” que define qual regra é usada em um caso como:
p.intro { color: black; }
p { color: gray; }Nesses casos, a regra que tem prioridade é definida por sua especificidade, da seguinte forma:
- Os seletores de ID (`# conteúdo`) são os mais específicos.
- Os seletores de classe (`.author`) são menos específicos.
- Os seletores de tipo (`p`) são os menos específicos.
Ao calcular a especificidade, cada nível é considerado apenas se dois seletores tiverem a mesma pontuação no nível superior, então “#contents” é mais específico do que “article.news p.author.special” porque o anterior “ganha” nos seletores de ID.
Seletores de nível 2
A próxima revisão de seletores CSS introduziu seletores de atributo, expandiu em pseudo-classes e pseudo-elementos, e adicionou dois novos combinadores.
| padronizar | Partidas |
|---|---|
* |
qualquer elemento |
E > F |
um elemento F filho de um elemento E |
E + F |
um elemento F imediatamente precedido por um elemento E |
| Seletores de atributos | |
E[foo] |
um elemento E com um atributo “foo” |
E[foo="bar"] |
um elemento E cujo atributo “foo” é exatamente “bar” |
E[foo~="bar"] |
um elemento E cujo atributo “foo” é uma lista de valores separados por espaços em branco, um dos quais é “bar” |
E[foo|="en"] |
um elemento E cujo atributo “foo” tem uma lista separada por hífen de valores começando com “en” |
| Pseudo-classes | |
E:first-child |
um elemento E, primeiro filho de seu pai |
E:lang(fr) |
um elemento do tipo E na linguagem “fr” |
| Pseudo-elementos | |
E::before |
conteúdo gerado antes do conteúdo de um elemento E |
E::after |
conteúdo gerado após o conteúdo de um elemento E |
Seletor Universal
O “*” corresponde a qualquer elemento. Nem sempre é tão útil, mas se quiser redefinir as margens padrão, por exemplo, você pode fazer isso:
* { margin: 0; }Seletores de Atributo
Os seletores de atributos permitem que os estilos sejam direcionados de forma muito específica, filtrados por um atributo de elemento:
aHow to Target Part of a Web Page Using CSS Selectors { text-decoration: underline dotted; }Combinador infantil: um elemento imediatamente dentro de outro
Semelhante ao combinador descendente, mas este corresponde apenas a filhos imediatos, não a descendentes mais abaixo na árvore. Por exemplo, “ul> li” corresponderá apenas ao texto da “Seção 1” aqui, e não à “Seção 1.1”:
<ul>
<li>
Section 1
<ul>
<li>Section 1.1</li>
<li>Section 1.2</li>
</ul>
<li>
</ul>
Combinador de irmãos adjacentes: o próximo irmão
h1 + p { font-weight: bold; }Freqüentemente útil para controlar as margens, ou um parágrafo introdutório sem uma classe específica, este seletor corresponde a um elemento apenas se ele seguir imediatamente outro. No exemplo, apenas o primeiro parágrafo aqui será correspondido, não o segundo:
<h1>Contents</h1>
some extra text
<p>Introductory paragraph</p>
<p>Following paragraph</p>
Observe que esse seletor considera apenas os elementos – não o texto – ao decidir qual é o próximo irmão.
Herança
Algumas propriedades CSS herdam seu valor de um elemento ancestral. Na prática, isso significa – por exemplo – que definir a face da fonte do elemento “corpo” significa que cada parágrafo, tabela, etc. também usa a mesma face da fonte.
Claro, isso é exatamente o que você esperaria, mas considere uma propriedade que não herda: “margem”, por exemplo. Você não gostaria que cada parágrafo individual ou pedaço de texto em negrito tivesse a mesma margem de todo o documento.
Uma boa regra é direcionar os elementos da maneira mais geral possível – não direcione cada elemento individual quando um simples seletor de “corpo” for suficiente.
Seletores de nível 3
Muitas outras pseudo classes foram adicionadas neste nível, junto com alguns seletores de atributos e um novo combinador.
| padronizar | Partidas |
|---|---|
E ~ F |
um elemento F precedido por um elemento E |
| Seletores de atributos | |
E[foo^="bar"] |
um elemento E cujo atributo “foo” começa com a string “bar” |
E[foo$="bar"] |
um elemento E cujo atributo “foo” termina com a string “bar” |
E[foo*="bar"] |
um elemento E cujo atributo “foo” contém a substring “bar” |
| Pseudo-classes | |
E:root |
um elemento E, raiz do documento |
E:nth-child(n) |
um elemento E, o enésimo filho de seu pai |
E:nth-last-child(n) |
um elemento E, o enésimo filho de seu pai, contando a partir do último |
E:nth-of-type(n) |
um elemento E, o enésimo irmão de seu tipo |
E:nth-last-of-type(n) |
um elemento E, o n-ésimo irmão de seu tipo, contando a partir do último |
E:last-child |
um elemento E, último filho de seu pai |
E:first-of-type |
um elemento E, primeiro irmão de seu tipo |
E:last-of-type |
um elemento E, último irmão de seu tipo |
E:only-child |
um elemento E, filho único de seu pai |
E:only-of-type |
um elemento E, único irmão de seu tipo |
E:empty |
um elemento E que não tem filhos (incluindo nós de texto) |
E:target |
um elemento E sendo o destino do URI de referência |
E:enabled |
um elemento E da interface do usuário que está habilitado |
E:disabled |
um elemento E da interface do usuário que está desativado |
E:checked |
um elemento E da interface do usuário que é verificado |
E:not(s) |
um elemento E que não corresponde ao seletor simples s |
Seletores de Atributo
Você pode selecionar elementos com um atributo que começa com um determinado valor: a[href^="https:"], termina com um determinado valor: img[src$=".gif"], ou contém um valor: a[*="value"].
Pseudo classes
As pseudo classes adicionais incluem “: último-filho”, “: vazio” (para corresponder a um elemento sem conteúdo) e “: verificado” que corresponde a um elemento como uma entrada de caixa de seleção, mas apenas quando está marcada.
Combinador geral de irmãos: um irmão seguinte
Semelhante ao Combinador de Irmãos Adjacentes do Nível 2, ele corresponde a qualquer irmão que vier após o outro, não apenas o próximo:
h1 ~ p { font-size: 110%; }Seletores CSS e como usá-los
Agora você sabe quase tudo que há para saber sobre como selecionar parte de uma página da Web usando CSS. Agora você está pronto para estilizar suas páginas com a grande variedade de propriedades CSS que cobrem tudo, desde cores até layout.
Crédito da imagem: Pankaj Patel /Unsplash
