Apostila de CSS PDF

Desenvolvida exclusivamente para o Apostilando.
com
por Marcos Paulo Furlan
1
NDICE
NDICE .......................................................................................................................................... 2
HTML............................................................................................................................................. 5
XHTML ........................................................................................................ 5
Como se cria um documento HTML ............................................................... 6
Tags ou comandos HTML ........................................................................... 7
Estrutura Bsica ............................................................................................. 8
Comentrios .............................................................................................. 10
Pargrafos e quebras de linha ...................................................................... 10
O Comando <P> ....................................................................................... 10
Alinhando pargrafos ................................................................................ 11
O Comando <BR> ..................................................................................... 11
O Comando <HR> .................................................................................... 11
Alterando o formato de linha de separao............................................... 11
USANDO IMAGENS COMO LINHAS SEPARADORAS ........................... 12
DIV ............................................................................................................ 12
blockquote ................................................................................................. 12
Estilos de Texto e Fonte ............................................................................... 12
Alterando o tamanho da fonte ................................................................... 13
Size ........................................................................................................... 13
Face .......................................................................................................... 13
Color.......................................................................................................... 13
Cabealhos ................................................................................................... 14
Alinhando cabealhos ............................................................................... 14
Listas ............................................................................................................ 15
Listas Ordenadas ...................................................................................... 15
Listas No ordenadas ............................................................................... 16
Lista de Definio ...................................................................................... 16
Imagens ........................................................................................................ 17
urls e links ..................................................................................................... 19
URL ........................................................................................................... 20
Criando um Link com Arquivos Locais ...................................................... 20
Usando uma Imagem como Hiperlink ....................................................... 20
Vinculando Arquivos de outros diretrios .................................................. 21
CRIANDO LINKS PARA SEES DE UMA PGINA .............................. 21
Criando uma ncora ................................................................................. 21
Enviando E-Mail diretamente da Pgina HTML ........................................ 21
Definindo Destinos .................................................................................... 21
TABELAS...................................................................................................... 22
Elementos bsicos de tabelas ...................................................................... 22
Parmetros................................................................................................ 23
Parmetros do elemento <TABLE> .......................................................... 23
Parmetros do elemento <TR> ................................................................. 24
Parmetros dos Elementos <TD> e <TH> ................................................ 24
META ............................................................................................................ 26
2
Informaes especficas............................................................................ 26
Variaes do comando meta..................................................................... 27
Multimdia ..................................................................................................... 27
Considerao no uso de multimdia .......................................................... 28
FOLHAS DE ESTILO .................................................................................................................. 28
Verses da CSS ........................................................................................ 28
CSS - 1...................................................................................................... 28
CSS Position (CSS-P) ............................................................................ 29
CSS 2 ..................................................................................................... 29
CSS 3 ..................................................................................................... 29
Regras da CSS ......................................................................................... 29
Incluindo CSS no Documento ................................................................... 30
Incluindo a CSS em uma pgina WEB ...................................................... 31
Incluindo a CSS em um site da WEB ........................................................ 32
Principais atributos de uma folha de estilo ................................................ 33
Definindo classes ...................................................................................... 35
Definindo IDS ............................................................................................ 35
Definindo TAGS dentro do contexto .......................................................... 36
Definindo a CSS para impresso .............................................................. 37
Definindo Quebras de pgina para a impresso ....................................... 38
Controles de Texto .................................................................................... 38
Ajustando as Entrelinhas........................................................................... 39
Definindo Segundo Plano.......................................................................... 39
Bordas ....................................................................................................... 40
Envolvendo um elemento com texto ........................................................ 40
Posicionamentos ....................................................................................... 41
Posicionamento Esttico ........................................................................... 41
Posicionamento Relativo ........................................................................... 41
Posicionamento Absoluto .......................................................................... 42
Posicionamento 3D ................................................................................... 42
Regras, declaraes e seletores ............................................................... 42
Mltiplas declaraes e seletores ............................................................. 43
Comentrios e instrues.......................................................................... 44
Valores ...................................................................................................... 45
Herana..................................................................................................... 46
Como incluir estilos em uma pgina ............................................................. 47
Classes e IDs................................................................................................ 50
Links (pseudo-classes e pseudo-elementos) ................................................ 51
Fontes ........................................................................................................... 51
font-family.................................................................................................. 52
font-size..................................................................................................... 53
font-style e font-weight .............................................................................. 55
font-variant ................................................................................................ 56
text-transform ............................................................................................ 56
text-decoration .......................................................................................... 57
text-align e vertical-align............................................................................ 58
text-indent ................................................................................................. 58
3
line-height.................................................................................................. 59
letter-spacing............................................................................................. 59
Propriedade Color......................................................................................... 59
background-color ...................................................................................... 60
background-image .................................................................................... 60
Propriedades de Classificao ..................................................................... 63
display ....................................................................................................... 63
white-space ............................................................................................... 63
list-style ..................................................................................................... 63
Blocos ........................................................................................................... 64
margin e padding ...................................................................................... 65
border-width .............................................................................................. 66
border-color ............................................................................................... 67
border-style ............................................................................................... 68
border ........................................................................................................ 69
width e height ............................................................................................ 69
float ........................................................................................................... 69
clear .......................................................................................................... 70
Posicionamento ............................................................................................ 70
position, top e left ...................................................................................... 70
z-index....................................................................................................... 70
visibility ...................................................................................................... 71
HTML 5........................................................................................................................................ 71
Exemplo de um cdigo HTML5 ................................................................. 71
4
HTML
HTML (acrnimo para a expresso inglesa Hypertext Markup Language, que
significa Linguagem de Marcao de Hipertexto) uma linguagem de
marcao utilizada para produzir pginas na Web. Documentos HTML podem
ser interpretados por navegadores.
XHTML
O XHTML, ou eXtensible Hypertext Markup Language, uma reformulao da
linguagem de marcao HTML, baseada em XML. Combina as tags de
marcao HTML com regras da XML. Este processo de padronizao tem em
vista a exibio de pginas Web em diversos dispositivos (televiso, palm,
celular, etc). Sua inteno melhorar a acessibilidade.
O XHTML consegue ser interpretado por qualquer dispositivo,
independentemente da plataforma utilizada, pois as marcaes possuem
sentido semntico para as mquinas. O HTML no consegue esta
implementao. No entanto, no existem muitas diferenas entre o HTML e o
XHTML. Para verificar se uma pgina XHTML est bem construda, o melhor
mtodo validar o cdigo atravs de uma aplicao Web disponibilizado pela
organizao W3C.
A Recomendao XHTML original da W3C, XHTML 1.0, foi simplesmente uma
reformulao do HTML 4.01 em XML. Existem trs diferentes "DTDs" de
XHTML 1.0, cada qual com equivalncia a uma verso em HTML 4.01.
XHTML 1.0 Strict o mesmo que HTML 4.01 Strict, mas segundo regras
de sintaxe XML.
XHTML 1.0 Transitional o mesmo que HTML 4.01 Transitional, mas
segue as regras de sintaxe XML. Ele suporta tudo encontrado no XHTML
1.0 Strict, mas tambm permite o uso de vrios elementos e atributos que
so julgados presencionais, para facilitar a transio de HTML 3.2 e mais
recentes. Isso inclui <center>, <u>, <strike>, e <applet>.
XHTML 1.0 Frameset: o mesmo que HTML 4.01 Frameset, mas
segundo as regras de sintaxe XML. Ele permite a definio de um
5
frameset HTML, uma prtica comum em verses de HTML anteriores ao
HTML 4.01.
A mais recente Recomendao XHTML da W3C o XHTML 1.1: Module-based
XHTML, que uma reformulao do XHTML 1.0 Strict, com pequenas
modificaes, usando alguns mdulos de um conjunto definido em
Modularizao de XHTML[1], uma Recomendao W3C que cria uma
modularizao de frames, um padro de mdulos, e vrias outras definies.
Todas as ferramentas depreciadas de HTML, como elementos presencionais e
framesets, e at mesmo os atributos lang e o atributo de ncoras name, que
ainda eram permitidos no XHTML 1.0 Strict, foram removidos desta verso. A
apresentao controlada puramente pelas Folhas de Estilo em Cascata
(CSS). Esta verso tambm permite suporte marcao rubi, necessria para
lnguas do Extremo Oriente (especialmente CJK).
Alm da Modularizao de XHTML permitir pequenas ferramentas XHTML
serem reutilizadas por outras aplicaes XML de uma maneira bem definida, e
que o XHTML seja estendido para alguns propsitos, XHTML 1.1 adiciona o
conceito de um documento "estritamente conformado": esses documentos
definidos nos mdulos requeridos para XHTML 1.1. Por exemplo, se um
documento estendido para usar o mdulo XHTML Frames (frameset), ele
tambm pode ser descrito como XHTML 1.1, mas no estritamente conforme o
XHTML 1.1. Ao invs disso, ele deve ser descrito como um XHTML Host
Language Conforming Document[2], se a ferramenta for relevante e
necessria.
Como se cria um documento HTML
Uma pgina Web composta de textos e comandos especiais (tags). Assim

como qualquer linguagem, o programador deve escrever o cdigo-fonte
seguindo as regras da linguagem. Esse cdigo-fonte posteriormente
interpretado pelo browser, que se encarregar de executar os comandos (tags)
do cdigo para formatar e acessar recursos da Web.
O cdigo fonte pode ser escrito usando-se o mais simples dos editores de
texto. At o programa Bloco de Notas pode ser usado para esta tarefa. Mas
6
existem editores WYSIWYG (What you see is what you get, ou o que voc v
o que realmente obtm) como exemplo podemos citar o Dreamweaver.
Existem ainda editores no WYSIWIG, onde voc tem que construir o cdigo,
mas ele completa muitos comando, como exemplo podemos citar o Sothink
HTML Editor (disponvel na pasta do Dreamweaver), e na prpria Internet
existem vrios destes editores gratuitos.
Tags ou comandos HTML
As TAGS normalmente so especificadas em pares, delimitando um texto que

sofrer algum tipo de formatao.
As TAGS so identificadas pelo sinais < > ou </ >.
Entre os sinais <> so especificados os comandos propriamente ditos. No caso
de tags que necessitam envolver um texto, sua finalizao deve ser feita
usando-se a barra de diviso / , indicando que a TAG est finalizando a
marcao de texto.
Os principais elementos de pgina HTML so, ttulos, textos, pargrafos,
imagens e links, responsveis pela chamada de outras pginas para a tela:
Ttulo: o texto que aparece na barra de ttulo do browser.

Imagem: So figuras, desenhos e fotos usados para ilustrar a pgina.
7
Texto: a informao mais comum dentro de uma pgina. Pode ser formatado
atravs de comandos.
Link: um trecho que aparece destacado do restante do texto, normalmente
sublinhado e com outra cor. Ao clicar no Link, o browser acessa outra regio da
pgina atual ou uma pgina localizada em qualquer lugar na Internet. Uma
figura tambm pode ser usada como link, ou seja, clicando na figura saltamos
para outro local.
Cabealho: So linhas de texto com tamanhos especiais. Existem seis
tamanhos de cabealhos.
Estrutura Bsica
A estrutura bsica de um documento HTML a seguinte:
<HTML>
<HEAD>
<TITLE> Ttulo do Documento</TITLE>
</HEAD>
<BODY> Aqui dever ser digitado e criado a maioria dos itens que iro
aparecer em sua Home Page
</BODY>
</HTML>
Vamos ver um pouco sobre os elementos bsicos do HTML:

<HTML></HTML>: Indicam respectivamente o incio e o fim do documento.
Todo o resto deve estar entre estas marcas.
<HEAD></HEAD>: Delimitam a seo de cabealho do documento. Trata-se
da primeira seo do documento.
<TITLE></TITLE>: Indicam o ttulo do documento, que ser apresentado na
barra superior do browser. Estas marcas devem constar da seo de
cabealho.
<BODY></BODY>: Corpo do documento. Entre estas marcas estar o
contedo a ser apresentado, textos, cores, imagens, etc. Este elemento pode
conter cinco parmetros opcionais:
8
BACKGROUND: configura especificar uma imagem como fundo da pgina.
EX. <BODY BACKGROUND= fundo.gif > configura uma pgina com a
imagem fundo.gif como fundo.
BGCOLOR: Configura a cor de fundo da pgina. EX: <BODY BGCOLOR=
White > configura uma pgina com fundo branco (padro).
TEXT: configura a cor padro do texto da pgina. EX: <BODY TEXT= Black
> configura uma pgina com texto em cor preta. (padro).
LINK, ALINK, VLINK: configura as cores dos links da pgina. ALINK configura
a cor do link ativo, isto quando clicado, e VLINK configura a cor de um link
j visitado. EX: <BODY LINK=Blue VLINK=Purple ALINK=Red>
configura uma pgina com links azuis, links ativos vermelhos e links visitados
roxos.
Esta estrutura inicial simples, no entanto existem detalhes que devem ser
respeitados:
Todas as marcas apresentadas so do tipo incio-fim, ou seja, funcionam em
pares.
Em cada documento HTML s deve haver uma marca de cada tipo acima.
Existe uma ordem seqencial lgica entre as marcas.
Estes detalhes devem ser respeitados, seno o browser no conseguir
apresentar o documento.
Como HTML no uma linguagem de programao, voc no ser avisado de
erros que tenha cometido na edio do seu documento.
Criando o primeiro documento HTML
<HTML>
<HEAD>
<TITLE>Este o meu primeiro documento em HTML</TITLE>
</HEAD>
<BODY BGCOLOR=Red TEXT=White>
Agora no corpo do texto vou digitar o meu primeiro texto em Html, no
momento no usarei nenhuma formatao especial aqui dentro.
</BODY>
9
</HTML>
Comentrios
Podemos tambm acrescentar comentrios ao nosso cdigo HTML, estes
comentrios no aparecem para no navegado e somente no cdigo, so
representados pela seguinte TAG <!- - inicia o comentrio //- - >, finaliza o
comentrio.
So utilizados para ocultar scripts dentro do cdigo Html, pois caso o script no
possa ser processado o mesmo ser ignorado pelo navegador.
Caracteres especiais
Existem caracteres que no podem ser obtidos atravs de teclado. Eles podem
ser inseridos em sua pgina atravs da especificao de um cdigo especial
que o browser interpreta e substitui por um caractere especfico. Esses cdigos
podem ser obtidos utilizando-se uma nomenclatura definida pela norma ISO.
Alguns dos smbolos mais utilizados no HTML o que corresponde
ao espao do teclado, j que na HTML ele considera apenas um espao. Para
uma tabela mais completa visite o link
http://www.w3.org/TR/html401/sgml/entities.html
Pargrafos e quebras de linha
Ao contrrio dos editores de texto comum, nos quais voc insere uma quebra
ou avano de linha toda vez que pressiona a tecla ENTER, em um programa
HTML necessrio colocar um comando especfico para que o browser
entenda que voc deseja mudar de linha e iniciar uma nova linha ou comear
um novo pargrafo. Existem dois comandos para criar quebras de linha e
novos pargrafos. So os comandos <P> e <BR>
O Comando <P>
Para forar um novo pargrafo, ou seja, avanar uma linha em branco e iniciar
o texto na segunda linha aps o final do pargrafo anterior deve ser usado o
comando <P>.
10
Alinhando pargrafos
O Comando <P> inicia um novo pargrafo onde o texto automaticamente

alinhado pela margem esquerda da tela. Atravs do parmetro ALIGN, pode-se
mudar o alinhamento de forma que o texto do pargrafo inteiro fique
centralizado ou alinhado direita. Nesse caso, deve-se usar um par de
comandos <P> envolvendo o pargrafo.
ALIGN=CENTER Centraliza o texto.

ALIGN=RIGHT Alinha pela margem direita
ALIGN=JUSTIFY Alinha pelas duas margens
ALIGN=LEFT Alinha pela margem esquerda (padro)
O Comando <BR>
O comando <P> insere uma linha em branco no seu local ou na linha seguinte
qual ele foi inserido, caso esteja no meio de uma linha de texto e no em seu
final. O comando <BR> tem como funo avanar para a linha imediatamente
aps quela em que ele se encontra, sem, contudo, deixar uma linha em
branco.
O Comando <HR>
O comando <HR> tem como finalidade inserir uma linha divisria na posio
em que foi especificado. Seu uso recomendado para criar uma diviso na
pgina.
Alterando o formato de linha de separao
As linhas criadas pelo comando <HR> podem Ter o seu tamanho alterado
pelos parmetros SIZE e WIDTH. O parmetro SIZE altera a espessura (altura)
da linha, deixando-a mais grossa em funo do valor especificado. Esse valor
expresso em pixels.
A largura ou comprimento da linha alterada pelo parmetro WIDTH e pode
ser expresso em pixels, sendo que, nesse caso, o tamanho da linha fixo ou
utiliza uma porcentagem relativa largura da janela. Assim, seu tamanho varia
11
em funo da largura da janela. Veja o cdigo abaixo:
USANDO IMAGENS COMO LINHAS SEPARADORAS
Em vez de usar o comando <HR> como separador, podemos usar uma

imagem com o comando <IMG>. Assim como o comando HR, podemos usar
os parmetros WIDTH e HEIGHT para alterar o tamanho da imagem.
DIV
A Tag <DIV></DIV> envolve uma rea do texto ou diviso que pode receber
parmetros especficos de alinhamento, como o caso de ALIGN, para alinhar
o texto. Podemos envolver vrios pargrafos com o elemento DIV
blockquote
O comando Blockquote permite dar recuos de pargrafos aos pargrafos, e
pode ser cumulativo
Estilos de Texto e Fonte

Assim como no editor de textos, voc pode criar uma srie de efeitos no texto,
alterando a forma ou o tipo da fonte. Todos os comandos que alteram o estilo
do texto so do tipo continer ou liga desliga, ou seja, precisam ser
especificados em pares, marcando o incio e fim do texto que sofrer a
formatao.
Os principais comandos de estilo de texto so:
Comando Sintaxe Funo
Negrito <B>Texto</B> Aplica o estilo Negrito
Itlico <I>Texto</I> Aplica o estilo Itlico
Sublinhado <U>Texto</U> Aplica o estilo sublinhado(No
funciona em alguns Browsers
Strong <Strong>Texto</Strong Similar ao Negrito
>
Typerwriter <TT>Texto</TT> Deixa o texto com espaamento
regular
12
Big <BIG>Texto</BIG> Aumenta a fonte e aplica negrito
Small <SMALL>Texto</SMAL Reduz e altera a fonte
L>
Sobrescrito <SUP>Texto</SUP> Eleva o texto e diminui seu corpo
Subscrito <SUB>Texto</SUB> Rebaixa o texto e diminui seu
corpo
Pulsante <BLINK>Texto</BLINK Faz com que o texto pisque (No
> funciona no IE 4.
Alterando o tamanho da fonte
Um dos recursos de tratamento do texto mais interessantes da linguagem

HTML a possibilidade de alterar o tamanho, a cor e o tipo da fonte do texto
utilizado. O comando responsvel por isso o comando <FONT>, que do tipo
liga desliga.
Size
O parmetro size especifica o tamanho da fonte utilizada. Os valores
permitidos vo de 1, o menor at 7, o maior. O padro 3. Se for especificado
um nmero antecedido pelo sinal de adio ou de subtrao, o tamanho da
fonte atual ser aumentado ou diminudo nesse valor. Por exemplo, se a fonte
atual 3 e for especificado <FONT SIZE=+2> o texto ser exibido no tamanho
5. Se o valor for especificado sem sinal, a fonte ser exibida no tamanho
especificado.
Face
Esse parmetro permite que seja escolhida uma fonte diferente para o texto.
Podemos especificar vrias fontes, de maneira que, se o sistema no possuir a
primeira opo, a segunda carregada.
Se no for encontrada nenhuma das fontes especificadas, o texto exibido na
fonte padro.
Color
Esse parmetro especifica a cor do texto. Seu valor pode ser especificado no
13
formato hexadecimal, RGB ou atravs de um nome predefinido de cores como
mostra a tabela abaixo:
Cor Cdigo Cor Cdigo
Aqua #70DB93 Blue #0000FF
Black #000000 Cyan #00FFFF
Fcsia #FF00FF Gray #C0C0C0
Green #00FF00 Lime #32CD32
Brown #800000 Navy #23238E
Olive #808000 Red #FF0000
Silver #E6E8FA Teal #008080
White #FFFFFF Yellow #FFFF00
No exagere na quantidade cores e tamanho das letras do texto ou a sua

pgina parecer uma mensagem enviada por cdigo.
Cabealhos
Outra forma muito usada para mudar o tamanho da letra e aplicar um efeitos
em textos utilizando cabealhos. A linguagem HTML possui seis comandos
de cabealho de <H1> at <H6>. Alm do tamanho diferenciado, o comando
cabealho insere uma linha em branco antes e depois da linha que contm o
comando. Eles so perfeitos para criar ttulos e iniciar sees dentro de uma
pgina. O comando <H1> possui o maior tamanho enquanto que <H6> possui
o menor tamanho de fonte.
Alinhando cabealhos
Como padro um cabealho gerado pelo comando <Hn> sempre posicionado

no lado esquerdo da linha. Usando o parmetro ALIGN pode-se centralizar ou
ajustar o cabealho direita da linha.
Veja o cdigo:
<HTML>
<HEAD>
14
<TITLE>Alinhando Cabealhos</TITLE>
</HEAD>
<BODY>
<H2> Cabealho sem alinhamento especial</H2>
<HR>
<H2 ALIGN=CENTER>Cabealho com alinhamento centralizado</H2>
<HR>
<H2 ALIGN=RIGHT>Cabealho com alinhamento direita</H2>
</BODY>
</HTML>
Listas
Na linguagem HTML existem elementos especficos para a criao de listas,
que podem ser listas ordenadas (OL), listas sem ordenao (UL), ou listas de
definies (DL). Um detalhe interessante que podem ser criadas listas
aninhadas, ou seja, listas dentro de listas. A seguir, veremos as caractersticas
de cada umas delas.
Listas Ordenadas
<OL TYPE=...START=...>...</OL> so os elementos delimitadores de listas

ordenadas (OL Ordered Lists). A estrutura das listas ordenadas bastante
simples: entre os elementos de incio e fim, os itens da lista so definidos pelos
elementos <LI></LI>. Os itens so apresentados em linhas consecutivas e
precedidos por uma numerao atribuda pelo paginador. O parmetro opcional
TYPE define como ser o tipo de numerao de cada linha. Os tipos
disponveis so: A (A,B,...Z), a(a,b,...z), I (I,II,III, etc.), i (i,ii,iii,etc), e 1
(1,2,3,etc). Se omitido, utilizado o tipo padro (1,2,3, etc). O parmetro
opcional START define a partir de que elemento a numerao deve se iniciar.
Ele deve receber como valor um nmero indicando em que posio a
contagem deve se iniciar.
15
Listas No ordenadas
<UL>...</UL> so os elementos delimitadores de listas sem ordenao (UL

Unordered Lists). A estrutura das listas sem ordenao a mesma das listas
ordenadas, sendo que, na apresentao, os itens sero precedidos por um
marcador (bullet). No caso de listas sem ordenao aninhadas (listas dentro de
listas), o paginador utilizar um marcador (bullet) diferente para os itens de
cada lista.
Como j foi visto acima <LI>...</LI> o elemento que define um item de uma
lista ordenada ou sem ordenao. O seu contedo pode ser texto, outras listas,
imagens, links ,etc.
Lista de Definio
<DL>...</DL> so as marcas que englobam uma lista de definies, ideais para

a criao de glossrios e coisas do gnero. A estrutura desta lista diferente
das outras, pois existem dois elementos o termo a ser definido (DT), e a
definio propriamente dita (DD). Na apresentao cada termo aparece em
uma linha, e a respectiva definio na linha seguinte, deslocada para a direita.
<HTML>
<HEAD>
<TITLE>Listas de definio</TITLE>
</HEAD>
<BODY>
<H2>Listas de definio</H2>
<DL>
<DT>HTML</DT>
<DD>Hiper Text Markup Language</DD>
<DT>OL</DT>
<DD>Listas ordenadas com numerao.</DD>
<DT>UL</DT>
<DD>Listas sem ordenao</DD>
<DT>LI</DT>
16
<DD>Elemento da Lista</DD>
</DL>
<H2>Listas no ordenadas combinadas<BR>com uma lista de
Definio</H2>
<DL>
<DT>Parmetro do elemento OL</DT>
<DD>
<UL>
<LI>TYPE</LI>
<LI>START</LI>
</UL>
</DD>
<DT>Parmetros do elemento IMG</DT>
<DD>
<UL>
<LI>SRC</LI>
<LI>ALT</LI>
<LI>BORDER</LI>
<LI>WIDTH</LI>
<LI>HEIGHT</LI>
<LI>VSPACE</LI>
<LI>HSPACE</LI>
</UL>
</DD>
</DL>
</BODY>
</HTML>
Imagens
Voc pode obter uma imagem atravs de uma cpia feita a partir de uma
pgina da Internet, atravs de CDs ROMs, Scanners, etc. ou pode cri-las a
17
partir de um programa de imagens.
O comando img
Esse comando define a posio de uma imagem que aparece no corpo do

documento.
<IMG SRC=URL WIDTH=... HEIGHT= BORDER= ALT=Texto
VSPACE= HSPACE=>
ALIGN=| BOTTOM | TOP | MIDLE
SRC=URL o nome da figura, se estiver no

mesmo diretrio do programa ou seu
caminho completo.
ALT=texto Exibe o texto quando o browser no
encontra a imagem, ou uma legenda
quando o cursor do mouse passa
sobre ela mostrando o texto
especificado.
ALIGN=TOP | Especifica o alinhamento da imagem
MIDLE | BOTTOM relativamente linha de texto onde
exibida.
ALIGN=LEFT | Especifica o alinhamento da imagem
RIGHT relativamente s bordas laterais da
janela
WIDTH=nmero| Esse parmetro especifica a largura
nmero% de exibio da imagem
independentemente do seu tamanho
fsico. Se a imagem for maior ou
menor do que o valor especificado,
ela ser esticada ou comprimida para
caber no espao especificado. Se for
o colocado o sinal de porcentagem,
ele relativo largura da janela.
18
HEIGHT=nmero Especifica a altura de exibio da
imagem independentemente de seu
tamanho fsico. Se a imagem for
maior ou menor do que o valor
especificado.
BORDER=nmero Especifica em pixels a largura da
borda da imagem. O valor zero
remove a imagem
VSPACE=nmero Determina em pixels o espao que

deve ser deixado em branco na parte
de cima e na parte de baixo da
imagem.
HSPACE=nmero Determina em pixels o espao que
deve ser deixado em branco nas
laterais da imagem
Com exceo do parmetro SRC, todos os demais so opcionais. Portanto,

para exibir uma imagem chamada foto.gif que esteja no mesmo diretrio do
programa deve ser especificado o seguinte comando:
IMG SRC=foto.gif
urls e links
At agora voc aprendeu como criar documentos interessantes, mas que

poderiam ter sido criados em um processador de textos.
O Principal atrativo da Internet a criao de documentos com o conceito de
hipertexto, ou seja , um documento que se liga a outros por meio de vnculos
especiais chamados hyperlinks. Com esse conceito voc pode criar
documentos que faam referncia a um endereo qualquer do computador ou
da Web e permitam ao usurio acessar essas referncias, no importando se
elas esto em outra pgina WEB, no seu micro ou em qualquer servidor da
rede.
19
URL
A Internet usa uma nomenclatura especfica para indicar o endereo de um
documento. Chamada de Uniform Resource Locator (Localizador Universal de
Recursos) ou URL, essa nomenclatura inclui trs componentes. Ela deve
conter o protocolo do documento, (como por exemplo http. Gopher ou WAIS), o
endereo servidor e a localizao do arquivo, usando a seguinte sintaxe:
Protocolo://servidor.NomeDoArquivo
http://www.apostilando.com/index.htm
http: o protocolo
www.apostilando.com: o nome do servidor
index.htm: o nome do documento que ser acessado.
Criando um Link com Arquivos Locais

Vincular um texto com uma pgina local uma tarefa bastante simples. Voc
precisa apenas especificar o nome completo do arquivo que ser chamado,
utilizando o comando <A> de ncora. Veja a sintaxe bsica deste comando:
<A HREF=...NAME...>caracteres</A>
Principais parmetros:
HREF=URL Especifica o endereo do URL ao

qual o link est associado. Pode
ser usado dentro e fora do
documento.
NAME=String Especifica o nome da seo de um
documento qual um link de
hipertexto faz referncia.
Usando uma Imagem como Hiperlink

Voc pode usar uma imagem como hiperlink envolvendo-a com o comando
<A></A>. Em vez de especificar um texto de hiperlink, voc usa o comando
<IMG> para colocar a imagem.
20
Vinculando Arquivos de outros diretrios
Voc pode especificar o endereo de outros diretrios usando um esquema de
caminhos parecido com DOS. Existe uma diferena entre esses caminhos. Na
Web voc deve inverter a barra de espaos, usando a barra / no lugar da barra
\, para separar diretrios.
CRIANDO LINKS PARA SEES DE UMA PGINA
Para dominar o uso do hipertexto, o programador em HTML deve conhecer

bem o funcionamento do comando <A> e dois de seus parmetros da
linguagem. Um o <H HREF>, usado para criar o link em si, e o outro o <A
NAME>, que cria ncoras ou endereos de sees de um documento,
permitindo seu endereamento.
Criando uma ncora

Para interligar uma pgina, voc precisa criar uma ncora (tambm chamado
de indicador em alguns editores de HTML) no inicio de cada seo do
documento. Essa ncora recebe um nome que ser mencionado pelo link que
acessar.
<A NAME=#nome da ncora>Texto Opcional</A>
Iremos criar agora uma pgina Web com exemplos de links e ncoras :
Neste cdigo criamos primeiramente os links com as ncoras da pgina, e
depois as ncoras, aproveitamos tambm e trabalhamos com insero de
imagens na pgina:
Enviando E-Mail diretamente da Pgina HTML
Voc pode acionar o programa padro de e-mail diretamente de uma pgina

HTML usando uma variao do comando <A>, que usa a opo MAILTO no
lugar da URL.
<A HREF=MAILTO:faleconosco@provedor.com.br>Tire as suas dvidas </A>
Definindo Destinos
Podemos tambm definir destinos para os nossos links,(recurso muito utilizado
21
em frames) atravs do parmetro target: . E podem ser _self: Mesmo quadro,
_top: pgina inteira, _blank: nova janela e _parent: quadro pai.
TABELAS
Assim com as listas que ns j vimos, no HTML existem elementos especficos

para a criao e formatao de tabelas. O recurso de tabelas muito
interessante e muito usado nas pginas Web.
O conceito o mesmo conhecido usualmente: ela tem linhas e colunas, e na
interseo delas esto as clulas.
Na linguagem HTML, voc pode inserir nas clulas tudo o que normalmente faz
parte do corpo de um documento, como textos, links, imagens, listas e at
outras tabelas.
Elementos bsicos de tabelas
<TABLE>...</TABLE>
So as marcas que englobam a definio de uma tabela. Todas as demais
marcas referentes a tabelas linhas e clulas somente sero consideradas
se includas entre <TABLE>e </TABLE>.
<CAPTION>...</CAPTION>
Trata-se de um elemento opcional que define o ttulo da tabela, e deve constar
entre as marcas que definem a tabela, mas separado das marcas que definem
linhas e colunas. Sem parmetros, o ttulo apresentado acima da tabela e
centralizado.
<TR>...</TR>
Table Row ou Linha de tabela
Este o elemento utilizado na definio de linhas de tabelas. Tabelas so
definidas em linhas, sendo as linhas compostas de clulas. O nmero de linhas
de uma tabela corresponde ao nmero de <TR></TR>.
<TD>...</TD>
Table Data ou Dados de Tabela
Marcas que delimitam as clulas que compem as linhas, e assim sendo
devem estar inseridas entre as marcas de linhas. Uma clula pode conter tudo
22
o que normalmente consta do corpo de um documento HTML Links,
referncias a imagens, textos, e at tabelas.
O alinhamento padro de uma clula esquerda horizontalmente e
centralizado verticalmente, e caso o nmero de clulas varie de uma linha para
outra, as linhas com menos clulas so completadas direita com clulas em
branco.
<TH>...</TH>
Table Header ou Cabealho de Tabela
Elemento que define clulas de cabealho. Clulas de cabealho tm
caractersticas idnticas a clulas de dados definidas por <TD>, a no ser pelo
alinhamento horizontal, que centralizado, e pela utilizao de fonte em
Negrito.
Parmetros
Estes elementos bsicos, entretanto, possuem alguns parmetros que
permitem um maior controle sobre alguns detalhes da apresentao da tabela.
Parmetros do elemento <TABLE>

BORDER
A apresentao padro de uma tabela sem bordas. A presena do parmetro
BORDER indica justamente que deve ser desenhada uma borda em torno de
cada clula da tabela. Pode ser usado para indicar a espessura da borda (em
pixels), com BORDER=X. Exemplo: <TABLE BORDER=2>
BORDERCOLOR
Permite que se coloque cores nas bordas de sua tabela e possui duas
variaes: bordercolorlight e bordercolordark, permitindo que se coloque duas
cores de bordas em volta de sua tabela.
WIDTH
Especifica a largura da tabela, que pode ser definida em pixels ou em
percentual referente largura da janela. Caso no seja especificado, o prprio
browser se encarrega de determinar a largura mais adequada, baseado nos
textos inseridos nas clulas. Exemplo: <TABLE WIDTH=75%>
CELLSPACING
23
Define o espao entra as clulas, ou seja, a largura das linhas de grade (as
bordas que envolvem as clulas). especificado em pixels. Exemplo: <TABLE
CELLSPACING=3>
CELLPADDING
Determina, em pixels, o espao entre o contedo e as bordas da clula.
Exemplo: <TABLE CELLPADING=6>
ALIGN
Configura o alinhamento horizontal da tabela em relao aos outros elementos
da pgina. Pode conter os valores LEFT (esquerda), CENTER (centro) ou
RIGHT( direita). Este parmetro no funciona em alguns browsers.
BGCOLOR
Define a cor de fundo da tabela.
Parmetros do elemento <TR>
ALIGN
Configura o alinhamento horizontal dos elementos contidos nas clulas de uma
linha. Pode conter os valores LEFT, CENTER OU RIGHT. Se omitido, o
alinhamento esquerda para as clulas de dados (<TD>), e centralizado
para clulas de cabealho (<TH>).
VALIGN
Define o alinhamento vertical dos elementos contidos nas clulas de uma linha.
Pode conter os valores TOP(topo), MIDLE(meio) ou BOTTOM (fundo). Se
omitido, o alinhamento ao meio.
BGCOLOR
Define a cor de fundo da linha.
Parmetros dos Elementos <TD> e <TH>

ALIGN
Configura o alinhamento horizontal dos elementos contidos na clula. Pode
conter os valores LEFT, CENTER OU RIGHT.
Se omitido, o alinhamento esquerda para as clulas de dados (<TD>), e
centralizado para clulas de cabealho (<TH>).
24
VALIGN
Define o alinhamento vertical dos elementos contidos na clula. Pode conter os
valores TOP (topo), MIDLE(meio) ou BOTTON(fundo). Se omitido, o
alinhamento ao meio.
BGCOLOR
Define a cor de fundo da linha.
NOWRAP
Quando este parmetro encontra-se associado a uma clula, o browser
entende que o texto dentro daquela clula no pode ser dividido em mais de
uma linha. Este parmetro deve ser utilizado com cuidado, para evitar colunas
demasiadamente largas.
COLSPAN
Especifica o nmero de colunas de uma tabela a ser ocupado por uma clula.
Deve ser utilizado para expandir uma clula horizontalmente. Se atribuirmos
COLSPAN=2 a uma clula, ela ocupar o seu espao e o espao de mais uma
clula para a direita, assim esta linha dever possuir uma clula a menos que
as demais, j que uma de suas clulas valepor duas.
ROWSPAN
Define o nmero de linhas a ser ocupado por uma clula. Deve ser utilizado
para expandir uma clula verticalmente (para baixo). Ao atribuir ROWSPAN=2
para uma clula, diminuir em 1 o nmero de clulas da linha de baixo.
Vamos a um exemplo:
<html>
<head>
<title>Tabelas</title>
</head>
<body>
<table border="10" width="100%" bordercolorlight="#000080"
bordercolordark="#0000FF">
<tr>
<th width="100%" colspan="3">
25
<p align="center">Ttulo da Tabela</th>
</tr>
<tr>
<td width="33%">Texto1</td>
<td width="33%">Texto 2</td>
<td width="34%">Texto 3</td>
</tr>
</table>
</body>
</html>
Ateno: Alm de criar tabelas para exibir dados como numa planilha, os
elementos de tabelas so usados para formatar pginas de uma forma geral.
Eles so usados para criar textos com elementos na tela de forma mais fcil,
para delimitar reas de uma pgina e diversas outras utilidades que voc nem
imagina.
Por exemplo, podemos usar tabelas para garantir que o texto fique na posio
A da tela e a imagem fique na posio B, independente da resoluo de vdeo
do visitante de sua pgina. Utilizando uma tabela de tamanho definido,
podemos evitar que a pgina fique grande demais para resolues de 640x480,
podemos simular colunas de texto, entre outras aplicaes.
META
O comando META um dos comandos pouco explorados da linguagem HTML.

Contudo, responsvel por importantes aspectos de uma pgina HTML.
Atravs dele, podemos criar documentos dinmicos, informaes especificas
que sero usadas pelo servidor, em resposta a uma solicitao do usurio, ou
pelos mecanismos de busca na Internet.
Informaes especficas
Esse comando das linguagem HTML pode ser usado para criar
metainformao ou variveis, e seus contedos descrevem caractersticas do
26
documento HTML, como o nome do autor, data de vencimento ou criao do
documento, palavras-chave, etc.
<META HTTP-EQUIV=resposta CONTENT=descrio NAME=descrio
URL=url>
O comando META deve ser especificado entre os comandos <HEAD>
</HEAD>.
Variaes do comando meta
Usar o recurso do autocarregamento indicado quando voc deseja exibir

alguma informao inicial e depois outra informao. Por exemplo o usurio
acessa uma pgina que exibe informaes sobre a empresa, depois de um
tempo carrega outra pgina. Isso possvel da seguinte forma:
<META HTTP-EQUIV=Refresh CONTENT=5 ; URL=arquivo.htm>
Outro grande uso do comando META para que possa ser usado para as
consultas em mecanismos de busca, ou seja os mecanismos verificam no
comando META de sua pgina qual a sua descrio e quais so as palavras
chaves do site.
<meta name="description" content="Site sobre Informtica">
<meta name="keywords" content="Photoshop, Flash, Fireworks, Dreamweaver,
HTML">
Podemos tambm especificar o autor e programa gerador do cdigo HTML
atravs do comando META
<meta name="author" content="Marcos Paulo Furlan">
<meta name="generator" content="HTML-Kit">
Multimdia
O principal elemento de sucesso da Internet o hiperlink. Que permite a

criao de documentos com ligaes para outros contidos em qualquer
computador ligado Internet. A maioria dos usurios que acessa a Internet faz
isso a partir de ambientes grficos, como o Windows, e conhecendo o Windows
todos sabemos de sua capacidade em trabalhar com multimdia. Esse o
27
propsito deste captulo, vamos aprender a trabalhar com os elementos
multimdia em nossas pginas.
Os principais elementos multimdia para uma aplicao so:
Fotos ou imagens estticas
Animao
udio
Vdeo
Considerao no uso de multimdia
O grande inimigo da utilizao de multimdia o mesmo relacionado com as

imagens, a velocidade de transferncia de informaes via Internet. Se uma
imagem de 70Kb pode levar vrios segundos, ou at mesmo minutos para ser
carregada imagine a execuo de um clipe de vdeo com mais de 1MB.
Os vdeos vo se popularizar mais quando a Internet a cabo se tornar mais
acessvel.
FOLHAS DE ESTILO
A CSS traz para a WEB a mesma convenincia de um s lugar para definir os
estilos que esto disponveis na maioria dos editores de texto. Voc pode
definir uma CSS em uma localizao central para afetar a aparncia das tags
HTML em uma nica pgina da WEB ou em todo um site da WEB.
Embora a metodologia da CSS funcione com a HTML, no HTML. Em vez
disso, a CSS um cdigo separado que amplia as capacidades da HTML,
permitindo que voc redefina o modo como as tags HTML funcionam.
Verses da CSS
A CSS evoluiu nos ltimos anos sob a orientao do W3C (
www.w3.org/Style/CSS/ ) at a sua verso atual a 2(dois). Embora a maioria
dos browsers modernos suporte a verso mais recente, os browsers mais
antigos suportam as combinaes das verses antigas da CSS. Elas so:
CSS - 1
O W3C lanou a primeira verso oficial da CSS em 1996. Essa primeira verso
28
inclua a capacidade de ncleo associada s CSS, tais como a capacidade de
formatar texto, definir fontes e margens.
CSS Position (CSS-P)

Os criadores da WEB precisavam de uma forma de posicionar os elementos na
tela de forma precisa. A CSS 1 j havia sido lanada e a CSS-2 ainda estava
distante, de modo que a W3C lanou uma soluo intermediria: A CSS-
Positioning. Esse padro de destinava a ser uma proposta que seria discutida
pelas vrias partes envolvidas antes de ele ser oficializado. A Firefox, Opera,
Chrome e a Microsoft assumiram essas propostas, porm, e incluram as idias
preliminares nas verses 4 de seus navegadores. Embora a maioria dos
recursos bsicos sejam suportados em ambos os browsers como o nome de
marca diversos recursos forma deixados de fora.
CSS 2
A verso mais recente da CSS surgiu em 1998. O nvel 2 inclui todos os
atributos das duas verses anteriores mais uma nfase maior na facilidade de
acesso e na capacidade de especificar CSSs especificas de mdia. A partir do
IE e Firefox, Opera, Chrome 6 suportam CSS 2.
CSS 3
Este padro ainda est em desenvolvimento, e mesmo aps o lanamento
geralmente leva alguns anos para que os navegadores suportem o padro.
Sem dvida, a nova adio ser o Scalable Vector Graphics (SVG). Esse um
formato que permite incluir formas (linhas, crculos, curvas e outras), como
vetores e no bitmaps, levando o poder dos grficos baseados no vetor e na
tipografia WEB.
Regras da CSS
O melhor da folha de estilo em cascata que ela incrivelmente fcil de
configurar. No exige plug-ins ou softwares diferente apenas regras.
Podemos definir regras que dizem a uma tag HTML especifica o seu contedo,
ou pode criar regras genricas e, em seguida, aplic-las s TAGS como quiser.
Existem trs etapas na regras da CSS.
Seletor HTML: A parte de texto de uma TAG HTML se chama seletor. Exemplo:
29
p {font: bold 12pt times;}
Classe: Uma classe uma regra de agente livre que pode ser aplicada a
qualquer tag HTML de acordo com a sua vontade. Voc pode dar classe o
nome que quiser. Uma classe o tipo de seletor mais verstil. Exemplo:
.minhaclasse{font bold 12pt times;}
ID: As regras de ID funcionam como os seletores de classe, porque podem ser
aplicadas, a qualquer Tag HTML. Os seletores de ID, porm, geralmente so
aplicados somente uma vez na pgina a determinada TAG HTML para criar um
objeto para ser usado com uma funo JavaScript. Exemplo:
#objeto{font bold 12pt times;}
Incluindo CSS no Documento

Embora a CSS signifique nunca ter que definir a aparncia de cada tag
individualmente, voc ainda tema liberdade de definir os estilos dentro das
TAGS individuais. Isso particularmente til para substituir cada um dos outros
estilos que esto definidos para a pgina.
Veja o exemplo abaixo:
<html>
<head>
<title>CSS</title>
</head>
<body style="background-color:black;">
<br>
<h1 style="color:red">A Bruxa de Blair</h1>
<h2 style="color:yellow">O Filme</h2>
<BR>
<P style="color:White">
o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme
</p>
</body>
</html>
30
Incluindo a CSS em uma pgina WEB
A principal utilizao da CSS para definir as regras de todo um documento.
Para fazer isso, voc deve inclui as regras de estilo no ttulo do documento
aninhado dentro de um continer de estilo.
Embora os resultados do acrscimo de estilo dessa forma possam parecer
idnticos ao acrscimo dos estilos diretamente em uma TAG HTML, a
colocao dos estilos em uma localizao comum permite alterar os estilos de
um documento a partir de um nico lugar.
Veja o mesmo exemplo acima como ficaria:
<html>
<head>
<title>CSS</title>
<style type="text/css">

</style>
</head>
<body>
<br>
<h1>A Bruxa de Blair</h1>
<h2>O Filme</h2>
<BR>
<P>
</P>
</body>
</html>
31
Incluindo a CSS em um site da WEB
Um dos benefcios da CSS a possibilidade de criar uma folha de estilo para
ser usada no apenas em um nico documento HTML, mas atravs de todo um
site da WEB. Voc pode aplicar essa folha de estilo externa a uma centena de
documentos HTML.
O estabelecimento de um arquivo de CSS externo um processo de duas
etapas. Em primeiro lugar, configure as regras em um arquivo de texto. Em
seguida, configure as regras em um arquivo e vincule ao seu documento
HTML, o arquivo que contm as formataes deve possuir a extenso CSS.
Veja o mesmo exemplo:
Arquivo CSS:
body{background-color:black;}
h1{color:red;}
h2{color:yellow;}
p{color:white;}
Arquivo HTML
<html>
<head>
<title>CSS</title>
32
<link rel="stylesheet" href="configura.css">
</head>
<body>
<br>
<h1>A Bruxa de Blair</h1>
<h2>O Filme</h2>
<BR>
<P>
</P>
</body>
</html>
Principais atributos de uma folha de estilo

Atributos de Posio
Elemento Definio Exemplo de Atributo
Position Tipo de Posicionamento Absolute ou relative
Top Distncia Vertical para o canto 10in, 150px, 30 cm
superior esquerdo do quadro
Left Distncia Horizontal para o 10in, 150px, 30 cm
canto superior esquerdo do
quadro
Width Largura do Quadro 10in, 150px, 30 cm
Height Altura do Quadro 10in, 150px, 30 cm
Z-index Camada usada quando 1,2,3,4
sobrepondo quadros
Padding Margem entre as bordas do 2,5,10,17
quadro e o texto interno ao
quadro
Margin Margem entre as bordas do 1,2,3,4
quadro e o texto externo ao
33
quadro
Border-width Largura da borda do quadro Thin, medium, thick
Border-color Cor da borda do quadro Yellow,#00FFAA
Border-style Estilo da Borda None,dotted,dashed,s
olid,double
Broder-width Largura da borda do quadro Thin,medium,thick
Atributos de Fontes
Font-family Fonte que ser usada para Helvetica, Arial,
mostrar o texto Courier
Font-size Tamanho da Fonte 12pt,10cm, 5in
Font-style Estilo Normal, italic
Font-weight Peso da fonte Bold, lighter,100,300
Atributos e Cores de Fundo da Pgina

Color Cor do texto Marrom,#ffffcc
Backgroun- Cor de fundo Marrom,#ffffcc
color
Background- Imagem de fundo Imagem.gif
image
Atributos de Texto
Word-spacing Espaamento entre as palavras 1em, 5pt
Letter- Espeamento entre as letras 0,1em, 0,1cm, 2 pt
spacing
Text- Decorao de texto None, underline, blink
decoration
Vertical-align Alinhamento vertical Middle, top, sub, super
34
Text-align Alinhamento Horizontal Left,center, right
Text-height Altura da Linha 200%, 1.2, 20pt
Definindo classes
O uso de seletor de classes permite configurar um estilo independente que

voc pode aplicar em seguida a qualquer TAG HTML
Para definir um seletor de classe digite um ponto (.) e um nome de classe. Em
seguida, abra a sua definio com uma chave ({)
O nome da classe pode ser o que voc quiser, desde que use letras e
nmeros. Por exemplo podemos criar uma classe chamada .copy{.
Ela uma classe independente e voc pode us-la com qualquer TAG HTML,
com uma condio: as propriedades definidas para a classe devem funcionar
com o tipo de tag com a qual voc a usa.
Para aplicar a sua classe a uma tag HTML inclua class=nome na tag na qual
voc deseja aplicar a classe. Exemplo: <p class=copy>...</p>.
Definindo IDS
Assim como o seletor de classe, o seletor de ID pode ser usado para criar
estilos exclusivos que so independentes de qualquer TAG HTML em
particular. Assim sendo, eles podem ser designados a qualquer TAG HTML
que se aplique.
As regras de ID sempre comeam com (#) e, sem seguida, o nome do ID. O
nome pode ser uma palavra ou qualquer conjunto de letras ou nmeros que
voc quiser. Digite as suas definies para essa classe separando-as com um
ponto e vrgula. Voc pode usar um ID com qualquer tipo de propriedade, mas
o melhor uso para os seletores de ID para definir os objetos exclusivos na
tela.
Um ID no funcionar at ser especificada com uma TAG HTML individual
dentro de um documento.
Exemplo: #area{color:red;margin-left:9em;position:relative;}
<P id=area>...</p>.
35
Definindo TAGS dentro do contexto
Quando uma TAG cercada por outra TAG, uma dentro da outra, so
chamadas de tags aninhadas. Em um conjunto aninhado, a TAG externa
chamada de pai e a interna de filha.
Digite o seletor HTML da TAG pai seguida por um espao. Voc pode digitar
quantos seletores, HTML quiser para quantos pais e TAGS aninhadas
diferentes tiver, mas o ltimo seletor da lista aquele que recebe todos os
estilos da regra. Veja o exemplo abaixo:
<html>
<head>
<title>Tags Aninhadas</title>

</style>
</head>
<body>
<div class="menu">
<a href="anterior.htm">< Capitulo Anterior</a>
<a href="proximo.htm">Prximo Captulo ></a>
</div>
<hr>
<h3>Novo Captulo</h3>
<p>Teste de pargrafo
<a href="curioso.htm">Efeito curiosos</a></p>
36
</body>
</html>
Definindo a CSS para impresso

Quando a maioria das pessoas pensam em pginas WEB, pensa nessas
pginas exibidas na tela. Entretanto, mais cedo ou mais tarde, a maioria das
pessoas quer imprimir pelo menos algumas pginas da WEB. O que parece
bem na tela nem sempre bom quando impresso.
A CSS permite dizer ao browser para usar folhas de estilo diferentes
dependendo da pgina da WEB se destinar ao monitor do computador ou a
impressora.
Crie duas folhas de estilo (arquivos.css), uma otimizada para o uso em uma
tela de computador e outra adaptada para a impresso. Veja os cdigos
abaixo:
CSS para Tela:
body{
color:white;
font-family:Arial;
background:black url(images/backarvore.jpg) no-repeat;}
h1,h2{
font-weight:bold;}
.cassea{
color:#999999;}
CSS para Impresso:
body{
color:black;
font-family:Arial;
h1,h2{
font-weight:bold;}
.cassea{
color:#999999;}
Cdigo no HTML:
37
<html>
<head>
<title>Midias Diferentes</title>
<link rel="stylesheet" href="tela.css" media="screen">
<link rel="stylesheet" href="impressao.css" media="print">
</head>
<body>
<h1> Mdia de tela </h1>
<br>
<span class="classea">O que pode ser visto na tela ser diferente na
impresso</span>
<hr>
<h2>Teste</h2>
</body>
</html>
Definindo Quebras de pgina para a impresso

Um problema que voc encontrar ao tentar imprimir um site da WEB so as
quebras de pgina. Na verdade, uma pgina da WEB pode conter diversas
pginas impressas. Assim sendo, o cabealho de uma seo pode aparecer
na parte inferior de uma pgina e seu texto na parte superior da prxima
pgina.
Podemos forar uma quebra de pgina ao imprimir uma pgina da WEB, para
isso utilize: < TAG style=page-break-before:always;>....</TAG>
Onde always Fora a quebra de pgina antes do elemento. Auto permite
que o browser coloque as quebras de pgina.
Controles de Texto
O Kerning se refere quantidade de espao que h entre as letras de uma
palavra. Geralmente, quando h mais espao entre as letras a facilidade de
leitura maior. Por outro lado, espao de menos pode impedir a leitura,
fazendo com que as palavras individuais apaream menos distintas na pgina.
Para definir o Kerning:
38
Letter-spacing: 2em.
Um valor positivo para o espaamento de letras inclui mais espao na
quantidade padro; um valor negativo fecha o espao.
Podemos tambm ajustar o espaamento entre as palavras. A incluso de um
pequeno espao entre as palavras na tela pode ajudar a tornar o seu texto
mais fcil de ler, mas espao demais interrompe o caminho do olho do leitor na
tela.
Para definir estes espaamento:
Word-spacing: 8px;
Ajustando as Entrelinhas
O espao entre as linhas tambm podem ser aumentados para dar um efeito
dramtico, criando reas de espao em negativo no texto. Mas tambm podem
ser usados para facilitar a leitura e incluso de comentrios em seu texto. Para
definir o espaamento entra linhas:
Line-height:2; ou line-height:12px ou line-height:%
Definindo Segundo Plano

Podemos usar a propriedade background para definir a imagem e a cor do
segundo plano de toda a pgina ou a imagem e cor de segundo plano
imediatamente atrs de cada elemento individual da pgina.
Para definir o segundo plano iniciamos a digitao com a propriedade
background seguida de dois pontos e em seguida dos valores de segundo
plano:
White Digite um valor para a cor que voc deseja para o segundo plano
seguido de um espao. Esse valor pode ser o nome da cor, um valor
hexadecimal de cor ou um valor RGB.
url(imagem/figura.jpg) Para utilizar uma figura de fundo podemos definir a
localizao do arquivo. Alternativamente pode-se usar none em vez de url, ele
instrui a browser a no utilizar uma imagem de segundo plano.
Repeat Defina qual ser o modo de repetio a ser utilizado eles podem ser:
Repeat-x: Instrui o browser para repetir o grfico de segundo plano na
horizontal.
39
Repeat-y: Instrui o browser para repetir o grfico de segundo plano na vertical.
No-repeat: faz com que o grfico de segundo plano aparea apenas uma vez.
Fixed: Instrui para que a figura fique fixa ou seja no role com o site.
Scroll: Instrui para que a imagem role junto com a tela.
Right top: Digite dois valores separados por um espao para especificar o lugar
onde o segundo plano deve aparecer em relao ao canto superior esquerdo
do elemento.
Bordas
Para definir um atributo de borda para uma caixa simultaneamente a CSS
fornece a propriedade border, voc pode usar border para definir a largura, o
estilo e/ou a cor. Tambm possvel definir a borda do elemento em cada lado
da caixa individualmente.
As principais propriedades para bordas so: border-width, border-style, border-
color.
Boder style Border width
None Thin
Dotted Medium
Dashed Tick
Solid lenght
Double
Groove
Ridge
Inset
outset
Envolvendo um elemento com texto

No inicio do desenvolvimento HTML, quando a capacidade de fazer o texto
flutuar ao redor de um grfico foi includa, os designers de toda parte estavam
maravilhados. A CSS levou este passo um pouco adiante, permitindo que o
texto no apenas flutue ao redor do texto, mas tambm que flutue ao redor dos
outros blocos de texto e do texto ao redor das tabelas, para isso usamos a
40
propriedade float.
Inicie sua definio digitando a propriedade float seguida de dois pontos. A
seguir digite uma palavra-chave para dizer ao browser o lado da tela no qual o
elemento deve flutuar, e estas podem ser : right, left e none. Por exemplo
Img{float:right;}
Posicionamentos
Quando voc define os atributos de uma tag HTML, por meio de um seletor em
uma CSS, na verdade, voc separa todo o contedo dentro de um continer
daquela TAG como sendo um elemento exclusivo da janela. Em seguida
possvel manipular esse elemento exclusivo por meio do posicionamento da
CSS.
Um elemento pode ter um de quatro valores de posicionamento esttico,
relativo, absoluto ou fixo embora apenas os trs primeiros normalmente
estejam disponveis na maioria dos browsers. O tipo de posicionamento diz ao
browser como ele deve tratar o elemento ao posicion-lo na janela.
Posicionamento Esttico
Como padro, os elementos so posicionados como estticos dentro da janela,
a menos que voc os defina com os outros posicionamentos. Entretanto o
posicionamento esttico diferente, porque um elemento esttico no pode ser
posicionado ou reposicionado explicitamente.
Posicionamento Relativo
Um elemento definido como sendo posicionado relativamente fluir at o seu
lugar dentro da janela ou dentro de seu elemento pai, assim como o
comportamento padro de qualquer outro elemento da HTML ou seja, ele
aparece aps tudo que est antes dele na HTML e antes de tudo que est aps
ele na HTML.
Voc pode mover um elemento posicionado relativamente a partir de sua
posio natural na janela usando as propriedades top e left. Essa tcnica til
para controlar o modo como os elementos aparecem com relao aos outros
elementos da janela.
41
Posicionamento Absoluto
O posicionamento absoluto cria um elemento independente um agente livre
separado do restante do documento, no qual voc pode colocar qualquer tipo
de contedo HTML que quiser. Os elementos que so definidos dessa forma
so colocados em um ponto exato da janela por meio das coordenadas x e y. O
canto superior esquerdo da janela ou de seu elemento continer a origem.
Posicionamento 3D
Apesar da rea da tela ser bidimensional, os elementos que so posicionados
podem receber uma terceira dimenso: uma ordem de empilhamento na qual
um elemento se relaciona ao outro.
Os elementos posicionados recebem nmeros automticos de empilhamento, a
partir do 0 (zero)incrementalmente com 1,2,3 e assim por diante. Esse sistema
chamado de ndice Z. O nmero de ndice Z de um elemento um valor que
mostra sua relao 3D com os outros elementos da janela.
Para definir o ndice Z de um elemento, primeiro defina o posicionamento (ex:
absolute) depois z-index:n.
css- cascading style sheet
Uma folha de estilos um conjunto de regras que informa a um programa,
responsvel pela formatao de um documento, como organizar a pgina,
como posicionar e expor o texto e, dependendo de onde aplicado, como
organizar uma coleo de documentos.
Na Web, os "pargrafos" so blocos marcados por descritores HTML como
<H1>, <P>, etc. Para fazer com que todos os blocos de textos marcados com
<H1> em um documento sejam exibidos em tamanho de 48 pontos, basta
definir a regra:
H1 {font-size: 48pt} dentro de uma "folha de estilos" aplicada ao documento.
A folha de estilos pode ser um arquivo de textos simples com a extenso .css.
Para vincul-lo a uma pgina HTML, esta deve ter dentro do seu bloco
<HEAD> ... </HEAD> o seguinte descritor:
<LINK REL="stylesheet" HREF="url_do_arquivo.css">
Regras, declaraes e seletores

A estrutura dos estilos bastante simples. Consiste de uma lista de regras.
42
Cada regra possui um bloco, entre chaves ({ e }), de uma ou mais declaraes
aplicveis a um ou mais seletores.
Um seletor algo no qual se pode aplicar um estilo. Pode ser um descritor
HTML, uma hierarquia de descritores ou um atributo que identifique um grupo
de descritores. Uma folha de estilos consiste de uma ou mais linhas de regras,
da forma:
seletores { declaraes }
As regras podem estar dentro de um arquivo de texto com extenso .css" ou
embutidas em um arquivo HTML (as vrias maneiras de aplicar estilos a um
arquivo HTML sero vistas na seo seguinte).
Um exemplo de folha de estilos com apenas uma regra foi mostrada na seo
anterior:
H1 {font-size: 48pt}
Nesta regra, H1 o seletor e {font-size: 48pt} o bloco da declarao, que
estabelece um tamanho de fonte (prop. font-size) para todos os objetos
(pargrafos) marcados com <H1>.
As declaraes so feitas usando a sintaxe:
propriedade: valor
Observe que se usa dois-pontos (:) e no igual (=) para aplicar um valor a uma
propriedade. Pode haver mais de uma declarao de estilo para um seletor.
Isto pode ser feito em outro bloco. Cada linha acrescenta ou sobrepe
declaraes feitas em linhas anteriores:
H1 {font-size: 24pt}
H1 {color: blue}
H1 { font-size: 18pt }
No trecho acima, o texto marcado com <H1> ser azul e ter tamanho de 18pt
porque a regra H1 { font-size: 18pt } ocorreu depois da regra H1 { font-size:
24pt }.
Mltiplas declaraes e seletores

Vrias declaraes de estilo podem ser aplicadas de uma vez a um seletor. As
declaraes, ento, precisam ser separadas por ponto-e-vrgula (;) :
H1 {font-size: 18pt; color: blue; font-family: Caslon, serif}
43
BODY {background: navy; color: white}
Os espaos em branco (espaos, novas-linhas e tabulaes) so ignorados
pelo browser na hora de interpretar uma folha de estilos e podem ser usados
para melhorar a sua legibilidade. As duas linhas acima ficariam mais legveis
da forma:
BODY {background : navy;
color : white }
H1 {color: blue;
font-size: 18pt;
font-family: Caslon, serif }
Uma declarao s termina com uma fecha-chaves (}) ou com um ponto-e-
vrgula (;).
Dependendo da propriedade, esta pode ter vrios valores separados por
vrgulas ou valores compostos com as palavras separadas por espaos:
P { font: 12pt "Times New Roman" bold }
H2 { font-family: Arial, Helvetica, Sans-serif }
As aspas devem ser usadas quando uma palavra que tem espaos precisar ser
usada. No exemplo acima, o nome "Times New Roman" deveria ser tratado
como o nome de uma fonte distinta, e no como trs valores, o que ocorreria
se as aspas no estivessem presentes.
Assim como um seletor pode ter vrias propriedades definidas para ele, um
mesmo conjunto de propriedades pode ser aplicado a um grupo de seletores,
separando-os com vrgulas:
H1, H2, H3 { color: blue;
font-size: 18pt;
font-family: Arial, Helvetica, Sans-serif }
Ao utilizar folhas de estilo, deve-se respeitar os elementos HTML que possuem
descritores finais freqentemente ignorados, como </P>, </LI>, etc. A falta do
</P> pode causar o "vazamento" das declaraes de estilo para fora do
pargrafo em alguns browsers.
Comentrios e instrues
Alm das regras, um arquivo CSS pode ter ainda comentrios e instrues
44
(precedidas de @). No CSS1 apenas uma instruo definida: @import. Ela
usada para que uma folha de estilos possa importar estilos de outro arquivo
CSS atravs de uma URL. Os estilos importados sempre tm menos
precedncia que os locais (ou seja, os locais podem sobrepor os importados).
A sintaxe da instruo @import :
@import url(url_da_folha_de_estilos)
No deve haver outras estruturas (a no ser comentrios) na linha onde h
uma instruo. Exemplos do uso de @import:
@import url(../estilo.css)
@import url(http://www.apostilando.com/estilo.css)
Pode-se inserir trechos que sero ignorados pelo browser ao interpretar folhas
de estilo usando blocos de comentrio. Comentrios em folhas de estilos so
iguais a comentrios em linguagens como Actionscipt: entre /* e */:
Valores
Os valores que so aplicados s propriedades tm uma sintaxe que depende
da propriedade que os usa. Propriedades que envolvem tamanho (tamanho de
fontes, espaamento, etc.) geralmente recebem valores que consistem de um
nmero e uma unidade ou porcentagem. O sinal de porcentagem ou unidade
deve estar junto ao nmero correspondente sem espaos. Ou seja, deve-se
escrever font-size: 24pt e no font-size: 24 pt.
Cores e arquivos externos podem requerer uma funo para serem definidos.
So duas as funes (ou procedimentos) do CSS1: rgb(), que constri uma cor,
e url(), que retorna um vnculo para uma imagem ou arquivo CSS (usada em
instrues @import).
H quatro maneiras diferentes de especificar cores em CSS: usando o nome
do sistema (red, yellow, blue, black, lightGray), usando seu cdigo RGB
hexadecimal (ff0000, ffff00, 0000ff, 34adfc, 80a7a7) ou usando a funo rgb().
A funo rgb() requer trs argumentos que representam a intensidade dos
componentes vermelho (R), verde (G) e azul (B) de uma cor em forma de luz
(no opaca). A intensidade pode ser expressa em valores inteiros de 0
(mnimo) a 255 (mximo) ou em valores fracionrios de 0% a 100%. As
instrues abaixo definem a mesma cor para um pargrafo:
45
P {color: red}
P {color: ff0000}
P {color: rgb(100%, 0%, 0%)}
P {color: rgb(255, 0, 0)}
No deve haver espao entre o "b" de rgb e o abre-parnteses.
A funo URL pode ser usada em propriedades que requerem arquivos (no
caso, imagens) como valores. Ela recebe um argumento apenas com a URL
(relativa ou absoluta) da imagem:
P {background-image: url(imagem/textura.jpg)}
P {background-image:
url(http://www.apostilando.com/imagem/textura.jpg)}
Herana
Os estilos "herdam" propriedades de vrias maneiras. Uma das formas
atravs da prpria hierarquia do HTML. Se voc declara propriedades para
BODY, todos os descritores sero afetados a no ser que tenham as suas
propriedades redefinidas dentro de um novo bloco
de declaraes CSS. Se um <I> est dentro de um <P> e todos os <P> so
declarados como tendo a cor vermelha, o <I> tambm ser vermelho a menos
que haja um bloco, posterior quela declarao, redefinindo as propriedades de
<I>, por exemplo:
P {font: 12pt "Times New Roman" bold;
color: red }
I {color: black }
Faria com que o texto "seletor", no texto a seguir permanecesse preto:
<P>Um <I>seletor</I> algo no qual se pode aplicar um estilo.</P>
Se voc definir atributos para os descritores <BODY> ou <HTML>, toda a
pgina ser afetada. No exemplo a seguir, uma cor de texto definida para
BODY ser usada para colorir todo o texto do documento, a no ser que sejam
sobrepostos por uma regra subseqente:
BODY {color: navy }
H1, H2 {color: yellow }
Os blocos acima faro com que todo o texto seja azul marinho, exceto aquele
46
marcado com H1 ou H2, que ser amarelo.
Os browsers comerciais tm problemas principalmente com a aplicao

de estilos em BODY, portanto, freqentemente preciso mexer nas
declaraes de estilo, acrescentando propriedades redundantes para adapt-
los realidade. No site do W3C (http://www.w3.org) h links para documentos
que analisam essas diferenas entre browsers. O site
http://www.w3.org/Stye/CSS/Test/ uma plataforma de testes que pode ser
usada para verificar se um browser suporta ou no determinada propriedade.
Como incluir estilos em uma pgina

H trs formas de aplicar uma folha de estilos a uma pgina Web. Estas formas
iro determinar a abrangncia dos estilos: se afetaro um trecho limitado de
uma pgina, se a toda a pgina, ou se iro afetar todo um site.
A primeira forma, mais abrangente, a vinculao a um arquivo CSS. Isto
feito ligando a pgina HTML a um arquivo de folha de estilo, usando do
descritor <LINK>. Este mtodo permite que mltiplas pginas ou um site inteiro
usem a mesma folha de estilos.
Para fazer um vnculo a uma folha de estilos externa, deve-se criar um arquivo
de texto contendo um conjunto de regras de estilo em CSS, salv-lo com uma
extenso ".css" e cham-lo a partir de todos os documentos HTML onde o
estilo ser aplicado. No preciso compilar ou qualquer coisa do tipo. Depois
que as definies estiverem prontas, o estilo estar pronto para ser usado.
Pode ser importado atravs do descritor LINK:
<HEAD>
<LINK REL=STYLESHEET HREF="estilo.css" TYPE="text/css">
</HEAD>
Uma segunda forma, permite que estilos sejam aplicados localmente, em uma
nica pgina, embutindo uma folha de estilos diretamente na pgina HTML
dentro de um bloco formado pelos descritores <STYLE> e </STYLE>. Este
mtodo permite que voc altere as propriedades de estilo de uma nica
47
pgina.
A linguagem que embutida em um bloco <STYLE> a mesma usada nos
arquivos CSS. <STYLE> ... </STYLE> deve ser usado em <HEAD>. Um
atributo type informa o tipo de arquivo utilizado:
P { font: 12pt "Times New Roman" bold;
color: red }
I { color: black }
</style>
As propriedades declaradas no bloco <STYLE> sobrepem qualquer

propriedades anteriores do elemento (inclusive as de uma folha de estilos
importada, se houver). comum colocar todo o cdigo entre comentrios
HTML () para proteger browsers antigos da exibio indesejada do
cdigo:

</style>
48
Finalmente, h uma forma de aplicar estilos diretamente a um descritor
individual. Para fazer isto se deve usar o atributo STYLE em quase qualquer
descritor. Este mtodo no corresponde exatamente a uma "folha" de estilos,
pois os estilos aplicados no so reaproveitveis.
Permite alterar a aparncia de um nico descritor, de um conjunto deles ou de
um bloco de informaes da pgina. Por exemplo:
<P STYLE="color: green; font-size: 12pt">Teste</P>
Esta propriedade mais interessante quando aplicada em um descritor que
usado para agrupar vrios outros, como <DIV>, que divide a pgina em sees
ou <SPAN>, usado em situaes bem especficas. Usar estilos desta forma
pouco diferente de usar atributos locais.
Os benefcios de poder mudar a fonte, cores e outras caractersticas em todo o
documento ficam mais difceis.
Pode-se usar um, dois ou os trs mtodos ao mesmo tempo. As caractersticas
definidas pelos mais especficos sobrepem as definidas pelos mais genricos.
Por exemplo, suponha que o arquivo estilos.css contenha apenas as seguintes
regras:
H1 { color: green;
font-size: 24pt}
P { color: blue}
Suponha que ele seja carregado na pgina a seguir que possui um bloco
<STYLE> com uma nova definio de P e H1.
<HEAD>
<link rel=STYLESHEET href="estilos.css" type="text/css">
<style type="text/css"></style>
</HEAD>
Mais adiante, existe um pargrafo e um ttulo da forma:
49
<h1 style="color: navy">Apostilando</h1>
<p style="color: black">Webkit Aplicaes Dinmicas</p>
Qual estilo ir predominar? Pela regra de que o mais especfico sobrepe o
mais geral, teremos uma pgina onde os <h1> tm tamanho 24pt (do estilo
importado), cor preta (valor sobreposto pelo estilo da pgina) e os <p> so
vermelhos (sobreposto pelo estilo da pgina).
Nas duas linhas acima (e nelas apenas), o <h1> ser azul marinho
(sobrepondo o estilo da pgina) e o <p> ser preto.
Classes e IDs
s vezes um pargrafo tem uma aparncia diferente dos outros pargrafos em
certa parte do texto. Para mudar o estilo dele, pode-se incluir as declaraes
em um atributo STYLE.
Mas, se tal procedimento torna difcil a localizao e a gerncia dos estilos,
pode-se usar um recurso para marc-lo de forma que seja considerado
diferente. Isto pode ser feito atribuindo-lhe uma identificao nica. Em HTML,
pode-se usar o atributo ID:
<P ID=w779>Texto</P>
Para alterar as caractersticas deste pargrafo agora, pode-se usar o seu ID
como seletor, da forma:
#w779 {color: cyan }
Se isto estiver em um arquivo CSS, todas as pginas que o usam e que
tiverem um elemento com o ID #w779 sero afetadas. Se houver mais de um
com o mesmo ID apenas o primeiro ser afetado.
Melhor que usar ID agrupar caractersticas semelhantes em classes. Uma
classe uma variao de um determinado objeto. Por exemplo, um texto
teatral pode ter trs pargrafos com apresentao diferente, representando as
falas de trs personagens. Se quisssemos que cada um tivesse uma cor
diferente, poderamos declarar cada um como sendo de uma classe distinta:
<p class=flex>Aplicaes Ricas</p>
<p class=PHP>Aplicaes Dinmicas</p>
<p class=Joomla>CMS</p>
<p class=flex>RIAS </p>
50
Uma classe tambm pode conter descritores diferentes. Se todos os textos
citados por certo autor tivessem que estar em outra cor ou fonte, poderamos
criar uma classe sem citar o descritor:
.verde { color: green }
Todos os descritores que tiverem o atributo CLASS=verde sero afetados, por
exemplo:
<P class=verde>, <h3 class=verde>, <table class=verde>, etc.
Links (pseudo-classes e pseudo-elementos)

Para seletores especiais que mudam de estado, como o texto marcado com
<A>, possvel atribuir propriedades diferentes para cada estado:
A:link {color: red}
A:active {color: 660011}
A:visited {color: black; text-decoration: none}
A:hover {color: blue; text-decoration: underline}
Muda as caractersticas dos links no-visitados, ativos e visitados. Assim como
qualquer seletor, os links podem ser combinados com outros descritores:
P, A:link, H2 {color: red}
Fontes
Fontes so estilos de apresentao consistentes aplicados a alfabetos. Uma
fonte consiste de atributos que alteram a aparncia de um smbolo, sem alterar
o seu significado. Oferecem as informaes necessrias para que uma letra ou
smbolo possa ser representado graficamente.
Os atributos essenciais de uma fonte so:
Seu tipo (ou famlia)
Seu tamanho
Seu estilo (regular, itlico, outline, etc.)
Seu peso (normal, negrito, light, black)
Para representar qualquer texto, portanto, preciso escolher uma fonte, ou
seja: um tipo, um estilo, um peso e um tamanho. Letras maisculas e
minsculas no so consideradas fontes diferentes, pois tm um significado
distinto.
51
Os quatro atributos acima podem ser definidos em CSS atravs das
propriedades font-family, font-size, font-style e font-weight. No preciso definir
todas pois sempre tm valores default. CSS oferece ainda font-variant, que
permite considerar outras variaes de uma fonte.
font-family
Uma famlia de fontes (tipo) selecionada com a propriedade font-family. Esta
propriedade aceita uma lista de valores separados por vrgulas representando
nomes de fontes existentes ou no no sistema do usurio. No final da lista,
pode ser includa uma referncia a uma famlia genrica, que ser usada caso
nenhum dos nomes coincida com o nome de uma fonte do sistema.
A sintaxe :
font-family: fonte1, fonte2, fonte3, ..., fonte-genrica
Exemplos:
H1 { font-family: garamond }
H2 { font-family: arial, helvetica, sans-serif }
H3 { font-family: courier, "courier new", monospaced }
H4 { font-family: monospaced }
Uma forma de facilitar a aplicao e a criao de estilos com o Adobe

Dreamweaver.Ele possui uma janela de configurao de estilos.
52
Na parte de baixo do painel esto disponveis os botes de link,que permite
ligar um arquivo externo ao seu HTML.
O boto ao lado permite criar um novo estilo, e o terceiro boto (forma de
lpis), permite editar um estilo existente.
font-size
O tamanho de uma fonte alterado usando font-size. Pode ser especificado
em valores absolutos ou relativos. Para especificar um valor absoluto, pode-se
usar:
font-size: nmero(pt | px | cm | mm | pc | in)
font-size: xx-small|x-small|small|medium|large|x-large|xx-large
O tamanho tambm pode ser especificado relativo ao elemento no qual o atual
objeto est contido.
font-size: tamanho_relativo (smaller, larger)
font-size: comprimento (em ou ex)
font-size: porcentagem%
Exemplos:
H1 { font-size: 24pt}
H1 { font-size: x-large}
H1 { font-size: smaller}
53
H1 { font-size: 1.5em}
H1 { font-size: 150%}
<H1 style="font-size: 1cm">
Os tamanhos de pontos devem ser especificados como valores inteiros
(mesmo se usados cm ou in). Os browsers podem formatar os tamanhos de
forma diferente e os mesmos podem ser alterados pelos usurios nos browsers
atuais. As unidades vlidas so: pt (pontos), px (pixels), pc (paicas), cm
(centmetros), mm (milmetros) e in (polegadas).
Os tamanhos absolutos chamados pelo nome (xx-small, etc.) correspondem
aos tamanhos de 1 a 7 do descritor <font size> e podem variar de acordo com
a famlia de fontes usada (variam bastante entre plataformas tambm).
Os tamanhos relativos funcionam como o <BIG> e <SMALL>, aumentando a
fonte atual por 150%. A diferena que podem passar alm do limite xx-large
(ou <font size=7>) ou xx-small (font size=1>).
Os comprimentos referem-se a unidades comuns em tipografia. Um "em"
uma distncia horizontal equivalente ao tamanho de uma fonte (se uma fonte
tem 20 pontos de tamanho, um em corresponde a uma distncia de 20 pixels
de largura). Um "ex" a altura das letras de caixa-baixa (sem incluir as hastes
ascendentes e descendentes). Tanto "em" como "ex" usam valores relativos ao
elemento que contm o elemento atual. So teis principalmente em
espaamento, sendo pouco usados em fontes.
As porcentagens so afetadas pela herana, por exemplo:
<style>
.sec {font-size: 18pt};
.sec H1 {font-size: 200%}
.sec P {font-size: 50%}
</style>
</head>
<body>
<div class=sec>Texto.>
<h1>2 vezes maior</h1>
54
<p>Este um pargrafo da seo. O texto tem 50% do tamanho do texto
da seo.</p>
</div>
font-style e font-weight
O estilo de uma fonte afetado atravs de duas diferentes propriedades: font-
weight, que altera o peso da fonte, e font-style, que altera o estilo ou inclinao.
Sintaxe:
font-style: normal (ou italic, oblique)
Exemplos:
H1 { font-style: italic }
I { font-style: normal }
<p style="font-style: oblique">...</p>
Sintaxe:
font-weight: normal | bold (normal=400 e bold = 700)
font-weight: bolder | lighter (valores relativos)
font-weight: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Exemplos:
H1 { font-weight: normal }
B { font-weight: 900 }
<b> ... <b style="font-weight: bolder">...</b> ... </b>
A palavra oblique deve fazer com que fontes chamadas de "oblique" (se
existirem no sistema) sejam usadas, assim como ocorre com fontes "italic". A
rigor, italic uma fonte distinta da normal, e no, meramente uma verso
inclinada da mesma. Os browsers, porm, no encontrando um equivalente
"italic", "oblique", "kursiv" ou similar iro inclinar o texto, simulando um itlico.
Os valores numricos para font-weight oferecem um controle excepcional sobre
o peso da fonte na tela, embora isto esteja limitado aos nveis disponveis nas
fontes instaladas (para um mesmo nome de fonte). Na prtica, dos 9 nveis
disponveis de peso, se consegue 4 ou 5 nveis diferentes de mais pesado ou
mais leve. 700 o "bold" tpico e 400 o "normal".
55
font-variant
Atualmente a nica opo disponvel para esta propriedade small-caps, que
deve colocar o texto selecionado em maisculas, porm menores que as
capitulares.
Sintaxe:
font-variant: small-caps
Exemplos:
<style>
.sm {font-variant: small-caps}
.tc {font-size: 120%}
</style>
</head>
<body>
<p>Um texto simples sem SmallCaps...</p>
<p class=sm>Um texto simples com SmallCaps...</p>
<p>Os small-caps acima, no Internet Explorer 4, so falsos. As letras
maisculas no deveriam ter sido afetadas.</p>
<p><span class=sm><span class=tc>U</span>m texto simples com <span
class=tc>S</span>mall<span class=tc>C</span>aps...
verdadeiros</span>.</p>
text-transform
A propriedade text-transform realiza transformaes no formato caixa-alta ou
caixa-baixa do texto. Sintaxe:
text-transform: capitalize
text-transform: uppercase
text-transform: lowercase
text-transform: none (valor default)
Exemplos:
H1 {text-transform: capitalize}
Capitalize coloca a primeira letra de cada palavra em maisculas. Uppercase
coloca tudo
56
em maisculas e lowercase coloca tudo em minsculas. None remove qualquer
transformao
deixando o texto da forma como foi definido antes das transformaes.
<style>
p {font-weight: bold}
span {font-weight: normal}
.non {text-transform: none}
.upp {text-transform: uppercase}
.cap {text-transform: capitalize}
.low {text-transform: lowercase}
</style>
<p>Sem transformao:
<span class=non> preciso conhecer bem HTML e CSS</span></p>
<p>Uppercase:
<span class=upp> preciso conhecer bem HTML e CSS</span></p>
<p>Capitalize:
<span class=cap> preciso conhecer bem HTML e CSS</span></p>
<p>Lowercase:
<span class=low> preciso conhecer bem HTML e CSS</span></p>
text-decoration
A propriedade text-decoration permite colocar (ou tirar) sublinhados, linhas
sobre e atravessando o texto, etc. Sintaxe:
text-decoration: underline (default em links)
text-decoration: overline
text-decoration: line-through
text-decoration: blink
text-decoration: none (default)
Exemplos:
h1 {text-decoration: overline}
<a href="arquivo.html"
style="text-decoration: none">Link sem sublinhado</a>
<style>
57
.und {text-decoration: underline}
.ovr {text-decoration: overline}
.blk {text-decoration: blink}
.lin {text-decoration: line-through}
.non, .non a {text-decoration: none}
</style>
text-align e vertical-align
CSS oferece propriedades que permitem controlar o alinhamento horizontal do
texto, seu alinhamento vertical e endentao do texto na primeira linha. O
alinhamento horizontal o mesmo conseguido com o atributo align do HTML,
s que o da folha de estilos tem precedncia. A sintaxe :
text-align: left | right | center | justify
O alinhamento s se aplica a elementos de bloco
(<P>, <DIV>, H1, etc.) e elementos como applets e imagens. A caracterstica
herdada para sub-blocos. O valor default sempre left. Exemplo:
DIV { text-align: center }
Alinhamento vertical em HTML s pode ser aplicado a tabelas e imagens. Com
CSS, esta propriedade estendida a qualquer elemento de texto e imagens. A
sintaxe :
vertical-align: baseline | top | text-top | middle | bottom | text-bottom
vertical-align: sub | super
vertical-align: porcentagem %
O valor default baseline. As porcentagens referem-se altura da linha (line-
heght) do prprio elemento. Usando porcentagens negativas consegue-se
sobrepor elementos.
text-indent
A propriedade text-indent se aplica a elementos de bloco e realiza a
endentao da primeira linha. A sua sintaxe :
text-indent: comprimento
text-indent: porcentagem
A porcentagem ocorre em relao largura do elemento que contm o seletor.
58
Pode ser a largura total da pgina, a largura da clula de uma tabela, etc.
Exemplos:
P { text-indent: 1 cm }
P {text-indent: 50% }
<P style="text-indent: 1in">
line-height
Este atributo usado para controlar o espao que existe antes e depois de
uma linha de texto. Ela especifica a altura total de uma linha de texto. Se voc
tem um texto de 10 pontos e uma line-height de 20 pontos (line-height: 2),
haver 5 pontos antes e 5 pontos depois de cada linha de texto (espao duplo).
O espao simples equivale geralmente a line-height: 120%. Uma line-height
menor que o tamanho da fonte produzir sobreposio de texto.
Embora ambos os browsers mais populares suportem este recurso, ele no
ocorre da maneira correta. Os browsers no acrescentam a mesma quantidade
de espao antes e depois como esperado.
letter-spacing
A propriedade letter-spacing altera o espao entre as letras. A sua sintaxe :
letter-spacing: normal
letter-spacing: comprimento
As unidades podem ser quaisquer uma das unidades vlidas para tamanho de
fontes (pt, px, pc, cm, in, mm, em e ex). Na tipografia, mais comum usar "em"
como medida de espaamento por ser proporcional ao tamanho da fonte.
Propriedade Color
Define a cor do texto. A propriedade color substitui totalmente o descritor
<FONT COLOR> com vantagens. Pode ser aplicada localmente em um
descritor (usando o atributo style) ou globalmente na pgina e no site, como
qualquer outra propriedade de estilo.
A sintaxe da propriedade color :
color: nome_de_cor
color: #nmero_hexadecimal
59
color: rgb(vermelho, verde, azul)
Exemplos:
H1 { color: green }
P { color: #fe0da4 }
EM { color: rgb (255, 127, 63) }
<EM STYLE="color: rgb (100%, 50%, 25%)">
Os nomes so qualquer nome vlido de cor. Se o browser no encontrar o
nome ao qual o estilo se refere, deve exibir a cor default (ou herdada). O
smbolo "#" opcional no cdigo hexadecimal. A intensidade da cor pode ser
expressa em valores absolutos (0 a 255) ou percentagens (0.0-100.0%).
background-color
As cores de fundo de qualquer elemento podem ser alteradas atravs da
propriedade background-color. A sintaxe :
background-color: transparent (valor default)
background-color: nome_de_cor
background-color: #nmero_hexadecimal
background-color: rgb(vermelho, verde, azul)
Exemplos:
H1 { background-color: green }
P { background-color: #fe0da4 }
EM { background-color: rgb (255, 127, 63) }
<EM STYLE="background-color: rgb (100%, 50%, 25%)">
O fundo transparente simplesmente deixa mostra o fundo do objeto que o
contm. O fundo, para texto, ocupa todo o espao da fonte (inclusive espao
em branco acima e abaixo que fazem parte da fonte). A cor no estendida
quando o espaamento entre linhas aumentado em alguns browsers.
background-image
Com background-image possvel atribuir a qualquer elemento HTML uma
imagem que ser exibida no fundo, assim como as cores de fundo. A sintaxe :
background-image: none (valor default)
background-image: url(URL_da_imagem)
60
Exemplos:
H1 { background-image: url(http://www.apostilando.com/imagens/textura.jpg) }
B {background-image: url(imagens/textura.jpg) navy
<TD STYLE="background-image: url(imagens/textura.jpg)">...</TD>
As URLs so relativas localizao do arquivo que contm a folha de estilos
(pode ser a prpria pgina ou no). A cor de backup usada para 'vazar' pelas
partes transparentes da imagem ou prevenir contra o no carregamento do
fundo (para permitir a leitura em fundo escuro pode-se usar preto como cor de
backup de uma imagem escura).
CSS permite mais controle ainda sobre a imagem de fundo, facilitando a
maneira como a mesma ir se repetir. A propriedade background-repeat.
Sintaxe:
background-repeat: repeat (default)
background-repeat: repeat-x
background-repeat: repeat-y
background-repeat: no-repeat
Exemplos:
BODY {background-image: url(imagens/textura.jpg);
background-repeat: repeat-x }
TABLE{background-image: url(imagens/textura.jpg)
background-repeat: no-repeat }
O valor repeat default e faz com que a imagem ocupe toda a tela. repeat-x
faz com que a imagem seja repetida apenas horizontalmente e repeat-y faz
com que ela seja repetida apenas verticalmente. no-repeat faz com que a
imagem no seja repetida de forma alguma (aparecer uma imagem apenas no
canto superior esquerdo).
Para fazer a imagem aparecer em outros lugares, pode-se usar as
propriedades de posicionamento do fundo da tela.
O posicionamento e a forma de exibio do papel de parede so controlados
pelas propriedades background-attachment e background-position. A primeira
define se o fundo ir ou no se mover com o texto ou ficar fixo na tela. A
segunda permite o posicionamento do fundo em um local exato da tela.
61
Sintaxe:
background-attachment: fixed
background-attachment: scroll
Exemplo:
BODY {background-image: url (imagem/textura,jpg);
background-attachment: fixed }
Sintaxe:
background-position: porcentagem_horiz% porcentagem_vert%
background-position: comprimento comprimento
background-position: posio_vertical posio_horizontal
Exemplos:
BODY {background-image: url(imagem/textura.jpg);
background-repeat: no-repeat;
background-position: 50% 100% }
background-position: 25pt 2.5cm }
background-position: center top }
background-position: left bottom }
Os valores de porcentagem so relativos posio do elemento sobre o qual
se aplica o estilo. As posies so sempre dadas em pares, tendo os valores
separados por espaos. O primeiro valor sempre um valor horizontal e o
segundo um valor vertical. O browser coloca o bloco afetado dentro de uma
"caixa invisvel" e a posiciona de acordo com as porcentagens.
Um valor de 100% para o primeiro valor, empurra a margem direita (oposta)
desta "caixa invisvel" contra a margem direita do browser.
Os valores de comprimento, assim como os de porcentagem tambm so
dados em pares. O primeiro distncia da margem horizontal a partir do
62
canto superior esquerdo do objeto; o segundo distncia da margem
superior. As unidades vlidas so as mesmas usadas
em fontes (cm, mm, in, pc, px, pt, em, ex) e podem ser misturadas nos dois
valores do par.
Os valores de posio so palavras-chave usadas tambm aos pares. So
equivalentes das porcentagens bsicas de alinhamento. O primeiro par pode
ter left (0%), right (100%) ou center (50%). O segundo par pode ser top (0%),
bottom (100%) ou center (50%).
Propriedades de Classificao
Estas propriedades classificam os elementos em categorias que podem
receber estilos.
Categorias podem ser listas, blocos, trechos de blocos ou itens invisveis.
display
Esta propriedade define como um elemento mostrado. A propriedade none
desliga o elemento e fecha o espao que o objeto antes ocupava (torna o
objeto invisvel). block abre uma nova caixa onde o objeto posicionado,
relativo aos outros blocos, list-item um bloco com um marcador de lista e
inline define um elemento como parte de um bloco.
Sintaxe:
display: block | inline | list-item | none
Exemplo:
P {display: list-item}
IMG {display: none} // desliga todas as imagens
white-space
Define como o espao em branco do elemento gerenciado (se as linhas
devem ser quebradas para que apaream na tela ou no (nowrap) ou se os
espaos em branco, tabulaes, etc. devem ser considerados (pre).
white-space: normal | pre | nowrap
list-style
Esta propriedade e as propriedades list-style-type, list-style-image e list-style-
63
position definem atributos para objetos de lista, como tipo de marcador,
imagem do marcador e posio.
list-style-type: disc | circle | square | decimal | lower-roman
upper-roman | lower-alpha | upper-alpha | none
list-style-image: url(url_da_imagem)
list-style-position: inside | outside
Exemplo:
list-style-image: url(bullet.gif)
possvel definir as trs propriedades atravs de um atalho usando list-type. A
ordem dos fatores importante neste caso.
list-style: list-style-type list-style-image list-style-position
Exemplo:
list-style: url(bullet.gif)
list-style: square outside
Blocos
Uma caixa uma propriedade de qualquer elemento de bloco no HTML (H1,
P, DIV, etc. que automaticamente definem seu prprio bloco ou pargrafo). A
caixa de um objeto consiste das partes seguintes:
O elemento em si (texto, imagem)
As margens internas do elemento (padding)
A borda em torno das margens internas (border)
A margem em torno da borda (margin)
Todo elemento de bloco tem essas propriedades. As propriedades CSS que
64
veremos nesta seo mostraro como alter-las. A cor e tamanho da borda
podem ser alterados assim como o fundo (como vimos na seo anterior). A
margem externa sempre transparente mas a margem interna herda a cor de
fundo do objeto.
Tambm so alterveis as margens internas e externas, larguras de borda, cor
de borda e estilo de borda de cada um dos quatro lados de uma caixa
individualmente, identificados pelos nomes top, right, bottom e left:
margin e padding
As margens externas so definidas usando a propriedade margin (que afeta
todas as margens ao mesmo tempo) ou as propriedades margin-top, margin-
bottom, margin-right e margin-left que permite alterar as margens
individualmente.
Sintaxe:
margin-top: comprimento | porcentagem % | auto
margin-bottom: comprimento | porcentagem % | auto
margin-right: comprimento | porcentagem % | auto
margin-left: comprimento | porcentagem % | auto
Exemplo:
margin-top: 1cm; margin-left: 12pt;
A propriedade margin afeta vrios aspectos das margens externas de uma vez
s. A ordem dos fatores importante. Podem ser includos todos quatro
valores, apenas um (todas as margens iguais) ou dois (margens horizontais e
verticais). Sintaxe:
margin: margin-top margin-right margin-bottom margin-left
margin: margin-top% margin-right% margin-bottom% margin-left%
65
margin: espao_vertical espao_horizontal
margin: margem_de_todos_os_lados
Exemplos:
margin: 5cm // vale para as quatro margens
margin: 5cm 2cm // 5cm margs verticais, 2cm margs horizontais
margin: 5cm 3cm 2cm 1cm // sent. horrio: top, right, bottom, left
// (em cima 5; direita 3; em baixo 2;...
As margens internas (padding) so definidas usando a propriedade padding
(que afeta todas as margens internas ao mesmo tempo) ou as propriedades
padding-top, padding-bottom, padding-right e padding-left.
Sintaxe:
padding-top: comprimento | porcentagem %
padding-bottom: comprimento | porcentagem %
padding-right: comprimento | porcentagem %
padding-left: comprimento | porcentagem %
A propriedade padding afeta vrios aspectos das margens internas de uma vez
s. A ordem dos fatores importante. Podem ser includos todos quatro valores
ou apenas um. Sintaxe:
padding: padding-top padding-right padding-bottom padding-left
padding: padding-top% padding-right% padding-bottom% padding-left%
padding: espao_vertical espao_horizontal
padding: margem_de_todos_os_lados
border-width
Pode se controlar vrios aspectos das bordas como a sua espessura em cada
um dos quatro lados, suas cores (tambm cada um dos quatro lados) e estilos
(idem). Isto pode ser feito de diversas maneiras. Para que as bordas apaream
preciso primeiro que o estilo (border-style) seja definido. Por exemplo:
border-style: solid
A espessura das bordas pode ser controlada atravs da propriedade border-
width, afetando as espessuras de todos os lados da borda, ou individualmente
atravs de border-top-width, border-bottom-width, border-right-width e border-
66
left-width. Sintaxe:
border-top-width: comprimento | thin | medium | thick
border-bottom-width: comprimento | thin | medium | thick
border-right-width: comprimento | thin | medium | thick
border-left-width: comprimento | thin | medium | thick
Exemplos:
border-bottom-width: thick; border-right-width: 5.5px;
border-left-width: 0.2cm
As propriedades das bordas podem ser tratadas em grupo, com border-width. A
ordem dos fatores importante. Podem ser includos todos os quatro valores,
dois (referindo-se s bordas horizontais e verticais) ou apenas um (afetando
todas as bordas). Sintaxe:
border-width: border-top-width border-right-width
border-bottom-width border-left-width
Exemplos:
border-width: 5cm // vale para as quatro bordas
border-width: 5cm 2cm // 5cm verticais, 2cm horizontais
border-width: 5cm 3cm 2cm 1cm // horrio: top, right, bottom, left
border-color
A propriedade border-color um atalho que permite que se altere a cor de uma
ou de todas as quatro bordas ao redor de um elemento que tambm podem ser
definidas individualmente atravs de border-top-color, border-bottom-color,
border-right-color e border-left-color.
border-top-color: cor (nome ou cdigo)
border-bottom-color: cor (nome ou cdigo)
border-right-color: cor (nome ou cdigo)
border-left-color: cor (nome ou cdigo)
Exemplos:
border-bottom-color: rgb(231,45,112); border-right-color: 0fa97b;
border-left-color: navy
As propriedades das bordas podem ser tratadas em grupo, com border-color. A
67
border-color: border-top-color border-right-color
border-bottom-color border-left-color
Cada um dos border-xxx-color acima uma cor (RGB, hexadecimal ou nome).
Pode-se alterar todas as bordas de uma vez, apenas as duas verticais e
horizontais ou as quatro individualmente.
Exemplos:
border-color: red // red para as quatro bordas
border-color: rgb(255, 0, 0) // red
border-color: rgb(100%, 0, 0) // red
border-color: red 0000ff // red verticais, 0000ff horizontais
border-color: red blue yellow cyan // 4 cores sentido horrio
border-style
O estilo de cada uma das quatro bordas pode ser alterado com border-style.
Tambm possvel defini-los individualmente usando border-top-style, border-
bottom-style, border-right-style e border-left-style. So vrios os estilos
disponveis (tracejado, pontilhado, vrias verses de 3D, etc.).
border-top-style: none | dotted | dashed | solid | double |
groove | ridge | inset | outset
border-bottom-style: nome de estilo (um dos nomes acima)
border-right-style: nome de estilo
border-left-style: nome de estilo
Exemplos:
border-bottom-style: none border-right-style: solid;
border-left-style: inset
As propriedades das bordas podem ser tratadas em grupo, com border-style. A
border-style: border-top-style border-right-style
border-bottom-style border-left-style
68
Exemplos:
border-style: solid none inset outset;
border-style: solid
border-style: inset outset
Cada um dos border-xxx-style acima um dos seguintes valores: none, dotted,
dashed, solid, double, groove, ridge, inset, outset. No Netscape e Internet
Explorer, funcionam os estilos solid, inset (efeito baixo-relevo) e outset (efeito
alto-relevo).
border
As propriedades border-top, border-bottom, border-left e border-right agrupam
as propriedades de cor, estilo e espessura para cada uma das quatro bordas.
border-top: border-width border-style border-color
border-bottom: border-width border-style border-color
border-left: border-width border-style border-color
border-right: border-width border-style border-color
A propriedade border uma forma reduzida de definir tudo isto de uma vez s
para todas as bordas e de forma idntica (no possvel especificar valores
diferentes para as bordas
neste caso). Todos os itens no precisam aparecer, mas a ordem dos fatores
importante:
border: border-width border-style border-color
width e height
As propriedades width e height modificam a altura e largura de um bloco da
mesma forma que atributos HTML width e height usados em imagens e applets
no HTML. Com folhas de estilos podem ser usados para redimensionar a
"caixa" de qualquer elemento de bloco. Sintaxe:
width: comprimento | auto
height: comprimento | auto
float
A propriedade float permite que um bloco qualquer seja posicionado direita
ou esquerda da janela do browser, fazendo com que o texto restante flua em
69
sua volta. Permite que qualquer bloco se comporte como uma imagem que faz
uso dos atributos align=left e a-lign=right no HTML. Sintaxe:
float: left | right | none
clear
E finalmente, para evitar que um bloco flua em torno de uma imagem ou bloco
que utiliza a propriedade float, existe a propriedade clear, que deve ser
atribuda a um bloco ou pargrafo que afetado pela flutuao de um bloco.
Faz a mesma coisa que o atributo clear, usado no <BR> em HTML, s que aqui
ela suportada em qualquer elemento (bloco ou no).
clear: none | left | right | both
Posicionamento
O posicionamento de objetos em HTML pode ser conseguido em termos
absolutos ou relativos usando CSS 2. As propriedades permitem o
posicionamento em trs dimenses (horizontal, vertical e em camadas).
position, top e left

Esta propriedade precisa de mais duas propriedades que definem o
posicionamento de um objeto. Os atributos localizam o objeto na tela de forma
absoluta ou de forma relativa. A origem da posio absoluta ser a posio do
objeto no nvel imediatamente superior. O posicionamento relativo se refere
posio anterior do objeto. Sintaxe:
position: absolute | relative
left: comprimento | porcentagem | auto
top: comprimento | porcentagem | auto
z-index
A propriedade z-index permite ordenar os objetos em camadas. um eixo de
profundidade. Para us-la, basta definir em cada objeto:
z-index: nmero onde nmero a camada de exibio. Quanto maior o
nmero, mais alta a camada. o corresponde camada do texto. Se um objeto
tiver z-index menor que zero aparecer atrs do texto. Se z-index for maior que
zero, aparecer na frente. Quando no definido ou quando z-index: 0 o bloco
70
ocupar a mesma camada que o texto.
visibility
Esta propriedade serve para tornar um bloco visvel ou invisvel. Difere de
display porque no remove o espao antes ocupado pela imagem:
visibility: hidden | visible
Exemplo:
IMG {visibility: hidden} // torna invisveis todas as imagens
HTML 5
HTML5 (Hypertext Markup Language, verso 5) a quinta verso da
linguagem HTML. Esta nova verso traz consigo importantes mudanas quanto
ao papel do HTML no mundo da Web, trazendo novas funcionalidades como
semntica e acessibilidade, com novos recursos antes s possveis por meio
de outras tecnologias, e trazendo uma importante disseminao dentre todos
os novos navegadores de internet, tornando-o mais universal.
Esta evoluo da linguagem padro para web pode eliminar a necessidade de
plug-ins para aplicaes multimdia em navegadores. Diversos crticos
consideram a tecnologia como um forte concorrente ao Flash, da Adobe, ao
Silverlight, da Microsoft, e ao recente JavaFX, da Sun (Oracle). Estas
tecnologias precisaro se adaptar rapidamente para conseguir manter-se no
mercado, to populares quanto hoje. Na avaliao do co-diretor de ferramentas
da Mozilla, Ben Galbraith, as tecnologias viabilizadas pelo HTML5 como o
Canvas para desenhos 2D e o armazenamento de contedos no desktop,
permitiro que "usemos mais o browser do que nunca".
Exemplo de um cdigo HTML5

<!doctype html>
<html>
<head>
<title>HTML5</title>
<meta charset="UTF-8" />
</head>
71
<body>
<audio controls preload="auto">
<source src="exemplo.mp3" />

<p>Seu browser no suporta essa tecnologia.</p>
</audio>
</body>
</html>
Com isso finalizamos nosso estudo de HTML e Css.
72

Apostila de CSS PDF

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Apostila de CSS PDF

Enviado por

Direitos autorais:

Formatos disponíveis

Desenvolvida exclusivamente para o Apostilando.

Como se cria um documento HTML

Uma pgina Web composta de textos e comandos especiais (tags). Assim

Tags ou comandos HTML

As TAGS normalmente so especificadas em pares, delimitando um texto que

Ttulo: o texto que aparece na barra de ttulo do browser.

Vamos ver um pouco sobre os elementos bsicos do HTML:

Pargrafos e quebras de linha

O Comando <P> inicia um novo pargrafo onde o texto automaticamente

ALIGN=CENTER Centraliza o texto.

Alterando o formato de linha de separao

USANDO IMAGENS COMO LINHAS SEPARADORAS

Em vez de usar o comando <HR> como separador, podemos usar uma

Estilos de Texto e Fonte

Alterando o tamanho da fonte

Um dos recursos de tratamento do texto mais interessantes da linguagem

No exagere na quantidade cores e tamanho das letras do texto ou a sua

Como padro um cabealho gerado pelo comando <Hn> sempre posicionado

<OL TYPE=...START=...>...</OL> so os elementos delimitadores de listas

<UL>...</UL> so os elementos delimitadores de listas sem ordenao (UL

<DL>...</DL> so as marcas que englobam uma lista de definies, ideais para

Esse comando define a posio de uma imagem que aparece no corpo do

SRC=URL o nome da figura, se estiver no

VSPACE=nmero Determina em pixels o espao que

Com exceo do parmetro SRC, todos os demais so opcionais. Portanto,

At agora voc aprendeu como criar documentos interessantes, mas que

Criando um Link com Arquivos Locais

HREF=URL Especifica o endereo do URL ao

Usando uma Imagem como Hiperlink

CRIANDO LINKS PARA SEES DE UMA PGINA

Para dominar o uso do hipertexto, o programador em HTML deve conhecer

Criando uma ncora

Enviando E-Mail diretamente da Pgina HTML

Voc pode acionar o programa padro de e-mail diretamente de uma pgina

Assim com as listas que ns j vimos, no HTML existem elementos especficos

Elementos bsicos de tabelas

Parmetros do elemento <TABLE>

Parmetros do elemento <TR>

Parmetros dos Elementos <TD> e <TH>

O comando META um dos comandos pouco explorados da linguagem HTML.

Variaes do comando meta

Usar o recurso do autocarregamento indicado quando voc deseja exibir

O principal elemento de sucesso da Internet o hiperlink. Que permite a

Considerao no uso de multimdia

O grande inimigo da utilizao de multimdia o mesmo relacionado com as

CSS Position (CSS-P)

Incluindo CSS no Documento

Principais atributos de uma folha de estilo

Atributos e Cores de Fundo da Pgina

O uso de seletor de classes permite configurar um estilo independente que

Definindo a CSS para impresso

Definindo Quebras de pgina para a impresso

Definindo Segundo Plano

Envolvendo um elemento com texto

Regras, declaraes e seletores

Mltiplas declaraes e seletores

Os browsers comerciais tm problemas principalmente com a aplicao

Como incluir estilos em uma pgina

As propriedades declaradas no bloco <STYLE> sobrepem qualquer

Links (pseudo-classes e pseudo-elementos)

Uma forma de facilitar a aplicao e a criao de estilos com o Adobe

Todo elemento de bloco tem essas propriedades. As propriedades CSS que

position, top e left