10 de julho de 2009

CSS Tutorial - Deixe seu CSS mais enxuto.

As veses algumas páginas de CSS ficam imensas difícil até de encontrar aquele código pra poder editar, uma solução para diminuir esse código tendo o mesmo efeito é transformando várias propriedades em uma só.
Vamos aplicar isso na propriedade border.

Bordas - width, color e style



Ao invés de usar border-top-width, border-bottom-width, border-left-width e border-right-width para editar as quatro bordas de tabelas ou divs, podemos subtituir por apenas border-width e colocar os quatro valores na propriedade.
Também podemos substituir border-color e border-style por border e aplicar os valores nessa propriedade.


Exemplo, ao invés de:

#exemplo {
border-color:#000099;
border-style:dashed;
border-left-width:1px
border-right-width:3px;
border-top-width:5px;
border-bottom-width:7px;
}


Você tem o mesmo resultado
com um código mais "enxuto", veja:




Resultado final:

Nenhum comentário:

Postar um comentário