Você está na página 1de 92

HTML & CSS

Informtica / LECA

Marco Costa
Departamento de Cincia de Computadores Faculdade de Cincias, Universidade do Porto

2005 / 06

Marco Costa (DCC / FCUP)

HTML & CSS

2005 / 06

1 / 157

Contedo

Contedo
1

HTML Introduo Pginas bsicas Texto Listas Imagens Links Tabelas Outras tags CSS Introduo Seleco de elementos Propriedades de formatao Bibliograa
Marco Costa (DCC / FCUP) HTML & CSS 2005 / 06 2 / 157

HTML

HTML Introduo Pginas bsicas Texto Listas Imagens Links Tabelas Outras tags CSS Introduo Seleco de elementos Propriedades de formatao Bibliograa

Marco Costa (DCC / FCUP)

HTML & CSS

2005 / 06

3 / 157

HTML

Introduo

HTML Introduo Pginas bsicas Texto Listas Imagens Links Tabelas Outras tags CSS Introduo Seleco de elementos Propriedades de formatao Bibliograa

Marco Costa (DCC / FCUP)

HTML & CSS

2005 / 06

4 / 157

HTML

Introduo

HTML
HTML = HyperText Markup Language
Hyper porque no linear (pode-se navegar entre documentos HTML seguindo links) Text porque um documento HTML um cheiro de texto Markup porque usam-se marcas ou etiquetas no texto para indicar pargrafos, ttulos, listas, etc. Language porque uma linguagem

Ou seja. . .
HTML a linguagem utilizada para criar as pginas da Web Uma pgina corresponde a um cheiro de texto, que pode referenciar outros cheiros (por exemplo, imagens) Os cheiros HTML tm a extenso .html ou .htm
Marco Costa (DCC / FCUP) HTML & CSS 2005 / 06 5 / 157

HTML

Introduo

Tags
Denio
Um documento HTML formado por uma hierarquia de elementos (isto , elementos que contm outros) A cada tipo de elemento corresponde uma tag Por exemplo, aos pargrafos correspondem a tag p Para iniciar um pargrafo escreve-se <p>, e para naliz-lo, </p> (note-se o smbolo /) Exemplo de um pargrafo: <p>Isto um pargrafo</p> As tags podem conter atributos Exemplo de uma tag com dois atributos: <p class="topo" id="nada">Isto um pargrafo</p> As tags que no contm nada entre a abertura e o fecho podem ser abreviadas (por exemplo, <br/> em vez de <br></br>)
Marco Costa (DCC / FCUP) HTML & CSS 2005 / 06 6 / 157

HTML

Introduo

Browsers
O que um browser?
Um browser um programa utilizado para navegar na Web, isto , visualizar pginas e navegar entre elas

Exemplos de browsers
Internet Explorer Mozilla Firefox Konqueror Safari Opera

Marco Costa (DCC / FCUP)

HTML & CSS

2005 / 06

7 / 157

HTML

Introduo

Servidores Web

O que um servidor Web?


Um servidor Web um programa que disponibiliza um conjunto de pginas Web Um dos servidores Web mais utilizados o Apache A comunicao entre browsers e servidores feita com base nas regras especicadas no protocolo HTTP (HyperText Transfer Protocol)

Marco Costa (DCC / FCUP)

HTML & CSS

2005 / 06

8 / 157

HTML

Introduo

Endereos de pginas Web

Denio e exemplo
O endereo de uma pgina Web assume a forma de um URL (Uniform Resource Locator) Estes URLs podem ser divididos em trs partes: o protocolo, o endereo do servidor, e o endereo da pgina dentro do servidor Por exemplo, o endereo http://www.dcc.fc.up.pt/francisco indica o protocolo HTTP, o servidor www.dcc.fc.up.pt, e a pgina /francisco nesse servidor

Marco Costa (DCC / FCUP)

HTML & CSS

2005 / 06

9 / 157

HTML

Introduo

Modelo cliente servidor


Explicao
A Web funciona com base no modelo cliente-servidor: os browsers so os clientes (pedem as pginas) e so servidos pelos servidores Web (fornecem as pginas)

Exemplo
O Joo inicia o Internet Explorer e coloca o endereo http://www.dcc.fc.up.pt/francisco O browser contacta o servidor no endereo www.dcc.fc.up.pt e pede-lhe a pgina /francisco O servidor localiza a pgina e envia-a ao browser O browser recebe a pgina, interpreta-a e mostra-a ao Joo O Joo selecciona um dos links da pgina O browser contacta o servidor indicado no link, . . .
Marco Costa (DCC / FCUP) HTML & CSS 2005 / 06 10 / 157

HTML

Introduo

Histria da Web
Cronologia
Em 6 de Agosto de 1991, Tim Berners-Lee, o criador da Web, disponibilizou as primeiras pginas Web Em Setembro de 1993 foi criado o browser Mosaic, que contribuiu para aumentar a popularidade da Web Em 1993 foi criado o primeiro search engine, o Lycos Em 1994 foi fundado o World Wide Web Consortium (W3C), uma consrcio que cria normas e recomendaes relacionadas com a Web Em 1994 foi lanada a primeira verso do browser Netscape Em 1995 a Microsoft lanou o Internet Explorer Em 2002 foi lanada a primeira verso do Mozilla Firefox, um dos descendentes do Netscape Em 2005, a Yahoo anunciou que o seu search engine indexa mais de 20 mil milhes de pginas e imagens
Marco Costa (DCC / FCUP) HTML & CSS 2005 / 06 11 / 157

HTML

Pginas bsicas

HTML Introduo Pginas bsicas Texto Listas Imagens Links Tabelas Outras tags CSS Introduo Seleco de elementos Propriedades de formatao Bibliograa

Marco Costa (DCC / FCUP)

HTML & CSS

2005 / 06

12 / 157

HTML

Pginas bsicas

Exemplo de uma pgina bsica


Texto do cheiro HTML
<html> <head><title>Hello World</title></head> <body> <p>Hello world</p> </body> </html>

Elementos/tags que compem o documento HTML


A tag html indica um documento HTML; abre e fecha o documento A tag head indica o cabealho do documento A tag title indica o ttulo do documento, e deve aparecer na head A tag body indica o corpo do documento A tag p indica um pargrafo (o texto aparece entre <p> e </p>)
Marco Costa (DCC / FCUP) HTML & CSS 2005 / 06 14 / 157

HTML

Pginas bsicas

Algumas complicaes Verses


DTDs
Desde que foi criado, o HTML sofreu vrias alteraes Por isso, existem vrias verses do HTML Cada verso denida por um DTD (Document Type Denition) Vamos utilizar a verso XHTML 1.0 Transitional Devemos indicar no prprio documento HTML qual a verso utilizada Antes do elemento html escrevemos:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

E acrescentamos o atributo xmlns ao elemento html, cando:


<html xmlns="http://www.w3.org/1999/xhtml">

Marco Costa (DCC / FCUP)

HTML & CSS

2005 / 06

15 / 157

HTML

Pginas bsicas

Algumas complicaes Codicao de caracteres

Codicao de caracteres
Os documentos HTML podem ser escritos utilizando diferentes codicaes de caracteres Devemos indicar no documento qual a codicao utilizada Inclumos um elemento meta no cabealho do documento Se utilizarmos a codicao iso-8859-1, escrevemos: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>

Marco Costa (DCC / FCUP)

HTML & CSS

2005 / 06

16 / 157

HTML

Pginas bsicas

Algumas complicaes Resultado


Verso nal do documento apresentado anteriormente
<!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>Hello World</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> </head> <body> <p>Hello world</p> </body> </html>

Dica
Utilize este documento HTML como ponto de partida (copy-n-paste)
Marco Costa (DCC / FCUP) HTML & CSS 2005 / 06 18 / 157

HTML

Pginas bsicas

Validao de documentos HTML

O que ? Como se faz?


Os browsers no se costumam queixar dos erros contidos nos documentos HTML Por isso, os erros passam muitas vezes despercebidos Mas existem formas de validar os documentos Pode-se assim detectar a presena de erros e, mais importante, corrigi-los Por exemplo, utilizando o validador online disponvel no seguinte endereo: http://validator.w3.org/

Marco Costa (DCC / FCUP)

HTML & CSS

2005 / 06

19 / 157

HTML

Texto

HTML Introduo Pginas bsicas Texto Listas Imagens Links Tabelas Outras tags CSS Introduo Seleco de elementos Propriedades de formatao Bibliograa

Marco Costa (DCC / FCUP)

HTML & CSS

2005 / 06

20 / 157

HTML

Texto

Pargrafos

Funcionamento
A tag p dene um pargrafo A tag br dene uma quebra de linha (o pargrafo actual continua, mas na linha seguinte)

Notas
1 2

A tag br normalmente utilizado na forma abreviada No interessa quantos espaos se escreve entre as palavras; s considerado um deles

Marco Costa (DCC / FCUP)

HTML & CSS

2005 / 06

22 / 157

HTML

Texto

Pargrafos Exemplo
Exemplo
<p>Este o primeiro pargrafo.</p> <p>Este o segundo pargrafo. <br/> Isto tambm <br/> Exemplo pertence ao <br/> segundo pargrafo.</p>

Este o primeiro pargrafo. Este o primeiro pargrafo. Este o segundo pargrafo. Isto tambm pertence ao segundo pargrafo.

Marco Costa (DCC / FCUP)

HTML & CSS

2005 / 06

24 / 157

HTML

Texto

Ttulos

Funcionamento
As tags h1, h2 e h3 (e outras) denem ttulos h1 um ttulo mais importante que h2, que mais importante que h3

Marco Costa (DCC / FCUP)

HTML & CSS

2005 / 06

26 / 157

HTML

Texto

Exemplo

Ttulos Exemplo
Exemplo <h1>Introduo</h1> <p>Isto a introduo.</p> <h2>Objectivos</h2> <p>Aqui vou falar dos objectivos.</p> <h3>Objectivo A</h3> <p>O objectivo A ...</p>

Introduo
Isto a introduo.

Objectivos
Aqui vou falar dos objectivos.

Objectivo A
O objectivo A ...

Concluso
Marco Costa (DCC / FCUP) HTML & CSS 2005 / 06 28 / 157

HTML

Texto

Formatao de texto
Funcionamento
A tag b dene texto em negrito A tag i dene texto em itlico As tags sup e sub denem texto superior e inferior linha

Exemplo
<p><b>Negrito</b>, <i>itlico</i>, linha<sub>inferior</sub>, linha<sup>superior</sup></p>

Negrito, itlico, linhainferior, linhasuperior

Marco Costa (DCC / FCUP)

HTML & CSS

2005 / 06

30 / 157

HTML

Listas

HTML Introduo Pginas bsicas Texto Listas Imagens Links Tabelas Outras tags CSS Introduo Seleco de elementos Propriedades de formatao Bibliograa

Marco Costa (DCC / FCUP)

HTML & CSS

2005 / 06

31 / 157

HTML

Listas

Listas

Funcionamento
A tag ul dene uma lista no numerada A tag ol dene uma lista numerada A tag li dene um elemento de uma lista; deve ser includo dentro de uma lista (numerada ou no)

Marco Costa (DCC / FCUP)

HTML & CSS

2005 / 06

33 / 157

HTML

Listas

Listas Exemplo
Lista no numerada <p>Lista no numerada</p> <ul> <li>Um</li> <li>Dois</li> Exemplo <li>Trs</li> </ul> Lista numerada <p>Lista numerada</p> <ol> <li>Um</li> <li>Dois</li> <li>Trs</li> Exemplo </ol>

Lista no numerada Um Dois Trs

Lista numerada 1. Um 2. Dois 3. Trs

Marco Costa (DCC / FCUP)

HTML & CSS

2005 / 06

35 / 157

HTML

Listas

Listas multi-nvel
Funcionamento
Listas multi-nvel so listas dentro de listas Para criar uma lista dentro de outra lista, abre-se uma nova lista dentro de um elemento da lista anterior Podem-se misturar listas ordenadas com listas no ordenadas Exemplo Exemplo <p>Lista com dois nveis</p> <ul> <li>Nivel um <ul> <li>Nvel dois</li> </ul></li> <li>Nvel um</li> </ul>
Marco Costa (DCC / FCUP) HTML & CSS

Lista com dois nveis Nivel um Nvel dois Nvel um

2005 / 06

37 / 157

HTML

Imagens

HTML Introduo Pginas bsicas Texto Listas Imagens Links Tabelas Outras tags CSS Introduo Seleco de elementos Propriedades de formatao Bibliograa

Marco Costa (DCC / FCUP)

HTML & CSS

2005 / 06

38 / 157

HTML

Imagens

Imagens
Funcionamento
Para incluir uma imagem num documento HTML utiliza-se a tag img O atributo src utilizado para indicar a localizao da imagem, na forma de um URL O atributo alt deve ser utilizado para indicar uma descrio curta da imagem Essas descries so utilizadas em alternativa imagem, por exemplo, quando a pgina ouvida em vez de lida Os atributos width e height podem ser utilizados para indicar as dimenses da imagem (permitindo redimensionar a imagem) A tag img normalmente utilizada na forma abreviada

Marco Costa (DCC / FCUP)

HTML & CSS

2005 / 06

40 / 157

HTML

Imagens

Imagens Exemplo
Imagem local
<img src="fcup.png" alt="Logotipo da FCUP" />
Exemplo

Marco Costa (DCC / FCUP)

HTML & CSS

2005 / 06

42 / 157

HTML

Imagens

Imagens Exemplo
Imagem (remota e redimensionada)
<p>Bandeira de Portugal</p> <img src="http://www.crwflags.com/fotw/images/p/pt.gif" alt="Bandeira de Portugal" width="192" height="64" Exemplo />

Bandeira de Portugal

Marco Costa (DCC / FCUP)

HTML & CSS

2005 / 06

44 / 157

HTML

Links

HTML Introduo Pginas bsicas Texto Listas Imagens Links Tabelas Outras tags CSS Introduo Seleco de elementos Propriedades de formatao Bibliograa

Marco Costa (DCC / FCUP)

HTML & CSS

2005 / 06

45 / 157

HTML

Links

Links
Funcionamento
Um link, quando activado pelo utilizador, permite-lhe navegar para outra localizao (normalmente, outra pgina) Para criar um link utiliza-se a tag a, indicando-se no atributo href o URL destino O texto (ou outro contedo) que representa o link colocado dentro da tag a (entre <a> e </a>)

Exemplo
<p>A <a href="http://www.fc.up.pt/">FCUP</a> pertence Exemplo <a href="http://www.up.pt/">UP</a>.</p>

A FCUP pertence UP.


Marco Costa (DCC / FCUP) HTML & CSS 2005 / 06 47 / 157

HTML

Links

Links locais
Funcionamento
Um link local um link que aponta para uma localizao na pgina actual Quando o utilizador activa um link local, o browser avana ou recua (faz scroll) na pgina actual at que o local para onde o link aponta que visvel A tag a utilizada para criar os links e tambm para criar ancoras (stios para onde os links locais podem apontar) Para criar uma ancora utiliza-se a tag a, indicando-se com o atributo name o nome da ancora Para apontar para uma ancora utiliza-se tambm a tag a, indicando-se com o atributo href o nome da ancora para onde o link aponta (coloca-se # antes do nome)
Marco Costa (DCC / FCUP) HTML & CSS 2005 / 06 49 / 157

HTML

Links

Links locais Exemplo


Exemplo
<p> Link para o <a href="#segundo">segundo pargrafo</a>. </p> <p><a name="segundo"/>Segundo pargrafo.</p> Exemplo

Link para o segundo pargrafo. Segundo pargrafo.

Marco Costa (DCC / FCUP)

HTML & CSS

2005 / 06

51 / 157

HTML

Links

Links com imagens


Funcionamento
As imagens podem ser utilizadas para representar links Em vez de texto, coloca-se uma imagem entre <a> e </a> Nestas situaes um link activado quando a imagem clicada

Exemplo
<p>A <a href="http://www.fc.up.pt/"> <img src="fc-up.gif" alt="FCUP" height="48"/> </a> pertence <a href="http://www.up.pt/">UP</a>.</p>

A
Marco Costa (DCC / FCUP)

pertence UP.
HTML & CSS 2005 / 06 53 / 157

HTML

Tabelas

HTML Introduo Pginas bsicas Texto Listas Imagens Links Tabelas Outras tags CSS Introduo Seleco de elementos Propriedades de formatao Bibliograa

Marco Costa (DCC / FCUP)

HTML & CSS

2005 / 06

54 / 157

HTML

Tabelas

Tabelas
Funcionamento
As tabelas permitem organizar contedo de forma tabular A tag table cria uma tabela A tag tr cria uma linha numa tabela (dentro de table) A tag td cria uma clula (dentro de tr) A tag th cria uma clula ttulo, cujo texto normalmente mostrado centrado e a negrito (dentro de tr) Exemplo <table> <tr><th>Nome</th><th>Idade</th></tr> <tr><td>Joo</td><td>25</td></tr> <tr><td>Maria</td><td>47</td></tr> </table>
Marco Costa (DCC / FCUP) HTML & CSS

Nome Idade Joo 25 Maria 47

2005 / 06

56 / 157

HTML

Tabelas

Tabelas com limites


Funcionamento
O atributo border permite indicar se uma tabela deve ou no incluir limites (borders) Por defeito as tabelas no possuem limites Exemplo <table border="1"> <tr><th>Nome</th><th>Idade</th></tr> <tr><td>Joo</td><td>25</td></tr> <tr><td>Maria</td><td>47</td></tr> </table>

Nome Idade Joo 25 Maria 47

Marco Costa (DCC / FCUP)

HTML & CSS

2005 / 06

58 / 157

HTML

Tabelas

Clulas que abrangem vrias linhas/colunas


Funcionamento
Os atributos rowspan e colspan permitem criar clulas que abrangem mais do que uma linha e/ou coluna Por defeito, cada clula abrange apenas uma linha e uma coluna Exemplo <table border="1"> <tr><th colspan="2">Dados</th></tr> <tr><th>Nome</th><th>Idade</th></tr> <tr><td>Joo</td><td>25</td></tr> <tr><td>Maria</td><td>47</td></tr> </table>

Dados Nome Idade Joo 25 Maria 47

Marco Costa (DCC / FCUP)

HTML & CSS

2005 / 06

60 / 157

HTML

Tabelas

Tabelas com legendas

Funcionamento
A tag caption pode ser utilizada para atribuir uma legenda a uma tabela Exemplo <table border="1"> <caption>Legenda</caption> <tr><th>Nome</th><th>Idade</th></tr> <tr><td>Joo</td><td>25</td></tr> <tr><td>Maria</td><td>47</td></tr> </table>

Legenda Nome Idade Joo 25 Maria 47

Marco Costa (DCC / FCUP)

HTML & CSS

2005 / 06

62 / 157

HTML

Outras tags

HTML Introduo Pginas bsicas Texto Listas Imagens Links Tabelas Outras tags CSS Introduo Seleco de elementos Propriedades de formatao Bibliograa

Marco Costa (DCC / FCUP)

HTML & CSS

2005 / 06

63 / 157

HTML

Outras tags

Tag div
Funcionamento
A tag div permite criar elementos que dividem o documento HTML em blocos Cada bloco pode incorporar vrios pargrafos, imagens, tabelas, etc. S por si, no tem nenhum efeito na forma como o browser mostra o documento A utilidade de dividir o documento em blocos est em poder atribuir diferentes estilos a cada bloco (como se ver mais adiante) Exemplo <div> <p>Parte 1</p> </div> <div><p>Parte 2</p></div>
Marco Costa (DCC / FCUP) HTML & CSS

Parte 1 Parte 2

2005 / 06

65 / 157

HTML

Outras tags

Tag span
Funcionamento
A tag span utilizada para criar um sub-elemento a partir de parte do contedo de outro elemento (por exemplo, parte do texto de um pargrafo) S por si, no tem nenhum efeito na forma como o browser mostra o documento Exemplo Mas pode-se aplicar um estilo ao sub-elemento span diferente do estilo do resto do elemento Exemplo <h1>Dia <span>25</span></h1> <p>Vai <span>chover</span>.</p>

Dia 25
Vai chover.
2005 / 06 67 / 157

Marco Costa (DCC / FCUP)

HTML & CSS

HTML

Outras tags

Tag hr

Funcionamento
A tag hr permite criar uma barra horizontal Normalmente, estas barras so utilizadas como separadores, e so escritas na forma abreviada (<hr/>) Exemplo <p>Parte 1</p> <hr/> <p>Parte 2</p>

Parte 1 Parte 2

Marco Costa (DCC / FCUP)

HTML & CSS

2005 / 06

69 / 157

CSS

HTML Introduo Pginas bsicas Texto Listas Imagens Links Tabelas Outras tags CSS Introduo Seleco de elementos Propriedades de formatao Bibliograa

Marco Costa (DCC / FCUP)

HTML & CSS

2005 / 06

70 / 157

CSS

Introduo

HTML Introduo Pginas bsicas Texto Listas Imagens Links Tabelas Outras tags CSS Introduo Seleco de elementos Propriedades de formatao Bibliograa

Marco Costa (DCC / FCUP)

HTML & CSS

2005 / 06

71 / 157

CSS

Introduo

CSS Cascading Style Sheets


O que so folhas de estilo?
Uma folha de estilos, ou style sheet, formada por um conjunto de regras que indicam ao browser como deve apresentar um documento Cada regra formada por um selector e um estilo O selector indica a que elementos que o estilo deve ser aplicado O estilo especicado atribuindo valores a um conjunto de propriedades que se aplicam aos elementos a estilar

Exemplo de uma folha de estilos


/* Comentrio: elementos h1 com letra extra-grande, a vermelho, e elementos h2 com letra grande, a azul */ h1 { font-size: x-large; color: red } h2 { font-size: large; color: blue }
Marco Costa (DCC / FCUP) HTML & CSS 2005 / 06 73 / 157

CSS

Introduo

Aplicao de folhas de estilo a documentos HTML

Formas de aplicar uma folha de estilos


1

A folha de estilos escrita directamente no documento HTML, dentro de um elemento style, no cabealho do documento A folha de estilos escrita num cheiro (com extenso .css) e feita uma ligao a esse cheiro a partir de um elemento link no cabealho do documento HTML

Marco Costa (DCC / FCUP)

HTML & CSS

2005 / 06

75 / 157

CSS

Introduo

Exemplo: folha de estilos no documento HTML

Ficheiro HTML
... <head> ... <style type="text/css"> h1 { font-size: x-large; color: red } h2 { font-size: large; color: blue } </style> ... </head> ...

Marco Costa (DCC / FCUP)

HTML & CSS

2005 / 06

77 / 157

CSS

Introduo

Exemplo: folha de estilos num cheiro .css


Ficheiro HTML
... <head> ... <link media="all" href="styles.css" rel="stylesheet" type="text/css"/> ... </head> ...

Ficheiro styles.css
h1 { font-size: x-large; color: red } h2 { font-size: large; color: blue }
Marco Costa (DCC / FCUP) HTML & CSS 2005 / 06 79 / 157

CSS

Introduo

Herana de estilos

Descrio
A maioria da formatao aplicada a um elemento herdada pelos seus descendentes Por exemplo, se for atribudo um valor propriedade color no elemento body, ento esse valor vai ser aplicado nos pargrafos, e no texto dos outros elementos descendentes do elemento body Existem excepes regra; por exemplo, as margens denidas no elemento body no so herdadas pelos pargrafos

Marco Costa (DCC / FCUP)

HTML & CSS

2005 / 06

80 / 157

CSS

Introduo

Conitos e prioridades

Prioridades
As regras especicadas nas folhas de estilo podem entrar em conito quanto formatao a aplicar a alguns elementos Por exemplo, a um pargrafo de classe nota pode ser aplicada formatao seleccionada por se tratar de um pargrafo (selector: p) ou por ser um pargrafo de classe nota (selector: p.nota) Os conitos so resolvidos de acordo com certas regras, que incluem:
1

As regras mais especcas prevalecem sobre as mais gerais; no exemplo anterior, prevaleceria a regra com o selector p.nota Entre duas regras com a mesma especicidade dada prioridade que vem em ltimo lugar

Marco Costa (DCC / FCUP)

HTML & CSS

2005 / 06

81 / 157

CSS

Seleco de elementos

HTML Introduo Pginas bsicas Texto Listas Imagens Links Tabelas Outras tags CSS Introduo Seleco de elementos Propriedades de formatao Bibliograa

Marco Costa (DCC / FCUP)

HTML & CSS

2005 / 06

82 / 157

CSS

Seleco de elementos

Selectores
Tipos de selectores
Os selectores utilizados nas regras de formatao podem seleccionar elementos de vrias formas, entre elas:
1 2 3 4

Pela tag dos elementos Pelo atributo class dos elementos Por pseudo-elemento ou pseudo-classe Por um contexto formado por vrios selectores

Agrupamento de selectores
Para diminuir as repeties, possvel agrupar selectores e declaraes Por exemplo, para aplicar uma formatao igual aos elementos h1, h2 e h3, escreve-se: h1, h2, h3 { font-family: Arial; color: blue }
Marco Costa (DCC / FCUP) HTML & CSS 2005 / 06 84 / 157

CSS

Seleco de elementos

Seleco por tag


Funcionamento
A seleco de elementos por tag feita indicando as tags dos elementos a seleccionar

Exemplo: Seleco de todos os pargrafos


p { color: blue }

Exemplo: Seleco de texto a itlico


it { color: red }

Exemplo: Seleco dos ttulos h1 e h2


h1, h2 { font-weight: bold }

Marco Costa (DCC / FCUP)

HTML & CSS

2005 / 06

86 / 157

CSS

Seleco de elementos

Seleco pelo atributo class

Funcionamento
O atributo class um atributo especial que pode ser utilizado em qualquer elemento A um nico elemento podem ser atribudas vrias classes (no mesmo atributo, separadas por espaos) Pode-se assim ser aplicar vrias regras de formatao, cada uma delas seleccionada com base numa classe

Marco Costa (DCC / FCUP)

HTML & CSS

2005 / 06

88 / 157

CSS

Seleco de elementos

Seleco pelo atributo class Exemplo I

HTML
<p class="fundo">Alerta</p>

CSS
/* fundo amarelo nos pargrafosfile:///c:/aaa/Aulas/Inf/html/p18... com classe fundo */ Exemplo p.fundo { background-color: yellow }

Alerta

Marco Costa (DCC / FCUP)

HTML & CSS

2005 / 06

90 / 157

CSS

Seleco de elementos

Seleco pelo atributo class Exemplo II


HTML
<p>Isto <b>importante</b></p> <p>Isto <span class="vermelho">importante</span></p> <p class="vermelho">Isto importante</p>

CSS
/* O texto bold aparece a vermelho */ Exemplo /* O texto dos elementos com classe vermelho tambm */ b, .vermelho { color: red }

Isto importante Isto importante Isto importante


Marco Costa (DCC / FCUP) HTML & CSS 2005 / 06 92 / 157

CSS

Seleco de elementos

Seleco pelo atributo class Exemplo III


HTML
<p class="fundo vermelho">Este texto <span class="nota">aparece</span> com fundo amarelo e texto vermelho</p>

CSS
.nota { font-style: italic; font-size: 16pt } Exemplo .fundo { background-color: yellow } .vermelho { color: red }

Este texto aparece com fundo amarelo e texto vermelho

Marco Costa (DCC / FCUP)

HTML & CSS

2005 / 06

94 / 157

CSS

Seleco de elementos

Seleco pelo atributo class Exemplo I

HTML
<p class="fundo">Alerta</p>

CSS
/* fundo amarelo nos pargrafosfile:///c:/aaa/Aulas/Inf/html/p18... com classe fundo */ Exemplo p.fundo { background-color: yellow }

Alerta

Marco Costa (DCC / FCUP)

HTML & CSS

2005 / 06

96 / 157

CSS

Seleco de elementos

Seleco por pseudo-elemento ou pseudo-classe


O que so?
As pseudo-classes e os pseudo-elementos so classes e elementos especiais que podem ser utilizados nos selectores As pseudo-classes permitem distinguir entre diferentes estados dos elementos; so utilizados, por exemplo, para distinguir links j visitados de links ainda no visitados Os pseudo-elementos referem-se a sub-partes de elementos; por exemplo, primeira letra de um pargrafo

Como so utilizados?
O nome da pseudo-classe ou do pseudo elemento acrescentado ao selector, separado por dois pontos Por exemplo, o selector a:visited selecciona os links que j foram visitados
Marco Costa (DCC / FCUP) HTML & CSS 2005 / 06 98 / 157

CSS

Seleco de elementos

Pseudo-classes do elemento a
Referncia
link Refere-se ainda no visitados active Refere-se a links activos (links em que se est a clicar) visited Refere-se a links j visitados hover Refere-se a links que tm o ponteiro do rato por cima

Exemplos
/* Pelas regras da prioridade, um link activo que j tenha sido visitado aparece a azul, e no a verde */ a:link a:visited a:active a:hover { { { { color: color: color: color: red } green; font-size: 85% } blue; font-size: 125% } #000; font-size: 125% }
HTML & CSS 2005 / 06 100 / 157

Marco Costa (DCC / FCUP)

CSS

Seleco de elementos

Pseudo-elementos first-letter e first-line

Referncia
first-line Refere-se primeira linha de texto do elemento first-letter Refere-se primeira letra de texto do elemento

Exemplos
/* A primeira linha aparece a negrito e a primeira letra aparece maior */ p:first-line { font-weight: bold } p:first-letter { font-size: 300% }

Marco Costa (DCC / FCUP)

HTML & CSS

2005 / 06

102 / 157

CSS

Seleco de elementos

Seleco por contexto


Funcionamento
A seleco de elementos por contexto feita indicando vrios selectores separados por espaos Esses selectores indicam uma hierarquia Para um elemento ser seleccionado, deve pertencer a uma hierarquia compatvel com a indicada no selector

Exemplo I
/* elementos it pertencentes a pargrafos */ p it { color: red }

Exemplo II
/* elementos com classe nota pertencentes a ttulos h1 */ h1 .nota { color: blue }
Marco Costa (DCC / FCUP) HTML & CSS 2005 / 06 104 / 157

CSS

Propriedades de formatao

HTML Introduo Pginas bsicas Texto Listas Imagens Links Tabelas Outras tags CSS Introduo Seleco de elementos Propriedades de formatao Bibliograa

Marco Costa (DCC / FCUP)

HTML & CSS

2005 / 06

105 / 157

CSS

Propriedades de formatao

Tamanhos e unidades de medida


Tamanhos
Um valor de tamanho formado por um - ou + opcional, seguido por um nmero e duas letras que indicam a unidade de medida utilizada (sem espaos entre o nmero e a unidade). Unidadas relativas 1em a altura normal dos caracteres 1ex a altura da letra x 1px um pixel Unidadas absolutas 1in uma polegada, e 1in=2.54cm 1cm um centmetro 1mm milmetro 1pt um ponto, e 1pt=1/72in 1pc um pica, e 1pc=12pt
Marco Costa (DCC / FCUP) HTML & CSS 2005 / 06 107 / 157

CSS

Propriedades de formatao

Propriedade font-family
Funcionamento
Indica a fonte a ser utilizada (tipo de letra) Pode-se indicar mais do que uma fonte; o browser comea pela esquerda at encontrar uma que possa utilizar

Valores possveis
O nome de uma fonte (por exemplo, Arial, ou "Times New Roman") Uma categoria de fontes (por exemplo, serif, sans-serif, ou monospace)

Exemplos
h1 { font-family: sans-serif } p { font-family: "New Century Schoolbook", Times, serif }
Marco Costa (DCC / FCUP) HTML & CSS 2005 / 06 109 / 157

CSS

Propriedades de formatao

Propriedade font-style

Funcionamento
Indica se o texto deve ser itlico, oblquo, ou normal

Valores possveis
normal, italic ou oblique O valor por defeito normal

Exemplos
h3 { font-style: italic }

Marco Costa (DCC / FCUP)

HTML & CSS

2005 / 06

111 / 157

CSS

Propriedades de formatao

Propriedade font-weight

Funcionamento
Indica se o texto deve ser mais claro ou mais escuro (negrito)

Alguns valores possveis


normal, bold, bolder ou lighter

Exemplos
h1 { font-weight: bold } p { font-weight: normal }

Marco Costa (DCC / FCUP)

HTML & CSS

2005 / 06

113 / 157

CSS

Propriedades de formatao

Propriedade font-size
Funcionamento
Indica o tamanho do texto (dos caracteres)

Alguns valores possveis


Um dos valores xx-small, x-small, small, medium, large, x-large ou xx-large Um tamanho ou uma percentagem A percentagem em relao ao tamanho do texto no elemento-pai

Exemplos
h1 { font-size: xx-large } p { font-size: 12pt }

Marco Costa (DCC / FCUP)

HTML & CSS

2005 / 06

115 / 157

CSS

Propriedades de formatao

Propriedade color
Funcionamento
Indica a cor dos elementos (por exemplo, do texto)

Alguns valores possveis


Uma da seguintes cores, identicadas por nome: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white ou yellow Uma cor em formato rgb: #rrggbb ou #rgb

Exemplos
h1 { color: olive } p.nota { color: #fff800 } b { color: #000 }
Marco Costa (DCC / FCUP) HTML & CSS 2005 / 06 117 / 157

CSS

Propriedades de formatao

Propriedade background-color
Funcionamento
Indica a cor de fundo dos elementos

Valores possveis
O valor transparent, mais os valores possveis para a propriedade color O valor por defeito transparent

Exemplos
h1 { background-color: transparent } p.nota { background-color: #ccc }

Marco Costa (DCC / FCUP)

HTML & CSS

2005 / 06

119 / 157

CSS

Propriedades de formatao

Propriedade background-image

Funcionamento
Indica a imagem de fundo dos elementos

Valores possveis
O URL de uma imagem

Exemplos
body { background-image: url(/images/foo.gif) } p { background-image: url(http://www.htmlhelp.com/bg.png) }

Marco Costa (DCC / FCUP)

HTML & CSS

2005 / 06

121 / 157

CSS

Propriedades de formatao

Propriedade background-repeat
Funcionamento
Indica como uma imagem de fundo repetida

Valores possveis
Um dos seguintes valores: repeat, repeat-x, repeat-y ou no-repeat O valor por defeito repeat

Exemplos
body { background-repeat: repeat-x } table { background-repeat: repeat }

Marco Costa (DCC / FCUP)

HTML & CSS

2005 / 06

123 / 157

CSS

Propriedades de formatao

Propriedade text-decoration
Funcionamento
Indica como que o texto deve ser decorado

Valores possveis
O valor none, ou uma combinao dos seguintes valores: underline, overline, line-through e blink O valor por defeito none

Exemplos
.nota { text-decoration: blink } .apagado { text-decoration: line-through }

Marco Costa (DCC / FCUP)

HTML & CSS

2005 / 06

125 / 157

CSS

Propriedades de formatao

Propriedade vertical-align
Funcionamento
Indica o alinhamento vertical de um sub-elemento em relao

Alguns valores possveis


Um dos seguintes valores: baseline, sub, super, top, text-top, middle, bottom ou text-bottom Um valor numrico indicado em percentagem O valor por defeito baseline

Exemplos
img.meio { vertical-align: middle } img { vertical-align: 50% } .expoente { vertical-align: super }
Marco Costa (DCC / FCUP) HTML & CSS 2005 / 06 127 / 157

CSS

Propriedades de formatao

Propriedade text-align

Funcionamento
Indica como que o texto deve ser alinhado (na horizontal)

Alguns valores possveis


Um dos seguintes valores: left, right, center ou justify

Exemplos
h1 { text-align: center } p.nota { text-align: justify }

Marco Costa (DCC / FCUP)

HTML & CSS

2005 / 06

129 / 157

CSS

Propriedades de formatao

Propriedade text-indent
Funcionamento
Indica o avano da primeira linha de texto do elemento

Valores possveis
Uma percentagem ou um tamanho A percentagem em relao largura do elemento-pai O valor por defeito 0pt

Exemplos
/* avanar a primeira linha dos pargrafos */ p { text-indent: 5em }

Marco Costa (DCC / FCUP)

HTML & CSS

2005 / 06

131 / 157

CSS

Propriedades de formatao

Propriedade text-transform
Funcionamento
Indica se o texto do elemento deve ser convertido para maisculas (todo ou s a primeira letra de cada palavra) ou para minsculas

Valores possveis
Um dos seguintes valores: none, capitalize, uppercase ou lowercase O valor por defeito none

Exemplos
h1 { text-transform: uppercase } h2 { text-transform: capitalize }

Marco Costa (DCC / FCUP)

HTML & CSS

2005 / 06

133 / 157

CSS

Propriedades de formatao

Propriedade line-height
Funcionamento
Indica a altura das linhas de texto

Valores possveis
O valor normal, um valor numrico sem unidades, um tamanho (valor numrico com unidades) ou uma percentagem O valor por defeito normal Se o valor numrico no tiver unidades, ento a altura da linha ser a sua altura normal, multiplicada pelo valor indicado A percentagem em relao altura normal da linha

Exemplos
/* texto com espaamento de duas linhas */ p { line-height: 200% }
Marco Costa (DCC / FCUP) HTML & CSS 2005 / 06 135 / 157

CSS

Propriedades de formatao

Propriedades margin-top, margin-bottom, margin-left, margin-right e margin


Funcionamento
Tamanho de uma ou todas as margens do elemento (com margin) Na propriedade margin a ordem top-right-bottom-left; indicando-se um s valor, as margens so todas iguais; indicando-se mais, as margens em falta so iguais s dos lados opostos

Valores possveis
Um tamanho (0 por defeito), uma percentagem (em relao largura do elemento-pai), ou o valor auto

Exemplos
body { margin: 5em } /* todas iguais */ p { margin: 2em 4em } /* top/bottom 2em, left/right 4em */
Marco Costa (DCC / FCUP) HTML & CSS 2005 / 06 137 / 157

CSS

Propriedades de formatao

Propriedades padding-top, padding-bottom, padding-left, padding-right e padding


Funcionamento
Tamanho do espao entre a margem do elemento e o seu contedo Na propriedade padding aplicam-se as mesmas regras da propriedade margin

Valores possveis
Um tamanho (0 por defeito), ou uma percentagem (em relao largura do elemento-pai)

Exemplos
body { padding: 10px } /* igual nos 4 lados */ span.nota { padding-top: 2em; padding-bottom: 1em }
Marco Costa (DCC / FCUP) HTML & CSS 2005 / 06 139 / 157

CSS

Propriedades de formatao

Propriedades border-top-width, border-bottom-width, border-left-width, border-right-width e border-width


Funcionamento
Tamanho dos limites (borders) do elemento Na propriedade border-width aplicam-se as mesmas regras da propriedade margin

Valores possveis
Um dos seguintes valores: thin, medium ou tick Um tamanho

Exemplos
h1 { border-width: 2px } p { border-width: 2px 4px }
Marco Costa (DCC / FCUP) HTML & CSS 2005 / 06 141 / 157

CSS

Propriedades de formatao

Propriedade border-color
Funcionamento
Indica as cores utilizadas nos limites (borders) do elemento Podem-se indicar entre uma e quatro cores, aplicando-se as mesmas regras da propriedade margin

Valores possveis
Uma a quatro cores, identicadas por nome ou por rgb

Exemplos
h1 { border-color: red } p { border-color: #ccc }

Marco Costa (DCC / FCUP)

HTML & CSS

2005 / 06

143 / 157

CSS

Propriedades de formatao

Propriedade border-style
Funcionamento
Indica o estilo dos limites (borders) do elemento (slido, tracejado, pontos, etc.) Podem-se indicar entre um e quatro valores, aplicando-se as mesmas regras da propriedade margin

Valores possveis
Um a quatro valores de entre os valores possveis: none, dotted, dashed, solid, double, groove, ridge, inset e outset

Exemplos
h1 { border-style: dotted } p { border-style: solid }
Marco Costa (DCC / FCUP) HTML & CSS 2005 / 06 145 / 157

CSS

Propriedades de formatao

Propriedades border-top, border-bottom, border-left e border-right

Funcionamento
Permitem indicar ao mesmo tempo a largura, estilo e cor de um dos limites do elemento A ordem width-style-color

Exemplos
h1 { border-bottom: 1px solid black } p { border-left: 1mm dotted red }

Marco Costa (DCC / FCUP)

HTML & CSS

2005 / 06

147 / 157

CSS

Propriedades de formatao

Propriedade border

Funcionamento
Permitem indicar ao mesmo tempo a largura, estilo e cor de todos os limites do elemento Os limites sero iguais nos quatro lados A ordem width-style-color

Exemplos
h1 { border: 1px solid black } p { border: 1mm dotted red }

Marco Costa (DCC / FCUP)

HTML & CSS

2005 / 06

149 / 157

CSS

Propriedades de formatao

Propriedades width e height

Funcionamento
Indicam a largura e a altura do elemento (no aplicvel a todos os elementos)

Valores possveis
Um tamanho, uma percentagem (s para width, e em relao largura do elemento-pai), ou o valor auto (o valor por defeito)

Exemplos
.nota { width: 10em }

Marco Costa (DCC / FCUP)

HTML & CSS

2005 / 06

151 / 157

CSS

Propriedades de formatao

Propriedades float e clear


Funcionamento
A propriedade float indica que o elemento utuante, isto , que pode ser rodeado pelo texto de outros elementos A propriedade clear indica em que lados que o elemento no pode ser rodeado por elementos utuantes

Valores possveis
Propriedade float: um dos valores left, right ou none (valor por defeito) Propriedade clear: um dos valores left, right, both ou none (valor por defeito)

Exemplos
.nota { float: left; width: 5cm; clear: left }
Marco Costa (DCC / FCUP) HTML & CSS 2005 / 06 153 / 157

CSS

Propriedades de formatao

Propriedade display

Funcionamento
Indica como deve ser visualizado o elemento: block Como um bloco, com quebras de linha antes e depois inline Sem quebras de linha item-list Como elemento de uma lista, com quebras de linha antes e depois none O elemento e os seus descendentes no so mostrados

Exemplos
.esconder { display: none }

Marco Costa (DCC / FCUP)

HTML & CSS

2005 / 06

155 / 157

Bibliograa

HTML Introduo Pginas bsicas Texto Listas Imagens Links Tabelas Outras tags CSS Introduo Seleco de elementos Propriedades de formatao Bibliograa

Marco Costa (DCC / FCUP)

HTML & CSS

2005 / 06

156 / 157