Computação na Internet 2005/2006
Laboratório 3 – Formatação do Formulário
Introdução
Uma vez definida a estrutura de uma página, procede-se então à formatação visual do seu
conteúdo. Para isso vamos utilizar CSS's (Cascading Style Sheets).
Uma CSS define o estilo a aplicar ao documento que a utiliza, ou seja, como é que este é
visualizado.
Para ver um exemplo de aplicação de CSS consultar:
http://www.w3schools.com/css/demo_default.htm
Podemos definir elementos CSS dentro do próprio documento, introduzindo a tag style com
o tipo css dentro da secção head da página xhtml, como por exemplo (documento teste.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!-.style1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FF0000;
font-weight: bold;
}
.style5 {color: #FFFFFF; font-weight: bold; }
.style6 {color: #FFFFFF}
tr,th { background: #000066}
td { background: #ccccff}
-->
</style>
</head>
<body>
<p class="style1">Isto é o título </p>
<table width="200" border="1">
©2005 ESTSetúbal – Susana Cabaço - Computação na Internet 2005/2006
Página 1/7
Computação na Internet 2005/2006
<tr>
<td><span class="style5">Horas</span></td>
<td><span class="style5">Segunda</span></td>
<td><span class="style6">...<strong>Sexta</strong></span></td>
</tr>
<tr>
<td>...</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>17:00</td>
<td>CI F157 </td>
<td>CI F157 </td>
</tr>
</table>
</body>
</html>
Que produz o resultado seguinte:
Os estilos definidos aparecem entre comentários html <!-- ... --> por uma razão muito
simples. Havendo browsers que não estejam preparados para lidar com estilos CSS, o
respectivo código é tratado como um comentário html normal e não é interpretado, não
gerando erros nem texto estranho nas páginas.
Outra forma de se poder definir os estilos a aplicar numa página xhtml, consiste em criar
um ficheiro de texto com a extensão .css, no qual se definem todas as regras de formatação.
Depois, no documento xhtml criado por nós, colocamos uma referência para o local onde se
encontra o ficheiro com tais definições por forma a que este possa ser interpretado e os
formatos sejam aplicados pelo browser quando está a carregar uma determinada página.
Exemplo:
Ficheiro teste.css:
.style1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FF0000;
©2005 ESTSetúbal – Susana Cabaço - Computação na Internet 2005/2006
Página 2/7
Computação na Internet 2005/2006
font-weight: bold;
}
.style5 {color: #FFFFFF; font-weight: bold; }
.style6 {color: #FFFFFF}
tr, th { background: #000066}
td { background: #ccccff}
Documento teste.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="./styles/teste.css" />
</head>
<body>
<p class="style1">Isto é o título </p>
<table width="200" border="1">
<tr>
<td><span class="style5">Horas</span></td>
<td><span class="style5">Segunda</span></td>
<td><span class="style6">...<strong>Sexta</strong></span></td>
</tr>
<tr>
<td>...</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>17:00</td>
<td>CI F157 </td>
<td>CI F157 </td>
</tr>
</table>
</body>
</html>
Neste caso, na secção head não definimos uma tag de style, mas sim uma tag link que
aponta para o ficheiro contendo a css de formatação do documento.
O resultado de execução desta página será exactamente igual ao anterior.
A grande vantagem de definir stylesheets externas aos documentos html reside no facto de
que podemos aplicar as mesmas regras de formatação a todas as páginas do site ou aplicação
sem ter de repetir código. Mantemos assim um estilo coerente e ao mesmo tempo torna-se
mais simples de efectuar qualquer correcção pois a definição das regras de formatação é
centralizada.
O termo Cascade, deriva do facto de que as regras de formatação definidas têm ordem de
prioridade e, na prática, o browser as reúne todas numa stylesheet dita “virtual”, que contém
os estilos finais que efectivamente vão ser aplicados às páginas.
©2005 ESTSetúbal – Susana Cabaço - Computação na Internet 2005/2006
Página 3/7
Computação na Internet 2005/2006
A ordem de prioridade é a seguinte:
•
Estilo inline (definido dentro do próprio elemento html)
•
Estilo interno (definido dentro do documento, como no primeiro exemplo)
•
Estilo externo (definido num ficheiro separado, como no exemplo anterior)
•
Default do browser (quando não se definem regras específicas, o browser tem
uma formatação default que aplica aos elementos)
A sintaxe, como poderão constatar pelos exemplos fornecidos, consiste em três partes:
•
Selector (ex: style1)
•
Propriedade (color)
•
Valor (#ffffff)
A propriedade é separada do valor por um sinal : (dois pontos). O selector pode conter
definições de mais do que uma propriedade, sendo que inicia por { e termina por }. Dentro
das chavetas estão as definições a aplicar, separadas por ; (ponto e vírgula).
Exemplo de definição de um selector com múltiplas propriedades:
body{
font-family: Arial,sans-serif;
color: #333333;
line-height: 1.166;
margin: 0px;
padding: 0px;
}
Também podemos aplicar as mesmas regras de formatação a múltiplos selectores, como foi
o caso dos elementos td e th nos exemplos anteriores:
tr, th { background: #000066}
Posto isto, há ainda a saber que temos à nossa disposição dois tipos de selectores:
•
de classe: permite definir diferentes estilos para um mesmo elemento html
•
id: definir o mesmo estilo para elementos html diferentes
Exemplos:
Selectores de classe: estilos a aplicar num documento com dois tipos de parágrafos, um
alinhado à esquerda e outro alinhado ao centro.
©2005 ESTSetúbal – Susana Cabaço - Computação na Internet 2005/2006
Página 4/7
Computação na Internet 2005/2006
CSS
p.right {text-align: right}
p.center {text-align: center}
xhtml
<p class="right">
Este parágrafo está alinhado à direita
</p>
<p class="center">
Este parágrafo está centrado
</p>
Erro: (cada elemento tem no máximo 1 classe de estilo!)
<p class="right" class="center">
Isto é um parágrafo
</p>
Também podemos omitir o nome da tag na definição da classe, para que o estilo possa ser
aplicado a todos os documentos html que decidirmos que devem pertencer à mesma classe:
CSS
.center {text-align: center}
xhtml
<h1 class="center">
Este parágrafo está centrado
</h1>
<p class="center">
Este parágrafo também está centrado
</p>
Selector do tipo id:
Estilo a aplicar a qualquer elemento que deva ter o atributo “verde”:
#green {color: green}
Aplicação do estilo a elementos distintos:
©2005 ESTSetúbal – Susana Cabaço - Computação na Internet 2005/2006
Página 5/7
Computação na Internet 2005/2006
<h1 id="green">Título verde</h1>
<p id="green">Parágrafo verde</p>
Definição de um elemento “p”, cujo id tem o valor para1:
p#para1 {
text-align: center;
color: red
}
Estilo a aplicar a qualquer “p” cujo id seja “green”:
p#green {color: green}
Em CSS também é possível fazer comentários, tal como em qualquer linguagem. Definemse da seguinte forma: /* Isto é um comentário */
Dica: quando se trata de definir unidades, por exemplo para definir uma margem, não
deixar espaços entre o valor da dimensão e a respectiva unidade, caso contrário corre-se o
risco de funcionar bem no IE6 mas não ser bem interpretado noutros browsers (exemplo: usar
margin-left: 20px e não margin-left: 20 px)
Para mais informações acerca dos estilos possíveis de definir numa CSS consultar os sites
de referência:
•
http://www.w3.org/
•
http://www.w3schools.com/css
Então e em que consiste o laboratório 2?
Em primeiro lugar, deverão testar todos os exemplos aqui mencionados, por forma a
entender como funcionam e como podem ser utilizadas as CSS. Devem tirar proveito dos
mesmos para esclarecer qualquer tipo de dúvida com o professor.
Em segundo lugar, utilizem o recurso seguinte: http://www.csszengarden.com/.
Esta página respeita na íntegra o DTD xhtml Strict, bem como a norma CSS, entre outras.
Têm vários designs que podem experimentar, sendo que em todos eles, por incrível que vos
possa parecer, o conteúdo é sempre o mesmo. Simplesmente joga-se com aspectos de
©2005 ESTSetúbal – Susana Cabaço - Computação na Internet 2005/2006
Página 6/7
Computação na Internet 2005/2006
formatação e posicionamento oferecidos pelas respectivas CSS.
Para cada design podem fazer download da CSS e do xhtml para assim fazerem
experiências com a vossa própria cópia.
Assim sendo, comecem por avaliar as possibilidades através da consulta deste site e,
posteriormente, (até pode ser com base em coisas que aqui encontrem e achem
interessantes), tratem de criar o design da vossa página. Não se esqueçam de que as normas
são para respeitar!
Validator de CSS: http://jigsaw.w3.org/css-validator/
Para quem utiliza firefox, instalem a extension “Web Developer”, que vos permite desligar e
ligar a utilização de CSS. Assim podem comparar as diferenças entre o conteúdo das páginas
do ZenGarden com e sem formatação.
Deverão definir e criar os estilos a aplicar ao documento (ou documentos) criados no
laboratório anterior. Não devem descurar nem esquecer os aspectos de coerência e de
reutilização.
Devem ter em conta que o posicionamento dos elementos na página e respectivo
alinhamento deve, sempre que possível, ser feito sem recurso a tabelas. Todo o layout da
vossa página deve ser definido à custa de CSS!!!
Entrega do Trabalho
Este trabalho deve ficar terminado na aula a que diz respeito. Não é necessário relatório.
Mais uma vez, a avaliação terá em conta a complexidade, correcção, ambição e creatividade
do vosso código e decisões por vós tomadas.
Ter-se-á em conta o tipo de selectores e propriedades utilizadas e a forma como são
utilizados nas páginas a que se aplicam.
Como habitual, por cada dia de atraso descontar-se-á 2% da nota de laboratório.
©2005 ESTSetúbal – Susana Cabaço - Computação na Internet 2005/2006
Página 7/7
Download
