Prof. Leon Blog

Appearance

Exemplos: Introdução ao CSS ​

← Voltar para a aula

Seletores ​

Escolha um seletor e veja quais elementos do "documento" abaixo seriam afetados por ele:

<p id="intro">
<p class="destaque">
<span class="destaque">
<li>
<li class="destaque">
.destaque { color: #4a6cf7; }

Especificidade ​

Duas regras competem pela cor da mesma caixa. Escolha um seletor para cada uma e veja qual vence:

.card

especificidade: 0-1-0

vs

#unico

especificidade: 1-0-0

Vence: Regra B (#unico)

Unidades ​

Mova o slider para simular a mudança do tamanho de fonte raiz (html { font-size }) e observe como cada unidade reage:

Aa

font-size: 16px
sempre 16px, fixo

Aa

font-size: 1.5rem
1.5 × raiz = 24.0px

Aa

font-size: 1.5em
dentro de um pai com 1.5em: 1.5 × 1.5 × raiz = 36.0px

Cores ​

CSS aceita cor em vários formatos. Abaixo, um misturador por sliders (HSL) e três seletores visuais com formas diferentes: um hexágono que gera hexadecimal, e dois círculos que geram RGB e RGBA. Clique ou arraste dentro da forma para escolher matiz e saturação; o slider ao lado controla a luminosidade.

Misturador HSL (sliders) ​

background: hsl(227, 90%, 63%);
/* equivalente a #4c71f6 */

Seletor hexagonal → Hexadecimal ​

color: #4c71f6;

H: 227° S: 90% L: 63%

Seletor circular → RGB ​

color: rgb(51, 204, 107);

H: 142° S: 60% L: 50%

Seletor circular → RGBA ​

background: rgba(232, 48, 110, 0.7);

H: 340° S: 80% L: 55% A: 0.7