Unidades CSS | Explicado

No nosso dia-a-dia, um “unidade”De medição é muito importante. Ele fala sobre as propriedades dos elementos, como quanto tempo ou extenso eles são. A unidade de medição deve ser especificada após o número. Por exemplo, no CSS, o valor da propriedade de duração da transição é definido como 3s em que “3"É o número e"s”É a unidade chamada Segundo. Além disso, o CSS oferece várias abordagens para utilizar as unidades.

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.