Curso de CSS / Cores e unidades: px, em, rem e porcentagens

Cores em CSS podem ser escritas usando nomes, valores hexadecimais e funções como rgb(). Unidades de comprimento usam diferentes pontos de referência: px é um comprimento absoluto em CSS, em depende do tamanho da fonte, rem usa o tamanho da fonte raiz, e porcentagens dependem da propriedade que está sendo definida.

Compare nomes de cores, notação hexadecimal e RGB

teal, #008080 e rgb(0, 128, 128) expressam a mesma cor. Os nomes das cores são fáceis de ler, mas existem nomes predefinidos que podem ser usados, e hexadecimal e RGB são bons para controlar numericamente a quantidade de vermelho, verde e azul. RGB significa Red, Green, Blue (vermelho, verde e azul).

Alpha descreve a opacidade da cor: 20% permite que grande parte da cor de fundo apareça, enquanto 100% é opaco. O resultado exibido depende da cor de fundo. Adicionar alpha apenas ao fundo difere de definir opacity em todo o elemento, o que também torna seu texto e descendentes translúcidos. Veja MDN: color.

Entenda os pontos de referência de px, em e rem

px é um pixel CSS. Isso nem sempre equivale a um pixel físico na tela, e pode aparecer de forma diferente dependendo da escala da tela e da densidade de pixels do dispositivo. Usar 16px não significa que a função de ampliação da tela não funciona.

No font-size, em usa o tamanho de fonte herdado. Em uma declaração como padding: 1em, ele usa o tamanho de fonte do próprio elemento. rem usa o tamanho de fonte do elemento raiz. Os cálculos a seguir assumem que tanto o tamanho da fonte raiz quanto o do elemento pai são 16px. Para mais detalhes, veja Fontes, tamanhos de fonte e altura de linha em CSS .

Se você repetir font-size: 1.25em em cada etapa em que o tamanho do elemento pai aumenta, ele aumenta de 16 → 20 → 25px. Repita 1.25rem na mesma estrutura, ambas as etapas são 20px. em é conveniente para pequenos componentes que precisam ser proporcionais às letras ao redor, e rem é conveniente para compartilhar uma referência constante em toda a página. Escolha quais critérios seguir em vez da resposta correta absoluta. Para a definição da unidade, consulte o valor CSS de MDN e o guia de unidades .

Encontre a referência para largura em porcentagem

width: 50% geralmente é calculado com base na largura do conteúdo do bloco contêiner. Nem todas as porcentagens de propriedades são baseados no mesmo alvo. Por exemplo, font-size: 125% é baseado no tamanho da fonte herdado do elemento pai, então deve ser separado do % da largura.

.wrapper { width: 100%; max-width: 640px; padding: 1rem; }

.inner { width: 50%; font-size: 1.25rem; padding: 1em; }

Este exemplo usa border-box, então o padding se encaixa dentro da largura declarada. Com uma fonte raiz de 16px, espaço suficiente e sem bordas, a caixa externa tem 640px de largura. Seu padding de 16px em cada lado deixa 608px de largura para o conteúdo. A largura de 50% da caixa interna é 304px; seu padding de 20px em cada lado deixa 264px para o conteúdo. Para mais detalhes, veja Largura, altura, limites min/max e box-sizing em CSS.

Se a tela estiver estreita, a largura da caixa externa também será reduzida. Neste momento, a largura interna não está fixa em 304px, mas é recalculada com base na nova largura do conteúdo da caixa externa. max-width no exemplo é uma configuração secundária que restringe a caixa para não ser mais larga que 640px.

Execute o exemplo completo

Digite o código abaixo em units.html salvo como UTF-8 e abra-o no seu navegador. O código inclui comparação de cores, unidades aninhadas e cálculos de largura. A 100% da raiz segue o tamanho de fonte padrão do navegador, então a condição de 16px no exercício abaixo é verificada primeiro nas ferramentas de desenvolvimento.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comparing colors and units</title>
  <style>
    html { font-size: 100%; }
    * { box-sizing: border-box; }
    body { margin: 16px; font-family: sans-serif; line-height: 1.7; }
    .wrapper { width: 100%; max-width: 640px; padding: 1rem; background: #e9f7ef; }
    .inner { width: 50%; padding: 1em; font-size: 1.25rem; background: white; }
    .color-name { color: teal; }
    .color-hex { color: #008080; }
    .color-rgb { color: rgb(0, 128, 128); }
    .alpha { padding: 1rem; background: rgb(0 128 128 / 20%); }
    .nest { font-size: 16px; }
    .em-step { font-size: 1.25em; }
    .rem-step { font-size: 1.25rem; }
  </style>
</head>
<body>
  <h1>Colors and units</h1>
  <h2>Three notations of the same color</h2>
  <p class="color-name">Character specified by teal</p>
  <p class="color-hex">Characters specified as #008080</p>
  <p class="color-rgb">Character specified by rgb(0, 128, 128)</p>
  <p class="alpha">Only this box's background color has 20% opacity.</p>
  <h2>Width and spacing</h2>
  <div class="wrapper"><div class="inner">Text and padding in the inner box</div></div>
  <h2>Nested em</h2>
  <div class="nest"><div class="em-step">First step<div class="em-step">Second step</div></div></div>
  <h2>Nested rem</h2>
  <div class="nest"><div class="rem-step">First step<div class="rem-step">Second step</div></div></div>
</body>
</html>

Altere um valor de cada vez

1. Verifique o tamanho de fonte calculado do html nas ferramentas de desenvolvedor. Se for 16px, certifique-se de que o em aninhado seja 20px·25px e o rem aninhado seja 20px·20px. Neste exemplo, .nest fixa a fonte em 16px: a sequência em permanece 20px e 25px. Os valores rem devem ser recalculados a partir do tamanho real da raiz.
2. Vamos mudar brevemente o html para font-size: 20px. Todo o texto baseado em rem será 25px, e .nest mantém os 16px especificados, então o nível em é 20px·25px. O padding de .inner é 25px. Com espaço suficiente, .wrapper continua com 640px, mas seu conteúdo passa a 600px e .inner passa a 300px, deixando 250px de conteúdo após o padding. Depois da comparação, restaure 100% na raiz.
3. Aumente a largura da janela e verifique os tamanhos das caixas de .wrapper e .inner. Na condição original de 16px, ele é 640px·304px. À medida que você estreita a janela, certifique-se de que ambos os lados encolham juntos.
4. Verifique as cores calculadas dos três parágrafos coloridos. Todos devem ter o mesmo valor RGB. Certifique-se de que alterar o fundo de .alpha não deixe o texto em si borrado.

Se não for o que você esperava, verifique os critérios de cálculo antes de simplesmente mudar as unidades. O tamanho da fonte do elemento pai e da raiz, padding, box-sizing e regras CSS que sobrescrevem podem ter efeito. Alterações feitas nas ferramentas de desenvolvedor geralmente desaparecem ao atualizar a página, e alterações salvas nos arquivos devem ser revertidas manualmente para seus valores originais.