Se você costuma editar páginas html utilizando CSS, sabe que a folha de estilos te dá muitas opções para construir um bom site, mas há uma quantidade enorme de erros que podemos cometer.
Posso citar pelo menos 5 erros bastante comuns em css, veja:
Não fechar as chaves
Quando definimos os atributos de cada elemento, o código fica cheio de chaves abrindo e fechando. Deixar uma aberta é muito fácil e isto faz com que todo o código abaixo dela não funcione como deve. Para evitar este erro você deve ser muito organizado com seu código e para encontrar esta chave aberta o firebug é uma ferramenta interessante.
#conteneiner {
width: 100%;
margin:0 auto;
/* Falta a chave de fechamento, todo o código seguinte não terá efeito */
#header {
background-color: #fff;
font-size: 0.8em;
}
Não listar os atributos adequadamente
Um problema similar ao anterior aparece quando listamos os atributos de cada classe ou seleção. Cada atributo deve terminar com um ponto e vírgula. Não arrematar um atributo com o sinal representará automaticamente a anulação do atributo seguinte, criando uma dor de cabeça, já que não se aplicará a cor, o tipo de letra, etc.
#header {
background-color: #fff
* Falta o ponto e vírgula que termina o atributo. O atributo seguinte não será lido */
font-size: 0.8em;
}
Escrever errado o nome de um seleção ou classe
Todos nós cometemos erros com o teclado e ao digitar códigos defeituosos podemos arruinar um projeto. Tenha cuidado para escrever corretamente o nome da classe, ou será como se não existisse.
#haeder {
/* a cabeça deve se chamar “#header”, não “#haeder”, isto torna impossível sua leitura */
background-color: #fff;
font-size: 0.8em;
}
Escrever mal o nome de um atributo
Muito similar ao anterior, mas cometendo o erro de escrever errado um atributo, que fará com que ele simplesmente não se aplique.
#header {
background-color: #fff;
fotn-size: 0.8em;
/* O atributo “fotn-size” não existe e não poderá ser lido, o correto é font-size */
}
Confundir o valor dos atributos
Cada atributo tem várias opções predefinidas que não devem ser confundidas. Dar mal o valor a um atributo fará que não seja reconhecido.
#header {
background-color: #fff;
font-size: 0.8em;
vertical-align: center;
/* O alinhamento vertical não permite “center”, aqui se usa o valor “middle” para alinhar ao centro verticalmente */
}
Acentos e caracteres do português em classes e seleções
Para a desgraça dos que falam português, os acentos e caracteres próprios do idioma (como o acento ^ e o ç) são encarados como caracteres extranhos em vários navegadores e, por isso, convertidos em seus equivalentes. Em muitos casos resulta que nem as classes, nem seus atributos sejam aplicados.
#rodapé {
/* Mesmo que você goste dos acentos, seu uso não é recomendado */
clear: both;
font-size: 0.7em;
}
Estes são erros que nós, que trabalhamos com CSS, já cometemos ou vamos cometer algum dia. Por isso, a recomendação geral é ser o mais organizado possível com o código.
É melhor que reescrever todo o código.
No Responses