Construção CSS

Uma introdução sobre como construir ou projetar uma página utilizando camadas, que ilustra o funcionamento e a potência das CSS com exemplos.

Por Miguel Angel Alvarez - Tradução de JML


Publicado em: 06/1/05
Valorize este artigo:
Neste artigo vamos conhecer a construção de páginas utilizando Folhas de estilos em cascata (CSS). Veremos como realizar este tipo de construção, junto com algumas vantagens e inconvenientes. Para muitos será ainda um campo por explorar. Embora não vamos entrar em grandes detalhes, vamos tentar tornar conhecida a construção com CSS para tirar as possíveis dúvidas por parte do leitor. Nos próximos capítulos ampliaremos a informação e oferecemos tutoriais mais práticos.

Como se pode aprender no Manual de CSS, as folhas de estilo em cascata ajudam a separar o conteúdo da forma, ou seja, os elementos que compõem uma página da forma com a qual se mostram. Ademais, CSS ajuda em grande medida à definição de estilos na página, já que permite ajustar de uma forma muito mais precisa qualquer aspecto de qualquer elemento da página.

A construção com CSS leva a utilização das folhas de estilo a seu grau máximo, de maneira que qualquer definição do aspecto da página se realiza na declaração CSS que linkamos com o documento HTML. Para definir a situação dos elementos na página se utilizam as camadas, a quais se aplica um posicionamento através também das folhas de estilo.

Para criar as camadas se utilizam etiquetas <DIV>, nas que se introduzem os elementos que quisermos que apareçam na página. Os elementos dentro dos <DIV> também podem se acrescentar, para herdar as propriedades e posicionamento das camadas pai.

Na construção por camadas se definem unicamente etiquetas <DIV> e as tabelas só se utilizam para mostrar informação tabulada, ou seja, mostrada em filas e colunas. Cabe assinalar que na construção tradicional se utilizam as tabelas para ajustar a posição dos elementos na página. Certamente, muito dos leitores estão bem familiarizados com o uso de tabelas para construir uma web, pois se trata de uma técnica bastante simples, embora muito bastante pouco prática e que complica bastante o código das páginas web resultantes.

A construção por tabelas é uma forma de criar webs mais evoluída e que melhora muito a construção tradicional, embora tenha também seus inconvenientes.

Vejamos primeiro, algumas das vantagens da construção CSS:
  • A separação do conteúdo da página e do estilo ou aspecto com o qual se devem mostrar. Ter em conta que, quanto mais separarmos estes dois elementos, mais simples será a manutenção das páginas e o processamento da informação. Com isso também poderemos obter páginas mais limpas e claras.
  • Economia na transferência. Se todos os estilos e posições dos elementos se introduzem em um documento externo, liberaremos o código da página e ocupará muito menos. Como a declaração de estilos se armazena no cachê do navegador, só se transfere na primeira página que se visita do site, com o qual a segunda e as posteriores páginas que se solicitem se carregarão muito mais rápido.
  • Facilidade para alterar o aspecto da página sem tocar no código HTML. Como toda a informação dos estilos e o posicionamento das camadas se encontram em um mesmo arquivo, se desejarmos mudar qualquer elemento da página -seja sua posição ou seu aspecto-, só temos que atualizar a folha de estilos, e as mudanças serão vistas automaticamente em todo web.
Como dissemos, também existem algumas desvantagens:
  • Compatibilidade com navegadores antigos. Necessita-se que o visitante disponha de um navegador bastante avançado. A maioria dos visitantes dispõe de navegadores que suportam características avançadas das CSS, mas ainda há muita gente que não atualizaram suas máquinas ou que navega em sistemas de somente texto. Os navegadores que não suportam folhas de estilos, pelo menos lerão o código da página e o mostrarão sem nenhum posicionamento. Isto pode ser fatigante, mas pelo menos visualizarão todos os dados da página, embora desarrumados e sem estilo.
  • Diferenças entre navegadores. Dependendo do navegador também mudam as etiquetas de estilos suportadas, podendo fazer com que as páginas não sejam vistas exatamente igual entre um cliente e outro. Também, assim como ocorre com HTML, existem atributos não padronizados ou que têm valores padronizados diferentes. Quando se inicia com a construção em CSS, pode ser um tema bastante complicado e pode dar bastante dor de cabeça, porém, trata-se de, pouco a pouco, ir aprendendo todos os atributos e os navegadores onde se visualizam ou não.
  • Dificuldade. Sem dúvida, se estamos acostumados ao HTML, passar a CSS é bastante mais complicado e requer um estudo mais profundo. Entretanto, este passo nos brindará um maior controle dos elementos da página e ampliará nossas fronteiras na hora de construir.
Exemplo CssZenGarden

Existe um site muito interessante e ilustrador que pode nos ajudar a conhecer rapidamente a potência das CSS e termos uma idéia do que pode significar seu uso. É um site onde se mostra um conteúdo e um desenho bastante logrado. Ademais, dispõe de vários links para poder ver o mesmo site, como mesmo conteúdo, mais com distinto aspecto. Dessa forma podemos ver como se pode chegar a alterar o desenho de uma página com somente mudar a folha de estilos.

A URL do site é http://www.csszengarden.com. É muito interessante que selecionem outros desenhos para ver a mudança radical que as páginas web podem ter com distintas folhas de estilos.

Nós exploramos um pouco as capacidades das CSS e realizamos um exemplo de desenho de CssZenGarden por nossa conta. Podemos vê-lo neste link.

Por onde continuar

Em CriarWeb.com pensamos em fazer uma série de artigos para explicar o processo de criação de uma web, projetada completamente em CSS. Entretanto, por enquanto, devemos fazer referência a algumas páginas em inglês que explicam este assunto detalhadamente.

http://www.stylegala.com/
http://www.cssbeauty.com/
http://www.cssvault.com/





Comentários do artigo
Foram enviados 2 comentários ao artigo
1 comentário não revisado
1 comentário revisado:
Sobre o texto
Por: embs2
28/10/09
Finalmente encontrei um site que realmente me ajudará em meu caminho até me tornar um webmaster/desiger profissional. Apenas gostaria de salientar para que tomassem cuidado com o português e as colocações textuais. Logo acima da explanação sobre os pós e contras das CSS, há uma frase que diz: "O uso de tabelas ajuda a desenvolver páginas mais sofisticadas". Creio que há um erro de sentido aí. Mas o post é muito bom! Vamos mandar ver! ;)

Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

Home | Sobre nós | Copyright | Anuncie | Entrar em contato