02/09/2013

Professores
Professores:
Cristiane Maciel Rizo - cris@unoeste.br
Cssia Alves Perego - cassia@unoeste.br

Os formatos de imagens mais usados e aceitos pela

WEB so: GIF, JPG e PNG.
Para exibir imagens utilizada a tag: <img> 
</img>:
<img src="unoeste.png" alt="Logotipo da UNOESTE"/>

Atributos:

src: a URL do arquivo da imagem.

alt: define um texto alternativo para a imagem, mostrado
quando a imagem no puder ser apresentada.

height (altura) e width (largura): customizar o tamanho da
imagem em pixels.

02/09/2013

Se no for especificada a altura e largura

da imagem, o navegador assume seu
tamanho original.
Ao especificar somente o atributo width,
no especificando height, o navegador
ajusta automaticamente a altura
proporcionalmente largura.
Exemplo:
<img src="unoeste.png" alt="Logotipo da UNOESTE"
width="150px" />

A propriedade margin definida para "0 auto" indica que as

margens superiores e inferiores do seletor sero de 0; e as
margens da direita e esquerda sero "automticas", ou seja, o
browser ir calcular o espao que o seletor est ocupando e
dividir por 2, centralizando o elemento.
Exemplo:
.centraliza{width: 500px; margin: 0 auto; display: block;}

A declarao display: block faz com que o elemento HTML

seja renderizado como bloco, tal como os pargrafos e os
cabealhos o so.
Esta tcnica por ser usada para centralizar uma pgina ou
elementos HTML de bloco.

02/09/2013

Alinhamento vertical de uma imagem em relao ao

texto: vertical-align: modo-de-alinhamento;
Os valores para a propriedade so:

top - o topo da imagem alinha com a linha top.

text-top - O topo da imagem alinha com a linha text-top.
baseline - Este o alinhamento padro.
middle - O ponto mdio da imagem alinha com a linha baseline.
text-bottom - A parte inferior da imagem alinha com a linha text-bottom.
bottom - A parte inferior da imagem alinha com a linha bottom.
sub - A parte inferior da imagem alinha com a linha baseline do
contedo subscrito (ainda que no haja subscrito no texto).
super - A parte inferior da imagem alinha com a linha baseline do
contedo sobrescrito (ainda que no haja sobrescrito no texto).

<figure>: rea destinada para contedos como

imagens, ilustraes, diagramas, fotos, grficos,
videos, linha de cdigo e similares.
<figure>
<figcaption>Grfico: Mdia da turma</figcaption>
<img src="grafico.png" alt="Mdia da turma"/>
</figure>
<mark>: marca o texto no estilo caneta grifa-texto.
<mark>texto marcado</mark>

02/09/2013

Sintaxe:
opacity: 0.65 - Previsto nas CSS3 j suportado atualmente
pelo Firefox 2 e pelo pera 9, o valor da opacidade varia de 0
a 1;
-moz-opacity: 0.65 - Declarao proprietria para servir
navegadores Mozilla, o valor da opacidade varia de 0 a 1;
filter: alpha(opacity=65) - Declarao proprietria para servir
navegadores IE o valor da opacidade varia de 0 a 100 .

Para definir uma imagem a ser usada como padro

de fundo usa-se a propriedade
background-image:
background-image: url(fipp.gif);

02/09/2013

Existe uma propriedade que permite definir como a imagem ir

preencher o espao do padro de fundo: background-repeat.
Possveis valores:
no-repeat: imagem no deve ser repetida.
repeat-x: para repetir a imagem no sentido horizontal do
elemento HTML ao qual ela est associada.
repeat-y: para repetir a imagem no sentido vertical do
documento, at atingir a margem sua margem inferior.
repeat: para repetir a imagem tanto horizontal como
verticalmente, preenchendo toda a rea de visualizao do
elemento.
Se esta propriedade no for especificada, o browser adotar o
valor default repeat.

possvel controlar se a imagem ir acompanhar a rolagem

da tela ou permanecer fixa atravs da propriedade
background-attachment.
Possveis valores:
Scroll: quando a imagem acompanha a rolagem da tela
(padro).
Fixed: quando a imagem no acompanha a rolagem da
tela

02/09/2013

possvel controlar a posio da imagem dentro do

elemento HTML atravs da propriedade backgroundposition:
background-position: coordenada-horizontal coordenada-vertical;

Exemplo: os valores 30px 10px para coordenada,

indicam que o canto superior esquerda da imagem deve
estar a 30px da borda esquerda da rea de visualizao
e a 10px da borda superior desta mesma rea.