Introdução ao HTML

Prévia do material em texto

1 
 
 
 
 
 
 
Desenvolvida exclusivamente para o Apostilando.com 
por Marcos Paulo Furlan 
2 
 
ÍNDICE 
ÍNDICE .......................................................................................................................................... 2 
HTML ............................................................................................................................................. 5 
XHTML ........................................................................................................ 5 
Como se cria um documento HTML ............................................................... 6 
Tags ou comandos HTML ........................................................................... 7 
Estrutura Básica ............................................................................................. 8 
Comentários .............................................................................................. 10 
Parágrafos e quebras de linha ...................................................................... 10 
O Comando <P> ....................................................................................... 10 
Alinhando parágrafos ................................................................................ 11 
O Comando <BR> ..................................................................................... 11 
O Comando <HR> .................................................................................... 11 
Alterando o formato de linha de separação ............................................... 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 
Cabeçalhos ................................................................................................... 14 
Alinhando cabeçalhos ............................................................................... 14 
Listas ............................................................................................................ 15 
Listas Ordenadas ...................................................................................... 15 
Listas Não ordenadas ............................................................................... 16 
Lista de Definição ...................................................................................... 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 diretórios .................................................. 21 
CRIANDO LINKS PARA SEÇÕES DE UMA PÁGINA .............................. 21 
Criando uma Âncora ................................................................................. 21 
Enviando E-Mail diretamente da Página HTML ........................................ 21 
Definindo Destinos .................................................................................... 21 
TABELAS ...................................................................................................... 22 
Elementos básicos de tabelas ...................................................................... 22 
Parâmetros ................................................................................................ 23 
Parâmetros do elemento <TABLE> .......................................................... 23 
Parâmetros do elemento <TR> ................................................................. 24 
Parâmetros dos Elementos <TD> e <TH> ................................................ 24 
META ............................................................................................................ 26 
3 
Informações específicas............................................................................ 26 
Variações do comando meta ..................................................................... 27 
Multimídia ..................................................................................................... 27 
Consideração no uso de multimídia .......................................................... 28 
FOLHAS DE ESTILO .................................................................................................................. 28 
Versões 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 página 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 impressão .............................................................. 37 
Definindo Quebras de página para a impressão ....................................... 38 
Controles de Texto .................................................................................... 38 
Ajustando as Entrelinhas........................................................................... 39 
Definindo Segundo Plano .......................................................................... 39 
Bordas ....................................................................................................... 40 
Envolvendo um elemento com texto ........................................................ 40 
Posicionamentos ....................................................................................... 41 
Posicionamento Estático ........................................................................... 41 
Posicionamento Relativo ........................................................................... 41 
Posicionamento Absoluto .......................................................................... 42 
Posicionamento 3D ................................................................................... 42 
Regras, declarações e seletores............................................................... 42 
Múltiplas declarações e seletores ............................................................. 43 
Comentários e instruções .......................................................................... 44 
Valores ...................................................................................................... 45 
Herança ..................................................................................................... 46 
Como incluir estilos em uma página ............................................................. 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 
4 
line-height .................................................................................................. 59 
letter-spacing ............................................................................................. 59 
Propriedade Color ......................................................................................... 59 
background-color ...................................................................................... 60 
background-image .................................................................................... 60 
Propriedades de Classificação ..................................................................... 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 código HTML5 ................................................................. 71 
 
5 
 
HTML 
HTML (acrônimo para a expressão inglesa Hypertext Markup Language, que 
significa Linguagem de Marcação de Hipertexto) é uma linguagem de 
marcação utilizada para produzir páginas na Web. Documentos HTML podem 
ser interpretados por navegadores. 
XHTML 
O XHTML, ou eXtensible Hypertext Markup Language, é uma reformulação da 
linguagem de marcação HTML, baseada em XML. Combina as tags de 
marcação HTML com regras da XML. Este processo de padronização tem em 
vista a exibição de páginas Web em diversos dispositivos (televisão, palm, 
celular, etc). Sua intenção é melhorar a acessibilidade. 
O XHTML consegue ser interpretado por qualquer dispositivo, 
independentemente da plataforma utilizada, pois as marcações possuem 
sentido semântico para as máquinas. O HTML não consegue esta 
implementação. No entanto, não existem muitas diferenças entre o HTML e o 
XHTML. Para verificar se uma página XHTML está bem construída, o melhor 
método é validar o código através de uma aplicação Web disponibilizado pela 
organização W3C. 
A Recomendação XHTML original da W3C, XHTML 1.0, foi simplesmente uma 
reformulação do HTML 4.01 em XML. Existem três diferentes "DTDs" de 
XHTML 1.0, cada qual com equivalência a uma versão 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 também permite o uso de vários elementos e atributos que 
são julgados presencionais, para facilitar a transição 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 definição de um 
6 
frameset HTML, uma prática comum em versões de HTML anteriores ao 
HTML 4.01. 
A mais recente Recomendação XHTML da W3C é o XHTML 1.1: Module-based 
XHTML, que é uma reformulação do XHTML 1.0 Strict, com pequenas 
modificações, usando alguns módulos de um conjunto definido em 
Modularização de XHTML[1], uma Recomendação W3C que cria uma 
modularização de frames, um padrão de módulos, e várias outras definições. 
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 versão. A 
apresentação é controlada puramente pelas Folhas de Estilo em Cascata 
(CSS). Esta versão também permite suporte à marcação rubi, necessária para 
línguas do Extremo Oriente (especialmente CJK). 
Além da Modularização de XHTML permitir pequenas ferramentas XHTML 
serem reutilizadas por outras aplicações XML de uma maneira bem definida, e 
que o XHTML seja estendido para alguns propósitos, XHTML 1.1 adiciona o 
conceito de um documento "estritamente conformado": esses documentos 
definidos nos módulos requeridos para XHTML 1.1. Por exemplo, se um 
documento é estendido para usar o módulo XHTML Frames (frameset), ele 
também pode ser descrito como XHTML 1.1, mas não estritamente conforme o 
XHTML 1.1. Ao invés disso, ele deve ser descrito como um XHTML Host 
Language Conforming Document[2], se a ferramenta for relevante e 
necessária. 
Como se cria um documento HTML 
 
Uma página Web é composta de textos e comandos especiais (tags). Assim 
como qualquer linguagem, o programador deveescrever o código-fonte 
seguindo as regras da linguagem. Esse código-fonte é posteriormente 
interpretado pelo browser, que se encarregará de executar os comandos (tags) 
do código para formatar e acessar recursos da Web. 
O código 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 
7 
existem editores WYSIWYG (What you see is what you get, ou o que você vê é 
o que realmente obtém) como exemplo podemos citar o Dreamweaver. 
Existem ainda editores não WYSIWIG, onde você tem que construir o código, 
mas ele completa muitos comando, como exemplo podemos citar o Sothink 
HTML Editor (disponível na pasta do Dreamweaver), e na própria Internet 
existem vários destes editores gratuitos. 
 
Tags ou comandos HTML 
 
As TAGS normalmente são especificadas em pares, delimitando um texto que 
sofrerá algum tipo de formatação. 
As TAGS são identificadas pelo sinais < > ou </ >. 
Entre os sinais <> são especificados os comandos propriamente ditos. No caso 
de tags que necessitam envolver um texto, sua finalização deve ser feita 
usando-se a barra de divisão / , indicando que a TAG está finalizando a 
marcação de texto. 
Os principais elementos de página HTML são, títulos, textos, parágrafos, 
imagens e links, responsáveis pela chamada de outras páginas para a tela: 
 
Título: É o texto que aparece na barra de título do browser. 
Imagem: São figuras, desenhos e fotos usados para ilustrar a página. 
8 
Texto: É a informação mais comum dentro de uma página. Pode ser formatado 
através 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 região da 
página atual ou uma página localizada em qualquer lugar na Internet. Uma 
figura também pode ser usada como link, ou seja, clicando na figura saltamos 
para outro local. 
Cabeçalho: São linhas de texto com tamanhos especiais. Existem seis 
tamanhos de cabeçalhos. 
Estrutura Básica 
A estrutura básica de um documento HTML é a seguinte: 
 
<HTML> 
<HEAD> 
<TITLE> Título do Documento</TITLE> 
</HEAD> 
<BODY> Aqui deverá ser digitado e criado a maioria dos itens que irão 
aparecer em sua Home Page 
</BODY> 
</HTML> 
 
Vamos ver um pouco sobre os elementos básicos do HTML: 
<HTML></HTML>: Indicam respectivamente o início e o fim do documento. 
Todo o resto deve estar entre estas marcas. 
<HEAD></HEAD>: Delimitam a seção de cabeçalho do documento. Trata-se 
da primeira seção do documento. 
<TITLE></TITLE>: Indicam o título do documento, que será apresentado na 
barra superior do browser. Estas marcas devem constar da seção de 
cabeçalho. 
<BODY></BODY>: Corpo do documento. Entre estas marcas estará o 
conteúdo a ser apresentado, textos, cores, imagens, etc. Este elemento pode 
conter cinco parâmetros opcionais: 
9 
BACKGROUND: configura especificar uma imagem como fundo da página. 
EX. <BODY BACKGROUND= “fundo.gif” > configura uma página com a 
imagem fundo.gif como fundo. 
BGCOLOR: Configura a cor de fundo da página. EX: <BODY BGCOLOR= 
“White” > configura uma página com fundo branco (padrão). 
TEXT: configura a cor padrão do texto da página. EX: <BODY TEXT= “Black” 
> configura uma página com texto em cor preta. (padrão). 
LINK, ALINK, VLINK: configura as cores dos links da página. 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 página 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 são do tipo início-fim, ou seja, funcionam em 
pares. 
Em cada documento HTML só deve haver uma marca de cada tipo acima. 
Existe uma ordem seqüencial lógica entre as marcas. 
Estes detalhes devem ser respeitados, senão o browser não conseguirá 
apresentar o documento. 
Como HTML não é uma linguagem de programação, você não será avisado de 
erros que tenha cometido na edição 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 não usarei nenhuma formatação especial aqui dentro. 
</BODY> 
10 
</HTML> 
 
Comentários 
Podemos também acrescentar comentários ao nosso código HTML, estes 
comentários não aparecem para no navegado e somente no código, são 
representados pela seguinte TAG <!- - inicia o comentário //- - >, finaliza o 
comentário. 
São utilizados para ocultar scripts dentro do código Html, pois caso o script não 
possa ser processado o mesmo será ignorado pelo navegador. 
Caracteres especiais 
Existem caracteres que não podem ser obtidos através de teclado. Eles podem 
ser inseridos em sua página através da especificação de um código especial 
que o browser interpreta e substitui por um caractere específico. Esses códigos 
podem ser obtidos utilizando-se uma nomenclatura definida pela norma ISO. 
Alguns dos símbolos mais utilizados no HTML é o &nbsp; que corresponde 
ao espaço do teclado, já que na HTML ele considera apenas um espaço. Para 
uma tabela mais completa visite o link 
http://www.w3.org/TR/html401/sgml/entities.html 
Parágrafos e quebras de linha 
 
Ao contrário dos editores de texto comum, nos quais você insere uma quebra 
ou avanço de linha toda vez que pressiona a tecla ENTER, em um programa 
HTML é necessário colocar um comando específico para que o browser 
entenda que você deseja mudar de linha e iniciar uma nova linha ou começar 
um novo parágrafo. Existem dois comandos para criar quebras de linha e 
novos parágrafos. São os comandos <P> e <BR> 
O Comando <P> 
Para forçar um novo parágrafo, ou seja, avançar uma linha em branco e iniciar 
o texto na segunda linha após o final do parágrafo anterior deve ser usado o 
comando <P>. 
11 
Alinhando parágrafos 
 
O Comando <P> inicia um novo parágrafo onde o texto é automaticamente 
alinhado pela margem esquerda da tela. Através do parâmetro ALIGN, pode-se 
mudar o alinhamento de forma que o texto do parágrafo inteiro fique 
centralizado ou alinhado à direita. Nesse caso, deve-se usar um par de 
comandos <P> envolvendo o parágrafo. 
 
ALIGN=CENTER Centraliza o texto. 
ALIGN=RIGHT Alinha pela margem direita 
ALIGN=JUSTIFY Alinha pelas duas margens 
ALIGN=LEFT Alinha pela margem esquerda (padrão) 
 
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 não em seu 
final. O comando <BR> tem como função avançar para a linha imediatamente 
após à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 divisória na posição 
em que foi especificado. Seu uso é recomendado para criar uma divisão na 
página. 
Alterando o formato de linha de separação 
 
As linhas criadas pelo comando <HR> podem Ter o seu tamanho alterado 
pelos parâmetros SIZE e WIDTH. O parâmetro SIZE altera a espessura (altura) 
da linha, deixando-a mais grossa em função do valor especificado. Esse valor é 
expresso em pixels. 
A largura ou comprimento da linha é alterada pelo parâmetro 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 
12 
em função da largura da janela. Veja o código 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 parâmetros WIDTH e HEIGHT para alterar o tamanho da imagem. 
DIV 
A Tag <DIV></DIV> envolve uma área do texto ou divisão que pode receber 
parâmetros específicos de alinhamento, como é o caso deALIGN, para alinhar 
o texto. Podemos envolver vários parágrafos com o elemento DIV 
blockquote 
O comando Blockquote permite dar recuos de parágrafos aos parágrafos, e 
pode ser cumulativo 
Estilos de Texto e Fonte 
Assim como no editor de textos, você pode criar uma série de efeitos no texto, 
alterando a forma ou o tipo da fonte. Todos os comandos que alteram o estilo 
do texto são do tipo contêiner ou liga desliga, ou seja, precisam ser 
especificados em pares, marcando o início e fim do texto que sofrerá a 
formatação. 
Os principais comandos de estilo de texto são: 
Comando Sintaxe Função 
Negrito <B>Texto</B> Aplica o estilo Negrito 
Itálico <I>Texto</I> Aplica o estilo Itálico 
Sublinhado <U>Texto</U> Aplica o estilo sublinhado(Não 
funciona em alguns Browsers 
Strong <Strong>Texto</Strong
> 
Similar ao Negrito 
Typerwriter <TT>Texto</TT> Deixa o texto com espaçamento 
regular 
13 
Big <BIG>Texto</BIG> Aumenta a fonte e aplica negrito 
Small <SMALL>Texto</SMAL
L> 
Reduz e altera a fonte 
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 (Não 
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 responsável por isso é o comando <FONT>, que é do tipo 
liga desliga. 
Size 
O parâmetro size especifica o tamanho da fonte utilizada. Os valores 
permitidos vão de 1, o menor até 7, o maior. O padrão é 3. Se for especificado 
um número antecedido pelo sinal de adição ou de subtração, o tamanho da 
fonte atual será aumentado ou diminuído 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 parâmetro permite que seja escolhida uma fonte diferente para o texto. 
Podemos especificar várias fontes, de maneira que, se o sistema não possuir a 
primeira opção, a segunda é carregada. 
Se não for encontrada nenhuma das fontes especificadas, o texto é exibido na 
fonte padrão. 
Color 
Esse parâmetro especifica a cor do texto. Seu valor pode ser especificado no 
14 
formato hexadecimal, RGB ou através de um nome predefinido de cores como 
mostra a tabela abaixo: 
Cor Código Cor Código 
Aqua #70DB93 Blue #0000FF 
Black #000000 Cyan #00FFFF 
Fúcsia #FF00FF Gray #C0C0C0 
Green #00FF00 Lime #32CD32 
Brown #800000 Navy #23238E 
Olive #808000 Red #FF0000 
Silver #E6E8FA Teal #008080 
White #FFFFFF Yellow #FFFF00 
 
Não exagere na quantidade cores e tamanho das letras do texto ou a sua 
página parecerá uma mensagem enviada por código. 
Cabeçalhos 
 
Outra forma muito usada para mudar o tamanho da letra e aplicar um efeitos 
em textos é utilizando cabeçalhos. A linguagem HTML possui seis comandos 
de cabeçalho de <H1> até <H6>. Além do tamanho diferenciado, o comando 
cabeçalho insere uma linha em branco antes e depois da linha que contém o 
comando. Eles são perfeitos para criar títulos e iniciar seções dentro de uma 
página. O comando <H1> possui o maior tamanho enquanto que <H6> possui 
o menor tamanho de fonte. 
Alinhando cabeçalhos 
 
Como padrão um cabeçalho gerado pelo comando <Hn> é sempre posicionado 
no lado esquerdo da linha. Usando o parâmetro ALIGN pode-se centralizar ou 
ajustar o cabeçalho à direita da linha. 
Veja o código: 
 
<HTML> 
<HEAD> 
15 
<TITLE>Alinhando Cabeçalhos</TITLE> 
</HEAD> 
<BODY> 
<H2> Cabeçalho sem alinhamento especial</H2> 
<HR> 
<H2 ALIGN=CENTER>Cabeçalho com alinhamento centralizado</H2> 
<HR> 
<H2 ALIGN=RIGHT>Cabeçalho com alinhamento à direita</H2> 
</BODY> 
</HTML> 
Listas 
Na linguagem HTML existem elementos específicos para a criação de listas, 
que podem ser listas ordenadas (OL), listas sem ordenação (UL), ou listas de 
definições (DL). Um detalhe interessante é que podem ser criadas listas 
aninhadas, ou seja, listas dentro de listas. A seguir, veremos as características 
de cada umas delas. 
 
Listas Ordenadas 
 
<OL TYPE=...START=...>...</OL> são os elementos delimitadores de listas 
ordenadas (OL – Ordered Lists). A estrutura das listas ordenadas é bastante 
simples: entre os elementos de início e fim, os itens da lista são definidos pelos 
elementos <LI></LI>. Os itens são apresentados em linhas consecutivas e 
precedidos por uma numeração atribuída pelo paginador. O parâmetro opcional 
TYPE define como será o tipo de numeração de cada linha. Os tipos 
disponíveis são: “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 padrão (1,2,3, etc). O parâmetro 
opcional START define a partir de que elemento a numeração deve se iniciar. 
Ele deve receber como valor um número indicando em que posição a 
contagem deve se iniciar. 
 
16 
Listas Não ordenadas 
 
<UL>...</UL> são os elementos delimitadores de listas sem ordenação (UL – 
Unordered Lists). A estrutura das listas sem ordenação é a mesma das listas 
ordenadas, sendo que, na apresentação, os itens serão precedidos por um 
marcador (bullet). No caso de listas sem ordenação 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 ordenação. O seu conteúdo pode ser texto, outras listas, 
imagens, links ,etc. 
Lista de Definição 
 
<DL>...</DL> são as marcas que englobam uma lista de definições, ideais para 
a criação de glossários e coisas do gênero. A estrutura desta lista é diferente 
das outras, pois existem dois elementos – o termo a ser definido (DT), e a 
definição propriamente dita (DD). Na apresentação cada termo aparece em 
uma linha, e a respectiva definição na linha seguinte, deslocada para a direita. 
 
<HTML> 
<HEAD> 
<TITLE>Listas de definição</TITLE> 
</HEAD> 
<BODY> 
<H2>Listas de definição</H2> 
<DL> 
<DT>HTML</DT> 
<DD>Hiper Text Markup Language</DD> 
<DT>OL</DT> 
<DD>Listas ordenadas com numeração.</DD> 
<DT>UL</DT> 
<DD>Listas sem ordenação</DD> 
<DT>LI</DT> 
17 
<DD>Elemento da Lista</DD> 
</DL> 
<H2>Listas não ordenadas combinadas<BR>com uma lista de 
Definição</H2> 
<DL> 
<DT>Parâmetro do elemento OL</DT> 
<DD> 
<UL> 
<LI>TYPE</LI> 
<LI>START</LI> 
</UL> 
</DD> 
<DT>Parâmetros 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 através de uma cópia feita a partir de uma 
página da Internet, através de CDs ROMs, Scanners, etc. ou pode criá-las a 
18 
partir de um programa de imagens. 
O comando img 
 
Esse comando define a posição 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 diretório do programa ou seu 
caminho completo. 
ALT=”texto” Exibe o texto quando o browser não 
encontra a imagem, ou uma legenda 
quando o cursor do mouse passa 
sobre ela mostrando o texto 
especificado. 
ALIGN=”TOP” | 
“MIDLE” | “BOTTOM” 
Especifica o alinhamento da imagem 
relativamente à linha de texto onde é 
exibida. 
ALIGN=”LEFT” | 
“RIGHT” 
Especifica o alinhamento da imagem 
relativamente às bordas laterais da 
janela 
WIDTH=”número”| 
”número%” 
Esse parâmetro especifica a largura 
de exibição da imagem 
independentemente do seu tamanho 
físico. Se a imagem for maior ou 
menor do que o valor especificado, 
ela será esticada ou comprimida para 
caber no espaço especificado. Se for 
o colocado o sinal de porcentagem, 
ele é relativo à largura da janela. 
19 
HEIGHT=”número” Especifica a altura de exibição daimagem independentemente de seu 
tamanho físico. Se a imagem for 
maior ou menor do que o valor 
especificado. 
BORDER=”número” Especifica em pixels a largura da 
borda da imagem. O valor zero 
remove a imagem 
 
VSPACE=”número” Determina em pixels o espaço que 
deve ser deixado em branco na parte 
de cima e na parte de baixo da 
imagem. 
HSPACE=”número” Determina em pixels o espaço que 
deve ser deixado em branco nas 
laterais da imagem 
 
Com exceção do parâmetro SRC, todos os demais são opcionais. Portanto, 
para exibir uma imagem chamada foto.gif que esteja no mesmo diretório 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 criação de documentos com o conceito de 
hipertexto, ou seja , um documento que se liga a outros por meio de vínculos 
especiais chamados hyperlinks. Com esse conceito você pode criar 
documentos que façam referência a um endereço qualquer do computador ou 
da Web e permitam ao usuário acessar essas referências, não importando se 
elas estão em outra página WEB, no seu micro ou em qualquer servidor da 
rede. 
20 
URL 
A Internet usa uma nomenclatura específica para indicar o endereço de um 
documento. Chamada de Uniform Resource Locator (Localizador Universal de 
Recursos) ou URL, essa nomenclatura inclui três componentes. Ela deve 
conter o protocolo do documento, (como por exemplo http. Gopher ou WAIS), o 
endereço servidor e a localização 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 página 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 básica deste comando: 
<A HREF=”...”NAME”...”>caracteres</A> 
Principais parâmetros: 
 
HREF=”URL” Especifica o endereço do URL ao 
qual o link está associado. Pode 
ser usado dentro e fora do 
documento. 
NAME=”String” Especifica o nome da seção de um 
documento à qual um link de 
hipertexto faz referência. 
 
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. 
21 
Vinculando Arquivos de outros diretórios 
Você pode especificar o endereço de outros diretórios usando um esquema de 
caminhos parecido com DOS. Existe uma diferença entre esses caminhos. Na 
Web você deve inverter a barra de espaços, usando a barra / no lugar da barra 
\, para separar diretórios. 
CRIANDO LINKS PARA SEÇÕES DE UMA PÁGINA 
 
Para dominar o uso do hipertexto, o programador em HTML deve conhecer 
bem o funcionamento do comando <A> e dois de seus parâmetros da 
linguagem. Um é o <H HREF>, usado para criar o link em si, e o outro é o <A 
NAME>, que cria âncoras ou endereços de seções de um documento, 
permitindo seu endereçamento. 
Criando uma Âncora 
Para interligar uma página, você precisa criar uma âncora (também chamado 
de indicador em alguns editores de HTML) no inicio de cada seção 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 página Web com exemplos de links e âncoras : 
Neste código criamos primeiramente os links com as âncoras da página, e 
depois as âncoras, aproveitamos também e trabalhamos com inserção de 
imagens na página: 
Enviando E-Mail diretamente da Página HTML 
 
Você pode acionar o programa padrão de e-mail diretamente de uma página 
HTML usando uma variação do comando <A>, que usa a opção MAILTO no 
lugar da URL. 
<A HREF=”MAILTO:faleconosco@provedor.com.br”>Tire as suas dúvidas </A> 
Definindo Destinos 
Podemos também definir destinos para os nossos links,(recurso muito utilizado 
22 
em frames) através do parâmetro target: . E podem ser _self: Mesmo quadro, 
_top: página inteira, _blank: nova janela e _parent: quadro pai. 
TABELAS 
 
Assim com as listas que nós já vimos, no HTML existem elementos específicos 
para a criação e formatação de tabelas. O recurso de tabelas é muito 
interessante e muito usado nas páginas Web. 
O conceito é o mesmo conhecido usualmente: ela tem linhas e colunas, e na 
interseção delas estão as células. 
Na linguagem HTML, você pode inserir nas células tudo o que normalmente faz 
parte do corpo de um documento, como textos, links, imagens, listas e até 
outras tabelas. 
Elementos básicos de tabelas 
 
<TABLE>...</TABLE> 
São as marcas que englobam a definição de uma tabela. Todas as demais 
marcas referentes a tabelas – linhas e células – somente serão consideradas 
se incluídas entre <TABLE>e </TABLE>. 
<CAPTION>...</CAPTION> 
Trata-se de um elemento opcional que define o título da tabela, e deve constar 
entre as marcas que definem a tabela, mas separado das marcas que definem 
linhas e colunas. Sem parâmetros, o título á apresentado acima da tabela e 
centralizado. 
<TR>...</TR> 
Table Row ou Linha de tabela 
Este é o elemento utilizado na definição de linhas de tabelas. Tabelas são 
definidas em linhas, sendo as linhas compostas de células. O número de linhas 
de uma tabela corresponde ao número de <TR></TR>. 
<TD>...</TD> 
Table Data ou Dados de Tabela 
Marcas que delimitam as células que compõem as linhas, e assim sendo 
devem estar inseridas entre as marcas de linhas. Uma célula pode conter tudo 
23 
o que normalmente consta do corpo de um documento HTML – Links, 
referências a imagens, textos, e até tabelas. 
O alinhamento padrão de uma célula é à esquerda horizontalmente e 
centralizado verticalmente, e caso o número de células varie de uma linha para 
outra, as linhas com menos células são completadas à direita com células em 
branco. 
<TH>...</TH> 
Table Header ou Cabeçalho de Tabela 
Elemento que define células de cabeçalho. Células de cabeçalho têm 
características idênticas a células de dados definidas por <TD>, a não ser pelo 
alinhamento horizontal, que é centralizado, e pela utilização de fonte em 
Negrito. 
Parâmetros 
Estes elementos básicos, entretanto, possuem alguns parâmetros que 
permitem um maior controle sobre alguns detalhes da apresentação da tabela. 
 
Parâmetros do elemento <TABLE> 
BORDER 
A apresentação padrão de uma tabela é sem bordas. A presença do parâmetro 
BORDER indica justamente que deve ser desenhada uma borda em torno de 
cada célula 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 
variações: 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 não seja especificado, o próprio 
browser se encarrega de determinar a largura mais adequada, baseado nos 
textos inseridos nas células. Exemplo: <TABLE WIDTH=75%> 
CELLSPACING 
24 
Define o espaço entra as células, ou seja, a largura das linhas de grade (as 
bordas que envolvem as células). É especificado em pixels. Exemplo: <TABLE 
CELLSPACING=3> 
CELLPADDING 
Determina, em pixels, o espaço entre o conteúdo e as bordas da célula. 
Exemplo: <TABLE CELLPADING=6> 
ALIGN 
Configura o alinhamento horizontal da tabela em relação aos outros elementos 
da página. Pode conter os valores LEFT (esquerda), CENTER (centro) ou 
RIGHT( direita). Este parâmetro não funciona em alguns browsers. 
BGCOLOR 
Define a cor de fundo da tabela. 
Parâmetros do elemento <TR> 
 
ALIGN 
Configura o alinhamento horizontal dos elementos contidos nas célulasde uma 
linha. Pode conter os valores LEFT, CENTER OU RIGHT. Se omitido, o 
alinhamento é à esquerda para as células de dados (<TD>), e centralizado 
para células de cabeçalho (<TH>). 
VALIGN 
Define o alinhamento vertical dos elementos contidos nas células 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. 
Parâmetros dos Elementos <TD> e <TH> 
ALIGN 
Configura o alinhamento horizontal dos elementos contidos na célula. Pode 
conter os valores LEFT, CENTER OU RIGHT. 
Se omitido, o alinhamento é à esquerda para as células de dados (<TD>), e 
centralizado para células de cabeçalho (<TH>). 
25 
VALIGN 
Define o alinhamento vertical dos elementos contidos na célula. 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 parâmetro encontra-se associado a uma célula, o browser 
entende que o texto dentro daquela célula não pode ser dividido em mais de 
uma linha. Este parâmetro deve ser utilizado com cuidado, para evitar colunas 
demasiadamente largas. 
COLSPAN 
Especifica o número de colunas de uma tabela a ser ocupado por uma célula. 
Deve ser utilizado para expandir uma célula horizontalmente. Se atribuirmos 
COLSPAN=2 a uma célula, ela ocupará o seu espaço e o espaço de mais uma 
célula para a direita, assim esta linha deverá possuir uma célula a menos que 
as demais, já que uma de suas células “vale”por duas. 
ROWSPAN 
Define o número de linhas a ser ocupado por uma célula. Deve ser utilizado 
para expandir uma célula verticalmente (para baixo). Ao atribuir ROWSPAN=2 
para uma célula, diminuirá em 1 o número de células 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"> 
26 
 <p align="center">Título 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> 
 
Atenção: Além de criar tabelas para exibir dados como numa planilha, os 
elementos de tabelas são usados para formatar páginas de uma forma geral. 
Eles são usados para criar textos com elementos na tela de forma mais fácil, 
para delimitar áreas de uma página e diversas outras utilidades que você nem 
imagina. 
Por exemplo, podemos usar tabelas para garantir que o texto fique na posição 
A da tela e a imagem fique na posição B, independente da resolução de vídeo 
do visitante de sua página. Utilizando uma tabela de tamanho definido, 
podemos evitar que a página fique grande demais para resoluções de 640x480, 
podemos simular colunas de texto, entre outras aplicações. 
 
META 
 
O comando META é um dos comandos pouco explorados da linguagem HTML. 
Contudo, é responsável por importantes aspectos de uma página HTML. 
Através dele, podemos criar documentos dinâmicos, informações especificas 
que serão usadas pelo servidor, em resposta a uma solicitação do usuário, ou 
pelos mecanismos de busca na Internet. 
Informações específicas 
Esse comando das linguagem HTML pode ser usado para criar 
metainformação ou variáveis, e seus conteúdos descrevem características do 
27 
documento HTML, como o nome do autor, data de vencimento ou criação do 
documento, palavras-chave, etc. 
<META HTTP-EQUIV=resposta CONTENT=descrição NAME=descrição 
URL=url> 
O comando META deve ser especificado entre os comandos <HEAD> 
</HEAD>. 
Variações do comando meta 
 
Usar o recurso do autocarregamento é indicado quando você deseja exibir 
alguma informação inicial e depois outra informação. Por exemplo o usuário 
acessa uma página que exibe informações sobre a empresa, depois de um 
tempo carrega outra página. Isso é possível 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 página qual é a sua descrição e quais são as palavras 
chaves do site. 
<meta name="description" content="Site sobre Informática"> 
<meta name="keywords" content="Photoshop, Flash, Fireworks, Dreamweaver, 
HTML"> 
Podemos também especificar o autor e programa gerador do código HTML 
através do comando META 
<meta name="author" content="Marcos Paulo Furlan"> 
<meta name="generator" content="HTML-Kit"> 
 
Multimídia 
 
O principal elemento de sucesso da Internet é o hiperlink. Que permite a 
criação de documentos com ligações para outros contidos em qualquer 
computador ligado à Internet. A maioria dos usuários que acessa a Internet faz 
isso a partir de ambientes gráficos, como o Windows, e conhecendo o Windows 
todos sabemos de sua capacidade em trabalhar com multimídia. Esse é o 
28 
propósito deste capítulo, vamos aprender a trabalhar com os elementos 
multimídia em nossas páginas. 
Os principais elementos multimídia para uma aplicação são: 
Fotos ou imagens estáticas 
Animação 
Áudio 
Vídeo 
Consideração no uso de multimídia 
 
O grande inimigo da utilização de multimídia é o mesmo relacionado com as 
imagens, a velocidade de transferência de informações via Internet. Se uma 
imagem de 70Kb pode levar vários segundos, ou até mesmo minutos para ser 
carregada imagine a execução de um clipe de vídeo com mais de 1MB. 
Os vídeos vão se popularizar mais quando a Internet a cabo se tornar mais 
acessível. 
FOLHAS DE ESTILO 
 
A CSS traz para a WEB a mesma conveniência de “um só lugar” para definir os 
estilos que estão disponíveis na maioria dos editores de texto. Você pode 
definir uma CSS em uma localização central para afetar a aparência das tags 
HTML em uma única página da WEB ou em todo um site da WEB. 
Embora a metodologia da CSS funcione com a HTML, não é HTML. Em vez 
disso, a CSS é um código separado que amplia as capacidades da HTML, 
permitindo que você redefina o modo como as tags HTML funcionam. 
Versões da CSS 
A CSS evoluiu nos últimos anos sob a orientação do W3C ( 
www.w3.org/Style/CSS/ ) até a sua versão atual a 2(dois). Embora a maioria 
dos browsers modernos suporte a versão mais recente, os browsers mais 
antigos suportam as combinações das versões antigas da CSS. Elas são: 
CSS - 1 
O W3C lançou a primeira versão oficial da CSS em 1996. Essa primeira versão 
29 
incluía a capacidade de núcleo 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 lançada e a CSS-2 ainda estava 
distante, de modo que a W3C lançou uma solução intermediária: A CSS- 
Positioning. Esse padrão de destinava a ser uma proposta que seria discutida 
pelas várias partes envolvidas antes de ele ser oficializado. A Firefox, Opera, 
Chrome e a Microsoft assumiram essas propostas, porém, e incluíram as idéias 
preliminares nas versões 4 de seus navegadores. Embora a maioria dos 
recursos básicos sejam suportados em ambos os browsers como o nome de 
“marca” diversos recursos forma deixados de fora. 
CSS – 2 
A versão mais recente da CSS surgiu em 1998. O nível 2 inclui todos os 
atributos das duas versões anteriores mais uma ênfase maior na facilidade de 
acesso e na capacidade de especificar CSSs especificas de mídia. A partir do 
IE e Firefox, Opera, Chrome 6 suportam CSS 2. 
CSS – 3 
Este padrão ainda está em desenvolvimento, e mesmo após o lançamento 
geralmente leva alguns anos para que os navegadores suportem o padrão. 
Sem dúvida, a nova adição será o Scalable Vector Graphics (SVG). Esse é um 
formato que permite incluir formas (linhas, círculos, curvas e outras), como 
vetores e não bitmaps, levando o poder dos gráficos baseados no vetor e na 
tipografia à WEB. 
Regras da CSS 
O melhor da folha deestilo em cascata é que ela é incrivelmente fácil de 
configurar. Não exige plug-ins ou softwares diferente – apenas regras. 
Podemos definir regras que dizem a uma tag HTML especifica o seu conteúdo, 
ou pode criar regras genéricas e, em seguida, aplicá-las às TAGS como quiser. 
Existem três etapas na regras da CSS. 
Seletor HTML: A parte de texto de uma TAG HTML se chama seletor. Exemplo: 
30 
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 versátil. 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, porém, geralmente são 
aplicados somente uma vez na página a determinada TAG HTML para criar um 
objeto para ser usado com uma função JavaScript. Exemplo: 
#objeto{font bold 12pt times;} 
Incluindo CSS no Documento 
Embora a CSS signifique nunca ter que definir a aparência 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 estão definidos para a página. 
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> 
31 
Incluindo a CSS em uma página WEB 
A principal utilização da CSS é para definir as regras de todo um documento. 
Para fazer isso, você deve inclui as regras de estilo no título do documento 
aninhado dentro de um contêiner de estilo. 
Embora os resultados do acréscimo de estilo dessa forma possam parecer 
idênticos ao acréscimo dos estilos diretamente em uma TAG HTML, a 
colocação dos estilos em uma localização 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"> 
<!-- 
body{background-color:black;} 
h1{color:red;} 
h2{color:yellow;} 
p{color:white;} 
--> 
</style> 
 
</head> 
<body> 
<br> 
<h1>A Bruxa de Blair</h1> 
<h2>O Filme</h2> 
<BR> 
<P> 
o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme 
</P> 
</body> 
</html> 
32 
 
Incluindo a CSS em um site da WEB 
Um dos benefícios da CSS é a possibilidade de criar uma folha de estilo para 
ser usada não apenas em um único documento HTML, mas através 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 contém as formatações deve possuir a extensão 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> 
33 
<link rel="stylesheet" href="configura.css"> 
</head> 
<body> 
<br> 
<h1>A Bruxa de Blair</h1> 
<h2>O Filme</h2> 
<BR> 
<P> 
o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme 
</P> 
</body> 
</html> 
 
Principais atributos de uma folha de estilo 
Atributos de Posição 
Elemento Definição Exemplo de Atributo 
Position Tipo de Posicionamento Absolute ou relative 
Top Distância Vertical para o canto 
superior esquerdo do quadro 
10in, 150px, 30 cm 
Left Distância Horizontal para o 
canto superior esquerdo do 
quadro 
10in, 150px, 30 cm 
Width Largura do Quadro 10in, 150px, 30 cm 
Height Altura do Quadro 10in, 150px, 30 cm 
Z-index Camada usada quando 
sobrepondo quadros 
1,2,3,4 
Padding Margem entre as bordas do 
quadro e o texto interno ao 
quadro 
2,5,10,17 
Margin Margem entre as bordas do 
quadro e o texto externo ao 
1,2,3,4 
34 
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 
Elemento Definição Exemplo de Atributo 
Font-family Fonte que será usada para 
mostrar o texto 
Helvetica, Arial, 
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 Página 
Elemento Definição Exemplo de Atributo 
Color Cor do texto Marrom,#ffffcc 
Backgroun-
color 
Cor de fundo Marrom,#ffffcc 
Background-
image 
Imagem de fundo Imagem.gif 
 
Atributos de Texto 
Elemento Definição Exemplo de Atributo 
Word-spacing Espaçamento entre as palavras 1em, 5pt 
Letter-
spacing 
Espeçamento entre as letras 0,1em, 0,1cm, 2 pt 
Text-
decoration 
Decoração de texto None, underline, blink 
Vertical-align Alinhamento vertical Middle, top, sub, super 
35 
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 definição com uma chave ({) 
O nome da classe pode ser o que você quiser, desde que use letras e 
números. Por exemplo podemos criar uma classe chamada .copy{. 
Ela é uma classe independente e você pode usá-la com qualquer TAG HTML, 
com uma condição: 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 são 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 começam com (#) e, sem seguida, o nome do ID. O 
nome pode ser uma palavra ou qualquer conjunto de letras ou números que 
você quiser. Digite as suas definições para essa classe separando-as com um 
ponto e vírgula. 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 não 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>. 
36 
Definindo TAGS dentro do contexto 
Quando uma TAG é cercada por outra TAG, uma dentro da outra, são 
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 espaço. 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 type="text/css"> 
<!-- 
p a:link{color:red; 
 text-decoration:underline;} 
div.menu{color:#900; 
 font-weight:bold; 
 text-decoration:none; 
 font-size:20;} 
p{font:12px;} 
--> 
</style> 
</head> 
<body> 
<div class="menu"> 
<a href="anterior.htm">&lt; Capitulo Anterior</a> 
<a href="proximo.htm">Próximo Capítulo &gt;</a> 
</div> 
<hr> 
<h3>Novo Capítulo</h3> 
<p>Teste de parágrafo 
<a href="curioso.htm">Efeito curiosos</a></p> 
37 
</body> 
</html> 
 
Definindo a CSS para impressão 
Quando a maioria das pessoas pensam em páginas WEB, pensa nessas 
páginas exibidas na tela. Entretanto, maiscedo ou mais tarde, a maioria das 
pessoas quer imprimir pelo menos algumas páginas 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 página 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 impressão. Veja os códigos 
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 Impressão: 
body{ 
color:black; 
font-family:Arial; 
h1,h2{ 
font-weight:bold;} 
.cassea{ 
color:#999999;} 
Código no HTML: 
38 
<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> Mídia de tela </h1> 
<br> 
<span class="classea">O que pode ser visto na tela será diferente na 
impressão</span> 
<hr> 
<h2>Teste</h2> 
</body> 
</html> 
Definindo Quebras de página para a impressão 
Um problema que você encontrará ao tentar imprimir um site da WEB são as 
quebras de página. Na verdade, uma página da WEB pode conter diversas 
páginas impressas. Assim sendo, o cabeçalho de uma seção pode aparecer 
na parte inferior de uma página e seu texto na parte superior da próxima 
página. 
Podemos forçar uma quebra de página ao imprimir uma página da WEB, para 
isso utilize: < TAG style=”page-break-before:always;”>....</TAG> 
Onde always� Força a quebra de página antes do elemento. Auto� permite 
que o browser coloque as quebras de página. 
Controles de Texto 
O Kerning se refere à quantidade de espaço que há entre as letras de uma 
palavra. Geralmente, quando há mais espaço entre as letras a facilidade de 
leitura é maior. Por outro lado, espaço de menos pode impedir a leitura, 
fazendo com que as palavras individuais apareçam menos distintas na página. 
Para definir o Kerning: 
39 
Letter-spacing: 2em. 
Um valor positivo para o espaçamento de letras inclui mais espaço na 
quantidade padrão; um valor negativo fecha o espaço. 
Podemos também ajustar o espaçamento entre as palavras. A inclusão de um 
pequeno espaço entre as palavras na tela pode ajudar a tornar o seu texto 
mais fácil de ler, mas espaço demais interrompe o caminho do olho do leitor na 
tela. 
Para definir estes espaçamento: 
Word-spacing: 8px; 
Ajustando as Entrelinhas 
O espaço entre as linhas também podem ser aumentados para dar um efeito 
dramático, criando áreas de espaço em negativo no texto. Mas também podem 
ser usados para facilitar a leitura e inclusão de comentários em seu texto. Para 
definir o espaçamento 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 página ou a imagem e cor de segundo plano 
imediatamente atrás de cada elemento individual da página. 
Para definir o segundo plano iniciamos a digitação 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 espaço. 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 
localização do arquivo. Alternativamente pode-se usar none em vez de url, ele 
instrui a browser a não utilizar uma imagem de segundo plano. 
Repeat� Defina qual será o modo de repetição a ser utilizado eles podem ser: 
Repeat-x: Instrui o browser para repetir o gráfico de segundo plano na 
horizontal. 
40 
Repeat-y: Instrui o browser para repetir o gráfico de segundo plano na vertical. 
No-repeat: faz com que o gráfico de segundo plano apareça apenas uma vez. 
Fixed: Instrui para que a figura fique fixa ou seja não role com o site. 
Scroll: Instrui para que a imagem role junto com a tela. 
Right top: Digite dois valores separados por um espaço para especificar o lugar 
onde o segundo plano deve aparecer em relação 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. Também é possível definir a borda do elemento em cada lado 
da caixa individualmente. 
As principais propriedades para bordas são: 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 gráfico foi incluída, os designers de toda parte estavam 
maravilhados. A CSS levou este passo um pouco adiante, permitindo que o 
texto não apenas flutue ao redor do texto, mas também que flutue ao redor dos 
outros blocos de texto e do texto ao redor das tabelas, para isso usamos a 
41 
propriedade float. 
Inicie sua definição 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 conteúdo dentro de um contêiner 
daquela TAG como sendo um elemento exclusivo da janela. Em seguida é 
possível manipular esse elemento exclusivo por meio do posicionamento da 
CSS. 
Um elemento pode ter um de quatro valores de posicionamento – estático, 
relativo, absoluto ou fixo – embora apenas os três primeiros normalmente 
estejam disponíveis na maioria dos browsers. O tipo de posicionamento diz ao 
browser como ele deve tratar o elemento ao posicioná-lo na janela. 
Posicionamento Estático 
Como padrão, os elementos são posicionados como estáticos dentro da janela, 
a menos que você os defina com os outros posicionamentos. Entretanto o 
posicionamento estático é diferente, porque um elemento estático não 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 padrão de qualquer outro elemento da HTML – ou seja, ele 
aparece após tudo que está antes dele na HTML e antes de tudo que está após 
ele na HTML. 
Você pode mover um elemento posicionado relativamente a partir de sua 
posição natural na janela usando as propriedades top e left. Essa técnica é útil 
para controlar o modo como os elementos aparecem com relação aos outros 
elementos da janela. 
42 
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 conteúdo HTML que quiser. Os elementos que são definidos dessa forma 
são colocados em um ponto exato da janela por meio das coordenadas x e y. O 
canto superior esquerdo da janela ou de seu elemento contêiner é a origem. 
Posicionamento 3D 
Apesar da área da tela ser bidimensional, os elementos que são posicionados 
podem receber uma terceira dimensão: uma ordem de empilhamento na qual 
um elemento se relaciona ao outro. 
Os elementos posicionados recebem números automáticos de empilhamento, a 
partir do 0 (zero)incrementalmente com 1,2,3 e assim por diante. Esse sistema 
é chamado de índice Z. O número de índice Z de um elemento é um valor que 
mostra sua relação 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, 
responsávelpela formatação de um documento, como organizar a página, 
como posicionar e expor o texto e, dependendo de onde é aplicado, como 
organizar uma coleção de documentos. 
Na Web, os "parágrafos" são 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 extensão .css. 
Para vinculá-lo a uma página HTML, esta deve ter dentro do seu bloco 
<HEAD> ... </HEAD> o seguinte descritor: 
<LINK REL="stylesheet" HREF="url_do_arquivo.css"> 
Regras, declarações e seletores 
A estrutura dos estilos é bastante simples. Consiste de uma lista de regras. 
43 
Cada regra possui um bloco, entre chaves ({ e }), de uma ou mais declarações 
aplicáveis 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 { declarações } 
“As regras podem estar dentro de um arquivo de texto com extensão “.css" ou 
embutidas em um arquivo HTML (as várias maneiras de aplicar estilos a um 
arquivo HTML serão vistas na seção seguinte). 
Um exemplo de folha de estilos com apenas uma regra foi mostrada na seção 
anterior: 
H1 {font-size: 48pt} 
Nesta regra, H1 é o seletor e {font-size: 48pt} é o bloco da declaração, que 
estabelece um tamanho de fonte (prop. font-size) para todos os objetos 
(parágrafos) marcados com <H1>. 
As declarações são feitas usando a sintaxe: 
propriedade: valor 
Observe que se usa dois-pontos (:) e não igual (=) para aplicar um valor a uma 
propriedade. Pode haver mais de uma declaração de estilo para um seletor. 
Isto pode ser feito em outro bloco. Cada linha acrescenta ou sobrepõe 
declarações 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 }. 
Múltiplas declarações e seletores 
Várias declarações de estilo podem ser aplicadas de uma vez a um seletor. As 
declarações, então, precisam ser separadas por ponto-e-vírgula (;) : 
H1 {font-size: 18pt; color: blue; font-family: Caslon, serif} 
44 
BODY {background: navy; color: white} 
Os espaços em branco (espaços, novas-linhas e tabulações) são 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 legíveis 
da forma: 
 BODY {background : navy; 
 color : white } 
 H1 {color: blue; 
 font-size: 18pt; 
 font-family: Caslon, serif } 
Uma declaração só termina com uma fecha-chaves (}) ou com um ponto-e-
vírgula (;). 
Dependendo da propriedade, esta pode ter vários valores separados por 
vírgulas ou valores compostos com as palavras separadas por espaços: 
 P { font: 12pt "Times New Roman" bold } 
 H2 { font-family: Arial, Helvetica, Sans-serif } 
As aspas devem ser usadas quando uma palavra que tem espaços precisar ser 
usada. No exemplo acima, o nome "Times New Roman" deveria ser tratado 
como o nome de uma fonte distinta, e não como três valores, o que ocorreria 
se as aspas não estivessem presentes. 
Assim como um seletor pode ter várias propriedades definidas para ele, um 
mesmo conjunto de propriedades pode ser aplicado a um grupo de seletores, 
separando-os com vírgulas: 
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 freqüentemente ignorados, como </P>, </LI>, etc. A falta do 
</P> pode causar o "vazamento" das declarações de estilo para fora do 
parágrafo em alguns browsers. 
Comentários e instruções 
Além das regras, um arquivo CSS pode ter ainda comentários e instruções 
45 
(precedidas de @). No CSS1 apenas uma instrução é definida: @import. Ela é 
usada para que uma folha de estilos possa importar estilos de outro arquivo 
CSS através de uma URL. Os estilos importados sempre têm menos 
precedência que os locais (ou seja, os locais podem sobrepor os importados). 
A sintaxe da instrução @import é: 
@import url(url_da_folha_de_estilos) 
Não deve haver outras estruturas (a não ser comentários) na linha onde há 
uma instrução. Exemplos do uso de @import: 
@import url(../estilo.css) 
@import url(http://www.apostilando.com/estilo.css) 
Pode-se inserir trechos que serão ignorados pelo browser ao interpretar folhas 
de estilo usando blocos de comentário. Comentários em folhas de estilos são 
iguais a comentários em linguagens como Actionscipt: entre /* e */: 
Valores 
Os valores que são aplicados às propriedades têm uma sintaxe que depende 
da propriedade que os usa. Propriedades que envolvem tamanho (tamanho de 
fontes, espaçamento, etc.) geralmente recebem valores que consistem de um 
número e uma unidade ou porcentagem. O sinal de porcentagem ou unidade 
deve estar junto ao número correspondente sem espaços. Ou seja, deve-se 
escrever font-size: 24pt e não font-size: 24 pt. 
Cores e arquivos externos podem requerer uma função para serem definidos. 
São duas as funções (ou procedimentos) do CSS1: rgb(), que constrói uma cor, 
e url(), que retorna um vínculo para uma imagem ou arquivo CSS (usada em 
instruções @import). 
Há quatro maneiras diferentes de especificar cores em CSS: usando o nome 
do sistema (red, yellow, blue, black, lightGray), usando seu código RGB 
hexadecimal (ff0000, ffff00, 0000ff, 34adfc, 80a7a7) ou usando a função rgb(). 
A função rgb() requer três argumentos que representam a intensidade dos 
componentes vermelho (R), verde (G) e azul (B) de uma cor em forma de luz 
(não opaca). A intensidade pode ser expressa em valores inteiros de 0 
(mínimo) a 255 (máximo) ou em valores fracionários de 0% a 100%. As 
instruções abaixo definem a mesma cor para um parágrafo: 
46 
P {color: red} 
P {color: ff0000} 
P {color: rgb(100%, 0%, 0%)} 
P {color: rgb(255, 0, 0)} 
Não deve haver espaço entre o "b" de rgb e o abre-parênteses. 
A função 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)} 
Herança 
Os estilos "herdam" propriedades de várias maneiras. Uma das formas é 
através da própria hierarquia do HTML. Se você declara propriedades para 
BODY, todos os descritores serão afetados a não ser que tenham as suas 
propriedades redefinidas dentro de um novo bloco 
de declarações CSS. Se um <I> está dentro de um <P> e todos os <P> são 
declarados como tendo a cor vermelha, o <I> também será vermelho a menos 
que haja um bloco, posterior àquela declaração, 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 
página será afetada. No exemplo a seguir, uma cor de texto definida para 
BODY será usada para colorir todo o texto do documento, a não ser que sejam 
sobrepostos por uma regra subseqüente: 
BODY {color: navy } 
H1, H2 {color: yellow } 
Os blocos acima farão com que todo o texto seja azul marinho, exceto aquele 
47 
marcado com H1 ou H2, que será amarelo. 
 
 Os browsers comerciais têm problemas principalmente com a aplicação 
de estilos em BODY, portanto,freqüentemente é preciso mexer nas 
declarações de estilo, acrescentando propriedades redundantes para adaptá-
los à realidade. No site do W3C (http://www.w3.org) há links para documentos 
que analisam essas diferenças entre browsers. O site 
http://www.w3.org/Styçe/CSS/Test/ é uma plataforma de testes que pode ser 
usada para verificar se um browser suporta ou não determinada propriedade. 
 
Como incluir estilos em uma página 
Há três formas de aplicar uma folha de estilos a uma página Web. Estas formas 
irão determinar a abrangência dos estilos: se afetarão um trecho limitado de 
uma página, se a toda a página, ou se irão afetar todo um site. 
A primeira forma, mais abrangente, é a vinculação a um arquivo CSS. Isto é 
feito ligando a página HTML a um arquivo de folha de estilo, usando do 
descritor <LINK>. Este método permite que múltiplas páginas ou um site inteiro 
usem a mesma folha de estilos. 
Para fazer um vínculo 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 
extensão ".css" e chamá-lo a partir de todos os documentos HTML onde o 
estilo será aplicado. Não é preciso compilar ou qualquer coisa do tipo. Depois 
que as definições estiverem prontas, o estilo estará pronto para ser usado. 
Pode ser importado através 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 página, embutindo uma folha de estilos diretamente na página HTML 
dentro de um bloco formado pelos descritores <STYLE> e </STYLE>. Este 
método permite que você altere as propriedades de estilo de uma única 
48 
página. 
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: 
<style type="text/css"> 
 P { font: 12pt "Times New Roman" bold; 
 color: red } 
 I { color: black } 
</style> 
 
 
 
 
As propriedades declaradas no bloco <STYLE> sobrepõem qualquer 
propriedades anteriores do elemento (inclusive as de uma folha de estilos 
importada, se houver). É comum colocar todo o código entre comentários 
HTML (<!--e -->) para proteger browsers antigos da exibição indesejada do 
código: 
<style type="text/css"> 
<!-- 
 P { font: 12pt "Times New Roman" bold; 
 color: red } 
 I { color: black } 
--> 
</style> 
49 
 
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 método não corresponde exatamente a uma "folha" de estilos, 
pois os estilos aplicados não são reaproveitáveis. 
Permite alterar a aparência de um único descritor, de um conjunto deles ou de 
um bloco de informações da página. Por exemplo: 
<P STYLE="color: green; font-size: 12pt">Teste</P> 
Esta propriedade é mais interessante quando aplicada em um descritor que é 
usado para agrupar vários outros, como <DIV>, que divide a página em seções 
ou <SPAN>, usado em situações bem específicas. Usar estilos desta forma é 
pouco diferente de usar atributos locais. 
Os benefícios de poder mudar a fonte, cores e outras características em todo o 
documento ficam mais difíceis. 
Pode-se usar um, dois ou os três métodos ao mesmo tempo. As características 
definidas pelos mais específicos sobrepõem as definidas pelos mais genéricos. 
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 página a seguir que possui um bloco 
<STYLE> com uma nova definição de P e H1. 
<HEAD> 
<link rel=STYLESHEET href="estilos.css" type="text/css"> 
<style type="text/css"><!-- 
 P {font: 12pt "Times New Roman" bold; 
 color: red } 
 H1 {color: black } 
 --></style> 
 </HEAD> 
Mais adiante, existe um parágrafo e um título da forma: 
50 
<h1 style="color: navy">Apostilando</h1> 
<p style="color: black">Webkit – Aplicações Dinâmicas</p> 
Qual estilo irá predominar? Pela regra de que o mais específico sobrepõe o 
mais geral, teremos uma página onde os <h1> têm tamanho 24pt (do estilo 
importado), cor preta (valor sobreposto pelo estilo da página) e os <p> são 
vermelhos (sobreposto pelo estilo da página). 
Nas duas linhas acima (e nelas apenas), o <h1> será azul marinho 
(sobrepondo o estilo da página) e o <p> será preto. 
Classes e IDs 
Às vezes um parágrafo tem uma aparência diferente dos outros parágrafos em 
certa parte do texto. Para mudar o estilo dele, pode-se incluir as declarações 
em um atributo STYLE. 
Mas, se tal procedimento torna difícil a localização e a gerência dos estilos, 
pode-se usar um recurso para marcá-lo de forma que seja considerado 
diferente. Isto pode ser feito atribuindo-lhe uma identificação única. Em HTML, 
pode-se usar o atributo ID: 
<P ID=w779>Texto</P> 
Para alterar as características deste parágrafo agora, pode-se usar o seu ID 
como seletor, da forma: 
#w779 {color: cyan } 
Se isto estiver em um arquivo CSS, todas as páginas que o usam e que 
tiverem um elemento com o ID #w779 serão afetadas. Se houver mais de um 
com o mesmo ID apenas o primeiro será afetado. 
Melhor que usar ID é agrupar características semelhantes em classes. Uma 
classe é uma variação de um determinado objeto. Por exemplo, um texto 
teatral pode ter três parágrafos com apresentação diferente, representando as 
falas de três personagens. Se quiséssemos que cada um tivesse uma cor 
diferente, poderíamos declarar cada um como sendo de uma classe distinta: 
<p class=flex>Aplicações Ricas</p> 
<p class=PHP>Aplicações Dinâmicas</p> 
<p class=Joomla>CMS</p> 
<p class=flex>RIAS </p> 
51 
Uma classe também pode conter descritores diferentes. Se todos os textos 
citados por certo autor tivessem que estar em outra cor ou fonte, poderíamos 
criar uma classe sem citar o descritor: 
.verde { color: green } 
Todos os descritores que tiverem o atributo CLASS=verde serão 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>, é possível 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 características dos links não-visitados, ativos e visitados. Assim como 
qualquer seletor, os links podem ser combinados com outros descritores: 
P, A:link, H2 {color: red} 
Fontes 
Fontes são estilos de apresentação consistentes aplicados a alfabetos. Uma 
fonte consiste de atributos que alteram a aparência de um símbolo, sem alterar 
o seu significado. Oferecem as informações necessárias para que uma letra ou 
símbolo possa ser representado graficamente. 
Os atributos essenciais de uma fonte são: 
Seu tipo (ou família) 
• Seu tamanho 
• Seu estilo (regular, itálico, 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 maiúsculas e 
minúsculas não são consideradas fontes diferentes, pois têm um significado 
distinto. 
52 
Os quatro atributos acima podem ser definidos em CSS através das 
propriedades font-family, font-size, font-style e font-weight. Não é preciso definir 
todas pois sempre têm valores default. CSS oferece ainda font-variant, que 
permite considerar outras variações de uma fonte. 
font-family 
Uma família de fontes (tipo) é selecionada com a propriedade font-family. Esta 
propriedade aceita uma lista de valores separados por vírgulas representando 
nomes de fontes existentes ou não no sistema do usuário. No final da lista, 
pode ser incluída uma referência a uma família genérica,