Solucionado
Boa noite, estou tendo dificuldades em usar as medidas.
Na página nova index criada, como se chegou a esse resultado:
.saudacao p {
font-size: 1.5em;
color: #99A;
line-height: 1;
padding: 2em;
}por que 1.5em e 2em? Não entendi o calculo utilizado para se chegar a esses números.
hoje, com a Alura e o Google Gemini
Olá, Bruno! Tudo certo, cara? =)
Lembre-se que em são medidas relativas ao elemento pai, ou seja, o que estamos dizendo é que esses parágrafos terão tamanho igual a 1.5x o tamanho da fonte do elemento pai. Assim como o padding, que será o dobro do tamanho da fonte. =)
No caso, o HTML, que é o elemento raiz, possui tamanho 16px. Observe que no arquivo site.css, modificamos <body> para ter uma fonte de tamanho igual a 120%:
body {
font-size: 120%;
}A partir daí, a fonte passou a ser 19.2px. E a estrutura do HTML é a seguinte:
<body>
<main>
<section class="secao-inicio saudacao">
<p class="saudacao">
// <span> e outras tags...Repare que, como não alteramos o font-size nem do elemento <main>, nem da tag <section>, ela permanece em 19.2px. Então, o que fizemos foi o seguinte (index.css):
.saudacao p {
font-size: 1.5em;
// Outras propriedades...
}Nesse caso, o parágrafo passou a ter 1.5x o tamanho da tag pai, a <section>, totalizando 28.8px.
A ideia de tudo isso é simplesmente deixar a fonte um pouco maior e dar um "respiro interno", para não ficar muito nas bordas da tela. Para você ter uma ideia de como ficaria sem esses valores, tente acessar a página em um desktop com uma tela Full HD, por exemplo... Aqui, eu estou usando um monitor com 1920 x 1080px e o resultado é bizarro sem essas propriedades. Rs... =)
Espero ter ajudado, mas se houver qualquer dúvida ainda, não deixe de postar no fórum para podermos ajudá-lo!
Abraço e bons estudos,
Fábio
Olá Fabio muito obrigado pelo retorno. Fiquei focado apenas no css da index, e não me atentei ao css do site.css =/
O que agora só ta um pouco confuso para mim é por que do valor ser exatamente 1.5e? No enunciado não especificou o quanto teria que aumentar da fonte dos elementos em relação ao font-size do body.
Bruno,
De fato, não há nada informado no exercício. Entretanto, temos uma imagem como guia para obter o resultado... A partir dela você consegue ir testando e tentar chegar no resultado esperado. Alguns pixels a mais ou a menos não farão tanta diferença assim. =)
A ideia é realmente ver se o aluno conseguiu entender para que servem as medidas relativas e como usá-las, sacou? =)
Abraços,
Fábio
Usar "em" para elementos que o pai não tem fonte definida, como no exemplo acima, dá no mesmo que usar "rem"?
Olá, Júlio! Tudo bem, cara? =)
Os valores em em e rem são bem parecidos... O que você disse está quase correto. A forma como eu gosto de pensar é que o em vai "procurando" nos elementos pais o valor de font-size, enquanto que o rem é como um "atalho" para o elemento raiz (<html>)...
Sacou a diferença entre o que você propôs e o que propus? =)
Não necessariamente, precisamos definir o valor do font-size para o elemento pai quando usamos em, pois se não o fizermos, essa tag pai herdará o font-size da tag "avô" dela...
Dando um exemplo:
<html>
<head>
<style>
html {
font-size: 10px;
}
div {
font-size: 2em;
}
section {
font-size: 2rem;
}
p {
font-size: 2em;
}
</style>
</head>
<body>
<p>Parágrafo 01.</p>
<div>
<p>Parágrafo 02.</p>
</div>
<div>
<section>
<p>Parágrafo 03.</p>
</section>
<article>
<p>Parágrafo 04.</p>
</article>
</div>
</body>
</html>Espero que esse exemplo consiga ajudá-lo! Repare que coloque quatro parágrafos aqui... Qual é o font-size de cada um deles? Vou colocar a resposta logo abaixo, mas antes, tente entender o código e adivinhar quais serão os valores!!
Resposta:
Primeiro, repare que coloquei no <html> o valor de 10px e, além disso, coloquei em cada <p> o valor de 2em, então ele será o dobro da tag pai.
No caso do parágrafo 01, será de 20px!
No caso do parágrafo 02, será o dobro do elemento pai, que é uma <div>... Que eu havia colocado uma fonte igual a 2em, ou seja, o dobro do pai. No nosso caso, o parágrafo 02 terá 40px!
No terceiro, temos um parágrafo dentro de uma <section>, dentro de uma <div>. Já sabemos que a <div> terá 40px. Mas e a <section>? Repare que informei o valor de 2rem, ou seja, o dobro da raiz (<html>). Nesse caso, o terceiro também será de 40px!
E o último caso? Ele está dentro de um <article>, mas não coloquei informei nenhum valor específico para ele! Então, o <article> herdará o valor da <div>, ou seja, 2em = 20px. Finalizaremos, também, com 40px!
Acho que esse exemplo deu para mostrar um pouco do que eu quis dizer quando disse que o em vai "procurando" o tamanho da fonte nas tags pais... Ele olha no primeiro, se não tiver valor definido, quer dizer que ele herdou da tag "avô", e vou subindo na hierarquia... =)
Sacou? Rs...
Espero ter ajudado, mas qualquer dúvida que possa aparecer ou tenha restado não hesite em perguntar que lhe ajudaremos! =)
Abraço e bons estudos,
Fábio
Perfeito cara! Estou impressionado como as respostas são rápidas e elaboradas. No início eu usei o fórum totalmente desacreditado desse tipo de ferramenta pois nunca funcionou bem para mim. Agora to explorando mais o recurso para facilitar o aprendizado. Experiência está sendo excelente!!!
Valeu!
Júlio,
Ficamos muito feliz com seu feedback! Esperamos que aproveite ao máximo nosso fórum para que possamos ajudá-lo e auxiliar no seu aprendizado, afinal essa é nossa maior motivação: ensinar e saber que estamos fazendo a diferença para as pessoas!
Mas, nós da Alura não somos os únicos responsáveis por tudo isso... Os alunos são uma grande parcela das respostas desse fórum também, ou seja, se você postar uma dúvida, nós, instrutores e desenvolvedores da plataforma, iremos olhar, mas outros alunos também ajudarão! =)
Muito obrigado pelo feedback novamente e bons estudos!! =)
Fábio