Cosme Faé - Design e desenvolvimento.

CSS: Introduo

Por Cosme Fa | 30 de Março de 2006

A sigla CSS significa Cascading Style Sheets, em portugus, Folhas Estilo em Cascata. Utilizando CSS voc ter maior controle da apresentao/estilzao do seu layout XHTML ou XML.

Com o CSS a pgina carrega muito mais rpido, voc cria uma nica folha de estilo e importa ela em vrias pginas. Quando for modificar algo no posicionamento ou estilizao do site s mudar um nico arquivo (a folha CSS).

Voc deve estar pensando: “Mas a minha folha CSS est imensa, com as minhas marcaes font e atributos color, size, family, ficaria um pouco menor”. Pense bem, o user-agent renderizou sua pgina, agora a folha de estilo est em cache, quando for acessar as outras pginas do site ele s renderizar o contedo do corpo (body), assim a velocidade no carregamento melhora.

Quando o cliente disser: “Mude a cor da fonte de todos os textos que esto no contedo de todas as pginas.”. J pensou voc ter que editar dezenas de pginas s para mudar a cor da fonte? E pior ainda, o “scio” do cliente dizer que prefere outra cor. Voc ficaria horas e horas em frente ao computador.
Com CSS voc s mudar um nico valor em uma nica pgina, e automagicamente tudo mudar de acordo com as novas regras definidas.

Se mesmo assim voc prefere o modo antigo de estilizar, prepare-se, voc ter uma bela dor de cabea (se no j tem)…

Comentário Por Gustavo Paes — 30/03/2006 @ 6:38 pm

Muito legal!
Quero ver o resto ;)

Flw

Comentário Por Frederico Jader — 30/03/2006 @ 6:40 pm

Cara uma parada que eu nunca consegui pegar direito css, no tenho muita pacincia, sorte minha que o Dreamweaver j faz o bciso para mim..rsrs
Abraos

Comentário Por Caio Calderari — 30/03/2006 @ 6:52 pm

Ola, cosme.

bom, disso que vc escreveu ai em cima eu ja tinha lido em outros lugares e ja sabia, css realmente muito bom, mas quando que sabe!! (hehehehe)
Certamente que vc ja passou pelo que estou passando, sabe aquela poca que vc quer fazer as coisas mais locas em seu site e fazer tudo em css e o consegue pq n sabe o suficiente. pois ento! aproveitnado o espao gostaria de perguntar porque h tanta diferena no css nos browsers do mozlla (firefox) e do IE (Internet Explorer) certamente se vc tentou mudar a scrollbar de sua pgina note que no IE ela altera normalmente, ja no firefox no funciona. Por Que?

Gostaria tambem de pedir a voc para colocar alguns tutoriais em seu blog passo a passo mais ou menos como se vc estivesse dando aulas, comee pelo bsico, mas no tao bsico comee do comeo mas fazendo coisas interessantes para que no fique chato. eu posso estar ecrevendo bobagem por que ainda no vi se ja tem isso no seu blog pois ainda no vi quase nada se ja tiver peo desculpas, mas se no tiver t ai uma boa idia! comee relamente como se vc fosse fazer um layout do 0 mostrando o raciocinio usado. vlw!!

Comentário Por Cosme Fa Mendona — 30/03/2006 @ 6:53 pm

Gustavo, pode ter certeza, este o nicio de muitos posts referentes ao assunto. ;)

Muitos que j conhecem CSS devem estar dizendo: “Nossa, o Cosme regrediu muito postando algo to bsico.”.
Estou levando em considerao que, existem os “clicadores de botes”.

E alm do mais, uma boa reciclagem no assunto vale a pena. Fazer esses posts faro eu exercitar minha didtica. Espero que para quem no sabe sobre o assunto esteja entendendo.

Caio, em relao diferena entre o Firefox e o IE simples: O IE no muito compatvel com CSS. O engine do Firefox muito mais avanado. As propiedades para a estilizao das scrollbars no so vlidas pela W3C, alm de s funcionar no IE. Sobre os tutoriais de CSS, j existem uns aqui no blog, visite a categoria CSS.

Comentário Por Rodrigo P. Ghedin — 31/03/2006 @ 9:19 am

Cosme, s uma correo: alm do IE, o Opera tambm aceita e mostra scrollbars coloridas, desde a verso 8.5, se no me engano.

[]’s

Comentário Por Rodrigo — 31/03/2006 @ 1:23 pm

Css ajuda muito mesmo.
O ideal deixar xhtml em um arquivo - formatao
css em outro arquivo - estilizao
javascript em um outro - eventos, etc

Pronto, fcil fcil de dar manuteno em seu site.

Espero os prximos..

T+

Comentário Por Rodrigo — 31/03/2006 @ 1:24 pm

O Cosme, o que seria esse
Sign me up for a free Gravatar! ??

falowz!!

Comentário Por Caio Calderari — 31/03/2006 @ 7:58 pm

Ola novamente.
bom, se o IE no suporta to bem o CSS como posso fazer pra que haja 1 padro esttico em meu site que sofra apenas minimas alteraes (se possivel nenhuma) quando visualizado em browses distintos?
Na onda de criar sites comeei a aprender sozinho e consegui criar um raciocinio e um tipo de pensamento normal a todos que comeam a criar um site, atualmente ainda sem muita experiencia, mas com muita vonta de e algum conhecimento eu montava meus sites em um editor de imagem e aps isso o jogava em html, o problema que hoje em dia montar sites como eu monto alem de ter varios problemas para mudana e atualizao, tambem so um pouco limitados e o modo de construo com uso de tabelas infelizmente deixa o site mais pesado, (no estou querendo criticar esse metodo pois ainda o utilizo por que no sei AINDA montar de outra forma)mas em fim veja um exemplo: http://www.clipemania.danceconection.com, nesse site fiz da forma que falei acima, com tabelas e imagens, por ventura aps comear os estudo com css fui aprimorando e coloquei algumas partes com CSS, nada muito sofisticado, simples mais funcional. Bom so que o problema surgiu depois que visitei a pgina com os 2 browsers para sentir a diferena, e ao abrir com firefox fiquei realmente decepcionado pois o site se tornou inutil.
Como o site oferee videos para serem visualizados no proprio site ele ficou inutil pois ao abrir com firefox os scripts do mdia player que so usados para executar o video no tiveram funcionamento assim deixando o site inutil. tambem h um diferena notavel no estilo css.

Bom aps todo esse texto a pergunta seria.
O QUE FAZER???

Comentário Por Cosme Fa Mendona — 01/04/2006 @ 4:04 am

Caio, o que voc ter que fazer praticar muito, em CSS a experincia conta muito. Com o tempo voc perceber formas melhores de se estruturar um site para que seja fcil modific-lo para que fique compatvel com diversos navegadores.

No caso, para resolver alguns problemas de compatibilidade existe “CSS Hacks”, tal assunto publicarei em breve aqui no meu blog.

Comentário Por Thomas — 05/05/2006 @ 11:44 am

Perfeito !!!!

Parabens Cosme

Assine o RSS Feed deste comentário. | TrackBack URI

Deixe um comentário

Me inscrever no Gravatar!

Conteúdo sob Licença Creative Commons Creative Commons License