SlideShare uma empresa Scribd logo
Medidas Absolutas e
Relativas
CSS - Style Sheet
Professor: Jolvani
Aula 12
Medidas Absolutas e Relativas - CSS











Unidades de Medidas Lineares
Na w3schools podemos encontrar essas unidades de medidas
Temos 3 tipos de unidades:
Em %, Absolutas e Relativas.
Medidas Absolutas
São medidas que não dependem de um valor de referência:
Existem 5 tipos de unidades de medida absoltas.
Polegada: in ex: 5en; 5cm, 5mm, 5pt, 5pc (pt, pc - unidades de
medidas tipográficas)
São poucas utilizadas devido ao tamanho da resolução (+ usado pt =
ponto).
Medidas Absolutas e Relativas - CSS


Medidas Relativas



Dividem-se em 3 medidas;



5em defini uma fonte de referencia 10px então uso 1 x em = 1em ou 2 x
em = 2em.



5ex = altura da letra x em minúsculo.



5px em pixels



As mais utilizadas são em e px.



Exemplo unidade em:


Definido h1 = 50px; e h2 = 20px; após



h1 e h2 margem a esquerda 1em, ou seja,



Para margem em h1 = 50 e em h2 = 20.
Medidas Absolutas e Relativas - CSS


Exemplo em:


Definido h1 = 50px; e h2 = 20px; após



h1 e h2 margem a esquerda 1em, ou seja,



Para margem em h1 = 50 e em h2 = 20.
Medidas Absolutas e Relativas - CSS


Outra forma, através do seletor universal (*).
Medidas Absolutas e Relativas - CSS


Alterando... Outra forma, através do seletor universal (*).
Medidas Absolutas e Relativas - CSS


Exemplo unidade px: é calculado em ralação a resolução do seu monitor,
porém ele é útil na criação de layout com dimensões fixas.



Exemplo unidade em %: o layout pode ser variável, de acordo com sua
resolução... Sempre calculadas em relação a um valor pré-existente.



Vc pode definir outras porcentagens, teste....
Próxima Aula: Textos (fontes)

Mais conteúdo relacionado

Mais procurados

Day 1 with Amazon Web Services - AWSご利用開始時に最低限おさえておきたい10のこと
Day 1 with Amazon Web Services - AWSご利用開始時に最低限おさえておきたい10のことDay 1 with Amazon Web Services - AWSご利用開始時に最低限おさえておきたい10のこと
Day 1 with Amazon Web Services - AWSご利用開始時に最低限おさえておきたい10のこと
Amazon Web Services Japan
 
Azure Log Analytics 概要
Azure Log Analytics 概要Azure Log Analytics 概要
Azure Log Analytics 概要
喜智 大井
 
APRESENTAÇÃO EMPRESA DE ENGENHARIA
APRESENTAÇÃO EMPRESA DE ENGENHARIAAPRESENTAÇÃO EMPRESA DE ENGENHARIA
APRESENTAÇÃO EMPRESA DE ENGENHARIA
Rodrigues Macedo Engenharia
 
機密データとSaaSは共存しうるのか!?セキュリティー重視のユーザー層を取り込む為のネットワーク通信のアプローチ
機密データとSaaSは共存しうるのか!?セキュリティー重視のユーザー層を取り込む為のネットワーク通信のアプローチ機密データとSaaSは共存しうるのか!?セキュリティー重視のユーザー層を取り込む為のネットワーク通信のアプローチ
機密データとSaaSは共存しうるのか!?セキュリティー重視のユーザー層を取り込む為のネットワーク通信のアプローチ
Amazon Web Services Japan
 
Calculo da vazao projeto 2015.2
Calculo da vazao projeto 2015.2Calculo da vazao projeto 2015.2
Calculo da vazao projeto 2015.2
marcosrei85
 
Sansanがメッセージング (SQS) でスケーラビリティを手に入れた話
Sansanがメッセージング (SQS) でスケーラビリティを手に入れた話Sansanがメッセージング (SQS) でスケーラビリティを手に入れた話
Sansanがメッセージング (SQS) でスケーラビリティを手に入れた話
Atsushi Kambara
 
祝GA!! Azure Communication Services のメール送信機能について
祝GA!! Azure Communication Services のメール送信機能について祝GA!! Azure Communication Services のメール送信機能について
祝GA!! Azure Communication Services のメール送信機能について
Tomotaka Suzuki(御成門プログラマー)
 
Amazon Glacierのご紹介(機能編)
Amazon Glacierのご紹介(機能編) Amazon Glacierのご紹介(機能編)
Amazon Glacierのご紹介(機能編)
Amazon Web Services Japan
 
Estradas drenagem superficial - oficial
Estradas drenagem superficial - oficialEstradas drenagem superficial - oficial
Estradas drenagem superficial - oficial
Anderson Nunes
 
【de:code 2020】 レガシーシステムをデジタルの世界へ! Power Automate UI フロー入門
【de:code 2020】 レガシーシステムをデジタルの世界へ! Power Automate UI フロー入門【de:code 2020】 レガシーシステムをデジタルの世界へ! Power Automate UI フロー入門
【de:code 2020】 レガシーシステムをデジタルの世界へ! Power Automate UI フロー入門
日本マイクロソフト株式会社
 
AWS IoT SiteWise のご紹介 (AWS IoT Deep Dive #5)
AWS IoT SiteWise のご紹介 (AWS IoT Deep Dive #5)AWS IoT SiteWise のご紹介 (AWS IoT Deep Dive #5)
AWS IoT SiteWise のご紹介 (AWS IoT Deep Dive #5)
Amazon Web Services Japan
 
AWS Shieldのご紹介 Managed DDoS Protection
AWS Shieldのご紹介 Managed DDoS ProtectionAWS Shieldのご紹介 Managed DDoS Protection
AWS Shieldのご紹介 Managed DDoS Protection
Amazon Web Services Japan
 
Estudo de caso obra
Estudo de caso   obraEstudo de caso   obra
Estudo de caso obra
Jairo L. Matoso
 
AWS Black Belt Online Seminar 2016 AWS IoT
AWS Black Belt Online Seminar 2016 AWS IoTAWS Black Belt Online Seminar 2016 AWS IoT
AWS Black Belt Online Seminar 2016 AWS IoT
Amazon Web Services Japan
 
C34 ニッチだけど、社会インフラを支えるデータベース、HiRDB ~HiRDBを選ぶ人、選ばない人、その選択基準とは~ by Taichi Ishikawa
C34 ニッチだけど、社会インフラを支えるデータベース、HiRDB ~HiRDBを選ぶ人、選ばない人、その選択基準とは~ by Taichi IshikawaC34 ニッチだけど、社会インフラを支えるデータベース、HiRDB ~HiRDBを選ぶ人、選ばない人、その選択基準とは~ by Taichi Ishikawa
C34 ニッチだけど、社会インフラを支えるデータベース、HiRDB ~HiRDBを選ぶ人、選ばない人、その選択基準とは~ by Taichi IshikawaInsight Technology, Inc.
 
Gerenciamento de Projetos de TI
Gerenciamento de Projetos de TIGerenciamento de Projetos de TI
Gerenciamento de Projetos de TI
Eliseu Castelo
 
Valor Monetário Esperado - VME (Série Gerência de Projetos)
Valor Monetário Esperado - VME (Série Gerência de Projetos)Valor Monetário Esperado - VME (Série Gerência de Projetos)
Valor Monetário Esperado - VME (Série Gerência de Projetos)
Marcello Thiry
 
713 questões de conhecimento bancário
713 questões de conhecimento bancário713 questões de conhecimento bancário
713 questões de conhecimento bancário
Mavaso Vs
 
Acquario Ceará - EIA/RIMA
Acquario Ceará - EIA/RIMAAcquario Ceará - EIA/RIMA
Acquario Ceará - EIA/RIMA
Andréa Saraiva
 
Curso de drenagem no auto cad civil 3d v1
Curso de drenagem no auto cad civil 3d v1Curso de drenagem no auto cad civil 3d v1
Curso de drenagem no auto cad civil 3d v1
margolini
 

Mais procurados (20)

Day 1 with Amazon Web Services - AWSご利用開始時に最低限おさえておきたい10のこと
Day 1 with Amazon Web Services - AWSご利用開始時に最低限おさえておきたい10のことDay 1 with Amazon Web Services - AWSご利用開始時に最低限おさえておきたい10のこと
Day 1 with Amazon Web Services - AWSご利用開始時に最低限おさえておきたい10のこと
 
Azure Log Analytics 概要
Azure Log Analytics 概要Azure Log Analytics 概要
Azure Log Analytics 概要
 
APRESENTAÇÃO EMPRESA DE ENGENHARIA
APRESENTAÇÃO EMPRESA DE ENGENHARIAAPRESENTAÇÃO EMPRESA DE ENGENHARIA
APRESENTAÇÃO EMPRESA DE ENGENHARIA
 
機密データとSaaSは共存しうるのか!?セキュリティー重視のユーザー層を取り込む為のネットワーク通信のアプローチ
機密データとSaaSは共存しうるのか!?セキュリティー重視のユーザー層を取り込む為のネットワーク通信のアプローチ機密データとSaaSは共存しうるのか!?セキュリティー重視のユーザー層を取り込む為のネットワーク通信のアプローチ
機密データとSaaSは共存しうるのか!?セキュリティー重視のユーザー層を取り込む為のネットワーク通信のアプローチ
 
Calculo da vazao projeto 2015.2
Calculo da vazao projeto 2015.2Calculo da vazao projeto 2015.2
Calculo da vazao projeto 2015.2
 
Sansanがメッセージング (SQS) でスケーラビリティを手に入れた話
Sansanがメッセージング (SQS) でスケーラビリティを手に入れた話Sansanがメッセージング (SQS) でスケーラビリティを手に入れた話
Sansanがメッセージング (SQS) でスケーラビリティを手に入れた話
 
祝GA!! Azure Communication Services のメール送信機能について
祝GA!! Azure Communication Services のメール送信機能について祝GA!! Azure Communication Services のメール送信機能について
祝GA!! Azure Communication Services のメール送信機能について
 
Amazon Glacierのご紹介(機能編)
Amazon Glacierのご紹介(機能編) Amazon Glacierのご紹介(機能編)
Amazon Glacierのご紹介(機能編)
 
Estradas drenagem superficial - oficial
Estradas drenagem superficial - oficialEstradas drenagem superficial - oficial
Estradas drenagem superficial - oficial
 
【de:code 2020】 レガシーシステムをデジタルの世界へ! Power Automate UI フロー入門
【de:code 2020】 レガシーシステムをデジタルの世界へ! Power Automate UI フロー入門【de:code 2020】 レガシーシステムをデジタルの世界へ! Power Automate UI フロー入門
【de:code 2020】 レガシーシステムをデジタルの世界へ! Power Automate UI フロー入門
 
AWS IoT SiteWise のご紹介 (AWS IoT Deep Dive #5)
AWS IoT SiteWise のご紹介 (AWS IoT Deep Dive #5)AWS IoT SiteWise のご紹介 (AWS IoT Deep Dive #5)
AWS IoT SiteWise のご紹介 (AWS IoT Deep Dive #5)
 
AWS Shieldのご紹介 Managed DDoS Protection
AWS Shieldのご紹介 Managed DDoS ProtectionAWS Shieldのご紹介 Managed DDoS Protection
AWS Shieldのご紹介 Managed DDoS Protection
 
Estudo de caso obra
Estudo de caso   obraEstudo de caso   obra
Estudo de caso obra
 
AWS Black Belt Online Seminar 2016 AWS IoT
AWS Black Belt Online Seminar 2016 AWS IoTAWS Black Belt Online Seminar 2016 AWS IoT
AWS Black Belt Online Seminar 2016 AWS IoT
 
C34 ニッチだけど、社会インフラを支えるデータベース、HiRDB ~HiRDBを選ぶ人、選ばない人、その選択基準とは~ by Taichi Ishikawa
C34 ニッチだけど、社会インフラを支えるデータベース、HiRDB ~HiRDBを選ぶ人、選ばない人、その選択基準とは~ by Taichi IshikawaC34 ニッチだけど、社会インフラを支えるデータベース、HiRDB ~HiRDBを選ぶ人、選ばない人、その選択基準とは~ by Taichi Ishikawa
C34 ニッチだけど、社会インフラを支えるデータベース、HiRDB ~HiRDBを選ぶ人、選ばない人、その選択基準とは~ by Taichi Ishikawa
 
Gerenciamento de Projetos de TI
Gerenciamento de Projetos de TIGerenciamento de Projetos de TI
Gerenciamento de Projetos de TI
 
Valor Monetário Esperado - VME (Série Gerência de Projetos)
Valor Monetário Esperado - VME (Série Gerência de Projetos)Valor Monetário Esperado - VME (Série Gerência de Projetos)
Valor Monetário Esperado - VME (Série Gerência de Projetos)
 
713 questões de conhecimento bancário
713 questões de conhecimento bancário713 questões de conhecimento bancário
713 questões de conhecimento bancário
 
Acquario Ceará - EIA/RIMA
Acquario Ceará - EIA/RIMAAcquario Ceará - EIA/RIMA
Acquario Ceará - EIA/RIMA
 
Curso de drenagem no auto cad civil 3d v1
Curso de drenagem no auto cad civil 3d v1Curso de drenagem no auto cad civil 3d v1
Curso de drenagem no auto cad civil 3d v1
 

Destaque

Medidas da Saúde Coletiva aula 6
Medidas da Saúde Coletiva aula 6Medidas da Saúde Coletiva aula 6
Medidas da Saúde Coletiva aula 6profsempre
 
Aula 22 e 23. menu drop down com j query
Aula 22 e 23. menu drop down com j queryAula 22 e 23. menu drop down com j query
Aula 22 e 23. menu drop down com j queryJolvani Morgan
 
Aula 21 e 22 tabelas introdução th head foot
Aula 21 e 22 tabelas introdução   th head footAula 21 e 22 tabelas introdução   th head foot
Aula 21 e 22 tabelas introdução th head footJolvani Morgan
 
Aula 04 e 05. seletores simples
Aula 04 e 05. seletores simplesAula 04 e 05. seletores simples
Aula 04 e 05. seletores simplesJolvani Morgan
 
Aula 10 e 11. box model
Aula 10 e 11. box modelAula 10 e 11. box model
Aula 10 e 11. box modelJolvani Morgan
 
Aula 31 certificação
Aula 31 certificaçãoAula 31 certificação
Aula 31 certificação
Jolvani Morgan
 
Aula 06 e 07 elementos inline parte01 e 02
Aula 06 e 07 elementos inline parte01 e 02Aula 06 e 07 elementos inline parte01 e 02
Aula 06 e 07 elementos inline parte01 e 02Jolvani Morgan
 
Aula 13, 14 e 15. textos (fontes, espaçamento, alinhamento e decoração)
Aula 13, 14 e 15. textos (fontes, espaçamento, alinhamento e decoração)Aula 13, 14 e 15. textos (fontes, espaçamento, alinhamento e decoração)
Aula 13, 14 e 15. textos (fontes, espaçamento, alinhamento e decoração)Jolvani Morgan
 
Aula 18. estilização de cabeçalhos
Aula 18. estilização de cabeçalhosAula 18. estilização de cabeçalhos
Aula 18. estilização de cabeçalhosJolvani Morgan
 
Aula 28,29 e 30 w3 c, versões, html5
Aula 28,29 e 30   w3 c, versões, html5Aula 28,29 e 30   w3 c, versões, html5
Aula 28,29 e 30 w3 c, versões, html5
Jolvani Morgan
 
Aula 11 04-14 prática html
Aula 11 04-14 prática htmlAula 11 04-14 prática html
Aula 11 04-14 prática htmlJolvani Morgan
 
Aula 21. estilização de listas
Aula 21. estilização de listasAula 21. estilização de listas
Aula 21. estilização de listasJolvani Morgan
 
Aula 09. efeito cascata e herança
Aula 09. efeito cascata e herançaAula 09. efeito cascata e herança
Aula 09. efeito cascata e herançaJolvani Morgan
 
Aula 16 e 17. background
Aula 16 e 17. backgroundAula 16 e 17. background
Aula 16 e 17. backgroundJolvani Morgan
 
Aula 32. menu só com css
Aula 32. menu só com cssAula 32. menu só com css
Aula 32. menu só com css
Jolvani Morgan
 
Aula 01 introdução css
Aula 01 introdução cssAula 01 introdução css
Aula 01 introdução cssJolvani Morgan
 
Aula 03. utilização inline, incorporado e externo
Aula 03. utilização inline, incorporado e externoAula 03. utilização inline, incorporado e externo
Aula 03. utilização inline, incorporado e externoJolvani Morgan
 

Destaque (20)

Medidas da Saúde Coletiva aula 6
Medidas da Saúde Coletiva aula 6Medidas da Saúde Coletiva aula 6
Medidas da Saúde Coletiva aula 6
 
Aula 22 e 23. menu drop down com j query
Aula 22 e 23. menu drop down com j queryAula 22 e 23. menu drop down com j query
Aula 22 e 23. menu drop down com j query
 
Aula 21 e 22 tabelas introdução th head foot
Aula 21 e 22 tabelas introdução   th head footAula 21 e 22 tabelas introdução   th head foot
Aula 21 e 22 tabelas introdução th head foot
 
Aula 04 e 05. seletores simples
Aula 04 e 05. seletores simplesAula 04 e 05. seletores simples
Aula 04 e 05. seletores simples
 
Aula 10 e 11. box model
Aula 10 e 11. box modelAula 10 e 11. box model
Aula 10 e 11. box model
 
Aula 31 certificação
Aula 31 certificaçãoAula 31 certificação
Aula 31 certificação
 
Aula 06 e 07 elementos inline parte01 e 02
Aula 06 e 07 elementos inline parte01 e 02Aula 06 e 07 elementos inline parte01 e 02
Aula 06 e 07 elementos inline parte01 e 02
 
Aula 13, 14 e 15. textos (fontes, espaçamento, alinhamento e decoração)
Aula 13, 14 e 15. textos (fontes, espaçamento, alinhamento e decoração)Aula 13, 14 e 15. textos (fontes, espaçamento, alinhamento e decoração)
Aula 13, 14 e 15. textos (fontes, espaçamento, alinhamento e decoração)
 
Aula 18. estilização de cabeçalhos
Aula 18. estilização de cabeçalhosAula 18. estilização de cabeçalhos
Aula 18. estilização de cabeçalhos
 
Aula 08 cores
Aula 08 coresAula 08 cores
Aula 08 cores
 
Aula 28,29 e 30 w3 c, versões, html5
Aula 28,29 e 30   w3 c, versões, html5Aula 28,29 e 30   w3 c, versões, html5
Aula 28,29 e 30 w3 c, versões, html5
 
Aula 11 04-14 prática html
Aula 11 04-14 prática htmlAula 11 04-14 prática html
Aula 11 04-14 prática html
 
Aula 21. estilização de listas
Aula 21. estilização de listasAula 21. estilização de listas
Aula 21. estilização de listas
 
Aula 09. efeito cascata e herança
Aula 09. efeito cascata e herançaAula 09. efeito cascata e herança
Aula 09. efeito cascata e herança
 
Aula 33. css sprite
Aula 33. css spriteAula 33. css sprite
Aula 33. css sprite
 
Aula 20 div e spans
Aula 20 div e spansAula 20 div e spans
Aula 20 div e spans
 
Aula 16 e 17. background
Aula 16 e 17. backgroundAula 16 e 17. background
Aula 16 e 17. background
 
Aula 32. menu só com css
Aula 32. menu só com cssAula 32. menu só com css
Aula 32. menu só com css
 
Aula 01 introdução css
Aula 01 introdução cssAula 01 introdução css
Aula 01 introdução css
 
Aula 03. utilização inline, incorporado e externo
Aula 03. utilização inline, incorporado e externoAula 03. utilização inline, incorporado e externo
Aula 03. utilização inline, incorporado e externo
 

Mais de Jolvani Morgan

Aula 34. bordas arredondadas e sombreamento
Aula 34. bordas arredondadas e sombreamentoAula 34. bordas arredondadas e sombreamento
Aula 34. bordas arredondadas e sombreamentoJolvani Morgan
 
Aula 28,29,30 e 31. layout (tableless)
Aula 28,29,30 e 31. layout (tableless)Aula 28,29,30 e 31. layout (tableless)
Aula 28,29,30 e 31. layout (tableless)Jolvani Morgan
 
Aula 24,25,26 e 27. posicionamento
Aula 24,25,26 e 27. posicionamentoAula 24,25,26 e 27. posicionamento
Aula 24,25,26 e 27. posicionamentoJolvani Morgan
 
Aula 19 e 20. estilização de links
Aula 19 e 20. estilização de linksAula 19 e 20. estilização de links
Aula 19 e 20. estilização de linksJolvani Morgan
 
Aula 12. medidas absolutas e relativas
Aula 12. medidas absolutas e relativasAula 12. medidas absolutas e relativas
Aula 12. medidas absolutas e relativasJolvani Morgan
 
Aula 06, 07 e 08 seletores compostos e pseudo seletores
Aula 06, 07 e 08 seletores compostos e pseudo seletoresAula 06, 07 e 08 seletores compostos e pseudo seletores
Aula 06, 07 e 08 seletores compostos e pseudo seletoresJolvani Morgan
 
Aula 03. utilização inline, incorporado e externo
Aula 03. utilização inline, incorporado e externoAula 03. utilização inline, incorporado e externo
Aula 03. utilização inline, incorporado e externoJolvani Morgan
 
Aula 27 caracteres especiais & encoding
Aula 27 caracteres especiais & encodingAula 27 caracteres especiais & encoding
Aula 27 caracteres especiais & encodingJolvani Morgan
 
Aula 25 e 26 formulário acessibilidade
Aula 25 e 26 formulário acessibilidadeAula 25 e 26 formulário acessibilidade
Aula 25 e 26 formulário acessibilidadeJolvani Morgan
 
Aula 23 e 24 formulário controles
Aula 23 e 24 formulário controlesAula 23 e 24 formulário controles
Aula 23 e 24 formulário controlesJolvani Morgan
 
Aula 19 imagens mapeadas
Aula 19 imagens mapeadasAula 19 imagens mapeadas
Aula 19 imagens mapeadasJolvani Morgan
 
Aula 18 links email, call, chat
Aula 18 links email, call, chatAula 18 links email, call, chat
Aula 18 links email, call, chatJolvani Morgan
 
Aula 17 links internos
Aula 17 links internosAula 17 links internos
Aula 17 links internosJolvani Morgan
 
Aula 16 links relativos
Aula 16 links relativosAula 16 links relativos
Aula 16 links relativosJolvani Morgan
 

Mais de Jolvani Morgan (15)

Aula 34. bordas arredondadas e sombreamento
Aula 34. bordas arredondadas e sombreamentoAula 34. bordas arredondadas e sombreamento
Aula 34. bordas arredondadas e sombreamento
 
Aula 28,29,30 e 31. layout (tableless)
Aula 28,29,30 e 31. layout (tableless)Aula 28,29,30 e 31. layout (tableless)
Aula 28,29,30 e 31. layout (tableless)
 
Aula 24,25,26 e 27. posicionamento
Aula 24,25,26 e 27. posicionamentoAula 24,25,26 e 27. posicionamento
Aula 24,25,26 e 27. posicionamento
 
Aula 19 e 20. estilização de links
Aula 19 e 20. estilização de linksAula 19 e 20. estilização de links
Aula 19 e 20. estilização de links
 
Aula 12. medidas absolutas e relativas
Aula 12. medidas absolutas e relativasAula 12. medidas absolutas e relativas
Aula 12. medidas absolutas e relativas
 
Aula 06, 07 e 08 seletores compostos e pseudo seletores
Aula 06, 07 e 08 seletores compostos e pseudo seletoresAula 06, 07 e 08 seletores compostos e pseudo seletores
Aula 06, 07 e 08 seletores compostos e pseudo seletores
 
Aula 03. utilização inline, incorporado e externo
Aula 03. utilização inline, incorporado e externoAula 03. utilização inline, incorporado e externo
Aula 03. utilização inline, incorporado e externo
 
Aula 02 sintaxe css
Aula 02 sintaxe cssAula 02 sintaxe css
Aula 02 sintaxe css
 
Aula 27 caracteres especiais & encoding
Aula 27 caracteres especiais & encodingAula 27 caracteres especiais & encoding
Aula 27 caracteres especiais & encoding
 
Aula 25 e 26 formulário acessibilidade
Aula 25 e 26 formulário acessibilidadeAula 25 e 26 formulário acessibilidade
Aula 25 e 26 formulário acessibilidade
 
Aula 23 e 24 formulário controles
Aula 23 e 24 formulário controlesAula 23 e 24 formulário controles
Aula 23 e 24 formulário controles
 
Aula 19 imagens mapeadas
Aula 19 imagens mapeadasAula 19 imagens mapeadas
Aula 19 imagens mapeadas
 
Aula 18 links email, call, chat
Aula 18 links email, call, chatAula 18 links email, call, chat
Aula 18 links email, call, chat
 
Aula 17 links internos
Aula 17 links internosAula 17 links internos
Aula 17 links internos
 
Aula 16 links relativos
Aula 16 links relativosAula 16 links relativos
Aula 16 links relativos
 

Aula 12. medidas absolutas e relativas

  • 1. Medidas Absolutas e Relativas CSS - Style Sheet Professor: Jolvani Aula 12
  • 2. Medidas Absolutas e Relativas - CSS          Unidades de Medidas Lineares Na w3schools podemos encontrar essas unidades de medidas Temos 3 tipos de unidades: Em %, Absolutas e Relativas. Medidas Absolutas São medidas que não dependem de um valor de referência: Existem 5 tipos de unidades de medida absoltas. Polegada: in ex: 5en; 5cm, 5mm, 5pt, 5pc (pt, pc - unidades de medidas tipográficas) São poucas utilizadas devido ao tamanho da resolução (+ usado pt = ponto).
  • 3. Medidas Absolutas e Relativas - CSS  Medidas Relativas  Dividem-se em 3 medidas;  5em defini uma fonte de referencia 10px então uso 1 x em = 1em ou 2 x em = 2em.  5ex = altura da letra x em minúsculo.  5px em pixels  As mais utilizadas são em e px.  Exemplo unidade em:  Definido h1 = 50px; e h2 = 20px; após  h1 e h2 margem a esquerda 1em, ou seja,  Para margem em h1 = 50 e em h2 = 20.
  • 4. Medidas Absolutas e Relativas - CSS  Exemplo em:  Definido h1 = 50px; e h2 = 20px; após  h1 e h2 margem a esquerda 1em, ou seja,  Para margem em h1 = 50 e em h2 = 20.
  • 5. Medidas Absolutas e Relativas - CSS  Outra forma, através do seletor universal (*).
  • 6. Medidas Absolutas e Relativas - CSS  Alterando... Outra forma, através do seletor universal (*).
  • 7. Medidas Absolutas e Relativas - CSS  Exemplo unidade px: é calculado em ralação a resolução do seu monitor, porém ele é útil na criação de layout com dimensões fixas.  Exemplo unidade em %: o layout pode ser variável, de acordo com sua resolução... Sempre calculadas em relação a um valor pré-existente.  Vc pode definir outras porcentagens, teste....