Colégio Pedro II - Campus São Cristóvão III Introdução à Ciência da Computação - Prof.

Bianca

Estudo dirigido CSS - Introdução à Ciência da Computação

PARTE 2

Unidades de medida
1) Explique a diferença entre unidades de medida absolutas e unidades de
medida relativas. Cite exemplos.
2) Pesquise e explique quais são os benefícios de se utilizar unidades de
medidas relativas no desenvolvimento web.
3) Pesquise e explique quais são os problemas que podem surgir ao se utilizar a
unidade de medida em para definir tamanho de fontes.
4) O que é viewport?
a) Em termos de medida, 1vh corresponde a quê?
b) Em termos de medida, 1vw corresponde a quê?
5) Explique o funcionamento das unidades de medida vmax e vmin.
6) Dadas as regras CSS abaixo, calcule o que é pedido. Dica: revise o conceito
de elemento-pai (parent element) e elemento-filho (child element) para fazer
as questões. Caso nenhum font-size esteja estabelecido para a raiz da
página na questão e seu valor seja necessário, calcule com base no padrão
de 16px.
Legenda: o elemento e1 é o elemento-pai. Os elementos e2 e e3 são filhos
de e1, o elemento e4 é filho do elemento e2 e o elemento e5 é filho do e3.
a) Calcule a largura dos elementos e2, e3, e4 e e5
e1{width: 1000px;}
e2{width: 80%;}
e3{width: 70%;}
e4{width: 90%;}
e5{width: 50%;}
Colégio Pedro II - Campus São Cristóvão III Introdução à Ciência da Computação - Prof. Bianca

b) Calcule o tamanho da fonte dos elementos e2, e3, e4 e e5

e1{font-size: 10px;}
e2{font-size: 1.5em;}
e3{font-size: 2em;}
e4{font-size: 2em;}
e5{font-size: 3rem;}
c) Calcule o padding dos elementos e2 e e4 e a margem do elemento e1
e1{font-size: 15px; margin: 2em;}
e2{padding: 2em;}
e4{padding: 1em;}
d) Calcule a margem dos elementos e1 e e3, o padding dos elementos
e4 e e5 e o font-size dos elementos e2 e e4:
e1{margin: 2em;}
e2{font-size: 2em;}
e3{margin: 1.5em;}
e4{font-size: .5em; padding: 1em;}
e5{padding: 2em;}
e) Calcule a margem dos elementos e1 e e3, o padding dos elementos
e4 e e5 e o font-size dos elementos e2 e e4:
e1{margin: 2rem;}
e2{font-size: 2rem;}
e3{margin: 1.5rem;}
e4{font-size: .5rem; padding: 1rem;}
e5{padding: 2rem;}
Colégio Pedro II - Campus São Cristóvão III Introdução à Ciência da Computação - Prof. Bianca

Box model
Para as questões de box-model, caso nenhum font-size esteja estabelecido para a
raiz da página na questão e seu valor seja necessário para fazer o exercício, calcule
com base no padrão de 16px. Caso seja necessário, também assuma que o
elemento solicitado é filho direto de um elemento-pai com 1000px de largura.
1) A partir das especificações abaixo, e sabendo que a propriedade box-sizing
de todos os elementos foi definida como content-box, calcule o que é
pedido:
a) Qual é a largura dos elementos afetados pela regra abaixo?
img{width: 70%; padding: 1em; border: 2px solid red;}
b) Qual a altura e a largura dos elementos afetados pela regra abaixo?
.box{font-size: 20px; width: 300px; height: 300px;
padding-top: 1em; border-left: .5rem dotted yellow;
padding-left: .5em;}
c) Qual a altura dos elementos afetados pela regra abaixo?
div{font-size: 14px; height: 30em; width: 200px; padding:
2em 1em .5em 1rem; border-left-width: 3em;}
d) Qual a largura e altura do elemento afetado pela regra abaixo?
#container{width: 50em; height: 20em; width: 400px;
border-width: 3em 2em 4em 2em; padding: 10px 15px 12px 24px;}
e) Qual a largura dos elementos afetados pela regra abaixo?
.side_content{font-size: 12px; width: 20%;
border-bottom-width: 15px; padding: 5px 10px 1rem 3em;}
2) A partir das especificações abaixo, e sabendo que a propriedade box-sizing
de todos os elementos foi definida como border-box, calcule o que é pedido:
a) Qual é a largura dos elementos afetados pela regra abaixo?
img{width: 70%; padding: 1em; border: 2px solid red;}
b) Qual a altura e a largura dos elementos afetados pela regra abaixo?
.box{font-size: 20px; width: 300px; height: 300px;
padding-top: 1em; border-left: .5rem dotted yellow;
padding-left: .5em;}
c) Qual a altura dos elementos afetados pela regra abaixo?
Colégio Pedro II - Campus São Cristóvão III Introdução à Ciência da Computação - Prof. Bianca

div{font-size: 14px; height: 30em; width: 200px; padding:

2em 1em .5em 1rem; border-left-width: 3em;}
d) Qual a largura e altura do elemento afetado pela regra abaixo?
#container{width: 50em; height: 20em; width: 400px;
border-width: 3em 2em 4em 2em; padding: 10px 15px 12px 24px;}
e) Qual a largura dos elementos afetados pela regra abaixo?
.side_content{font-size: 12px; width: 20%;
border-bottom-width: 15px; padding: 5px 10px 1rem 3em;}
Colégio Pedro II - Campus São Cristóvão III Introdução à Ciência da Computação - Prof. Bianca

Media queries
1) O que é uma media query?
2) O uso de media queries é bastante comum para a criação de sites
responsivos. Qual é a principal característica de um site responsivo?
3) Quais são as partes que compõem uma media query?
4) Escreva a media query voltada para as seguintes especificações:
a) Mídias impressas
b) Telas com largura mínima de 1000px e na orientação paisagem
c) Dispositivos com largura mínima de 600px e largura máxima de
1200px
d) Dispositivos com largura máxima de 900px ou na orientação retrato
e) Dispositivos na orientação paisagem ou com largura máxima de
1300px
f) Telas com largura máxima de 850px
g) Dispositivo com largura mínima de 1400px
Colégio Pedro II - Campus São Cristóvão III Introdução à Ciência da Computação - Prof. Bianca

Regras CSS
1) Escreva as regras CSS que atingem os efeitos especificados abaixo:
a) Imagens dentro dos parágrafos da classe “exemplo” devem ter 30% da
largura do parágrafo e borda tracejada cinza de 5px
b) Corpo da página deve ter imagem de fundo hospedada em
http://recursosweb.com.br/imagens/fundo1.png . A imagem de fundo
deve cobrir toda a área da página, sem se repetir, e não deve rolar
junto com a rolagem de conteúdo.
c) Elemento de ID container deve ocupar 80% da largura do viewport,
possuindo largura máxima de 1400px, com 2em de padding nas
laterais e estando centralizado em relação ao corpo da página.
d) Linhas pares das tabelas devem ter a cor de fundo rgb(227,56,243) e
cor de fonte branca. Linhas ímpares das tabelas devem ter a cor de
fundo branca e a cor da fonte rgb(227,56,243). Todas as linhas da
tabela devem ter 3px de padding, tamanho da fonte de 15px e borda
inferior sólida, com 2px de largura e da cor rgb(46,222,222), e seus
textos devem estar centralizados.
e) Primeira letra de todos os parágrafos da página deve ser da cor azul e
estar sublinhada e em negrito, de tamanho 2em em uma fonte sem
serifa.