Nem tudo são pixels

Introdução

Nessa aula abordaremos os valores e unidades de medidas no CSS e como posso usar a documentação do MDN para aprender mais.
Valores e unidades de medidas

Cada propriedade possui valores property: value.

Estudo constante a fim de entender as propriedades e seus valores.

Na prática

Como conhecer e estudar os valores na documentação?

<color><length>

Os termos podem variar values ou data types.

Documentação MDN

Voltar ao índice

Tipos numéricos e unidades comuns

Nessa aula vamos falar sobre tipos numéricos.
Tipos numéricos
<integer> - número inteiro como -10 ou 223;
<number> - número decimal como -2.4, 64 ou 0.234;
<dimension> - é um <number> com uma unidade junto: 90deg, 2s, 8px;
<percentage> - representa uma fração de outro número: 50%.
Unidades comuns
<length> - é um dos mais usados no CSS e representa um valor de distância:px, em, vw;
<angle> - representa um ângulo:deg, rad, turn;
<time> - representa um tempos, ms;
<resolution> - representa resoluções para dispositivos:dpi;

Voltar ao índice

Distâncias absolutas e relativas

Vamos entender sobre distâncias absolutas e relativas.
Distâncias absolutas <length>

São fixas e não alteram seu valor.

Unidade Nome Equivalência
cm Centímetros 1cm = 96px/2.54
in Inches (polegadas) 1in = 2.54cm = 96px
px Pixels 1px = 1/96th of 1in

O mais comum e mais utilizado é o px.

Não é recomendado usar cm.

Distâncias relativas

São relativas a um outro valor, pode ser o elemento pai, ou root, ou o tamanho da tela.

Benefício: Maior adaptação aos diferentes tipos de tela.

Unidade Relativo a
em Tamanho da font do elemento pai
rem Tamanho da font do elemento raiz (root/html)
vw 1% da viewport wid
vh 1% da viewport height

Normalmente o tamanho da font padrão do navegador é de 16px e para mudar esse valor tenho que fazer a alteração no root ou no elemento html.

:root {
font-size: 18px;
}
Ou...
html {
font-size:18px;
}

Oviewport é a parte da tela que está sendo exibida. No caso dos navegadores web, é o que é exibido na janela/tela do documento. Conteúdos que estão fora do viewport só serão exibidos quando feito um scroll da área de visualização.

Voltar ao índice

Porcentagens

São valores bem flexíveis que sempre serão relativos a algum outro valor.
Exemplo

Relativo ao elemento pai:

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three
    </ul>
      <li>Three A</li>
      <li>Three B</li>
      </ul>
        <li>Three B 2</li>
      </ul>
    </ul>
  </li>
</ul>

li {font-size: 95%;}
  • One
  • Two
  • Three
    • Three A
    • Three B
      • Three B 2

Cada linha vai ficando 20% menor em relação à sua anterior, ou seja, em relação ao elemento pai.

P.s: Em muitos casos é tratado da mesma maneira que as distâncias <length>.

Voltar ao índice

Position

<position>

Representa um conjunto de coordenadas 2D: top,right,bottom,leftecenter.

Usado para alguns tipos de propriedades como o background-position.

Não confundir com a propriedade position.

Exemplo:
<div class="boxx2"></div>

.boxx2 {
height:calc(96%);
width:var(bodycolumngrid);
background-image: url(https://exemplo);
background-repeat:no-repeat;
background-position:right -40px bottom;
}

É a imagem que vai se movendo dentro de um limite visível.

Voltar ao índice

Funções

Em programação, funções são reconhecidas por causar um reaproveitamento de código.
Exemplos de funções do CSS:
  • rgb()
  • hsl()
  • url()
  • calc()

Dentro dos parêntesis são passados os argumentos.

Exemplo de função calc()
<div class="boxx4"></div>

.boxx4 {
height:calc(50% + 20px);
width:var(bodycolumngrid);
background-image: url(https://exemplo);
background-repeat:no-repeat;
background-position:right -40px bottom;
}

CSS Functions

Voltar ao índice

Strings e identificadores


Strings:Texto envolto em aspas

.box::after {content:"Isso é uma string";}

Identificadores:Podemos ter nomes de cores como red,black,gold..

Voltar ao índice