unidade 4 – concepção de web sites. subunidade 2 ... · cascading style sheets cascading style...

- - - - - 1 - - - - -Paula Cardoso Alcobia

Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano

Esco

la S

ecun

dária

S. J

oão

do E

stor

il

Unidade 4 – Concepção de web sites.Unidade 4 – Concepção de web sites.Unidade 4 – Concepção de web sites.Unidade 4 – Concepção de web sites.Unidade 4 – Concepção de web sites.

Subunidade 2 - Construção de páginas Subunidade 2 - Construção de páginas Subunidade 2 - Construção de páginas Subunidade 2 - Construção de páginas Subunidade 2 - Construção de páginas webwebwebwebweb

-Introdução às Cascaded Style Sheets (CSS)

ooooo Vantagens e desvantagens no uso de folhas de estilo

ooooo Definição de estilos

ooooo Sintaxe usada nas folhas de estilo

ooooo Identificadores e classes

ooooo Definições do fundo de um elemento – propriedades da classe Background

ooooo Formatação de texto

ooooo Limites

o o o o o Margens

ooooo Listas

ooooo Dimensionamento de elementos – Dimension

ooooo Alinhamento relativo de elementos na página – propriedades de Classification

o o o o o Posicionamento e forma de elementos na página – Positioning

o o o o o Unidades de medida

o o o o o Pseudo-classes

o o o o o Pseudo-elementos

o o o o o Bibliografia



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

O que é?O que é?O que é?O que é?O que é?

Cascading Style SheetsCascading Style SheetsCascading Style SheetsCascading Style SheetsCascading Style Sheets (F(F(F(F(Folhas de Estilo em cascata) olhas de Estilo em cascata) olhas de Estilo em cascata) olhas de Estilo em cascata) olhas de Estilo em cascata) ou CSSCSSCSSCSSCSS são estilos parapáginas web e envolvem um conceito inovador: possibilitam a mudança daaparência simultânea de todas as páginas relacionadas com o mesmo estilo.

Ao invés de colocar a formatação dentro do código, o programador cria um link(ligação) para uma página que contém os estilos, procedendo de forma idênticapara todas as páginas de um portal. Quando quiser alterar a aparência do portalbasta portanto modificar apenas um ficheiro.

Esta tecnologia apareceu em 1996 e foi padronizada pela World Wide WebConsortium (a entidade que define os padrões da web), e que não é parte do HTMLpadrão, mas sim um conjunto de novas tagstagstagstagstags que ajudam a ter um melhor controlesobre o layout (aparência) das nossas páginas.

O CSS é suportado pelos browsers Microsoft Internet Explorer e Netscape Navigator,nas versões 4 ou posteriores; e pelo Opera, nas versões 3.50 ou posteriores.

Vantagens e desvantagens no uso de folhas de estiloVantagens e desvantagens no uso de folhas de estiloVantagens e desvantagens no uso de folhas de estiloVantagens e desvantagens no uso de folhas de estiloVantagens e desvantagens no uso de folhas de estilo

Vantagens:Vantagens:Vantagens:Vantagens:Vantagens:

* Os estilos CSS foram adicionados pelo W3C às recomendação HTML 4 eXHTML para resolver problemas muito sérios que afectavam a qualidade daspáginas escritas em HTML e dificultavam a sua manutenção.

* A utilização de folhas de estilos externas permite poupar tempo, ganharflexibilidade e aumentar a consistência das páginas que constituem um website.

* Quando guardamos os estilos num ficheiro externo e os aplicamos a todas aspáginas de um website, a modificação de diversas qualidades do aspecto gráficopassa a ser uma tarefa fácil.

* As páginas que usam estilos CSS, para além de serem mais fáceis de escrever,são também mais leves e aparecem mais depressa no browser.

desvantagens:desvantagens:desvantagens:desvantagens:desvantagens:

A desvantagem é em relação aos browsers que podem não implementar de formacompleta as CSS, e desta forma convém garantir que o documento não se torneilegível devido à implementação de recursos a funcionalidades demasiadoavançadas.



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

Limitações dos browsers actuaisLimitações dos browsers actuaisLimitações dos browsers actuaisLimitações dos browsers actuaisLimitações dos browsers actuais

Apesar de os browsers actuais (Netscape 7/Mozilla, MSIE 5 e superior, Opera 7)oferecerem um bom suporte para os estilos CSS, é preciso chamar a atenção para ofacto de ainda subsistirem alguns problemas quando aplicamos técnicas avançadasde formatação baseada em CSS.

Os problemas mais graves são causados pelo MSIE, que contém bugs que lhe dãoalguns comportamentos que se desviam dos padrões CSS. O bug mais grave resultada implementação errada do modelo de dimensionamento dos elementos. Esse bugé bem conhecido e pode quase sempre ser ultrapassado recorrendo a truques quenão comprometem o funcionamento das páginas nos restantes browsers.

Para além deste bug e de outros bugs menos importantes devemos ter sempre ematenção o facto de as implementações dos padrões CSS serem geralmenteincompletas. Isto significa que não podemos contar com algumas propriedades.Apesar disso podemos estar seguros de que as propriedades com que podemoscontar são suficientemente úteis para não querermos passar sem elas.

As limitações associadas ao suporte que os browsers actuais oferecem têm de estarsempre presentes na mente do criador de páginas baseadas em CSS. Se usarapenas as funcionalidades que são bem suportadas, que já são muitas, não serápreciso tomar muitas precauções. Se decidiu utilizar funcionalidades maisavançadas definidas pelos padrões CSS lembre-se que é preciso testar tudo deforma exaustiva em todos os browsers relevantes para não ter surpresasdesagradáveis.

Definição de estilosDefinição de estilosDefinição de estilosDefinição de estilosDefinição de estilos

Existem 4 maneiras de incluirmos estilos CSS às páginas:

1. Incluir um style sheet no ficheiro HTML (interno).

2. Criar um link para um style sheet noutro ficheiro (externo).

3. Importar um style sheet doutro ficheiro.

4. Adicionar estilos dentro dos comandos do arquivo HTML (local).

1- Incluir um style sheet no arquivo HTML1- Incluir um style sheet no arquivo HTML1- Incluir um style sheet no arquivo HTML1- Incluir um style sheet no arquivo HTML1- Incluir um style sheet no arquivo HTML

Neste método, o código do style sheet é incluído dentro do código da própriapágina, no começo do ficheiro, antes do corpo (<BODY>) do código HTML.



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

Por exemplo:

<HTML><STYLE TYPE=”text/css”>

<!—H1 {font-family:impact; background: yellow;color:red}P {color: green}—>

</STYLE><HEAD>

<TITLE>Mais um Exemplo se Style Sheet</TITLE></HEAD><BODY>

<H1>Neste exemplo, estou começando a dominar</H1><P>O Cascading Style Sheets</P>

</BODY>

Quando o style sheet é incluído desta forma, as definições colocadas ali, valempara toda a extensão do ficheiro HTML. Este é o método mais apropriado quandoqueremos incluir style sheets numa página de cada vez.

O atributo TYPE=”text/css” significa que se trata de um tipo MIME, para que osbrowsers que não suportam CSS ignorem o código. Mas alguns browsers maisantigos como IE 2.0 para Mac, não reconhecem o atributoTYPE=”text/css” e vãomostrar o código CSS como se fosse texto normal, daí ser importante colocar astags de comentário (<!— e —>) para isso não acontecer e ser ignorado pelobrowser.

2- Criar um link para um style sheet em outro arquivo (externo)2- Criar um link para um style sheet em outro arquivo (externo)2- Criar um link para um style sheet em outro arquivo (externo)2- Criar um link para um style sheet em outro arquivo (externo)2- Criar um link para um style sheet em outro arquivo (externo)

Uma folha de estilos externa constitui a melhor opção quando os mesmos estilossão aplicados a várias páginas. Com uma folha de estilos externa podemos alteraro aspecto gráfico de muitas páginas bastando para isso alterar apenas o ficheiroem que estão definidos os estilos. Cada página contém um elemento <link> que aliga à folha de estilos.

Para criar um link, deve-se substituir a tag <STYLE> pela tag <LINK>, e colocar adeclaração de estilo dentro da tag <HEAD> do documento. E neste método, não énecessário usar as tags de comentário.

Exemplo:

<head>

<link rel="stylesheet" type="text/css" href="estilos.css">

</head>



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

3-3-3-3-3- Importar um style sheet de outro arquivoImportar um style sheet de outro arquivoImportar um style sheet de outro arquivoImportar um style sheet de outro arquivoImportar um style sheet de outro arquivo

A importação de um estilo externo é parecida com o método anterior. A diferença éque não pode combinar o método de link com outros métodos de inserções deestilos, mas a importação pode ser combinada.

Exemplo:

<HTML><STYLE TYPE=”text/css”><!—

@import url(def_estilos.css)P {color: red}

—></STYLE><HEAD>


<H1>Neste exemplo, estou começando a dominar</H1><P>O Cascading Style Sheets</P>

</BODY>

No exemplo acima, o browser importa primeiro as definições no ficheiro .css, eadiciona as regras internas para serem usadas por toda a página. Mas o P tem umaregra tanto no ficherio externo como nos estilos embutidos. Neste caso, serásempre usado o estilo embutido, em detrimento da definição externa. O resultadoseria que o texto que estiver dentro das tags P, seriam mostrada em vermelho.

ObsObsObsObsObs.: apenas o browser IE4 suporta importação.

4-4-4-4-4- Adicionar estilos dentro dos comandos HTML (local -i nline)Adicionar estilos dentro dos comandos HTML (local -i nline)Adicionar estilos dentro dos comandos HTML (local -i nline)Adicionar estilos dentro dos comandos HTML (local -i nline)Adicionar estilos dentro dos comandos HTML (local -i nline)

Uma folha de estilos interna deve ser usada quando os estilos são usados umaúnica vez. Nesse caso as definições fazem-se dentro de um elemento <style> quedeve ser colocado dentro do elemento <head> da página HTML.

Exemplo:

<HTML><HEAD>


<H1 STYLE=”font-family:impact; background:yellow;color:red”>Neste exemplo, estou começando adominar</H1><P STYLE=”color: green”>O Cascading Style Sheets</P>

</BODY>



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

O browser lê as definições contidas no elemento <style> e faz a formatação doselementos da página aplicando essas definições.

Nota: O comportamento normal dos browsers consiste em ignorar os elementoscujo significado desconhecem. Isto significa que um browser muito antigo que nãosuporta estilos CSS ignorará o elemento <style>, mas não ignorará o texto queestá escrito lá dentro. Se for necessário evitar que esse browser escreva o texto dasdefinições devemos ocultá-lo colocando-o dentro de um comentário do HTML.

PrioridadesPrioridadesPrioridadesPrioridadesPrioridades

Ao utilizar estilos, é importante saber a ordem que os browsers utilizam na definiçãode estilos:

1.Estilos incluídos na linha do comando

2.Estilos definidos no início da página

3.Estilos obtidos de um ficheiro externo (via link)

4.Estilos importados de um ficheiro externo

5.Estilos padrões do browser

Exemplo:

<HTML><STYLE TYPE=”text/css”><!—

P {color: red}—></STYLE><HEAD>


<P STYLE=”color: green”>Cascading Style Sheets</P></BODY>

Observe que a tag P tem estilos definidos no ínicio da página e na linha decomando.

Com qual cor o texto irá aparecer? Verde ou vermelho?

Seguindo a ordem de prioridades, os estilos na linha de comando têm precedência.Logo, a cor do texto será verde.



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

Sintaxe usada nas folhas de estiloSintaxe usada nas folhas de estiloSintaxe usada nas folhas de estiloSintaxe usada nas folhas de estiloSintaxe usada nas folhas de estilo

Selectores, propriedades e valoresSelectores, propriedades e valoresSelectores, propriedades e valoresSelectores, propriedades e valoresSelectores, propriedades e valores

p { color : green; font-type : ‘New York’ Verdana;

}

Selector Declarações

A sintaxe das definições CSS é composta por duas partes: um selector e umadeclaração. Exemplo:

A declaração fica entre chavetas ({...}) e pode conter várias definições. Cadadefinição é formada por um par propriedade:valor, em que o valor é separado dapropriedade pelo carácter : (dois pontos.) Exemplo:

selector { propriedade: valor }

O selector é normalmente o nome de um elemento do HTML, mas também pode serum selector de classe, um selector de ID (identificador) ou um selector contextual.

Se o valor que queremos dar à propriedade tiver mais do que uma palavra devemoscolocá-lo entre aspas, conforme exemplo:

<html>

<head>

<style type="text/css">

p { font-family: "comic sans ms" }

</style>

</head>

<body>

Eu adoro o tipo de letra "comic sans ms".

</body>

</html>

Identificadores e classesIdentificadores e classesIdentificadores e classesIdentificadores e classesIdentificadores e classes



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

Dentro das chavetas (caracteres { e }) podemos colocar várias definições separadaspelo carácter ";" (ponto e vírgula). O exemplo seguinte define três propriedadespara o elemento <p>, que são o alinhamento, a cor do texto e o tipo de letra.


p {

text-align: center;

color: green;

font-family: arial

}

</style>

Agrupar selectoresAgrupar selectoresAgrupar selectoresAgrupar selectoresAgrupar selectores

Podemos agrupar os selectores que partilham as mesmas definições. Para issoescrevemo-los uns a seguir aos outros separados por vírgulas. No exemplo seguinteos elementos de <h1> até <h6> partilham todos a mesma definição:

h1,h2,h3,h4,h5,h6

{

color: green

}

Selectores de classeSelectores de classeSelectores de classeSelectores de classeSelectores de classe

Os selectores de classe permitem-nos definir estilos diferentes que podem seraplicados ao mesmo elemento. No caso de precisar de ter dois tipos diferentes deparágrafo no documento: um alinhado à direita e outro alinhado ao centro, utiliza-se os selectores de classe:


p.direita { text-align: right }

p.centro { text-align: center }

</style>

Sintaxe de um selector de classe que pode ser inserida numa folha de estilos:

identificador_do_elemento.identificador_de_classe{propriedade:valor;}



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

Selector de id (identificador)Selector de id (identificador)Selector de id (identificador)Selector de id (identificador)Selector de id (identificador)

O selector de id é diferente do selector de classe porque se aplica a um únicoelemento da página. As regras do HTML ditam que os valores do atributo id nãopodem repetir-se numa mesma página. Daí resulta que o número de elementos nodocumento com um determinado id é um ou é zero. Os nomes dos identificadoressão precedidos pelo carácter #.

Sintaxe de um selector identificador que pode ser inserida numa folha de estilos:

identificador_do_elemento #selector_identificador {propriedade:valor;}

Exemplo:Exemplo:Exemplo:Exemplo:Exemplo:

Titulos#texto_padrao {font-family: verdana; font-size:12 pt}

Sintaxe para fazer referência a um selector identificador para aplicar o estilo nelecontido:

<identificador_do_elemento id=”selector_identificador”>


<P ID=”texto_padrao”>Este é um texto padrão .</P>

Sintaxe para fazer referência a um selector classe para aplicar o estilo nelecontido:

<identificador_do_elemento classe=”identificador_de_classe”>

Um selector de classe permite definir um estilo não apenas directamente associadoa um elemento, mas a todos o que referenciem. A sintaxe é:

.selector_de_classe {propriedade:valor;}



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

Escrever comentários numa folha de estilosEscrever comentários numa folha de estilosEscrever comentários numa folha de estilosEscrever comentários numa folha de estilosEscrever comentários numa folha de estilos

Os comentários devem ser ignorados pelo browser, mas as versões 5 do MSIE lêm-nos como se eles fossem definições, o que pode causar erros. Por isso coloquecomentários apenas em folhas de estilos que sejam lidas apenas pelo MSIE 6, peloNetscape 7/Mozilla ou pelo Opera.

Para iniciar um comentário escreva a sequência de caracteres "/*", depois o textodo comentário, e no fim escreva "*/" para terminar o comentário.

Exemplo:

p { text-align: center;

/* Isto é um comentário */

color: black; font-family: arial }

A regra de selecção para o estilo definido no exemplo seguinte indica que ele sópode ser aplicado a um elemento <p> que tenha o valor "para1" no atributo id:

<html>

<head>


p#para1{text-align: center; color: red }

</style>

</head>

<body>

<p id="para1">Este parágrafo está alinhado ao centro e

tem cor encarnada.</p>

</body>

</html>

Um selector identificador permite definir um estilo não apenas directamenteassociado a um elemento, mas a todos o que referenciem. A sintaxe é:

#selector_identificador {propriedade:valor;}


#texto_padrao {font-family: verdana; font-size:12 pt}



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

Exercício IExercício IExercício IExercício IExercício I

1. CSS significa:

a) Computer short Sheets

b) Creative Style sheets

c) Cascading style Sheets

2.Indique quais as vantagens no uso de uma folha de estilos em cascata.

3.Existem 4 maneiras de incluirmos estilos CSS às páginas. Indique quais são.

4. Qual a sintaxe correcta para incluir folhas de estilos externas:

a) <stylesheets>meuestilo.css </stylesheets>

b) <style src=”meuestilo.css”>

c) <link rel=”stylesheet” type=”text/css” href=”meuestilo.css”>

5. Qual a localização correcta para incluir uma folha de estilos externa numdocumento HTML.

a) princípio do documento

b) na secção <body>

c) na secção <head>



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

6.Qual a tag HTML que se utiliza para definir uma folha de estilos interna:

a) <css>

b) <script>

c) <style>

7. Em relação às prioridades, indique a ordem pela qual os browsers utilizam emrelação aos estilos.

8. Complete a seguinte frase:

A sintaxe das definições CSS é composta por duas partes: um ______________ euma _______________________.

9. Indique o que é um selector.

10. Diga o que entende por selectores de classes e selectores id.



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

Definições do fundo de um elemento Definições do fundo de um elemento Definições do fundo de um elemento Definições do fundo de um elemento Definições do fundo de um elementopropriedades da classe Backgroundpropriedades da classe Backgroundpropriedades da classe Backgroundpropriedades da classe Backgroundpropriedades da classe Background

As propriedades dos fundos dos elementos definem cores de fundo e imagens defundo para os elementos do HTML. Estas propriedades permitem-nos controlar ascores e as imagens de fundo dos elementos (posição, repetição, etc).

Definições para a cor de fundoDefinições para a cor de fundoDefinições para a cor de fundoDefinições para a cor de fundoDefinições para a cor de fundo

A cor de fundo de um elemento define-se através da propriedade color, da classebackground.

Existem quatro formas possíveis para definir cores que são:

1) indicando o nome, por exemplo "blue";

2) indicando a forma rgb, por exemplo rgb(0, 255, 255) para a cor "Aqua";

3) indicando a forma hexadecimal, por exemplo #000000 para a cor “preta".

4) indicando a forma rgb baseada em percentagens do valor máximo de cada cor. Esta forma é menos recomendada do que as restantes mas pode ser útil em algumas situações. Exemplo: rgb(54%,0%,0%).

amroF amroF amroF amroF amroF oãçircseD oãçircseD oãçircseD oãçircseD oãçircseD

eman_roloc )eulbuo,derolpmexerop(rocedemonmU

)luza,edrev,odanracne(bgr ).adanracnerocaé)0,0,552(bgrolpmexerop(rocaarapbgrrolavmU

)%luza,%edrev,%odanracne(bgrolpmexerop(rocedomixámrolavodmegatnecrepamuomocodadbgrrolavmU

).adanracnerocaé)%0,%0,%001(bgr

bbggrr# .)adanracnerocaarap0000ff#olpmexerop(lamicedaxehoremúnmU

Cor Forma Hexadecimal Forma RGB

#000000 rgb(0,0,0)

#FF0000 rgb(255,0,0)

#00FF00 rgb(0,255,0)

#0000FF rgb(0,0,255)

#FFFF00 rgb(255,255,0)

#00FFFF rgb(0,255,255)

#FF00FF rgb(255,0,255)

#C0C0C0 rgb(192,192,192)

#FFFFFF rgb(255,255,255)



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

PPPPPropriedades dos Fropriedades dos Fropriedades dos Fropriedades dos Fropriedades dos Fundos (background):undos (background):undos (background):undos (background):undos (background):

edadeirporP edadeirporP edadeirporP edadeirporP edadeirporP oãçircseD oãçircseD oãçircseD oãçircseD oãçircseD serolaV serolaV serolaV serolaV serolaV

dnuorgkcab

amrofamuson-ecerefOrevercsearapadaiverbaodsedadeirporpsasadot

acinúamunodnuf.oãçaralced

sadotaradsomedopeuqserolavsoatiecaedadeirporpatsE,roloc-dnuorgkcab(alebatatsedsedadeirporpsetnatsersa

-dnuorgkcabtaeper-dnuorgkcab,egami-dnuorgkcab)noitisop-dnuorgkcabetnemhcatta

tnemhcatta-dnuorgkcab

-dnuorgkcabedadeirporpAaesacidnitnemhcattaevedodnufedmegami

anlevómirecenamrepesuoresworbodalenajodúetnocoahnapmoca

.)llorcs(somevomoodnauq

adotseromocetnematnujazilsedodnufedmegamiA-llorcs.anigáp

.anigápadotseromocazilsedoãnodnufedmegamiA-dexif.resworbodalenajanlevómiecenamrepalE

roloc-dnuorgkcabedodnufedrocaenifeD

.otnemelemu

bgr-rolocxeh-roloc

eman-rolocetnerapsnartéodnufedrocA-tnerapsnart

egami-dnuorgkcabedmegamiamuenifeDonadasuresarapodnuf

otnemele

megamiamocoriehcifoartnocneesednolacolO-lruodnufedmegamiamuhneN-enon

noitisop-dnuorgkcabesednolacoloenifeD

arahnesedaaçemoc.odnufedmegami

adnugesàáradresworboarvalapamusaneparevercseeS-."retnec"oãssimoroprolavo

tfelpotretnecpot

thgirpottfelretnec

retnecretnecthgirretnectfelmottob

retnecmottobthgirmottob

latnozirohaodnugesoãçisopaérolavoriemirpO-%-y%-xotnacoA.lacitrevaodnugesoãçisopaérolavodnugesoe

otnacoA.%0%0serolavsomednopserrocodreuqseroirepuseS.%001%001serolavsomednopserrocotieridroirefni

rolavoodnugesoaáradresworborolavmusaneparevercse.%05edoãssimorop

aodnugesoãçisopaérolavoriemirpO-sop-ysop-x.lacitrevaodnugesoãçisopaérolavodnugesoelatnozirohsA.00serolavsomednopserrocodreuqseroirepusotnacoA

ededadinuartuouoslexipresmedopadidemedsedadinuseõçisoprarutsimoditimrepÉ.SSCmeadinifedadidemrevercseeS.siautnecrepsotnemanoicisopmocsatulosbaroprolavoodnugesoaáradresworborolavmusanepa

.%05edoãssimo

taeper-dnuorgkcab

edmegamiaesecelebatsEes-riteperevedodnuf

uo)ociasommuodnamrof(adseõçceridsae,oãn

.oãçiteper

latnozirohanotnates-eteperodnufedmegamiA-taeper.)ociasommuamrof(lacitrevanomoc

ansanepaes-eteperodnufedmegamiA-x-taeper.latnoziroh

.lacitrevansanepaes-eteperodnufedmegamiA-y-taeperadahnesedé(eteperesoãnodnufedmegamiA-taeper-on

.)zevacinúamu



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

Exercício IIExercício IIExercício IIExercício IIExercício II

1. Abra um editor de HTML e escreva o seguinte código, que permite definir umacor de fundo:

<html><head>

<style type=”text/css”> body {{{{{background-color::::: yellow}}}}} h1 {{{{{background-color::::: #ff0000}}}}} h2 {{{{{background-color::::: transparent}}}}} p {{{{{background-color::::: rgb(250,250,255)}}}}}

</style>

</head>

<body> <h1>Primeiro exercício de CSS</h1> <h2>11º Ano</h2> <p>de API</p></body></html>

2. Grave o exercicio com o seguinte nome: exercicio1_1.html.

3. Vamos agora colocar uma imagem como fundo de um elemento. Para tal copie aimagem fundo.gif para a sua pasta.

4. Escreva o seguinte código num novo documento e grave com o nome deexercicio1_2.html.

<html><head> <style type=”text/css”>

body{{{{{background-image::::: url(“fundo.gif”)}}}}} </style>

</head><body>

<p>Página com imagem de fundo</p>




</body></html>



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

5.Para repetir a imagem de fundo (background) na vertical, faça o seguinte numnovo documento:

<html><head>

<style type=”text/css”> body{{{{{background-image::::: url(“fundo.gif”);;;;; background-repeat::::: repeat-y}}}}}

</style>

</head><body>

<p>Fundo na vertical</p>



<p>Fundo na vertical</p></body></html>

6. Grave com o seguinte nome exercicio1_3.html.

7.Para colocar imagens de fundo fixas, escreva o seguinte código e visualize oresultado. Grave com o nome de exercício1_4.html

<html><head>

<style type=”text/css”> body{{{{{background-image::::: url(“fundo.gif”);;;;; background-repeat::::: no-repeat;;;;; background-attachment::::: fixed }}}}}

</style>

</head><body> <p style=”width: 1400px”>

Esta imagem de fundo permanece imóvel quando se desceou sobe na página ou quando se desloca para a direitaou para a esquerda

</body></html>



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

8.O próximo exemplo serve para controlar a posição de uma imagem de fundo.

<html><head>

<style type=”text/css”>body {{{{{ background-image::::: url(“fundo.gif ”);;;;;background-repeat::::: no-repeat;;;;;background-position::::: center center}}}}}

</style></head><body>

<p>Texto da página</p>



<p>Texto da página</p></body></html>

9. Grave com o seguinte nome: exercicio1_5.html

<html><head>

<style type=”text/css”>body{{{{{ background::::: #0000ff url(“fundo.gif”) no-repeat fixed

center center}}}}} </style>

</head><body>




<p>Texto da página</p></body></html>

10. Para colocar cor e imagem como fundo, proceda da seguinte forma:

11. Grave com o seguinte nome: exercicio1_6html.



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

Formatação de textoFormatação de textoFormatação de textoFormatação de textoFormatação de texto

As propriedades do texto define o aspecto gráfico a dar ao texto. Permite controlarcores, aumentar ou reduzir o espaço entre os caracteres, alinhar o texto, escolher otipo de letra, decorá-lo, etc.

edadeirporP edadeirporP edadeirporP edadeirporP edadeirporP oãçircseD oãçircseD oãçircseD oãçircseD oãçircseD soditimrepserolaV soditimrepserolaV soditimrepserolaV soditimrepserolaV soditimrepserolaV

roloc otxetodrocaenifeDo,)olpmexeropder(emonuesoresedoprocadrolavo-roc

ogidócuesouo,)olpmexerop)0,0,552(bgr(bgrrolavues.)olpmexerop0000FF#(lamicedaxeh

noitceridatircseedoãçceridaenifeD

otxetod)"thgir-ot-tfel"(atieridaarapadreuqseadéoãçceridA-rtl)"tfel-ot-thgir"(adreuqseaarapatieridadéoãçceridA-ltr

gnicaps-retteloçapseoiunimiduoatnemuA

seretcaracsoertne

.sartelsaertnelamronotnemaçapseoenifeD-lamronodadsartelsaertneoxifotnemaçapsemuenifeD-otnemirpmoc

.cte,cp,tp,xpme

ngila-txetmuedortnedotxetoahnilA

otnemele

adreuqse-tfelatierid-thgir

ortnecoa-retnecodacifitsuj-yfitsuj

noitaroced-txetseronemropanoicidA

otxetoasovitaroced

lamronotxetenifed-enonodahnilbusotxetenifed-enilrednu

amicropahnilamumocotxetenifed-enilrevoatsoperboslatnozirohahnilamumocotxetenifeD-hguorht-enil

arutlaaiemaracsipaeuqifotxetoeuqmoczaf-knilb

tnedni-txet

uoatieridaarapacolseDariemirpaadreuqseaarap

odahnilariemirpadartel.otxet

ariemirpaarapoxifotnemacolsedmuenifeD-otnemirpmoc).cte,cp,tp,xpmeodadresedop(ahnilariemirpadartel

adartelariemirpadatieridaarapotnemacolsedoenifeD-%otnemeleodarugraladmegatnecrepamuomocahnilariemirp

.otxetométnoceuq

mrofsnart-txetmuedsartelsaalortnoC

otnemele

.salucsúnimesalucsúiamsartelmoc,lamronotxetenifeD-enon.alucsúiamartelmocmaçemocsarvalapsasadoT-ezilatipac

salucsúiamomocsatircseoãssartelsasadoT-esacreppusalucsúnimomocsatircseoãssartelsasadoT-esacrewol

idib-edocinulamron

debmeedirrevo-idib

ecaps-etihwéomocamrofaenifeD

ocnarbmeoçapseoodatartotnemelemuedortned

oçapseedseretcaracsoarongiresworbO-lamronO.oçapseedseretcaracsosodotavreserpresworbO-erpotnemeleomocmétboeseuqoalaugiéotnematropmoc

LMTHod>erp<ahniledsaçnadumriresniedaxiedresworbO-parwon

éodnauqahniledadumósotxetedatircseA.sacitámotua.>rb<otnemelemuodartnocne

gnicaps-drowoçapseoiunimiduoatnemuA

sarvalapsaertne

.sarvalapsaertnelamronotnemaçapseoenifeD-lamronsarvalapsaertneoxifotnemaçapsemuenifeD-otnemirpmoc

).cte,cp,tp,xpmeodadresedop(



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

FFFFFontesontesontesontesontes


tnof

sodadresmedopeuqserolavsoatiecAalebatatsedsedadeirporpsetnatsersà

anmartnocneeseuqseleuqasiam-ecerefO.ahnilatsedetniugesanulocrinifedarapadaiverbaamrofamuson

sasadotoãçaralcedacinúamun.arteledopitoasavitalersedadeirporp

noci noci noci noci noci mocrasuaarteledopitodsedadeirporpsaenifeD-.senocí

unem unem unem unem unem rasuaarteledopitodsedadeirporpsaenifeD-.sunemme

xob-egassem xob-egassem xob-egassem xob-egassem xob-egassem arteledopitodsedadeirporpsaenifeD-.ogoláidedsaxiacsanrasua

noitpac-llams noitpac-llams noitpac-llams noitpac-llams noitpac-llamsrab-sutats rab-sutats rab-sutats rab-sutats rab-sutats aarteledopitodsedadeirporpsaenifeD-

.resworbododatseedarrabanrasu

ylimaf-tnof

etsisnocylimaf-tnofedadeirporpAoeuqarteledsopitsomocatsilamun

sorevercsearaprehlocseedopresworbamrofedadanedroátseatsilA.sotxetecerapaahlocseariemirpa:airátiroirp

adnugesamevriugesa,oriemirpO.etnemavissecusmissaeahlocse

euqopitoriemirpoehlocseresworbsodsemonsO.rasuedzapacajesedsemonresmedoparteledsopit

.socirénegsemonuoailímaf

eman-ylimaf eman-ylimaf eman-ylimaf eman-ylimaf eman-ylimaf ,arteledopitodailímafedemonO-.cte,"laira","reiruoc","semit"omoc

ylimaf-cireneg ylimaf-cireneg ylimaf-cireneg ylimaf-cireneg ylimaf-cireneg omoc,ailímafedocirénegemonO-."ecapsonom","ysatnaf","evisruc","fires-snas","fires"

ezis-tnof .arteledopitmuedohnamatoenifeD

,seõsnemidsasrevidaraparteledohnamatoenifeD)roiam(egral-xxéta)ronem(llams-xxedsed

llams-xx llams-xx llams-xx llams-xx llams-xxllams-x llams-x llams-x llams-x llams-x

llams llams llams llams llamsmuidem muidem muidem muidem muidem

egral egral egral egral egralegral-x egral-x egral-x egral-x egral-xegral-xx egral-xx egral-xx egral-xx egral-xx

-rellams -rellams -rellams -rellams -rellams eleuqadoxiabaarteledohnamatoanoicceleSodasuresaavatseeuq

-regral -regral -regral -regral -regral eleuqadamicaarteledohnamatoanoicceleSodasuresaavatseeuq

-otnemirpmoc -otnemirpmoc -otnemirpmoc -otnemirpmoc -otnemirpmoc edohnamatoarapoxifrolavmuenifeD).cte,cp,tp,xpmeodad(artel

-%-%-%-%-% megatnecrepamuomocarteledohnamatoenifeDodasuresaavatseeuqeleuqad

tsujda-ezis-tnof

oãnodihlocse)tnof(arteledopitoeSes-êvresworbo,levínopsidrevitse

opitortuomurasuaodagirbo-ezis-tnofedadeirporpA.etnerefidod"eulavtcepsa"oacificepsetsujda

oeuqarapodihlocsearteledopitortuomuropol-íutitsbusassopresworbaodnavreserplevíssecaajetseeuqopit

aodnetname"x"arteladarutla.otxetodedadilibigel

-enon -enon -enon -enon -enon xarteladarutlaaravreserposicerpéoãNortuoroparteledopitoriutitsbusoirássecenrofodnauq

.etnerefid-oremún -oremún -oremún -oremún -oremún edopitoarap"eulavtcepsa"oenifeD

edopitoaracilpaaezis-tnof:rasuaalumróF.)tnof(arteléeuqarteledopitodezis-tnof(=levínopsidartel

od"eulavtcepsa"/tsujda-ezis-tnof*)ahlocseariemirp)levínopsidarteledopit



Esco

la S

ecun

dária

S. J

oão

do E

stor

il


hcterts-tnofacovorphcterts-tnofedadeirporpAoãçcartnocamuuooãsnapxeamu

.arteladohnamatonsiatnoziroh

-lamron -lamron -lamron -lamron -lamron menoãçartnocáhoãn(lamronrolavoenifeD)oãsnapxe

-rediw -rediw -rediw -rediw -rediw seretcaracsodarugralaatnemuA

oãsnapxeaarapuooãçartnocaarapalacseaenifeDsiamohnamatoé"desnednoc-artlu".seretcaracsod

siamohnamatoé"dednapxe-artlu"esodotedotiertsesodotedogral

desnednoc-artlu desnednoc-artlu desnednoc-artlu desnednoc-artlu desnednoc-artludesnednoc-artxe desnednoc-artxe desnednoc-artxe desnednoc-artxe desnednoc-artxe

desnednoc desnednoc desnednoc desnednoc desnednocdesnednoc-imes desnednoc-imes desnednoc-imes desnednoc-imes desnednoc-imes

dednapxe-imes dednapxe-imes dednapxe-imes dednapxe-imes dednapxe-imesdednapxe dednapxe dednapxe dednapxe dednapxe

dednapxe-artxe dednapxe-artxe dednapxe-artxe dednapxe-artxe dednapxe-artxedednapxe-artlu dednapxe-artlu dednapxe-artlu dednapxe-artlu dednapxe-artlu

elyts-tnof rasuaarteledolitseoenifeD

-lamron -lamron -lamron -lamron -lamron lamronarteledopitomocotircseéotxetO-cilati -cilati -cilati -cilati -cilati socilátiseretcaracmocotircseéotxetO

)sodanilcni(-euqilbo -euqilbo -euqilbo -euqilbo -euqilbo souqílboseretcaracmocotircseéotxetO

tnairav-tnofarteledopitmuodnasuotxetoevercsE

lamronopitouo"spac-llams"

-lamron -lamron -lamron -lamron -lamron lamronarteledopitomocotircseéotxetO-spac-llams -spac-llams -spac-llams -spac-llams -spac-llams -llams"arteledopitomocotircseéotxetO

"spac

thgiew-tnofeuqmocoçartodarussepseaenifeD

sartelasadahnesedoãs

-lamron -lamron -lamron -lamron -lamron siamronseretcaracenifeD-dlob -dlob -dlob -dlob -dlob ossepseoçartmocsodahnesedseretcaracenifeDredlob redlob redlob redlob redlob siamoçartmocsodahnesedseretcaracenifeD-ossepse

oçartmocsodahnesedseretcaracenifeD-rethgil oçartmocsodahnesedseretcaracenifeD-rethgil oçartmocsodahnesedseretcaracenifeD-rethgil oçartmocsodahnesedseretcaracenifeD-rethgil oçartmocsodahnesedseretcaracenifeD-rethgilonif onif onif onif onif

sosodahnesedoãseuqmocoçartodarussepseaenifeD.)ossorgsiam(008éta)onifsiam(001edsedseretcarac

.dlobeuqomsemoé007.004élamronrolavO001 001 001 001 001002 002 002 002 002003 003 003 003 003004 004 004 004 004005 005 005 005 005006 006 006 006 006007 007 007 007 007008 008 008 008 008009 009 009 009 009



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

Exercício IIIExercício IIIExercício IIIExercício IIIExercício III

1. Abra um editor de HTML e escreva o seguinte código, que permite definir cor aum determinado texto:

<html><head>

<style type=”text/css”> h1 {{{{{color::::: #ffff00}}}}} h2 {{{{{color::::: #dda0dd}}}}} p {{{{{color::::: rgb(0,0,255)}}}}}

</style>

</head>

<body><h1>Escola Secundária S. João do Estoril</h1>

<h2>Aplicações Informáticas A</h2>

<p>11º Ano</p>

</body></html>

2. Grave o documento com o seguinte nome: exercicio3_1.html

3. Escreva o seguinte código num novo documento.Este código utiliza algumasformatações de texto.

<html> <head><style type=”text/css”>

h1 {{{{{letter-spacing::::: -3px;;;;;text-align::::: center ;;;;;text-decoration::::: overline}}}}} h2 {{{{{letter-spacing::::: 0.5cm;;;;; text-align::::: left;;;;; text-decoration::::: underline}}}}} a {{{{{text-decoration::::: none}}}}} p.....paragrafo {{{{{text-indent::::: 1cm}}}}}

p.....uppercase {{{{{text-transform::::: uppercase}}}}} p.....lowercase {{{{{text-transform::::: lowercase}}}}} p.....capitalize {{{{{text-transform::::: capitalize}}}}}

</style>

</head>



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

<body> <h1> Especificar o espaço que separa os caracteres - espaço de -3px, alinhadoao centro e com pormenores decorativos do texto - overline</h1> <h2>Especificar o espaço que separa os caracteres - espaço de o.5cmalinhado à esquerda e pormenores decorativos do texto - underline </h2> <p><a href=”http://www.alcobias.net”>Texto com hiperligação </a></p>

<p class=”paragrafo”> A primeira linha de cada parágrafo inicia-se umpouco mais

à direita do que as linhas seguintes. Isto deve-se ao estiloCSS que usámos para formatar os parágrafos desta página.A primeira linha de cada parágrafo inicia-se um pouco maisà direita do que as linhas seguintes. Isto deve-se ao estiloCSS que usámos para formatar os parágrafos desta página. </p><p class=”uppercase”>A class que demos a este parágrafo dá-lhe uma formataçãoem que todas as letras são maiúsculas (em inglês “uppercase”.) </p>

<p class=”lowercase”>A class que demos a este parágrafo dá-lhe uma formataçãoem que todas as letras são minúsculas (em inglês “lowercase”.) </p>

<p class=”capitalize”>A class que demos a este parágrafo dá-lhe uma formataçãoem que todas as palavras começam comletra maiúscula (“capitalize” em inglês.)</p>

</body></html>

4. Grave o documento com o seguinte nome: exercicio3_2.html.

5. Num novo documento escreva o seguinte código:

<html><head><style type=”text/css”>

p{{{{{font::::: italic small-caps 900 13px arial}}}}}</style></head><body> <p>Isto é um parágrafo</p></body></html>

6.Grave o documento com o seguinte nome: exercicio3_3.html.



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

LimitesLimitesLimitesLimitesLimites

O limite de um elemento designa-se por "border". Em redor do limite podemosdesenhar linhas de contorno. O padrão CSS permite-nos especificar o estilo, a core a espessura das linhas que delimitam um elemento do HTML.

PPPPPropriedades das Margens:ropriedades das Margens:ropriedades das Margens:ropriedades das Margens:ropriedades das Margens:


redrob

revercsearapadaiverbaamrofamuecerefOsortemârapsosodotoãçaralcedacinúamun

soatiecA.arietnorfedsahnilsàsovitalersedadeirporpsàsodadresmedopeuqserolav

.atieridàsadatsil

htdiw-redrobelyts-redrobroloc-redrob

mottob-redrob

arapadaiverbaamrofamuson-ecerefOedahniladsedadeirporpsasadotrevercse

acinúamunoxiabedodalodarietnorfresmedopeuqserolavsoatiecA.oãçaralced

.atieridàsadatsilsedadeirporpsàsodad


roloc-mottob-redrob oxiabedarietnorfedahniladrocaenifeD roloc-redrob

elyts-mottob-redrob oxiabedarietnorfedahniladolitseoenifeD elyts-redrob

htdiw-mottob-redrobedarietnorfedahniladarussepseaenifeD

oxiabhtdiw-redrob

roloc-redrob.arietnorfedsahnilortauqsadserocsaenifeD

.serolavortauqamuedatiecAroc

tfel-redrob

arapadaiverbaamrofamuson-ecerefOahniladsedadeirporpsasadotsomrevercse

acinúamunodreuqseodalodarietnorfedresmedopeuqserolavsoatiecA.oãçaralced



roloc-tfel-redrobodalodarietnorfedahniladrocaenifeD

odreuqseroloc-redrob

elyts-tfel-redrobodalodarietnorfedahniladolitseoenifeD

odreuqseelyts-redrob

htdiw-tfel-redrobodarietnorfedahniladarussepseaenifeD

odreuqseodalhtdiw-redrob

thgir-redrob


acinúamunotieridodalodarietnorfedresmedopeuqserolavsoatiecA.oãçaralced



roloc-thgir-redrobodalodarietnorfedahniladrocaenifeD

otieridroloc-redrob

elyts-thgir-redrobodalodarietnorfedahniladolitseoenifeD

otieridelyts-redrob

htdiw-thgir-redrobodarietnorfedahniladarussepseaenifeD

otieridodalhtdiw-redrob



Esco

la S

ecun

dária

S. J

oão

do E

stor

il


elyts-redrobsadolitseoenifedelyts-redrobedadeirporpA

amuedatiecA.arietnorfedsahnilortauq.serolavortauq

enon enon enon enon enon adahnesedajesoãneuqmoczaF-arietnorfedahnilamuhnen

neddih neddih neddih neddih neddih oãnahnila("enon"euqomsemoÉ-edseõçautismeotpecxe,)adahnesedé

sadadseõçinifedmocsotilfnocedoãçulosersalebatedsotnemeleme

dettod dettod dettod dettod dettod mocadahnesedahnilamuenifeD-ropmabacasresworbsnuglA.sotnop

)dilosolitse(aunitnocahnilamurahnesed-dehsad -dehsad -dehsad -dehsad -dehsad mocadahnesedahnilamuenifeD

ropmabacasresworbsnuglA.soçart)dilosolitse(aunítnocahnilamurahnesed

-dilos -dilos -dilos -dilos -dilos aunítnocarietnorfedahnilamuenifeD-elbuod -elbuod -elbuod -elbuod -elbuod odalarietnorfedsahnilsaudenifeD

ésatnujsahnilsaudsadarugralA.odala-redrobortemârapolepodadrolavoalaugi

.htdiw-evoorg -evoorg -evoorg -evoorg -evoorg mocarietnorfedahnilamuenifeD

odedadilauqA.)evoorgolitse(D3otiefemuonodinifedrolavodednepedotiefe

roloc-redrobortemârap-egdir -egdir -egdir -egdir -egdir arietnorfedahnilartuoamuenifeD

edadilauqA.)egdirolitse(D3otiefemumoconodinifedrolavodednepedotiefeod

roloc-redrobortemârap-tesni -tesni -tesni -tesni -tesni mumocarietnorfedahnilamuenifeD

otiefeodedadilauqA.)tesniolitse(D3otiefeortemâraponodinifedrolavodedneped

roloc-redrob-testuo -testuo -testuo -testuo -testuo mocarietnorfedahnilamuenifeD

odedadilauqA.)testuoolitse(D3otiefemuonodinifedrolavodednepedotiefe

roloc-redrobortemârap

pot-redrob


acinúamunamicedodalodarietnorfedresmedopeuqserolavsoatiecA.oãçaralced



roloc-pot-redrob roirepusarietnorfedahniladrocaenifeD roloc-redrob

elyts-pot-redrob roirepusarietnorfedahniladolitseoenifeD elyts-redrob

htdiw-pot-redrobarietnorfedahniladarussepseaenifeD

roirepushtdiw-redrob

htdiw-redrobarapadaiverbaamrofamuson-ecerefO

edsahnilsasadotedsarussepsesasomrinifed.serolavortauqamuedatiecA.arietnorf

nihtmuidem

kcihtotnemirpmoc



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

Exercício IVExercício IVExercício IVExercício IVExercício IV

1. Abra um editor de HTML e escreva o seguinte código, que permite definir o estilodos limites:

<html><head>

<style type=”text/css”> p.....dotted {{{{{border-style::::: dotted}}}}} p.....dashed {{{{{border-style::::: dashed}}}}} p.....solid {{{{{border-style::::: solid}}}}} p.....double {{{{{border-style::::: double}}}}} p.....groove {{{{{border-style::::: groove}}}}} p.....ridge {{{{{border-style::::: ridge}}}}} p.....inset {{{{{border-style::::: inset}}}}} p.....outset {{{{{border-style::::: outset}}}}}

</style></head><body> <p class=”dotted”>limite dotted-pontos</p> <p class=”dashed”>limite dashed-traços</p> <p class=”solid”>limite solid-traço contínuo</p> <p class=”double”>limite double-linha dupla</p> <p class=”groove”>limite groove -linha com “relevo”</p> <p class=”ridge”>limite ridge-outra linha com “relevo”</p> <p class=”inset”>limite inset-linha com efeito especial</p> <p class=”outset”>limite outset -outra linha com efeito especial</p></body></html>


3. Escreva o seguinte código num novo documento.Este código permite definirdiferentes limites e utilização de cores.


p.....soliddouble {{{{{border-style::::: solid double}}}}}p.....doublesolid {{{{{border-style::::: double solid}}}}}p.....groovedouble {{{{{border-style::::: groove double;;;;;border-color::::: #ff0000#00ff00 #0000ff}}}}} p.....three {{{{{border-style::::: solid double groove;;;;;border-color:::::#ff0000 #00ff00#0000ff}}}}}

</style></head>



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

<body> <p class=”soliddouble”>Parágrafo com texto</p> <p class=”doublesolid”>Parágrafo com texto</p> <p class=”groovedouble”>Parágrafo com texto</p> <p class=”three”>Parágrafo com texto</p></body></html>


5. Para alterar a espessura de um limite utilza-se a propriedade border-bottom-widht. Escreva o seguinte código e visualize as alterações nos limites.

<html><head>

<style type=”text/css”>p.....inferior_superior{{{{{ border-style::::: solid;;;;;border-bottom-width:::::

15px;;;;; border-top-width::::: 15px}}}}} p.....esquerdo_direito{{{{{border-style::::: solid;;;;;border-left-width:::::

10px;;;;;border-right-width::::: 10px}}}}} </style>

</head><body> <p class=”inferior_superior”> Definir a espessura do limite inferior esuperior </p>

<p class=”esquerdo_direito”> Definir a espessura do limite esquerdo edireito </p>

</body></html>

6.Grave o documento com o seguinte nome: exercicio4_3.html

7. Indique se a seguinte declaração está correcta? Justifique a sua resposta.

<style type="text/css">p {border: medium double #ff00ff}

</style>



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

MargensMargensMargensMargensMargens

As margens de um elemento são constituídas por espaço em branco que fica em seuredor e o separa dos elementos adjacentes. Se o valor de uma margem for positivoo elemento afasta-se dos outros que lhe são adjacentes mas se for negativo eleaproxima-se dos outros elementos. Isto significa que podemos usar as margens paraafastar e aproximar os conteúdos de dois ou mais elementos e até sobrepô-los. Asquatro margens podem ser controladas todas ao mesmo tempo ou separadamente.

PPPPPropriedades das Margens:ropriedades das Margens:ropriedades das Margens:ropriedades das Margens:ropriedades das Margens:


nigram

amuecerefosoneuqedadeirporPamunrinifedarapadaiverbaamrof

sasadotoãçaralcedacinúortauqsàsavitalersedadeirporp

.otnemelemuedsnegram

pot-nigramthgir-nigrammottob-nigram

tfel-nigram

mottob-nigrammuedroirefnimegramaenifeD

otnemele

otuaotnemirpmoc

%

otua otua otua otua otua oehlocseeuqresworboÉ-.megramadohnamat

-otnemirpmoc -otnemirpmoc -otnemirpmoc -otnemirpmoc -otnemirpmoc muenifeD,tp,xpmeodad(oxifotnemirpmoc

).cte,mc,cp

-%otnemirpmoc -%otnemirpmoc -%otnemirpmoc -%otnemirpmoc -%otnemirpmoc oenifeDomocmegramadotnemirpmocodarutlaadmegatnecrepamu

uo)potemottobarap(otnemucodarugraladmegatnecrepamuomoc

).thgiretfelarap(otnemucodod

tfel-nigrammuedadreuqsemegramaenifeD

otnemele

otuaotnemirpmoc

%

thgir-nigrammuedatieridmegramaenifeD

otnemele

otuaotnemirpmoc

%

pot-nigrammuedroirepusmegramaenifeD

otnemele

otuaotnemirpmoc

%

Espaçamento nas tabelas:Espaçamento nas tabelas:Espaçamento nas tabelas:Espaçamento nas tabelas:Espaçamento nas tabelas:

As propriedades padding controlam o espaço em branco que separa os conteúdosde um elemento dos seus limites ("border"). É proibido usar valores negativos paraestas propriedades porque isso colocaria os conteúdos fora do elemento, o que nãofaria sentido. Os quatro lados podem ser controlados todos de uma vez ouseparadamente.



Esco

la S

ecun

dária

S. J

oão

do E

stor

il


gniddap

amuecerefosoneuqedadeirporPamunrinifedarapadaiverbaamrofsotcepsasosodotoãçaralcedacinúodúetnocoertnesotnemaçapsesod

.setimilsuessoeotnemelemued

pot-gniddapthgir-gniddapmottob-gniddap

tfel-gniddap

mottob-gniddapoarapeseuqoçapseoenifeD

uesodotnemelemuedodúetnocroirefnietimil

otnemirpmoc%

otnemirpmoc otnemirpmoc otnemirpmoc otnemirpmoc otnemirpmoc muenifeD-oçapseoarapoxifotnemirpmoc,cp,tp,xpmeodad(ocnarbme

.)cte,mc

%%%%% otnemirpmocmuenifeD-ocnarbmeoçapseoaovitaleradmegatnecrepamuodnasu

.otnemeleodlatotarugral

tfel-gniddapoarapeseuqoçapseoenifeD

uesodotnemelemuedodúetnocodreuqseetimil

otnemirpmoc%

thgir-gniddapoarapeseuqoçapseoenifeD

uesodotnemelemuedodúetnocotieridetimil

otnemirpmoc%

pot-gniddapoarapeseuqoçapseoenifeD

uesodotnemelemuedodúetnocroirepusetimil

otnemirpmoc%

Exemplo:


td {{{{{padding:::::2cm}}}}} td.....stl2 {{{{{padding::::: 22px 52px}}}}}

</style></head><body> <table border=”1">

<tr> <td> Nesta célula de tabela existe uma separação de 2cm

entre o conteúdo e todos os limites.</td></tr>

</table> <table border=”1">

<tr> <td class=”stl2">

Nesta célula de tabela existe uma separação de 22pxentre o conteúdo e os limites superior e inferior.Entre o conteúdo e os limites esquerdo e direito aseparação é de 52px.

</td></tr>

</table></body></html>



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

ListasListasListasListasListas

As propriedades relativas às listas permitem-nos controlar diversos aspectos daapresentação de uma lista. Entre outros aspectos podemos escolher os símbolospara os marcadores, usar uma imagem como marcador, e escolher a posição dosmarcadores.


elyts-tsil

amuson-ecerefoedadeirporpetsEamunrinifedarapadaiverbaamrof

sasadotoãçaralcedacinú.atsilamuasavitalersedadeirporp

epyt-elyts-tsilnoitisop-elyts-tsil

egami-elyts-tsil

egami-elyts-tsilrodacramomocmegamiamuenifeD

atsilamunmetied

-enon -enon -enon -enon -enon omocmegamireuqlauqratneserpaoãN.rodacram

lru lru lru lru lru .rodacramomocrasuamegamiadLRUO-

noitisop-elyts-tsilrodacramoeuqmeoãçisopaenifeD

odacolocreseved

edisni edisni edisni edisni edisni edodaloarapmassapserodacramsO-aarapes-macolsed(atsiladsnetisodortned

admetimuedotxetoes,oãçpoatsemoC.)atieridsahnilsa,ahnilamueuqodsiamrapucoatsil

odoxiabropomsemmaçemocariemirpadsioped).rodacramolepsadahnilaoãs(rodacram

edistuo edistuo edistuo edistuo edistuo sodarofetnemlatotmacifserodacramsO-àerpmesmacifserodacramsO.atsiladsneti

.sotxetsodadreuqse

epyt-elyts-tsil rasuarodacramedopitoenifeD

enon enon enon enon enon serodacramrasuoãN-csid csid csid csid csid )oiehcolucríc(rodacramomococsidmurasU-

elcric elcric elcric elcric elcric )lena(aicnêrefnucriC-erauqs erauqs erauqs erauqs erauqs odardauQ-

lamiced lamiced lamiced lamiced lamiced rodacramomocsoremúnrasU-namor-rewol namor-rewol namor-rewol namor-rewol namor-rewol ,i(solucsúnimsonamorsoremúnrasU-

).cte,v,vi,iii,iinamor-reppu namor-reppu namor-reppu namor-reppu namor-reppu solucsúiamsonamorsoremúnrasU-

).cte,V,VI,III,II,I(ahpla-rewol ahpla-rewol ahpla-rewol ahpla-rewol ahpla-rewol ,a(salucsúnimotebaflaodsartelrasU-

).cte,e,d,c,bahpla-reppu ahpla-reppu ahpla-reppu ahpla-reppu ahpla-reppu salucsúiamotebaflaodsartelrasU-

).cte,E,D,C,B,A(

tesffo-rekramotua

otnemirpmoc

Exemplo:


ul {list-style-image: url("seta.gif")}

</style>



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

Exercício VExercício VExercício VExercício VExercício V

1. Abra um editor de HTML e escreva o seguinte código, que permite definir marcasem listas não ordenadas:

<html><head><style type=”text/css”>ul.....disc {{{{{list-style-type::::: disc}}}}}ul.....circle {{{{{list-style-type::::: circle}}}}}ul.....square {{{{{ list-style-type::::: square}}}}}ul.....none {{{{{list-style-type::::: none}}}}}</style></head><body> <ul class=”disc”> <li>Rebuçados</li> <li>Pastilha elástica</li> <li>Caramelos</li> </ul> <ul class=”circle”> <li>Rebuçados</li> <li>Pastilha elástica</li> <li>Caramelos</li> </ul> <ul class=”square”> <li>Rebuçados</li> <li>Pastilha elástica</li> <li>Caramelos</li> </ul> <ul class=”none”> <li>Rebuçados</li> <li>Pastilha elástica</li> <li>Caramelos</li> </ul> </body></html>


3. Proceda a elaboração de uma lista ordenada, utilizando os mesmos campos. Osvalores a utilizar para a lista ordenada são: decimal;lower-roman;upper-roman;lower-alpha e upper-alpha. Grave o documento com o seguinte nome:exercicio5_2.html.

4. Escreva o código para elaborar uma lista, utilizando uma imagem comomarcador. O nome da imagem é: smile.gif. Os campos da listas podem ser:rebuçados; pastilhas e caramelos. Grave o documento com o seguinte nome:exercicio5_3.html.



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

Dimensionamento de elementos – Dimensionamento de elementos – Dimensionamento de elementos – Dimensionamento de elementos – Dimensionamento de elementos – DimensionDimensionDimensionDimensionDimension

As propriedades relativas a dimensões são usadas para controlar a altura e alargura dos elementos e o espaço entre linhas de texto.


thgieh otnemelemuedarutlaaenifeD

otua otua otua otua otua rasuaarutlaaedicedeuqresworboÉ-%%%%% megatnecrepamuomocotnemeleodarutlaaenifeD-

métnocoeuqocolbodarutlaadotnemirpmoc otnemirpmoc otnemirpmoc otnemirpmoc otnemirpmoc .cte,mc,xpsedadinumearutlaaenifeD-

thgieh-enilsaertneaicnâtsidaenifeD

sahnil

lamron lamron lamron lamron lamron ertneaicnâtsidaarapleváozarrolavmuenifeD-sahnilsa

oremún oremún oremún oremún oremún olepodacilpitlumáreseuqoremúnmuenifeD-aicnâtsidarecelebatsearaposumearteledohnamat

sahnilsaertne%%%%% amuomocsahnilsaertneaicnâtsidaenifeD-

odasuarteledohnamatodmegatnecrepotnemirpmoc otnemirpmoc otnemirpmoc otnemirpmoc otnemirpmoc ertneaicnâtsidaarapoxifrolavmuenifeD-

sahnilsa

thgieh-xammuedamixámarutlaaenifeD

otnemele

otua otua otua otua otua arutlaaarapetimilreuqlauqecelebatseoãN-otnemeleodamixám

%%%%% amuomocotnemeleodamixámarutlaaenifeD-métnocoeuqocolbodarutlaadmegatnecrep

otnemirpmoc otnemirpmoc otnemirpmoc otnemirpmoc otnemirpmoc otnemeleodamixámarutlaaenifeD-

htdiw-xammuedamixámarugralaenifeD

otnemele

-otua -otua -otua -otua -otua arugralaarapetimilreuqlauqecelebatseoãNotnemeleodamixám

%%%%% otnemeleoarapaditimrepamixámarugralaenifeD-oeuqocolbodarugraladmegatnecrepamuomoc

métnocotnemirpmoc otnemirpmoc otnemirpmoc otnemirpmoc otnemirpmoc oarapaditimrepamixámarugralaenifeD-

otnemele

thgieh-nimmuedaminímarutlaaenifeD

otnemele

otnemirpmoc otnemirpmoc otnemirpmoc otnemirpmoc otnemirpmoc otnemeleodaminímarutlaaenifeD-%%%%% amuomocotnemeleodaminímarutlaaenifeD-

métnocoeuqocolbodarutlaadmegatnecrep

htdiw-nimmuedaminímarugralaenifeD

otnemele

otnemirpmoc otnemirpmoc otnemirpmoc otnemirpmoc otnemirpmoc otnemeleodaminímarugralaenifeD--%-%-%-%-% amuomocotnemeleodaminímarugralaenifeD

métnocoeuqocolbodarugraladmegatnecrep

htdiwmuedarugralaenifeD

otnemele

otua otua otua otua otua rasuaarugralaedicedeuqresworboÉ-%%%%% megatnecrepamuomocotnemeleodarugralaenifeD-

métnocoeuqotnemeleodarugraladotnemirpmoc otnemirpmoc otnemirpmoc otnemirpmoc otnemirpmoc ,xpsedadinumeaxifarugralamuenifeD-

.cte,mc



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

Dimensionamento de imagensDimensionamento de imagensDimensionamento de imagensDimensionamento de imagensDimensionamento de imagens



img.....normal{{{{{height::::: auto;;;;;width::::: auto}}}}} img.....grande{{{{{height::::: 64px;;;;;width::::: 64px}}}}} img.....pequeno{{{{{height::::: 16px;;;;;width::::: 16px}}}}}

</style></head><body> <img class=”normal” height=”32" width=”32" src=”urso1.gif”/><br/><br/> <img class=”grande” height=”32" width=”32" src=”urso1.gif”/><br/><br/> <img class=”pequeno” height=”32" width=”32" src=”urso1.gif”/></body></html>

Espaçamento entre linhasEspaçamento entre linhasEspaçamento entre linhasEspaçamento entre linhasEspaçamento entre linhas



p.....aumentar {{{{{line-height::::: 32px}}}}}</style></head>

<body> <p> Isto é um parágrafo com texto. Isto é um parágrafo com texto.

Isto é um parágrafo com texto. Isto é um parágrafo com texto.Isto é um parágrafo com texto. Isto é um parágrafo com texto.

</p>

<p class=”aumentar”>Isto é um parágrafo com texto. Isto é um parágrafo com texto.Isto é um parágrafo com texto. Isto é um parágrafo com texto.Isto é um parágrafo com texto. Isto é um parágrafo com texto.

</p></body></html>



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

Alinhamento relativo de elementos na páginaAlinhamento relativo de elementos na páginaAlinhamento relativo de elementos na páginaAlinhamento relativo de elementos na páginaAlinhamento relativo de elementos na página propriedades de propriedades de propriedades de propriedades de propriedades de ClassificationClassificationClassificationClassificationClassification

As propriedades de classificação permitem-nos controlar a forma como oselementos são apresentados: escolher o local onde uma imagem deve aparecer,posicionar os elementos de forma absoluta ou em relação uns aos outros econtrolar a sua visibilidade.

PPPPPropriedades de Classificação:ropriedades de Classificação:ropriedades de Classificação:ropriedades de Classificação:ropriedades de Classificação:


raelcotnujotnemelemuedsodalsoenifeD

soditimrepoãsoãnsiauqsoasetnautulfsotnemele

-tfel -tfel -tfel -tfel -tfel onsetnautulfsotnemelesoditimrepoãsoãNodreuqseodal

-thgir -thgir -thgir -thgir -thgir onsetnautulfsotnemelesoditimrepoãsoãNotieridodal

-htob -htob -htob -htob -htob onsetnautulfsotnemelesoditimrepoãsoãNotieridodalonmenodreuqseodal

-enon -enon -enon -enon -enon odotnatsetnautulfsotnemelesoditimrepoãSotieridodomocodreuqseodal

rosrucarosrucedopitoacificepsE

ratneserpa

-lru -lru -lru -lru -lru oãçinifedamétnoceuqoriehcifmuedLRUOrosrucmumébmateuqidnI:atoN.rasuarosrucodoriehcifoedosaconodatneserparesarapociréneg.odasuresredopoãnlaicepserosrucométnoceuq

-otua -otua -otua -otua -otua rosrucoehlocseresworbO-riahssorc -riahssorc -riahssorc -riahssorc -riahssorc zurcedamrofmerosrucmU

-tluafed -tluafed -tluafed -tluafed -tluafed etnemlareg(oãssimoroprasuarosrucO)atesamu

-retniop -retniop -retniop -retniop -retniop oãçagilamuarapratnopaaraprosrucmUodedomocoãmamuetnemlamron(otxetrepihed

)odacitserodacidni-evom -evom -evom -evom -evom amuevomesodnauqêveseuqrosrucO

narcéonalenaj-eziser-e -eziser-e -eziser-e -eziser-e -eziser-e esotnauqneêveseuqrosrucO

aodnatsarranarcéonalenajamuanoisnemider)etseluo,"tsae"(atieridatsera

-eziser-en -eziser-en -eziser-en -eziser-en -eziser-en esotnauqeêveseuqrosrucOoodnatsarranarcéonalenajamuanoisnemider)etsedronuo,"tsae/htron"(otieridroirepusotnac

-eziser-wn -eziser-wn -eziser-wn -eziser-wn -eziser-wn esotnauqeêveseuqrosrucOoodnatsarranarcéonalenajamuanoisnemider

)etseoronuo,"tsew/htron"(odreuqseroirepusotnac-eziser-n -eziser-n -eziser-n -eziser-n -eziser-n esotnauqeêveseuqrosrucO

aodnatsarranarcéonalenajamuanoisnemider)etronuo,"htron"(amicedatsera

-eziser-es -eziser-es -eziser-es -eziser-es -eziser-es esotnauqeêveseuqrosrucOoodnatsarranarcéonalenajamuanoisnemider

)"etsedus"uo,"tsae/htuos"(otieridroirefniotnac-eziser-ws -eziser-ws -eziser-ws -eziser-ws -eziser-ws esotnauqeêveseuqrosrucO

oodnatsarranarcéonalenajamuanoisnemider)etseodusuo,"tsew/htuos"(odreuqseroirefniotnac

-eziser-s -eziser-s -eziser-s -eziser-s -eziser-s esotnauqeêveseuqrosrucOaodnatsarranarcéonalenajamuanoisnemider

)lusuo,"htuos"(oxiabedatsera-eziser-w -eziser-w -eziser-w -eziser-w -eziser-w esotnauqeêveseuqrosrucO

aodnatsarranarcéonalenajamuanoisnemider)etseouo,"tsew"(adreuqseatsera

-txet -txet -txet -txet -txet otxeterbosátserosrucO-tiaw -tiaw -tiaw -tiaw -tiaw átseeuqroprarepsearapzideuqrosrucO

amuetnemlamron(oãçucexemeaferatamu)oigólermuuoatehlupma

-pleh -pleh -pleh -pleh -pleh railixuaoãçamrofniáheuqacidnirosrucetsEmuedamrofaetnemlamronemussa(levínopsid

)oãçagorretniedotnop



Esco

la S

ecun

dária

S. J

oão

do E

stor

il


yalpsidevedotnemelemuomoceesacidnI

odatneserpares

-enon -enon -enon -enon -enon odatneserpaáresoãnotnemeleO-enilni -enilni -enilni -enilni -enilni essofesomocodatneserpaáresotnemeleO

setnaahniledsaçnadummes"enilni"otnemelemu.aicnêrrocoausadsiopedmen

-kcolb -kcolb -kcolb -kcolb -kcolb essofesomocodatneserpaáresotnemeleOahniledaçnadumamumoc,ocolbedotnemelemu

.siopedartuoesetna-meti-tsil -meti-tsil -meti-tsil -meti-tsil -meti-tsil esomocodatneserpaáresotnemeleO

atsilamuedmetimuessof-ni-nur -ni-nur -ni-nur -ni-nur -ni-nur muomocodatneserpaáresotnemeleO

"enilni"otnemelemuomocuoocolbedotnemele.ecerapaeuqmeotxetnocododnedneped

-tcapmoc -tcapmoc -tcapmoc -tcapmoc -tcapmoc muomocodatneserpaáresotnemeleO"enilni"otnemelemuomocuoocolbedotnemele

.ecerapaeuqmeotxetnocododnednepedrekram rekram rekram rekram rekram

-elbat -elbat -elbat -elbat -elbat amuomocodatneserpaáresotnemeleOesetnaahniledsaçnadummoc,)>elbat<(alebat

.sioped-elbat-enilni -elbat-enilni -elbat-enilni -elbat-enilni -elbat-enilni omocodatneserpaáresotnemeleO

ahniledsaçnadummessam,)>elbat<(alebatamu.siopedesetna

-puorg-wor-elbat -puorg-wor-elbat -puorg-wor-elbat -puorg-wor-elbat -puorg-wor-elbat odatneserpaáresotnemeleO)>ydobt<(alebatamuedsahniledopurgmuomoc

-puorg-redaeh-elbat -puorg-redaeh-elbat -puorg-redaeh-elbat -puorg-redaeh-elbat -puorg-redaeh-elbat áresotnemeleOodsahniledopurgmuomocodatneserpa

)>daeht<(alebatamuedohlaçebac-puorg-retoof-elbat -puorg-retoof-elbat -puorg-retoof-elbat -puorg-retoof-elbat -puorg-retoof-elbat odatneserpaáresotnemeleO

alebatamuedépadorodsahniledopurgmuomoc)>tooft<(

-wor-elbat -wor-elbat -wor-elbat -wor-elbat -wor-elbat omocodatneserpaáresotnemeleO)>rt<(alebatamuedahnilamu

-puorg-nmuloc-elbat -puorg-nmuloc-elbat -puorg-nmuloc-elbat -puorg-nmuloc-elbat -puorg-nmuloc-elbat áresotnemeleOedsanulocsiamuoanulocamuomocodatneserpa

)>puorgloc<(alebatamu-nmuloc-elbat -nmuloc-elbat -nmuloc-elbat -nmuloc-elbat -nmuloc-elbat omocodatneserpaáresotnemeleO

)>loc<(alebatamuedsalulécedanulocamu-llec-elbat -llec-elbat -llec-elbat -llec-elbat -llec-elbat omocodatneserpaáresotnemeleO

)>dt<(alebatamuedalulécamu-noitpac-elbat -noitpac-elbat -noitpac-elbat -noitpac-elbat -noitpac-elbat omocodatneserpaáresotnemeleO

)>noitpac<(alebatamuedadnegelamu

taolfuomegamiamuednoraguloenifeD

recerapaevedocolbedotnemeleotnemeleortuoedortned

-tfel -tfel -tfel -tfel -tfel odadreuqseaarapautulfotnemeleOmétnocoeuqotnemeleododúetnoc

-thgir -thgir -thgir -thgir -thgir odúetnocodatieridaarapautulfotnemeleOmétnocoeuqotnemeleod

-enon -enon -enon -enon -enon odatneserpaéotnemeleO.oãçautulfáhoãN.ecerapaeuqmelacolon



Esco

la S

ecun

dária

S. J

oão

do E

stor

il


noitisopoãçisopamunotnemelemuacoloC

,avitaler,acitátseresedopeuqaxifuoatulosba

-citats -citats -citats -citats -citats oãçisopausanodacolocéotnemeleOsomevedoãnrolavetsesomasuodnauQ.lamron

.potmentfelsedadeirporpsarinifed-evitaler -evitaler -evitaler -evitaler -evitaler ausàetnemavitalerotnemeleoacolseD

slexip02o-acolsed"xp02:tfel"(lamronoãçisop)atieridaarap

-etulosba -etulosba -etulosba -etulosba -etulosba oãçisopamunotnemeleoacoloCeuqacifinigis"xp02:tfel".anigápaerbosatulosba

odreuqseomertxeodatieridàslexip02açemocele.anigápad

dexif dexif dexif dexif dexif

ytilibisivratseevedotnemelemuesacidnI

levísivniuolevísiv

-elbisiv -elbisiv -elbisiv -elbisiv -elbisiv levísivéotnemeleO-neddih -neddih -neddih -neddih -neddih levísivniéotnemeleO

-espalloc -espalloc -espalloc -espalloc -espalloc alebatedsotnemelemeodasuodnauQmesanulocamuuoahnilamuevomerrolavetseaireseuqoçapseO.alebatadojnarraoraretla

levínopsidacifsodivomersotnemelesolepodapucomeodasuodnauq.sodúetnocsortuoarap

odatluseromsemoádsalebatoãneuqsotnemele."neddih"euq

Definição da forma do cursorDefinição da forma do cursorDefinição da forma do cursorDefinição da forma do cursorDefinição da forma do cursor

Exemplo:Exemplo:Exemplo:Exemplo:Exemplo: alterar o símbolo mostrado pelo cursor

<body> <p>Passe com o ponteiro do rato sobre as palavras mais abaixo e

veja como ele muda de forma. </p>

<span style=”CURSOR: auto”>Auto</span><p> <span style=”CURSOR: crosshair”>Crosshair</span><p> <span style=”CURSOR: default”>Default</span><p> <span style=”CURSOR: pointer”>Pointer</span><p> <span style=”CURSOR: move”>Move</span><p> <span style=”CURSOR: e-resize”>e-resize</span><p> <span style=”CURSOR: ne-resize”>ne-resize</span><p> <span style=”CURSOR: nw-resize”>nw-resize</span><p> <span style=”CURSOR: n-resize”>n-resize</span><p> <span style=”CURSOR: se-resize”>se-resize</span><p> <span style=”CURSOR: sw-resize”>sw-resize</span><p> <span style=”CURSOR: s-resize”>s-resize</span><p> <span style=”CURSOR: w-resize”>w-resize</span><p> <span style=”CURSOR: text”>text</span><p> <span style=”CURSOR: wait”>wait</span><p> <span style=”CURSOR: help”>help</span> </body>



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

Posicionamento e forma de elementos na página – Posicionamento e forma de elementos na página – Posicionamento e forma de elementos na página – Posicionamento e forma de elementos na página – Posicionamento e forma de elementos na página – PositioningPositioningPositioningPositioningPositioning

As propriedades que controlam o posicionamento dos elementos permitem-noscontrolar a área ocupada e escolher a localização com rigor.


mottob

arapuooxiabarap(aicnâtsidaenifeDedetimiloracifevedeuqa)amic

etnemavitalerotnemelemuedoxiaboeuqotnemeleodoxiabedetimiloa

.métnoc

-otua -otua -otua -otua -otua etimilodoãçisoparehlocseresworboaxieDroirefni

-%-%-%-%-% amuomocroirefnietimilodoãçisopaenifeDanigápadarutlaadmegatnecrep

-otnemirpmoc -otnemirpmoc -otnemirpmoc -otnemirpmoc -otnemirpmoc oxiabedetimilodoãçisopaenifeD.cte,mc,tp,xpmeodadoxifrolavmumoc

pilcO.otnemelemuedamrofaenifeD

amrofanodatroceréotnemele.odartsomsiopedeadajesed

epahs epahs epahs epahs epahsotua otua otua otua otua

tfel

uoadreuqseaarap(aicnâtsidaenifeDoracifevedeuqa)atieridaarap

otnemelemuedodreuqseetimilododreuqseetimiloaetnemavitaler

.métnocoeuqotnemele

-otua -otua -otua -otua -otua etimilodoãçisoparehlocseresworboaxieDodreuqse

-%-%-%-%-% amuomocodreuqseetimilodoãçisopaenifeDanigápadarugraladmegatnecrep

-otnemirpmoc -otnemirpmoc -otnemirpmoc -otnemirpmoc -otnemirpmoc odreuqseetimilodoãçisopaenifeD.cte,mc,tp,xpmeodadoxifrolavmumoc

wolfrevooodnauqecetnocaeuqoenifeD

aedecxeotnemelemuedodúetnoc.aeráaus

-elbisiv -elbisiv -elbisiv -elbisiv -elbisiv áresetrapamU.odúetnocoodotartsoMeuqaotnemeleodaeráadarofájadatneserpa

.ecnetrep-neddih -neddih -neddih -neddih -neddih edecxeeuqetrapA.odatrocéodúetnocO

.adartsomáresoãnlevínopsidaeráa-llorcs -llorcs -llorcs -llorcs -llorcs resworbosam,odatrocéodúetnocO

arap)srabllorcs(otnemacolsededsarrabatnecsercaesotsivresassopmébmatodúetnocetnatseroeuq

.oirássecen-otua -otua -otua -otua -otua eleropodúetnoconetrocmuarrocoosaC

evedresworbolevínopsidaeráaredecxe)srabllorcs(otnemacolsededsarrabratnecsercaesotsivresassopmébmatetnedecxeoeuqarap

.oirássecen

thgir

uoadreuqseaarap(aicnâtsidaenifeDoracifevedeuqa)atieridaarap

otnemelemuedotieridetimilodotieridetimiloaetnemavitaler

.métnocoeuqotnemele

-otua -otua -otua -otua -otua etimilodoãçisoparehlocseresworboaxieDotierid

-%-%-%-%-% amuomocotieridetimilodoãçisopaenifeDanigápadarugraladmegatnecrep

-otnemirpmoc -otnemirpmoc -otnemirpmoc -otnemirpmoc -otnemirpmoc otieridetimilodoãçisopaenifeD.cte,mc,tp,xpmeodadoxifrolavmumoc

pot

arapuooxiabarap(aicnâtsidaenifeDedetimiloracifevedeuqa)amic

etnemavitalerotnemelemuedamicoeuqotnemeleodamicedetimiloa

.métnoc

-otua -otua -otua -otua -otua etimilodoãçisoparehlocseresworboaxieDroirepus

-%-%-%-%-% amuomocroirepusetimilodoãçisopaenifeDanigápadarutlaadmegatnecrep

-otnemirpmoc -otnemirpmoc -otnemirpmoc -otnemirpmoc -otnemirpmoc amicedetimilodoãçisopaenifeD.cte,mc,tp,xpmeodadoxifrolavmumoc



Esco

la S

ecun

dária

S. J

oão

do E

stor

il


ngila-lacitrevmuedlacitrevotnemahnilaoenifeD

.otnemele

-enilesab -enilesab -enilesab -enilesab -enilesab éotnemeleod)oxiabed(esabedahnilAoeuqotnemeleodesabedahnilamocadahnila

.métnoc-bus -bus -bus -bus -bus adoxiabaetnemariegilotnemeleoahnilA

eseuqodatluseroaetnahlemes(lamronoãçisop).LMTHod>bus<otnemeleomocmétbo

-repus -repus -repus -repus -repus adamicaetnemariegilotnemeleoahnilAeseuqodatluseroaetnahlemes(lamronoãçisop

).LMTHod>pus<otnemeleomocmétbo-pot -pot -pot -pot -pot amicasiamootnemeleodopotoahnilA

.ecnetrepeuqaahnilanlevíssop-pot-txet -pot-txet -pot-txet -pot-txet -pot-txet etimilomocotnemeleodopotoahnilA

.ecnetrepeuqaahnilanotxetodotlasiam-elddim -elddim -elddim -elddim -elddim odarutlaaiemaotnemeleoahnilA

.métnocoeuqotnemele-mottob -mottob -mottob -mottob -mottob siamootnemeleodroirefnietimiloahnilA

.ecnetrepeuqaahnilanlevíssopoxiab-mottob-txet -mottob-txet -mottob-txet -mottob-txet -mottob-txet otnemeleodoxiabedetimiloahnilA

aahnilanotxetodoxiabedetimilomoc)mottob(.ecnetrepeuqotnemirpmoc otnemirpmoc otnemirpmoc otnemirpmoc otnemirpmoc

-%-%-%-%-% odmegatnecrepamuomocotnemeleoahnilAsoditimrepoãS.thgieh-eniledadeirporpadrolav

.sovitagenserolav

xedni-zoãçatneserpaedmedroaenifeD

edosaconsotnemelesod)edadiroirp(.seleertneoãçisoperbosritsixe

-otua -otua -otua -otua -otua resworbolepodihlocseéxedni-zedrolavO-oremún -oremún -oremún -oremún -oremún otnemeleodxedni-zedrolavoenifeD



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

Exercício VIExercício VIExercício VIExercício VIExercício VI

<html><head><style type=”text/css”>img.....x{{{{{position:::::absolute;;;;;left:::::0;;;;;top:::::0;;;;;z-index:::::-1}}}}}</style></head><body> <h1>Isto é um cabeçalho</h1> <img class=”x” src=”clip12.jpg”/> <p> O valor por omissão da propriedade z-index é 0.

A imagem tem o z-index com valor -1, pelo quea sua prioridade é inferior. Por isso elaaparece atrás do restante conteúdo.

</p></body></html>

1. Abra um editor de HTML e escreva o seguinte código, que permite colocar umelementopor detrás de outro. A imagem a utilizar é clip12.jpg:


3. Escreva o seguinte código que permite alinhar uma imagem na vertical:


img.....top {{{{{vertical-align:::::text-top}}}}}img.....bottom {{{{{vertical-align:::::text-bottom}}}}}

</style></head> <body> <p>Isto é uma imagem <img class=”bottom” src=”clip12.jpg”>

dentro de um parágrafo. </p> <p>Isto é a mesma imagem <img class=”top” src=”clip12.jpg”>

dentro de outro parágrafo. </p></body></html>

4. Grave o documento com o seguinte nome:exercicio6_2.html



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

Unidades de MedidaUnidades de MedidaUnidades de MedidaUnidades de MedidaUnidades de Medida

O valor de um comprimento escreve-se como um número seguido de umaabreviação que indica as unidades de medida. Não podemos colocar espaços entreo número e as unidades (não escreva 2 cm mas sim 2cm). Quando o comprimeto é0 (zero) não é preciso indicar as unidades.

A tabela seguinte descreve as unidades de medida que podemos usar em CSS.

edadinU edadinU edadinU edadinU edadinU oãçircseD oãçircseD oãçircseD oãçircseD oãçircseD

% rolavmuedmegatnecrep

ni )hcni(sadagelop

mc sortemítnec

mm sortemílim

meeuqarteledopitodohnamatoalaugiéme1

odasuresaátse

xearteledopiton"x"arteladarutlaàlaugiéxe1rolavodedatemedacrec(odasuresaátseeuq

.)ezis-tnofedadeirporpad

tp )sadagelop27/1euqomsemoétp1(sotnop

cp )tp21euqomsemoécp1(sacip

xpodnarcéonotnopmuéxp1(slexip

)rodatupmoc

Pseudo-classesPseudo-classesPseudo-classesPseudo-classesPseudo-classes

As pseudo-classes permitem-nos associar efeitos especiais a selectores CSS ou apartes de selectores.

SintaxeSintaxeSintaxeSintaxeSintaxe

A sintaxe das pseudo-classes é a seguinte:

selector:pseudo-classe { propriedade: valor }



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

Lista de pseudoLista de pseudoLista de pseudoLista de pseudoLista de pseudo-----classesclassesclassesclassesclasses

essalc-oduesP essalc-oduesP essalc-oduesP essalc-oduesP essalc-oduesP edadilaniF edadilaniF edadilaniF edadilaniF edadilaniF

evitca odanoiccelesknilmuaracilpaaolitseoenifeD

revohoodnauqknilmuaracilpaaolitseoenifeD

eleerbosátseotarodorietnop

kniladniaeuqknilmuaracilpaaolitseoenifeD

odatisiviofoãn

detisiviofájeuqknilmuaracilpaaolitseoenifeD

odatisiv

dlihc-tsrifsodoriemirpoaracilpasaolitseoenifeD

ortuomuedortnedmartnocneeseuqsotnemele).etnednecsedoriemirp(otnemele

gnalsetnerefidsocitsílitsesotubirtarinifedetimreP

adanimretedamunotircseotxetoaracilpaarapaugníl

Exemplos:Exemplos:Exemplos:Exemplos:Exemplos:

- Dar cores diferentes a uma ligação- Dar cores diferentes a uma ligação- Dar cores diferentes a uma ligação- Dar cores diferentes a uma ligação- Dar cores diferentes a uma ligação


a:link {{{{{color::::: #FF0000}}}}}a:visited {{{{{color::::: #00FF00}}}}}a:hover {{{{{color::::: #FF00FF}}}}}a:active {{{{{color::::: #0000FF}}}}}

</style></head><body> <p style=”font-weight: bold”> <a href=”http://www.alcobias.net”>Isto é uma ligação</a></p> <p><b>Nota:</b> a:hover deve ser definido DEPOIS de a:link e de

a:visited já estarem definidos para que tudo funcione bem. </p> <p><b>Nota:</b> a:active deve ser definido DEPOIS de a:hover

já estar definido para que tudo funcione bem.</p></body></html>



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

Pseudo-elementosPseudo-elementosPseudo-elementosPseudo-elementosPseudo-elementos

Os pseudo-elementos são usados em CSS para adicionar efeitos a alguns selectoresou a partes de selectores.

SintaxeSintaxeSintaxeSintaxeSintaxe

A sintaxe das pseudo-elementos é a seguinte:

selector:pseudo-elemento { propriedade: valor }

Lista de pseudoLista de pseudoLista de pseudoLista de pseudoLista de pseudo-----elementoselementoselementoselementoselementos

sotnemele-oduesP sotnemele-oduesP sotnemele-oduesP sotnemele-oduesP sotnemele-oduesP edadilaniF edadilaniF edadilaniF edadilaniF edadilaniF

rettel-tsrifartelariemirpaaraplaicepseolitsemuenifeD

.otxetmued

enil-tsrifahnilariemirpaaraplaicepseolitsemuenifeD

.otxetmued

erofeb otnemelemuedsetnaodúetnocmuglaeresnI

retfa otnemelemuedsiopedodúetnocmuglaeresnI

Exemplos:Exemplos:Exemplos:Exemplos:Exemplos:

- Dar um estilo especial à primeira letra de um texto- Dar um estilo especial à primeira letra de um texto- Dar um estilo especial à primeira letra de um texto- Dar um estilo especial à primeira letra de um texto- Dar um estilo especial à primeira letra de um texto

<html> <head><style type=”text/css”>

div:first-letter{{{{{color::::: red;;;;;font-size:::::xx-large}}}}}</style></head><body> <p><b>Nota:</b> O Internet Explorer 5.0 não

suporta o pseudo-elemento “first-letter”.</p> <div>

O pseudo-elemento “first-letter” permite dar um estiloespecial ao texto fazendo com que a primeira letra deum bloco tenha um estilo diferente.

</div></body></html>



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

BibliografiaBibliografiaBibliografiaBibliografiaBibliografia

Livros:

- Fonseca, Dalila. Pacheco, Deolinda. Marques, Fernandes e Soares, Ricardo. Curso Tecnológico de Informática - 11º Ano- Aplicações Informáticas A. Porto Editora.

Páginas da web:

http://www.artifice.web.pt/tutoriais/cntd/tut_css1.html

http://www.w3.org/TR/1998/REC-html40-19980424/

unidade 4 – concepção de web sites. subunidade 2 ... · cascading style sheets cascading style...

Documents