Dicas de CSS

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
. 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
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
com o clear dentro do css, segue o exemplo:

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 (

), 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
:

Isso geralmente acontesse com quem trabalha no modo design dos editores de código, você sai dando “enters “, e vão aparencendo dezenas de

vazios, e

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

~ por Julio Cesar Milanes em agosto 2, 2007.

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

 
%d blogueiros gostam disto: