Curso IT Fundamentos CSS 021_Tipos de valores, unidades, tamanhos, cores

Tipos Numéricos

No CSS, diferentes valores numéricos são usados em diferentes propriedades. Os tipos numéricos comuns:

• Strings: Texto entre aspas simples ou duplas.
• Números: Inteiros ou decimais. Como 1024, -100, 0.255.
• Unidades: Tipo numérico com unidade, ex: 45deg, 5s ou 10px.
• Porcentagens: Tipo numérico percentual, ex: 50%.
• Valores de cor: Hexadecimal, RGB, RGBA, HSL, HSLA, etc.
• Palavras-chave: Palavras com significado específico como auto, initial, inherit, etc.

Unidades

As unidades no CSS representam valores de propriedades como comprimento, ângulo, tempo, frequência, etc.

Unidades de Comprimento:

Unidades de comprimento relativas:

• em: Relativo ao tamanho da fonte do elemento pai. 1.5em = 1,5 vezes o tamanho da fonte do pai.
• rem: Relativo ao tamanho da fonte do elemento raiz (html). 1rem = tamanho da fonte raiz.
• ex: Relativo à altura da letra minúscula “x”.

Exemplo:

1
.example {
2
  font-size: 16px;
3
  padding: 1.5em;
4
  margin: 2rem;
5
  height: 2ex;
6
}

Unidades de comprimento absolutas:

• px: Pixel, unidade mais básica e mais usada no CSS.
• in: Polegada, 1 polegada = 96 pixels.
• cm: Centímetro.
• mm: Milímetro.
• pt: Ponto, 1pt = 1/72 polegada.
• pc: Pica, 1pc = 12pt = 16 pixels.

Exemplo:

1
.example {
2
  width: 200px;
3
  height: 2in;
4
  margin: 1cm;
5
  font-size: 12pt;
6
}

Unidades de porcentagem relativa:

• %: Porcentagem relativa ao elemento pai.

Exemplo:

1
.example {
2
  width: 50%;
3
  padding: 10%;
4
}

Unidades de viewport:

• vw: 1vw = 1% da largura do viewport.
• vh: 1vh = 1% da altura do viewport.
• vmin: O menor entre vw e vh.
• vmax: O maior entre vw e vh.

Exemplo:

1
.example {
2
  width: 50vw;
3
  height: 30vh;
4
}

Unidades de Ângulo:

deg (graus):

• deg é a unidade angular mais comum, um círculo = 360 graus.

Exemplo:

1
.example {
2
  transform: rotate(45deg);
3
  background: linear-gradient(45deg, red, yellow);
4
}

rad (radianos):

• rad, um círculo = 2π radianos.

Exemplo:

1
.example {
2
  transform: rotate(1rad);
3
}

grad (gradianos):

• grad, um círculo = 400 gradianos.

1
.example {
2
  transform: rotate(50grad);
3
}

turn (volta):

• turn representa uma volta completa = 360 graus.

1
.example {
2
  transform: rotate(0.5turn);
3
}

Unidades de Tempo:

s (segundos)

• s é a unidade de segundos.

Exemplo:

1
.base{
2
    width: 200px;
3
    height: 200px;
4
    background-color: #3498db;
5
}
6
.base:hover{
7
    background-color: #e74c3c;
8
}
9
.example{
10
    transition: background-color 1s ease;
11
}

ms (milissegundos)

• ms, 1 segundo = 1000 milissegundos.

Exemplo:

1
.base{
2
    width: 200px;
3
    height: 200px;
4
    background-color: #3498db;
5
}
6
.base:hover{
7
    background-color: #e74c3c;
8
}
9

10
.example{
11
    transition: background-color 2000ms ease;
12
}

Unidades de Frequência:

Hz (hertz)

• Hertz é a unidade de frequência mais comum.

Exemplo:

1
.example {
2
  animation: shake 1s infinite;
3
}

kHz (quilohertz)

• 1 kHz = 1000 Hz.

Exemplo:

1
.example {
2
  audio {
3
    frequency: 5kHz;
4
  }
5
}

Unidades de Resolução:

dpi (pontos por polegada)

• dpi representa pontos por polegada.

Exemplo:

1
.example {
2
  background-image: url('image.png');
3
  background-size: 300px 200px;
4
  background-resolution: 300dpi;
5
}

dppx (pontos por pixel)

• dppx representa pontos por pixel na tela.

Exemplo:

1
.example {
2
  background-image: url('image.png');
3
  background-size: 300px 200px;
4
  background-resolution: 2dppx;
5
}

dpcm (pontos por centímetro)

• dpcm representa pontos por centímetro.

Exemplo:

1
.example {
2
  background-image: url('image.png');
3
  background-size: 2dpcm 3dpcm;
4
}

Tamanhos

Os tamanhos no CSS controlam as dimensões dos elementos.

Propriedades width e height

Definem a largura e altura do elemento.

Exemplo:

1
.example {
2
  width: 300px;
3
  height: 200px;
4
}

Propriedades max-width e max-height

Definem a largura e altura máximas.

Exemplo:

1
.example {
2
  max-width: 100%;
3
  max-height: 500px;
4
}

Propriedades min-width e min-height:

Exemplo:

1
.example {
2
  min-width: 200px;
3
  min-height: 100px;
4
}

Cores

Cores por palavra-chave

Cores representadas por palavras-chave: red (vermelho), blue (azul), green (verde), etc.

Exemplo:

1
.example {
2
  color: red;
3
  background-color: blue;
4
}

Cores hexadecimais

Cores RGB em hexadecimal de seis ou três dígitos. Formato #RRGGBB ou #RGB.

Exemplo:

1
.example {
2
  color: #ff0000;
3
  background-color: #00f;
4
}

Cores RGB, RGBA

rgb() aceita três parâmetros (0-255). rgba() adiciona parâmetro de transparência (0-1).

Exemplo:

1
.example1 {
2
  color: rgb(255, 0, 0);
3
  background-color: rgb(0, 0, 255);
4
}
5

6
.example2 {
7
  color: rgba(255, 0, 0, 0.5);
8
  background-color: rgba(0, 0, 255, 0.7);
9
}

Cores HSL, HSLA

hsl() aceita matiz (0-360), saturação (0%-100%) e luminosidade (0%-100%). hsla() adiciona transparência (0-1).

Exemplo:

1
.example1 {
2
  color: hsl(0, 100%, 50%);
3
  background-color: hsl(240, 100%, 50%);
4
}
5

6
.example2 {
7
  color: hsla(0, 100%, 50%, 0.5);
8
  background-color: hsla(240, 100%, 50%, 0.7);
9
}

Tabela de cores RGB (oschina.net)