Valores Numéricos

Roger.Santos 03/01/2023

Módulo Progresso

0% Concluído

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.

Curso de CSS 3

Participantes 867