Atributos nucleares
Atributos que podem aparecer em todas as marcas
Interesse em particular para suportar estilos
ID
<P ID=“PrimeiroParagrafo”>Este é o início</P>
• Cria identificador
<A href=“#PrimeiroParagrafo”>Salta para o início</A>
• Salta para lá
• Substitui a função de âncora do A
#PrimeiroParagrafo {color: gray}
• Numa folha de estilos
CLASS
Permite a subdivisão de marcas por categorias
<P CLASS=“definicao”>Ave é um animal que...</P>
Internet - 1
Atributos nucleares (cont.)
STYLE
TITLE
Contém informação sobre a forma de apresentação, separadamente
da informação sobre a estrutura do documento
<P STYLE=“font-size: 18pt”>Grande</P>
Associa texto informativo a uma marca
<P TITLE=“Autor = GTD”>Texto...</P>
Marca SPAN
Limita-se a marcar uma zona do documento e serve para associar
atributos
<P>No zoo há uma <SPAN CLASS=definicao>ave</SPAN>.</P>
Internet - 2
Folhas de estilo
Forma está a tornar-se importante, a par do conteúdo
Sistematizar o design de uma colecção de
documentos implica definições de estilo
CSS - Cascading Style Sheets
âmbito das definições
folha de estilo
• acessível a uma colecção inteira de documentos
marca <style> no cabeçalho de um doc
• geral para todo o documento
atributo style em marcas específicas
• activo dentro da marca
mais específico prevalece (daí o cascading)
em caso de empate, o mais recente
Internet - 3
Acesso às definições
Marca <link>
Estilo ao nível do documento
serve como meta-informação para documentar as ligações entre
documentos: atributos href, rev, rel
usada para ligar folhas de estilo, com rel=stylesheet
pode existir mais do que uma (Netscape)
marca <style>
para não perturbar navegadores sem estilos, as definições de
estilo são metidas dentro de comentários HTML
convém documentar as definições, com comentários /* */
importar CSS
previsto na norma CSS @import url(folha.css), mas não
funciona nos navegadores actuais
Internet - 4
Uso de estilos
<html>
/* estilogeral.css */
<head>
H1 {color: blue; font-style: normal}
<title>Estilos</title>
<link rel=stylesheet href="estilogeral.css" type="text/css">
<link rel=stylesheet href="estilotitulos.css" type="text/css">
<style>
<!-- /* pinta de vermelho */ H1 {color: red} -->
</style>
</head>
/* estilotitulos.css */
<body>
<h1 align=center>Título definido com CSS</h1>H1 {color: green; font-style: italic}
<p align=center>Eis o
<a href="e19Frames.html">dono</a>
do carro.</p>
<h1 style="color:yellow; font-style:normal">Título definido localmente</h1>
<p>Parágrafo à esquerda.</p>
</body>
</html>
Internet - 5
Resultado
Internet - 6
Elementos de sintaxe
Forma básica
aplicar a várias marcas
marca {prop1:valor1; prop2:valor2 valor3; …}
H1 {font-style : italic}
H1, H2, H3, H4, H5, H6 {font-style : italic}
aplicar só em contexto
OL LI {list-style: upper-alpha}
OL OL LI {list-style: upper-roman}
OL OL OL LI {list-style: lower-alpha}
• item numa lista de nível 3 identificado com letras minúsculas
H1 EM, P STRONG {color: red}
P UL STRONG {color: blue}
• caso vários contextos sejam aplicáveis, usar o mais específico
Internet - 7
Classes
Uma classe define um conjunto de propriedades para
uma marca
permite vários estilos para a mesma marca
P.resumo {font-style: italic; left-margin: 0.5cm; right-margin: 0.5cm}
P.equacao {font-family: Symbol; text-align: center}
usam-se definindo o atributo class na marca
<p class=resumo>Este texto destina-se…</p>
classes genéricas aplicam-se a várias marcas
.corrigido {color: red}
<em class=corrigido>nabissa</em>
as classes herdam as propriedades da marca base
não há herança entre classes
especificar bastante a marca, e definir classes que só alteram o
específico
Internet - 8
Uso de classes
<html><head>
<title>Estilos</title>
<link rel=stylesheet href="estilogeral.css" type="text/css">
</head>
<body>
<h1>Associações</h1>
<p class=resumo>Eis o
<a href="e19Frames.html">dono</a>
do carro. Ele pertence a várias associações profissionais sem que no
entanto tire daí grandes benefícios.</p>
<p class=equacao>x + a/2 = 0</p>
Há que repensar as respectivas funções e métodos de trabalho para
ver se se consegue reverter a situação.
<p class=corrigido>As associações desportivas são normalmente mais
participadas e os sócios empenham-se mais nas suas actividades.</p>
</body></html>
Internet - 9
Resultado
Estilo
H1 {color: blue; font-style: normal}
P {font-weight:bold}
P.resumo {font-style: italic; margin-left: 0.5cm; margin-right: 0.5cm}
P.equacao {font-family: Symbol; text-align: center}
.corrigido {color: red}
Internet - 10
Propriedades nos estilos
Grupos de propriedades definíveis
Norma
fontes, cores e fundos, texto, caixas e disposição, listas, marcas
http://www.w3.org/TR/REC-CSS1
Referências
HTML The Complete Reference, Thomas A. Powell (Osborne)
• http://www.htmlref.com
Tutorial (CERN)
• http://alf.fe.up.pt/~lmr/mgi/css/
Tutorial (John Allsopp of Western Civilisation)
• http://www.westciv.com/style_master/academy/css_tutorial/
Internet - 11
Modelo de formatação
beira
exterior
esquerda
beira
interior
esquerda
beira
interior
direita
margem caixilho enchimento
esquerda esquerdo à esquerda
beira
exterior
direita
enchimento caixilho margem
à direita direito direita
topo
margem superior
conteúdo
caixilho superior
enchimento
superior
topo
interno
enchimento
inferior
fundo
interno
caixilho inferior
margem inferior
fundo
Internet - 12
Download
