[Time Dsg] CSS, enriqueça seu website

[Jvchequer 63]

No início do desenvolvimento de websites um dos maiores problemas era atribuir configurações de cores, fontes e imagens atraves de tags html. Imagine só você criar um website usando tags como <font size=”2″ face=”Verdana”> para cada paragrafo e depois do projeto finalizado seu cliente pedir para almentar mais a fonte e usar uma outra tipografia. Você teria o trabalho de entrar em cada código-fonte alterar manualmente cada declaração que você fez para as que seu cliente solicitou. Tenso!

 

Então ao longo do tempo, websites passaram a ser criados em camadas! Você passava a separar o site em codigo fonte, codigos javascripts e folhas de estilos. Em sua folha de estilo você colocava as configurações de cores, fontes, tamanho que você iria precisar e em seu código-fonte você coloca uma referencia (class ou id). Então se tivermos que passar pelo mesmo caso acima, você só altera sua folha de estilo que assim o website todo é modificado.

 

Vamos ao que interessa; folhas de estilos ou CSS assim como chamamos esta com uma versão inovadora,  sombras, cantos arredondados, usar outras fontes são possíveis agora com CSS3.  Vamos as boas práticas CSS e conhecer algumas ferramentas online que nos ajudam.

 

 

1 – Faça comentários sobre sua folha de estilo

É aconselhável que você comente sua folha de estilo e faça uma espécie de  índice para que desenvolvedores mais leigos possam saber o que o arquivo faz e para que eles possam estudar melhor. Logo abaixo eu vou compartilhar algo que eu costumo usar em meus arquivos CSS.

 

/** Site: TimeDSG* Descrição: Folha de estilo padrão, que contém configurações sobre tags, classes e IDs.* Autor: Alex Giroto* Autor URL: http://www.oxygenweb.com.br* Versão: 1.0* Licença: Creative Comuns** Índice:* CSS Reset* Tags HTML* Classe* ID*/

2 – Use CSS Resets

Sabemos que os navegadores mais usados possuem configurações diferentes, sendo assim. Pode ocorrer de que a margem de um parágrafo no Internet Explorer seja maior que no Mozilla Firefox. Então usando esta técnica de reset podemos corrigir isso! Mais como eu faço isso Alex Giroto? Simples, copie e cole logo abaixo dos comentários que eu disse no item anterior.

 

/* CSS reset ------------------------------------------------------------------------------ */html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}

3 – Evite CSS Inline

O que é CSS inline? São aquelas famosas “gambiarras” que fazemos direto no código html, como por exemplo definir tamanho de uma div ou posicionamento dela, evite esse tipo de problema não estamos trabalhando em camadas? Então tags html no arquivo html, códigos CSS na folha de estilo! Simples!

 

<!-- Evite fazer gambiarras do tipo: --><div id="website" style="margin: auto; width: 960px; background: url(../images/background.gif) repeat-x top;"> Aqui vai meu conteúdo!</div>/** É a mesma coisa, só que com menos dor de cabeça e mais profissionalismo */#website{ margin:auto; width:960px; background:url(../images/background.gif) repeat-x top;}

4 – Economize espaço

Muitos webdesigners que eu conheço colocam propriedade embaixo de propriedade, uma em cada linha, para quem esta começando eu não acho isso ruim, pois ajuda a pessoa visualizar melhor cada class ou id. Mais profissionalmente falando, e se dirigindo ao pessoal que realmente quer fazer algo profissional. é aconselhável colocar propriedade na frente de propriedade para economizar linhas e tamanho de arquivo.

 

/** EVITE ISSO A MENOS QUE VOCÊ ESTEJA ESTUDANDO OU APRENDENDO */#website{ margin:auto; width:960px; background:url(../images/background.gif) repeat-x top;} /** PROCURE CRIAR SUAS FOLHAS DE ESTILO ASSIM */#website{margin:auto; width:960px; background:url(../images/background.gif) repeat-x top; }

5 – Estude muuuuito!

CSS juntamente com outras ferramentas, da para se fazer muita coisa maneira. Principalmente CSS3 que esta crescendo aos poucos por causa de sua facilidade em colocar sombra em textos, cantos arredondados em blocos, degrade, fontes externas e assim caminha…

 

Ficou curioso? Olha só o que o pessoal do CSS no Lanche conseguiu fazer usando apenas CSS.

 

Opera logo com CSS3 | Recriando uma logo com CSS3 | Animação de um carro com CSS3 | Galeria de imagens

 

 

6 – Aproveite as ferramentas online

Você não é obrigado a lembrar de todas propriedades CSS que exite, para isso existe o Majuor rs, um dos evangelista do CSS aqui no Brasil. Seu site é uma ótima referencia, mais aqui temos um truque na manga. Geradores CSS online.

 

http://css3generator.com/ Gerador CSS3

 

http://gradients.glrzad.com/ –Geradore de gradientes em CSS3

 

http://www.otimizacao-sites-busca.com/scripts-gratis/css/gerador.htm — Gerador CSS

 

http://border-radius.com/ — Gerador CSS3 “Cantos arredondados”

 

http://www.fontsquirrel.com/fontface/generator — Font-face gerador CSS3, importe fontes do seu computador para seu website

 

http://css3please.com/ — Gerador CSS3

 

Bom, espero ajudar muito a galerinha da web. Não é uma grande referencia sobre CSS mais eu aprendi muita coisa com sites que eu cito aqui. Apenas mais uma dica simples, de como deixar sua folha de estilos mais profissional. Abraço pessoal até a próxima

 

 

 

View the full article