Como já sabe, o SPIP trata separadamente o conteúdo da sua diagramação e o seu layout: os templates ordenam e exibem os conteúdos em páginas HTML, em que o layout é definido por folhas de estilo CSS. Acelere o desenvolvimento dos seus templates: usa as folhas de estilo com o SPIP!
Porque usar as folhas de estilo?
Se criar páginas HTML da maneira «tradicional», as indicações gráficas são inseridas diretamente no código HTML da sua página. Assim, a cada vez que quiser colocar um texto em vermelho, escreve <font color="red">. Para exibir uma tabela com bordas largas, escreve<table border="2">.
Com este método e um site estático (onde cada matéria tem uma página HTML específica), alterar o projeto visual de todo o site é um pesadelo: é preciso procurar em todos os ficheiros HTML as partes de código a alterar, e realizar essas alterações uma a uma (per exemplo, trocar <font color="red"> por <b> se decidir que os elementos anteriormente exibidos em vermelho deverão ficar, a partir de agora, em bold).
Como você já sabe, o SPIP melhora bastante a situação: Não tem mais que alterar centenas de ficheiros HTML, mas apenas os templates: e a sua diagramação é atualizada automaticamente em todo o site.
No entanto, o problema não está inteiramente resolvido. Por exemplo,
Cependant le problème n’est pas entièrement résolu. Por exemplo, suponha que decidiu usar um certo azul pastel em vários elementos do site, para lhe dar uma identidade gráfica: os links, os blocos, certos elementos sw navegação... serão exibidos em azul pastel. Mais tarde, se quiser substituir esse azul pastel por um verde-claro, terá de modificar todos os locais do template onde esse azul aparecia para o substituir pelo verde-claro. Isto pode ser desencorajador, nestas condições não é fácil alterar rapidamente o aspeto das páginas, nem mesmo para fazer testes.
A solução é adotar «folhas de estilo externas». Uma folha de estilo é um ficheiro onde define um conjunto de propriedades gráficas e os elementos em que são aplicadas. Ressalta-se duas vantagens fundamentais das folhas de estilo:
- a folha de estilo é um ficheiro único e centralizado, que pode aplicar a quantos ficheiros HTML (e templates SPIP) quiser;
- as propriedades gráficas são definidas uma única vez na folha de estilo, independentemente do número de locais onde são aplicadas no HTML.
Concretamente
Para ser aplicada a um ficheiro HTML (que pode ser um template SPIP), a folha de estilo deve ser declarada no cabeçalho da sua página (entre as tags <head>), da seguinte forma:
<link rel="stylesheet" type="text/css" href="meus_styles.css" />
- Aqui, o ficheiro meus_styles.css contém as propriedades gráficas que deseja aplicar à página HTML (nesta seção, assumiremos que meus_styles.css é o nome que escolheu para este ficheiro).
- Este ficheiro tem a extensão «.css». Com efeito, CSS é o nome da linguagem usada para as folhas de estilo, da mesma forma que HTML é o nome da linguagem usada para a criação de páginas web. Note que o CSS não é exclusivo do SPIP, trata-se de um padrão da web [1].
Nota: uma folha de estilo pode ser aplicada tanto a uma página HTML clássica («estática») como a um template SPIP («dinâmico»). Isto significa que qualquer técnica CSS válida num HTML clássico também será aplicável num template do seu site.
Se leu atentamente os parágrafos anteriores, poderá estar um pouco hesitante: sim, é necessário aprender uma nova linguagem para utilizar folhas de estilo (o SPIP não tem culpa disso!). De facto, o CSS não utiliza a sintaxe do HTML. No entanto, esta linguagem é bem simples, e basta alguns exemplos para começar a usá-la. Além disso, existe vasta documentação disponível sobre o assunto.