WDD 130: Fundamentos da Web

S02 – Atividade de Aprendizagem: Unidades de Medida em CSS

Visão Geral

Nesta atividade, você aprenderá sobre os diferentes valores que pode fornecer para atributos CSS, como tamanho ou cor de um elemento.

Preparação

Valores ​​Numéricos

Em CSS, os valores de comprimento da propriedade são necessários para controlar o layout e a apresentação. Existem dois tipos principais: absolute (absoluto) e relative (relativo). O comprimento absoluto, como 10 px (pixels), não é relativo a nada e normalmente tem o mesmo tamanho na maioria dos dispositivos. Comprimentos relativos, como 90%, dependem de outros itens, incluindo o elemento pai, irmão ou o tamanho da janela de visualização.

Assista ao seguinte vídeo:

Valores de Cor

Além das unidades numéricas usadas para tamanhos, o CSS também permite que você especifique cores de várias maneiras. Os valores de cores CSS para texto, planos de fundo e outros elementos aplicáveis podem ser definidos pelos seguintes métodos:

• palavra-chave: antiquewhite, burlywood, yellow, lightyellow, etc.
• RGB hexadecimal (vermelho, verde, azul): #faebd7
  em que os dois primeiros caracteres são o valor vermelho, os dois seguintes são o valor verde e os dois últimos são o valor azul no formato hexadecimal (base16) (0 a F).
• RGB ou RGBA: rgb(250, 235, 215) ou rgb(250 235 215 / 1)
  em que r é um valor vermelho variando de 0 a 255, g é um valor verde variando de 0 a 255, b é um valor azul variando de 0 a 255 e o último valor é o valor alfa variando de 0 a 1 (0% a 100%).
• HSLA: hsla(34, 78%, 91%, 1)
  em que h é o matiz (0 a 360), s é a saturação (0% a 100%), l é a luminosidade (0% a 100%) e a é o valor alfa (0 a 1).

Instruções da Atividade

Responda às seguintes perguntas sobre unidades/comprimentos de valores em CSS.

1. Qual é a unidade de comprimento absoluta mais comum para telas?
   Avalie Seu Conhecimento

   px (pixels)

2. Qual unidade de comprimento relative (relativo) do CSS é baseada no tamanho da fonte do elemento raiz?
   Avalie Seu Conhecimento

   REM

3. Considerando a cor hexadecimal #0e421c (base16), qual é o valor do nível verde?
   Avalie Seu Conhecimento

   42

   Há dois valores hexadecimais por cor. Primeiro vermelho, depois verde e azul. É por isso que há seis caracteres no total com valores em hexadecimal (0 a F).