Units CSS: Uma das características fundamentais do CSS é a capacidade de aplicar medidas aos elementos. Existem várias unidades de medida em CSS, e neste artigo, vamos explorar algumas delas.
Pixels
Pixels são a unidade de medida mais comum em CSS. Eles são usados para definir o tamanho, o espaçamento, a altura, a largura e outras propriedades dos elementos.
p {
font-size: 16px;
}No exemplo acima, o tamanho da fonte de todos os elementos p será de 16 pixels.
Porcentagens
As porcentagens em CSS são usadas para definir uma medida em relação a outra medida. Por exemplo, você pode usar porcentagens para definir a largura de um elemento em relação à largura do seu elemento pai.
div {
width: 50%;
}No exemplo acima, a largura de todos os elementos div será 50% da largura do seu elemento pai.
Unidades de Medida do Mundo Real
CSS também suporta unidades de medida do mundo real, como polegadas (in), centímetros (cm), e pontos (pt). No entanto, essas unidades são menos comuns e geralmente não são recomendadas para uso na web, pois a forma como são exibidas pode variar dependendo da configuração do dispositivo do usuário.
Unidades Relativas
As unidades relativas em CSS são usadas para definir uma medida em relação a outra medida. Por exemplo, a unidade em é relativa ao tamanho da fonte do elemento pai, e a unidade rem é relativa ao tamanho da fonte do elemento raiz.
p {
font-size: 2em;
}
h1 {
font-size: 2.5rem;
}No exemplo acima, o tamanho da fonte de todos os elementos p será duas vezes o tamanho da fonte do seu elemento pai, e o tamanho da fonte de todos os elementos h1 será 2,5 vezes o tamanho da fonte do elemento raiz.
Unidades de Viewport
As unidades de viewport em CSS são usadas para definir uma medida em relação ao tamanho da viewport. As unidades vw e vh representam respectivamente uma porcentagem da largura e da altura da viewport.
div {
width: 50vw;
height: 50vh;
}No exemplo acima, a largura de todos os elementos div será 50% da largura da viewport, e a altura será 50% da altura da viewport.
Unidades de Fração
As unidades de fração em CSS, representadas pela unidade fr, são usadas no Grid Layout para representar uma fração do espaço disponível.
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr;
}No exemplo acima, a grade terá duas colunas. A primeira coluna terá um terço do espaço disponível, e a segunda coluna terá dois terços do espaço disponível.
Conclusão
Units CSS: As unidades de medida são uma parte essencial do CSS, e entender como usar diferentes unidades de medida é fundamental para criar layouts responsivos e flexíveis. Seja usando pixels, porcentagens, unidades de medida do mundo real, unidades relativas, unidades de viewport ou unidades de fração, o CSS oferece uma variedade de maneiras de aplicar medidas aos seus elementos.
Espero que este artigo tenha fornecido uma visão clara e abrangente das unidades de medida em CSS, juntamente com exemplos práticos de código. Pratique o uso dessas unidades de medida em seu próprio código e veja o quão flexíveis e responsivos seus layouts podem se tornar!
E para você validar seus códigos, você precisará de uma plataforma de host completa. Clique aqui e conheça a Hostinger!!!
