Uma liberdade que facilita a criatividade, mas também traz outras vantagens, nomeadamente:

(1)

• Melhor acessibilidade – A estrutura dos documentos HTML, apenas baseados na estilização vis CSS, são mais “amigos” dos sistemas de consulta associados a utilizadores com necessidades especiais;

• Estruturas mais simples – Uma das consequências da separação do design vs conteúdo, reside no facto de ter documentos HTML estruturalmente muito simples e, portanto, muito fáceis de editar;

• Páginas mais leves – Estruturas simples e bem formatadas geram páginas mais leves e também mais simples de serem processadas pelos browsers. O resultado corresponde a sites mais rápidos a carregar, pois inclusive as CSS trabalham em

cache;

• Redesigns facilitados – Ao ter o documento responsável pelo design separado do conteúdo, há mais apetência e facilidade para alterar o layout do site ou alterar o aspecto de outros elementos, sem mexer sequer no documento principal; • Conteúdos universais noutros media – Com as CSS é possível estilizar o

mesmo site para ter boa apresentação, tanto impresso como para projecção ou consulta via PDA ou telemóvel. Tudo isto novamente sem mexer no conteúdo, isto é, no documento HTML original.

E quanto a desvantagens... deve haver alguma, senão porquê que todos não usam as CSS? É uma questão colocada frequentemente, sendo as reservas à sua utilização devidas sobretudo a factores de:

• Novidade – Os criadores de sites têm desde sempre usado as tabelas e as mesmas funcionam. A tradição e algum imobilismo geram a atitude de “para quê começar de novo com outra técnica, apesar de ser melhor, se com as tabelas faço visualmente o mesmo?”. A não massiﬁcação do uso das CSS na criação de

sites, deve-se sobretudo à resistência à mudança;

• Suporte e uniformidade – Pessoalmente, considero estar aqui a principal força desmotivadora. As CSS são um conjunto de instruções interpretadas pelos browsers e alguns não suportam as principais funcionalidades ou têm comportamentos diferentes. Isto leva a que uma página com o aspecto que nós queremos no browser A, não tenha nada a ver com o que o browser B mostra. O principal culpado é o IE que está ultrapassadíssimo, apesar de ser líder de mercado. De qualquer modo o essencial está coberto e os resultados conseguem ser muito homogéneos.

(2)

© FCA – Editora de Informática 31 Aqui o princípio é semelhante, simplesmente tem-se um pouco mais controlo e opções sobre o que é gerado antes ou depois de cada selector, tendo que se utilizar a property content em conjunto com o pseudo-element respectivo.

Ainda não abordei a temática das properties, pelo que fica aqui um adiantamento ao tema, que é necessário para finalizar este tópico dos pseudo elements selectors. A property content serve para definir o tipo de conteúdo a gerar sempre que a condição que definirmos ocorrer. Imagine-se que queremos associar um separador para cada capítulo e que cada um desses capítulos se inicia com um elemento H2, obtendo o seguinte efeito visual no browser:

Secção Temática:

As especiarias na gastronomia nacional O código CSS respectivo seria:

H2:before {

content: “Secção Temática:”; font-style: italic; display: block;}

A vantagem consiste em: de cada vez que se adicionasse um novo tema associado ao elemento H2, seria sempre gerado automaticamente o separador “Secção Temática” sem nunca ter de o escrever. Mais tarde, alterações a esse título seriam efectuadas apenas uma vez e no ﬁcheiro CSS, não no HTML.

Outro exemplo útil pode ser o facto de se pretender associar um ícone a um hiperlink especíﬁco.

Se num web site recorrermos muito a links para documentos pdf seria interessante

poder associar o ícone do pdf ao respectivo link, sendo ainda mais interessante poder fazê-lo de uma forma automática.

Ora, isso é possível graças aos pseudo-element selectors, neste caso ao pseudo-

-element :after utilizado da seguinte forma: a.icon:after { content: url(icon_pdf.gif); }

Neste exemplo combina-se uma class do género não solitário a um pseudo-element

selector.

(3)

que se trata de um attribute selector do tipo particular, neste caso seleccionando e estilizando com um sublinhado todos os elementos do documento HTML com o atributo lang, cujo valor se inicie por pt, podendo ou não conter outros elementos a seguir (que neste caso são separados por hífenes e não por espaço como no exemplo anterior do tipo parcial).

No exemplo do código XHTML descrito, somente os 2 primeiros parágrafos seriam estilizados com o sublinhado (underline).

3.2.6 Afectar vários selectors

em simultâneo

Por vezes queremos atribuir um mesmo estilo a vários elementos. Nestas situações, dava jeito poder fazê-lo com uma instrução apenas e afectar um número determinado de elementos do documento. Esta acção é possível de executar recorrendo aos seguintes

selectors:

3.2.6.1 Selector groups

Os selector groups não são propriamente selectors. Apesar de serem assim designados, são na prática selectors agrupados, aos quais se atribui as mesmas declarations, constituindo uma forma de reduzir e agrupar o código CSS, simpliﬁcando o trabalho e minimizando erros.

Os diferentes selectors permitem seleccionar o seguinte:

• Type – Elementos de HTML; • Class - classes criadas pelo

autor;

• ID - IDs criados pelo autor; • Descendant – Elementos que

na hierárquica descendem de outros elementos HTML;

• Link pseudo-class - Estádios em que se podem encontrar as hiperligações ou outros elementos;

• Pseudo-element – Estádios

especíﬁcos de certos elementos do documento;

• Dynamic pseudo-class - Estádios virtuais de certos elementos do documento;

• Selector groups – grupos de elementos/selectors;

• Language pseudo-class –

Elementos associados a códigos de países; • Child – Elementos hierárquicamente 1 nível abaixo (pai-ﬁlho); • First-child - Elementos hierárquicamente 1 nível abaixo e que

surjam primeiro(pai-ﬁlho primogénito);

• Adjacent - Elementos que

surjam adjacentes um ao outro; • Attribute - Elementos que

correspondam a certos atributos gerais ou especíﬁcos;

• Universal – Todos os elementos HTML.

Tipos de selectors CSS

(4)

4.2.1 Unidades de medida

Os values associados a unidades de medida, são aqueles que nos permitem deﬁnir tamanhos e dimensões. O quadro seguinte apresenta um resumo das unidades usadas nas CSS, indicando igualmente se se tratam de unidades do tipo absoluto ou relativo, factor muito importante no webdesign.

Desenvolvendo sobre as unidades de medida dos values, de acordo com as áreas já indicadas, temos:

4.2.1.1 Tamanho

Podem ser de dois tipos: relativo ou absoluto. Em termos ideais, deve-se sempre privilegiar o uso de tamanhos relativos, pois ao contrário do mundo físico, no

design para sites não conseguimos controlar verdadeiramente o nosso produto ﬁnal,

pois cada utilizador pode ter resoluções de monitor diferentes, bem como alterar as dimensões do texto, modiﬁcando bastante a nossa criação original. Tal não acontece no design tradicional, onde um A4 é sempre um A4.

Deste modo, o recurso à unidade ”em” é o mais comum entre os CSS designers. Em

termos de conceito, 1em corresponde a 100% do tamanho base da fonte, portanto, 1.5em corresponde a 150%, 2em a 200% e 0.6em a 60% e assim por diante.

FORMATAÇÃO E ESTILO DAS COMPONENTES DO SITE

��  �� �� �� �� �� !�� " #$�� %��&�� !��'�� #��&�� !��'�� !��'�� ©��(# �)��*��$��

(5)

CSS – CRIAÇÃO INOVADORA DE SITES

72 © FCA – Editora de Informática

É possível misturar vários tipos de medidas (ex: percentagens com pixels) ou medidas com keywords, assim como usar valores negativos. Não é uma property com inerência e por predeﬁnição assume como ponto de origem, o valor das keywords top left, isto é 0 0.

6.3 Uso criativo das imagens

A capacidade de colocar imagens como fundo de qualquer elemento do documento HTML é bastante poderosa em termos de design, pois permite efectuar alguns malabarismos interessantes, nomeadamente:

• Colocar fotos como complemento ao design geral; • Substituir os símbolos das listas;

• Utilizar símbolos mesmo sem listas; • Usar para ﬁns decorativos;

• Criação de menus com efeitos de swap image.

A primeira situação é bastante simples e basea-se no uso da property background-image, ou na sua versão abreviada de somente background. Se porventura pretendermos criar um banner como o da ﬁgura 6.5, isso seria conseguido da seguinte forma:

Fig. 6.5 - Banner obtido por posicionamento CSS e 2 imagens Na prática - Criação de um banner

/* Este seria o código XHTML de base: */ <div id=”caixaglobal”>

(6)

Figura 7.1 - Diferentes margens atribuídas alteraram o posicionamento dos elementos.

7.1.2 Padding (Espacejamento)

Qualquer elemento pode ter um espacejamento associado, signiﬁcando isto o espaço entre o ponto de origem do elemento e o ponto de origem do conteúdo. A grande diferença entre as properties padding e a margin, resulta do facto da margin deslocar o seu ponto de origem enquanto que o padding desloca apenas o seu conteúdo. Recorrendo ao exemplo anterior, do elemento parent na posição 10 e o child também na 10, se atribuirmos um padding de 5, o elemento child continua a estar na posição 10, mas o seu conteúdo desloca-se para a posição 15.

Esta diferença é extremamente útil e pertinente, quando se usam imagens de fundo ou bordas.

Relativamente às properties do padding, estas são: • padding-top – Espaço no topo;

• padding-right – Espaço à direita; • padding-bottom – Espaço em baixo; • padding-left – Espaço à esquerda.

ARRUMAÇÃO DOS CONTEÚDOS

margin: 30px margin: 30px mar gin: 30px margin: 25px margin: 50px mar gin: 30px Janela do Browser caixa01 caixa02 caixa03 mar gin: 20px mar gin: 10px margin: 20% mar gin: 6em

(7)

Esta property, pode ser muito útil para criar layouts, principalmente para as caixas destinadas a actuarem como cabeçalhos ou rodapés, pois regra geral actuam como elementos à parte ﬁcando de fora de qualquer ﬂoat.

Na ﬁgura 8.2 temos um típico layout web, com um cabeçalho, seguido de um menu à esquerda e os conteúdos respectivos à direita. Um rodapé no mesmo estilo do cabeçalho remata o layout.

Quer dizer, esse seria o objectivo. O que acontece é que o rodapé não só não remata o layout como se sobrepõe à caixa de conteúdos do menu.

Isto acontece porque esta caixa do menu tem atribuída um ﬂoat:left; e permite

esta situação. Este ﬂoat não pode ser, no entanto retirado, caso contrário o texto da direita, que consta dentro de outra caixa distinta, viria para baixo do menu e não ﬁcaria ao seu lado, como se pretende.

Figura 8.2 - O rodapé devido ao ﬂoat assenta sobre o menu de navegação

Como resolver então o problema causado pelo ﬂoat, mas usando-o na mesma, pois é necessário?

Já devem ter calculado que é com a property clear. Neste caso, ela será atribuída à caixa que contém o rodapé, da seguinte forma:

Na prática - Sintaxe da property clear com o value both clear: both;

LAYOUT DAS PÁGINAS

BIBLIOGRAFIA

Visite também: www.css.vico.tv

TEMAS CSS Livros FCA HTML XHTML JAVASCRIPT

CLEAR traduz-se em limpar, que signiﬁca tirar a uma coisa o que a suja. Em sentido ﬁgurado quer dizer: comer todo o conteúdo de... deixar sem vintém, ganhar tudo a outrem.

Se for utilizado um guardanado, limpar signiﬁca, limpar os beiços as mãos.

(8)

8.3.2 Overflow

Podendo nós definir o comprimento e altura de um elemento, o que acontece quando o conteúdo ultrapassa essas medidas? Para definir o comportamento do browser nesta ocasião, devemos utilizar a property overflow.

Values – Tem como values as keywords:

• visible – Dimensiona o tamanho do elemento à dimensão do conteúdo; • hidden – Corta o conteúdo excedente de acordo com medidas especiﬁcadas; • scroll – Corta o conteúdo excedente de acordo com medidas especiﬁcadas,

mas adiciona barras de scroll horizontalmente e verticalmente, sejam ou não necessárias;

• auto – Corta o conteúdo excedente de acordo com medidas especiﬁcadas, mas adiciona barras de scroll horizontalmente e verticalmente, somente se for necessário e aquela que for necessária (horizontal ou vertical) para visualizar o conteúdo excedente.

Por predeﬁnição o valor do overﬂow é visible e não é uma property com inerência.

Cuidado que ao surgirem as barras de scroll as dimensões da caixa são ajustadas, pelo que pode haver omissão de conteúdos ou redesign do layout devido ao espaço extra do(s) scroll(s).

Figura 8.4 - Exemplo do que acontece às caixas de acordo com o tipo de overﬂow deﬁnido

LAYOUT DAS PÁGINAS

Aliquam elit quam, condimentum et, imperdiet id, molestie eget, risus. Aliquam posuere nonummy

Aliquam elit quam, condimentum et, imperdiet id, molestie eget, risus. Aliquam posuere nonummy quam. Sed dapibus, lectus sed venenatis facilisis.

Aliquam elit quam, condimentum et, imperdiet id, molestie eget,

risus. Aliquam posuere nonummy Aliquam elit quam, condimentum et, imperdiet id, molestie eget, risus. Aliquam posuere nonummy overﬂow: hidden;

overﬂow: visible;

overﬂow: auto; overﬂow: scroll;

(9)

© FCA – Editora de Informática 111 Como sabemos, o ﬂoat permite que as caixas partilhem a mesma linha horizontal, mas somente possibilitam as keywords left e right, pelo que as soluções são restritas. Ou alinhamos todas as caixas, ou juntamos 2, ou pomos uma para cada lado, como na Figura 10.3.

Basicamente são estas as opções que o ﬂoat permite. Vejamos outro exemplo de layout (Figura 10.4).

Figura 10.4 - Manipulação do layour base com recurso a CSS P

Este layout resulta do mesmo CSS, com as seguintes alterações:

BODY {background: black;} #box01 {

background: white; width: 800px; height: 1600px; margin: 0 auto;

border: solid 0.2em fuchsia; }

#box02 {

background: green; width: 400px; height: 50px;

WEBDESIGN EXCLUSIVAMENTE VIA CSS

box01 box02

box03 box04

(10)

Como? Podem-se fazer interessantes menus via CSS, com a vantagem de serem fáceis de actualizar ou alterar, pois a sua base é apenas código HTML. E se se trabalhar com includes shtml, php ou outros, uma simples alteração no HTML base pode ser facilmente multiplicada pelas inúmeras páginas do site.

No Capítulo 15, irei usar um elegante menu via CSS, no entanto, este irá recorrer a uma imagem para gerar um efeito de swap, pelo que apesar de simples, face ao resultado, não é muito indicado para alterações, pois implica sempre no mínimo rectiﬁcar as respectivas 2 imagens associadas.

A solução para este caso passa uma vez mais pelo uso criativo das listas que podem gerar com facilidade e elegância um menu do tipo drop-down como este:

HOME SERVIÇOS PRODUTOS LINKS

Figura 12.5 - Aspecto possível de um menu temático

Este é o primeiro estádio do menu. Ao passar o rato por cima de um dos temas (à excepção do Home) o mesmo expande-se dando origem ao seguinte menu completo:

Figura 12.6 - O mouse hover permite expandir o submenu

Um simples e poderoso menu deste tipo é facilmente conseguido via CSS, através de uma formatação correcta do documento HTML.

Vejamos como, analisando em primeiro lugar o código XHTML que lhe dá origem:

IMAGENS, NAVEGAÇÃO E MENUS

Templates de sites Vídeo on-line Duplicação de DVD Flash Templates HOME SERVIÇOS PRODUTOS LINKS