Dicas de CSS

Postado em July 24th, 2007 | Algo sobre CSS, Tutoriais, Web Standards

Para muita gente que está començando em sua caminhada rumo ao domínio de CSS, existem certas dificuldades que são quase que uma regra, detalhes como diferenças entre navegadores, versões de navegadores, resolução entre outros.

Segue abaixo, algumas dicas para ajudar no aprendizado, que podem amenizar muitas dores de cabeça. Vamos lá.

1. Trabalhando com margin, padding e border.

Esses 3 itens, costumam dar um pouco de trabalho no início, pelo fato de suas medidas serem somadas ao tamanho do elemento que ele faz parte. Exemplo: Se você estiver trabalhando com um elemento com 100×100px, e adicionar uma borda de 5px, ele passará a ter 110×110px, já que você adicionou 5px de cada lado. Para evitar isso, apenas lembre de sempre que adicionar um desses 3 elementos, considerar sua dimensão.

2.Resetar css

Com essa grande tormenta que nos segue, que é a luta IE x FF, muitos códigos costumam ser renderizados com diferenças gritantes. Algo que da muita diferença, são os tamanhos de paddings e a margins. Para evitar isso, a dica é resetar o css, ou seja, deixar tudo com um tamanho padrão. Segue o código para fazer isso.

*{margin:0;padding:0;}
address,th{font-style:normal;font-weight:normal;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;}
img,fieldset{border:none;}
ol,ul{list-style:none; font-size:inherit;}
a{text-decoration:none;}
div{position:relative;}

3. Resumindo o código

Uma outra coisa que ajuda, é uma maneira de declarar valores, com o mínimo de código possível. Alguns seletores como background, font, border, possuem várias caracteristicas, que poder ser reduzidas em uma linha só. Veja o exemplo.

div{

background-color:red;
background-image:url(bg.gif);
background-repeat:repeat-x;
background-position:50px 10px;

}

Esse código pode ser substituido por

div{background:red url(bg.jpg) repeat-x 50px 10px;}

4.Trabalhando com Float.

Essa faz parte de 90% das dúvidas que surgem para quem está começando.

Geralmente, o uso de float, deve ser acompanhado de um <br clear/>. Veja a seguir um exemplo de um dos problemas gerados pela falta desse detalhe.

Código sem float: Aqui temos algumas divs para exemplificar, mas tudo sem os floats.

Código com float: Quando colocamos o float, a div que contem o rodapé, fica escondida, pois como as duas colunas que ficam acima estão flutuando, o height delas não é considerado, e por isso não empurra o conteúdo para baixo.

Solução com br clear: Agora o exemplo com o problema resolvido, colocando um <br clear=”all”/> antes da div do rodapé, fazendo com que ele seja “empurrado” para baixo.

Existe uma outra solução mais “webstandards” que meu amigo Fechine costuma utilizar, que é usar um <br/> com o clear dentro do css, segue o exemplo:

<br class=”clear”>
clear {clear:both}

 

O resultado é o mesmo, porem, mais semanticamente correto.

 

5. Evite o uso desnecessário de divs:

Muitos elementos usando no html, podem ser formatados com css sem a necessidade de criar uma div para “prende-la”. Por exemplo, em um menu, onde geralmente usamos listas (<ul> </ul>), em alguns casos não precisamos criar uma div para colocar no menu. Podemos simplesmente formatar a ul, e deixa-la com o comportamento de uma div, colocando suas dimensões, background, e posicionamento.

6. Evitar os benditos <br/>:

Isso geralmente acontesse com quem trabalha no modo design dos editores de código, você sai dando “enters “, e vão aparencendo dezenas de <p></p> vazios, e <br/><br/> seguidos.

Para deixar o código mais limpo, e facilitar a formatação, uma dica é colocar um margin-bottom no parágrafo, assim, sempre terá um espaçamento entre parágrafos, evitando o uso desnecessário de <br/>

Posts Relacionados

4 Comentários para “Dicas de CSS”

  1. Gabriel Ramalho disse:
    July 24th, 2007 at 12:02

    Dicas de CSS??

    Fala sério, isso foi uma verdadeira aula.

    Esse blog está se tornando parada obrigatória antes de iniciar qualquer projeto web, sempre boas dicas e ótimas soluções.

    Parabéns,
    Grande abraço.

  2. Erika disse:
    July 25th, 2007 at 08:53

    Excelentes dicas, muito bom post! Realmente, aquela do padding eu aprendi na marra, e a do float também… isso é uma complicação pra quem tá começando.
    O pior é que tem vezes que o IE interpreta o margin de um jeito, e o firefox de outro né? Ontem mesmo eu tava montando um site tentando pôr uma margin-left mas o IE tava somando com alguma coisa e dando um espaçamento bem maior que o esperado; acho que foi alguma herança.
    Esse lance das heranças também dá um trabalho, mas o CSS Reset é uma mão na roda pra esse problema.

    Uma dica que eu daria pra quem tá começando é desenhar o esquema num papel, pra facilitar na hora de montar; no começo é meio complicado e a gente acaba se perdendo, e sem planejamento as coisas ficam meio bagunçadas e parecendo uma grande gambiarra… hehehe aí desenhando o esquema dá uma ajudinha.

    xêro.

  3. ::WEBDESIGN - Rodrigo Medeiros - XHTML CSS:: » Dicas de CSS #2 disse:
    February 8th, 2008 at 08:14

    […] outras dicas de […]

  4. Maicon disse:
    June 28th, 2008 at 18:40

    Cara um bom post, pra quem espera começar deveria dar uma olhada nesta dica, continue assim, ah e já que encontrei este teu site, já adicionei aos favoritos, pra enviar dúvidas entre curiosidades…

    espero receber minhas respostas…

    ;D

    Abraçosss e até mais…

Solte o Verbo