Shorthand:
Vamos explicar como escrever de forma reduzida nossas regras CSS para que nossos arquivos de estilo tenham menos peso e sejam mais entendíveis na hora de uma atualização.
Segunda a W3C há duas formas de escrever a mesma regra de CSS: a padrão e a shorthand. Uma é a longa e a outra é a reduzida.
Propriedade Font (fonte)
font-style || font-variant || font-weight || font-size / line-height || familia da fonte
Exemplo:
P {font: italic normal bold 12px/14pt Verdana, Tahoma, Arial}
Propriedade Background (fundo)
background-color || background-image || background-repeat || background-attachment || background-position
Exemplo:
Body {background: #FFF url(../imagens/exemplo.gif) no-repeat fixed center}
Margin (Margem)
longitude | porcentagem | auto
Exemplo:
Body {margin: 5px} /* todas as margens a 5px */
P {margin: 2px 4px} /* margens superior e inferior a 2px, margens esquerda e direita a 4px */
DIV {margin: 1px 2px 3px 4px} /* margem superior a 1px, right margin a 2px, bottom margin a 3px, left margin a 4px */
Padding (Enchimento)
longitude | porcentagem | auto
Exemplo:
Body {padding: 2em 3em 4em 5em} /* Se definimos quatro valores estamos aplicando o padding superior, direito, inferior e esquerdo */
Body {padding: 2em 4em) /* Se definimos dois ou três valores, os valores faltantes se tomam do lado oposto: superior e inferior a 2em, direito e esquerdo a 4em */
Body {padding: 5em} /* Se definimos um só valor se aplicam a todos os lados */
Border (Borda)
border-width || border-style || color
Exemplo:
H3 {border: thick dotted blue}
