FRIHOSTFORUMSSEARCHFAQTOSBLOGSCOMPETITIONS
You are invited to Log in or Register a free Frihost Account!


Explicação básica de CSS





thi.dias
Bem, eu vejo muito isso em fóruns, mas nunca fui atrás de saber exatamente o que é, como funciona. Sei que é relacionado ao layout de sites, mas só isso.

alguém pode me explicar ai, com mais profundidade?
merrik
Eu ainda estou estudando e recomendo que você olhe o www.maujor.com, www.tableless.com.br e é claro um que eu não posso esquecer o zen garden que mostra todo o poder do css, se você ver o site com um leitor de tela você vai perceber que o css é uma ferramenta que te traz inumeras possibilidades e uma das quais eu mais prestigio é poder tornar o seu site um site acessivel atraves de vários meios, eu estou estudando css para "aposentar" as tabelas no site - coloco aspas porque as tabelas existem, e a situações que devem ser usadas -, css é um tipo de linguagem de estruturação - eu acho que é isso - eu digo isso porque ele consegue substituir as tabelas - ele mais o html - eu conheço só esses dois metódos de criar layouts, usando tabelas e usando css, e css realmente é uma mão na roda, o código fica extremamente legivel - desde que bem escrito - e igualmente funcional - para não dizer mais -
Acima foi meu texto de entusiasta que não diz nada, eu recomendo que você veja o site maujor porque é meio que um curso on-line, o tableless porque ele é exatamente sobre o desuso do método das tabelas para fazer layout, como o nome já diz, o zen garden porque mostra como que com o uso do css você pode reestruturar todo um site, sem ter todo aquele trabalho que tem com o as tabelas e se você olhar o código vai estranhar um pouco a disposição dos itens, ele não vai por uma "ordem lógica" começa pelo conteúdo e termina com os menus, isso é justamente o que eu quis mencionar com acessibilidade se você usar um leitor de tela em um site qualquer, e depois usar no zen garden você vai entender o que eu digo - de preferencia por escolher um site grande e com bastante conteúdo, a diferença é marcante - se você ver por um browser em modo de texto o conteúdo estara igualmente compreensivel - se vocÊ não quiser fazer o download de um o opera emula, é so ir em view, e se você não conhecer um tem o lynx - . Com o css o código fica muito mais legivel, porque não tem aquela quantidade enorme de <td> e <tr>, e o layout fica muito mais fácil de se fazer porque as div's podem ser sobre-espostas, isso te da a possibilidade de colocar uma imagem no topo não precisa fragmenta-la e ainda assim colocar conteúdo no topo usando o atributo index-z do css.
Acho que eu consegui te dar uma noção de como se usa o css para fazer o layout, e de saber sobre as vantagens dele, sinto que o post fico grande aushuasu e meio vago - mesmo com tantas palavras - mas espero ter ajudado
mariohs
O merrik deu uma boa noção do que é o css. Creio que até tenha sido informação demais.

O CSS serve para dar ao seu site a aparência dele, o estilo e o layout... cores e tudo mais... Com CSS você separa o conteúdo (escrito em (x)html) da apresentação (feito com o css).

Com o css você pode criar vários layouts diferentes sem precisar mexer no conteúdo, essa é uma das idéias, inclusive bem ilustrada no Zen Garden. Você pode fazer um css de impressão (retirar menus e imagens, botar a cor das fontes em preto e background em branco, etc). Você pode fazer um css para dispositivos móveis (com telas menores)... enfim... um monte de possibilidades.

Para começar, instale a extensão Web Developer do Firefox. E veja as funcionalidades que ela pode te dar, sendo uma delas a edição online de css (ctrl + shift + e) e também a exibição de sites sem o css (ctrl + shift + s). Existem outras milhões de funcionalidades que esta fantástica extensão lhe proporciona...
thi.dias
vou usar esses sites pra apreder mais sobre tal assunto. Eu tenho um site em Flash que vive dando probleminhas de incompatibilidade. Pelo que li na breve explicação do site Maujor do que é CSS, achei bem interessante exatamente por ser uma forma de tornar seu site acessível a todos.

Bem, valeu pela ajuda.
mariohs
thi.dias wrote:
vou usar esses sites pra apreder mais sobre tal assunto. Eu tenho um site em Flash que vive dando probleminhas de incompatibilidade. Pelo que li na breve explicação do site Maujor do que é CSS, achei bem interessante exatamente por ser uma forma de tornar seu site acessível a todos.

Bem, valeu pela ajuda.

Apenas lembre-se que acessibilidade vai muito além apenas do CSS... como você resolve um problema de background de imagem para o caso de suporte a css mas sem suporte a imagens por exemplo... como que você faz um site com recursos AJAX que funcionam perfeitamente em browsers sem suporte a javascript... etc...

Qualquer dúvida, basta postar aqui e estaremos aptos a ajudar Very Happy
Tilibra
Só não comecei a praticar css porque tô totalmente sem tempo, mas é uma das coisas que pretendo ver com tempo.

Uma coisa que me atraiu a atenção nessa área foi a da WebSemântica. Esse é um ponto muito importante, e deve ser aplicado, pois o mundo não é mais apenas dos humanos, mas também das máquinas !!! HUAHUAHUAHUA !!!!

VAMOS DOMINAR O MUNDO HUAHUAUHAHU !!! (Desculpem a brincadeira, mas o assunto é sério)
thi.dias
tah assistindo matrix demais hein amigo... eu tbm.

VAMOS DOMINAR O MUNDO!!!
thi.dias
quais programas que uso pra desenvolver layouts com CSS?
merrik
thi.dias wrote:
quais programas que uso pra desenvolver layouts com CSS?

O NVU e o Dreamweaver conseguem trabalhar com CSS, e acredito que a maioria dos programas existentes também.
mariohs
thi.dias wrote:
quais programas que uso pra desenvolver layouts com CSS?


Como eu disse lá em cima, instale a extensão Web Developer do Firefox. Na minha opinião é o melhor editor CSS que existe.
Tilibra
mariohs wrote:
thi.dias wrote:
quais programas que uso pra desenvolver layouts com CSS?


Como eu disse lá em cima, instale a extensão Web Developer do Firefox. Na minha opinião é o melhor editor CSS que existe.


acho esse muito bom também !!!!

Se não me engano voi vc mesmo que me indicou !!!!
mariohs
Tilibra wrote:
acho esse muito bom também !!!!

Se não me engano voi vc mesmo que me indicou !!!!


Sempre que posso, recomendo esta ferramenta... Não só o editor de css é fantástico, mas também as outras funcionalidades que ele apresenta... Quem puder experimentar, eu recomendo...
thi.dias
eu instalei, mas sabe como é, seria bom uma apresentação inicial, pra facilitar a aprendizagem.
Alguém conhece ou faria algum?

Vlw.
mariohs
Habilite a barra de navegação...
Olhe a aba de CSS, dá para editar o css online (ctrl + shift + e)... dá pra exibir o site sem CSS (ctrl + shift + s)...
Por exemplo... entre no site do Tableless e aperte ctrl + shift + e, e comece a mexer no css, mudar as cores... você verá que tudo o que você mexer, aparecerá na hora no site... é muito legal mesmo... dá pra desenvolver o site muito fácil com este recurso.

No lado extremo direito da barra, tem 2 botões, um que indica erros de javascript e outro que fica azul, quando a página é renderizada em standard mode, ou cinza quando a página é renderizada em quirks mode...

vai fuçando nas barras e vendo.... eu mesmo não conheço todas as funcionalidades... eu uso mais a de edição do css para fazer o css dos sites.

Mas vamos postando aqui... assim que eu tiver mais tempo, eu posto mais coisas interessantes.
Kashinilaya
mariohs wrote:
Para começar, instale a extensão Web Developer do Firefox.

Correndo o risco de fazer uma pergunta idiota, o Web Developer só funciona no Firefox (estou assumindo que você se refere ao navegador de internet com esse nome)? Ele é como o Dreamweaver e o N-vu?
mariohs
Kashinilaya wrote:
Correndo o risco de fazer uma pergunta idiota, o Web Developer só funciona no Firefox (estou assumindo que você se refere ao navegador de internet com esse nome)? Ele é como o Dreamweaver e o N-vu?


Sim, funciona no browser Firefox e no browser da suite Mozilla.
A extensão não é um editor comum como NVU e Dreamweaver. Por exemplo, você pode pegar qualquer site por aí, editar o css e ver a cara do site com o css que você está mudando na hora. Fora isso, a barra fornece muitas outras informações úteis, como mostrar os atributos ALT das imagens, para testes de acessibilidade, dar highlight em frames, headings, etc. Você ainda pode observar o site sem CSS. E conseguir várias informações sobre a página que está visitando.
Tilibra
Essa extenssão é senssacional pra quem quer testar um css de outro site no seu site !!!!! E vice e versa tbm !!!!!

Muito bom pra aprender novas técnicas e layouts de css !!!!

Também recomendo ! :p
PristonMaster
css eh facinho de aprender só tem que sacar o funcionamento dela... eu recomendo dreamweaver pra fazer ela já que só uso ela e nunca tive problemas... eh interessante notar o uso do css para diminuição da carga de imagens repetitivas ou para a criação de templates leves...
Kashinilaya
Valeu, mariohs, pela informação. Tenho ouvido muita gente falar bem do firefox. Estou pensando seriamente em, quando adquirir um computador novo, manter um dos computadores com software alternativo, como Linux, Firefox e outros. Quem sabe eu aprendo aos poucos a usá-los.
mariohs
Kashinilaya wrote:
Valeu, mariohs, pela informação. Tenho ouvido muita gente falar bem do firefox. Estou pensando seriamente em, quando adquirir um computador novo, manter um dos computadores com software alternativo, como Linux, Firefox e outros. Quem sabe eu aprendo aos poucos a usá-los.


O Firefox tem pra windows, é só baixar, instalar e rodar... não precisa ter linux para rodar o Firefox.
Kashinilaya
mariohs wrote:

O Firefox tem pra windows, é só baixar, instalar e rodar... não precisa ter linux para rodar o Firefox.

Certo, mas a questão é a bagunça que pode ocorrer no (registro do?)Windows, quando se instala muitos programas. Talvez você não se preocupe com isso. Você parece ser do tipo "fuçador, " pelo que pude inferir de seus posts. Eu não quero perder tempo tentando encontrar a fonte dos problemas de instabilidade do computador. Falo isso porque já tive que reinstalar todos os meus programas por conta de um software que entrou em conflito com o sistema operacional (e, teoricamente, era para Windows). Muitas pessoas com quem conversei a respeito disseram que era impossível de acontecer, mas aconteceu... e me deu um trabalho louco!
Por isso, estou pensando em instalar os programas alternativos (=com os quais não estou acostumado a trabalhar), somente depois de adquirir outro computador (com software convencional). Assim, não ficarei num beco sem saída, se tiver algum problema com o novo software.
merrik
Eu nem me preocupo tanto com os registros do sistema operacional, aquela velha história de que chaves demais no registro causam lerdeza é fake - eu li sobre isso a uns 6 mêses atrás, não lembro a fonte :P - a desorganização eu acho natural, nunca vi os registros "organizados" o problema - no meu ponto de vista - são alguns programas que não tem desinstalador ou que o mesmo não deleta as chaves criadas - ou quando você faz como um doido que eu conheço e não usa eles :P -
mariohs
Kashinilaya wrote:
Certo, mas a questão é a bagunça que pode ocorrer no (registro do?)Windows, quando se instala muitos programas. Talvez você não se preocupe com isso. Você parece ser do tipo "fuçador, " pelo que pude inferir de seus posts. Eu não quero perder tempo tentando encontrar a fonte dos problemas de instabilidade do computador. Falo isso porque já tive que reinstalar todos os meus programas por conta de um software que entrou em conflito com o sistema operacional (e, teoricamente, era para Windows). Muitas pessoas com quem conversei a respeito disseram que era impossível de acontecer, mas aconteceu... e me deu um trabalho louco!
Por isso, estou pensando em instalar os programas alternativos (=com os quais não estou acostumado a trabalhar), somente depois de adquirir outro computador (com software convencional). Assim, não ficarei num beco sem saída, se tiver algum problema com o novo software.

Eu nunca tive problemas com o registro, no caso do firefox e todos os outros softwares (muitos deles livres) que eu uso. Quanto ao browser, especificamente, pode ir, que não tem problema Very Happy
Use a extensão Foxmarks para fazer backup e sincronização de seus bookmarks Very Happy
thi.dias
merrik wrote:
Eu nem me preocupo tanto com os registros do sistema operacional, aquela velha história de que chaves demais no registro causam lerdeza é fake - eu li sobre isso a uns 6 mêses atrás, não lembro a fonte Razz - a desorganização eu acho natural, nunca vi os registros "organizados" o problema - no meu ponto de vista - são alguns programas que não tem desinstalador ou que o mesmo não deleta as chaves criadas - ou quando você faz como um doido que eu conheço e não usa eles Razz -


Eu uso o software REg Clean, saca ae o que o desenvolvedor fala:

Quote:
O registro do Windows, armazena diversas informações do sistema operacional e
dos programas instalados, além de configurações, ajustes, entre outros dados.
A Microsoft, disponibilizava um utilitário, chamado RegClean, que permitia fazer uma
checagem do registro, mas parou de atualizá-lo em 1997.
Entao, resolvi escrever o meu próprio, que permite fazer uma checagem ainda mais
profunda no registro, permitindo identificar referências a arquivos inexistentes.
Conforme instalamos/desinstalamos programas, o registro vai se inflando cada vez
mais, reduzindo a performance do sistema, além de deixar o registro completamente
cheio de sujeiras e entradas inválidas.
Este utilitário, permite checar e/ou remover os ítens inválidos encontrados.


Entra aqui: www.velasco.com.br

Vai em Downloads>Programas>MV RegClean e pronto.

Aconselho o uso. Faço a limpeza uma vez por mês e ele retira um montão de chaves desnecessárias, nunca deu problema de apagar chaves que naum era pra apagar.

Vlw!
Related topics
Do you use css to design a website?
<hr> stilosi con i CSS
Angoli arrotondati con i CSS (senza tabelle)
CSS tools
css + html
Okay, I'm done trying to use CSS for layout.
Tutorials
[Beginner] css rollovers
[Beginner] Classes, Applying classes in CSS
Handling Css using Javascript
CSS OR TABLES
What do you use to make your page layout?
What Is CSS and PHD?
Get more template with css style
Reply to topic    Frihost Forum Index -> Language Forums -> Portuguese

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.