Unidades CSS | Explicado
Os resultados deste blog são:
- O que são unidades CSS?
- Quais são as unidades de comprimento absoluto no CSS?
- Como usar unidades de comprimento absoluto no CSS?
- Quais são as unidades de comprimento relativo no CSS?
- Como usar unidades de comprimento relativo no CSS?
O que são unidades CSS?
Existem várias unidades no CSS que são usadas para indicar um comprimento ou para a medição da propriedade CSS. Por exemplo, em um arquivo CSS, o “tamanho da fonte”A propriedade recebe um valor de“25px”, Que representa o número com a unidade“pixel”(PX). Além disso, não deve haver espaço em branco entre o número e a unidade de medição relevante. No entanto, se o valor do comprimento for 0, as unidades poderão ser excluídas.
As unidades de comprimento CSS são de dois tipos: relativa e absoluta.
Quais são as unidades de comprimento absoluto no CSS?
As unidades de comprimento absoluto dependem de uma unidade física real. Normalmente eles têm o mesmo tamanho em dispositivos diferentes. Essas unidades não são recomendadas para utilização nas telas porque o tamanho da tela varia. No entanto, unidades de comprimento absoluto são utilizadas onde o tamanho da tela é conhecido. Esses tipos de unidades também são úteis em tarefas em que a capacidade de resposta não importa.
Como usar unidades de comprimento absoluto no CSS?
Existem várias unidades absolutas usadas no CSS. Alguns deles são mostrados abaixo:
| Unidade | Descrição |
| pt | Especifica a medição em pontos. 1pt = 1/72 de 1 polegada. |
| em | Especifica a medição em polegadas. 1in = 96px = 2.54cm |
| px | Especifica a medição em pixels. 1px = 1/96th de polegada. |
| cm | Especifica a medição em centímetros. |
Vamos passar pelo exemplo em que as unidades de comprimento absoluto são usadas.
Exemplo: Usando unidades de comprimento absoluto no CSS
No HTML, primeiro adicione uma div com estilo CSS embutido, usando “margem" e "preenchimento”Propriedades. Então o
A tag é colocada para adicionar um título à página. Diversos
Tags são adicionadas com o relevante “tamanho da fonte”Em números com unidades diferentes:
A propriedade "tamanho da fonte"
Size da fonte: 20px
Size da fonte: 20pt
Size da fonte: 20in
Size da fonte: 20cm
Size de fonte: 20mm
Pode -se observar que o texto com valores com diferentes comprimentos absolutos do CSS foi exibido na página da web:
Quais são as unidades de comprimento relativo no CSS?
No CSS, as unidades de comprimento relativo especificam o comprimento em relação à propriedade de comprimento correspondente. Comparados aos comprimentos absolutos, as unidades de comprimento relativas são muito melhores, pois fornecem escala entre vários meios de renderização.
Como usar unidades de comprimento relativo no CSS?
Aqui, alistamos algumas das unidades de comprimento relativo principalmente utilizadas no CSS:
| Unidade | Descrição |
| vh | Altura da vista: em relação a 1% da altura da viewport |
| vw | Visualizar largura: em relação a 1% da largura da viewport |
| % | Porcentagem: é o tamanho em porcentagem em relação ao tamanho dos pais. |
| vmin | Viewport mínimo: 1% das menores dimensões da viewport. |
| vmax | Viewport máximo: 1% das maiores dimensões da viewport. |
Exemplo: Usando unidades de comprimento relativo no CSS
Usando o mesmo código HTML, agora alteraremos apenas o valor do “tamanho da fonte”Propriedade com as unidades de comprimento relativo relevante:
A propriedade "tamanho da fonte"
Size da fonte: 3VH
Size da fonte: 3CH
tamanho de fonte: 3%
Size da fonte: 3REM
Size da fonte: 3VW
Saída
É assim que você pode utilizar diferentes unidades CSS em nossos arquivos HTML.
Conclusão
Existem dois tipos de unidades de comprimento usadas no CSS: unidades de comprimento absoluto e unidades de comprimento relativo. Os comprimentos absolutos não são relativos a mais nada. Eles são sempre os mesmos em cada tamanho da janela, mas as unidades de comprimento relativas são sempre relativas a algo, como o elemento pai, fonte ou tamanho de viewport. Este artigo fornece um guia abrangente sobre unidades CSS, o tipo de unidades de comprimento CSS e como elas podem ser utilizadas.