Internet - 1

1
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 ltstylegt 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

2
Acesso às definições

• Marca ltlinkgt
• serve como meta-informação para documentar as
  ligações entre documentos atributos href, rev,
  rel
• usada para ligar folhas de estilo, com
  relstylesheet
• pode existir mais do que uma (Netscape)
• Estilo ao nível do documento
• marca ltstylegt
• 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 _at_import url(folha.css), mas
  não funciona nos navegadores actuais

3
Uso de estilos

• lthtmlgt
• ltheadgt
• lttitlegtEstiloslt/titlegt
• ltlink relstylesheet href"estilogeral.css"
  type"text/css"gt
• ltlink relstylesheet href"estilotitulos.css"
  type"text/css"gt
• ltstylegt
• lt!-- / pinta de vermelho / H1 color
  red --gt
• lt/stylegt
• lt/headgt
• ltbodygt
• lth1 aligncentergtTítulo definido com CSSlt/h1gt
• ltp aligncentergtEis o
• lta href"e19Frames.html"gtdonolt/agt
• do carro.lt/pgt
• lth1 style"coloryellow font-stylenormal"gtTítulo
  definido localmentelt/h1gt
• ltpgtParágrafo à esquerda.lt/pgt
• lt/bodygt
• lt/htmlgt

/ estilogeral.css / H1 color blue
font-style normal
/ estilotitulos.css / H1 color green
font-style italic
4
Resultado
5
Elementos de sintaxe

• Forma básica
• marca prop1valor1 prop2valor2 valor3
• H1 font-style italic
• aplicar a várias marcas
• 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

6
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
• ltp classresumogtEste texto destina-selt/pgt
• classes genéricas aplicam-se a várias marcas
• .corrigido color red ltem
  classcorrigidogtnabissalt/emgt
• 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

7
Uso de classes

• lthtmlgtltheadgt
• lttitlegtEstiloslt/titlegt
• ltlink relstylesheet href"estilogeral.css"
  type"text/css"gt
• lt/headgt
• ltbodygt
• lth1gtAssociaçõeslt/h1gt
• ltp classresumogtEis o
• lta href"e19Frames.html"gtdonolt/agt
• do carro. Ele pertence a várias associações
  profissionais sem que no
• entanto tire daí grandes benefícios.lt/pgt
• ltp classequacaogtx a/2 0lt/pgt
• Há que repensar as respectivas funções e métodos
  de trabalho para
• ver se se consegue reverter a situação.
• ltp classcorrigidogtAs associações desportivas são
  normalmente mais
• participadas e os sócios empenham-se mais nas
  suas actividades.lt/pgt
• lt/bodygtlt/htmlgt

8
Resultado

• Estilo
• H1 color blue font-style normal
• P font-weightbold
• P.resumo font-style italic margin-left 0.5cm
  margin-right 0.5cm
• P.equacao font-family Symbol text-align
  center
• .corrigido color red

9
Propriedades nos estilos

• Grupos de propriedades definíveis
• fontes, cores e fundos, texto, caixas e
  disposição, listas, marcas
• http//www.w3.org/TR/REC-CSS1 tem a norma
  detalhada

10
Modelo de formatação
beira exterior esquerda
beira interior direita
beira interior esquerda
beira exterior direita
margem esquerda
margem direita
enchimento à direita
caixilho esquerdo
enchimento à esquerda
caixilho direito
topo
margem superior
caixilho superior
enchimento superior
topo interno
conteúdo
fundo interno
enchimento inferior
caixilho inferior
margem inferior
fundo