Words
CSS: A verdadeira linguagem de design na web
Parte II: principais conceitos e métodos do CSS
por Molly E. Holzschlag
Aprender do fim para o princípio. É um fenómeno comum nos humanos – e no desenvolvimento para a Web. À medida que nos esforçamos por acompanhar as tecnologias que usamos para construir a Web, por vezes, em retrospectiva, reparamos que vamos tendo uma noção mais clara de onde estivemos e como lá chegámos. Conhecer a nossa história pode certamente ajudar-nos a servir o futuro com soluções mais inovadoras.
No artigo anterior, descrevi a importância da separação entre a apresentação e a estrutura de um documento. Este processo ajuda a tornar os nossos documentos web mais eficientes e a conduzir-nos a um futuro onde a gestão documental, a portabilidade e a acessibilidade coexistam com um design visual inovador. Isto quer dizer que devemos olhar para a forma como até agora temos escrito a marcação dos nossos documentos web, e quer também dizer que devemos concentrar os nossos estudos no design virado para a apresentação - o que em termos de marcação significa aprender Cascading Style Sheets (CSS).
Como a maioria dos profissionais da Web já saberão, o CSS é o termo genérico para nos referirmos à aplicação de propriedades de apresentação aos documentos. Neste caso, pensemos num estilo como qualquer outra característica de design: tipo de letra, fundo, texto, cor dos links, controlo de margens, e posicionamento dos objectos na página.
Então porque é que devemos usar folhas de estilo se pela marcação conseguimos pelo menos algum deste trabalho só por si? A ideia inicial dos criadores do HTML foi que o HTML fosse uma linguagem de marcação responsável pela estrutura básica das páginas, incluindo o corpo, títulos, parágrafos, e alguns itens específicos, tais como as listas. Os designers web e os criadores de browsers foram responsáveis por levar o HTML aos limites, de forma a acomodar aspectos de apresentação e, como resultado, o HTML e o XHTML herdaram este legado.
As Cascading Style Sheets foram desenvolvidas de forma a se obter alguma separação entre a função original do HTML como ferramenta de marcação estrutural, oferecendo também uma poderosa adição às ferramentas à disposição do designer em termos de estilo. De facto, desde a recomendação do HTML 4.0, muitos dos elementos orientados para o estilo (tais como <font>) foram desaprovados (considerados indesejáveis, não devendo existir em versões futuras da linguagem) a favor do CSS.
O CSS não é por si uma linguagem difícil, mas é complexo. Agora que sabemos um pouco sobre a história e fundamentação lógica do CSS, é altura de aprender do fim para o princípio e descobrir o que compreendem os conceitos do CSS em termos teóricos, e como se passa para a prática. Neste artigo aprenderemos tópicos importantes, tais como cascata e herança, e várias formas de aplicar um estilo a um documento.
Tipos de folhas de estilo
Abaixo encontram-se descritos os tipos de folhas de estilo que se podem aplicar a um documento.
- Interno
- Permite aplicar um estilo a qualquer elemento. Usando o método interno temos o máximo de controlo sobre um aspecto específico de um documento web. Por exemplo, se quisermos controlar o aspecto de um dado parágrafo, podemos simplesmente aplicar o atributo style=”x” ao elemento parágrafo, e o browser mostra o parágrafo usando os valores que acrescentámos ao código.
- Incorporado (Embedded)
- Permite controlar um documento por inteiro. Usando o elemento style, que colocamos dentro da secção ‘head’ de um documento, podemos inserir atributos de estilo detalhados que serão aplicados à página inteira.
- Externo (linked)
- Forma eficaz de criar folhas de estilo globais que podemos aplicar a todo o site. Podemos criar uma folha de estilo principal usando a extensão .css. Este documento contém os estilos que queremos que uma ou mesmo milhares de páginas adoptem. Qualquer página que tenha um link para este documento adopta os estilos chamados por aquela.
- Importado
- Funciona de forma idêntica ao tipo de folha de estilo externo, excepto que usa a regra ‘@import’. Apesar de não abordar este método neste artigo, irei fazê-lo no futuro quando abordar os vários métodos de layout.
- Definido pelo utilizador
- Folhas de estilo que podem ser criadas de forma a sobrepor quaisquer outras.
No próximo artigo, falarei em detalhe sobre o que cada um destes tipos
significa em termos de código. Para já, vamos aprender um pouco
sobre a forma como as hierarquias e relações funcionam no CSS.
Cascata e herança
Um dos pontos fortes das folhas de estilo é a existência de uma hierarquia de relações. A noção de cascata refere-se, neste contexto, à ordem com que o estilo é aplicado. Podem ser usadas várias folhas e tipos de folhas, cada uma aplicada a seguir à outra. Isto cria uma hierarquia na sua aplicação.
Podemos combinar estilos internos, incorporados e externos, ou qualquer número de tipos de estilos individuais para um controlo máximo. Por exemplo, temos um Web site com muitas páginas que estamos a controlar com uma única folha de estilo, no entanto, temos uma página na qual queremos alterar alguns dos estilos. Não haverá problema. Podemos simplesmente colocar o estilo modificado como uma folha de estilo incorporada dentro da página individual. O browser procura em primeiro lugar o estilo incorporado e aplica essa informação. O que não estiver definido nessa folha de estilo incorporada, o browser tenta procurar na folha externa.
Podemos ainda sobrepor ambos os estilos acrescentando um estilo interno. Depois de colocados os três estilos, o browser (se respeitar esta tecnologia) irá procurar primeiro o estilo interno, depois o estilo incorporado, e depois o estilo externo; lê a informação por esta ordem.
Criei uma página com um link para uma folha de estilo, uma folha de estilo incorporada e alguns estilos internos, como podem ver na Listagem 1.
Listagem 1: Estilos externos, incorporados e internos aplicados a uma página.
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Exemplo de várias Folhas de Estilo combinadas</title>
<link rel="stylesheet" href="mystyle_1.css" type="text/css"
/>
<style type="text/css">
<!--
p {
font: 13pt Verdana;
}
-->
</style>
</head>
<body>
<h1 style="font-family: Times; font-size: 22pt;">
A Midsummer Night's Dream</h1>
<p>Act I Scene I</p>
<p>Either to die the death or to abjure <br />
For ever the society of men. <br />
Therefore, fair <a href="hermia.html">Hermia</a>,
question your desires; <br />
Know of your youth, examine well your blood, <br />
Whether, if you yield not to your father's choice, <br />
You can endure the livery of a nun, <br />
For aye to be in shady cloister mew'd, <br />
To live a barren sister all your life, <br />
Chanting faint hymns to the cold fruitless moon. <br />
Thrice-blessed they that master so their blood, <br />
To undergo such maiden <a href="pilgrim.html">pilgrimage</a>;
<br />
But earthlier happy is the rose distill'd, <br />
Than that which withering on the virgin thorn <br />
Grows, lives and dies in single blessedness.</p>
</body>
</html>
Neste caso, pode-se ver um conceito de cascata em acção. O estilo interno tem precedência sobre o estilo incorporado, e o estilo incorporado tem precedência sobre os estilos na folha externa. De certa forma, a folha externa actua como o estilo por defeito.
Outro exemplo de um conceito de cascata dentro do CSS é o uso de várias folhas externas no mesmo documento, como se vê abaixo.
<head>
<link rel="stylesheet" type="text/css" href="molly1.css"
/>
<link rel="stylesheet" type="text/css" href="molly2.css"
/>
<link rel="stylesheet" type="text/css" href="molly3.css"
/>
</head>
A última folha de estilo da lista aplica os estilos que não estão na folha de estilo do meio, e a folha de estilo do meio aplica os estilos que não estejam na primeira. Este é outro exemplo de cascata.
Outro aspecto do CSS é o conceito de herança. Este conceito define alguns elementos específicos como pais, e outros elementos dentro destes como filhos. Tome-se o exemplo do elemento ‘body’.
Este elemento contém toda a marcação que afecta a forma como o conteúdo de uma página é mostrado. Os elementos dentro do body são considerados filhos desse elemento. Este conceito continua pela hierarquia de marcação, referida como árvore. Pensemos nela como uma árvore genealógica. Como tal, se tivermos um parágrafo, os elementos dentro desse parágrafo serão os filhos dele, e por ai adiante. Este sistema é chamado de hierarquia de contenção.
A herança define que, não sendo especificado de outra forma, o estilo será herdado pelo filho de um pai. Por exemplo, se definirmos um estilo que aplica uma dada cor de texto a um parágrafo, todos os elementos dentro desse parágrafo herdam essa cor, a não ser que esteja indicado de outra forma. Claro que este funcionamento ideal infelizmente não é suportado ainda por todos os browsers.
Brevemente
Em breve avançaremos um pouco mais em relação aos vários
tipos de folhas de estilo e os seus usos, um a um. Em artigos futuros, dentro
desta série, abordarei a sintaxe e os usos criativos e únicos
do CSS no design.
A autora
Molly E. Holzschlag é autora, instrutora e designer. Como membro
do Web Standards Project (WaSP), Molly trabalha em conjunto com um grupo
de profissionais da Web no sentido de promover as recomendações
do W3C. Mais sobre as suas actividades em http://www.molly.com.
Versão Portuguesa por: Pedro
Mendes
Link
para a Versão original (em Inglês)
(publicado originalmente em Março de 2002)
