* CSS in-line.
* Tamanho de fontes absolutas.
* Utilizar “aspas” para marcar o caminho das imagens.
* CSS Hacks.
* Redeclarar valores herdados.
* Aplicar padding, bordas e larguras fixas para os elementos.
* !important e position:absolute.
* Nomes para Classes e IDs baseados em sua aparência.
Boas práticas
* Declarações CSS em uma única linha.
* Comente seu código.
* Organize seu arquivo CSS.
* Indentação conforme necessário.
* Construa um código de fácil leitura.
* Utilize um sistema de nomemclatura comum.
* Declarações em Ordem alfabética.
* O “;” não é necessário para a última declaração.
* Quando uma unidade declarada for 0 px/em/%/… você pode omitir a unidade.
* Utilizar o mínimo de divs, propriedades e seletores CSS.
* Agrupar seletores lhe permite selecionar vários elementos de uma só vez.
* Muitas propriedades podem ser abreviadas.
* Cores devem ser declaradas
* Defina Pseudo-classes para seus links na seguinte ordem: LoVe/HAte.
* Defina elementos como margin, padding e bordas na seguinte ordem: TRouBLed.
* Faça uso seletores filho.
* Faça uso de diferentes tipos de mídia.
* Nomeie suas classes e ID’s referentes a função, e não a aparência.
* Aprenda a explorar o efeito cascata. CSS tem sofisticadas regras de herança.
* Faça uso de seletores de atributo. Seletores de atributo correspondem a elementos com base no valor dos atributos.
* Deixe os textos em letras maiúsculas através de CSS.
* Organize os elementos por grupo, como: header, container, footer…para uma melhor visão global.
* Se inspire nos códigos de grandes empresas.
* Busque inspiração com os gurus do design.
* Dê uma olhada no Framework CSS Blueprint, de lá você pode tirar grandes idéias.
Facilite sua vida
* Utilize algum Cheat Sheet CSS.
* Teste seu CSS primeiramente em browsers mais avançados, e depois nos outros, nunca antes.
* Quando estiver em dúvida, valide seu código.
* Teste embutido, lance importado.
* Mantenha uma biblioteca com classes úteis em CSS.
* Experimente utlizar algum compressor de CSS on-line, alguns dos métodos que eles utilizam para reduzir o tamanho dos seus arquivos CSS você pode utilizar para desenvolver um arquivo de forma racionalizada.
* Utilize a Web Developer Toolbar para Firefox.
* Utilize algum framework CSS, por exemplo “Blueprint”.
Você sabia?
* Você pode utilizar multiplas classes em um único elemento.
* Defina valores constantes ao longo de um documento CSS.
Uma opção simples é definir cores para cada estado em que você deseja. Ao decorrer do documento, você pode ir alterando se necessário. Isso é bastante trivial.
Uma vez que um elemento pode ter mais de uma classe sobre ele, você pode aplicar classes para cada constante ou variável que deseja criar, e em seguida atribuir essas classes a elementos (x)HTML que deseja afetar. Uma vez que um elemento pode ter mais de uma classe sobre ele, este não deve interferir em eventuais utilizações existentes. Portanto, se você deseja alterar a cor, tudo o que precisa fazer é alterar a cor na classe definida.
Pode utilizar linguagens Server-Side para escrever seu CSS.
Existem alguns exemplos de CSS Server-Side pré-configurados hoje. Parecem ser os melhores desenvolvidos.
* Pode adicionar estilos CSS aos seus Feed RSS.
* Pode previnir o Spam com CSS.
* Você pode customizar o design do seu site dinamicamente criando o arquivo CSS com PHP.
www.marciomoreira.net
Posicionamento.
Muitas pessoas tem problemas para posicionar elementos utilizando position:absolute e position:relative. Não existe uma técnica para posicionar os elementos corretamente usando essa propriedade, basta entender o conceito de cada valor.
Position:absolute - um objeto com posicionamento absoluto tem sua posição definida pelo ponto (0,0) do navegador, ou seja, o canto superior esquerdo. A sua posição não irá variar, independendo do local onde a tag HTML está. Um objeto absoluto que esteja dentro de outro objeto absoluto terá sua posição definida a partir do ponto (0,0) do objeto pai.
Position:relative - um objeto definido com posição relativa terá sua posição definida a partir do ponto em q inicialmente ele se encontrava. Se por um motivo qualquer a tag muda de lugar, a posição do objeto também mudará.
Seletor Id.
Quem conhece alguma coisa de CSS, já deve ter usado um seletor de classe, mas conhece pouco, ou desconhece o que é um seletor de id. Bom é o seguinte. A partir da versão 4 do HTML, praticamente qualquer tag pode ter um atributo id. O atributo id serve, além de identificação, para a aplicação de folhas de estilo.
Suponha que eu tenha uma div, e aplico a ela um identificador:
Agora, eu gostaria q essa DIV se transformasse numa caixa. eu poderia fazer isso:
.caixa {witdh: 100px; height: 100px; bacground-color: #000000; }
e aplicar essa classe na DIV:
Contudo, isso seria poluir seu código HTML. Para transformar isso em uma caixa, basta fazer isso:
#box {witdh: 100px; height: 100px; bacground-color: #000000; } 
almas:
Pronto. Sua caixa está criada. o Seletor de ID deve começar com #. Apenas isso.
Layer.
Apenas um Esclarecimento. É muito comum usuários do Dreamweaver chamar a tag DIV de layer
(camada), pois quando se cria uma layer usando as ferramentas do DW ele utiliza essa tag. o Dreamweaver
subestima o CSS. Qualquer tag no CSS pode ser uma layer. Um link, uma imagem, uma lista, uma tabela,
um paragrafo, qualquer coisa. a DIV é apenas um elemento de bloco, assim como o paragrafo (
O Efeito Cascata.
Alguém já se perguntou por quê o nome é Folhas de Estilos em Cascata?
Bom, é mais ou menos isso:
suponha que você tenha criado uma classe qualquer logo no começo do seu arquivo CSS:
.classe { font-size:12px; background-color: #EFEFEF; color: #FF0000; }
Lá no final do seu arquivo você repete a mesma classe, mas mudando alguns atributos:
.classe { font-size:10px; font-weight: bold; text-decoration: underline; }
E agora, qual das declarações estará valendo? A Resposta é: as duas. Segundo o efeito Cascata, o resultado final vai ser a soma dos atributos das duas declarações. Caso ambas declarações possuam atributos iguais com valores diferentes, o valor válido será o último que foi declarado. Assim, teremos a seguinte Regra no fim das contas:
.class { font-size:10px; background-color: #EFEFEF; color: #FF0000; font-weight:bold; text-decoration: underline; }.
CSS Hack.
Aqui o caldo engrossa um pouco. Pra endender por que precisamos de hacks no CSS, vou tentar contar histórinha:
A muito tempo atrás (nem tanto assim), quando o nosso amigo IE (como colocaria o amigo bermonruf) ainda era uma terra selvagem a ser explorada. Era uma terra praticamente sem leis,
pelo fato de que um site desenvolvido com CSS pode ficar ótimo no Mozilla, e totalmente bagunçado no IE, e vice-versa. Então temos o CSS hack, que nada mais é que uma linha de código não usual que é
interpretada por alguns navegadores, mas é ignorada por outros. Em termos leigos, é um CSS que é interpretado por um navegador qualquer, mas em todos os outros ele é ignorado. Alguns Hacks:
* width: valor - Funciona em qualquer versão do IE. Serve para definir um valor para a largura que apenas o IE interpreta.
Body>HTML #box {... } - Funciona em todos os navegadores, menos no IE. na verdade, isso é um padrão definido, mas que o IE não obedece, então virou um hack, em termos praticos.
w\idth: valor - funciona em todos os navegadores, menos no Internet Explorer 5.x. Serve para consertar bugs que o IE 5.0 apresenta na renderização de widths.
"Underscore hack" - um hack muito util. Qualquer regra de CSS, Seletor ou atributo q apresente o underscore ( _ ) só será interpretado pelo Internet Explorer. Segundo as regras de sintaxe do CSS, o underscore não é permitido dentro do CSS. Como o IE tem o péssimo costume de ignorar regras, ele é exceção a regra, ou seja, ele interpreta o _ dentro do CSS!.
Como usar CSS Hacks. Talvez alguém sinta dificuldades
Imagine que eu quero criar uma caixa na minha página, e quero q essa caixa apresente cor de fundo azul no mozilla e e vermelho no IE:
Código:
#box {
width: 200px;
height: 200px;
_background-color: #FF0000;**************
background-color: #0000FF;
}
Dai você olha nos navegadores, OPA! Tanto o Mozilla quanto o IE estão com a cor de fundo azul. O que aconteceu? Simples, você ignorou a regra do Efeito Cascata. Os atributos que forem iguais dentro da mesma regra, tem prioridade o ultimo atributo declarado. Assim:
Código:
#box {
width: 200px;
height: 200px;
_background-color: #FF0000; <= (vai ser ignorado
pelo Mozilla e interpretado pelo IE. A cor de fundo
no IE será vermelha)
background-color: #0000FF; <= ( vai ser
interpretado tanto pelo Mozilla quanto pelo IE,
resultando na cor de fundo azul para Ambos)
}
O resultado final, o fundo ficará azul tanto no IE quanto no Mozilla. Isso pode ser resolvido apenas invertendo a ordem dos atributos:
Código:
#box {
width: 200px;
height: 200px;
background-color: #0000FF; /* Aceito por todos */
_background-color: #FF0000; /* aceito apenas pelo
IE */
}
Como o atributo que começa com underscore vai ser ignorado pelo Mozilla (e também pelo Opera, e pelo Mozilla Firefox), a cor de fundo no IE ficará Vermelha, e no Mozilla será azul.
Font: forum.clubedohardware.com.br por: chaccaall
Compare e veja os preços dos melhores computadores do momento, preços incriveis. Clique aqui
1. div1 é diferente de menu
Evite dar nomes como div1, div2, div3 aos seus elementos. Eles não explicam nada e na hora da manutenção vão tornar seu trabalho mais lento. Da mesma maneira, barra_azul não faz muito sentido: e se você mudar a cor do site? Prefira nomes explicativos, como menu ou barra_links.
2. Maiúsculas e minúsculas
Nomes de elementos fazem diferença entre letras maiúsculas e minúsculas: BarraLinks é diferente de barralinks. Preste atenção na hora de usar seu elemento no HTML.
3. id x class
Para elementos que aparecem apenas uma vez no layout (menu, rodapé, cabeçalho, etc) prefira a declaração id, precedida por um sinal de # (como #menu). Para elementos que vão aparecer várias vezes, utilize a declaração class, precedida por um ponto (como .noticia).
4. Compartilhe declarações entre vários elementos comuns
Se vários elementos terão características em comum, declare-os todos de uma vez, separados por vírgula:
h1, h2, h3, h4 { font-family: Arial, Helvetica, Sans-Serif;} 5. Lembre-se da hierarquia e organize-se
Por ser uma folha de estilo em cascata, a última declaração é a que prevalece. Preste atenção para não declarar um elemento duas vezes: na hora da manutenção, você pode fazer a alteração na primeira e se perguntar porque ela não funciona, quando na verdade uma segunda declaração está perdida no meio do seu código (por isso organização é fundamental!).
6. Comente os códigos avançados
Quando você utilizar o CSS para efeitos mais avançados, como um menu em abas, comente seu código para não esquecer o que cada parte dele faz:
#menu ul li a/* aba normal */{background: #444; color: #FFF; border: 1px #FFF solid;} #menu ul li a:hover/* aba selecionada*/{background: #FFF; color: #F00; border: #F00 1px solid;} 7. Anote suas cores
#09F ou #F09, qual é o rosa e qual é o azul? Mesmo se você conseguir fazer cálculos RGB de cabeça pra saber a tonalidade da cor sem uma tabela de cores hexadecimal, econonize tempo anotando a cor correspondente de cada código no seu arquivo:
/* ************************************ *//* *//* Cores usadas no layout *//* *//* cinza fundos: #F5F5F5; *//* cinza bordas: #B6B6B6; *//* azul link: #336699; *//* azul lnk ativo: #003366; *//* *//* ************************************ */ 8. Declare as unidades
Quando trabalhar com valores diferentes de zero, declare as unidades (px, pt, etc). Cada navegador assume uma unidade padrão quando ela não é especificada, gerando resultados diferentes em cada navegador.
9. Tenha certeza que o efeito desejado funciona em todos os navegadores
Barras de rolagem coloridas, divs semi-transparentes… Tudo isso é muito bonitinho, mas não funciona em todos os navegadores. Projete seu site de uma maneira atraente sem esses recursos, e, de novo, certifique-se de que seu CSS tem o mesmo efeito no maior número de navegadores possível.
font: www.htmlstaff.org
O CSS Globe publicou á uns tempos um artigo com 8 dicas CSS interessantes. No artigo intitulado 8 Premium One Line CSS Tips podem encontrar exemplos de algumas destas linhas em funcionamento.
· Alinhamento vertical com Line-Height
line-height:24px;
Quando se atribuí uma altura (height) fixa a um bloco pode-se usar a propriedade line-height para centrar verticalmente o conteúdo.
Mais sobre o line-height:
http://www.w3schools.com/css/pr_dim_line-height.asp
http://www.maujor.com/tutorial/elinhas.php
· Impedir que o conteúdo saia fora do layout
overflow:hidden;
Este código irá esconder todo o conteúdo que sair fora do layout. Imaginando que temos um DIV com 500px de largura e um link enorme. O texto do link que ultrapassar a largura definida (500px) não irá aparecer.
Se quiserem que apareça um scroll para que o conteúdo mostre todo e apenas quando o conteúdo ultrapassar as dimensões definidas podem usar o seguinte código:
overflow:auto;
· Impedir que o texto se parta
white-space:nowrap;
· Centrar blocos horizontalmente
margin:0 auto;
O valor auto funciona para as margens laterais (esquerda e direita). Isto fará com que o bloco fique centrado horizontalmente.
· Remover borders de links activos
Quando se clica num link aparece um border á sua volta.
Nada mais simples:
outline:none;
font: blue.muiomuio.net
Veja e compare preços de TV LCD e TV PLASMA
