Reset Global

Reset CSS global do projeto.


* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  width: 100%;
  height: 100vh;
  position: relative;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
}

body {
  font-family: var(--font-family);
}

button,
input,
select,
textarea {
  font-family: inherit;
}

ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

h1,
h2,
h3,
p,
a,
blockquote,
dd {
  margin: 0;
  padding: 0;
}

Display inline e block

O display inline e block são dois tipos de display que podem ser usados para controlar como um elemento é exibido na página. O display inline é usado para exibir um elemento como uma linha, enquanto o display block é usado para exibir um elemento como um bloco. O display inline-block é usado para exibir um elemento como um bloco, mas com a possibilidade de ser inline.

Display inline

Inline

Inline block

Block

.inline {
  display: inline;
  border: 1px solid red;
  margin: 4px;
}
.inline-block {
  display: inline-block;
  border: 1px solid red;
  margin: 4px;
}
.block {
  display: block;
  border: 1px solid red;
  margin: 4px;
}

Display grid

Demonstrações visuais das propriedades de CSS Grid.

grid-template: columns | rows | areas

gap

grid-template-columns

grid-template-rows

grid-template-areas

Com o display: grid é possível definirmos colunas e linhas nomeadas para organizarmos os elementos que estiverem dentro do grid.

grid: column | row

grid-column

grid-row

grid-area

align-content | justify-content

align-content · justify-content · place-content

align-items | justify-items

align-items · justify-items · place-items

align-self | justify-self

align-self · justify-self · place-self

Pseudo-classes

Estados especiais de um elemento, sem precisar adicionar classes no HTML.

:focus

Elemento em foco, usando o teclado (Tab).

Navegue com Tab

:active

Quando clicamos no elemento.

Clique e segure

:visited

Para links que já foram visitados.

Link externo (visite e volte)

a {
  display: inline-block;
  padding: 1rem 2rem;
  font-size: 1.5rem;
  font-family: Arial;
  text-decoration: none;
  background: #caf;
  color: #217;
}

a:focus {
  outline: 3px solid #217;
  outline-offset: 4px;
}

a:active {
  background: #217;
  color: #caf;
}

a:visited {
  background: #acf;
  color: #512;
}

Seletores

Seletores estruturais para escolher elementos pela posição na lista.

:first-child

Seleciona o primeiro elemento.

Item 1
Item 2
Item 3
Item 4

:last-child

Seleciona o último elemento.

Item 1
Item 2
Item 3
Item 4

:nth-child

4 (quarto elemento), even (pares), odd (ímpares), 3n (de 3 em 3).

:nth-child(4)

1
2
3
4
5

:nth-child(even)

1
2
3
4
5

:nth-child(odd)

1
2
3
4
5

:nth-child(3n)

1
2
3
4
5
6

/* primeiro elemento */
.lista-1 li:first-child {
  background: #caf;
}

/* último elemento */
.lista-1 li:last-child {
  background: #cfa;
}

/* quarto elemento */
.lista-2 li:nth-child(4) {
  background: #caf;
}

/* pares */
.lista-3 li:nth-child(even) {
  background: #caf;
}

/* ímpares */
.lista-4 li:nth-child(odd) {
  background: #caf;
}

/* de 3 em 3 */
.lista-5 li:nth-child(3n) {
  background: #caf;
}

:not

O :not nega a seleção de um elemento específico.

Item 1
Item 2
Item 3
Item 4

.lista-6 li:not(:last-child) {
  border-bottom: 2px solid #217;
}

Seletores modernos

Seletores modernos são regras do CSS que funcionam como filtros avançados. Um seletor é a mira que aponta para um elemento HTML e aplica um estilo, como cor ou tamanho.

Eles permitem regras complexas que antes exigiam código repetido ou JavaScript.

:is() e :where()

Encurtam o código quando o mesmo estilo vale para vários lugares. A diferença: o :where() não tem peso (especificidade), então é mais fácil sobrescrever depois.

:is()

header

main

:where() sobrescrito no banner

card

:has()

O :has() funciona como uma regra de condição visual. Ele é conhecido como o seletor de pai.

Imagine várias caixas, os elementos pai. O :has() olha o conteúdo de cada caixa e cria a regra: se esta caixa tiver um item específico dentro dela, o elemento filho, mude a cor de fora da caixa.

Antes, o CSS só agia em uma direção: alterar o item de dentro a partir da caixa de fora. O caminho inverso exigia JavaScript. Agora o CSS faz isso sozinho.

Aviso comum

Este é um aviso sem urgência.

Aviso crítico

Falha no sistema!

Este cartão possui um alerta de erro.

<!-- Cartão normal -->
<div class="cartao">
  <h2>Aviso comum</h2>
  <p>Este é um aviso sem urgência.</p>
</div>

<!-- Cartão de erro -->
<div class="cartao">
  <h2>Aviso crítico</h2>
  <span class="erro">Falha no sistema!</span>
  <p>Este cartão possui um alerta de erro.</p>
</div>

/* CSS base para todos os cartões (tema escuro) */
.cartao {
  background-color: #1a1a1a;
  border: 1px solid #333;
  padding: 20px;
  margin-bottom: 15px;
  color: #fff;
}

/* A div.cartao que tiver .erro dentro ganha borda vermelha */
.cartao:has(.erro) {
  border: 2px solid #ff4444;
}

:not()

Aplica o estilo a todos os elementos, exceto o que você especificar.

Item 1
Ativo
Item 3
Item 4

/* --- 1. :is() --- */
/* Jeito antigo, repetitivo: */
header p, main p, footer p { color: #ccc; }

/* Jeito moderno: */
:is(header, main, footer) p {
  color: #ccc;
}

/* --- 2. :where() --- */
/* Aplica o estilo, mas permite que seja facilmente sobrescrito */
:where(.card, .banner, .sidebar) a {
  text-decoration: none;
}

/* --- 3. :has() --- */
/* A .cartao que tiver .erro dentro ganha borda vermelha */
.cartao:has(.erro) {
  border: 2px solid #ff4444;
}

/* --- 4. :not() --- */
/* Opacidade em todos os itens, menos o .ativo */
li:not(.ativo) {
  opacity: 0.5;
}

Aspect ratio

O aspect-ratio define a proporção entre a largura e a altura de um elemento. Ele funciona como uma moldura fixa para quadros ou telas.

Se a moldura é retangular e a largura aumenta, o navegador calcula a altura sozinho para manter o formato. Antes, era preciso calcular a altura na mão para vídeo e imagem não amassarem em telas diferentes.

16 / 9 e 1 / 1

<div class="video"></div>
<img class="avatar" src="perfil.jpg" alt="Avatar">

.video {
  width: 100%;
  /* 16 de largura para 9 de altura: proporção de vídeo */
  aspect-ratio: 16 / 9;
  background-color: #2a2a2a;
}

.avatar {
  width: 150px;
  /* quadrado perfeito */
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover; /* preenche a moldura sem deformar */
}

Deixar o CSS calcular a altura torna o layout responsivo mais rápido e o código mais limpo.

Content visibility

O content-visibility é uma ferramenta de performance. Ele funciona como um modo soneca para partes do código.

Em vez de o navegador desenhar a página inteira de uma vez, a regra avisa: só processe essa seção quando o usuário rolar e chegar perto dela.

O problema

Em páginas muito longas, o carregamento inicial fica lento e pode travar o aparelho. Com essa regra, o navegador ignora a matemática visual do que está fora da tela, e o começo da página aparece quase na hora.

contain-intrinsic-size

Se o navegador não desenha o elemento, a altura dele vira zero. Quando a seção entra na tela, a barra de rolagem salta. O contain-intrinsic-size reserva um tamanho aproximado antes do conteúdo ser processado.

Muitos dados aqui

Esta caixa só é desenhada quando chega perto da tela. A reserva de altura evita o salto da rolagem.

<!-- Seção pesada: rodapé complexo ou lista de comentários -->
<section class="secao-pesada">
  <h2>Muitos dados aqui</h2>
  <!-- Centenas de elementos HTML -->
</section>

.secao-pesada {
  /* renderiza só quando chega perto da tela */
  content-visibility: auto;

  /* reserva 800px para a rolagem não pular */
  contain-intrinsic-size: 800px;

  background-color: #1a1a1a;
  border: 1px solid #333;
}

Transition

O transition controla a velocidade e a suavidade de uma mudança visual. Em vez de um corte seco, ele anima o caminho entre um estado e outro.

Sem ele, a lâmpada liga e desliga de uma vez. Com ele, o interruptor vira um dimmer: a luz acende e apaga aos poucos.

O que declarar

A regra fica no estado original do elemento. Ela define o que muda, quanto tempo dura e o ritmo.

background-color, transform ou all escolhem a propriedade. 0.3s é a duração. ease começa rápido e termina devagar; linear mantém a velocidade constante.

<button class="botao-turbo">Adicionar ao Carrinho</button>

.botao-turbo {
  background-color: #1a1a1a;
  color: #fff;
  border: 1px solid #333;
  padding: 15px 30px;
  font-size: 16px;
  cursor: pointer;

  /* qualquer mudança demora 0.3s em ritmo suave */
  transition: all 0.3s ease;
}

.botao-turbo:hover {
  background-color: #333;
  border-color: #666;
  transform: scale(1.05);
}

Movimento

Transform, animation e view transition ditam como as coisas se movem e mudam de formato. Cada um resolve um tipo diferente de mudança.

Transform

Altera a geometria: mover, girar, crescer ou encolher, sem empurrar o que está ao redor. Sozinho ele só troca o estado. Junto com transition, a troca fica suave.

Passe o mouse

Animation

O transition só vai do ponto A ao B, em geral no hover. O animation monta um filme com vários passos, sozinho e em loop, usando @keyframes como linha do tempo.

Atenção

View transition

Cria uma passagem suave entre telas ou grandes partes do layout. O navegador fotografa a tela antiga e a nova e interpola as duas. Antes, isso pedia bibliotecas de JavaScript.

O view-transition-name marca o elemento. Quando o estado muda, essa imagem vai da posição antiga para a nova sem corte seco.

<div class="caixa-transform">Passe o mouse</div>
<div class="caixa-animada">Atenção</div>
<img class="imagem-destaque" src="carro.jpg" alt="Carro">

/* --- 1. Transforms --- */
.caixa-transform {
  background-color: #1a1a1a;
  border: 1px solid #333;
  padding: 20px;
  width: 150px;
  transition: transform 0.3s ease;
}

.caixa-transform:hover {
  transform: translateY(-10px) scale(1.1);
}

/* --- 2. Animations --- */
.caixa-animada {
  background-color: #ff4444;
  padding: 20px;
  width: 150px;
  animation: pulso 2s infinite;
}

@keyframes pulso {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.8; }
  100% { transform: scale(1); opacity: 1; }
}

/* --- 3. View Transitions --- */
.imagem-destaque {
  view-transition-name: transicao-carro-principal;
}

Clean CSS

Programa de linha de comando (CLI) utilizado para otimizar o CSS (diminuir o tamanho e concatenar diferentes arquivos em um único).

clean-css-cli

Remover Globalmente

npm remove -g NOMEDOPACOTE

Clean CSS CLI

Programa de linha de comando (CLI) utilizado para otimizar o CSS (diminuir o tamanho e concatenar diferentes arquivos em um único).

clean-css-cli

Pacote no npm

npm install -g clean-css-cli

Uso

cleancss -o style.min.css style.css

Troca de Tema

Propriedades customizadas e preferência de tema do sistema.

Propriedades Customizadas

Também conhecidas como variáveis CSS (custom properties), permitem definirmos valores no CSS que podem ser reutilizados no nosso código.

A propriedade é herdada pelos elementos filhos. É comum definirmos as mesmas nos elementos :root ou html, assim teremos acesso à propriedade em todos os elementos do site.

--roxo: #caf — define uma propriedade customizada.

var(--roxo) — a função var utiliza uma propriedade customizada.

:root {
  --tamanho-titulo: 3rem;
  --cor-primaria: #84e;
}

h1 {
  font-size: var(--tamanho-titulo);
  color: var(--cor-primaria);
}

prefers-color-scheme

A @media prefers-color-scheme executa o código CSS conforme a preferência de tema do usuário. Funciona da mesma forma que o media query com max-width, porém em relação ao modo escuro (dark) ou claro (light).

:root {
  --fundo: #fff;
  --texto: #111;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #111;
    --texto: #fff;
  }
}

body {
  background: var(--fundo);
  color: var(--texto);
}