CSS Unidades de Medidas

1. COLEGIO DA IMACULADA Curso Técnico em Informática CSSUnidades de Medidas Prof. Tales Kunz Cabral talescabral@colegiodaimaculada.com.br 3º Módulo

2. Unidade Relativa x Unidade Absoluta pt - ponto :1/72 in pc - paica :12 points ou 1/6 in mm - milímetro :1/10 cm cm - centímetro :1/100 m in - polegada :2,54 cm • Unidade Relativa: aquela que se referencia baseada em uma outra medida anterior pelo processo de herança. • em | ex | px | % • Unidade Absoluta: aquela que não se referencia nem se baseia em anteriores pelo processo de herança. • pt (ponto)| pc (paica)| mm (milímetro)| cm (centímetro)| in (inch – polegada)

3. Unidade Relativa (exemplos) Pergunta: O que acontecerá se você tiver 10 divs (uma dentro da outra) e definir 1em para cada tamanho de fonte em cada div e tiver apenas definido font-size: 12px para o body? E se aumentar o em 1em cada div? • em: medida sempre baseada no tamanho da fonte (font-size) herdada. • Por exemplo: h1{line-height: 1.2em}  significa que a altura da linha do h1 terá 20% a mais do que o tamanho da letra definida para o mesmo h1. div{font-size: 10px} h1{font-size: 1.8em}  se este h1 estiver contido na div anterior, o tamanho da letra deste h1 será 80% maior do que o tamanho da letra da div, ou seja, 18px}

4. Unidade Relativa (exemplos) Pergunta: Qual(is) confusão(ões) pode ocorrer para fontes diferentes, ou mesmo para browsers diferentes? • ex: medida sempre baseada no tamanho da letra x (minúscula) da fonte herdada. • Por exemplo: h1{line-height: 1.2ex}  significa que a altura da linha do h1 será 20% maior do que o tamanho da letra “x” definida para a fonte-size do mesmo h1. div{font-size: 10px; font-family: Arial} h1{font-size: 1.8ex}  se este h1 estiver contido na div anterior, o tamanho da letra deste h1 será 80% maior do que o tamanho da letra “x” definido na font-family da div}

5. Unidade Relativa (exemplos) • px: medida sempre baseada no tamanho da resolução do dispositivo. O tamanho é fixo. • O que significa DPI? • Por exemplo: h1{line-height: 5px}  significa que a altura da linha do h1 será de 5px e ponto-final. div{font-size: 10px; font-family: Arial} h1{font-size: 18px}  se este h1 estiver contido na div anterior, o tamanho da letra deste acompanha o da div, exceto se for definido outra medida em px para ela, como neste caso}

6. Unidade Relativa (exemplos) Pergunta: E quando aplicado um valor superior a 100%? E valores menores que zero? • %: medida sempre baseada no percentual do tamanho anterior. • Por exemplo: h1{line-height: 50%}  significa que a altura da linha do h1 será de 50% do normal e independente do tamanho da letra. div{font-size: 100%px; font-family: Arial} h1{font-size: 20%}  se este h1 estiver contido na div anterior, o tamanho da letra será 20% do tamanho da fonte na div}

7. Unidade Absoluta (exemplos) É uma medida adotada mais para impressões, pois a impressora trabalha com a unidade de medida de pontos e a tela com unidade de medida de pixels. Importante: Utilizar medida por pontos pode gerar diferentes visualizações para diferentes navegadores. • Pt (ponto): não é muito utilizado em função de ser baseado numa medida fixa com relação à polegada. • A relação: in = 2,54cm = 25,4mm = 72pt = 6pc Exemplo: Figura com 1polegada de altura = 2,54cm = 72pt

8. Unidade Absoluta (exemplos) pt - ponto :1/72 in pc - paica :12 points ou 1/6 in mm - milímetro :1/10 cm cm - centímetro :1/100 m in - polegada :2,54 cm • As demais unidades de medidas serão aplicadas de acordo com os tamanhos desejados. Baseiam-se nos sistemas nacionais e internacionais de medida.

9. Keywords • Aplicadas somente a font-size, as keywordspodem ser: xx-small, x-small, medium, large, x-large, xx-large. São tamanhos pré-definidos.