Unidades/Cores
Unidades
No CSS, as unidades de medida definem como os valores atribuídos às propriedades (como largura, altura, margem, fonte) serão interpretados pelo navegador. Entre as mais comuns, estão as unidades absolutas e as unidades relativas. As absolutas, como o pixel (px), representam um valor fixo independente do contexto. Por exemplo, definir font-size: 16px; garante que o texto terá sempre 16 pixels de altura, mantendo consistência, mas sacrificando flexibilidade em dispositivos de diferentes tamanhos de tela.
As unidades percentuais (%) são relativas ao elemento pai. Isso significa que um elemento com width: 50% ocupará metade da largura do seu contêiner. Essa característica favorece a criação de layouts responsivos, pois as dimensões se ajustam proporcionalmente ao espaço disponível. No entanto, é importante compreender o contexto: porcentagens aplicadas a altura, por exemplo, dependem da altura definida do contêiner pai.
Já as unidades em e rem são relativas ao tamanho de fonte. A unidade em é relativa ao tamanho da fonte do elemento pai. Por exemplo, se o pai tem font-size: 16px, então 1.5em equivale a 24px. Isso pode gerar efeitos cumulativos quando há elementos aninhados. Em contraste, a unidade rem (root em) é sempre relativa ao tamanho da fonte raiz definido no elemento <html>. Assim, 1rem mantém consistência em toda a página, evitando o acúmulo de valores como ocorre com em.
Além disso, há as unidades de viewport, que são extremamente úteis em layouts fluidos. O vh (viewport height) representa 1% da altura visível da janela do navegador, enquanto o vw (viewport width) corresponde a 1% da largura. Por exemplo, height: 100vh; fará com que um elemento ocupe toda a altura da tela, independentemente da resolução. Essas unidades são fundamentais para designs modernos que precisam se adaptar automaticamente a diferentes tamanhos de dispositivos.
Exemplo
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemplo de Unidades CSS</title>
<style>
body {
font-size: 16px; /* tamanho base */
margin: 0;
padding: 20px;
}
/* Unidade fixa */
.px-box {
width: 200px;
height: 100px;
background: lightcoral;
}
/* Unidade percentual */
.percent-box {
width: 50%;
height: 100px;
background: lightseagreen;
}
/* Unidade em (relativa ao elemento pai) */
.em-box {
font-size: 2em; /* 2x o tamanho de fonte do pai (16px → 32px) */
background: lightskyblue;
padding: 1em; /* relativo ao font-size deste elemento (32px) */
}
/* Unidade rem (relativa à raiz html) */
.rem-box {
font-size: 2rem; /* 2x o tamanho do <html> (16px → 32px) */
background: khaki;
padding: 1rem; /* relativo ao font-size raiz (16px) */
}
/* Viewport width/height */
.vhvw-box {
width: 50vw; /* 50% da largura da janela */
height: 30vh; /* 30% da altura da janela */
background: plum;
}
</style>
</head>
<body>
<h2>Exemplo de Unidades no CSS</h2>
<div class="px-box">200px fixo</div>
<br>
<div class="percent-box">50% da largura do pai</div>
<br>
<div class="em-box">Fonte em 2em (relativa ao pai)</div>
<br>
<div class="rem-box">Fonte em 2rem (relativa ao html)</div>
<br>
<div class="vhvw-box">50vw x 30vh (tela)</div>
</body>
</html>Cores
No CSS, as cores podem ser definidas de diferentes formas, sendo as mais comuns os formatos hexadecimal (hex), RGB e HSL. Cada uma dessas representações possui suas características próprias, mas todas cumprem a função de indicar a cor exata que será aplicada a elementos da página.
A notação hexadecimal (hex) é uma das mais tradicionais e utiliza uma combinação de seis dígitos baseados no sistema hexadecimal (0–9 e A–F). O formato #RRGGBB representa as intensidades de vermelho (RR), verde (GG) e azul (BB). Por exemplo, #FF0000 corresponde ao vermelho puro, #00FF00 ao verde e #0000FF ao azul. Também é possível usar a forma reduzida de três dígitos, como #F00 para vermelho. Essa notação é popular por ser compacta e reconhecida universalmente no desenvolvimento web.
A representação RGB (Red, Green, Blue) utiliza o modelo aditivo de cores, no qual cada componente é definido por valores numéricos variando de 0 a 255. Assim, rgb(255, 0, 0) corresponde ao vermelho, enquanto rgb(0, 255, 0) resulta em verde e rgb(0, 0, 255) em azul. Além disso, há a variação RGBA, que adiciona um quarto parâmetro para transparência (alpha), variando de 0 (totalmente transparente) a 1 (totalmente opaco), como em rgba(255, 0, 0, 0.5).
Por fim o modelo HSL (Hue, Saturation, Lightness) oferece uma forma mais intuitiva de trabalhar com cores. Ele é baseado em três parâmetros: matiz (hue), saturação (saturation) e luminosidade (lightness). O matiz é definido em graus de 0 a 360 no círculo cromático (0 ou 360 = vermelho, 120 = verde, 240 = azul). A saturação é expressa em porcentagem, indicando a intensidade da cor (0% = cinza, 100% = cor totalmente viva). A luminosidade também é dada em porcentagem, representando o quão clara ou escura a cor é (0% = preto, 50% = cor normal, 100% = branco). Exemplo: hsl(0, 100%, 50%) gera vermelho puro. Assim como no RGB, existe a variação HSLA, que inclui o parâmetro de transparência.
Ótimo 🚀 Aqui está um quadro comparativo mostrando como representar a mesma cor (vermelho, verde, azul e um exemplo com transparência) nos três formatos mais usados no CSS: hex, rgb/rgba e hsl/hsla.
Comparativo de Cores
Vermelho
#FF0000
rgb(255, 0, 0)
hsl(0, 100%, 50%)
color: #FF0000;
Verde
#00FF00
rgb(0, 255, 0)
hsl(120, 100%, 50%)
color: rgb(0,255,0);
Azul
#0000FF
rgb(0, 0, 255)
hsl(240, 100%, 50%)
color: hsl(240,100%,50%);
Vermelho 50% opaco
#FF000080 (hex com alpha)
rgba(255, 0, 0, 0.5)
hsla(0, 100%, 50%, 0.5)
background-color: rgba(255,0,0,0.5);
Exemplo
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemplo de Cores no CSS</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
flex-wrap: wrap;
gap: 20px;
padding: 20px;
}
.color-box {
width: 200px;
height: 100px;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
border-radius: 8px;
}
/* Vermelho */
.hex-red { background-color: #FF0000; }
.rgb-red { background-color: rgb(255, 0, 0); }
.hsl-red { background-color: hsl(0, 100%, 50%); }
/* Verde */
.hex-green { background-color: #00FF00; color: black; }
.rgb-green { background-color: rgb(0, 255, 0); color: black; }
.hsl-green { background-color: hsl(120, 100%, 50%); color: black; }
/* Azul */
.hex-blue { background-color: #0000FF; }
.rgb-blue { background-color: rgb(0, 0, 255); }
.hsl-blue { background-color: hsl(240, 100%, 50%); }
/* Vermelho com transparência */
.hex-alpha { background-color: #FF000080; color: black; }
.rgba-red { background-color: rgba(255, 0, 0, 0.5); color: black; }
.hsla-red { background-color: hsla(0, 100%, 50%, 0.5); color: black; }
</style>
</head>
<body>
<!-- Vermelho -->
<div class="color-box hex-red">#FF0000</div>
<div class="color-box rgb-red">rgb(255,0,0)</div>
<div class="color-box hsl-red">hsl(0,100%,50%)</div>
<!-- Verde -->
<div class="color-box hex-green">#00FF00</div>
<div class="color-box rgb-green">rgb(0,255,0)</div>
<div class="color-box hsl-green">hsl(120,100%,50%)</div>
<!-- Azul -->
<div class="color-box hex-blue">#0000FF</div>
<div class="color-box rgb-blue">rgb(0,0,255)</div>
<div class="color-box hsl-blue">hsl(240,100%,50%)</div>
<!-- Vermelho Transparente -->
<div class="color-box hex-alpha">#FF000080</div>
<div class="color-box rgba-red">rgba(255,0,0,0.5)</div>
<div class="color-box hsla-red">hsla(0,100%,50%,0.5)</div>
</body>
</html>Last updated