Shorthands em CSS

Shorthands em CSS são declarações abreviadas que permitem definir várias propriedades relacionadas em uma única linha. Elas tornam o código mais conciso e fácil de ler.

Exemplos comuns incluem margin, padding, background, e font. Usando shorthands, é possível definir valores para diferentes lados ou aspectos de um elemento sem a necessidade de múltiplas declarações. Isso economiza tempo e facilita a manutenção do código.

Font:

.container{
font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-size: 1em;
line-heightL 1.6;
font-family: Arial, Helvetica, sans-serif;
}

Exemplo shorthand

.container{
font: bold italic small-caps 1em/1.6 Arial, sans-serif;
}

Background:

.container{
background-color: #ddd;
background-image: url(image.png);
background-repeat: no-repeat;
background-position: top left;
background-attachment: fixed;
}

Exemplo shorthand

.container{
background #ddd url(image.png) no-repeat top lefy fixed;
}

Por curiosidade traduzi por parte SHORT que significa CURTO e HANDS que significa MÃOS. mais no inglês agente pode traduzir a palavra "shorthands" no português como "abreviações" ou "formas abreviadas". No contexto do CSS, refere-se ao uso de uma única declaração para definir várias propriedades relacionadas de maneira abreviada.

Valeu? Espero ter ajudado a tornar você mais curioso.

Linkendin

https://www.linkedin.com/in/sergiosousa-tec/

GitHub

https://github.com/SergioDevSousa