T10 — Estilização com CSS

Resumo Conciso

Cores

Palavras-chave de cor

Nomes simples como black, white, red, purple, green, yellow, blue:

* { color: purple; }

Valores numéricos de cor

Tabela de cores comuns:

Dica: Se os dígitos de cada componente hexadecimal se repetirem (ex: #FF0000), pode abreviar para um dígito por componente (#F00).

Opacidade da cor

A opacidade é um quarto componente que varia de 0 (totalmente transparente) a 1 (totalmente opaca):

Plano de Fundo

Exemplo comum:

body {  background-image: url("background.jpg");  background-repeat: no-repeat;  background-position: 30% 10%;}

Propriedade abreviada (shorthand):

body {  background: no-repeat url("background.jpg");}

Bordas

A propriedade border tem três componentes:

Unidades de Medida

Unidades Absolutas

Unidades Relativas

Vantagem das unidades relativas: Permitem criar layouts ajustáveis alterando apenas uma medida base. Por exemplo, definir font-size no body em pt e usar rem nos outros elementos permite ajustar todos os tamanhos alterando apenas um valor.

Propriedades de Fonte e Texto

Famílias de fontes genéricas:

• serif — Padrão da maioria dos navegadores
• sans-serif — Sem serifa
• monospace — Largura fixa

Exemplo com fallback:

* {  font-family: "DejaVu Sans", sans-serif;}

O navegador procura as fontes pela ordem especificada e usa a genérica como substituto.

🧭 Exercícios Guiados (resolvidos)

Exercício Guiado 1 — Semitransparência com RGBA

Enunciado: Como adicionar uma semitransparência à cor azul (rgb(0,0,255)) para usá-la na propriedade CSS color?

Solução passo a passo:

1. Usar o prefixo rgba em vez de rgb
2. Adicionar um quarto valor (canal alpha) entre 0 e 1
3. Resposta: rgba(0,0,255,0.5) — azul com 50% de transparência

Exercício Guiado 2 — Cor hexadecimal abreviada

Enunciado: Que cor corresponde ao valor hexadecimal #000?

Solução passo a passo:

1. #000 é a abreviatura de #000000
2. Todos os componentes (R, G, B) estão a zero
3. Resposta: A cor black (preto)

Exercício Guiado 3 — Fallback de fonte

Enunciado: Dado que Times New Roman é uma fonte serif e que não está disponível em todos os dispositivos, como seria possível escrever uma regra CSS para solicitar o uso de Times New Roman, tendo a família de fontes genérica serif como substituto?

Solução passo a passo:

1. Especificar primeiro o nome da fonte desejada entre aspas
2. Seguir com a família genérica como alternativa
3. Resposta:

* {  font-family: "Times New Roman", serif;}

Exercício Guiado 4 — Tamanho relativo de fonte

Enunciado: Como usar uma palavra-chave de tamanho relativo para definir uma fonte menor para o elemento <p class="disclaimer"> em relação ao seu elemento pai?

Solução passo a passo:

1. Usar a palavra-chave smaller na propriedade font-size
2. Esta palavra-chave reduz o tamanho em relação ao elemento pai
3. Resposta:

p.disclaimer {  font-size: smaller;}

🔬 Exercícios Exploratórios (prática no terminal)

1. Enunciado: Reescreva a regra CSS seguinte como uma única propriedade abreviada background:

   bashCopiar

   body {  background-image: url("background.jpg");  background-repeat: repeat-x;}

   body {     background: repeat-x url("background.jpg");   }

1. Enunciado: Escreva uma regra de CSS para o elemento <div id="header"> de maneira a alterar somente a borda inferior para 4px.

   #header {     border-bottom-width: 4px;   }

1. Enunciado: Escreva uma propriedade font-size que dobre o tamanho da fonte usada no elemento raiz da página.

   font-size: 2rem;

1. Enunciado: O duplo espaçamento é um recurso comum de formatação nos processadores de texto. Como definir um formato semelhante usando CSS?

   line-height: 2em;