Social Icons

^^

quinta-feira, 18 de março de 2010

Como criar páginas com CSS?

O que são folhas de estilo?


Uma folha de estilos é um conjunto de regras que informa a um programa, responsável pela formatação de um documento, como organizar a página, como posicionar e expor o texto e, dependendo de onde é aplicada, como organizar uma coleção de documentos.

A maior parte dos programas de editoração eletrônica e processadores de texto moder-nos trabalham com folhas de estilos. O processo consiste em definir um rótulo (nome do esti-lo) para um determinado parágrafo e em seguida alterar os seus atributos. Todo parágrafo que for rotulado com aquele estilo passará a exibir as características definidas anteriormente. Qual-quer alteração nos atributos de um estilo afetará todos os parágrafos que estiverem rotulados com ele.

Esta descrição, que se aplica a estilos em processadores de texto e programas de editora-ção eletrônica, também vale para a Web. Na Web, os "parágrafos" são blocos marcados por descritores HTML como <H1>, <P>, etc. Para fazer com que todos os blocos de textos mar-cados com <H1> em um documento sejam exibidos em tamanho de 48 pontos, basta definir a regra:

H1 {font-size: 48pt}

dentro de uma "folha de estilos" aplicada ao documento.
A folha de estilos pode ser um arquivo de textos simples (alfabeto ISO-Latin1) com a extensão .css. Para vinculá-lo a uma página HTML, esta deve ter dentro do seu bloco <HE-AD> ... </HEAD> o seguinte descritor:
<LINK REL="stylesheet" HREF="url_do_arquivo.css">
O restante deste artigo tratará dos fundamentos da tecnologia de folhas de estilos aplicáveis ao HTML, chamada de Cascading Style Sheets (folhas de estilo em cascata), mostrando como estabelecer as regras de estilo para um bloco de texto, uma página ou todo um site. Seções específicas abordarão cores, imagens, tipologia e posicionamento. Este texto não é completo. Omitimos propriedades e recursos não suportados nos browsers e nos limitamos àqueles recursos que constam da especifica-ção CSS1 (não incluímos recursos proprietários nem a maior parte das novidades do CSS2 que não
funcionam nos browsers disponíveis no mercado). Para uma abordagem mais completa, consulte a documentação oficial do W3C: http://www.w3.org/Style/.


Para que servem as folhas de estilo?


Separar apresentação da estrutura

Com isto é possível voltar a suportar browsers antigos que antes estavam condenados por não conseguirem ler a informação sem perdas. Com a informação toda armazenada no HTML (estrutura), a apresentação (estilo) seria uma camada a mais, alterando a disposição do texto, cores, etc. mas sem afetar a estrutura essencial da informação. Isto permite que uma página tenha vários estilos e use scripts (programas embutidos) para decidir qual carregar (em função do browser e da plataforma). Isto é muito menos trabalho que fazer uma página para cada browser e plataforma, pois a atualização é feita apenas no HTML. Também, com isso, é possível ter uma folha de estilos especial somente para impressão, onde haveria informações de quebra de páginas, etc. (este recurso não faz parte da versão 1 do CSS).

Controle absoluto da aparência da página.

É algo que não se tem com o HTML. Pode-se usar tabelas, GIFs invisíveis de um pixel e mais uma dúzia de "macetes" mas não se consegue fazer o texto fluir suavemente em volta de uma imagem irregular, por exemplo. Além do mais, quanto mais sofisticada a técnica, mais difícil é de codificar e mais "sujo" fica o código, o que o torna mais sujeito a erros. Com CSS, pode-se colocar uma imagem em qualquer lugar da página (até fora dela), usando técnicas de posicionamento absoluto ou relativo. Pode-se escolher a posição exata da imagem de back-ground e fazê-la combinar com algo no foreground. As dimensões e posições são exatas e dadas em unidades conhecidas no mundo da tipografia como pixels, pontos, paicas, milímetros.

Páginas mais leves

Com folhas de estilo é possível criar muitas páginas com um layout sofisticado que antes só era possível usando imagens, tecnologias como Flash ou applets Java. Estas páginas eram sempre mais pesadas, pois precisavam carregar imagens, componentes, programas. Com CSS é possível definir texto de qualquer tamanho, posicioná-lo por cima de outros objetos, ao lado ou por cima de texto e conseguir efeitos sofisticados a um custo (banda de rede) baixo. É pos-sível ainda importar fontes (que o usuário talvez não tenha).

Manutenção de um grande site

Uma folha de estilos serve para toda uma coleção de páginas, podendo ser usada para dar um estilo consistente a todo o site. Sendo aplicada em separado da informação e estrutura, não precisará ser atualizada todas as vezes em que a informação for mudada. A página pode ser atualizada em um editor HTML ou gerador de HTML simples, sem recursos de cor ou alinhamento, e ser formatada na hora em que for carregada pelo browser. É possível também fazer o contrário: mudar o estilo sem alterar a informação, como ter uma página que sempre carrega com um estilo diferente.

O uso das folhas de estilo depende da boa estrutura do HTML. A linguagem CSS (é uma linguagem declarativa) trabalha com os elementos tratando-os como "objetos". Cada parágrafo <P>, cada <H1>, cada <IMG> é um objeto. Objetos podem ser agrupados de várias formas. A cada objeto ou grupo de objetos podem ser atribuídas propriedades de estilo definidas em regras. Por exemplo, considere a seguinte regra: "todo objeto P da classe 'editorial' será azul, terá tamanho de 12 pontos, espaçamento duplo, alinhamento pela direita e usará a família de fontes Arial, ou, se esta não existir, Helvetica, ou então a fonte sem-serifa default do sistema". Um arquivo CSS com apenas a regra acima conteria o texto:

P.editorial {color: 0000ff; font-size: 12pt; line-height: 24pt; text-align: right; font-family: arial, helvetica, sans-serif}

Se a folha de estilos acima for aplicada a uma página que possua parágrafos <P> rotula-dos com o nome "editorial" (atributo 'CLASS=editorial'), eles serão formatados de acordo com as propriedades especificadas se o browser suportar CSS. Se o browser não suportar CSS, a estrutura será mantida (embora a aparência não seja a ideal) e o usuário conseguirá ter acesso à informação estruturada, mesmo em um meio de visualização mais limitado.

Quando se usa CSS, são poucas as modificações necessárias no HTML. Não são neces-sários novos descritores ou extensões. No exemplo acima, teremos que incluir apenas um atri-buto a mais (o atributo CLASS, do HTML 4) classificando os parágrafos que fazem parte do nosso 'editorial' (parágrafos que tem uma função diferente dos demais).

A grande vantagem das folhas de estilo é a preservação da estrutura do HTML e um controle muito melhor do autor sobre a sua aparência na tela do usuário final. Uma página deverá aparecer da melhor forma possível tanto num PowerPC sofisticado como naquele IBM PCXT 4.77MHz rodando o Lynx for DOS. O primeiro utilizará todos os recursos gráficos determinados pelas folhas de estilo. O segundo as ignorará, mas preservará a estrutura e a informação.

Nenhum comentário:

Postar um comentário

Popular Posts

- Arquivo -

 

Seguidores

Hora exata:

Total de visualizações de página