:: CSS desde o início ::

Autor: Joe Gillespie
URL do original: http://www.wpdfd.com/editorial/basics/index.html
Título original: CSS from the Ground Up
Traduzido com autorização expressa do autor

Etapa número 11 - Folhas de estilo externas

Todas as folhas de estilo que construi até agora, foram colocadas dentro da seção <head> das páginas. Este procedimento facilita o entendimento, pois basta olhar o código de marcação da página e ver como foram definidas as regras de estilo. Tudo está colocado em um único lugar. Contudo é muito raro termos páginas isoladas, o mais comum é que tenhamos várias páginas com uma apresentação semelhante em todo o Web site.

Em lugar de colocar as folhas de estilo repetidamente em cada uma das páginas construidas, seria uma boa idéia que tivessemos uma única folha de estilos que pudesse ser lincada a cada uma das páginas. Isto permite mudar a cor de fundo das páginas ou usar um tipo ou tamanho de fonte diferente para todo o site, bastando que você faça a alteração na folha de estilo 'mestre'. De fato, você pode mudar completamente a apresentação de todo o site, alterando apenas um arquivo.

Dê uma olhada em http://www.csszengarden.com/ para ver este princípio em ação. Vários designers construiram suas folhas de estilos para uma página padrão e isto demonstra de uma forma admirável como pode-se projetar os mais variados 'skins' para um mesmo 'esqueleto' da página, alterando completamente suas características. Para fazer uso de uma folha de estilo externa, basta lincá-la ao documento como mostrado a seguir:


	<link rel="stylesheet" href="basicsstyles.css"
	type="text/css" media="screen">

Isto diz ao navegador para procurar as especificações de estilo em um arquivo chamado 'basicsstyles.css'. Trata-se de um arquivo de texto puro - type="text/css" e os estilos foram otimizados para apresentação em uma tela de computador - media="screen".

As folhas de estilo não estão limitadas às telas de computador, você poderá criá-las para servir a outras mídias como, impressão, projeção e até mesmo braille. Se você pensar sobre isto, concordará que uma folha de papel para impressão não tem o mesmo formato de uma tela de computador e ninguém gosta de desperdiçar preciosas quantidades de tinta em áreas preenchidas com cores sólidas, quando tudo o que se quer impresso é um texto em preto e branco. Uma folha de estilo para impressão deve especificar uma área de impressão compatível com uma folha de papel e ao contrário de estilizações para a tela deverá usar tamanhos de fontes em 'points' (pt). Esquemas coloridos devem ser minimizados ou mesmo abandonados completamente. Então tudo o que você precisar fazer é adicionar outro link na seção <head> do documento, imediatamente abaixo daquele para mídia tela.


	<link rel="stylesheet" href="printstyles.css" 
	type="text/css" media="print"> 

Se você decidir que sua folha de estilo serve tanto para tela como para impressora, você poderá usar um link como mostrado a seguir...


	<link rel="stylesheet" href="styles.css" 
	type="text/css" media="all">

Embora a maioria das minhas folhas de estilos sejam do tipo externa, eu começo meus projetos com a folha de estilo declarada no próprio documento. Quando eu estou satisfeito com as definições de estilo que construi copio-colo a folha em um arquivo novo e coloco um link para ele na página.

  1. » Introdução - página básica
  2. » Folha de estilos
  3. » Estilizando texto
  4. » Mais texto
  5. » As listas
  6. » Os links
  7. » Boxes CSS
  8. » DIV's
  9. » Juntando tudo
  10. » DOCTYPE
  11. » Estilos externos
  12. » Estilizando tabelas
  13. » Estilizando formulários
  14. » Browsers
  15. » O futuro

Criado em: 2005-04-12

topo