Carlos Eduardo de Souza 0 Denunciar post Postado Outubro 28, 2008 Uma das características que fazem o CSS uma linguagem tão difundida é sua facilidade de aprendizado e flexibilidade para a escrita. Seja usando uma regra ou propriedade por linha, seu código funcionará corretamente. Há tambem diversas maneiras de definir determinadas propriedades do CSS como background, font, margin, padding, etc. E este é o intuito deste artigo, mostrar para aqueles que ainda não conhecem estes “atalhos” que ajudam (e muito) a diminuir seu código. Background Como o próprio nome diz, a propriedade background define o fundo do elemento, com uma cor sólida ou uma imagem. Neste último caso, pode-se dizer se esta será repetida, seu posicionamento e comportamento. seletor { background-image: url(imagem.jpg); background-color: #fff; background-repeat: no-repeat; background-position: bottom; } Como pode-se perceber, esta maneira deixa seu código muito extenso, então vamos abreviar estas propriedades em uma única linha. Neste caso, não há importância na ordem pela qual você dispõe os valores, mas é interessante manter um padrão de escrita: seletor { background: url(imagem.jpg) #fff bottom no-repeat; } Color Como nem todos ainda sabem, é importante comentarmos sobre a abreviação na declaração da escrita das cores. Quando utilizamos os valores hexadecimais, há casos nos quais podemos escrever apenas 3 caracteres, ao invés dos 6 que estamos acostumados. seletor { color: #aaff00; } Podemos abreviar desta forma: seletor { color: #af0; } A lógica da abreviação é simples: cada caractere representa um par de caracteres da escrita não abreviada. Veja o esquema abaixo: Abreviação da propriedade color em CSS Margin e padding A lógica para abreviação das propriedades margin e padding é a mesma. Vejamos o exemplo da escrita sem abreviação: seletor { margin-top: 1px; margin-right: 1px; margin-bottom: 1px; margin-left: 1px; padding-top: 1px; padding-right: 1px; padding-bottom: 1px; padding-left: 1px; } Para abreviar existem algumas maneiras: Neste caso, os valores são aplicados para todos os lados do elemento: seletor { margin: 1px; padding: 1px; } Se as unidades do topo e rodapé forem as mesmas (1px), esquerda e direita forem iguais entre si (5px), podemos escrever de outra forma: seletor { margin: 1px 5px; padding: 1px 5px; } Mas há situações nas quais precisa-se utilizar uma unidade para o topo (1px), outra (igual) para os lados (5px) e mais uma para o rodapé (6px): seletor { margin: 1px 5px 6px; padding: 1px 5px 6px; } E, por fim, uma maneira simplificada de escrever as dimensões para todos os lados, mas deve-se seguir o sentido horário, ou seja: top (1px), right (2px), bottom (3px) e left (4px): seletor { margin: 1px 2px 3px 4px; padding: 1px 2px 3px 4px; } Border Para abreviar a propriedade border é tão fácil quanto a background, pois não exige uma ordem padrão. Segue abaixo exemplo da escrita sem abreviações: seletor { border-width: 1px; border-style: solid; border-color: #000; } Para abreviar esta propriedade é simples: seletor { border: 1px solid #000; } Caso queira estilizar somente a borda do topo, por exemplo, é só acrescentar “-top” após o “border”: seletor { border-top: 1px solid #000; } Font Esta propriedade tem a função de estilizar o tamanho da fonte, sua linha, família, peso, etc. A forma mais complexa de escrita é a seguinte: seletor { font-style: normal; font-variant: small-caps; font-weight: bold; font-size: 1em; line-height: 1.3em; font-family: "Trebuchet MS", Arial, sans-serif; } Muitos não sabem que a propriedade line-height se inclui nesta abreviação, por não ter o prefixo “font”. Veja agora a maneira simplificada de escrever a propriedade font: seletor { font: normal small-caps bold 1em/1.3em "Trebuchet MS", Arial, sans-serif; } Fique atento para a ordem de escrita e, caso o nome da fonte tenha espaço, escreva utilizando aspas duplas, como no exemplo acima. List-style A propriedade list-style é utilizada para estilizar a marcação de itens de lista. A escrita não abreviada é a seguinte: seletor { list-style-type: circle; list-style-position: inside; list-style-image: url(bullet.gif); } Para escrevê-la de forma simplificada não é necessária uma ordem certa das propriedades. Veja o exemplo da abreviação: seletor { list-style: circle inside url(bullet.gif); } Há outras propriedades que podem ser simplificadas, como a outline mas, devido sua falta de suporte, não é necessário exemplificá-la aqui. Fonte: Portfolio e blog sobre Web Standards - project.47 Compartilhar este post Link para o post Compartilhar em outros sites
brcontainer 16 Denunciar post Postado Março 5, 2009 Concerteza muito util e intuitiva o seu tópico, parabens pelo "achado" ;) Compartilhar este post Link para o post Compartilhar em outros sites