Entendendo o shorthand no CSS \| TreinaWeb [ Black November 62% OFF **15 meses de acesso total** + 3 meses grátis **12x R$ 49** · 15 meses de 12x R$ 129 por **12x R$ 49** Quero a oferta ](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-BLACKNOVEMBER49E3) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) Entendendo o shorthand no CSS [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) # Entendendo o shorthand no CSS Vamos aprender o que é shorthand no CSS, entender o conceito e aprender a deixar nossos estilos mais limpo e de fácil manutenção [ Amauri Blanco Corrêa ](https://www.treinaweb.com.br/blog/autor/amauri) 3 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2024/03/CSS-SHORTHAND.jpg) [ ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/06/BANNER-AULA-GRATUITA-1700x850-1.jpg) ](https://www.treinaweb.com.br/lp/aula-gratis/) Escrever estilos no [CSS](https://www.treinaweb.com.br/blog/guia-da-linguagem-css "CSS") é uma tarefa com curva de aprendizado relativamente baixa. Após um breve período de estudo e prática, já é possível estilizar páginas. No entanto, para elevar o nível das declarações e criar estilos mais limpos, escaláveis e de fácil manutenção, é essencial aprender e aplicar certas técnicas. Uma delas é o shorthand no CSS. Compreender essa técnica é crucial para alcançar uma folha de estilo mais eficiente e organizada. ## O que é shorthand no CSS? O shorthand no CSS é uma técnica essencial que simplifica o código ao permitir definir várias propriedades em uma única linha. Em vez de escrever propriedades separadas para elementos como margens, preenchimento interno, fontes, bordas, entre outros, o shorthand condensa as declarações, economizando espaço e melhorando a legibilidade do código. Essa prática é especialmente útil em arquivos CSS grandes, onde eficiência e organização são fundamentais. Portanto, uma pergunta frequente é: como usar shorthand corretamente? A resposta reside na compreensão da ordem dos valores e na prática constante dessa técnica, o que pode simplificar significativamente o processo de desenvolvimento web, tornando-o mais eficiente e escalável. ## Onde podemos aplicar essa técnica? O shorthand no CSS é incrivelmente flexível, adaptando-se a uma ampla variedade de propriedades comuns. Desde espaçamento até a estilização de texto e elementos de fundo, uma série de propriedades-chave são compatíveis com essa abordagem. Ao usar shorthand no propriedades como background e border, os desenvolvedores podem criar estilos complexos de maneira simples. Por exemplo, ao empregar a propriedade background, é possível definir cor, imagem, repetição, posição e tamanho em uma única linha, simplificando a criação de fundos elaborados para elementos [HTML](https://www.treinaweb.com.br/blog/guia-da-linguagem-html "HTML"). Neste artigo, vamos explorar de forma prática como aplicar essa técnica. No entanto, antes de prosseguirmos, farei uma lista detalhada com todas as propriedades que são compatíveis com shorthand. Onde podemos adicionarNome da PropriedadeMargemmarginPreenchimentopaddingFontefontFundobackgroundBordaborderContornooutlineTransiçãotransitionAnimaçãoanimationFlexboxflexGradegridSombra de Caixabox-shadowSombra de Textotext-shadowColunacolumnEstilo de Listalist-styleRaio da Bordaborder-radiusVariante de Fontefont-variantEstilo de Fontefont-stylePeso da Fontefont-weightTamanho da Fontefont-sizeAltura da Linhaline-heightFamília de Fontefont-familyItem Flexboxflex-flowItem Flexboxflex-basisItem Flexboxflex-growItem Flexboxflex-shrink [ ![HTML5 + CSS3 - Criando sites acessíveis](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/html5-css3.svg) Curso HTML5 + CSS3 - Criando sites acessíveis Conhecer o curso ](https://www.treinaweb.com.br/curso/html5-css3-criando-sites-acessiveis) ## Usando o shorthand na prática Agora, iremos enteder como usar na prática. Irei começar pelas margens e o preenchimento interno, que são, `margin` e `padding`. Tradicionalmente para usar as margens devemos indicar o local onde será aplicado o estilo, por exemplo: ```css .elemento { margin-top: 10px; margin-right: 10px; margin-bottom: 10px; margin-left: 10px; } ``` Como podemos ver, esse exemplo foi aplicado `10px` em todos os lados de um elemento. Utilizando os shorthand, fazemos a mesma declaração dessa forma: ```css .elemento { margin: 10px; } ``` Visivelmente, é utilizado apenas um linha para fazer a mesma coisa que foi feito anteriormente. A facilidade é clara. Você pode estar se perguntando. E se eu quiser aplicar medidas diferentes para cada lado do elemento, é possível? A resposta é sim, é possível. Vamos ver na prática. ```css .elemento { margin-top: 10px; margin-right: 20px; margin-bottom: 30px; margin-left: 40px; } ``` ```css .elemento { margin: 10px 20px 30px 40px; } ``` [ ![HTML5 + CSS3 - Propriedades e seletores avançados](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/html5-css3.svg) Curso HTML5 + CSS3 - Propriedades e seletores avançados Conhecer o curso ](https://www.treinaweb.com.br/curso/html5-css3-propriedades-e-seletores-avancados) Apenas separando por um espaço podemos fazer a mesma coisa. Aqui é muito importante tomar cuidado com um detalhe. Para aplicar para os quatro lados, existe uma ordem específica para fazer isso. A ordem das declarações funciona da seguinte forma: top(topo), right(direita), bottom(baixo) e left(esquerda). ```css .elemento { margin: top right bottom left; } ``` Tudo que acabamos de ver, funciona, da mesma forma, para o preenchimento interno, o `padding`. ```css .elemento { padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; } .elemento { padding: 10px; } ``` Além disso, podemos fazer com apenas duas ou três declarações. Com duas declarações nos aplicamos os valores para dois conjuntos, `top bottom`, e `left right`. Vamos ver um exemplo que tudo ficará mais claro: ```css .elemento { margin-top: 10px; margin-right: 50px; margin-bottom: 10px; margin-left: 50px; } .elemento { margin: 10px 50px; } ``` Já para três declarações, segue a seguinte ordem: `top`, `right left` e `bottom`. Na prática, ficará dessa forma: ```css .elemento { margin-top: 10px; margin-right: auto; margin-bottom: 30px; margin-left: auto; } .elemento { margin: 10px auto 30px; } ``` Nesse código nós temos, o valor `auto` que está sendo usado para a margem direita e esquerda, enquanto `10px` é aplicado à margem superior e `30px` à margem inferior. Lembrando que essa técnica com três declarações também pode ser usada para o `padding`. Porém, sem o valor de `auto`, que não funciona com atributo `padding`. ## Shorthand para background Em primeiro lugar, o shorthand para background é uma ferramenta primordialmente útil no desenvolvimento web, permitindo definir várias propriedades do plano de fundo de um elemento de forma concisa. Ademais, sua relevância é evidente na simplificação do código CSS, proporcionando uma maneira eficiente de definir cores, imagens de fundo e outras características visuais de um elemento. [ ![HTML5 + CSS3 - Primeiros passos](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/html5-css3.svg) Curso HTML5 + CSS3 - Primeiros passos Conhecer o curso ](https://www.treinaweb.com.br/curso/html5-css3-primeiros-passos) Por exemplo, ao definir o background de um elemento com o shorthand, pode-se especificar simultaneamente a cor de fundo, uma imagem de fundo, sua posição, repetição e até mesmo anexar uma imagem gradiente. Desse modo, o shorthand proporciona uma maneira idêntica de expressar várias propriedades relacionadas ao plano de fundo de um elemento, economizando tempo e espaço no código. Vamos ver um exemplo. ```css .elemento { background-color: #ffffff; /* Cor de fundo branco */ background-image: url('imagem.jpg'); /* Imagem de fundo */ background-repeat: no-repeat; /* Não repetir a imagem */ background-position: center center; /* Posição centralizada da imagem */ background-size: cover; /* Redimensionar a imagem para cobrir todo o elemento */ } ``` Todas essas declarações são possíveis em apenas uma linha, dessa forma: ```css .elemento { background: #ffffff url('imagem.jpg') no-repeat center/center cover; } ``` Conforme aumenta a complexidade da declaração, é fácil de ver como o shorthand ajuda a escrever um código mais limpo e de fácil compreensão. ## Conclusão [ ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/06/sessao-mentoria.jpg) ](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?forma=cartao) Em conclusão, o shorthand no CSS é uma ferramenta essencial para qualquer desenvolvedor web. Com sua capacidade de compactar múltiplas instruções em uma única linha de código, ele não apenas simplifica o processo de estilização, mas também melhora significativamente a legibilidade e a manutenção do estilo da página. Portanto, compreender e dominar essa técnica é crucial para alcançar uma folha de estilo mais eficiente e organizada, contribuindo para o desenvolvimento de projetos web de alta qualidade. Ao incorporar o shorthand no CSS em seu fluxo de trabalho, os desenvolvedores podem economizar tempo e esforço, enquanto criam estilos complexos e elegantes com facilidade. Portanto, não apenas aprender sobre o shorthand, mas também praticar consistentemente seu uso é fundamental para alcançar resultados visuais impressionantes e uma experiência de desenvolvimento mais fluida. Em suma, o shorthand em CSS é uma ferramenta poderosa que todo desenvolvedor web deve dominar para impulsionar sua eficiência e produtividade. [ ![Desenvolvedor Especialista Front-end](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/html5-css3.svg) Formação Desenvolvedor Especialista Front-end Conhecer a formação ](https://www.treinaweb.com.br/formacao/desenvolvedor-especialista-front-end) - [ #CSS ](https://www.treinaweb.com.br/blog/tag/css) - [ #Desenvolvimento Front-End ](https://www.treinaweb.com.br/blog/tag/desenvolvimento-front-end) - [ #Shorthand CSS ](https://www.treinaweb.com.br/blog/tag/shorthand-css) Autor ![Amauri Blanco Corrêa](//secure.gravatar.com/avatar/98d195107c5e3e8d91ee13c18f2a8f34?d=mm) ## Amauri Blanco Corrêa Sou formado em Análise e Desenvolvimento de Sistemas pela Universidade Cruzeiro do Sul, uma pessoa extremamente curiosa e dedicada, amo tecnologia e sempre busco aprender e aperfeiçoar meus conhecimentos. Atuo há mais de 3 anos como desenvolvedor e instrutor Front-end sou um eterno estudante do mundo da tecnologia. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/amauri) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/10/o-que-e-e-como-comecar-com-golang-400x280.jpg) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 4 anos atrás ## [ Entendendo ponteiros na Golang ](https://www.treinaweb.com.br/blog/entendendo-ponteiros-na-golang) Neste artigo veremos sobre os ponteiros na Golang. Vamos entender o que são ponteiros, quais suas vantagens e desvantagens e como utilizá-los. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/01/atributos-html-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 4 anos atrás ## [ Entendendo os atributos HTML ](https://www.treinaweb.com.br/blog/entendendo-os-atributos-html) No artigo de hoje, veremos algo que está muito presente no mundo da programação, atributos. Por que são tão importantes para o Front-End? Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/03/18113452/MTV-DJANGO-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 7 anos atrás ## [ Entendendo o MTV do Django ](https://www.treinaweb.com.br/blog/entendendo-o-mtv-do-django) Veja neste artigo como funciona o padrão de projeto utilizando em projetos Django, o MTV. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/jpa-400x280.jpg) [ Java ](https://www.treinaweb.com.br/blog/categoria/java) 10 anos atrás ## [ Entendendo o método merge do JPA ](https://www.treinaweb.com.br/blog/entendendo-o-metodo-merge-do-jpa) Aprenda como o método merge do JPA funciona e utilize-o corretamente em seu projeto. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/inje--o-400x280.jpg) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 10 anos atrás ## [ Entendendo injeção de dependência ](https://www.treinaweb.com.br/blog/entendendo-injecao-de-dependencia) Aprenda o que é injeção de dependência e como o princípio da inversão de dependência é importante para diminuir o acoplamento dos seus códigos. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/03/13164211/JAVASCRIPT-COISAS-ESTRANHAS-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 7 anos atrás ## [ JavaScript - Entendendo as partes estranhas ](https://www.treinaweb.com.br/blog/javascript-entendendo-as-partes-estranhas) Conheça o motivo por trás de vários comportamentos considerados estranhos que o JavaScript possui. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/02/CONHECENDO-VÁRIAVEIS-CONSTANTES-JAVASCRIPT-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 6 anos atrás ## [ Conhecendo variáveis e constantes no JavaScript ](https://www.treinaweb.com.br/blog/conhecendo-variaveis-e-constantes-no-javascript) Neste artigo vamos aprender a declarar e a utilizar constantes e variáveis no JavaScript, entendendo quando definir var, let e const. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/01/EXECUTAR-PRIMEIRO-CÓDIGO-JAVASCRIPT-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 6 anos atrás ## [ Como executar seu primeiro código JavaScript ](https://www.treinaweb.com.br/blog/como-executar-seu-primeiro-codigo-javascript) Vamos aprender e executar nosso primeiro código em JavaScript, entendendo sobre a utilização do console do navegador e ferramentas on-line. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/04/16131227/di-autowiring-400x280.jpg) [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 8 anos atrás ## [ Autowiring em Container de Injeção de Dependência ](https://www.treinaweb.com.br/blog/autowiring-em-container-de-injecao-de-dependencia) Dando sequência aos artigos sobre Injeção de Dependência e Container de Injeção de Dependência, nesse artigo veremos como implementar a resolução automática de dependências, algo comum em Frameworks como Laravel, Symfony etc. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/container-400x280.jpg) [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 10 anos atrás ## [ Container de injeção de dependência (DI Container) ](https://www.treinaweb.com.br/blog/container-de-injecao-de-dependencia-di-container) Injetar dependências pode se tornar uma tarefa tediosa quando se têm muitas classes envolvidas. Um container de injeção de dependência resolve grande parte desse problema. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/01/afinal-o-que-e-um-container-400x280.png) [ DevOps ](https://www.treinaweb.com.br/blog/categoria/devops) 6 anos atrás ## [ Afinal, o que é um container? ](https://www.treinaweb.com.br/blog/afinal-o-que-e-um-container) Confira neste artigo o que vem a ser um container. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/09/ux-research-e-360-view-o-que-e-e-como-pode-ser-aplicado-400x280.png) [ Acessibilidade e User Experience (UX) ](https://www.treinaweb.com.br/blog/categoria/acessibilidade-e-user-experience-ux) 6 anos atrás ## [ UX Research e 360 View – O que é e como pode ser aplicado? ](https://www.treinaweb.com.br/blog/ux-research-e-360-view-o-que-e-e-como-pode-ser-aplicado) Entenda o que é e como aplicar o UX Research e 360 View, técnicas importantes na hora de pensar em uma melhor experiência do usuário. Ler artigo A Black Friday da TreinaWeb · até 27/11 ## 15 meses de acesso total, com 3 meses de presente. 12 meses de assinatura e mais 3 meses grátis. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **15 meses** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. Black November ### Acesso total + 3 meses de presente 15 meses De presente **12 meses** de assinatura + 3 meses grátis Economize R$ 960,00 62% OFF de 12x R$ 129,00 por apenas 12x R$ 49,00 sem juros no cartão de crédito ou R$ 499,00 à vista [Quero a Black November](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-BLACKNOVEMBER49E3) - Parcele no cartão, boleto ou Pix - Acesso imediato após o pagamento [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58