Tutorial Intermediário de CSS: Propriedades Atalho

Algumas propriedades CSS permitem que uma sequência de valores substituam uma série de propriedades. Elas são representadas por valores separador por espaços.

margin, padding e border-width permitem a você combinar margin-top-width, margin-right-width, margin-bottom-width e etc. na forma

propriedade: top right bottom left;

Então:

p {
	border-top-width: 1px;
	border-right-width: 5px;
	border-bottom-width: 10px;
	border-left-width: 20px;
}

Pode ser resumido como:

p {
	border-width: 1px 5px 10px 20px;
}

border-width, border-color e border-style também podem ser somadas como, por exemplo:

p {
	border: 1px red solid;
}

(Isso também pode ser aplicado a border-top, border-right, etc.)

Ao declarar apenas dois valores (como margin: 1em 10em;), o primeiro valor vai ser o topo e a base, e o segundo valor vai ser a direita e a esquerda. Ao declarar apenas um valor, esse vai ser aplicado em todos os lados.

Propriedades relacionadas a fontes também podem ser unidas com a propriedade font:

p {
	font: italic bold 1em/1.5 courier;
}

(Onde o ‘/1.5′ é o atributo line-height.)

Então, juntando tudo, experimente esse código:

p {
	font: 1em/1.5 "Times New Roman", times, serif;
	padding: 3em 1em;
	border: 1px black solid;
	border-width: 1px 5px 5px 1px;
	border-color: red green blue yellow;
	margin: 1em 5em;
}

Atraente.

Existem bem mais atalhos que esses. E são todos muito, muito úteis. Leia esse guia de abreviações de CSS, mais abrangente que esse texto.

Páginas Relacionadas

• Próxima Página: Imagens de Background
• Página Anterior: Pseudo Classes
• Seletores, Propriedades e Valores (Tutorial Iniciante de CSS)

Referência

• margin
• padding
• border
• font
• background

BlogBlogs Tags: tutorial, minicurso, css

Esse material é uma adaptação do CSS Intermediate Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.