Existem diversos valores numericos no CSS.
Porcentagem: 50%
A porcentagem não tem muito segredo, é muito usada para definir tamanho de div ou p com relação ao elemento pai, mas não se limita a apenas isso, pode por exemplo usar a porcentagem no tamanho da fonte onde 100% são 18px, ou seja 50% seria uma fonte de 9px.
Interio/Numero 5, -5.25
O numérico tambem é bem trivial, pode ser positivo e negativo e também pode conter casas decimais dependendo to tipo de propriedade que você está setando. muito utilizado em z-index, grid-row e grid-collumn e em animações.
Dimensão 5em, 5px, 300dpi, 90deg
Já a dimensão é bem mais complexa por tem vários valores nessa categoria.
Este pode ser utilizados para Tamanho, angulo, tempo e resolução, mas estes vamos ver em detalhes mais para frente no curso.
Exercício 1: Tamanhos de Fonte com Porcentagem
Crie um arquivo HTML (index.html) com a seguinte estrutura:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<p class="small-text">Texto pequeno</p>
<p class="large-text">Texto grande</p>
</body>
</html>
Agora, crie um arquivo CSS (styles.css) e estilize os elementos <p> com as classes .small-text e .large-text da seguinte maneira:
- Defina o tamanho da fonte do texto pequeno (
.small-text) como 50% do tamanho padrão. - Defina o tamanho da fonte do texto grande (
.large-text) como 150% do tamanho padrão.
Exercício 2: Dimensões de Elementos
Crie um arquivo HTML (index.html) com a seguinte estrutura:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="square"></div>
</body>
</html>
Agora, crie um arquivo CSS (styles.css) e estilize o elemento <div> com a classe .square da seguinte maneira:
- Defina a largura (largura) da div como 150 pixels (px).
- Defina a altura (altura) da div como 5em.
- Defina o fundo da div como uma cor de sua escolha.
Nesses exercícios, você deve criar arquivos HTML e CSS, aplicar valores numéricos em porcentagem, tamanhos de fonte e dimensões a elementos HTML para praticar a aplicação desses conceitos em CSS.