Upload
others
View
3
Download
0
Embed Size (px)
Citation preview
- - - - - 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
- - - - - 2 - - - - -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
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.
- - - - - 3 - - - - -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
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.
- - - - - 4 - - - - -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
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>
- - - - - 5 - - - - -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
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>
<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>
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>
<TITLE>Mais um Exemplo se Style Sheet</TITLE></HEAD><BODY>
<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>
- - - - - 6 - - - - -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
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>
<TITLE>Mais um Exemplo se Style Sheet</TITLE></HEAD><BODY>
<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.
- - - - - 7 - - - - -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
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
- - - - - 8 - - - - -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
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.
<style type="text/css">
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:
<style type="text/css">
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;}
- - - - - 9 - - - - -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
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”>
Exemplo:Exemplo:Exemplo:Exemplo:Exemplo:
<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;}
- - - - - 10 - - - - -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
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>
<style type="text/css">
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;}
Exemplo:Exemplo:Exemplo:Exemplo:Exemplo:
#texto_padrao {font-family: verdana; font-size:12 pt}
- - - - - 11 - - - - -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
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>
- - - - - 12 - - - - -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
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.
- - - - - 13 - - - - -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
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)
- - - - - 14 - - - - -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
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
- - - - - 15 - - - - -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
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>
<p>Página com imagem de fundo</p>
<p>Página com imagem de fundo</p>
<p>Página com imagem de fundo</p>
</body></html>
- - - - - 16 - - - - -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
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>
<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>
- - - - - 17 - - - - -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
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>
<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>
<p>Texto da página</p>
<p>Texto da página</p>
<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.
- - - - - 18 - - - - -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
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(
- - - - - 19 - - - - -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
FFFFFontesontesontesontesontes
edadeirporP edadeirporP edadeirporP edadeirporP edadeirporP oãçircseD oãçircseD oãçircseD oãçircseD oãçircseD serolaV serolaV serolaV serolaV serolaV
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
- - - - - 20 - - - - -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
edadeirporP edadeirporP edadeirporP edadeirporP edadeirporP oãçircseD oãçircseD oãçircseD oãçircseD oãçircseD serolaV serolaV serolaV serolaV serolaV
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
- - - - - 21 - - - - -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
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>
- - - - - 22 - - - - -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
<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.
- - - - - 23 - - - - -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
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:
edadeirporP edadeirporP edadeirporP edadeirporP edadeirporP oãçircseD oãçircseD oãçircseD oãçircseD oãçircseD serolaV serolaV serolaV serolaV serolaV
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
htdiw-redrobelyts-redrobroloc-redrob
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
.atieridàsadatsilsedadeirporpsàsodad
htdiw-redrobelyts-redrobroloc-redrob
roloc-tfel-redrobodalodarietnorfedahniladrocaenifeD
odreuqseroloc-redrob
elyts-tfel-redrobodalodarietnorfedahniladolitseoenifeD
odreuqseelyts-redrob
htdiw-tfel-redrobodarietnorfedahniladarussepseaenifeD
odreuqseodalhtdiw-redrob
thgir-redrob
arapadaiverbaamrofamuson-ecerefOahniladsedadeirporpsasadotsomrevercse
acinúamunotieridodalodarietnorfedresmedopeuqserolavsoatiecA.oãçaralced
.atieridàsadatsilsedadeirporpsàsodad
htdiw-redrobelyts-redrobroloc-redrob
roloc-thgir-redrobodalodarietnorfedahniladrocaenifeD
otieridroloc-redrob
elyts-thgir-redrobodalodarietnorfedahniladolitseoenifeD
otieridelyts-redrob
htdiw-thgir-redrobodarietnorfedahniladarussepseaenifeD
otieridodalhtdiw-redrob
- - - - - 24 - - - - -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
edadeirporP edadeirporP edadeirporP edadeirporP edadeirporP oãçircseD oãçircseD oãçircseD oãçircseD oãçircseD serolaV serolaV serolaV serolaV serolaV
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
arapadaiverbaamrofamuson-ecerefOahniladsedadeirporpsasadotsomrevercse
acinúamunamicedodalodarietnorfedresmedopeuqserolavsoatiecA.oãçaralced
.atieridàsadatsilsedadeirporpsàsodad
htdiw-redrobelyts-redrobroloc-redrob
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
- - - - - 25 - - - - -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
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>
2. Grave o documento com o seguinte nome: exercicio4_1.html
3. Escreva o seguinte código num novo documento.Este código permite definirdiferentes limites e utilização de cores.
<html><head><style type=”text/css”>
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>
- - - - - 26 - - - - -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
<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>
4. Grave o documento com o seguinte nome: exercicio4_2.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>
- - - - - 27 - - - - -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
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:
edadeirporP edadeirporP edadeirporP edadeirporP edadeirporP oãçircseD oãçircseD oãçircseD oãçircseD oãçircseD serolaV serolaV serolaV serolaV serolaV
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.
- - - - - 28 - - - - -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
edadeirporP edadeirporP edadeirporP edadeirporP edadeirporP oãçircseD oãçircseD oãçircseD oãçircseD oãçircseD serolaV serolaV serolaV serolaV serolaV
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:
<html><head><style type=”text/css”>
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>
- - - - - 29 - - - - -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
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.
edadeirporP edadeirporP edadeirporP edadeirporP edadeirporP oãçircseD oãçircseD oãçircseD oãçircseD oãçircseD serolaV serolaV serolaV serolaV serolaV
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:
<style type="text/css">
ul {list-style-image: url("seta.gif")}
</style>
- - - - - 30 - - - - -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
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>
2. Grave o documento com o seguinte nome: exercicio5_1.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.
- - - - - 31 - - - - -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
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.
edadeirporP edadeirporP edadeirporP edadeirporP edadeirporP oãçircseD oãçircseD oãçircseD oãçircseD oãçircseD serolaV serolaV serolaV serolaV serolaV
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
- - - - - 32 - - - - -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
Dimensionamento de imagensDimensionamento de imagensDimensionamento de imagensDimensionamento de imagensDimensionamento de imagens
Exemplo:Exemplo:Exemplo:Exemplo:Exemplo:
<html><head><style type=”text/css”>
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
Exemplo:Exemplo:Exemplo:Exemplo:Exemplo:
<html><head><style type=”text/css”>
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>
- - - - - 33 - - - - -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
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:
edadeirporP edadeirporP edadeirporP edadeirporP edadeirporP oãçircseD oãçircseD oãçircseD oãçircseD oãçircseD serolaV serolaV serolaV serolaV serolaV
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
- - - - - 34 - - - - -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
edadeirporP edadeirporP edadeirporP edadeirporP edadeirporP oãçircseD oãçircseD oãçircseD oãçircseD oãçircseD serolaV serolaV serolaV serolaV serolaV
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
- - - - - 35 - - - - -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
edadeirporP edadeirporP edadeirporP edadeirporP edadeirporP oãçircseD oãçircseD oãçircseD oãçircseD oãçircseD serolaV serolaV serolaV serolaV serolaV
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>
- - - - - 36 - - - - -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
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.
edadeirporP edadeirporP edadeirporP edadeirporP edadeirporP oãçircseD oãçircseD oãçircseD oãçircseD oãçircseD serolaV serolaV serolaV serolaV serolaV
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
- - - - - 37 - - - - -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
edadeirporP edadeirporP edadeirporP edadeirporP edadeirporP oãçircseD oãçircseD oãçircseD oãçircseD oãçircseD serolaV serolaV serolaV serolaV serolaV
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
- - - - - 38 - - - - -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
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:
2. Grave o documento com o seguinte nome: exercicio6_1.html
3. Escreva o seguinte código que permite alinhar uma imagem na vertical:
<html><head><style type=”text/css”>
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
- - - - - 39 - - - - -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
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 }
- - - - - 40 - - - - -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
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
<html><head><style type=”text/css”>
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>
- - - - - 41 - - - - -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
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>
- - - - - 42 - - - - -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
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/