Pular para o conteúdo
murad.guide

As Três Camadas

Capítulo 5

Texto, cor, fundo e links

4 min de leitura 773 palavras 2 gravuras

Este capítulo pinta a Oficina e organiza o texto. Você vai escolher fonte, cor, fundo e o estado dos links. O exemplo está em exemplos/05-texto-cor/. Compare o cabeçalho escuro com o miolo claro.

Cascata é a ordem em que as regras se resolvem. Se duas regras pedem a mesma propriedade no mesmo elemento, uma vence. Pseudo-classe de link também tem ordem.

Trabalhe na cópia inicio desta etapa. Leia e digite o código indicado; mude apenas uma coisa. Antes de recarregar, escreva o resultado que espera. Depois compare com a referência completa ao lado. Se algo falhar, confira primeiro o arquivo salvo e o caminho aberto.

O que você vai aprender

Fonte, tamanho e peso

font-family é a fila de reservas. Se a primeira fonte não existir no computador da visitante, a próxima entra. O último nome deve ser genérico: sans-serif, serif ou monospace.

body {
  font-family: "Segoe UI", Tahoma, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #1c1917;
  background: #fffaf3;
}
h1 {
  font-size: 2rem;
  font-weight: 700;
}

font-size é o tamanho. rem acompanha a fonte do html. font-weight é o peso: 400 é o normal; 700 é o negrito.

Não dependa de uma fonte paga. A fila do sistema basta neste volume.

Pare e experimente. Em exemplos/05-texto-cor/styles.css, mude só o font-size do h1 para 1.2rem. Recarregue. O título deve encolher. Os parágrafos devem permanecer. Restaure 2rem.

Cor e fundo

color pinta o texto. background pinta o fundo da caixa, inclusive o padding. Hexadecimal #1b365d mistura vermelho, verde e azul em base 16.

.principal {
  background: #1b365d;
  color: #f4ead8;
}

Texto claro em fundo escuro no cabeçalho. Texto escuro em fundo claro no body. Se os dois usarem a mesma cor, um dos pares falha no contraste.

Declare uma cor de fundo mesmo quando houver imagem depois. Se a imagem falhar o caminho, o texto ainda precisa de contraste.

Duas regras pedem a mesma propriedade: a de baixo vence na cascata

A ordem só desempata regras que têm a mesma prioridade e a mesma especificidade, isto é, seletores igualmente precisos. Nesse empate, a regra posterior vence. Por isso o reset fica no topo de styles.css e as cores da Oficina vêm depois.

Sublinhado

text-decoration controla o traço do texto. Links vêm sublinhados por padrão. Isso ajuda a reconhecer o destino.

.logo a {
  font-weight: 700;
  text-decoration: none;
}
a:hover {
  text-decoration-thickness: 3px;
}

Tirar o sublinhado do logo é aceitável se o peso e o lugar já o identificam. Não tire o sublinhado de todos os links do main só por estética. Quem não distingue cor precisa de outro sinal.

Uma pseudo-classe escolhe um estado. No link, a ordem deste volume é LVFHA: link, visited, focus, hover, active.

a:link {
  color: #1b365d;
}
a:visited {
  color: #5b2c6f;
}
a:focus {
  outline: 3px solid #c45c26;
  outline-offset: 2px;
}
a:hover {
  text-decoration-thickness: 3px;
}
a:active {
  color: #c45c26;
}

Se :hover vier depois de :focus e as duas mudarem a mesma propriedade, o foco pode perder o destaque quando o ponteiro também estiver em cima. O contorno tem uma regra própria ao final para permanecer visível.

Estados do link: não visitado, visitado, foco, hover e ativo

No cabeçalho escuro, as cores de a:link do body não servem. Uma regra mais específica devolve o creme:

.principal a:link,
.principal a:visited {
  color: #f4ead8;
}

Foco visível de 3 px

Quem navega com Tab precisa ver onde está. outline: 3px solid desenha um contorno. outline-offset afasta o traço um pouco da letra.

O skip-link some da tela e volta ao ganhar foco:

.pular {
  position: absolute;
  left: -999px;
}
.pular:focus {
  left: 1rem;
  top: 1rem;
  background: #fff;
  padding: 0.4rem 0.8rem;
  outline: 3px solid #c45c26;
}

Erro comum: outline: none em todos os a “para ficar limpo”. O teclado some. Se remover o outline padrão, ponha outro de pelo menos 3 px e com contraste.

Pare e experimente. Abra a home, aperte Tab até um link do menu. O contorno laranja deve aparecer. Se não aparecer, a regra :focus foi apagada ou uma regra posterior zerou o outline.

Atividades

  1. Por que a lista de font-family termina com sans-serif?
  2. Duas regras p iguais em peso: a primeira põe color: #c45c26 e a segunda color: #1c1917. Qual cor vale?
  3. O que a ordem LVFHA evita no :focus?
  4. No exemplo 05-texto-cor, qual seletor pinta o fundo do cabeçalho?

Respostas comentadas

  1. Garante uma família sem serifa se nenhuma fonte nomeada existir no computador.
  2. #1c1917, pela cascata: a regra de baixo vence.
  3. Na ordem apresentada, :hover vem depois de :focus e pode substituir a mesma propriedade. Por isso o contorno do foco tem uma regra própria ao final e permanece visível.
  4. .principal, com background: #1b365d.

Referências