Css - Imprimir - 2 Por Folha

INFORMÁTICA
2020
CSS
06/06/202
0
CSS
Cascading Style Sheets
© Datamec S.A.
Sumário
Capítulo 1: ................................................................................................................. 3
Aplicando Style Sheets ............................................................................................ 3
Objetivo .............................................................................................................................4
Entendendo Style Sheets .................................................................................................5
Anexando Style Sheets em documentos HTML..............................................................6

Através de links ................................................................................................................................ 6
Incluindo CSS no documento........................................................................................................... 7
Definindo estilos junto com o elemento............................................................................................ 8
Importando Style Sheets .................................................................................................................. 8
Importância do estilo ........................................................................................................................ 9
Criando Style Sheets para cada tipo de Mídia ............................................................................... 10
Adicionando regras para uma Style Sheet....................................................................12

Atribuindo múltiplas propriedades em uma regra simples ............................................................. 13
Agrupando seletores juntos em uma regra simples....................................................................... 13
Definindo relacionamentos Pai-Filho nas regras ........................................................................... 14
Entendendo Herança...................................................................................................................... 14
Trabalhando com Classes em Style Sheets .................................................................................. 15
Definindo um estilo para um elemento específico ......................................................................... 16
Usando pseudo-classes ................................................................................................................. 17
Adicionando comentários em Style Sheets.................................................................................... 18
Ocultando Style Sheets de navegadores antigos .......................................................................... 18
Revisão............................................................................................................................19
Capítulo 2: ............................................................................................................... 20
Posicionando elementos ....................................................................................... 20
Objetivo ...........................................................................................................................21
Entendendo posicionamento de elementos .................................................................22

Posicionando um Elemento HTML................................................................................................. 23
Mudando o tamanho de um elemento ...........................................................................24
Sobrepondo elementos ..................................................................................................25
Aninhando posicionamento de elementos ...................................................................26
Posicionando elementos através de script...................................................................27

Usando scripts para ocultar ou exibir elementos ........................................................................... 27
Revisão............................................................................................................................28
Capítulo 3: ............................................................................................................... 29
Dynamic HTML........................................................................................................ 29
Objetivo ...........................................................................................................................30
Introdução à DHTML.......................................................................................................31
Trabalhando com elementos na página ........................................................................32
Mudando o conteúdo de um elemento..........................................................................33
Conectando scripts à estilos e classes.........................................................................34
Controlando a visibilidade de objetos...........................................................................35
Revisão............................................................................................................................36
Cascading Style Sheets 3
Capítulo 1:
Aplicando Style Sheets
Objetivo
Ao final deste capítulo você será capaz de :

- Adicionar Style Sheets em documentos HTML;
- Criar arquivos com a extensão .CSS;
- Entender como os estilos são herdados;
- Criar estilos de acordo com necessidades diferentes;
- Analisar documentos CSS escritos por outros autores.
Entendendo Style Sheets
CSS, ou Cascading Style Sheets é uma recomendação do W3C, assim como o XML e o HTML.
Style Sheets permite a separação do conteúdo dos documentos de sua apresentação. E associando
scripts aos elementos é possível alterar o formato do documento assim como sua interface com o
usuário.
Documentos WYSIWYG Documentos HTML ou XML
Conteúdo
Conteúdo
Apresentação Apresentação
Tanto o Internet Explorer 4.0 ou superior quanto Netscape 4.7 suportam Cascading Style Sheets
Nível 1 (CSS1). As implementações superiores dos respectivos navegadores suportam CSS2 embora
de maneira diferente.
Anotações
Anexando Style Sheets em documentos HTML
A linguagem HTML permite que qualquer trecho de código seja adicionado à página. Para tanto é
utilizada o elemento <META>. Entretanto, você deve especificar a linguagem a ser utilizada, como no
exemplo abaixo:
<META http-equiv="Content-Style-Type" content="text/css">
Através de links
Você pode criar uma Style Sheet em um arquivo separado para posteriormente aplicar tal estilo em
todas as páginas do site. Utilizando este recurso adequadamente, é possível centralizar quase toda a
apresentação de um site em um ou mais arquivos. Caso haja necessidade de mudança na
apresentação do site, esta é feita em um único lugar.
É aconselhável que o arquivo de estilos possua a extensão .css mas não é obrigatório. Outra
extensão também funciona. É um arquivo somente texto cujo formato é legível e de fácil
compreensão. Isto facilita a criação de Style Sheets utilizando editores simples como o notepad.
Para associar uma Style Sheet armazenada em um arquivo separado use o elemento <LINK> como
no exemplo abaixo:
<LINK REL=STYLESHEET
HREF="http://www.myserver.com/mysheet.css"
TYPE="text/css">
Anotações
Incluindo CSS no documento

Nem sempre é necessário armazenar o estilo em um arquivo separado. Os códigos de estilo podem
ser colocados dentro de cada documento HTML. Obviamente os códigos colocados dentro um
documento HTML afetarão somente aquele documento.
É possível a utilização de estilos internos e estilos externos. Neste caso os estilos internos
sobrepõem estilos externos se houver conflitos. Se não houver, os estilos internos são aplicados e
posteriormente são aplicados os estilos externos.
O elemento utilizada para adicionar o estilo ao documento é o elemento <STYLE>. O atributo TYPE
especifica o tipo MIME. Existem alguns outros atributos que serão abordados posteriormente.
<HTML> <HEAD> </HEAD>

<STYLE TYPE="text/css">
Definições de estilo
</STYLE>
<BODY> </BODY> </HTML>
Anotações
Definindo estilos junto com o elemento

CSS permite que sejam definidos estilos como atributo de um elemento. Esta funcionalidade pode ser
útil porque os estilos definidos com o elemento sobrepõem os estilos do documento e mesmo estilos
anexados.
Por exemplo: suponhamos que você queira alterar a cor de um parágrafo destacando-o diante do
resto do documento mas esta alteração é uma exceção. Então você pode utilizar o atributo STYLE e
atribuir a este o estilo a ser aplicado:
<P STYLE=”color: blue”>

Este é o parágrafo destacado
</P>
Estilos definidos junto com os elementos devem ser utilizados com cuidado para que seja preservada
uma das principais características da CSS: a reutilização de estilos.
Importando Style Sheets

Estilos também podem ser importados de outros arquivos. Para tanto, é utilizada o comando @import
passando como parâmetro caminho e o nome do arquivo. A maioria dos navegadores ainda não
suportam este comando e o elemento <STYLE> é indispensável.
@import url(http://www.myserver.com/style.css);
</STYLE>
Anotações
Importância do estilo
A utilização de estilo na construção de grandes sites é fundamental. A utilização adequada pode
contribuir nos seguintes aspectos:
- Existência de um padrão de cores e navegação para todo o site

- Reutilização de código
- Velocidade no carregamento das páginas
- Administração centralizada
- Personalização de sites.
Apesar das inúmeras vantagens a construção de estilos sólidos e reusáveis é uma tarefa difícil e
requer administração centralizada. Mais tarde discutiremos os desafios enfrentados ao desenvolver
sites utilizando CSS.
Anotações
Entendendo a ordem
Como dito anteriormente, você pode utilizar vários tipos de estilos para controlar a aparência do seu
site. O navegador estabelece uma prioridade para cada estilo a ser aplicado como na lista a seguir:
- Estilos definidos junto com o elemento;

- Estilos definidos no documento;
- Estilos anexados.
Embora não seja aconselhável você pode usar o palavra importante para alterar esta precedência. No
exemplo abaixo o estilo atribuído ao elemento H1 sobrepõe o estilo definido junto com o elemento
graças ao uso da palavra important:
H1 {color: red ! important;

font-weight: bold;
font-family: sans-serif ! important}
Criando Style Sheets para cada tipo de Mídia

CSS permite também estilos diferentes para cada tipo de mídia utilizada para apresentação deste
estilo. Isto dá um enorme poder para a CSS permitindo a utilização de um documento por portadores
de deficiência visual ou auditiva. Permite também a aplicação de estilos especificamente para
impressão de documentos, o que resolve uma grande deficiência dos navegadores. Tanto o IE
quanto o Netscape possuem dificuldades na hora de paginar documentos para impressão.
Anotações
@media print
{ BODY { font-size: 10pt } }
@media screen
{ BODY { font-size: 12pt } }
@media screen, print

{ BODY { line-height: 1.2 } }
A tabela abaixo descreve cada um dos estilos possíveis com a CSS:
Tipo Descrição
Screen Telas de computadores
Print Impressoras
Projection Projeções
Braile Dispositivos Braile
Speech Sintetizadores de voz
All Todos os dispositivos
Anotações
Adicionando regras para uma Style Sheet
Tanto Style Sheets anexadas quanto no documento permitem a definição de um ou mais elementos.
Por exemplo você deseja criar uma Style Sheet que define estilos para os elementos <H1>, <H2> e
<P>. Cada definição de estilo é chamada de regra. Uma regra contém um seletor (que é o próprio
elemento), seguido da declaração (a definição do estilo). O exemplo abaixo mostra uma regra que
define um estilo para cada ocorrência do elemento <H1>:
H1 {color: blue}
A declaração é colocada entre chaves ({}). Cada item na declaração possui duas partes: O nome da
propriedade e o valor atribuído a esta, separado por dois pontos (:). No exemplo abaixo, color é o
nome da propriedade e blue é o valor atribuído a esta. Existes dezenas de propriedades as quais se
aplicam tipos predefinidos e certos intervalos de valores:
H1 {color: blue}
P {font-size: 10pt}
</STYLE>
Anotações
Atribuindo múltiplas propriedades em uma regra simples

Múltiplas propriedades podem ser atribuídas em uma única declaração. Isto é feito separando cada
atribuição com o sinal de ponto e vírgula (;). No exemplo abaixo o navegador mostra cada
ocorrência do elemento <H1> usando a cor azul, fonte 12 centralizada. Para todas as outras
propriedades o navegador utilizará os valores padrão:
H1 {color: blue; font-size: 12pt; text-line: center}
Agrupando seletores juntos em uma regra simples

Caso seja necessária a definição de um mesmo estilo para vários elementos, esta pode ser feita
listando os estilos individualmente.
Entretanto, existe uma maneira mais eficiente de fazer a mesma ação. Os elementos (ou seletores)
podem ser agrupados de modo a definir uma regra única para todo o grupo. No exemplo abaixo os
seletores são agrupados e uma única regra é atribuída:
P, UL, LI {font-size: 12pt}
Anotações
Definindo relacionamentos Pai-Filho nas regras

Usando CSS é possível especificar quando um estilo é aplicado à um elemento. Por exemplo, você
pode querer definir dois estilos para o elemento <LI>: um que se aplica quando ele for filho do
elemento <UL> e outro quanto ele for filho do elemento <OL>. Para tanto você utiliza seletores
contextuais.
Seletores contextuais definem a seqüência exata de elementos para o qual um estilo será aplicado.
OL LI {list-style-type: decimal}
UL LI {list-style-type: square}
Note que a lista de seletores não é separada por vírgula. Separando cada seletor por vírgula os
estilos atribuídos serão aplicados aquele grupo de elementos.
Entendendo Herança
Os elementos herdam certas propriedades de seus pais. Por exemplo, todas os elementos dentro do
elemento <BODY> (<P> e <UL>) herdam certas propriedades deste. Assim como o elemento <LI>
herda propriedades do elemento <UL> no qual ele está contido. Veja o exemplo:
<STYLE TYPE="text/css"> P {color: blue} </STYLE>

<BODY>
<P>Hello. This is a paragraph of text. <EM>This text is emphasized</EM>
</P> </BODY>
Anotações
A Style Sheet para este exemplo muda a cor do elemento <P> para azul. Não há definição para o
elemento <EM>. Devido ao fato do elemento <EM> está dentro do elemento <P>, <EM> herda o
propriedade color do elemento <P>.
Trabalhando com Classes em Style Sheets

Uma classe define a variação de um estilo, o qual é referenciado através de uma ocorrência
específica de um elemento utilizando o atributo CLASS. Por exemplo, você pode definir três variações
do estilo H1 e então usar cada variação em um contexto apropriado. Uma classe é definida
normalmente, como é definido um estilo. Apenas é adicionado o nome da classe no final do elemento,
separado por ponto, assim como no exemplo:
H1.blue {color: blue}

H1.red {color: red}
H1.black {color: black}
Quando o elemento <H1> é adicionado ao documento, o atributo CLASS é utilizado para atribuir qual
estilo será utilizado.
<H1 CLASS=red>Red Heading</H1>
Anotações
Uma classe não precisa de estar ligada à um elemento. As classes podem ser declaradas sem
nenhum elemento. Assim, qualquer elemento que utilize aquela classe utilizará aquele estilo:
.red {color:red}
<H1 CLASS=red>Red Heading</H1>
<P CLASS=red>Red Paragraph</P>
Definindo um estilo para um elemento específico

Como já discutido anteriormente, você pode declara estilos junto com o elemento. Entretanto, para
facilitar a leitura do documento, você pode atribuir um ID aos elementos e então associar estilos à
este ID. Para declarar o estilo para um ID é usado o símbolo (#). Somente aos atributos com aquele
ID são aplicados os estilos.
O exemplo abaixo declara um estilo para o ID test.. Ele também usa o elemento <P> e atribui a este
o ID test:
# test {color:red}
<P ID=test> This is a test paragraph <P>
Anotações
Usando pseudo-classes
Em CSS1, um estilo normalmente é associado a um elemento com base na posição que este
elemento ocupa dentro da estrutura hierárquica do documento. Isto é suficiente para uma grande
variedade de estilos, mas não atende a alguns efeitos comuns. O conceito de pseudo-classes e de
pseudo-elementos veio atender esta área, permitindo que informações exteriores possam influenciar
o processo de formatação do documento.
Pseudo-classes e pseudo-elementos podem ser usados como seletores na CSS, mas eles não
existem dentro da HTML. Mais exatamente, eles são 'inseridos' pelo browser, sob certas condições,
para serem usados como elos de ligação com as folhas de estilo. Eles são referidos como 'classes' e
'elementos' porque esta é uma maneira conveniente de descrever seu comportamento. Mais
especificamente, seu comportamento é definido por uma tag fictícia de seqüência.
Pseudo-elementos são usados para especificar sub-partes de elementos, enquanto pseudo-classes

permitem às folhas de estilo diferenciar entre tipos diferentes de elementos.
Abaixo vemos um exemplo de utilização da pseudo-classe Anchor
A:link {color: blue}

A:active {color: red}
A:visited {color: yellow}
Todos os elementos 'A' com um atributo 'HREF' serão classificados em um, e apenas um, destes
grupos (ou seja, as definições das posições locais dos links não serão afetadas). Os navegadores
podem decidir mover um elemento de um grupo a outro (de 'visitado' para 'não visitado', por exemplo,
após um certo tempo). Um 'link ativo' é aquele que está sendo selecionado no momento pelo leitor
(está sendo 'clicado').
Anotações
Adicionando comentários em Style Sheets

Assim como em qualquer linguagem de programação, em CSS é possível adicionar comentários para
melhor documentar o código.
Tanto para linhas de comentário quanto para blocos a sintaxe é a mesma:
H1 {font-size: 16; margin-left: -1in} /* estilo do elemento H1 */

H2 {font-size: 14; margin-left: -1in} /* estilo do elemento H2 */
/*------------------------------------------------------
Este é um bloco de comentario
------------------------------------------------------*/
Ocultando Style Sheets de navegadores antigos

Para manter a compatibilidade com navegadores antigos CSS implementa a funcionalidade de ocultar
o código CSS destes navegadores. Lembre-se que seu site não deve depender exclusivamente da
CSS. Este deve funcionar mesmo caso não seja possível aplica-la. Utilize o exemplo abaixo para criar
esta compatibilidade:

</STYLE>
Anotações
Revisão
1. Quais são as principais vantagens e desvantagens do uso de Style Sheets em arquivos externos?
2. É aconselhável que a funcionalidade do site dependa 100% de CSS?
3. Diferencie a necessidade de utilização de IDs e classes.

Capítulo 2:
Posicionando elementos
Objetivo
Ao final deste capítulo você será capaz de :

- Criar blocos de elementos e posicioná-los no navegador;
- Redimensionar elementos;
- Entender como os blocos são sobrepostos.
Entendendo posicionamento de elementos
No mundo das publicações, camadas são blocos retangulares de texto e imagens que podem ser
posicionados em qualquer lugar da página. Estas camadas podem ser ocultas e sobrepostas.
Antes da CSS, era impossível construir páginas HTML utilizando este conceito. O documento era
exibido seqüencialmente sem a possibilidade de sobrepor camadas.
CSS permite a construção de blocos de texto que se sobrepõe assim como ocultar ou exibir
determinados blocos.
Anotações
Posicionando um Elemento HTML

CSS fornece duas maneira de posicionar elementos no navegador: RELATIVE e ABSOLUTE. No modo
RELATIVE, o navegador posiciona o elemento em relação à sua posição normal, ou seja, onde o
elemento deveria realmente aparecer. No modo ABSOLUTE, o navegador posiciona o elemento em
relação ao elemento pai.
Para posicionar o elemento são utilizadas as propriedades TOP e LEFT:
#element {position: absolute; top: 100; left: 20}
No exemplo acima, o elemento é posicionado à 100 pixels da borda superior do elemento pai e à 20
pixels da borda esquerda o elemento pai. Quando o elemento a ser posicionado não possui pai, este
é posicionado em relação às bordas do navegador.
A unidade de medida padrão para LEFT e TOP é pixels. Pode ser usado também valores percentuais,
que eqüivale ao percentual do elemento pai. O exemplo abaixo posiciona uma imagem à 40 pixels do
topo e 100 pixels da borda esquerda do elemento <BODY>. Como no elemento <BODY> não existe
posicionamento definido e ele não tem nenhum elemento pai, este assume a posição 0, 0.
<HTML> <STYLE TYPE=”text/css”>

#example {position: absolute; top:40; left:100}
</STYLE>
<BODY> <IMG ID=example SRC=init.gif>
</BODY> </HTML>
Anotações
Mudando o tamanho de um elemento

Assim como é possível controlar a posição do elemento é possível também controlar a dimensão do
elemento. Para isto são usadas as propriedades WIDTH para largura e HEIGHT para altura. Assim
como LEFT E TOP a unidade de medida padrão é pixels mas podem ser usados valores percentuais.
Também pode ser usado o valor AUTO para que o navegador automaticamente determine o tamanho
do elemento.
#element {position: absolute; top: 100; left: 20; width: 100; height: 100}
A propriedade WIDTH não é usada para definir exatamente a largura do elemento. Esta propriedade
serve apenas para o caso em que haja algum elemento dentro do qual é definido pela propriedade
WIDTH e este seja maior que o mesmo.
Existe ainda a propriedade OVERFLOW que determina como o navegador se comporta no caso em que
o conteúdo de um elemento excede o tamanho do elemento. Os possíveis valores são NONE, CLIP e
SCROLL.
O exemplo abaixo mostra o comportamento de um bloco de texto quando posicionado e

dimensionado utilizando CSS:
<HTML><STYLE TYPE=”text/css”>
#example {position: absolute; top:80; left:40; width:160} </STYLE>
<BODY><DIV ID=example>
Este texto está dentro da tag DIV. Observe seu comportamento.
</DIV> </BODY> </HTML>
Anotações
Sobrepondo elementos
Utilizando as propriedades TOP e LEFT é possível sobrepor elementos e a ordem de exibição é a

mesma ordem em que eles estão no código, ou seja, o último bloco de código será o último bloco a
ser montado na tela sobrepondo todos os outros. Esta ordem de sobreposição pode ser alterada
utilizando a propriedade Z-INDEX.
A propriedade Z-INDEX aceita valores inteiros positivos. Um elemento com a propriedade Z-INDEX
igual à 10 sobrepõe um elemento com a propriedade Z-INDEX igual à 1.
O exemplo abaixo mostra 2 elementos usando a propriedade Z-INDEX para manipular a ordem de
exibição:
#ex1 {position: absolute; top: 40; left: 60; z-index: 2}
#ex2 {position: absolute; top: 80; left: 200; z-index: 1}
</STYLE>
<BODY><DIV ID=ex1>
<B>This is the first element. It's in the middle.</B><BR>
<B>This is the first element. It's in the middle.</B><BR>
</DIV>
<DIV ID=ex2>
<B>This is the second layer. It's behind the first layer.</B><BR>
<B>This is the second layer. It's behind the first layer.</B><BR>
</DIV>
Anotações
Aninhando posicionamento de elementos

Nem sempre alguns elementos precisam de estar contidos dentro de outros. Entretanto, esta prática
pode ser interessante visto que quando você posiciona o elemento pai, todos os elementos filhos
seguirão aquele posicionamento. Seja o estilo abaixo:
# test1
{background-color: blue; position: absolute; top: 50; left: 60; width: 150}
# test2
{background-color: yellow; position: absolute; top: 70; left: 30; width: 150}
</STYLE>
Veja o comportamento das páginas abaixo. A esquerda possui 2 elementos distintos. O

posicionamento do ID test1 não influencia no ID test2. Já no outro exemplo, o posicionamento do
ID test1 está diretamente ligado ao posicionamento do ID test2.
<DIV ID=test1> <DIV ID=test1>

Título Título
</DIV> <DIV ID=test2>
Aqui fica o texto da mensagem
<DIV ID=test2>
Aqui fica o texto da mensagem </DIV>
</DIV> </DIV>
Anotações
Posicionando elementos através de script
Como já visto anteriormente CSS permite o controle de como o documento é apresentado.

Entretanto, todas as propriedades da CSS podem ser manipuladas através da utilização de scripts.
Lembrando que esta manipulação varia de navegador para navegador.
Dado o ID de um determinado elemento, este pode ser referenciado utilizando o DOM, como no
exemplo abaixo:
Document.all.item(id, 0).style.property
Onde id é o ID do elemento e 0 é a primeira ocorrência deste ID.
Usando scripts para ocultar ou exibir elementos

Para ocultar ou exibir elementos, usa-se a propriedade visibility. O valor hidden oculta o elemento
e o valor “” exibe o mesmo. O exemplo abaixo mostra como ocultar e exibir elementos utilizando
JavaScript:
Document.all.item(“teste”, 0).style.visibility = “hidden”
Anotações
Revisão
1. Qual é o elemento utilizada para criação de blocos?
2. Como é controlada a profundidade dos elementos no navegador?
3. Cite um exemplo de utilização de blocos sobrepostos.

Capítulo 3:
Dynamic HTML
Objetivo
No final deste capítulo você será capaz de:

- Alterar estilos dos elementos dinamicamente;
- Diferenciar o uso de CSS no IE e no Netscape;
- Criar documentos com várias camadas, exibindo-as ou ocultando-as de acordo com a
ação do usuário
Introdução à DHTML
DHTML promete causar uma revolução na construção de sites combinando CSS, HTML e scripts
para manipular ambas.
Existem grandes diferenças entre Netscape e IE quanto a forma de implementar DHTML. Devido à
grande diferença de implementação do DOM (Documento Object Model) é praticamente impossível
criar um site que funcione nos dois navegadores sem nenhuma alteração.
DOM é um modelo de navegação em documentos através de árvore. Todo exemplo utilizado nesta
apostila é baseado neste modelo.
Para efeitos didáticos, adotamos aqui comandos que funcionam no IE devido ao seu domínio de
mercado.
Anotações
Trabalhando com elementos na página
A maneira mais explícita de acessar uma elemento é usando o objeto all, que pode usar ID, nome o
elemento ou número seqüencial como parâmetro. No exemplo abaixo a variável e recebe o conteúdo
do objeto cujo ID é example:
e = document.all(“example”);
Anotações
Mudando o conteúdo de um elemento
Antes de DHTML era impossível mudar conteúdo de uma página dinamicamente após esta ter sido
carregada.
No IE, cada elemento tem duas propriedades que permitem a alteração dos dados sem ter que
recarregar a página:
- innerText: contém o texto de um elemento, sem o código propriamente dito

- innetHTML: contém o conteúdo completo incluindo o código
<P ID=Test>Example Text</P>
Test.innerText = "Dynamically Built Text";

Test.innerHTML = "Dynamically Built <STRONG>HTML</STRONG>";
No exemplo acima, Test.innerText altera somente o texto enquanto Test.innerHTML pode incluir
códigos HTML.
Anotações
Conectando scripts à estilos e classes
Assim como é possível alterar textos é possível alterar as propriedades de estilos já atribuídos. É
possível tornar um elemento visível ou oculto, mudar suas cores, fonte, etc. Para tanto basta
referenciar o estilo e atribuir uma nova propriedade.
O DOM do Internet Explorer expõe todos os estilos para cada elemento no documento. Estes estilos
são acessados utilizando a propriedade style, como mostrado no exemplo abaixo:
Test.style.color= “red”;
Anotações
Controlando a visibilidade de objetos
Controlar a visibilidade de objetos cria uma infinidade de possibilidades no que diz respeito ao design.
Lógicas de várias pastas que até então eram impossíveis no mundo web agora se tornaram fáceis de
ser implementadas. Conforme o usuário clica em um item, o navegador mostra o texto apropriado
aquele item.
Manipulando o DOM do navegador e utilizando a propriedade visibility é possível mostrar o

ocultar blocos, assim como demonstrado no exemplo:
Document.all.item(“teste”, 0).style.visibility = “hidden”
Anotações
Revisão
1. Qual a utilização da alteração dinâmica de elementos?
2. O que é DOM?
3. Quais são as principais diferenças entre o DOM Netscape e o DOM IE?

CSS:
Guia de Referência
Sumário
Propriedades CSS1 .......................................................................................................................... 40

Notação para os Valores das Propriedades ....................................................................................................40
Propriedades das Fontes.................................................................................................................................41
Ajuste das Fontes .......................................................................................................................................41
Propriedade 'font-family'............................................................................................................................42
Propriedade 'font-style' ..............................................................................................................................43
Propriedade 'font-variant'...........................................................................................................................43
Propriedade 'font-weight' ...........................................................................................................................44
Propriedade 'font-size'................................................................................................................................46
Propriedade 'font' .......................................................................................................................................47
Propriedades das Cores e do Background......................................................................................................48
Propriedade 'color' .....................................................................................................................................48
Propriedade 'background-color' .................................................................................................................48
Propriedade 'background-image'................................................................................................................48
Propriedade 'background-repeat'................................................................................................................49
Propriedade 'background-attachment' ........................................................................................................49
Propriedade 'background-position'.............................................................................................................50
Propriedade 'background'...........................................................................................................................51
Propriedades de Texto ...................................................................................................................................52
Propriedade 'word-spacing' ........................................................................................................................52
Propriedade 'letter-spacing' ........................................................................................................................52
Propriedade 'text-decoration'......................................................................................................................53
Propriedade 'vertical-align' ........................................................................................................................54
Propriedade 'text-transform' .......................................................................................................................54
Propriedade 'text-align' ..............................................................................................................................55
Propriedade; 'text-indent' ...........................................................................................................................56
Propriedade 'line-height' ............................................................................................................................56
Propriedades dos 'Containers' ........................................................................................................................57
Propriedade 'margin-top' ............................................................................................................................57
Propriedade 'margin-right'..........................................................................................................................57
Propriedade 'margin-bottom'......................................................................................................................58
Propriedade 'margin-left'............................................................................................................................58
Propriedade 'margin' ..................................................................................................................................58
Propriedade 'padding-top' ..........................................................................................................................59
Propriedade 'padding-right' ........................................................................................................................59
Propriedade 'padding-bottom' ....................................................................................................................60
Propriedade 'padding-left' ..........................................................................................................................60
Propriedade 'padding'.................................................................................................................................60
Propriedade 'border-top-width'...................................................................................................................61
Propriedade 'border-right-width' ................................................................................................................62
Propriedade 'border-bottom-width' ............................................................................................................62
Propriedade 'border-left-width' ..................................................................................................................62
Propriedade 'border-width'.........................................................................................................................62
Propriedade 'border-color'..........................................................................................................................63
Propriedade 'border-style' ..........................................................................................................................63
Propriedade 'border-top'.............................................................................................................................64
Propriedade 'border-right' ..........................................................................................................................65
Propriedade 'border-bottom'.......................................................................................................................65
Propriedade 'border-left'.............................................................................................................................65
Propriedade 'border' ...................................................................................................................................66
Propriedade 'width'.....................................................................................................................................67
Propriedade 'height'....................................................................................................................................67
Propriedade 'float' ......................................................................................................................................67
Propriedade 'clear' ......................................................................................................................................68
Propriedades de Ordenação............................................................................................................................69
Propriedade 'display' ..................................................................................................................................69
Propriedade 'white-space'...........................................................................................................................70
Propriedade 'list-style-type'........................................................................................................................70
Propriedade 'list-style-image' .....................................................................................................................70
Propriedade 'list-style-position'..................................................................................................................71
Propriedade 'list-style' ................................................................................................................................71
Unidades ........................................................................................................................................... 73
Unidades de Medidas.....................................................................................................................................73
Unidades Percentuais .....................................................................................................................................74
Unidades para Cores ......................................................................................................................................74
URL ...............................................................................................................................................................76
Propriedades CSS1
As folhas de estilo definem a visualização de um documento pela atribuição de diversos valores às

suas propriedades de estilo. Esta seção lista estas propriedades e seus valores possíveis.
Notação para os Valores das Propriedades

No texto que se segue, os valores permitidos para cada propriedade são listados usando a seguinte
sintaxe:
Valor: N | NW | NE
Valor: [ <comprimento> | thick | thin ]{1,4}
Valor: [<família> , ]* <família>
Valor: <url>? <cor> [ / <cor> ]?
Valor: <url> || <cor>
As palavras entre "<" e ">" indicam o tipo do valor. Os tipos mais comuns são <comprimento>,
<percentagem>, <url>, <número> e <cor>; eles estão descritos na seção Unidades. Os tipos mais
específicos de valores (<família-da-fonte> e <estilo-da-borda>) estão descritos nos tópicos
correspondentes.
As outras palavras são palavras-chaves que devem ser usadas tal como aparecem, sem as aspas. A
barra (/) e a vírgula (,) também devem ser empregadas tal como estão definidas.
Vários parâmetros indicados em seqüência significa que todos eles devem ser definidos, na ordem
em que aparecem. Uma barra (|) separa alternativas: apenas um dos parâmetros deve ser definido.
Uma barra dupla (||) significa que tanto o parâmetro A como o B, ou mesmo ambos, podem ser
definidos, em qualquer ordem. Colchetes ([]) são usados para agrupar parâmetros. Em ordem de
prioridade, uma seqüência de parâmetros vale mais que a barra dupla (||), e a barra dupla vale mais
que a barra simples (|). Portanto,
a b | c || d e é equivalente a [ a b ] | [ c || [ d e ]]
Cada tipo de valor, palavra-chave ou grupamento ([]) pode vir seguido por um dos seguintes
modificadores:
• Um asterisco (*) indica que o tipo, palavra ou grupo que o precede pode ser repetido zero ou mais vezes.
• Um sinal positivo (+) indica que o tipo, palavra ou grupo que o precede é repetido uma ou mais vezes.
• Um ponto de interrogação (?) indica que o tipo, palavra ou grupo que o precede é opcional.
• Um par de números entre chaves ({A,B}) indica que o tipo, palavra ou grupo que o precede é repetido no mínimo A e
no máximo B vezes.
Propriedades das Fontes

A definição das propriedades das fontes será o uso mais comum dado às folhas de estilo.
Infelizmente, não existem termos bem definidos e aceitos universalmente para classificar as fontes, e
termos que são aplicados a uma dada família de fontes podem não serem apropriados para alguma
outra família. Por exemplo, 'italic' normalmente é usado para definir texto inclinado, o qual também
pode ser definido como oblique, slanted, incline, cursive ou kursiv. Portanto, não é um problema
simples mapear propriedades para as fontes.
CSS1 define as propriedades 'font-family', 'font-style', 'font-variant', 'font-weight', 'font-size' e 'font'.
Ajuste das Fontes
Devido à inexistência de uma terminologia aceita universalmente para as

propriedades das fontes, a definição destas propriedades e seus valores deve ser
feita cuidadosamente. Elas devem ser empregadas numa ordem muito bem definida
para assegurar que o resultado seja o mais consistente possível entre os vários
browsers (assumindo, é claro, que a mesma biblioteca de fontes esteja presentes
em todos eles).
1. O browser monta (ou acessa) um banco de dados das propriedades mais relevantes de todas as fontes disponíveis a
ele. Uma fonte pode estar disponível ao browser porque ela está instalada localmente ou por ter sido previamente
carregada pela web. Se houverem duas fontes definidas com exatamente as mesmas propriedades, então uma delas
será descartada.
2. Para um dado elemento, e para cada caracter definido neste elemento, o browser monta todas as propriedades
aplicáveis àquele elemento. Com base no conjunto completo de propriedades, o browser olha para o propriedade
'font-family' a fim de escolher uma família de fontes que possa ser usada. Com esta família já escolhida, todo o
conjunto de propriedades é testado para ver se eles podem ser aplicados à mesma. Em caso positivo está
determinada a fonte a ser usada.
3. Se não ocorre o casamento de todas as propriedades, e ainda existem mais famílias de fontes disponíveis para uso,
então o passo anterior é repetido para uma nova família.
4. Caso ocorra o casamento de todas as propriedades, mas o caracter necessário não esteja definido na família
escolhida, e se ainda houver mais famílias disponíveis, então o passo 2 é repetido com a próxima família disponível.
5. Se nenhuma fonte for encontrada no processo descrito, então uma fonte 'default', dependente de cada browser, será
empregada usando a melhor combinação de propriedades possível para montar o caracter.
(este algoritmo pode ser otimizado para evitar a consulta de todas as propriedades para cada caracter
a ser montado).
As regras de ajuste das propriedades indicadas no item (2) são as seguintes:
1. Inicialmente é testada 'font-style'. O estilo itálico ('italic') será atendido caso exista uma fonte no banco de dados
usado pelo browser que esteja designada pela palavra-chave 'italic' (de preferência) ou 'oblique'. Caso contrário
todos os outros valores deverão coincidir de maneira exata, ou o estilo não funcionará.
2. A seguir é testada a propriedade 'font-variant'. Um valor 'normal' é aceito para uma fonte que não esteja especificada
como 'small-caps'; 'small-caps' é aceito com (1) uma fonte especificada como 'small-caps', (2) uma fonte onde as
letras maiúsculas de tamanho pequeno sejam geradas, ou (3) uma fonte onde todas as letras minúsculas foram
substituídas por letras maiúsculas. Uma fonte 'small-caps' pode ser gerada eletronicamente redimensionando letras
maiúsculas a partir de uma fonte normal.
3. A próxima propriedade a ser testada é 'font-weight', que nunca poderá falhar.
4. A seguir, deve ser atendida a propriedade 'font-size', dentro de uma margem de tolerância que depende de cada
browser. Normalmente, o tamanho para as fontes escaláveis é arredondado para o pixel inteiro mais próximo,
enquanto que a tolerância para as fontes não escaláveis (bitmap) pode chegar a 20%. Os cálculos posteriores,
provocados pelos valores 'em' em outras propriedades, tomam como base o valor de 'font-size'.
Propriedade 'font-family'
font-family: [[<família> | <genérica>],]* [<família> | <genérica>]
Valor padrão: depende da cada browser

Aplicável a: todos os elementos
Propriedade herdada: sim
Valores percentuais: N/A
O valor desta propriedade consiste numa relação de nomes específicos de famílias de fontes ou de
seus nomes genéricos. Ao contrário de outras propriedades CSS1, os valores na relação de nomes
são separados por vírgulas para indicar que eles são alternativos:
BODY { font-family: gill, helvetica, sans-serif }
Existem dois tipos de valores que podem ocorrer na relação de nomes:

<família>
O nome de uma família de fontes. No exemplo acima, 'gill' e 'helvetica' indicam nomes de famílias.
<genérica>
Neste mesmo exemplo, o último valor ('sans-serif') indica um nome genérico de fonte. Os nomes genéricos a seguir
estão definidos:
• 'serif' (por exemplo, Times)
• 'sans-serif' (por exemplo, Helvetica)
• 'cursive' (por exemplo, Zapf-Chancery)
• 'fantasy' (por exemplo, Western)
• 'monospace' (por exemplo, Courier)
É recomendável que os autores de folhas de estilo sempre forneçam uma família genérica
como última alternativa.
Nomes que contenham espaços em branco devem ser colocados entre aspas:
BODY { font-family: "new century schoolbook", serif }
<BODY STYLE="font-family: 'My own font', fantasy">

Se as aspas forem omitidas, qualquer espaço anterior ou posterior ao nome da fonte será ignorado, e
qualquer seqüência de espaços dentro do nome da fonte será convertido um único espaço em
branco.
Propriedade 'font-style'
font-style: normal | italic | oblique
Valor padrão: normal

A propriedade 'font-style' define se a fonte é normal (algumas vezes chamada de 'romana'), itálica ou
oblíqua.
Um valor 'normal' seleciona uma fonte que está classificada como 'normal' na base de dados do
browser, enquanto 'oblique' indica uma fonte classificada como 'oblique'. Já um valor 'italic' seleciona
uma fonte classifica como 'italic' ou, caso não exista, uma outra classificada como 'oblique'.
Uma fonte que esteja classificada como 'oblique' no banco de dados de um browser é, normalmente,
gerada internamente pela inclinação de uma fonte normal.
Fontes que contenham as palavras 'Oblique', 'Slanted' ou 'Incline' em seus nomes são classificadas
como 'oblique'. Já as fontes com Italic, Cursive ou Kursiv são classificadas como 'italic'.
H1, H2, H3 { font-style: italic }

H1 EM { font-style: normal }
Neste exemplo, um texto enfatizado que faça parte de algum elemento 'H1' aparece como 'normal'.
Propriedade 'font-variant'
font-variant: normal | small-caps

Um outro tipo de variação no formato da fonte dentro de uma família é a 'small-caps'. Numa fonte
deste tipo, o formato das letras minúsculas é similar ao das letras maiúsculas, diferindo apenas no
tamanho.
O valor 'normal' indica uma fonte que não pertença a este tipo. É aceitável, embora não exigido pela
CSS1, que uma fonte 'small-caps' seja criada à partir de uma fonte normal onde as letras minúsculas
são substituídas pelas letras maiúsculas com tamanho menor. Como último recurso, as letras
maiúsculas poderão substituir as minúsculas sem qualquer alteração de tamanho.
O exemplo a seguir produz um elemento 'H3' em 'small-caps', no qual as letras enfatizadas são
oblíquas:
H3 { font-variant: small-caps }
EM { font-style: oblique }
Poderão existir outras variações dentro de uma família de fontes, tais como fontes com caracteres
antigos, letras condensadas ou expandidas, etc. A CSS1 não possui propriedades para tratar destas
fontes.
Propriedade 'font-weight'
font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

A propriedade 'font-weight' seleciona a intensidade de uma fonte. Na seqüência de valores de '100' a

'900', cada número indica uma fonte mais intensa (escura) que o valor anterior. A palavra-chave
'normal' equivale à intensidade '400', enquanto que 'bold' é igual a '700'. Outras palavras-chaves para
indicar as intensidades mostraram-se confusas, optando-se pela seqüência numérica.
P { font-weight: normal } /* 400 */

H1 { font-weight: 700 } /* bold */
Os valores representados por 'bolder' e 'lighter' são usados sempre como referência aos valores
herdados do elemento pai:
STRONG { font-weight: bolder }
Elementos filhos herdam a intensidade, não a palavra-chave. As fontes normalmente possuem uma
ou mais propriedades cujos valores são nomes descritivos da sua intensidade. Não existe um padrão
universalmente aceito para estes nomes. Seu uso inicial era distinguir fontes de diferentes
tonalidades dentro de uma única família. Seu uso por outras famílias de fontes varia bastante; por
exemplo, uma fonte que você imagina como sendo pesada (escura) pode ter sido descrita como
Regular, Roman, Book, Medium, Semi- ou DemiBold, Bold, ou ainda Black, dependendo de quão
escura é a fonte dita 'normal' pelo seu criador. Devido a esta falta de padronização, em CSS1 a
intensidade é expressa por valores numéricos, onde o valor '400' indica a fonte 'normal' para aquela
família.
• Se a família da fonte já possui uma escala numérica com nove valores (tal como a OpenType), as intensidades
podem ser indicadas diretamente.
• Se existe uma fonte identificada como Medium e outra como Book, Regular, Roman ou Normal, então a Medium é
associada à intensidade '500'.
• A fonte classificada como Bold corresponde à intensidade '700'.
• Se existem menos de nove valores de intensidade definidos para a família, deve ser usado o seguinte algoritmo para
preencher as lacunas. Se '500' não estiver designado, ele será associado à mesma fonte de '400'. Se qualquer dos
valores '600, '700', '800' ou '900' não estiverem designados, eles serão associados à próxima fonte mais escura
disponível, se houver, ou à menos clara em caso contrário. Se quaisquer dos valores '300', '200' ou '100' estiverem
ausentes, eles serão associados à próxima fonte mais clara disponível, se houver, ou à menos escura em caso
contrário.
Os dois exemplos seguintes mostram este processo. Foram assumidas quatro intensidades na família
do exemplo 1: Regular, Medium, Bold, Heavy (do mais claro ao mais escuro). Já no exemplo 2 foram
assumidas seis intensidades: Book, Medium, Bold, Heavy, Black, ExtraBlack. Repare que no exemplo
2 decidiu-se não associar a ExtraBlack.
Fontes disponíveis | Associações | Lacunas preenchidas

----------------------+---------------+-------------------
"Exemplo 1: Regular" | 400 | 100, 200, 300
"Exemplo 1: Medium" | 500 |
"Exemplo 1: Bold" | 700 | 600
"Exemplo 1: Heavy" | 800 | 900
Fontes disponíveis | Associações | Lacunas preenchidas
------------------------+---------------+-------------------
"Exemplo 2: Book" | 400 | 100, 200, 300
"Exemplo 2: Medium" | 500 |
"Exemplo 2: Bold" | 700 | 600
"Exemplo 2: Heavy" | 800 |
"Exemplo 2: Black" | 900 |
"Exemplo 2: ExtraBlack" | (nenhuma) |
Desde que a intenção das palavras 'bolder' e 'lighter' é escurecer ou clarear a fonte dentro de sua
família, e como a família pode não possuir associações para todos os valores simbólicos, o ajuste do
valor de 'bolder' é feito levando a fonte para o próximo valor mais escuro disponível, e 'lighter' para o
mais claro. Para ser mais preciso, o significado destas palavras é:
• 'bolder' seleciona a próxima intensidade mais escura que o valor herdado. Se tal intensidade não existe, caso do
valor herdado ser '900', este valor é mantido.
• 'lighter' é similar, atuando no sentido oposto.
Não há garantia de que sempre haverá uma fonte mais escura (ou mais clara) do que a especificada.
Por exemplo, algumas famílias de fontes possuem definidos apenas os valores 'normal' e 'bold',
enquanto que outras possuem oito valores diferentes. A única garantia é que a fonte de um dado
valor será no mínimo mais escura que a que possui um valor menor, dentro da mesma família.
Propriedade 'font-size'
font-size: <absolute-size> | <relative-size> | <length> | <percentage>
Valor padrão: medium

Valores percentuais: relativo ao tamanho da fonte no elemento pai

<absolute-size>
A palavra-chave <absolute-size> é um índice para uma tabela de tamanhos de fontes calculada e mantida pelo
browser. Os valores possíveis são: [ xx-small | x-small | small | medium | large | x-large | xx-large ]. Numa tela de
computador é adotado o fator de 1,5 no tamanho de índices adjacentes: se 'medium' equivale a 10pt, então 'large' é
igual a 15pt. Mídias diferentes de exibição podem adotar fatores também diferentes. O browser também pode levar
em conta a qualidade e a disponibilidade de fontes quando for montar a tabela, a qual pode resultar diferente entre
as várias famílias de fontes.
<relative-size>
A palavra-chave <relative-size> é interpretada como um tamanho relativo ao usado na tabela de tamanhos do
elemento pai. Os valores permitidos são: [ larger | smaller ]. Exemplo: se o elemento pai possui um tamanho de fonte
'medium', um valor 'large' será adotado quando esta propriedade for ajustada para 'large'. Se o valor do elemento pai
não estiver definido na tabela, o browser tem liberdade para fazer interpolação entre os valores existentes.
Os valores de comprimento e percentagem não devem ser tomados da tabela de tamanhos de fonte
quando for efetuado o cálculo para o elemento.
Não são permitidos valores negativos.
Em todas as outras propriedades, os valores de comprimento 'em' e 'ex' referem-se ao tamanho da

fonte do elemento considerado. Nesta propriedade ('font-size'), estas unidades referem-se ao
tamanho da fonte do elemento pai.
Note que uma aplicação pode interpretar de várias maneiras um dado valor, em função do contexto.
Por exemplo, num cenário VRML uma fonte pode assumir tamanhos diferentes de acordo com a
perspectiva em que é visualizada.
Exemplos:
P { font-size: 12pt; }
BLOCKQUOTE { font-size: larger }
EM { font-size: 150% }
EM { font-size: 1.5em }
Se o fator de escala de 1,5 estiver sendo usado, as últimas três declarações são idênticas.
Propriedade 'font'
font: [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-

family>
Valor padrão: não definido

Valores percentuais: permitidos para <font-size> e <line-height>
A propriedade 'font' é um atalho para definir 'font-style', 'font-variant', 'font-weight', 'font-size', 'line-
height' e 'font-family' em um único local da folha de estilo.
Veja nos tópicos anteriores a definição dos valores permitidos. Propriedades para as quais não é
fornecido nenhum valor assumem seu valor padrão.
P { font: 12pt/14pt sans-serif }

P { font: 80% sans-serif }
P { font: x-large/110% "new century schoolbook", serif }
P { font: bold italic large Palatino, serif }
P { font: normal small-caps 120%/120% fantasy }
Na segunda atribuição, o tamanho percentual (80%) refere-se ao tamanho da fonte do elemento pai.
Na terceira, o tamanho percentual da linha diz referência ao próprio tamanho da fonte do elemento
considerado.
Na primeira atribuição, as propriedades 'font-style', 'font-variant' e 'font-weight' estão ausentes, o que

significa que todas as três possuirão o valor padrão ('normal'). A quarta atribuição define 'font-weight'
em 'bold', 'font-style' em 'italic' e, implicitamente, faz 'font-variant' ser 'normal'.
A quinta atribuição define 'font-variant' ('small-caps'), 'font-size' (120% da fonte do elemento pai), 'line-
height' (120% do tamanho da fonte) e 'font-family' ('fantasy'). Deduz-se que o valor 'normal' refere-se
às outras duas propriedades: 'font-style' e 'font-weight'.
Propriedades das Cores e do Background

Estas propriedades descrevem a cor (normalmente chamada foreground color) e o padrão de fundo -
background - de um elemento (ou seja, a superfície na qual o elemento é desenhado). O padrão de
fundo tanto pode ser constituído de uma única cor como de uma imagem. Também são definidas a
posição da imagem, se e como ela será repetida, e quando ela é fixa ou acompanha o rolamento da
tela.
A propriedade 'color' é herdada normalmente. Já a propriedade 'background' não é herdada, mas o

padrão definido para o elemento pai será visualizado caso nada seja definido.
Propriedade 'color'
color: <cor>
Valor padrão: definido pelo browser

Esta propriedade define a cor do texto de um elemento (foreground color). Uma cor pode ser
especificada de várias maneiras.
EM { color: red } /* linguagem normal */

EM { color: rgb(255,0,0) } /* código RGB (0-255) */
Veja em unidades para cores uma descrição dos valores permitidos.
Propriedade 'background-color'
background-color: <cor> | transparent
Valor padrão: transparent

Propriedade herdada: não
Esta propriedade define a cor de fundo de um elemento.
H1 { background-color: #F00 }
Propriedade 'background-image'
background-image: <url> | none
Valor padrão: none


Esta propriedade define a imagem de fundo de um elemento. Quando da definição desta propriedade,
pode-se também definir uma cor alternativa que será usada caso a imagem não seja encontrada.
Quando a imagem é encontrada, ela se sobrepõe à cor de fundo.
BODY { background-image: url(marble.gif) }

P { background-image: none }
Propriedade 'background-repeat'
background-repeat: repeat | repeat-x | repeat-y | no-repeat
Valor padrão: repeat

Quando é especificada uma imagem de fundo, o valor desta propriedade define se e como a imagem
é repetida.
Um valor igual a 'repeat' indica que a imagem deve ser repetida tanto horizontal como verticalmente.
Já 'repeat-x' ('repeat-y') faz a imagem repetir-se apenas horizontalmente (verticalmente), de maneira
a criar uma faixa que se estende de um lado a outro do ambiente de exibição. Quando o valor for
definido como 'no-repeat', a imagem não será repetida.
BODY {
background: red url(pendant.gif);
background-repeat: repeat-y;
}
Neste exemplo, a imagem 'pendant' será repetida apenas verticalmente.
Propriedade 'background-attachment'
background-attachment: scroll | fixed
Valor padrão: scroll

Quando uma imagem de fundo é definida, o valor de 'background-attachment' determina se a imagem

é fixa em relação à área de exibição ou se ela irá acompanhar o rolamento da tela.
BODY {
background: red url(pendant.gif);
background-repeat: repeat-y;
background-attachment: fixed;
}
Núcleo CSS1: os browsers podem tratar o valor 'fixed' como 'scroll'. Entretanto, é recomendado que
eles interpretem 'fixed' corretamente, ao menos nos elementos 'HTML' e 'BODY', pois não existe
maneira dos autores de folhas de estilo definirem uma imagem apenas para os browsers que não
suportam o valor 'fixed' (veja normas de conformidade CSS1).
Propriedade 'background-position'
background-position: [<percentage> | <length>]{1,2} | [top | center | bottom] || [left | center |

right]
Valor padrão: 0% 0%
Aplicável a: elementos a nível de bloco e elementos substituídos
Valores percentuais: em relação ao tamanho do próprio elemento
Quando a imagem de fundo foi especificada, esta propriedade define sua posição inicial.
O par de valores '0% 0%' indica que o canto superior esquerdo da imagem deve ser colocado no
canto superior esquerdo do retângulo que contem o elemento em questão (exclui as áreas de
espaçamento, bordas e margens). Já os valores '100% 100%' colocam o canto inferior direito da
imagem no canto inferior direito do mesmo retângulo. Com os valores '14% 84%', o ponto da imagem
que está 14% à direita do canto superior esquerdo, e 84% abaixo do mesmo, será colocado na
posição correspondente do retângulo já mencionado.
Com um par de valores '2cm 2cm', o canto superior esquerdo da imagem é colocado 2cm à direita e
2cm abaixo do canto superior esquerdo do elemento considerado.
Se for fornecido apenas um valor, será assumido que este valor corresponde à posição horizontal; o
valor vertical será adotado como sendo 50%. Se existem dois valores definidos, o primeiro sempre
indica a posição horizontal. Combinações de percentagens com comprimentos são aceitas ('50%
2cm'). Não são permitidos valores negativos.
Palavras-chave também podem ser usadas para indicar a posição da imagem de fundo, embora elas
não possam ser combinadas com percentagens ou comprimentos. As palavras-chave aceitas, e suas
interpretações, são as seguintes:
• 'top left' e 'left top' significam, ambas, o mesmo que '0% 0%'
• 'top', 'top center' e 'center top' significam '50% 0%'
• 'right top' e 'top right' indicam '100% 0%'
• 'left', 'left center' e 'center left' indicam '0% 50%'
• 'center' e 'center center' correspondem a '50% 50%'
• 'right', 'right center' e 'center right' significam '100% 50%'
• 'bottom left' e 'left bottom' indicam '0% 50%'
• 'bottom, 'bottom center' e 'center bottom' indicam '50% 100%'
• 'bottom right' e 'right bottom' indicam '100% 100%'
Exemplos:
BODY { background: url(banner.jpeg) right top } /* 100% 0% */

BODY { background: url(banner.jpeg) top center } /* 50% 0% */
BODY { background: url(banner.jpeg) center } /* 50% 50% */
BODY { background: url(banner.jpeg) bottom } /* 50% 100% */
Se a imagem é fixa em relação ao ambiente de exibição (veja 'background-attachment' acima), ela é

posicionada com relação a este ambiente, e não ao elemento.
BODY {
background-image: url(logo.png);
background-position: 100% 100%;
}
Neste exemplo, a imagem é posicionada no canto inferior direito do ambiente de exibição.
Propriedade 'background'
background: <background-color> || <background-image> || <background-repeat> ||

<background-attachment> || <background-position>

Valores percentuais: permitidos para <background-position>
A propriedade 'background' é um atalho para definir os valores das demais propriedades relacionadas
ao fundo de exibição em um único lugar da folha de estilos.
Os valores permitidos estão indicados na descrição individual, dada acima, de cada propriedade
'background'.
BODY { background: red }

P { background: url(chess.png) gray 50% repeat fixed }
A propriedade 'background' sempre define os valores de todas as demais. No exemplo acima, na

primeira atribuição foi definido apenas o valor de 'background-color', assim todas as demais assumem
seus valores padrões. Já na atribuição seguinte todas as propriedades foram definidas.
Propriedades de Texto
Propriedade 'word-spacing'
word-spacing: normal | <length>

O valor indicado por 'length' corresponde ao espaçamento adicional acrescentado ao espaço padrão
entre as palavras. Os valores podem ser negativos mas devem atender aos limites intrínsecos de
cada browser, o qual possui liberdade de escolher um algoritmo próprio. O espaçamento entre as
palavras também pode ser influenciado pelo alinhamento de parágrafos (à esquerda, à direita,
centralizado ou justificado), o qual é definido pela propriedade 'text-align'.
H1 { word-spacing: 1em }
Aqui, o espaçamento entre cada palavra do elemento 'H1' será aumentado de '1em'.
Núcleo CSS1.Os browsers podem interpretar como 'normal' qualquer valor de 'word-spacing' (veja
normas de conformidade CSS1).
Propriedade 'letter-spacing'
word-spacing: normal | <length>

Esta propriedade define o espaço adicional a ser introduzido entre caracteres de uma mesma palavra.
Os valores podem ser negativos mas devem atender aos limites intrínsecos de cada browser, o qual
possui liberdade de escolher um algoritmo próprio. O espaçamento entre letras também é

influenciado pela justificação do texto, o qual é determinado pela propriedade 'align'.
BLOCKQUOTE { letter-spacing: 0.1em }
Neste exemplo, o espaçamento entre as letras do elemento 'BLOCKQUOTE' é aumentado em

'0.1em'.
Com o valor 'normal', os browsers são capazes de mudar o espaço entre letras para justificar um
texto. Isto não é possível se 'letter-spacing' é definida especificamente pelo valor <length>:
BLOCKQUOTE { letter-spacing: 0 }
BLOCKQUOTE { letter-spacing: 0cm }
Núcleo CSS1: Os browsers podem interpretar como 'normal' qualquer valor de 'letter-spacing' (veja
normas de conformidade CSS1).
Propriedade 'text-decoration'
text-decoration: none | [ underline || overline || line-through || blink ]
Valor padrão: none

Propriedade herdada: não, mas veja a observação abaixo
Esta propriedade indica quais efeitos são aplicados ao texto de um elemento. Se o elemento não
possui texto (tal como 'IMG') ou se é um elemento vazio (tal como '<EM></EM>'), esta propriedade
não produz efeito algum. Um valor 'blink' faz o texto piscar.
As cores usadas na aplicação dos efeitos são retiradas da propriedade 'color'.
Esta propriedade não é herdada, mas os elementos devem obedecer ao padrão de seus pais. Ou
seja, se um elemento está subscrito esta característica deve passar para seus elementos
subordinados. A cor usada no sublinhamento não irá mudar, mesmo que os elementos subordinados
possuam valores diferentes para a propriedade 'color'.
A:link, A:visited, A:active { text-decoration: underline }
Neste exemplo, todos os links deverão ser sublinhados (ou seja, todos os elementos 'A' com atributo
'HREF' definido).
Os browsers devem reconhecer a palavra-chave 'blink', porém não estão obrigados a suportar este
efeito.
Propriedade 'vertical-align'
vertical-align: baseline | sub | super | top | text-top | middle | bottom | text-bottom |

<percentage>
Valor padrão: baseline

Aplicável a: elementos internos
Valores percentuais: referidos à 'line-height' do próprio elemento
Esta propriedade age sobre a posição vertical do elemento. Um conjunto de palavras chaves diz
respeito às atribuições do elemento pai:
'baseline'
alinha as partes inferiores dos elementos pai e filho
'middle'
alinha os pontos médios verticais dos elementos pai e filho
'sub'
aplica o efeito de subscrito ao elemento
'super'
aplica o efeito de sobrescrito ao elemento
'text-top'
alinha o topo do elemento com o topo das fontes usadas no elemento pai
'text-bottom'
alinha a parte inferior de um elemento com a parte inferior das fontes usadas no elemento pai
Um outro conjunto de valores são relativos à formatação da linha que contem o elemento:
'top'
alinha o topo do elemento com o elemento mais alto que a linha contiver
'bottom
alinha a parte inferior do elemento com o elemento mais baixo contido na linha
O emprego dos valores 'top' e 'bottom' pode levar a situações insolúveis, nas quais surge um loop
entre as interdependências dos elementos.
Os valores percentuais são referidos em relação ao valor da propriedade 'line-height' do próprio

elemento (não do elemento pai). Eles colocam a parte inferior do elemento acima da parte inferior do
elemento pai, usando o valor especificado para determinar o quanto de elevação aplicar. São aceitos
valores negativos. Ou seja, um valor '-100%' irá descer a parte inferior do elemento até encontrar a
parte correspondente do próximo elemento. Esta propriedade permite o controle preciso da posição
vertical dos elementos (tais como imagens de letras usadas no lugar das próprias letras).
Propriedade 'text-transform'
text-transform: capitalize | uppercase | lowercase | none
Valor padrão: none

'capitalize'
transforma o primeiro caracter de cada palavra em maiúscula
'uppercase'
transforma todas as letras de todas as palavras em maiúsculas
'lowercase'
transforma todas as letras de todas as palavras em minúsculas
'none'
cancela algum valor que tenha sido herdado
H1 { text-transform: uppercase }
Este exemplo irá escrever todo o elemento 'H1' em letras maiúsculas.

Núcleo CSS1: browsers podem ignorar a propriedade 'text-transform' (isto é, tratá-la como se fosse
'none') nos casos de caracteres que não façam parte do conjunto de caracteres definidos em Latin-1.
O mesmo pode ocorrer para idiomas nos quais a transformação não esteja definida na tabela de
conversão Unicode [8].
Propriedade 'text-align'
text-align: left | right | center | justify
Valor padrão: depende de cada browser

Aplicável a: elementos a nível de bloco
Esta propriedade descreve como o texto é alinhado dentro do elemento. O algoritmo de alinhamento
a ser empregado varia em função do browser usado e do idioma empregado.
DIV.center { text-align: center }
Como esta propriedade é herdada, todo elemento a nível de bloco que esteja dentro do elemento
'DIV' que possua a classe 'center' ('CLASS=center') será centralizado. Note que os alinhamentos
dependem da largura do elemento, não da largura do ambiente de exibição. Se o valor 'justify' não é
suportado pelo browser, este irá substituí-lo, normalmente, por 'left' para os idiomas ocidentais.
Núcleo CSS1: Os browsers podem tratar 'justify' tanto como sendo 'left' como 'right', dependendo do
direção de escrita do texto ser da 'esquerda para a direita' ou da 'direita para a esquerda',
respectivamente.
Propriedade; 'text-indent'
text-indent: <length> | <percentage>
Valor padrão: 0
Valores percentuais: referentes à largura do elemento pai
Esta propriedade define o tamanho da indentação (deslocamento para a direita) a ser inserido antes
da primeira linha formatada. O valor pode ser negativo, mas deve obedecer aos limites impostos por
cada browser. Uma indentação não é inserida no meio de um elemento que tenha sido dividido por
outro (como o 'BR' no HTML).
Exemplo:
P { text-indent: 3em }
Propriedade 'line-height'
line-height: normal | <number> | <length> | <percentage>

Valores percentuais: referentes ao tamanho da fonte do próprio elemento
Esta propriedade define a distância entre as bases de duas linhas adjacentes.

Quando um valor numérico é especificado, a altura da linha é obtida multiplicando este valor numérico
pelo tamanho da fonte. Isto difere de um valor percentual no modo como eles são herdados: com o
valor numérico especificado, os elementos subordinados herdam o próprio fator, e não o valor
resultante (como é o caso com unidades de percentagem e outras unidades).
Não são permitidos valores negativos.
Como exemplo, as três atribuições a seguir produzem o mesmo resultado.
DIV { line-height: 1.2; font-size: 10pt } /* número */

DIV { line-height: 1.2em; font-size: 10pt } /* tamanho */
DIV { line-height: 120%; font-size: 10pt } /* percentagem */
Um valor 'normal' ajusta a altura da linha para um valor compatível com a fonte que está sendo
usada. É recomendado que os browsers usem para o valor 'normal' um número entre 1 e 1,2.
Propriedades dos 'Containers'

Estas propriedades definem o tamanho e a posição das áreas retangulares que representam os
elementos. Veja em modelo de formatação exemplos de como utilizar estas propriedades.
Das propriedades que definem as margens dos elementos, a 'margin' atua simultaneamente sobre
todos os lados do elemento considerado, enquanto que as demais propriedades, também
relacionadas com as margens, atuam somente na margem especificada.
As propriedades de espaçamento ('padding') indicam quanto espaço colocar entre as bordas do

elemento e seu conteúdo (seja ele texto ou imagem). A propriedade 'padding' atua sobre os quatro
lados do elemento, ao passo que as demais propriedades de espaçamento agem apenas sobre o
lado especificado.
Cada elemento possui quatro bordas, uma de cada lado, que são definidas por três parâmetros: seu
comprimento, sua cor e seu estilo.
As propriedades 'width' e 'height' agem sobre o tamanho do retângulo que define o elemento, e as
propriedades 'float' e 'clear' podem alterar a sua posição.
Propriedade 'margin-top'
margin-top: <length> | <percentage> | auto
Valor padrão: 0
Valores percentuais: referentes ao tamanho do elemento pai
Esta propriedade define a margem superior de um elemento:
H1 { margin-top: 2em }
Valores negativos são permitidos, mas estão restritos aos limites especificados por cada browser.
Propriedade 'margin-right'
margin-right: <length> | <percentage> | auto
Valor padrão: 0

Esta propriedade define a margem direita de um elemento:
H1 { margin-right: 12.3% }
Propriedade 'margin-bottom'
margin-bottom: <length> | <percentage> | auto
Valor padrão: 0
Esta propriedade define a margem inferior do elemento:
H1 { margin-bottom: 3px }
Propriedade 'margin-left'
margin-left: <length> | <percentage> | auto
Valor padrão: 0
Esta propriedade define a margem esquerda do elemento:
H1 { margin-left: 2em }
Propriedade 'margin'
margin-left: [ <length> | <percentage> | auto ]{1,4}


Esta propriedade é um atalho para definir as quatro outras propriedades em um único lugar da folha
de estilo.
Se forem indicados quatro valores, eles dizem respeito, respectivamente, às margens superior,
direita, inferior e esquerda. Se for fornecido apenas um valor, ele é aplicado às quatro margens. Se
existem dois ou três valores, eles serão tomados na mesma ordem acima, e o(s) valor(es) ausente(s)
será(ão) igual(is) ao do(s) lado(s) oposto(s).
BODY { margin: 2em } /* todas definidas em 2em */

BODY { margin: 1em 2em } /* topo e inferior = 1em, direita e esquerda = 2em */
BODY { margin: 1em 2em 3em } /* topo=1em, direita=2em, inferior=3em, esquerda=2em */
A última atribuição do exemplo acima é equivalente a:
BODY {
margin-top: 1em;
margin-right: 2em;
margin-bottom: 3em;
margin-left: 2em; /* feita igual à margem oposta (direita) */
}
São permitidos valores negativos, mas eles estão sujeitos aos limites impostos por cada browser.
Propriedade 'padding-top'
padding-top: <length> | <percentage>
Valor padrão: 0
Esta propriedade define a área superior de espaçamento.
BLOCKQUOTE { padding-top: 0.3em }
Valores negativos não são admitidos.
Propriedade 'padding-right'
padding-right: <length> | <percentage>
Valor padrão: 0

Esta propriedade define a área direita de espaçamento.
BLOCKQUOTE { padding-right: 10px }
Propriedade 'padding-bottom'
padding-bottom: <length> | <percentage>
Valor padrão: 0
Esta propriedade define a área inferior de espaçamento.
BLOCKQUOTE { padding-bottom: 2em }
Propriedade 'padding-left'
padding-left: <length> | <percentage>
Valor padrão: 0
Esta propriedade define a área esquerda de espaçamento.
BLOCKQUOTE { padding-bottom: 20% }
Propriedade 'padding'
padding: [ <length> | <percentage> ]{1,4}


Esta propriedade é um atalho para a definição das outras quatro propriedades de espaçamento em
um único local da folha de estilo.
Com a definição de quatro valores, eles são aplicados, respectivamente, às áreas superior, direita,
inferior e esquerda. Se apenas um valor for indicado, ele será usado para as quatro áreas. Se forem
fornecidos dois ou três valores, eles serão tomados na mesma ordem acima, e o(s) valor(es)
ausente(s) será(ão) igual(is) ao do(s) lado(s) oposto(s).
O padrão de fundo das áreas de espaçamento é definido pela propriedade 'background'.
H1 {
background: white;
padding: 1em 2em;
}
Este exemplo define os espaçamentos verticais (superior e inferior) em '1em', e os horizontais (direito
e esquerdo) em '2em'. A unidade 'em' é relativa ao tamanho do elemento fonte: '1em' é igual ao
tamanho da fonte em uso.
Não são admitidos valores negativos.
Propriedade 'border-top-width'
border-top-width: thin | medium | thick | <length>

Esta propriedade define a espessura da margem do topo de um elemento. Os valores

correspondentes a cada palavra-chave são dependentes do browser usado, mas a correspondência a
seguir deve ser obedecida: 'thin' <= 'medium' <= 'thick'.
A espessura definida por esta propriedade é mantida ao longo do documento:
H1 { border: solid thick red }

P { border: solid thick blue }
Neste exemplo, 'H1' e 'P' terão a mesma espessura, independente do tamanho da fonte usada em
cada um. Para definir valores relativos, deve ser usada a unidade 'em':
H1 { border: solid 0.5em }
Valores negativos não são aceitos.
Propriedade 'border-right-width'
border-right-width: thin | medium | thick | <length>

Esta propriedade define a espessura da borda direita, sendo equivalente a 'border-top-width'.
Propriedade 'border-bottom-width'
border-bottom-width: thin | medium | thick | <length>

Esta propriedade define a espessura da borda inferior, sendo equivalente a 'border-top-width'.
Propriedade 'border-left-width'
border-left-width: thin | medium | thick | <length>

Esta propriedade define a espessura da borda esquerda, sendo equivalente a 'border-top-width'.
Propriedade 'border-width'
border-width: thin | medium | thick | <length>


Esta propriedade é um atalho para definir as quatro propriedades anteriores em um mesmo local da
folha de estilos.
Podem ser especificados de um a quatro valores, segundo o indicado a seguir:
• um valor: será aplicado a todas as bordas
• dois valores: o primeiro define as bordas superior e inferior, o segundo é aplicado às bordas esquerda e direita
• três valores: o primeiro corresponde ao topo, o segundo determina as bordas direita e esquerda, e o terceiro define a
borda inferior
• quatro valores: são aplicados, respectivamente, às bordas superior, direita, inferior e esquerda
H1 { border-width: thin } /* fina fina fina fina */

H1 { border-width: thin thick } /* fina espessa fina espessa */
H1 { border-width: thin thick medium } /* fina espessa média fina */
H1 { border-width: thin thick medium thin } /* fina espessa média fina */
Valores negativos não são permitidos.
Propriedade 'border-color'
border-color: <color>{1,4}
Valor padrão: o valor definido para a propriedade 'color'

Esta propriedades define a cor das quatro bordas, podendo serem definidos de um a quatro valores,
correspondentes aos mesmos lados da propriedade 'border-width'.
Se nenhuma cor for definida, será usada a cor da propriedade 'color'.
P{
color: black;
background: white;
border: solid;
}
Neste exemplo, a borda será uma linha sólida preta.
Propriedade 'border-style'
border-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset
Valor padrão: none

Esta propriedade define o estilo das quatro bordas de um elemento. Até quatro valores podem ser
definidos, sendo aplicados seguindo a mesma regra mostrada para a propriedade 'border-width'.
#xy34 { border-style: solid dotted }
Neste exemplo, as bordas horizontais serão linhas sólidas ('solid') e as verticais serão linhas
pontilhadas ('dotted').
Como o valor padrão é 'none', as bordas não terão estilos caso esta propriedade não seja
especificada.
Os estilos correspondem à:
none
nenhuma borda é desenhada, não importando o valor de 'border-width'
dotted
linha pontilhada
dashed
linha tracejada
solid
linha sólida
double
linha sólida dupla, onde a soma da espessura das duas linhas e mais o espaço entre ambas deve ser igual ao valor
de 'border-width'
groove
linha em baixo relevo, com as cores baseadas no valor de 'color'
ridge
linha em alto relevo, com as cores baseadas no valor de 'color'
inset
linha 3D em baixo relevo, com as cores baseadas no valor de 'color'
outset
linha 3D em alto relevo, com as cores baseadas no valor de 'color'
Núcleo CSS1: os browsers podem interpretar como 'solid' as propriedades 'dotted', 'dashed', 'double',
'groove', 'ridge', 'inset' e 'outset'.
Propriedade 'border-top'
border-top: <border-top-width> || <border-style> || <color>


Esta propriedade é um atalho para definir a espessura, a cor e o estilo associados a borda superior
de um elemento em um mesmo lugar.
H1 { border-top: thick solid red }
Este exemplo define as características da borda superior do elemento 'H1'. Caso alguma
característica deixe de ser especificada, será adotado seu valor padrão.
H1 { border-top: thick solid }
Como a cor não foi especificada no exemplo acima, será usada a mesma cor definida para o próprio
elemento com a propriedade 'color'.
Note que enquanto a propriedade 'border-style' aceita até quatro valores, esta propriedade aceita
apenas um valor de estilo.
Propriedade 'border-right'
border-right: <border-right-width> || <border-style> || <color>

Esta propriedade refere-se à borda direita, e é similar à 'border-top'.
Propriedade 'border-bottom'
border-bottom: <border-bottom-width> || <border-style> || <color>

Esta propriedade refere-se à borda inferior, e é similar à 'border-top'.
Propriedade 'border-left'
border-left: <border-left-width> || <border-style> || <color>

Esta propriedade refere-se à borda esquerda, e é similar à 'border-top'.
Propriedade 'border'
border: <border-width> || <border-style> || <color>

Esta propriedade é um atalho para definir a mesma espessura, a mesma cor e o mesmo estilo para
as quatro bordas em um único local da folha de estilo. Por exemplo, a primeira atribuição abaixo é
equivalente às outras quatro:
P { border: solid red }

P{
border-top: solid red;
border-right: solid red;
border-bottom: solid red;
border-left: solid red
}
Ao contrário dos atalhos das propriedades 'margin' e 'padding', esta propriedade não permite indicar
valores distintos para as bordas.
Como a especificação das propriedades podem sobrepor características uma das outras, é muito
importante prestar atenção na forma como elas são definidas dentro da folha de estilos. Veja este
exemplo:
BLOCKQUOTE {
border-color: red;
border-left: double
color: black;
}
Neste exemplo, a cor da borda esquerda será preta, enquanto que as demais serão vermelhas. Isto
ocorre porque 'border-left' define o estilo e também a cor.
Note que enquanto 'border-width' aceita até quatro valores para a espessura, esta propriedade
permite a indicação de apenas um.
Propriedade 'width'
width: <length> | <percentage> | auto
Valor padrão: auto

Aplicável a: elementos a nível de bloco e substituídos
Valores percentuais: referentes ao elemento pai
Esta propriedade pode ser usada com elementos de texto, mas é mais útil com elementos
substituídos, tais como as figuras. O elemento será redimensionado para atender ao valor
especificado. Caso a propriedade 'height' esteja especificada como 'auto', o redimensionamento será
proporcional (sem deformação).
IMG.icon { width: 100px }
Se tanto a propriedade 'width' como a 'height' forem especificadas como 'auto', o elemento terá suas
dimensões originais.
Não são aceitos valores negativos.
Veja modelo de formatação para uma descrição sobre o relacionamento entre esta propriedade com
as margens e áreas de espaçamento ('padding').
Propriedade 'height'
height: <length> | auto
Valor padrão: auto

Aplicável a: elementos a nível de bloco e substituídos
Esta propriedade diz respeito à altura do elemento, sendo similar à 'width'.
Núcleo CSS1: os browsers podem ignorar esta propriedade (ou seja, tratá-la como 'auto') quando o
elemento considerado não é um elemento substituído.
Propriedade 'float'
float: left | right | none

Valor padrão: none

Com o valor 'none', esta propriedade faz o elemento ser mostrado onde ele aparece dentro do texto.
Com o valor 'left' o elemento será movido para a esquerda e o texto será disposto do seu lado direito.
O similar ocorre com o valor 'right'. Em qualquer caso, o elemento será tratado como sendo a nível de
bloco. Veja em elementos flutuantes uma descrição completa deste processo.
IMG.icon {
float: left;
margin-left: 0;
}
Este exemplo coloca todos os elementos 'IMG' com 'CLASS=icon' alinhados ao lado esquerdo do seu
elemento pai.
Propriedade 'clear'
clear: none | left | right | both
Valor padrão: none

Esta propriedade indica se um elemento permite a existência de elementos flutuantes ao seu redor.
Mais especificamente, o valor desta propriedade indica os lados que não aceitam elementos
flutuantes.
Um valor 'left' coloca o elemento abaixo de qualquer elemento flutuante que exista no seu lado
esquerdo. O valor 'none' permite elementos flutuantes em todos os lados. Exemplo:
H1 { clear: left }
Propriedades de Ordenação
Estas propriedades classificam elementos em mais categorias que as normalmente usadas em
HTML.
A propriedade 'list-style' descreve como os itens de uma lista são formatados. Ela pode ser usada em
qualquer elemento, e será herdada pelos elementos das hierarquias inferiores da lista. Entretanto,
terá efeito apenas em elementos com a propriedade 'display' definida como 'list-item'. Em HTML é o
que acontece com o elemento 'LI'.
Propriedade 'display'
display: block | inline | list-item | none
Valor padrão: block

Esta propriedade define se o elemento será ou não mostrado, e como será visualizado no ambiente
de exibição (que pode ser uma impressora, um monitor, etc).
Um valor 'block' coloca o elemento em uma nova área de exibição (um retângulo que contem o
elemento). Este retângulo será posicionado de acordo com o descrito em modelo de formatação.
Normalmente, os elementos tipo 'H1' e 'P' são elementos a nível de bloco. O valor 'list-item' produz
efeito similar à 'block', exceto pelo fato de ser adicionado um marcador de lista. Em HTML, 'LI' é um
exemplo deste caso.
O valor 'inline' resulta em um novo retângulo interno à linha de exibição do elemento. Este retângulo é
formatado de acordo com o seu conteúdo. Caso seja texto ele poderá ocupar várias linhas, sendo
criado um retângulo para cada linha. As propriedades das margens, bordas e áreas de espaçamento
são aplicáveis ao elemento interno, mas não terão qualquer efeito nas quebras de linha.
Já o valor 'none' desativa a exibição do elemento, inclusive dos seus elementos filhos.
P { display: block }
EM { display: inline }
LI { display: list-item }
IMG { display: none }
Esta última atribuição desligada a exibição de imagens.

O valor inicial da propriedade 'display' é 'block', mas os browsers normalmente possuem valores
padrões para todos os elementos HTML que seguem o processo sugerido na especificação HTML [2].
Núcleo CSS1: os browsers podem ignorar a propriedade 'display' e usar apenas os seus valores
padrões internos. Veja normas de conformidade CSS1.
Propriedade 'white-space'
white-space: normal | pre | nowrap

Esta propriedade determina como os espaços em branco são tratados dentro de um elemento: pela
maneira 'normal' (são agrupados em um único espaço), pela mesma forma do elemento 'PRE'
(respeitando todos os espaços individualmente) ou pela forma 'nowrap' (onde a mudança de linha na
área de exibição ocorre apenas com o elemento 'BR').
PRE { white-space: pre }

P { white-space: normal }
Embora o valor padrão desta propriedade seja 'normal', os browsers normalmente possuem valores
padrões para todos os elementos HTML conforme o sugerido na especificação HTML [2].
Núcleo CSS1. Os browsers podem ignorar a propriedade 'white-space' e usar seus padrões internos.
Propriedade 'list-style-type'
list-style-type: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-

alpha | none
Valor padrão: disc

Aplicável a: elementos com valor 'list-item' na propriedade 'display'
Esta propriedade define a aparência do marcador de lista quando a propriedade 'list-style-image' for
'none' ou se a imagem indicada pelo URL não estiver disponível.
OL { list-style-type: decimal } /* 1 2 3 4 5 etc. */

OL { list-style-type: lower-alpha } /* a b c d e etc. */
OL { list-style-type: lower-roman } /* i ii iii iv v etc. */
Propriedade 'list-style-image'
list-style-image: <url> | none
Valor padrão: none


Esta propriedade define a imagem que será usada como um marcador de lista.
UL { list-style-image: url(http://png.com/ellipse.png) }
Propriedade 'list-style-position'
list-style-position: inside | outside
Valor padrão: outside

Com esta propriedade é definida a maneira como o marcador de lista é posicionado em relação ao
conteúdo da lista. Para um exemplo de formatação, veja formatação de elementos de lista.
Propriedade 'list-style'
list-style: [disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-

alpha | none] || [inside | outside] || [<url> | none]

Esta propriedade é um atalho para a definir as propriedades anteriores em um único local da folha de
estilo.
UL { list-style: upper-roman inside }

UL UL { list-style: circle outside }
LI.square { list-style: square }
A definição de 'list-style' diretamente nos elementos 'LI' pode provocar resultados inesperados:
OL.alpha LI { list-style: lower-alpha }
UL LI { list-style: disc }
</STYLE>
<BODY>
<OL CLASS=alpha>
<LI>level 1
<UL>
<LI>level 2
</UL>
</OL>
</BODY>
Como o grau de importância (como definido em ordem de encadeamento) é maior para a primeira
atribuição deste exemplo, ela irá se sobrepor à segunda em todos os elementos 'LI', e será usado
apenas o estilo 'lower-alpha'. Portanto, é aconselhável definir a propriedade 'list-style' somente em
elementos marcados como 'list-item':
OL.alpha { list-style: lower-alpha }

UL { list-style: disc }
Neste exemplo, a herança irá transferir o 'list-style' dos elementos 'OL' e 'UL' para os elementos 'LI'.
Um endereço URL pode ser combinado com qualquer outro valor:
UL { list-style: url(http://png.com/ellipse.png) disc }
No exemplo acima, o valor 'disc' será usado quando a imagem não estiver disponível.
Unidades
Unidades de Medidas
O formato de uma unidade de medida é constituído por um sinal positivo ou negativo opcional ('+' ou
'-', sendo o padrão '+') seguido imediatamente por um número (com ou sem ponto decimal - não use
vírgulas), com todo o conjunto imediatamente seguido por um identificador de unidade (um código
com duas letras). Este identificador é opcional caso o número seja '0'.
Existem dois tipos de unidades de comprimento: as relativas e as absolutas. As relativas especificam

um número em relação a algum outro. O uso de unidades relativas facilitam o redimensionamento da
exibição do elemento quando ocorre mudança de mídia de exibição (por exemplo, de um monitor para
uma impressora). O emprego de unidades percentuais (vistas a seguir) e palavras-chave (por
exemplo, 'x-large') oferecem vantagens similares.
Estas unidades relativas são suportadas:
H1 { margin: 0.5em } /* ems, a altura do elemento fonte */

H1 { margin: 1ex } /* x-height, a altura da letra 'x' */
P { font-size: 12px } /* pixels */
As unidades relativas 'em' e 'ex' tomam como base o tamanho da fonte do próprio elemento. A única
exceção a esta regra é a propriedade 'font-size', onde estas unidades são relativas ao tamanho da
fonte do elemento pai.
A unidade 'px', pixel, usada no exemplo acima, é função da resolução da área de exibição,
normalmente um monitor.
Os elementos filhos herdam os valores calculados, não os valores indicados:
BODY {
font-size: 12pt;
text-indent: 3em; /* ou seja, 36pt */
}
H1 { font-size: 15pt }
Neste exemplo, o valor de 'text-indent' de 'H1' é 36pt, não 45pt.
O emprego de valores absolutos é conveniente apenas quando as dimensões físicas da mídia de

saída são bem conhecidas. As seguintes unidades são aceitas:
H1 { margin: 0.5in } /* polegadas, 1in = 2.54cm */
H2 { line-height: 3cm } /* centímetros */
H3 { word-spacing: 4mm } /* milímetros */
H4 { font-size: 12pt } /* pontos, 1pt = 1/72 in */

H4 { font-size: 1pc } /* picas, 1pc = 12pt */
Unidades Percentuais
O formato de um valor percentual é composto de caracter de sinal (positivo ou negativo, '+' ou '-',
sendo '+' o padrão) seguido imediatamente por um número (com ou sem ponto decimal, não use
vírgulas) seguido, também imediatamente, pelo símbolo '%'.
Os valores percentuais sempre são relativos a algum outro valor, por exemplo, uma unidade de
medida. Cada propriedade que permita o uso de unidades percentuais também define a qual valor
esta unidade se refere. Muito freqüentemente é o tamanho da fonte do próprio elemento:
P { line-height: 120% } /* 120% do tamanho da fonte do elemento */
Em todas as propriedades herdadas na CSS1, se o valor for especificado como uma percentagem,
então os elementos filhos herdarão o valor resultante, não o valor da percentagem.
Unidades para Cores

Uma cor é indicada ou por uma palavra-chave ou por um código RGB.
As palavras chaves sugeridas para indicar cores são: 'aqua' , 'black' , 'fuchsia' , 'gray', 'green', 'lime',
'maroon', 'navy', 'olive', 'purple', 'red', 'silver', 'teal', 'white' e 'yellow'. Estas 16 cores foram tiradas da
paleta de cores VGA do Windows, e seus valores RGB são estão definidos nesta especificação.
BODY {color: black; background: white }

H1 { color: maroon }
H2 { color: olive }
A codificação RGB é usada para a indicação de cores no formato numérico. Todas as atribuições a
seguir indicam a mesma cor (vermelho):
EM { color: #F00 } /* #rgb */

EM { color: #FF0000 } /* #rrggbb */
EM { color: rgb(255,0,0) } /* inteiro entre 0 - 255 */
EM { color: rgb(100%, 0%, 0%) } /* percentual entre 0.0% - 100.0% */
O formato hexadecimal consiste do símbolo '#' seguido imediatamente por 3 ou 6 caracteres

hexadecimais. A notação de 3 dígitos (#rgb) é convertida pelo browser para o formato de 6 dígitos
(#rrggbb) pela duplicação de cada caracter, não pela inserção de zeros. Por exemplo, #FB0 torna-se
#FFBB00. Isso garante que a cor branca (#FFFFFF) possa ser indicada com a notação simplificada
(#FFF), além de remover qualquer dependência da profundidade de cores adotada pelo monitor em
uso.
O formato de um valor RGB é 'rgb(' seguido três números separados por vírgulas. Quaisquer destes
três números podem estar na faixa de 0-255, ou serem três valores percentuais entre 0% e 100%.
Finalmente a notação é terminada por um ')'. São permitidos espaços em branco ao redor dos
números.
Valores fora da faixa serão truncados. Desde modo, as três atribuições a seguir são equivalentes:
EM { color: rgb(255,0,0) } /* valor inteiro entre 0 - 255 */

EM { color: rgb(300,0,0) } /* truncado para (255,0,0) */
EM { color: rgb(110%, 0%, 0%) } /* truncado para (100%, 0%, 0%) */
As cores RGB estão especificadas no ambiente sRGB. Podem ocorrer variações entre os browsers
na reprodução destas cores, mas o emprego deste ambiente fornece uma definição mensurável, não
ambígua e objetiva, de como as cores devem ser geradas - de acordo com um padrão internacional.
Os browsers podem otimizar os recursos usados na produção das cores empregando o método de
correção "gamma". sRGB especifica um padrão "gamma" de 2,2 a ser atendido sob condições bem
definidas de visualização. Os browsers devem produzir as cores definidas nas folhas de estilos CSS,
em um certo dispositivo de saída (monitor, por exemplo) de maneira tal que seja atingido este padrão
2,2 (Todo este processo é aplicado apenas às cores indicadas pelas folhas de estilos CSS: as
imagens coloridas são reproduzidas com base nas suas próprias informações internas de composição
de cores.
URL
Um URL é identificado pela notação:
BODY { background: url(http://www.bg.com/pinkish.gif) }
O formato de um valor URL é 'url(' seguido por espaços em branco opcionais seguidos por apóstrofe
(') ou aspas duplas ("), também opcionais, seguidos pelo URL em si seguido novamente por pelo
apóstrofe ou aspas e espaços adicionais opcionais e terminado por ')'.
Parênteses, vírgulas, espaços, apóstrofes e aspas internos ao URL devem ser precedidos por uma
barra invertida (\).
Um URL parcial é interpretado como relativo à localização da folha de estilos, não à localização do
documento:
BODY { background: url(yellow) }

1
Apostila de HTML
e CSS
2
HTML básico 1 ........................................................................................................ 4

Definição.............................................................................................................. 4
Requisitos para o desenvolvimento de uma página WEB ................................... 4
TAGs ................................................................................................................... 4
1.1 Iniciando um documento ........................................................................... 5
<HTML> … </HTML>....................................................................................... 5
<HEAD> ... </HEAD> ....................................................................................... 5
<TITLE> ... </TITLE> ....................................................................................... 5
<BODY> ... </BODY>....................................................................................... 5
1.2 Trabalhando com textos............................................................................ 8
1.2.1 Títulos e Subtítulos.................................................................................. 8
1.2.2 Estilos de texto................................................................................. 10
1.2.3 Fontes.............................................................................................. 12
1.3 Quebras de linha ................................................................................. 14
1.4 Linhas Horizontais ............................................................................... 14
2. Caracteres Especiais ........................................................................................ 16
3. Imagens............................................................................................................. 17
4. LINKS ................................................................................................................ 19
4.1 Links para o mesmo diretório....................................................................... 19
4.2 Links para outro diretório ............................................................................. 20
4.3 Parâmetro NAME......................................................................................... 21
5. Listas ................................................................................................................. 22
5.1 - Criando listas ordenadas ....................................................................... 22
5.2 - Criando listas não ordenadas ................................................................ 23
6. Tabelas.............................................................................................................. 25
6.1 - Construindo tabelas com o elemento TABLE ............................................ 25
6.1.1 - O título da tabela (elemento CAPTION).............................................. 25
6.1.2 - TABLE HEADINGS (elemento TH) ..................................................... 25
6.1.3 - TABLE DATA (elemento TD) .............................................................. 25
6.1.4 - END OF TABLE ROW (elemento TR)................................................. 26
6.2 - Atributos para a tabela............................................................................... 26
6.2.1 - BORDER............................................................................................. 26
6.2.2 - ALIGN ................................................................................................. 27
6.2.3 - VALIGN............................................................................................... 28
6.2.4 – CELLSPACING .................................................................................. 28
6.2.5 – CELLPADDING .................................................................................. 29
6.2.6 – ROWSPAN......................................................................................... 29
6.2.7 – COLSPAN .......................................................................................... 30
6.2.8 – Largura da célula................................................................................ 31
6.2.9 – Cor de fundo das células.................................................................... 31
7. Formulários ....................................................................................................... 33
7.1 - Construindo formulários com o FORM ...................................................... 33
7.2 - Atributos para FORM................................................................................. 33
7.2.1 – GET.................................................................................................... 33
7.2.2 – POST ................................................................................................. 33
7.2.3 – INPUT ................................................................................................ 33
3
7.2.3.1 - Tipos de elementos TYPE ............................................................ 34

7.2.3.1.1 - TYPE="RADIO"...................................................................... 34
7.2.3.1.2 - TYPE="PASSWORD" ............................................................ 35
7.2.3.1.3 - TYPE="CHECKBOX"............................................................. 35
7.2.3.1.4 - TYPE="SUBMIT" ................................................................... 36
7.2.3.1.5 - TYPE="RESET" ..................................................................... 36
7.2.4 – TEXTAREA ........................................................................................ 36
7.2.5 – SELECT ............................................................................................. 37
7.2.6 – Exemplo completo de formulário ........................................................ 37
8. Frames .............................................................................................................. 40
8.1 - Estrutura .................................................................................................... 40
8.2 - Sintaxe....................................................................................................... 40
8.3 – FRAMESET .............................................................................................. 41
8.3.1 - ROWS................................................................................................. 41
8.3.2 – COLS ................................................................................................. 42
8.4 – FRAME ..................................................................................................... 42
8.4.1 – SRC.................................................................................................... 43
8.4.2 - NAME.................................................................................................. 43
8.4.3 – SCROLLING ...................................................................................... 43
8.4.4 – NORESIZE ......................................................................................... 44
8.4.5 – TARGET............................................................................................. 45
8.5 – BORDER .................................................................................................. 45
9. Tabelas de Cores .............................................................................................. 47
10. CSS ................................................................................................................. 48
10.1 O que é CSS?............................................................................................ 48
10.2 Como criar estilos ...................................................................................... 48
10.3 Tipos de Folhas de Estilo........................................................................... 49
10.3.1 Estilos Externos................................................................................... 50
10.3.2 Estilos Incorporados............................................................................ 50
10.3.3 Estilos Inline ........................................................................................ 51
10.4 Tags Personalizadas ................................................................................. 51
10.4.1 Utilizando a TAG <DIV> ...................................................................... 53
10.4.2 Utilizando a TAG <SPAN> .................................................................. 53
10.5 Atalhos e atributos de CSS........................................................................ 55
10.5.1 Atalhos de CSS ................................................................................... 55
10.5.2 Atributos de CSS................................................................................. 55
4
HTML básico 1
Definição
HTML significa Hyper Text Markup Language e é a linguagem de marcação de

hipertexto, ou seja, é a linguagem na qual são escritas as páginas da Web,
interpretada pelo navegador.
As informações estão ligadas na forma de páginas ligadas entre si. A página é
transferida de um computador remoto para o usuário, onde o browser faz o
trabalho de interpretar os códigos naquele documento e mostra a página que o
usuário vê. A Web está estruturada em dois princípios básicos: HTTP(Hiper Text
Transfer Protocol) e HTML (Hiper Text Markup Language).
HTTP é o protocolo de transferência de hipertexto, ou seja, é o protocolo que
permite a navegação na Web, com o simples clicar do mouse sobre o texto (ou
imagem) que esteja associado a outro link.
Requisitos para o desenvolvimento de uma página WEB
Conhecer a linguagem HTML para escrever o código fonte de sua página;

Editor de texto para gerar o seu código fonte (bloco de notas, Front Page,
Dremweaver, entre outros);
Um navegador de internet (browser) para visualizar as suas páginas
(Internet Explorer, Netscape, etc).
TAGs
Os comandos HTML são chamados de TAGs, compreendem de marcas padrões

que são utilizadas para fazer indicações a um browser.
Assim como em outras linguagens, os comandos têm uma sintaxe própria, e
seguem algumas regras:
As TAGs aparecem sempre entre sinais de “menor que” (<) e “maior que”
(>);
Geralmente são utilizadas aos pares, sendo que a TAG de finalização de
um comando qualquer é finalizada com a precedência de uma barra (/).
5
Exemplos:
TAG único:
<br>
TAG duplo:
<center> xxx </center>
1.1 Iniciando um documento
Todo o documento HTML fica contido entre os TAGS: <HTML> e </HTML>.

Uma página HTML possui três partes básicas: estrutura principal, um cabeçalho e
um corpo de página.
Possui uma estrutura dividida em 4 TAGs básicas:
<HTML> ... </HTML>

<HEAD> ... </HEAD>
<TITLE> ... </TITLE>
<BODY> ... </BODY>
<HTML> … </HTML>
São usados para delimitar os comandos HTML, indicam o início e o fim de um

documento.
<HEAD> ... </HEAD>
Usado para indicar parâmetros de configuração do documento, também utilizado

para exibir o título na barra de títulos do browser.
<TITLE> ... </TITLE>
Indica o título do documento para o browser. Esta TAG deve estar sempre dentro
das TAGs <HEAD> </HEAD>.
<BODY> ... </BODY>
Envolvem a seção de corpo do documento. Aqui fica o conteúdo principal da

Home Page.
6
Opcionalmente podemos indicar uma cor para o fundo da página, usando a opção
BGCOLOR, ou um arquivo de imagem para formar o fundo, usando a opção
BACKGROUND.
Iniciaremos a nossa primeira página editando o código no Bloco de Notas.
Siga os passos abaixo:
1. Crie uma pasta chamada OrgaoColegiado.

2. Clique em Arquivo/Novo/Documento de Texto
3. Nomeie o arquivo como index.html.
4. Abra o arquivo, você irá notar que a página está em branco, pois ainda não
escrevemos nenhum código.
5. Clique com o botão direito do mouse sobre o arquivo e clique em Editar, ele
irá abrir o bloco de notas com seu conteúdo vazio.
6. Copie e cole o exemplo abaixo, salve o arquivo .txt e feche.
7. Depois abra novamente o arquivo HTML.
Exemplo com cor de fundo na página:
<html>
<head>
<title>
Curso de HTML
</title>
</head>
<body bgcolor="green" >
Corpo da página HTML com cor de fundo.
</body>
</html>
7
Agora substitua o código acima pelo exemplo abaixo seguindo os passos 5, 6 e 7.
Exemplo com imagem de fundo na página:
<html>
<head>
<title>
Curso de HTML
</title>
</head>
<body background="fundo.gif" >
Corpo da página HTML com imagem de fundo.
</body>
</html>
8
1.2 Trabalhando com textos
No corpo do documento é onde estará localizado o título e subtítulos, texto,

imagens, ligações com outras páginas, etc. Nesta seção veremos como trabalhar
com os textos.
1.2.1 Títulos e Subtítulos
Para demarcar títulos e subtítulos, use os TAGs de HEADER (H1 a H6),

juntamente com a opção CENTER.
Veja alguns exemplos:
Texto inserido entre <H1> e </H1>:

9
Texto inserido entre <H3><CENTER> e </CENTER></H3> :
Observações: A TAG CENTER têm a função de deixar o cabeçalho ou texto

centralizado.
Exemplo:
Crie um novo arquivo chamado ExemploTitulo.html e insira o código abaixo.
<html>
<head>
<title>
Curso de HTML
</title>
</head>
<body>
<H1>Título com H1: Órgãos Colegiados</H1>
<H6><CENTER>Título com H6 centralizado: Órgãos
Colegiados</CENTER></H6>
</body>
</html>
10
1.2.2 Estilos de texto
Além da TAG <CENTER>...</CENTER> existem as seguintes TAGs

que podem ser utilizadas para a formatação de um texto.
<B>...</B>
Aplica o estilo negrito.
<I>...</I>
Aplica o estilo itálico.
<U>...</U>
Aplica o estilo sublinhado (nem todos os browser o reconhecem).
<SUP>...</SUP>
Faz com que o texto fique sobrescrito.
<SUB>...</SUB>
Faz com que o texto fique subscrito.
<PRE>...</PRE>
Utiliza a pré-formatação, ou seja, deixa o texto da maneira em que foi
digitado.
11
<P>
A TAG responsável pela quebra de parágrafos é a <P> que finaliza o
parágrafo e insere automaticamente uma linha em branco entre parágrafos.
Sintaxe do comando:
<P align=”posição”> Texto do parágrafo.
Posição pode ser:

Left: alinhamento à esquerda.
Center: centralizado
Right: alinhamento à direita
Exemplo:
Crie um novo arquivo com o nome EstiloTexto e insira o código abaixo:
<html>
<body>
<title>Curso de HTML</title>
<B>Estilo negrito.</B>
<br>
<I>Estilo itálico.</I>
<br>
<U>estilo sublinhado (nem todos os browser o

reconhecem)</U>
<br>
<SUP>Texto sobrescrito.</SUP>
<br>
<SUB>Texto subscrito.</SUB>
<br>
<PRE>Este é um pequeno texto

com estilo
pré-formatado.</PRE>
<p align="center"> Este é um exemplo do primeiro

parágrafo centralizado.
<p> Este é um exemplo do segundo parágrafo.
12
</body>
</html>
1.2.3 Fontes
Para inserir em sua página um texto com fontes de tamanhos, cores e tipos
diferentes utilizamos a TAG <FONT> ... </FONT>.
Sintaxe do comando:
<FONT size=”n” face=”nome” color=”cor”>
TEXTO
</FONT>
Onde:
SIZE=“n” : n varia de 1 a 7 e 3 é o valor padrão da maioria dos
navegadores;
FACE=”nome” : nome da fonte a ser utilizada (Arial, Tahoma, etc);
COLOR=”cor” : cor da fonte definida em hexadecimal, ou através de
um nome pré-definido de cores. Veja no capítulo 9 desta apostila.
Exemplo:
Crie um arquivo chamado Fontes.html e insira o código abaixo:
<html>
13
<body>
<FONT size="1" face="Tahoma" color="red">

Texto com cor vermelha
</FONT>
<br><br>
<FONT size="2" face="Arial" color="green">

Texto com cor verde
</FONT>
<br><br>
<FONT size="3" face="Tahoma" color="blue">

Texto com cor azul
</FONT>
<br><br>
<FONT size="4" face="Tahoma" color="orange">

Texto com cor laranja
</FONT>
<br><br>
<FONT size="5" face="Tahoma" color="pink">

Texto com cor pink
</FONT>
<br><br>
<FONT size="6" face="Tahoma" color="#4F2F4F">

Texto com cor violeta
</FONT>
<br><br>
<FONT size="7" face="Tahoma" color="#FF00FF">

Texto com cor magenta
</FONT>
<br><br>
</body>
</html>
14
1.3 Quebras de linha
A tag <BR> faz a quebra de linha sem acrescentar espaços extras entre linhas.
Finaliza a linha de texto e insere automaticamente uma outra linha em branco.
Não precisa ser finaliza com </BR>.
1.4 Linhas Horizontais
Desenha uma linha horizontal no documento.

Não precisa ser finalizada com </HR>.
Sintaxe:
<HR width=”n%” align=”posição” size=”n” color=”#cor”

noshade>
Atributos:
SIZE: Define a espessura, em pixels, da linha.

WIDTH: Define a largura da linha, o que pode ser feito em pixels
(número absoluto) ou em percentual da tela (com o símbolo de %)
ALIGN: Alinhamento, como o que tem sido usado, pode ser LEFT,
RIGHT e CENTER, ou seja, esquerda, direita e ao centro,
respectivamente.
15
NOSHADE: Linha sem sombra. O padrão é a linha sombreada,

utilizando esse atributo temos uma linha sem sombra.
Exemplo:
Crie um arquivo chamado LinhaHorizontal.html e insira o código abaixo:
<html>
<body>
Primeiro exemplo com a linha horizontal

<HR width="100%" align="left" size="2" color="silver" >
<br>
<center>Segundo exemplo com a linha horizontal</center>

<HR width="70%" align="center" size="3" color="blue" >
<br>
Terceiro exemplo com a linha horizontal

<HR width="30%" align="center" size="5" color="red" noshade>
<br>
</body>
</html>
16
2. Caracteres Especiais
Á Á á á Â &Acirc

â â À À à à
Å Å å å Ã Ã
ã ã Ä Ä ä ä
Æ Æ æ æ É É
é &eacute Ê Ê ê ê
È È è è Ë Ë
ë ë Ð Ð ð ð
Í Í í &iacute Î Î
î î Ì Ì ì ì
Ï Ï ï ï Ó Ó
ó ó Ô Ô ô &ocirc
Ò Ò ò ò Ø Ø
ø ø Õ Õ õ õ
Ö Ö ö ö Ú Ú
ú ú Û Û û û
Ù Ù ù ù Ü Ü
ü ü Ç Ç ç ç
Ñ Ñ ñ ñ < <
> > & & " "
® ® © © Ý Ý
ý ý Þ Þ þ þ
ß ß º º ª &170;
¹ ¹ ² ² ³ ³
ƒ † ‡
‰ ¢ ¢ £ £
« « ± ± » »
· · ¼ ¼ ½ ½
¾ ¾ ¿ ¿ × ×
÷ ÷ ¡ ¡ ¤ ¤
17
3. Imagens
Para inserir uma imagem em uma página web utilizamos o comando, tag,
<img src> e seus atributos. Os formatos mais usados são o GIF e o JPG, ambos
com compactação de pixels.
Sintaxe:
<IMG SRC="endereço da imagem” WIDTH=”n%” HEIGHT=”n%”

ALIGN=”posição” ALT=”texto”>
Atributos:
WIDTH: Define a largura da imagem, o que pode ser feito em pixels

(número absoluto) ou em percentual da tela (com o símbolo de %).
HEIGHT: Define a altura da linha, o que pode ser feito em pixels
(número absoluto) ou em percentual da tela (com o símbolo de %).
ALIGN: Alinhamento da imagem pode ser, LEFT, RIGHT e CENTER,
ou seja, esquerda, direita e ao centro, respectivamente.
ALT: texto que irá aparecer ao passar o mouse sobre a imagem ou
texto que surgirá caso a imagem não possa ser visualizada.
BORDER: Especificação da largura da borda da imagem. Valor em
pixel.
VSPACE: Para especificar o espaço que deve ser deixado acima e
abaixo da imagem. Valor em pixel.
HSPACE: Especifica o espaço que deve ser deixado nas laterais da
imagem. Valor em pixel.
O único obrigatório é o src.
Ex.:
Crie um arquivo chamado Imagem.html e insira o código abaixo:
<html>
<body>
<IMG SRC="img/bullet.gif" ALIGN="left" ALT="Imagem Bullet">

<font size="3" face="arial" color="blue">Esta é a nossa
primeira imagem inserida.</font>
<br><br>
18
<font size="4" face="Courier New" color="orange">Abaixo segue

mais imagens na página.</font>
<br><br>
<IMG SRC="img/calendario.gif" ALIGN="left" ALT="Calendário">

<font size="3" face="arial" color="black">Calendário.</font>
<br><br>
<IMG SRC="img/search.gif" ALIGN="left" ALT="Buscar">

<font size="3" face="arial" color="black">Buscar.</font>
<br><br>
<IMG SRC="img/salvar.gif" ALIGN="left" ALT="Salvar">

<font size="3" face="arial" color="black">Salvar.</font>
<br><br>
</body>
</html>
19
4. LINKS
O principal poder do HTML vem da capacidade de interligar partes de um texto,

imagens a outros documentos.
A interligação entre documentos não se restringe somente às ligações com outras
páginas. Em páginas muito longas onde um assunto tem vários tópicos, podemos
utilizar índices onde os links têm a função de interligar os tópicos de um texto e
que com apenas um clique em um dos tópicos do índice, o item é exibido.
4.1 Links para o mesmo diretório
Você só precisa especificar o nome do arquivo que será chamado e a sua

extensão.
Sintaxe:
<A HREF = “nomeDoArquivo.extensão”>

Texto ou imagem
</A>
Onde:
A: abertura da TAG de link;
HREF=”nomeDoArquivo.extensão”: deve ser informado o nome
completo do arquivo que será acessado;
Texto ou imagem: que servirá como link;
/A: encerra a TAG de link.
Exemplo:
Edite o primeiro arquivo que criamos index.html.

Substitua o código pelo o que está abaixo:
<html>
<head>
<title>
Curso de HTML
</title>
</head>
<body >
<h1><font face="arial" color="orange">MENU</font></h1>
<HR width="100%" align="left" size="2" color="silver" >
20
<A HREF = "EstiloTexto.html">Estilo de Texto</A>

<br>
<A HREF = "ExemploTitulo.html">Títulos e Subtítulos</A>
<br>
<A HREF = "LinhaHorizontal.html">LinhaHorizontal</A>
<br>
<A HREF = "Fontes.html">Fontes</A>
<br>
<A HREF = "Imagem.html">Imagem</A>
</body>
</html>
4.2 Links para outro diretório
Para criar links para uma página localizada em outros diretórios é necessário
indicar o caminho completo do arquivo. Para a WEB isto tem uma forma um pouco
diferente do Windows e do DOS, veja:
• A barra utilizada para separar os diretórios é a barra convencional (/);

• O ponto de partida para localizar um arquivo em outro diretório é o
atual;
• Para baixar um nível deve utilizar os sinais “../”.
Exemplo:
21
<A HREF=”../matricula/CadastraAluno.html” >

Cadastro de Aluno
</A>
4.3 Parâmetro NAME
O parâmetro NAME serve para marcar um ponto para possíveis desvios. Quando
desviamos para um determinado ponto dentro de um documento, indicamos este
nome com um "#". Por exemplo:
<A NAME="AQUI">Aqui é um ponto para desvios</A>...

<A HREF="#AQUI">Desvia para o ponto "AQUI"</A>
22
5. Listas
5.1 - Criando listas ordenadas
Listas ordenadas são também denominadas listas numeradas, pois, quando um

navegador encontra uma TAG, iniciando uma lista ordenada, ele passa a mostrar
cada item utilizando números, como 1, 2, 3, e assim sucessivamente.
Listas ordenadas são iniciadas pela TAG <OL>.
Cada item utiliza a TAG <LI>.
Finalmente, </OL>.
Sintaxe:
<OL TYPE=”formato” START=”n”>

<LI> Tópico 1
<LI> Tópico 2
<LI> Tópico n
</OL>
Onde:
<OL>: início da lista numerada;
TYPE=”formato”: o formato da numeração pode ser:
1: lista numérica (não é necessário ser definido);
A: lista alfabética com letras maiúsculas;
A: lista alfabética com letras minúsculas;
I: Lista numérica com números romanos maiúsculos;
I: lista numérica com números romanos minúsculos;
START=”n”: o valor inicial de uma lista numerada;
<LI>: tópicos da lista;
</OL>: fim da lista numerada;
Exemplo:
Crie um arquivo chamado Listas.html e insira o código abaixo:
<html>
<body>
<center><h1>Listas Ordenadas</h1></center>
<h3>Cursos</h3>
23
<OL>
<LI>Graduação
<LI>Pós-Graduação Lato Sensu
<LI>Cursos de Pós-Graduação Stricto Sensu
</OL>
</body>
</html>
5.2 - Criando listas não ordenadas
Listas não ordenadas são muito parecidas com as ordenadas. A única diferença é
o fato de elas não definirem explicitamente uma ordem, como é no caso as
numeradas. Eles são formados por símbolos, que podem ser bola, quadrado, e
uma bola vazia. Elas são iniciadas com a TAG <UL> e são respectivamente
terminadas com </UL>. E seus elementos são que nem as numeradas: com <LI>.
Sintaxe:
<UL TYPE=”formato”>
<LI> Tópico 1
<LI> Tópico 2
<LI> Tópico 3
</UL>
24
Onde:
<UL> : Início da lista pontuada;
TYPE=”formato”: o formato do marcador pode ser:
disc: o marcador é um ponto (padrão utilizado pelos
navegadores, não precisa indicar);
square: o marcador é um quadrado;
circle: o marcador é um ponto.
<LI>: tópicos da lista, não é necessário encerrar a TAG;
</UL>: fim da lista pontuada
Exemplo:
Acrescente o código abaixo no arquivo Listas.html:
<br>
<center><h1>Listas Não Ordenadas</h1></center>
<h3>Membro da Comunidade Acadêmica</h3>
<UL TYPE = “disc”>
<LI>Aluno
<LI>Docente
<LI>Técnico Administrativo
</UL>
25
6. Tabelas
Tabelas correspondem a um ótimo formato para originar informações, e é por essa
razão que eles foram acrescentados à linguagem HTML.
6.1 - Construindo tabelas com o elemento TABLE
A TAG <TABLE> é utilizada para a representação de dados tabulares. A estrutura

e o conteúdo da tabela devem ficar dentro das TAGs <TABLE> </TABLE>
6.1.1 - O título da tabela (elemento CAPTION)
A TAG <CAPTION> especifica o título de uma tabela. Por exemplo:
<CAPTION>Notas da primeira avaliação</CAPTION>
6.1.2 - TABLE HEADINGS (elemento TH)
A TAG <TH> é usada para especificar as células de cabeçalho da tabela. Essas

células são diferentes das outras, pois seu conteúdo aparece geralmente em
negrito. O elemento TH pode ser apresentado sem conteúdo algum: isso
corresponde a uma célula em branco. As tabelas podem ainda conter mais de um
TH para uma dada coluna, ou linha, ou simplesmente não conter nenhum
elemento TH, isto é, não conter em nenhuma célula em destaque. O TAG dela é:
<TH>texto em destaque</TH>
Observações: Elas devem ficar, assim como todas, dentro da TAG <TABLE>.
6.1.3 - TABLE DATA (elemento TD)
A TAG <TD> especifica a células de dados de uma tabela. Por se tratar de dados
comuns (e não cabeçalhos), essas células possuem seu conteúdo escrito em
fonte normal, sem nenhum destaque e alinhamento à esquerda. Assim como o
TH, pode-se construir células em branco, usando o elemento TD, como no
exemplo a seguir:
<TD>Células de dados</TD>
Observações: A TAG de terminação, <TD>, também é opcional.

26
6.1.4 - END OF TABLE ROW (elemento TR)
A TAG <TR> indica o início de uma linha na tabela. Cada linha da tabela pode
conter várias células, e, portanto, é necessário que se faça uso de uma marcação
que indique exatamente o ponto de quebra de uma linha e início de outra. Toda
linha deve terminar com um </TR>.
6.2 - Atributos para a tabela
As marcações das tabelas podem apresentar resultados diferentes, se

acompanhadas de alguns atributos. Os principais são:
6.2.1 - BORDER
Um atributo opcional para ser usado com TABLE é o atributo BORDER. Se ele
estiver presente, a tabela será formatada com linhas de borda.
Atenção: Todas as explicações acima como as que estão por vir, foram feitas,
para que você possa saber o que significa a TAG em questão.
Exemplo:
<TABLE BORDER>
<CAPTION> Nota da primeira avaliação </CAPTION>
<TD>Notas/Alunos</TD>
<TH>Eduardo</TH>
<TH>Ana Lúcia</TH>
<TH>Andréa</TH>
<TR>
<TH>Notas</TH>
<TD>8,0</TD>
<TD>9.3<TD>
<TD>7.8</TD>
<TR>
<TH>No de Inscrição</TH>
<TD>376234809</TD>
<TD>387349048</TD>
<TD>502350432</TD>
</TABLE>
Veja o resultado:
27
O atributo BORDER pode também receber um valor que vai estabelecer qual a
espessura (além da existência) da linha de borda da tabela (BORDER="valor"). Se
o valor atribuído for 0 (zero), o BORDER funciona exatamente como o caso
padrão, sem o BORDER. Dessa maneira, é possível colocar tabelas em maior
destaque, atribuindo um valor maior que 1 para o BORDER.
<TABLE BORDER=5>
<TR>
<TD>TESTE</TD>
<TD>TESTE2</TD>
<TD>TESTE3</TD>
</TR>
<TR>
<TD>TESTE4</TD>
<TD>TESTE5</TD>
<TD>TESTE6</TD>
</TR>
</TABLE>
Veja o resultado:
6.2.2 - ALIGN
Este atributo pode ser aplicado a TH, TD ou TR e controla o alinhamento do texto

dentro de uma célula, com relação as bordas laterais. Quando aplicado a TR, ele
define o alinhamento de toda uma linha da tabela.
O exemplo abaixo mostra como o ALIGN aceita os valores LEFT, CENTER ou
RIGHT, para alinhar à esquerda, centralizar ou alinhar à direita, respectivamente.
<TABLE BORDER>
<TD>Primeira célula</TD>
<TD>Segunda célula</TD>
<TD>Terceira célula</TD>
<TR>
28
<TD ALIGN="CENTER">Centro</TD>
<TD ALIGN="LEFT">Esquerda</TD>
<TD ALIGN="RIGHT">Direita</TD>
<TR>
</TABLE>
Veja o resultado:
6.2.3 - VALIGN
Pode ser aplicado a TH e TD e define o alinhamento do texto em relação às

bordas superior e inferior.
Aceite os valores TOP, MIDDLE, E BOTTOM para alinhar na parte de cima, no
meio e na parte de baixo, respectivamente.
Veja o exemplo:
<TABLE BORDER>
<TD>Teste de alinhamento</TD>
<TD VALIGN="TOP">TOP</TD>
<TD VALIGN="middle">MIDDLE</TD>
<TD VALIGN="bottom">BOTTOM</TD>
</TABLE>
Veja o resultado:
6.2.4 – CELLSPACING
Este atributo compreende a distância entre células e linhas.

Deve ser adicionado dentro da TAG <TABLE>.
Como padrão dos navegadores a distância é 2 pixels.
Exemplo:
29
Crie um arquivo chamado Tabela.html e insira o código abaixo:
<h3>Exemplo com CELLSPACING</h3>

<TABLE BORDER=”1” WIDTH=”80%” ALIGN=”center” CELLSPACING=”6”>
<TR>
<TD WIDTH=”33%” ALIGN=”center”> Coluna 1 </TD>
</TR>
</TABLE>
6.2.5 – CELLPADDING
Este atributo é utilizado para formatar o espaço entre o conteúdo de uma célula e
suas bordas em todos os sentidos.
É aplicado dentro da TAG <TABLE>.
Exemplo:
Acrescente o código abaixo no arquivo Table.html:
<TABLE BORDER="1" WIDTH="80%" ALIGN="center" CELLPADDING="6">

<TR>
<TD WIDTH="33%"ALIGN="center"> Aluno </TD>
<TD WIDTH="33%"ALIGN="center"> Docente </TD>
<TD WIDTH="34%"ALIGN="center"> Técnico Administrativo
</TD>
</TR>
</TABLE>
6.2.6 – ROWSPAN
Define quantas linhas uma mesma célula pode abranger. Por padrão, na maioria
dos navegadores de Internet cada célula adicionada em uma tabela corresponde a
uma linha. Pode ser aplicado em TH ou TD, proporcionando o mesmo efeito.
Exemplo:
Acrescente o código abaixo no arquivo Table.html.
<TABLE BORDER=”1” WIDTH=”380” CELLPADDING=”7” ALIGN=”center”>

<TR>
<TD WIDTH=”16%” ROWSPAN=”3”> 3 linhas </TD>
<TD WIDTH=”16%”> coluna 2 </TD>
30

</TR>
<TR>
</TR>
<TR>
</TR>
</TABLE>
6.2.7 – COLSPAN
Este atributo define quantas colunas uma célula pode abranger. Por padrão, na
maioria dos navegadores de Internet cada célula adicionada em uma tabela
corresponde a uma coluna. Pode ser aplicado em TH ou TD, proporcionando a
mesma abrangência.
<h3>Exemplo com COLSPAN</h3>
<TABLE BORDER=”1” WIDTH=”80%” ALIGN=”center”>

<TR>
<TD WIDTH=”24%” COLSPAN=”3”>Célula com 3 colunas </TD>
<TD WIDTH=”20%”>coluna 4</TD>
</TR>
<TR>
</TR>
</TABLE>
31
6.2.8 – Largura da célula
Para alterar a largura de uma célula da tabela basta acrescentar o parâmetro WIDTH dentro da tag
<TD>. Exemplo1:
<TABLE BORDER=2>
<TR>
<TD WIDTH=100> WIDTH=100</TD>
<TD ALIGN=MIDDLE WIDTH=200>WIDTH=200 (PIXELS)</TD>
</TR>
</TABLE>
6.2.9 – Cor de fundo das células
Outro atributo que podemos ter nas tabelas é mudar a sua cor de fundo, isto se torna
particularmente útil quando se quer dar destaque a uma célula em especial.
32
Vejamos um exemplo:
<TABLE BORDER=0>
<TR>
<TD WIDTH=150 BGCOLOR=RED>VERMELHO </TD>
<TD WIDTH=150 BGCOLOR=BLUE>AZUL </TD>
<TD WIDTH=150 BGCOLOR=RED>VEMELHO</TD>
</TR>
<TR>
<TD WIDTH=150 BGCOLOR=BLUE>AZUL</TD>
<TD WIDTH=150 BGCOLOR=RED>VEMELHO</TD>
<TD WIDTH=150 BGCOLOR=BLUE> AZUL</TD>
</TR>
</TABLE>
33
7. Formulários
A linguagem HTML também permite que o cliente (navegador) interaja com o

servidor, preenchendo campos, clicando em botões e passando informações.
O elemento FORM, da linguagem HTML, é justamente o responsável por tal
interação. Ele provê uma maneira agradável e familiar para coletar dados do
usuário através da criação de formulários com janelas de entrada de textos,
botões, etc.
7.1 - Construindo formulários com o FORM
Para fazer formulário, você tem que colocar as TAGs <FORM> </FORM>. Todos
os outros comandos, devem ficar dentro dessas TAGs. Ok?!
7.2 - Atributos para FORM
O elemento FORM pode conter dois atributos que determinaram para onde será
mandada a entrada do FORM. Vejam como eles são:
7.2.1 – GET
Os dados entrados fazem parte do URL associado à consulta enviado para o

servidor e suporta até 128 caracteres.
7.2.2 – POST
É o mais utilizado, pois envia cada informação de forma separada da URL. Com
este método POST os dados entrados fazem parte do corpo da mensagem
enviada para o servidor e transfere grande quantidade de dados.
7.2.3 – INPUT
A TAG <INPUT> especifica uma variedade de campos editáveis dentro de um

formulário. Ele pode receber diversos atributos que definem o tipo de mecanismo
de entrada (botões, janelas de texto, etc.), o nome da variável associada com o
dado da entrada, o alinhamento e o campo do valor mostrado. O atributo mais
importante do INPUT é o NAME. Ele associa o valor da entrada do elemento. Por
34
exemplo, quando você for receber os dados, já, processados, irá vir o name: =
resposta dada pelo visitante. Outro atributo importante é o TYPE. Ele determina o
campo de entradas de dados. Veja como se usa este atributo:
<INPUT TYPE="TEXT" NAME="nome">
Para mudar o tamanho, da janela padrão, você tem que colocar o comando SIZE.
Por exemplo:
<INPUT TYPE "TEXT" NAME="nome" SIZE=8>(ou número desejado)
Outro comando importante é o VALUE. Ele acrescenta uma palavra digitada no

comando à janela. Por exemplo:
<INPUT TYPE "TEXT" NAME="nome" SIZE=8 VALUE="texto.">
Olhe como ficaria:
7.2.3.1 - Tipos de elementos TYPE
Você pode fazer várias coisas com o elemento TYPE. Por exemplo, para ser um
campo de senha, que quando digitado, apareça o símbolo "*", ao invés das letras,
você deve escrever o seguinte:
<INPUT TYPE"PASSWORD" NAME="nome" SIZE=8>
7.2.3.1.1 - TYPE="RADIO"
Quando o usuário deve escolher uma resposta em uma única alternativa,

de um conjunto, utiliza-se o RADIO Buttons. Um exemplo típico do uso de
tais botões é cuja resposta pode ser SIM ou NÃO. É preciso que todos os
rádios buttons de um mesmo grupo, ou seja, referentes à mesma pergunta,
tenham o mesmo atributo NAME. Para esse tipo de entrada, os atributos
NAME e VALUE, são necessários. Veja a seguir:
35
<INPUT TYPE="RADIO" NAME="você gostou dessa home page?"

VALUE="sim">sim<p>
<INPUT TYPE="RADIO" NAME="você gostou dessa home page?"
VALUE="nao">não<p>
Repare:
7.2.3.1.2 - TYPE="PASSWORD"
Este comando serve para fazer um campo de senhas! Quando a pessoa

digitar, aparecerá o sinal de "*"! O comando é:
<INPUT TYPE="PASSWORD" NAME="SENHA" MAXLENGHT=6>
7.2.3.1.3 - TYPE="CHECKBOX"
Esse comando é válido quando apenas uma resposta, é esperada. Mas

nem sempre esta é a situação...O tipo CHECKBOX provê outros botões
através dos quais mais de uma alternativa, pode ser escolhida.
Definição dos checkboxs:
<INPUT TYPE="CHECKBOX" NAME="netscape" VALUE="net">

Netscape<p>
<INPUT TYPE="CHECKBOX" NAME="Explorer" VALUE="exp">
Internet Explorer<p>
<INPUT TYPE="CHECKBOX" NAME="Mosaic" VALUE="mos">
Mosaic<P>
<INPUT TYPE="CHECKBOX" NAME="Hot Java" VALUE="hot"> Hot
Java<P>
Veja o resultado:
36
7.2.3.1.4 - TYPE="SUBMIT"
Esse é o botão que submete os dados do formulário quando pressionados,

ou seja, possibilitam, o envio, dos dados para o script que vai tratá-los. Veja
como se adiciona o botão:
<INPUT TYPE="SUBMIT" VALUE="enviar">
Veja como ficará:
7.2.3.1.5 - TYPE="RESET"
No caso dos botões RESET, quando o botão é clicado, ele

automaticamente limpa todos os campos já preenchidos no formulário,
voltando à situação inicial.
<INPUT TYPE="RESET" VALUE="Limpar">
Veja como ficará:
7.2.4 – TEXTAREA
Para se limitar o tamanho do campo mostrado na tela, faz-se o uso dos atributos
COLS e ROWS que especificam, respectivamente, o número de colunas e linhas
que se deseja mostrar para o usuário. O atributo NAME é obrigatório, e especifica
o nome da variável, que será associada à entrada do cliente (navegador). O
atributo VALUE não é aceito nesse elemento, mas você pode colocar já um texto
da seguinte maneira. Veja como ele é colocado:
37
<TEXTAREA NAME="nome" COLS=20 ROWS=3>texto</TEXTAREA>
7.2.5 – SELECT
Permite definir uma lista de opções, com barra de rolagem ou fixa na tela do
navegador.
É uma TAG que deve ser iniciada com <SELECT> e finalizada com </SELECT>.
Sintaxe:
<SELECT MULTIPLE NAME=”nomeDaLista”>
<OPTION SELECTED VALUE=”valor de retorno”>
Valor Visualizado
<OPTION VALUE=”Valor de retorno”>
Valor Visualizado 2
</SELECT>
Onde:
NAME: obrigatório, serve para a identificação da lista;
OPTION: item da lista;
MULTIPLE: com este atributo a lista aparecerá sempre aberta;
SELECTED: indica o valor padrão da lista;
VALUE: valor a ser retornado ao servidor.
Exemplo:
<SELECT MULTIPLE NAME=”Estados”>

<OPTION SELECTED VALUE=”SP”> São Paulo
<OPTION VALUE=”RJ”> Rio de Janeiro
<OPTION VALUE=”MG”> Minas Gerais
<OPTION VALUE=”ES”> Espírito Santo
</SELECT>
7.2.6 – Exemplo completo de formulário

38
Mostraremos a seguir um exemplo completo de um formulário para Cadastro de

Conselhos. Utilizaremos também a tag TABLE para alinhar os campos do
formulário na tela em questão. Crie um arquivo com nome de CadConselho.html e
copie o exemplo abaixo:
<html>
<body>
<title>Órgão Colegiado</title>
<TABLE BORDER=1 BGCOLOR="blue" width="100%">

<TH ><font color="white">Cadastro de Conselho</font></TH>
</TABLE>
<FORM NAME="form_conselho" METHOD="POST">

<h4>Programa</h4>
<table width="100%">
<tr>
<td width="15%"><font size="3" face="arial"> Unidade</font></td>
<td><input type="text" name="codUnidade" size="5"></td>
<td><input type="text" name="unidade" size="80"></td>
</tr>
<tr>
<td width="15%"><font size="3" face="arial"> Programa</font></td>
<td><input type="text" name="codPrograma" size="5"></td>
<td><input type="text" name="programa" size="80"></td>
</tr>
</table>
<h4>Conselho de Programa de Pós-Graduação</h4>

<table width="100%">
<tr>
<td width="15%"><font size="3" face="arial">Código</font></td>
<td><input type="text" name="codigo" size="5"></td>
</tr>
<tr>
<td width="15%"><font size="3" face="arial">Nome</font></td>
<td><input type="text" name="nome" size="100"></td>
</tr>
<tr>
<td width="15%"><font size="3" face="arial">Tipo</font></td>
<td>
<select name="tipo">
<option >
<option value="1">COMISSOES TRANSITORIAS DE ESTUDOS
<option value="2">CONSELHOS DE DEPARTAMENTO
<option value="3">COMISSOES PERMANENTES DE UNIDADE
ADMINISTRATIVA
</select>
</td>
</tr>
<tr>
<td width="15%"><font size="3" face="arial">Fundamento</font></td>
<td>
<TEXTAREA NAME="fundamento" COLS=50 ROWS=3></TEXTAREA>
39
</td>
</tr>
<tr>
<td align="center" colspan="2">
<INPUT TYPE="SUBMIT" VALUE="Salvar">
</td>
</tr>
</table>
</FORM>
</body>
</html>
40
8. Frames
É um recurso que permite dividir uma página de Internet em outras, na mesma

página. Nada mais é que uma página que “chama” outras na página inicial que um
documento html que contém frames.
Em um determinado arquivo como o index.html, é onde pode ser definido a
estrutura das novas janelas para o seu HTML.
8.1 - Estrutura
Assim como o corpo do HTML, os FRAMES tem sua estrutura. Eles entram no
lugar do corpo, substituindo o <BODY></BODY> por
<FRAMESET></FRAMESET>.
Exemplo:
<HTML>
<HEAD>
<TITLE> Título do Documento </TITLE>
</HEAD>
<FRAMESET>
Sintaxe dos Frames
</FRAMESET>
</HTML>
8.2 - Sintaxe
Primeiramente devemos fazer um documento HTML para ele ser especificado pela
sintaxe de FRAMES, no caso chamado de Frame1.htm.
<HTML>
<HEAD>
<TITLE> Frame 1 </TITLE>
</HEAD>
<BODY>
41
<FONT SIZE=+1> <B> Frame n1 </B> </FONT>

</BODY>
</HTML>
8.3 – FRAMESET
A primeira especificação é o FRAMESET, que é acompanhado pelas definições

ROWS e COLS.
8.3.1 - ROWS
Especifica o número de FRAMES e a altura de cada um.

Exemplo:
<FRAMESET ROWS="20%,30%,50%">
<FRAME SRC="Frame1.html">
</FRAMESET>
Neste exemplo de cima, ele chama três FRAMES, o 1º com 20% da tela, o 2º com
30% da tela, o 3º com 50% da tela (ambos em altura).
42
8.3.2 – COLS
Especifica o número de FRAMES e a largura de cada um.

Exemplo:
<FRAMESET COLS="20%,30%,50%">
</FRAMESET>
Neste exemplo de cima, ele chama três FRAMES, o 1º com 20% da tela, o 2º com
30% da tela, o 3º com 50% da tela (ambos em largura).
8.4 – FRAME
A segunda especificação é o FRAME, que é acompanhado pelas definições SRC,

NAME, SCROLLING, NORESIZE, TARGET.
43
8.4.1 – SRC
Especifica o documento de formato HTML chamado para o FRAME.

Indispensável, por que sem ele só o documento aparecerá vazio, só com as
divisões.
Exemplo:
</FRAMESET>
8.4.2 - NAME
Especifica o nome do documento de formato HTML chamado para o FRAME.

É extremamente necessário para o uso do TARGET, que será visto a seguir.
Exemplo:
<FRAME SRC="Frame1.html" NAME="Principal">
</FRAMESET>
8.4.3 – SCROLLING
Define se o Frame terá barra de rolagem, o default é Auto.

Fornece as opções: Yes, No, Auto.
Yes - Exibe a barra de rolagem independente do tamanho do documento.
No - Não exibe a barra de rolagem, mesmo que o documento seja maior
que o tamanho especificado.
Auto - Só exibe a barra de rolagem se o documento for maior que a área
especificada.
44
Exemplo:
<FRAMESET COLS="20%,30%,50%"
<FRAME SRC="Frame1.html" SCROLLING="no">
<FRAME SRC="Frame1.html" SCROLLING="yes">
<FRAME SRC="Frame1.html" SCROLLING="auto">
</FRAMESET>
8.4.4 – NORESIZE
Impossibilita o usuário de mudar o tamanho da área especificada do FRAME.

Por default o usuário pode mudar esta área.
Exemplo:
<FRAME SRC="Frame1.html" NORESIZE>
<FRAME SRC="Frame1.html" >
<FRAME SRC="Frame1.html" >
</FRAMESET>
45
8.4.5 – TARGET
Define qual a área (FRAME) que aparecerá o documento especificado pelo link.
Mais útil na utilização de Menus e índices.
Necessita do NAME.
Exemplo:
<FRAME SRC="Frame1.html" NAME="Principal">
</FRAMESET>
O Link:
<A HREF="http://www.unesp.br" TARGET="Principal"> Unesp </A>
Se você quiser criar um link que chama uma nova tela do browser basta
colocar TARGET="um nome que não existe".
8.5 – BORDER
Define qual a borda que o FRAME terá.

Mais útil na utilização de BACKGROUNDS iguais.
Exemplo:
<FRAMESET COLS="20%,30%,50%" FRAMEBORDER="NO" BORDER=0>

<FRAME SRC="Frame1.html" FRAMEBORDER="NO" BORDER=0>
</FRAMESET>
46
47
9. Tabelas de Cores
Esta tabela de cores pode ser usar quando quiser definir as cores de uma fonte de
um texto ou então quando quiser definir o fundo de uma página. Deve-se usar o
nome que está em inglês.
Branco White
Preto Black
Azul Blue
Amarelo Yellow
Verde Green
Laranja Orange
Vermelho Red
Rosa Pink
Cinza Gray
Ouro Gold
Verde azulado Teal
Azul marinho Navy
Prata Silver
Também poderá ser usado o nome em hexadecimal para definir a cor:
#FFFFFF (Branco) #00FF00 (Verde) #00FFFF (Cian) #C0C0C0 (Cinza)

#000000 (Preto) #0000FF (Azul) #FFFF00 (Amarelo) #BC8F8F (Pink)
#FF0000 (Vermelho) #FF00FF (Magenta) #A8A8A8 (Cinza claro) #4F2F4F (Violeta)
48
10. CSS
10.1 O que é CSS?
CSS é a mesma coisa que Style Sheets e que Folhas de Estilo. Você já deve ter
visto esses nomes em vários lugares. CSS é mais uma forma de aperfeiçoar seus
documentos, o CSS tem muitos tipos de definição aqui veremos muitas delas.
No que eles podem nos ajudar?

• Economizar o seu tempo.
• Diminuir o tamanho do código de sua página.
• Sua página irá carregar mais rapidamente.
• Mais facilidade de manter e fazer alterações na página.
• Mais controle no layout da página.
10.2 Como criar estilos
Cada estilo que você cria é definido como uma regra CSS. Cada regra deve
utilizar a seguinte sintaxe:
elemento {atributo1: valor; atributo2: valor ...}
Explicação desta sintaxe:
Elemento - descreve o elemento de design ao qual o estilo será aplicado. A

mesma tag HTML mas, sem os sinais de maior e menor. Essa parte da regra é às
vezes chamada de seletor.
Atributo - o aspecto específico do elemento que você quer usar como estilo. Deve
ser um nome de atributo CSS válido, como o atributo font-size.
Valor - a configuração aplicada ao atributo. Deve ser uma configuração válida

para o atributo em questão, como 20pt (20 pontos) para font-size.
Atributo: valor - à parte declaração da regra. Você pode atribuir múltiplas

declarações se desejar separá-los com ponto-e-vírgula (;). Não coloque um ponto-
e-vírgula depois da última declaração.
49
Agora é hora de exemplos. Eis uma regra CSS que especifica que todos os títulos
de nível 1 (tags <H1>) sejam exibidos em uma fonte de 36 pontos:
H1 {font-size: 36pt}
Aqui está um exemplo de regra que diz que todos os títulos de nível 2 (tags <H2>)
devem ter tamanho de 24 pontos e cor azul;
H2 {font-size: 24pt; color: blue}
Você pode inserir quebras de linha e espaços em branco dentro da regra

como quiser. Assim, é possível ver mais facilmente todas as declarações e
certificar-se de que colocou todos os sinais de ponto-e-vírgula e colchetes nos
lugares corretos. Por exemplo, aqui está uma regra que diz que os parágrafos
aparecerão em fonte Times, 12 pontos, azul e recuados meia polegada a partir da
margem esquerda da página:
P {font-family: Times;
font-size: 12pt;
color: blue;
margin-left: 0.5in}
Note como é fácil aplicar todas as declarações ao elemento parágrafo (P) e como
cada declaração, exceto a última, é seguida pelo caracter de ponto-e-vírgula
exigido.
10.3 Tipos de Folhas de Estilo
Você pode definir regras de CSS em três lugares. E, por definição, pode utilizar
uma combinação dos três métodos nos seus web sites. A maneira como as regras
interagem entre si está relacionada à parte "em cascata".Os três lugares são:
1) em um documento separado fora de todos os documentos HTML;

2) no cabeçalho de um documento HTML e,
3) dentro de uma tag de HTML. Cada um destes métodos tem um nome e
afeta as páginas HTML em seu site de um modo diferente, como discutido aqui:
Externo - Externo significa que você coloca as regras de CSS em um arquivo

separado, e então sua página HTML pode fazer um link para esse arquivo. Essa
abordagem lhe permite definir regras em um ou mais arquivos que podem ser
aplicadas em alguma página do seu web site.
50
Incorporado - Incorporado significa que você especifica as regras de CSS no

cabeçalho do documento. As regras incorporadas afetam somente a página atual.
Inline - Inline significa que você especifica as regras de CSS dentro da tag de
HTML. Essas regras afetam somente a tag atual.
10.3.1 Estilos Externos
Para definir um conjunto de regras de estilo que você pode facilmente

aplicar em alguma página do seu site, é preciso colocar as regras em um
arquivo de texto. Você pode criar este arquivo com um editor de textos
simples, como o Notepad do Windows, e dar ao nome desse arquivo a
extensão .css.
Sempre que quiser utilizar esses estilos em uma nova página, basta colocar
uma tag <LINK> no cabeçalho que referencie esse arquivo .css. Veja o
exemplo:
Arquivo OrgaoColegiado.css
H4 {
font-family: 'Arial';
font-size: 14pt;
color: blue
}
Agora, para utilizar os estilos definidos neste arquivo .css você precisa
adicionar a tag a seguir ao cabeçalho da página, onde nome_do_arquivo é
uma referência absoluta ou relativa ao arquivo .css.
<LINK REL="STYLESHEET"
HREF=" OrgaoColegiado.css" TYPE="text/css">
OBS: Você deve inserir este texto entre as tags <HEAD>...</HEAD>, e

colocar a localização correta do seu arquivo e seu nome.
10.3.2 Estilos Incorporados
Se quiser criar um conjunto de estilos que se aplicam a uma única página,

você pode configurar os estilos exatamente como fizemos no exemplo dos
estilos externos - mas em vez de colocar as tags <STYLE>...</STYLE>, e
as regras em um arquivo separado, coloque estas tags na própria página
51
HTML. A estrutura básica de uma página da web que utiliza estilos

incorporados é semelhante ao seguinte código:
<HTML>
<HEAD>
<TITLE>Exemplo Estilos Incorporados</TITLE>
<STYLE TYPE="text/css"></STYLE>
</HEAD>
</BODY>
</HTML>
10.3.3 Estilos Inline
Os estilos inline são os que têm menos efeitos. Eles afetam somente a tag
atual - não outras tags na página e tampouco outros documentos. A sintaxe
para definir um estilo inline é a seguinte:
Exemplo: <A STYLE="color: green; text-

decoration: none" HREF="http://www.unesp.br">
Note que em vez das tags <STYLE>...</STYLE>, você apenas utiliza um

atributo STYLE dentro da tag para definir o estilo. E, em vez de colocar as
regras de CSS entre colchetes, você as coloca entre aspas, separando-as
com ponto-e-vírgula como de costume.
10.4 Tags Personalizadas
Com as classes de estilo, é possível definir diversas variações de uma única tag.
Por exemplo, você poderia fazer um estilo de parágrafo "texto alinhado à direita",
um estilo de parágrafo "texto centralizado" e assim por diante, criando múltiplos
temas em torno da tag de parágrafo. (<P>)
52
Você pode definir classes de estilo tanto em folhas de estilo externa como nas
incorporadas. (Não há sentido em definir uma classe em um estilo inline!) A
sintaxe é praticamente idêntica à sintaxe normal para os estilos externo e
incorporado, com adição de um ponto e o nome da classe depois do elemento na
qual será utilizado o atributo.
elemento.nomedaClasse {atributo:valor; ... }
--></STYLE>
Exemplo:
Adicionar esta TAG dentro da TAG <Head> da página index.html:
A.meuslinks {
color: blue;
text-decoration: none
}
--></STYLE>
Depois apenas adiciono o atributo CLASS="meuslinks" aos links em que eu
desejar que fiquem azuis e não-sublinhados. Veja como deve ficar:
<A CLASS="meuslinks" HREF="EstiloTexto.html">

Estilo de Texto
</A>
53
10.4.1 Utilizando a TAG <DIV>
As tags HTML <DIV>...</DIV> podem ser usadas para formatar um grande

bloco de texto - uma divisão - abrangendo diversos parágrafos e outros
elementos. Isso as torna uma boa opção para definir estilos que afetam
grandes seções de um texto em uma página. Veja:
DIV.sidebar {
font=family: "Arial";
font-size: 12pt;
text-align: right;
background-color: #C0C0C0;
margin-left: 1in;
margin-right: 1in
}
--></STYLE>
Ao colocar na tag <DIV> o atributo CLASS, você estará fazendo com que
todos os elementos que estejam englobados nesta tag sigam estes
padrões.
<BODY>
Cursos:
<OL>
<LI>Selecione
<DIV CLASS="sidebar">Matemática</DIV>
<br>
<DIV CLASS="sidebar">Medicina</DIV>
</OL></BODY>
10.4.2 Utilizando a TAG <SPAN>
As tags <SPAN>...</SPAN> são como tags <DIV>...</DIV> no sentido de

que você pode utilizá-las para definir estilos que formatam um bloco de
texto. Ao contrário de <DIV>, contudo, que é utilizada para divisões de texto
grandes, a tag <SPAN> é especializada para blocos de textos menores -
que podem ser tão pequenos como um único caracter. Veja um bom
exemplo do que se pode fazer utilizando esta tag.
SPAN.hot {
color:green;
54
text-decoration: underline}
--></STYLE>
Utilizada no código HTML...
<BODY>
Para sair de um programa:
<OL>
<LI>Selecione <SPAN CLASS="hot">A</SPAN>rquivo
-
<SPAN CLASS="hot">S</SPAN>air
</OL></BODY>
55
10.5 Atalhos e atributos de CSS
10.5.1 Atalhos de CSS
Alguns atributos de CSS lhe permitem fazer diversas configurações em uma

declaração. Por exemplo, suponha que você queira definir diversos
aspectos da fonte utilizada para tags H1, como segue:
H1 {
font-style: italic;
font-weight: bold;
font-size: 18pt;
font-family: 'Times Roman'}
Como alternativa a especificar todas essas formatações de fonte

individualmente, você pode utilizar o atributo font: para defini-las todas de
uma só vez, assim:
H1 {
font: italic bold 18pt 'Times Roman'}
Note como diversos valores - itálico, negrito, 18pt e Times Roman - são
separados apenas por um espaço em branco. Essas regras abreviadas
certamente poupam espaço e tempo de digitação.
10.5.2 Atributos de CSS
Atributo de CSS O que ele formata

Cor de fundo, imagem,
background
transparência.
Rolagem do fundo / Marca
background-attachment
d'água.
background-image Imagem de fundo.
Cor de fundo ou
background-color
transparência.
Posicionamento da
background-position
imagem de fundo.
background-repeat Configuração lado-a-lado
56
da imagem de fundo.
Largura, estilo e cor de
border
todas as 4 bordas.
Largura, estilo e cor da
border-bottom
borda inferior.
border-bottom-color Cor da citada borda.
border-bottom-style Estilo da citada borda.
border-bottom-width Largura da citada borda.
border-color Cor das 4 bordas.
border-left
borda esquerda.
border-left-color Cor da borda citada.
border-left-style Estilo da borda citada.
border-left-width Largura da borda citada.
border-right
borda direita.
border-right-color Cor da borda citada.
border-right-style Estilo da borda citada.
border-right-width Largura da borda citada.
border-style Estilo de todas as 4 boras.
border-top
borda superior.
border-top-color Cor da borda citada.
border-top-style Estilo da borda citada.
border-top-width Largura da borda citada.
Largura de todas as 4
border-width
bordas.
Elementos flutuantes à
clear esquerda ou à direita de
um elemento.
Parte visível de um
clip
elemento.
color Cor de primeiro plano.
Tipo de ponteiro do
cursor
mouse.
Se o elemento é exibido e
display o espaço é reservado para
ele.
Tipo de filtro aplicado ao
filter
elemento.
float Se o elemento flutua.
57
Estilo, variante, peso,

font tamanho e altura da linha
do tipo de fonte.
Incorporação da fonte ao
@font-face
arquivo HTML.
font-family Tipo de fonte.
font-size Tamanho da fonte.
font-style Fonte itálico.
Fonte-variant Fonte bold.
Peso da fonte de claro a
font-weight
negrito.
Altura exibida ao
height
elemento.
@import Folha de estilo a importar.
Posição do elemento em
left relação a margem
esquerda da página.
letter-spacing Distância entre as letras.
Distância entre linhas de
line-height
base.
Tipo, imagem e posição do
list-style
estilo da lista.
list-style-image Marcador de item de lista.
Posição do marcador de
list-style-position
item da lista.
Marcador de item de lista
list-style-type
alternativo.
Tamanho de todas as 4
margin
margens.
Tamanho da margem
margin-left
esquerda.
Tamanho da margem
margin-right
direita.
Tamanho da margem
margin-bottom
inferior.
Tamanho da margem
margin-top
superior.
Exibição de imagens que
overflow são maiores do que suas
molduras.
Espaço em torno de um
padding elemento em todos os
lados.
58
Espaço a partir da
padding-bottom margem inferior de um
elemento.
Espaço à esquerda do
padding-left
elemento.
Espaço à direita do
padding-right
elemento.
Espaço a partir da
padding-top margem superior do
elemento.
Inserir quebra de página
page-break-after
depois de um elemento.
Inserir quebra de página
page-break-before
antes de um elemento.
Como o elemento é
position
posicionado na página.
text-align Alinhamento do texto.
Sublinhado, sobrelinhado
text-decoration
ou riscado.
Recuo da primeira linha do
text-indent
parágrafo.
Transformação para todas
text-transform maiúsculas, minúsculas ou
inicial maiúscula.
Posição do elemento em
top relação a parte superior
da página.
Alinhamento vertical do
vertical-align
elemento.
Se elemento é visível ou
visibility
invisível.
width Largura do elemento.
Posição do elemento na
z-index
pilha.
59
Exercícios
Exercícios:
1) Crie uma nova página chamada Exercício.html e deixe-a com o seguinte

layout:
a) O cabeçalho “Sistema de Órgãos Colegiados” deve ter tamanho 3 e

ficar centralizado.
b) Após o cabeçalho incluir uma linha horizontal tamanho 2 e cor cinza.
c) O texto “Cursos de Graduação” deve ser fonte Arial, tamanho 3 e cor
Azul.
d) O texto “Cursos de Pós-Graduação” deve ser Negrito, fonte Arial,
tamanho 3 e cor Verde.
e) O texto “Mestrado” deve ser Itálico, fonte Arial, tamanho 3 e cor
Laranja.
f) O texto “Doutorado” deve ser Sublinhado, fonte Arial, tamanho 3 e
cor Vermelha.
g) O texto “Esta é a primeira aula de HTML” deve ser um texto pré-
formato como mostrado na figura, fonte Arial, tamanho 5 e cor
Magenta.
60
2) Crie uma nova página chamada Exercicio1.html e deixe-a com o seguinte

layout:
a) O texto deverá ser em cor azul com tamanho 3.

b) A Linha horizontal deve ser cinza e tamanho 2.
c) Para cada figura colocar um texto para aparecer com for posicionado
o mouse sobre a imagem. O texto a seguir colocar para cada figura
seguindo a ordem (Buscar, Mostrar todos, Registro Anterior, Próximo
Registro, Salvar, Limpar, Excluir).
d) Para os links fazer para o site da Unesp e da Receita Federal.
3) Em outra página criar uma lista não ordenada com o tipo Square com os
seguintes itens:
Cursos de Graduação:
Agronomia
Biologia
61
Ciência da Computação
Direito
Medicina
Nutrição
Odontologia
Pedagogia
Zootecnia
Para cada linha fazer na fonte tamanho 2, alterar as cores das linhas em
verde e marrom.
62
4) Criar uma página com o nome Exercio3.html com o seguinte layout:
5) Construir a tela de cadastro de Órgão Colegiado como demonstrado na

figura a seguir. Salvar esta página como ColegiadoOrgaoManutencao.html:
63
6) Criar uma página chamada Exercicio5.html e crie frames com o seguinte

layout:
64
Executar os seguintes passos:
a) Criar 3 páginas com os seguintes nomes: menu.html, rodapé.html e

principal.html
b) Na página onde será montado os frame (Exercicio5.html) monte o frame
a seguir:
- menu: frame com tamanho de 90% que deverá chamar a página

menu.html
- rodape: frame com tamanho de 10% que deverá chamar a página
rodape.html
- principal: frame com tamanho de 80% que deverá chamar a página
principal.html
c) No menu coloque 4 links para os exercícios que fizemos até agora. Olhe
o exemplo acima.
d) No rodapé coloque um link que chame a tela principal.
e) Todos os links deverão abrir na tela principal
f) Na tela principal coloque o texto “Curso de HTML”
65
7) Criar uma Folha de Estilo com nome de Exercicio.css e realizar as

seguintes tarefas:
a) Criar estilo para TAG de link para que não tenha linha sublinhada e
seja da cor azul
b) Criar estilo para a TAG H3 com as seguintes propriedades: cor azul,
fonte Arial, tamanho 12pt.
c) Criar estilo para a TAG H1 com as seguintes propriedades: cor azul,
fonte Arial, tamanho 16pt.
d) Criar estilo com nome de nomeCampo com as seguintes
propriedades: cor preta, fonte Arial, tamanho 12pt.
e) Fazer a chamada desta folha de estilo nas páginas menu.html,
rodapé.html, principal.html, Exercicio1.html, Exercicio2.html,
Exercicio3.html
f) Na página principal.html colocar a TAG H1 para o Título da página.
g) Nas páginas Exercicio1.html, Exercicio2.html, Exercicio3.html colocar
a TAG H3 para os Títulos das páginas.
8) Com base no exercício 5 (formulário de Órgãos Colegiados), utilizar o arquivo

CSS padrão da Unesp (folha.css), realizando as seguintes tarefas:[
66
a) Inclua dentro da tag de cabeçalho
<link href="folha.css" rel="stylesheet" type="text/css">
a) Dentro da tag BODY adicone:
class="FundoPaginaInterna“
b) Dentro da tag TD do “Colegiado da Unesp” adicione:
class="NomeArea"
c) Dentro da tag TD do “Manutenção do Órgão Colegiado” adicione:
class="TituloDestaque2“
d) Dentro da tag TD dos títulos “Unidade”, “Tipo Colegiado”, “Órgão

Colegiado” adicione:
class="tabela-titulo“
e) Dentro da tag TD dos nomes dos campos de formulário adicione:
class="tabela-linha"
f) Para todos os campos de formulário adicione dentro de suas tags:
class="itens-form“
g) Para fazer o rodapé da página adicionar o código abaixo, antes de

fechar a Tag BODY:
<table width="768" border="0" cellpadding="0" cellspacing="0"

id="Rodape">
<tr>
<td height="60" align="left" class="RodapeFundo"><table
width="100%" height="60" border="0" cellpadding="0"
cellspacing="0" id="MenuRodape">
<tr>
<td width="300" class="RodapeDestaque"> Secretaria
Geral
<td><div align="center"><a href="../" target="_blank"
class="RodapeTexto">Home</a></div></td>
<td width="2" class="RodapeDivisor"><div
align="center"></div></td>
<td><div align="center"><a href="../"
class="RodapeTexto">Contato</a></div></td>
<td width="2" class="RodapeDivisor"><div
align="center"></div></td>
67
<td><img src="imagens/spacer.gif" width="265"

height="30"></td>
<td><div align="center"><a href="../" target="_top"
class="RodapeTexto">Sair do Sistema</a></div></td>
</tr>
</table></td>
</tr>
</table>
<table width="768" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><table width="567" border="0" align="center"
cellpadding="0" cellspacing="0" id="desenv">
<tr>
<td height="25"><div align="center"><span
class="desenvTXT">UNESP -
Universidade Estadual Paulista
"Júlio de Mesquita
Filho" </span></div></td>
</tr>
<tr>
<td height="25"><div
align="center">Reitoria</div></td>
</tr>
</table></td>
</tr>
</table>
<table width="768" border="0" cellpadding="0" cellspacing="0">
<tr class="desenvPor">
<td height="25" class="desenvPor"><div
align="center">Tecnologia e Desenvolvimento
: <a href="http://www.unesp.br/ai" target="_blank"><br>
Assessoria de Informática</a> - <b>GRUPO DE
SISTEMAS</b>
<br>
<br>
<img src="http://shelob.unesp.br:2000/images/gscc.gif"
/>
<br>
</div></td>
</tr>
</table>
CSS
CURSO W3C ESCRITÓRIO BRASIL
ÍNDICE
1. CSS 5
O que é CSS? 5
2. Seletores complexos 7
O que é um seletor? 7
Exemplo de funcionamento 8
3. Gradiente 11
“Stops” ou definindo o tamanho do seu gradiente 12
4. Columns 15
column-count 15
column-width 15
column-gap 16
5. Transform 2D 17
CSS Transform na prática 17
Várias transformações em um único elemento 18
transform-origin 18
6. Transições e animações 21
O básico: propriedade transition 21
Propriedade animation e regra keyframe 24
Definindo ciclos 28
7. Bordas 31
Dividindo a imagem 31
Comportamento da imagem 32
Aplicação 32
8. Múltiplos backgrounds 35
9. Módulo Template Layout 37

Sintaxe e funcionamento 39
O funcionamento da propriedade display 39
Definindo a largura e altura dos slots 41
O funcionamento da propriedade position 42
Pseudo-elemento ::slot() 43
10. Cores 45
RGBA 45
RGBA e a diferença da propriedade OPACITY 45
currentColor 47
11. Paged media 49
@page 49
Terminologia e Page Model (modelo de página) 50
Page box 50
Page area 51
Margin box 51
Page sheet 51
Non-printable area - Área não impressa 52
Área de impressão 52
Propriedade size 52
auto 52
landscape 52
portrait 52
Page-size 53
12. @font-face 55
Compatibilidade 56
Kit de sobrevivência 56
13. Presentation-levels 57
Como funciona o modelo 57
A propriedade presentation-level 58
1. CSS
O que é CSS?
O CSS formata a informação entregue pelo HTML. Essa informação pode ser qualquer coisa: ima-
gem, texto, vídeo, áudio ou qualquer outro elemento criado. Grave isso: CSS formata a informação.
Essa formatação na maioria das vezes é visual, mas não necessariamente. No CSS Aural, nós ma-
nipulamos o áudio entregue ao visitante pelo sistema de leitura de tela. Nós controlamos volume,
profundidade, tipo da voz ou em qual das caixas de som a voz sairá. De certa forma você está for-
matando a informação que está em formato de áudio e que o visitante está consumindo ao entrar
no site utilizando um dispositivo ou um sistema de leitura de tela. O CSS prepara essa informação
para que ela seja consumida da melhor maneira possível.
O HTML5 trouxe poucas novidades para os desenvolvedores client-side. Basicamente foram cria-
das novas tags, o significado de algumas foi modificado e outras tags foram descontinuadas. As no-
vidades interessantes mesmo ficaram para o pessoal que conhece Javascript. As APIs que o HTML5
disponibilizou são sem dúvida uma das features mais aguardadas por todos estes desenvolvedores.
Diferentemente do CSS3 que trouxe mudanças drásticas para a manipulação visual dos elementos
do HTML.
Com o CSS que nós conhecemos podemos formatar algumas características básicas: cores, back-
ground, características de font, margins, paddings, posição e controlamos de uma maneira muito
artesanal e simples a estrutura do site com a propriedade float.
Você deve pensar: “mas com todas as características nós conseguimos fazer sites fantásticos, com
design atraente e com a manutenção relativamente simples”. E eu concordo com você, mas outras
características que nós não temos controles e dependemos de:
CSS - Curso W3C Escritório Brasil 5

1) Algum programa visual como o Photoshop para criarmos detalhes de layout;
2) Javascript para tratarmos comportamentos ou manipularmos elementos específicos na es-
trutura do HTML;
3) Estrutura e controle dos elementos para melhorarmos acessibilidade e diversos aspectos do
SEO;
Com as atualizações do CSS3 e com os browsers atualizando o suporte do CSS2.1, nós entramos em
patamar onde sem dúvida o CSS é a arma mais poderosa para o designer web. Segue uma pequena
lista dos principais pontos que podemos controlar nesse novo patamar:
1) selecionar primeiro e último elemento;
2) selecionar elementos pares ou ímpares;
3) selecionarmos elementos específicos de um determinado grupo de elementos;
4) gradiente em textos e elementos;
5) bordas arredondadas;
6) sombras em texto e elementos;
7) manipulação de opacidade;
8) controle de rotação;
9) controle de perspectiva;
10) animação;
11) estruturação independente da posição no código HTML;
É agora que começa diversão ao formatar sites com CSS.

2. SELETORES COMPLEXOS
A sintaxe do CSS é simples:
seletor {
propriedade: valor;
}
A propriedade é a característica que você deseja modificar no elemento. O valor é o valor referente
a esta característica. Se você quer modificar a cor do texto, o valor é um Hexadecimal, RGBA ou até
mesmo o nome da cor por extenso. Até aqui, nada diferente. Muitas vezes você não precisa apren-
der do que se trata a propriedade, basta saber que existe e se quiser decorar, decore. Propriedades
são criadas todos os dias e não é um ato de heroísmo você saber todas as propriedades do CSS e
seus respectivos valores.
Os seletores são a alma do CSS e você precisa dominá-los. É com os seletores que você irá escolher
um determinado elemento dentro todos os outros elementos do site para formatá-lo. Boa parte da
inteligência do CSS está em saber utilizar os seletores de uma maneira eficaz, escalável e inteligente.
O que é um seletor?
O seletor representa uma estrutura. Essa estrutura é usada como uma condição para determinar
quais elementos de um grupo de elementos serão formatados.
Seletores encadeados e seletores agrupados são a base do CSS. Você os aprende por osmose duran-
te o dia a dia. Para você lembrar o que são seletores encadeados e agrupados segue um exemplo
abaixo:
Exemplo de seletor encadeado:
div p strong a {
color: red;
}

Este seletor formata o link (a), que está dentro de um strong, que está dentro de P e que por sua vez
está dentro de um DIV.
Exemplo de seletor agrupado:
strong, em, span {

color: red;
}
Você agrupa elementos separados por vírgula para que herdem a mesma formatação.
Estes seletores são para cobrir suas necessidades básicas de formatação de elementos. Eles fazem o
simples. O que vai fazer você trabalhar menos, escrever menos código CSS e também menos códi-
go Javascript são os seletores complexos.
Os seletores complexos selecionam elementos que talvez você precisaria fazer algum script em
Javascript para poder marcá-lo com uma CLASS ou um ID para então você formatá-lo. Com os
seletores complexos você consegue formatar elementos que antes eram inalcançáveis.
Exemplo de funcionamento
Imagine que você tenha um título (h1) seguido de um parágrafo (p). Você precisa selecionar todos
os parágrafos que vem depois de um título h1. Com os seletores complexos você fará assim:
h1 + p {
color:red;
}
Esses seletores é um dos mais simples e mais úteis que eu já utilizei em projetos por aí. Não precisei
adicionar uma classe com JQuery, não precisei de manipular o CMS para marcar esse parágrafo,
não precisei de nada. Apenas apliquei o seletor.

Abaixo, veja uma lista de seletores complexos e quais as suas funções. Não colocarei todas as possi-
bilidades aqui porque podem haver modificações, novos formatos ou outros formatos que podem
ser descontinuados. Para ter uma lista sempre atualizada, siga o link no final da tabela.
PADRÃO SIGNIFICADO CSS
elemento[atr] Elemento com um atributo específico. 2
elemento[atr=”x”] Elemento que tenha um atributo com um valor específico igual a “x”. 2
elemento[atr~=”x”] Elemento com um atributo cujo valor é uma lista separada por espa- 2
ços, sendo que um dos valores é “x”.
elemento[atr^=”x”] Elemento com um atributo cujo valor comece exatamente com 3
string “x”.
elemento[atr$=”x”] Elemento com um atributo cujo valor termina exatamente com 3
string “x”.
elemento[atr*=”x”] Elemento com um atributo cujo valor contenha a string “x”. 3
elemento[atr|=”en”] Um elemento que tem o atributo específico com o valor que é sepa- 2
rado por hífen começando com EN (da esquerda para direita).
elemento:root Elemento root do documento. Normalmente o HTML. 3
elemento:nth- Selecione um objeto N de um determinado elemento. 3
child(n)
elemento:nth-last- Seleciona um objeto N começando pelo último objeto do elemento. 3
child(n)
elemento:empty Seleciona um elemento vazio, sem filhos. Incluindo elementos de 3
texto.
elemento:enabled Seleciona um elemento de interface que esteja habilitado ou desabi- 3
elemento:disabled lidade, como selects, checkbox, radio button etc.
elemento:checked Seleciona elementos que estão checados, como radio buttons e 3
checkboxes.
E>F Seleciona os elementos E que são filhos diretos de F. 2
E+F Seleciona um elemento F que precede imediatamente o elemento E. 2
Lista atualizada pelo W3C http://www.w3.org/TR/css3-selectors/#selectors

3. GRADIENTE
Uma das features mais interessantes é a criação de gradientes apenas utilizando CSS. Todos os
browsers mais novos como Safari, Opera, Firefox e Chrome já aceitam essa feature e você pode
utilizá-la hoje. Os Internet Explorer atuais (8 e 9) não reconhecem ainda, contudo você poderá
utilizar imagens para estes browsers que não aceitam essa feature. Você pode perguntar: “Mas já
que terei o trabalho de produzir a imagem do gradiente, porque não utilizar imagens para todos os
browsers?“ Lembre-se que se utilizar uma imagem, o browser fará uma requisição no servidor bus-
cando essa imagem, sem imagem, teremos uma requisição a menos, logo o site fica um pouquinho
mais rápido. Multiplique isso para todas as imagens de gradiente que você fizer e tudo realmente
fará mais sentido.
Deixe para que os browsers não adeptos baixem imagens e façam mais requisições.
Veja abaixo um exemplo de código, juntamente com o fallback de imagem:
div {
width:200px;
height:200px;
background-color: #FFF;
/* imagem caso o browser não aceite a feature */

background-image: url(images/gradiente.png);
/* Firefox 3.6+ */
background-image: -moz-linear-gradient(green, red);
/* Safari 5.1+, Chrome 10+ */

background-image: -webkit-linear-gradient(green, red);
/* Opera 11.10+ */
background-image: -o-linear-gradient(green, red);
}
Atenção: Até que os browsers implementem de vez essa feature, iremos utilizar seus prefixos.

Como ficou:
“Stops” ou definindo o tamanho do seu gradiente

O padrão é que o gradiente ocupe 100% do elemento como vimos no exemplo anterior, mas muitas
vezes queremos fazer apenas um detalhe.
Nesse caso nós temos que definir um STOP, para que o browser saiba onde uma cor deve terminar
para começar a outra. Perceba o 20% ao lado da cor vermelha. O browser calcula quanto é 20% da
altura (ou largura dependendo do caso) do elemento, e começa o gradiente da cor exatamente ali.
O código de exemplo segue abaixo:
/* Firefox 3.6+ */
background-image: -moz-linear-gradient(green, red 20%);

background-image: -webkit-linear-gradient(green, red 20%);
/* Opera 11.10+ */
background-image: -o-linear-gradient(green, red 20%);
Veja o resultado:
Se colocarmos um valor para o verde, nós iremos conseguir efeitos que antes só conseguiríamos no
Illustrator ou no Photoshop. Segue o código e o resultado logo após:
/* Firefox 3.6+ */
background-image: -moz-linear-gradient(green 10%, red 20%);

background-image: -webkit-linear-gradient(green 10%, red
20%);
/* Opera 11.10+ */
background-image: -o-linear-gradient(green 10%, red 20%);
Perceba que o tamanho da transição vai ficando menor à medida que vamos aumentando as por-
centagens. Muito, mas muito útil.

4. COLUMNS
Com o controle de colunas no CSS, podemos definir colunas de texto de forma automática. Até
hoje não havia maneira de fazer isso de maneira inteligente com CSS e o grupo de propriedades
columns pode fazer isso de maneira livre de gambiarras.
column-count
A propriedade column-count define a quantidade de colunas terá o bloco de textos.
/* Define a quantidade de colunas, a largura é definida uniforme-

mente. */
-moz-column-count: 2;
-webkit-column-count: 2;
column-width
Com a propriedade column-width definimos a largura destas colunas.
/* Define qual a largura mínima para as colunas. Se as colunas

forem espremidas, fazendo com que a largura delas fique menor que
este valor, elas se transformam em 1 coluna automaticamente */
-moz-column-width: 400px;
-webkit-column-width: 400px;
Fiz alguns testes aqui e há uma diferença entre o Firefox 3.5 e o Safari 4 (Public Beta).
O column-width define a largura mínima das colunas. Na documentação do W3C é a seguinte:
imagine que você tenha uma área disponível para as colunas de 100px. Ou seja, você tem um div
com 100px de largura (width). E você define que as larguras destas colunas (column-width) sejam
de 45px. Logo, haverá 10px de sobra, e as colunas irão automaticamente ter 50px de largura, preen-
chendo este espaço disponível. É esse o comportamento que o Firefox adota.
Já no Safari, acontece o seguinte: se você define um column-width, as colunas obedecem a esse va-
lor e não preenchem o espaço disponível, como acontece na explicação do W3C e como acontece
também no Firefox. Dessa forma faz mais sentido para mim.

Como a propriedade não está 100% aprovada ainda, há tempo para que isso seja modificado no-
vamente. Talvez a mudança da nomenclatura da classe para column-min-width ou algo parecida
venha a calhar, assim, ficamos com os dois resultados citados, que são bem úteis para nós de qual-
quer maneira.
column-gap
A propriedade column-gap cria um espaço entre as colunas, um gap.
/* Define o espaço entre as colunas. */

-moz-column-gap: 50px;
-webkit-column-gap: 50px;
Utilizamos aqui os prefixos -moz- e -webkit-, estas propriedades não funcionam oficialmente em
nenhum browser. Mas já podem ser usados em browsers como Firefox e Safari.
5. TRANSFORM 2D
A propriedade transform manipula a forma com que o elemento aparecerá na tela. Você pode-
rá manipular sua perspectiva, escala e ângulos. Uma transformação é especificada utilizando a
propriedade transform. Os browsers que suportam essa propriedade, a suportam com o prefixo
especificado.
Os valores possíveis até agora estão especificados abaixo:
scale
O valor scale modificará a dimensão do elemento. Ele aumentará proporcionalmente o tama-
nho do elemento levando em consideração o tamanho original do elemento.
skew
Skew modificará os ângulos dos elementos. Você pode modificar os ângulos individualmente
dos eixos X e Y como no código abaixo:
-webkit-transform: skewY(30deg);
-webkit-transform: skewX(30deg);
translation
O translation moverá o elemento no eixo X e Y. O interessante é que você não precisa se pre-
ocupar com floats, positions, margins e etc. Se você aplica o translation, ele moverá o objeto
e pronto.
rotate
O rotate rotaciona o elemento levando em consideração seu ângulo, especialmente quando o
ângulo é personalizado com o transform-origin.
CSS Transform na prática

Veja o código abaixo e seu respectivo resultado:
img {
-webkit-transform: skew(30deg); /* para webkit */
-moz-transform: skew(30deg); /* para gecko */
-o-transform: skew(30deg); /* para opera */
transform: skew(30deg); /* para browsers sem prefixo */
}

O código acima determina que o ângulo da imagem seja de 30deg. Colocamos um exemplo para
cada prefixo de browser. Ficando assim:
Várias transformações em um único elemento
Para utilizarmos vários valores ao mesmo tempo em um mesmo elemento, basta definir vários va-
lores separando-os com espaços em uma mesma propriedade transform:
img {
-webkit-transform: scale(1.5) skew(30deg); /* para webkit */
-moz-transform: scale(1.5) skew(30deg); /* para gecko */
-o-transform: scale(1.5) skew(30deg); /* para opera */
transform: scale(1.5) skew(30deg); /* para browsers sem prefi-
xo */
}
transform-origin
A propriedade transform-origin define qual o ponto do elemento a transformação terá origem. A
sintaxe é idêntica ao background-position. Observe o código abaixo:
img {
-webkit-transform-origin: 10px 10px; /* para webkit */
-moz-transform-origin: 10px 10px; /* para webkit */
-o-transform-origin: 10px 10px; /* para webkit */
transform-origin: 10px 10px; /* para webkit */
}
Como padrão as transições sempre acontecem tendo como ponto de âncora o centro do objeto.
Há algumas situações que pode ser que você queira modificar essa âncora, fazendo com que por
exemplo, a rotação aconteça em algum dos cantos do elemento. O código de exemplo acima fará
com que a transformação aconteça a partir dos 10px do topo no canto esquerdo. Veja a compara-
ção entre o padrão e o resultado do código acima.
A propriedade transform fica mais interessante quando a utilizamos com a propriedade transition,
onde podemos executar algumas animações básicas manipulando os valores de transformação.

6. TRANSIÇÕES E ANIMAÇÕES
Durante muito tempo o CSS só serviu para pintar quadradinhos e mais nada. Desde quando o
pessoal do WaSP organizou todo o movimento dos Padrões Web fazendo com que todos os desen-
volvedores, fabricantes de browsers e até mesmo o W3C acreditassem no poder dos padrões não
houve grandes atualizações no CSS. Praticamente formatávamos font, background, cor, tamanhos
e medidas de distância e posição.
A propriedade transition, a regra keyframe e outras propriedades vieram vitaminar a função que
o CSS tem perante o HTML acrescentando maneiras de produzirmos animações e transições. Não
estou dizendo que você fará animações complicadas, com diversos detalhes técnicos e etc. Para
esse tipo de resultado existem outras ferramentas, incluindo Canvas e SVG, que com certeza farão
um trabalho melhor com menos esforço. Mas é fato que as animações via CSS nos ajudará a levar a
experiência do usuário para outro patamar.
Lembrando que o nível de suporte de algumas dessas técnicas ainda é muito baixo. A propriedade
transition funciona em boa parte dos browsers atuais. Mas a regra keyframe que nos permite con-
trolar as fases de uma animação ainda é muito restrito. Para uma tabela mais atual e detalhada de
suporte e compatibilidade, faça uma procura no Google. Onde for possível demonstrarei o código
com o prefixo dos browsers que suportam as propriedades.
O básico: propriedade transition

A propriedade transition é praticamente auto-explicativa. Sua sintaxe tão simples que talvez até
dispense explicações mais elaboradas. Vamos começar com o código abaixo:
a {
color: white;
background: gray;
}
No código definimos que o link terá sua cor de texto igual a preta e seu background será cinza.

O resultado esperado é que ao passar o mouse no link a cor do texto seja modificada, mudando do
branco para o preto e que a cor de background mude de cinza para vermelho. O código abaixo faz
exatamente isso:
a {
color: white;
background: gray;
}
a:hover {
color: black;
background: red;
}
O problema é que a transição é muito brusca. O browser apenas modifica as características entre os
dois blocos e pronto. Não há nenhuma transição suave entre os dois estados.
Podemos fazer a mudança de um estado para outro utilizando a propriedade transition. Suponha
que ao passar o mouse, as mudanças acontecessem em um intervalo de meio segundo. Bastaria
colocar a propriedade transition no a:hover e pronto. Ao passar o mouse, o browser modificaria as
características do link com uma pequena transição de meio segundo. O código seria como se segue
abaixo:
a:hover {
color: black;
background: red;
-webkit-transition: 0.5s;
}
Dessa forma a transição apenas acontece quando o hover é ativado. O problema é que ao tirar o
mouse, o browser volta bruscamente para as características iniciais. Para modificar isso basta inse-
rir também a propriedade transition no estado inicial.
a {
color: white;
background: gray;
}
a:hover {
color: black;
background: red;
}
O que a propriedade transition faz é comparar os valores das propriedades em comum entre os dois
estados do link ou de qualquer outro elemento, assim ela modifica suavemente os valores quando
há a ativação da função. Esta é uma técnica simples e que serve para manipularmos transições bá-
sicas como cor, tamanho, posição etc.
Agora suponha que em um bloco há uma determinada propriedade que no outro bloco não há,
como no código abaixo:
a {
border:1px solid orange;
color: white;
background: gray;
}
a:hover {
color: black;
background: red;
}
Nesse caso o browser detecta que há uma propriedade no primeiro estado, mas não no segundo,
por isso ele não faz a transição desta propriedade, apenas das propriedades em comuns.

Abaixo veja o código. copie em um arquivo HTML e veja o efeito:
<!DOCTYPE html>
<html lang=”pt-br”>
<head>
<meta charset=”utf-8”>
<title>CSS Transition</title>
<style type=”text/css” media=”screen”>
a {
color:white;
background:gray;
-webkit-transition: 0.5s linear;
}
a:hover {
color:black;
background:red;
}
</style>
</head>
<body>
<a href=”#”>Link! Hello World!</a>
</body>
</html>
Propriedade animation e regra keyframe

A propriedade trasition trabalha de forma muito simples e inflexível. Você praticamente diz para o
browser qual o valor inicial e o valor final para que ele aplique a transição automaticamente, con-
trolamos praticamente apenas o tempo de execução. Para termos mais controle sobre a animação
temos a propriedade animation que trabalha juntamente com a rule keyframe.
Basicamente você consegue controlar as características do objeto e suas diversas transformações
definindo fases da animação. Observe o código abaixo e veja seu funcionamento:
@-webkit-keyframes rodar {
from {
-webkit-transform:rotate(0deg);
}
to {
}
}
O código acima define um valor inicial e um valor final. Agora vamos aplicar esse código a um
elemento. Minha ideia é fazer um DIV girar. ;-)
O código HTML até agora é este. Fiz apenas um div e defini este keyframe:
<!DOCTYPE html>
<head>
<title></title>
<style>
@-webkit-keyframes rodaroda {
from {
}
to {
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Primeiro você define a função de animação, no caso é o nosso código que define um valor inicial de
0 graus e um valor final de 360 graus. Agora vamos definir as características deste DIV.
div {
width:50px;
height:50px;
margin:30% auto 0;
background:black;
}
Nas primeiras linhas defini qual será o estilo do div. Ele terá uma largura e uma altura de 50px. A
margin de 30% do topo garantirá um espaço entre o objeto e o topo do documento, e background
preto.

A propriedade animation tem uma série de propriedades que podem ser resumidas em um
shortcode bem simples. Veja a tabela logo a seguir para entender o que cada propriedade significa:
Propriedade Definição
animation-name Especificamos o nome da função de animação
animation- Define a duração da animação. O valor é declarado em segundos.
duration
animation-timing- Descreve qual será a progressão da animação a cada ciclo de duração.
function Existem uma série de valores possíveis e que pode ser que o seu navegador
ainda não suporte, mas são eles: ease, linear, ease-in, ease-out, ease-in-out,
cubic-bezier(<number>, <number>, <number>, <number>) [, ease, linear,
ease-in, ease-out, ease-in-out, cubic-bezier(<number>, <number>, <num-
ber>, <number>)]*
O valor padrão é ease.
animation- Define o número de vezes que o ciclo deve acontecer. O padrão é um, ou
interation-count seja, a animação acontece uma vez e pára. Pode ser também infinito defi-
nindo o valor infinite no valor.
animation- Define se a animação irá acontecer ou não no sentido inverso em ciclos
direction alternados. Ou seja, se a animação está acontecendo no sentido horário, ao
acabar a animação, o browser faz a mesma animação no elemento, mas no
sentido anti-horário. Os valores são alternate ou normal.
animation-play- Define se a animação está acontecendo ou se está pausada. Você poderá por
state exemplo, via script, pausar a animação se ela estiver acontecendo. Os valo-
res são running ou paused.
animation-delay Define quando a animação irá começar. Ou seja, você define um tempo
para que a animação inicie. O valor 0, significa que a animação começará
imediatamente.
Voltando para o nosso código, vamos aplicar algumas dessas propriedades:
div {
width:50px;
height:50px;
margin:30% auto 0;
background:black;
-webkit-animation-name: rodaroda;
-webkit-animation-duration: 0.5s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
Veja que na propriedade animation-name chamamos o mesmo nome que demos na nossa função
de keyframe logo no começo da explicação. Depois definimos uma duração de ciclo de meio se-
gundo. Definimos que o comportamento da animação será linear, e com a propriedade animation-
iteration-count definimos que ele girará infinitamente. E por último definimos pelo animation-di-
rection que a animação deverá ser alternada, ou seja, o DIV girará para um lado, e quando alcançar
o final da animação, o browser deverá alternar essa animação.
Podemos melhorar esse código utilizando a versão shortcode, que é mais recomendado. Veja a or-
dem que devemos escrever as propriedades animation em forma de shortcode:
animation: [<animation-name> || <animation-duration> || <anima-

tion-timing-function> || <animation-delay> || <animation-itera-
tion-count> || <animation-direction>] [, [<animation-name> ||
<animation-duration> || <animation-timing-function> || <anima-
tion-delay> || <animation-iteration-count> || <animation-direc-
tion>] ]*
Aplicando isso ao nosso código:
div {
width:50px;
height:50px;
margin:30% auto 0;
background:black;
-webkit-animation: rodaroda 0.5s linear infinite alternate;

}

Pronto. Agora temos um elemento que gira sem parar, hora para direita hora para esquerda.
Definindo ciclos
Nós definimos no keyframe do nosso último exemplo apenas um início e um fim. Mas e se quisés-
semos que ao chegar na metade da animação o nosso elemento ficasse com o background verme-
lho? Ou que ele mudasse de tamanho, posição e etc.? É aí onde podemos flexibilizar melhor nosso
keyframe definindo as fases da animação. Por exemplo, podemos dizer para o elemento ter uma cor
de background diferente quando a animação chegar aos 10% do ciclo, e assim por diante.
Veja o exemplo:
0% {
}
50% {
background:red;
}
100% {
}
}
Definimos acima que o início da animação o elemento começará na posição normal, 0 graus.
Quando a animação chegar aos 50% do ciclo, o elemento deverá ter girado para 180 graus e o ba-
ckground dele deve ser vermelho. E quando a animação chegar a 100% o elemento deve ter girado
ao todo 360 graus e o background, como não está sendo definido, volta ao valor padrão, no nosso
caso black, que foi definido no CSS onde formatamos este DIV.
Logo nosso elemento girará pra sempre e ficará alternando a cor de fundo de preto para vermelho.
Fiz um exemplo bem simples modificando apenas o background, mas você pode muito bem definir
um position e modificar os valores de left e top para fazer o elemento se movimentar.

No exemplo também defini apenas 3 estágios (0%, 50% e 100%) você pode definir um maior nú-
mero de estágios: 5%, 10%, 12%, 16% e etc... Adequando as fases da animação às suas necessidades.
Há exemplos muito interessantes na internet onde podemos ver todo o poder das animações feitas
pela CSS. Veja o exemplo que fizemos aqui neste texto no endereço: http://migre.me/4ubym

7. BORDAS
Definir imagem para as bordas é uma daquelas propriedades da CSS que você se pergunta como
vivíamos antes de conhecê-la. É muito mais fácil entender testando na prática, por isso sugiro que
se você estiver perto de um computador, faça testes enquanto lê este texto. A explicação pode não
ser suficiente em algumas partes, mas a prática irá ajudá-lo a entender.
Esta propriedade ainda está em fase de testes pelos browsers, por isso utilizaremos os prefixos para
ver os resultados.Utilizarei apenas o prefixo do Safari, mas o Firefox já entende essa propriedade
muito bem.
A sintaxe do border-image se divide em três partes: 1) URL da imagem que será utilizada. 2)
Tamanho do slice das bordas. 3) Como o browser irá aplicar a imagem na borda.
Segue um exemplo da sintaxe abaixo:
a {
display:block;
width:100px;
-webkit-border-image: url(border.gif) 10 10 10 10 stretch;
}
Acima definimos uma imagem com o nome de border.gif, logo depois definimos o width de cada
uma das bordas do elemento. A sintaxe é igual a outras propriedades com 4 valores: top, right, bot-
tom, left. E logo depois colocamos qual o tipo de tratamento que a imagem vai receber.
Dividindo a imagem
Para posicionar a imagem devidamente em seu objeto o browser divide a imagem em 9 seções:

Quando a imagem é colocada no elemento, o browser posiciona os cantos da imagem juntamente
com os cantos correspondentes do elemento. Ou seja, o bloco 1 da imagem é colocado no canto
superior esquerdo, o 3 no canto superior direito e assim por diante. Se você fizer o teste, a imagem
aparecerá no elemento como se estivesse desproporcional. Isso é normal porque a imagem deve
seguir as proporções do elemento e não as suas próprias.
Comportamento da imagem
O comportamento da imagem é a parte mais importante porque define como o centro da imagem
(no caso do nosso exemplo a seção de número 5), irá ser tratada. Há vários valores, mas que é mais
simples de se entender é a stretch, que estica e escala a imagem para o tamanho do elemento aplica-
do. Há outros valores como round e repeat. Mas hoje alguns browsers não tem tanto suporte e aca-
bam ou ignorando esses valores ou como no caso do Safari e o Chrome, interpretam o round como
o repeat. Vamos nos concentrar com o stretch e você entenderá como funciona a propriedade.
Aplicação
Vamos utilizar a imagem abaixo para aplicar a propriedade. Iremos fazer um botão ao estilo iPho-
ne. A coisa é simples e sugiro que você faça testes individualmente brincando com os valores das
bordas e com diversas outras imagens para ver como funciona o recurso.
Irei aplicar o estilo em um link. O código que irei aplicar segue abaixo:
a {
display:block;
width:100px;
text-align:center;
font:bold 13px verdana, arial, tahoma, sans-serif;
text-decoration:none;
color:black;
}
Para inserir a imagem, colocamos as duas linhas abaixo:
border-width:10px;
-webkit-border-image: url(button.png) 10 stretch;
Defini com a primeira linha que a borda teria 10px de largura com a propriedade border-width. Na
segunda linha define que a imagem utilizada seria a button.png, que as áreas da imagem teriam que
se estender por 10px, e o valor stretch define que a imagem cobrirá o elemento inteiro, o resultado
segue abaixo:
Para você ver como tudo ali é meio estranho. Se eu diminuir o valor de 10 do border-image, que é
o valor que define quanto a imagem deve se estender nas bordas, veja como fica:
Temos o border-width definindo a largura da borda, mas não temos nenhum valor dizendo quanto
dessa largura a imagem deve tomar.
Os efeitos são bem estranhos quando esses valores estão mal formatados. Por isso, teste na prática
essa propriedade para que não haja problemas a implementar em seus projetos. O pulo da gato,
para mim, é a propriedade border-width.

8. MÚLTIPLOS BACKGROUNDS
Quem nunca teve que criar um background onde havia um gradiente em cima, embaixo e dos
lados? Você sabe que para criar algo parecido você não pode utilizar uma imagem só. A solução
até hoje seria criar 4 elementos divs aninhados (ou seja, um dentro do outro) e aplicar um pedaço
deste background em cada um destes elementos para dar a sensação de um background único. O
resultado é interessante mas o meio que isso é feito não é nada bonito. Você era obrigado a declarar
4 elementos “inúteis“ no seu HTML apenas para compensar um efeito visual. A possibilidade de
atribuirmos múltiplos backgrounds em apenas um elemento é a feature que vai ajudá-lo a não sujar
seu código.
A sintaxe para múltiplos backgrounds é praticamente idêntica a sintaxe para definir um back-
ground. Segue abaixo um exemplo:
div {
width:600px;
height:500px;
background:
url(img1.png) top left repeat-X,
url(img2.png) bottom left repeat-Y;
}
Definimos apenas uma propriedade background, o valor dessa propriedade em vez de conter ape-
nas um valor como normalmente fazemos, poderá haver vários, com suas respectivas definições de
posição, repeat e attachment (fixed).

9. MÓDULO TEMPLATE LAYOUT
Talvez você me chame de louco, mas para mim a parte mais fácil de desenvolver um site com CSS
é o planejamento e diagramação do layout. Coincidentemente é a parte que mais os desenvolvedo-
res tem problemas crossbrowser ou por falta de recursos mais avançados. Mas se você parar para
pensar, apenas uma propriedade cuida dessa parte, que é a propriedade float. De longe, para mim,
o float é a propriedade mais importante que há no CSS. Se o IE não soubesse o que é float, até hoje
nós não estaríamos fazendo sites com CSS. O float cuida de toda a diagramação do site, desde os
elementos que definirão as áreas mestres do site até os pequenos detalhes de imagens e ícones.
A propriedade float é muito simples de se entender. O problema não é o funcionamento, mas os
efeitos que a propriedade float causa nos elementos próximos. Se você pede para duas colunas fica-
rem flutuando à esquerda e outra coluna à direita, o rodapé sobe. Ou se você coloca um elemento
envolvendo outros elementos com float, esse elemento perde a altura. Estes são problemas corri-
queiros que já tem soluções inteligentes e que não apresentam chateações mais graves.
Infelizmente o float não é o ideal para a diagramação e organização dos elementos do layout. Ele
resolve muitos problemas, mas deixa a desejar em diversos sentidos. O float está completamente
ligado a ordem dos elementos no HTML. Existem técnicas que você consegue fazer quase que
qualquer organização visual sem encostar no código HTML. Mas há outras necessidades que in-
variavelmente você precisará modificar a ordem dos elementos no meio do HTML para que a
diagramação do site saia conforme o esperado. Essa organização do HTML pode alterar desde pro-
gramação server-side e até resultados de SEO e acessibilidade. Por isso é interessante que o HTML
fique organizado de forma que ele supre as necessidades dessas bases. Sua organização visual deve
ser independente desta organização.
Tendo em vista estes e outros problemas o W3C criou um novo módulo. Na verdade ele não é o
único, e nem pode ser para que tenhamos diversas formas de trabalhar. O módulo em questão é
chamado de Template Layout. Esse módulo consiste em uma forma de criarmos e organizarmos os
elementos e informações do layout de forma menos espartana e mais flexível.

Podemos dividir a construção do layout em duas grandes partes: 1) Definição dos elementos mes-
tres e grid a ser seguido. 2) Formatação de font, cores, background, bordas etc.
As propriedades nesta especificação trabalham associando uma política de layout de um elemento.
Essa política é chamada de template-based positioning (não tem nada a ver com a propriedade
position, pelo contrário é uma alternativa) que dá ao elemento uma grid invisível para alinhar seus
elementos descendentes.
Porque o layout deve se adaptar em diferentes janelas e tamanhos de papéis, as colunas e linhas do
grid deve ser fixas ou flexíveis dependendo do tamanho.
O W3C mostra alguns casos comuns:
• Páginas complexas com múltiplas barras de navegação em áreas com posições fixas como
publicidade, submenus e etc.
• Formulários complexos, onde o alinhamento de labels e campos podem ser facilmente defi-
nidos com as propriedades deste módulo com a ajuda das propriedades de margin, padding
e tables.
• GUIs, onde botões, toolbars, labels, ícones etc, tem alinhamentos complexos e precisam estar
sempre alinhados caso o tamanho ou a resolução da tela mudam.
• Medias que são paginadas, como medias de impressão onde cada página são divididos em
áreas fixas para conteúdos de gêneros diferentes.
Template-based positioning são uma alternativa para a propriedade position com o valor abso-
lute. Antigamente lembro-me que quase todos os desenvolvedores tentavam organizar e diagra-
mar layouts utilizando position. Não que seja errado, mas definitivamente não é a melhor for-
ma. Costumo dizer em meus cursos e palestras que position é para detalhes. Nada muito grande,
mas para pequenos detalhes. Usamos position para posicionarmos elementos que não tem rela-
ção direta com sua posição no código HTML. Ou seja, não importa onde o elemento esteja, o
position:absolute; irá posicionar o elemento nas coordenadas que você quiser.

Sintaxe e funcionamento
O módulo Template Layout basicamente define slots de layout para que você encaixe e posicione
seus elementos. O mapeamento dos slots é feito com duas propriedades que já conhecemos que
este módulo adiciona mais alguns valores e funcionalidades, são as propriedades position e display.
A propriedade display irá definir como será o Grid. Quantos slots e etc.
A propriedade position irá posicionar seus elementos nestes slots.
Veja o código HTML abaixo:
<div class=”geral”>
<nav class=”menu”>...</nav>
<aside class=”menulateral”>...</aside>
<aside class=”publicidade”>...</aside>
<article class=”post”>...</article>
<footer>...</footer>
</div>
Agora iremos definir a posição destes elementos. O código CSS seria assim:
.geral {
display: “aaa”
“bcd”
“eee”;
}
nav.menu {position:a;}
aside.menulateral {position:b;}
aside.publicidade {position:d;}
article.post {position:c;}
footer {position:e;}
O funcionamento da propriedade display

A propriedade display define a organização dos slots. Um slot é um local onde o seu elemento fica-
rá. Cada elemento fica em um slot.
Aqui o elemento display trabalha como um table, onde seu conteúdo será colocando em colunas
e linhas. A única diferença é que o número de linhas e colunas não dependem do conteúdo é fixa

pelo valor da propriedade. E a outra principal diferença é que a ordem dos descendentes no código
não importa.
Existem alguns valores para que você trabalhe: letra, @ (arroba) e “.” (pronto).
Cada letra diferente é um slot de conteúdo diferente. O @ define um sinal para um slot padrão. E o
“.” (ponto) define um espaço em branco.
Quando repetimos as letras como no exemplo anterior, tanto na horizontal quanto na vertical, é
formado um slot único que se expande para o tamanho da quantidade de slots. Lembra do colspan
ou rowspan utilizados na tabela? Pois é, funciona igualzinho.
Não é possível fazer um slot que não seja retangular ou vários slots com a mesma letra. Um templa-
te sem letra nenhuma também não é possível. Um template com mais de um @ também é proibido.
Se houverem esses erros a declaração é ignorada pelo browser.
Pra definir a altura da linha (row-height) podemos utilizar o valor padrão “auto”, que define altura
que a altura da linha é feito de acordo com a quantidade de conteúdo no slot. Você pode definir um
valor fixo para a altura. Não é possível definir um valor negativo. Quando definimos um * (asterís-
co) para a altura, isso quer dizer que todas as alturas de linha serão iguais.
A largura da coluna (col-width) é definida com valores fixos, como o row-height. Podemos definir
também o valor de * que funciona exatamente igual ao altura de linha, mas aplicados a largura da
coluna. Há dois valores chamados max-content e min-content que fazem com que a largura seja
determinada de acordo com o conteúdo. Outro valor é o minmax(p,q) que funciona assim: a lar-
gura das colunas são fixadas para ser maiores ou iguais a p e menores ou iguais a q. Pode haver um
espaço branco (white space) em volta de p e q. Se q > p, então q é ignorado e o minmax(p,q) é trata-
do como minmax(p,p). O valor fit-content é o equivalente a minmax(min-content, max-content).

Definindo a largura e altura dos slots
Para definir a altura dos slots, utilizamos uma sintaxe diretamente na propriedade display. Veja
abaixo um exemplo de como podemos fazer isso:
display: “a a a” /150px
“b c d”
“e e e” / 150px
100px 400px 100px;
Formatando de uma maneira que você entenda, fica assim:
“b c d”
“e e e” /150px
100px 400px 100px;
Ou seja, a primeira coluna do grid terá 100px de largura, a segunda 400px e a terceira 100px.
As medidas que coloquei ao lado, iniciando com uma / (barra) definem a altura das linhas. Logo a
primeira linha terá 150px e a terceira linha também. A linha do meio, como não tem altura definida
terá a altura de acordo com a quantidade de conteúdo.
O espaço entre as colunas são definidos com “.” (pontos). Veja o exemplo abaixo:
“. . .” /50px
“b c d”
“. . .” /50px
“e e e” /150px
100px 400px 100px;

No exemplo acima fiz duas colunas no código compostos por pontos em vez de fazer com letras.
Isso quer dizer que entre as colunas do grid haverá um espaço em branco de 50px de altura. Veja a
imagem abaixo para entender melhor o código:
O funcionamento da propriedade position

O valor da propriedade position especifica qual linha e coluna o elemento será colocado no tem-
plate. Você escreve apenas uma letra por elemento. Vários elementos podem ser colocados em um
mesmo slot. Logo estes elementos terão o mesmo valor de position.
Abaixo veja uma imagem que pegamos diretamente do exemplo do W3C. O layout é muito simples:
Este layout é representado pelo código abaixo. Primeiro o HTML:
<ul id=”nav”>
<li>navigation</li>
</ul>
<div id=”content”>
<div class=”module news”>
<h3>Weather</h3>
<p>There will be weather</p>
</div>
<div class=”module sports”>
<h3>Football</h3>
<p>People like football.</p>
</div>
<h3>Chess</h3>
<p>There was a brawl at the chess tournament</p>
</div>
<div class=”module personal”>
<h3>Your Horoscope</h3>
<p>You’re going to die (eventually).</p>
</div>
<p id=”foot”>Copyright some folks</p>
</div>
Agora veja o CSS com toda a mágica:
body {
display: “a b”
10em *;
}
#nav {
position: a;
}
#content {
position: b;
display: “c . d . e “
“. . . . . “ /1em
“. . f . . “
* 1em * 1em *;
}
.module.news {position: c;}
.module.sports {position: d;}
.module.personal {position: e;}
#foot {position: f;}
Lembre-se que não importa a posição dos elementos no código. E essa é a mágica. Podemos or-
ganizar o código HTML de acordo com nossas necessidades e levando em consideração SEO,
Acessibilidade e processo de manutenção. O HTML fica totalmente intacto separado de qualquer
formatação. Muito, mas muito interessante.
Pseudo-elemento ::slot()
Você pode formatar um slot especifico simplesmente declarando-o no CSS. Suponha que você
queira que um determinado slot tenha um fundo diferente, alinhamento e etc... Essa formatação
será aplicada diretamente no slot e não no elemento que você colocou lá. Fica mais simples de se
formatar porque você não atrela um estilo ao elemento e sim ao slot. Se você precisar posicionar
aquele elemento em outro lugar, você consegue facilmente.
body { display: “aaa”

“bcd” }
body::slot(b) { background: #FF0 }
body::slot(c), body::slot(d) { vertical-align: bottom }

As propriedades aplicadas no pseudo elemento slot() seguem abaixo:
• Todos as propriedades background.

• vertical-align
• overflow
• box-shadow, block-flow e direction ainda estão sendo estudados pelo W3C se elas entrarão
ou não.
10. CORES
RGBA
Normalmente em web trabalhamos com cores na forma de hexadecimal. É a forma mais comum
e mais utilizada desde os primórdios do desenvolvimento web. Mesmo assim, há outros formatos
menos comuns que funcionam sem problemas, um destes formatos é o RGB. O RGB são 3 con-
juntos de números que começam no 0 e vão até 255 (0% até 100%), onde o primeiro bloco define
a quantidade de vermelho (Red), o segundo bloco a quantidade de verde (Green) e o último bloco
a quantidade de azul (Blue). A combinação destes números formam todas as cores que você pode
imaginar.
No HTML o RGB pode ser usado em qualquer propriedade que tenha a necessidade de cor, como:
color, background, border etc. Exemplo:
p {
background:rgb(255,255,0);
padding:10px;
font:13px verdana;
}
Este código RGB define que o background o elemento P será amarelo.
RGBA e a diferença da propriedade OPACITY

Até então nós só podíamos escrever cores sólidas, sem nem ao menos escolhermos a opacidade
dessa cor. O CSS3 nos trouxe a possibilidade de modificar a opacidade dos elementos via pro-
priedade opacity. Lembrando que quando modificamos a opacidade do elemento, tudo o que está
contido nele também fica opaco e não apenas o background ou a cor dele. Veja o exemplo abaixo
e compare as imagens.

A primeira é a imagem normal, sem a aplicação de opacidade:
Agora com o bloco branco, marcado com um P, com opacidade definida. Perceba que o back-
ground e também a cor do texto ficaram transparentes.
Isso é útil mas dificulta muito quando queremos que apenas a cor de fundo de um determinado
elemento tenha a opacidade modificada. É aí que entra o RGBA. O RGBA funciona da mesma
forma que o RGB, ou seja, definindo uma cor para a propriedade. No caso do RGBA, além dos 3
canais RGB (Red, Green e Blue) há um quarto canal, A (Alpha) que controla a opacidade da cor.
Nesse caso, podemos controlar a opacidade da cor do background sem afetar a opacidade dos ou-
tros elementos:
Veja um exemplo de código aplicado abaixo:
p {
background:rgba(255,255,0, 0.5);
padding:10px;
font:13px verdana;
}
O último valor é referente ao canal Alpha, onde 1 é totalmente visível e 0 é totalmente invisível. No
exemplo acima está com uma opacidade de 50%.
currentColor
O valor currentColor é muito simples de se entender e pode ser muito útil para diminuirmos o
retrabalho em alguns momentos da produção. Imagine que o currentColor é uma variável cujo seu
valor é definido pelo valor da propriedade color do seletor. Veja o código abaixo:
p {
background:red;
padding:10px;
font:13px verdana;
color: green;
border:1px solid green;
}
Note que o valor da propriedade color é igual ao valor da cor da propriedade border.
Há uma redundância de código, que nesse caso é irrelevante, mas quando falamos de dezenas de
arquivos de CSS modulados, com centenas de linhas cada, essa redundância pode incomodar a

produtividade. A função do currentColor é simples: ele copia para outras propriedades do mesmo
seletor o valor da propriedade color. Veja o código abaixo para entender melhor:
p {
background:red;
padding:10px;
font:13px verdana;
color: green;
border:1px solid currentColor;
}
Veja que apliquei o valor currentColor onde deveria estar o valor de cor da propriedade border.
Agora, toda vez que o valor da propriedade color for modificado, o currentColor aplicará o mesmo
valor para a propriedade onde ela está sendo aplicada.
Isso funciona em qualquer propriedade que faça utilização de cor como background, border, etc.
Obviamente não funciona para a propriedade color. O currentColor também não funciona em se-
letores separados, ou seja, você não consegue atrelar o valor da propriedade color ao currentColor
de outro seletor.
11. PAGED MEDIA
Com certeza você já deve ter tentado ler um livro ou uma apostila em algum site na web e preferiu
imprimir o texto para ler off-line, no papel por ser mais confortável ou por ser mais prático quando
não se está conectado. Existem vários motivos para que um leitor queira imprimir o conteúdo de
um site, principalmente sites com textos longos e pesados. Durante muito tempo o principal mo-
tivo era que ler na tela do computador era cansativo. Hoje isso ainda é um problema, mas com o
avanço das telas e do aparecimento das tablets no mercado, você consegue passar mais tempo na
frente de uma tela lendo grandes quantidades de texto. O problema é que geralmente a organização
de páginas e o conteúdo não é exatamente confortável para passarmos horas lendo.
Outro problema comum é que nós desenvolvedores não temos uma maneira fácil de formatar pági-
nas. Na verdade temos, mas é um pouco de gambiarra e claro, não é maneira correta. A especifica-
ção de Paged Media traz nos possibilita formatar as páginas, transparências (aqueles “plásticos“ que
usamos com retroprojetores) ou até mesmo páginas que serão vistas pelo monitor. Controlaremos
suas medidas, tamanhos, margens, quebras de páginas e etc...
Nota: Para você não se confundir, quando digo páginas, quero dizer páginas físicas, de papel, não
páginas web, ok? ;-)
@page
Definiremos com CSS3 um modelo de página que especifica como o documento será formatado
em uma área retangular, chamada de page box, com larguras e alturas limitadas. Nem sempre o
page box tem referência correspondente para uma folha de papel física, como normalmente conhe-
cemos em diversos formatos: folhas, transparências e etc. Esta especificação formata o page box,
mas é o browser ou o meio de acesso que o usuário está utilizando que tem a responsabilidade de
transferir o formato do page box para a folha de papel no momento da impressão.

O documento é transferido no modelo da página para um ou mais page boxes. O page box é uma
caixa retangular que será sua área de impressão. Isso é como se fosse um viewport do browser.
Como qualquer outro box, a page box tem margin, border, padding e outras áreas. O conteúdo e as
áreas de margin do page box tem algumas funções especiais:
A área de conteúdo do page box é chamada de area da página ou page area. O conteúdo do docu-
mento flui na área de página. Os limites da área da página na primeira página estabelece o retângu-
lo inicial que contém o bloco do documento.
A área da margem da page box é dividido em 16 caixas de margem ou margin boxes. Você pode
definir para cada caixa de margem sua própria borda, margem, padding e áreas de conteúdo.
Normalmente essas caixas de margem são usadas para definir headers e footers do documento.
Confesso que o nome utilizado (caixas de margem) é meio estranho.
As propriedades do page box são determinadas pelas propriedades estabelecidas pelo page context,
o qual é a regra de CSS @page. Para definir a largura e altura de uma page box não se usa as pro-
priedades width e height. O tamanho da page box é especificada utilizando a propriedade size no
page context.
Terminologia e Page Model (modelo de página)

O page box tem algumas áreas simples de se entender que facilitará a explicação. Veja abaixo uma
imagem e uma explicação de suas respectivas áreas:
Page box
O page box é onde tudo acontece. Tenha em mente que o page box é o viewport das medias impres-
sas. É lá que conterá as áreas de margem, padding, border e onde o texto será consumido.
A largura e altura do page box é determinada pela propriedade size. Em um caso simples, o page
box tem a largura e a altura de uma folha. Entretanto em casos complexos onde page box difere
das folhas de papel em valores e orientações já que você pode personalizar de acordo com sua
necessidade.
Page area
A page area é a area de conteúdo (content area) do page box.
Margin box
Margin boxes contém boxes para header e footer. São conjunto de 16 boxes onde você pode inserir
conteúdo útil como número da página, título do livro, etc, etc, etc. Essas áreas ficam fora do Page
area. Cada um tem suas margins, paddings e bordas individuais. Veja o diagrama abaixo para vi-
sualizar melhor.
Page sheet
A folha, a página, a superfície que será impresso o conteúdo. A ilustração abaixo mostra a repre-
sentação de uma folha.

Non-printable area - Área não impressa
A área de não impressão é a área onde o dispositivo de impressão não é capaz de imprimir. Esta
área depende do dispositivo que você está utilizando. O page box fica dentro da área de impressão.
Área de impressão
A área impressa é onde o dispositivo de impressão é capaz de imprimir. A área de impressão é o
tamanho da page sheet menos a área de não impressão. Como a área de não impressão, a área útil
de impressão depende muito do dispositivo. O dispositivo pode ajustar o conteúdo para que seja
impresso sem problemas nessa área. Cada dispositivo tem seu meio de ajuste.
Propriedade size
A propriedade size especifica o tamanho e a orientação da área do de conteúdo, o page box. O ta-
manho do page box pode ser definida com valores absolutos (px) ou relativos (%). Você pode usar
três valores para definir a largura e a orientação do page box:
auto
O page box irá ter o tamanho e orientação do page sheet escolhido pelo usuário.
landscape
Define que a página será impressa em modo paisagem. O page box neste caso tem o mesmo ta-
manho da página, mas o lado maior é o horizontal. Se o tamanho da página não for definido, o
tamanho é especificado pelo usuário e seu dispositivo.
portrait
Define que a página será impressa em modo retrato. O page box neste caso tem o mesmo tamanho
da página, mas o lado maior é o vertical. Se o tamanho da página não for definido, o tamanho é
especificado pelo usuário e seu dispositivo.

Veja um exemplo abaixo:
@page {
size: auto; /* auto is the valor padrão */
margin: 10%; /* margem */
}
Como nessa caso a margem é variável, ela está sendo relativa às dimensões da página. Logo se a
página uma A4, com as dimensões: 210mm x 297mm, as margens serão 21mm e 29.7mm.
Outro exemplo:
@page {
size: 210mm 297mm; /* definem o page-sheet para um tamanho de A4
*/
}
Page-size
O page-size pode ser especificado utilizando um dos media names abaixo. Isso é o equivalente a
utilizar os valores escritos diretamente na propriedade size. Contudo é muito melhor utilizar o
nome de um formato de formato de papel.
Formato Descrição
A5 A página deve ser definida para o tamanho ISO A5: 148mm x 210mm.
A4 A página deve ser definida para o tamanho ISO A4: 210 mm x 297 mm.
B5 A página deve ser definida para o tamanho ISO B3 media: 176mm x 250mm.
B4 A página deve ser definida para o tamanho ISO B4: 250mm x 353mm.
letter A página deve ser definida para o tamanho papel carta: 8.5 pol x 11 pol
Abaixo veja um exemplo de aplicação:
@page {
size: A4 landscape;
}
O W3C tem uma especificação muito extensa que pode ser encontrada aqui:
http://www.w3.org/TR/css3-page/
12. @FONT-FACE
A regra @font-face é utilizada para que você utilize fontes fora do padrão do sistema em seus sites.
Para que isso funcione, nós disponibilizamos as fontes necessárias em seu servidor e linkamos estas
fontes no arquivo CSS. A sintaxe é bem simples e tem suporte a todos os navegadores, com algumas
ressalvas.
@font-face {
font-family: helveticaneue;
src: url(helveticaNeueLTStd-UltLt.otf);
}
Na primeira linha você customiza o nome da font que você usará durante todo o projeto. Na segun-
da linha definimos a URL onde o browser procurará o arquivo da font para baixar e aplicar no site.
Você aplica a fonte como abaixo:
p {font:36px helveticaneue, Arial, Tahoma, Sans-serif;}
Suponha que o usuário tenha a font instalada, logo ele não precisa baixar a font, assim podemos
indicar para que o browser possa utilizar o arquivo da própria máquina do usuário. Menos requi-
sições, mais velocidade. Veja o código abaixo:
@font-face {
src: local(HelveticaNeueLTStd-UltLt.otf),
url(HelveticaNeueLTStd-UltLt.otf);
}

Abaixo segue uma série de formatos que podem ser usados e que os browsers podem adotar:
String Font Format Common Extensions
truetype TrueType .ttf
opentype OpenType .ttf, .otf
truetype-aat TrueType with Apple Advanced .ttf
Typography extensions
embedded-opentype Embedded OpenType .eot
woff WOFF (Web Open Font .woff
Format)
svg SVG Font .svg, .svgz
Compatibilidade
As versões 7, 8 e 9 do Internet Explorer aceitam o @font-face apenas se a font for EOT. Você pode
encontrar qualquer conversor online que esse problema é resolvido. Você pode converter suas fon-
tes para EOT diretamente no Font Squirrel. O Safari, Firefox, Chrome e Opera aceitam fontes em
TTF e OTF.
Para suprir a necessidade de atenção do Internet Explorer, você precisa especificar a URL da font
.eot para que o Internet Explorer possa aplicar a font corretamente. A sintaxe fica desta forma:
@font-face {
src: url(helveticaNeueLTStd-UltLt.eot);
}
Kit de sobrevivência
O Font Squirrel fez um pequeno favor para toda a comunidade. É um sisteminha que con-
verte suas fontes para os formatos necessários e te devolve para você utilizar em seus sites:
http://migre.me/4qST9
13. PRESENTATION-LEVELS
A informação na web é reutilizada de diversas maneiras. Toda informação publicada é reutilizada
por diversos meios de acesso, seja o seu browser, leitor de tela ou robôs de busca. O HTML propor-
ciona essa liberdade para a informação. Por ser uma linguagem muito simples, podemos reutilizar
a informação marcada com HTML em diversos meios de acesso. Mas o HTML não cuida da forma
com que o usuário vai visualizar a informação em seu dispositivo. O HTML apenas exibe a infor-
mação. A maneira que o usuário consome essa informação é diferente em cada um dos meios de
acesso e dispositivos. É aí que entra todo o poder do CSS. O CSS formata a informação para que
ela possa ser acessível em diversos usar agents (meios de acesso). Se você acessa o site do seu banco
pelo monitor de 22’’ da sua casa ou pelo seu celular, a informação tem que aparecer bem organizada
em ambos cenários. É o CSS que organiza visualmente essas informações.
Além disso podemos apresentar a informação de diversas formas em um mesmo dispositivo. Por
exemplo: você pode ver uma galeria de imagens da maneira convencional, clicando nas thumbs das
fotos ou ver em forma de slideshow. Podemos levar essas experiências para websites de conteúdo
textual também. A especificação de presentation-levels é uma das especificações que levam o usu-
ário a terem conteúdo mostrados de uma outra forma da qual estamos acostumados. É muito útil
para apresentações de slides, com efeitos, transições e etc ou qualquer documento que seria mais
bem apresentado no formato de apresentação, como uma proposta, documentos técnicos e etc.
Como funciona o modelo

O modelo por trás da especificação é simples. Cada elemento no documento é definido como um
“elemento de apresentação“ ou no formato original “element’s presentation level“ - EPL.
O EPL pode ser explicito em uma folha de estilo ou calculado automaticamente baseado na posição
do elemento pela estrutura do documento. É assim que o browser calcula para mostrar os elemen-
tos progressivamente, como se faz normalmente em programas de apresentação.

O elemento fica em um dos três seguintes níveis que também são representadas por classes: below-
level, at-level e above-level. Dependendo da pontuação de EPL que o browser dá, o elemento fica
em um determinado nível. Essas pseudo-classes podem e devem ser modificadas via CSS.
A propriedade presentation-level
A propriedade presentation-level define como os valores de apresentação (EPL) de um determi-
nado objeto devem ser calculados. São três valores possíveis: números inteiros, increment e same.
Quando definimos um valor inteiro, o elemento tem aquele valor fixo.
Quando colocamos increment, o valor do objeto aumenta um ponto em relação ao objeto anterior.
Suponha que há duas LI em uma UL. A primeira LI tem o valor de 1, a segunda tem valor de 2 e
assim por diante.
Quando definimos o valor same, o browser computa o mesmo valor do objeto anterior.
Isso tudo vai ficar mais esclarecido com os exemplos a seguir.
Utilizando o mesmo exemplo da especificação do W3C, temos o código abaixo:
<!DOCTYPE html>
<html>
<body>
<h1>strategies</h1>
<h2>our strategy</h2>
<ul>
<li>divide</li>
<li>conquer
<p>(in that order)</p>
</li>
</ul>
<h2>their strategy</h2>
<ul>
<li>obfuscate</li>
<li>propagate</li>
</ul>
</body>
</html>
Vamos definir o CSS de presentation-levels para esse HTML adicionado o código CSS:
@media projection {
h1 { page-break-before: always }
li { presentation-level: increment }
:below-level { color: black }
:at-level { color: red }
:above-level { color: silver }
}
Definimos que o H1 irá sempre iniciar em uma nova página.
Mas o mais importante é a propriedade presentation-level que definimos para a LI. Isso quer dizer
que a cada LI o browser contará mais um ponto.
As três pseudo-classes que falamos no começo do texto: below-level, at-level, above-level, que for-
mata os elementos que foram mostrados anteriores, o que elemento que está sendo mostrado e o
próximo elemento.
Sendo assim, o browser calcula a pontuação de cada um dos elementos utilizados no exemplo
como mostra abaixo:
HTML Valor de EPL
<h1>strategies</h1> 0
<h2>our strategy</h2> 0
<ul> 0
<li>divide</li> 1
<li>conquer</li> 2
</ul> 0
<h2>their strategy</h2> 0
<ul> 0
<li>obfuscate</li> 1
<li>propagate</li> 2
</ul> 0

Temos um outro exemplo, segue abaixo o HTML e logo depois a tabela com os valores de EPL:
<!DOCTYPE html>
<html>
<style>
@media projection {
h1 { presentation-level: 0; }
body * { presentation-level: 3; }
:above-level { display: none; }
}
</style>
<body>
<h1>strategies</h1>
<ul>
<li>divide</li>
<li>conquer</li>
</ul>
<ul>
<li>obfuscate</li>
<li>propagate</li>
</ul>
</body>
</html>
Perceba que agora definimos no CSS que tudo dentro de body tem o valor de 3. Logo o H1 que foi
definido como 0 pela propriedade presentation-level tem o valor de 3.
Definimos também display:none; para os próximos elementos. Agora veja a pontuação aplicada:
HTML Valor de EPL
<ul> 0
<li>divide</li> 0
<li>conquer</li> 0
</ul> 0
<ul> 0
</ul> 0
O W3C tem uma especificação completa e em constante atualização do presentation-levels aqui:
http://www.w3.org/TR/css3-preslev/

Criação de Web Sites I
de
Parte 3 – Folhas de Estilo
Conteúdo
12. Introdução........................................................................................................... 67
12.1. O que são folhas de estilo? ..........................................................................................67
12.2. Para que servem as folhas de estilo ............................................................................68
Separar apresentação da estrutura....................................................................................68
Controle absoluto da aparência da página......................................................................68
Páginas mais leves ..............................................................................................................68
Manutenção de um grande site ........................................................................................68
13. Regras Básicas .................................................................................................... 70
13.1. Regras, declarações e seletores ....................................................................................70
13.2. Múltiplas declarações e seletores.................................................................................71
13.3. Comentários e instruções.............................................................................................71
13.4. Valores ............................................................................................................................72
13.5. Herança...........................................................................................................................73
13.6. Descritores HTML especiais .......................................................................................73
13.7. Como incluir estilos em uma página ..........................................................................74
13.8. Classes e IDs..................................................................................................................76
13.9. Links (pseudo-classes e pseudo-elementos) ..............................................................77
13.10. Seletores de contexto..................................................................................................77
13.11. Cascata de folhas de estilo .........................................................................................77
14. Fontes ................................................................................................................. 79
14.1. font-family......................................................................................................................79
14.2. font-size ..........................................................................................................................80
14.3. font-style e font-weight ................................................................................................82
14.4. font-variant.....................................................................................................................84
14.5. A propriedade font........................................................................................................85
15. Atributos de texto ............................................................................................... 86
15.1. text-transform ................................................................................................................86
15.2. text-decoration...............................................................................................................87
15.3. text-align e vertical-align...............................................................................................88
15.4. text-indent ......................................................................................................................89
15.5. line-height.......................................................................................................................89
15.6. letter-spacing ..................................................................................................................90
16. Cores .................................................................................................................. 91
16.1. color ................................................................................................................................92
16.2. background-color ..........................................................................................................92
16.3. background-image.........................................................................................................93
16.4. background-repeat ........................................................................................................93
65
16.5. background-position e background-attachment.......................................................93

16.6. background.....................................................................................................................95
17. Propriedades de classificação ............................................................................... 96
17.1. display .............................................................................................................................96
17.2. white-space.....................................................................................................................96
17.3. list-style ...........................................................................................................................97
18. Controle de blocos................................................................................................ 98
18.1. margin e padding ...........................................................................................................99
18.2. border-width ................................................................................................................100
18.3. border-color .................................................................................................................100
18.4. border-style ..................................................................................................................101
18.5. border............................................................................................................................102
18.6. width e height ..............................................................................................................102
18.7. float................................................................................................................................102
18.8. clear ...............................................................................................................................103
19. Posicionamento.................................................................................................. 104
19.1. position, top e left .......................................................................................................104
19.2. z-index...........................................................................................................................106
19.3. visibility .........................................................................................................................106
20. Exercícios ......................................................................................................... 107
20.1. Testes sobre Folhas de Estilo....................................................................................107
20.2. Exercícios com Folhas de Estilo...............................................................................109
66
12. Introdução
12.1. O que são folhas de estilo?

Uma folha de estilos é um conjunto de regras que informa a um programa, responsável pela
formatação de um documento, como organizar a página, como posicionar e expor o texto e,
dependendo de onde é aplicada, como organizar uma coleção de documentos.
A maior parte dos programas de editoração eletrônica e processadores de texto moder-
nos trabalham com folhas de estilos. O processo consiste em definir um rótulo (nome do esti-
lo) para um determinado parágrafo e em seguida alterar os seus atributos. Todo parágrafo que
for rotulado com aquele estilo passará a exibir as características definidas anteriormente. Qual-
quer alteração nos atributos de um estilo afetará todos os parágrafos que estiverem rotulados
com ele.
Esta descrição, que se aplica a estilos em processadores de texto e programas de editora-
ção eletrônica, também vale para a Web. 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 mar-
cados com <H1> em um documento sejam exibidos em tamanho de 48 pontos, basta definir a
regra:
dentro de uma "folha de estilos" aplicada ao documento.

A folha de estilos pode ser um arquivo de textos simples (alfabeto ISO-Latin1) com a
extensão .css. Para vinculá-lo a uma página HTML, esta deve ter dentro do seu bloco <HE-
AD> ... </HEAD> o seguinte descritor:
<LINK REL="stylesheet" HREF="url_do_arquivo.css">
O restante deste artigo tratará dos fundamentos da tecnologia de folhas de estilos aplicáveis ao
HTML, chamada de Cascading Style Sheets (folhas de estilo em cascata), mostrando como estabelecer
as regras de estilo para um bloco de texto, uma página ou todo um site. Seções específicas abordarão
cores, imagens, tipologia e posicionamento. Este texto não é completo. Omitimos propriedades e
recursos não suportados nos browsers e nos limitamos àqueles recursos que constam da especifica-
ção CSS1 (não incluímos recursos proprietários nem a maior parte das novidades do CSS2 que não
67
funcionam nos browsers disponíveis no mercado). Para uma abordagem mais completa, consulte a
documentação oficial do W3C: http://www.w3.org/Style/.
12.2. Para que servem as folhas de estilo

Separar apresentação da estrutura
Com isto é possível voltar a suportar browsers antigos que antes estavam condenados
por não conseguirem ler a informação sem perdas. Com a informação toda armazenada no
HTML (estrutura), a apresentação (estilo) seria uma camada a mais, alterando a disposição do
texto, cores, etc. mas sem afetar a estrutura essencial da informação. Isto permite que uma
página tenha vários estilos e use scripts (programas embutidos) para decidir qual carregar (em
função do browser e da plataforma). Isto é muito menos trabalho que fazer uma página para
cada browser e plataforma, pois a atualização é feita apenas no HTML. Também, com isso, é
possível ter uma folha de estilos especial somente para impressão, onde haveria informações de
quebra de páginas, etc. (este recurso não faz parte da versão 1 do CSS).
Controle absoluto da aparência da página.

É algo que não se tem com o HTML. Pode-se usar tabelas, GIFs invisíveis de um pixel e
mais uma dúzia de "macetes" mas não se consegue fazer o texto fluir suavemente em volta de
uma imagem irregular, por exemplo. Além do mais, quanto mais sofisticada a técnica, mais
difícil é de codificar e mais "sujo" fica o código, o que o torna mais sujeito a erros. Com CSS,
pode-se colocar uma imagem em qualquer lugar da página (até fora dela), usando técnicas de
posicionamento absoluto ou relativo. Pode-se escolher a posição exata da imagem de back-
ground e fazê-la combinar com algo no foreground. As dimensões e posições são exatas e dadas
em unidades conhecidas no mundo da tipografia como pixels, pontos, paicas, milímetros.
Páginas mais leves

Com folhas de estilo é possível criar muitas páginas com um layout sofisticado que antes
só era possível usando imagens, tecnologias como Flash ou applets Java. Estas páginas eram
sempre mais pesadas, pois precisavam carregar imagens, componentes, programas. Com CSS é
possível definir texto de qualquer tamanho, posicioná-lo por cima de outros objetos, ao lado
ou por cima de texto e conseguir efeitos sofisticados a um custo (banda de rede) baixo. É pos-
sível ainda importar fontes (que o usuário talvez não tenha).
Manutenção de um grande site

Uma folha de estilos serve para toda uma coleção de páginas, podendo ser usada para
dar um estilo consistente a todo o site. Sendo aplicada em separado da informação e estrutura,
não precisará ser atualizada todas as vezes em que a informação for mudada. A página pode ser
atualizada em um editor HTML ou gerador de HTML simples, sem recursos de cor ou alinha-
68
mento, e ser formatada na hora em que for carregada pelo browser. É possível também fazer o
contrário: mudar o estilo sem alterar a informação, como ter uma página que sempre carrega
com um estilo diferente.
O uso das folhas de estilo depende da boa estrutura do HTML. A linguagem CSS (é uma
linguagem declarativa) trabalha com os elementos tratando-os como "objetos". Cada parágrafo
<P>, cada <H1>, cada <IMG> é um objeto. Objetos podem ser agrupados de várias formas.
A cada objeto ou grupo de objetos podem ser atribuídas propriedades de estilo definidas em
regras. Por exemplo, considere a seguinte regra: "todo objeto P da classe 'editorial' será azul,
terá tamanho de 12 pontos, espaçamento duplo, alinhamento pela direita e usará a família de
fontes Arial, ou, se esta não existir, Helvetica, ou então a fonte sem-serifa default do sistema".
Um arquivo CSS com apenas a regra acima conteria o texto:
P.editorial {color: 0000ff;
font-size: 12pt;
line-height: 24pt;
text-align: right;
font-family: arial, helvetica, sans-serif}
Se a folha de estilos acima for aplicada a uma página que possua parágrafos <P> rotula-
dos com o nome "editorial" (atributo 'CLASS=editorial'), eles serão formatados de acordo com
as propriedades especificadas se o browser suportar CSS. Se o browser não suportar CSS, a
estrutura será mantida (embora a aparência não seja a ideal) e o usuário conseguirá ter acesso à
informação estruturada, mesmo em um meio de visualização mais limitado.
Quando se usa CSS, são poucas as modificações necessárias no HTML. Não são neces-
sários novos descritores ou extensões. No exemplo acima, teremos que incluir apenas um atri-
buto a mais (o atributo CLASS, do HTML 4) classificando os parágrafos que fazem parte do
nosso 'editorial' (parágrafos que tem uma função diferente dos demais).
A grande vantagem das folhas de estilo é a preservação da estrutura do HTML e um
controle muito melhor do autor sobre a sua aparência na tela do usuário final. Uma página
deverá aparecer da melhor forma possível tanto num PowerPC sofisticado como naquele IBM
PCXT 4.77MHz rodando o Lynx for DOS. O primeiro utilizará todos os recursos gráficos
determinados pelas folhas de estilo. O segundo as ignorará, mas preservará a estrutura e a in-
formação
69
13. Regras Básicas
13.1. Regras, declarações e seletores

A estrutura dos estilos é bastante simples. Consiste de uma lista de regras. Cada regra pos-
sui um bloco, entre chaves ({ e }), de uma ou mais declarações aplicáveis a um ou mais seletores.
Um seletor é algo no qual pode-se aplicar um estilo. Pode ser um descritor HTML, uma hie-
rarquia 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 (ISO Latin1 ou ASCII 8-bit) 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:
Nesta regra, H1 é o seletor e {font-size: 48pt} é o bloco da declaração, que estabele-

ce 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 proprie-
dade. Pode haver mais de uma declaração de estilo para um seletor. Isto pode ser feito em ou-
tro bloco. Cada linha acrescenta ou sobrepõe declarações feitas em linhas anteriores:
H1 { color: blue }
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 }.
70
13.2. 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 }
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 legibilida-
de. 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 con-
junto de propriedades pode ser aplicada a um grupo de seletores, separando-os com vírgulas:
H1, H2, H3 { color: blue;
font-size: 18pt;
font-family: Arial, Helvetica, Sans-serif }
As declarações de estilo podem ser aplicadas em quase qualquer descritor HTML - no

mundo perfeito! Na prática, muitos browsers ainda têm problemas de compatibilidade, e não
implementam a especificação à risca, como veremos adiante.
Ao utilizar folhas de estilo, deve-se respeitar os elementos HTML que possuem descrito-
res 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.
13.3. Comentários e instruções

Além das regras, um arquivo CSS pode ter ainda comentários e instruções (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
71
sempre têm menos precedência que os locais (ou seja, os locais podem sobrepor os importa-
dos). 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(../basico.css)
@import url(http://longe.com/estilos/basico.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 C ou Java: entre /* e */:
/* este texto é ignorado até que seja encontrado
um asterisco seguido por uma barra */
13.4. Valores
Os valores que são aplicados às propriedades têm uma sintaxe que depende da proprie-
dade 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 de-
finem a mesma cor para um parágrafo:
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, ima-
gens) como valores. Ela recebe um argumento apenas com a URL (relativa ou absoluta) da
imagem:
72
P {background-image: url(../imagens/tijolos.gif)}
P {background-image: url(http://longe.com/imagens/pedras.png)}
13.5. 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 se-
rã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 pode-se 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 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.
13.6. Descritores HTML especiais

Dois descritores HTML têm importância fundamental em CSS. Eles são descritores es-
truturais puros que não definem apresentação específica na folha de estilos nativa do browser.
Com CSS é possível definir propriedades de apresentação para esses descritores. Eles são
<DIV> e <SPAN>.
<SPAN> é um descritor que deve ser usado dentro de blocos de texto apenas. É cha-
mado de descritor em-linha (inline), já que não quebra a linha antes ou depois. Ele se assemelha
73
a descritores como <B>, <I>, <SMALL>, <A HREF> e <SUP> que servem para formatar
texto dentro de parágrafos, células de tabela, etc.
<DIV> é um descritor que define um bloco ou seção da página. Pode ser usado para di-
vidir a página em seções (e subseções no Internet Explorer) e permitir que sejam aplicados estilos
específicos a essas seções. Descritores de bloco são <P>, <H1>, <TABLE>, etc. <DIV>
define um bloco sem função ou aparência definida. A função e aparência será determinada em
CSS.
13.7. 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 de-
terminar 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 à 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> (...)
HREF="http://internet-name/mystyles.css"
TYPE="text/css">
</HEAD>
O elemento <LINK> não tem descritor de fechamento e deve ser usado dentro do blo-
co <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 for-
mado pelos descritores <STYLE> e </STYLE>. Este método permite que você altere as
propriedades de estilo de uma única 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>
74
As propriedades declaradas no bloco <STYLE> sobrepõem qualquer propriedades an-

teriores do elemento (inclusive as de uma folha de estilos importada, se houver). É comum
colocar todo o código entre comentários HTML () para proteger browsers antigos
da exibição indesejada do código:

</style>
Finalmente, há uma forma de aplicar estilos diretamente a um descritor individual. Para

fazer isto deve-se usar o atributo STYLE em quase qualquer descritor. Este método não cor-
responde 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">Este texto</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"></style>
</HEAD>
75
Mais adiante, existe um parágrafo e um título da forma:

<h1 style="color: navy">Auto da Compadecida</h1>
<p style="color: black">Ariano Suassuna (Recife, 1955)</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.
13.8. Classes e IDs

Às vezes um parágrafo tem uma aparência diferente dos outros parágrafos em uma 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 3.2, pode-se usar o atributo ID:
<P ID=w779>Texto especial</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 ele-
mento 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=padre>Eu retiro o que disse, João</p>
<p class=grilo>Retirando ou não retirando, o fato é que o cachorro
enterrou-se em latim</p>
<p class=bispo>Um cachorro? Enterrado em latim? </p>
<p class=padre>Enterrado latindo, Senhor Bispo, Au, au, au, não sa-
be? </p>
Para dar a cada parágrafo de um mesmo personagem (mesma classe) os mesmos atribu-
tos, usa-se:
P.grilo { color: maroon }
P.padre { color: black }
P.bispo { color: navy }
76
Desta maneira, todos os textos que deverão ser lidos pelo personagem "Bispo" estarão
em azul marinho.
Uma classe também pode conter descritores diferentes. Se todos os textos citados por
um 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.
13.9. Links (pseudo-classes e pseudo-elementos)

Para seletores especiais que mudam de estado, como o texto marcado com <A>, é pos-
sí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}
13.10. Seletores de contexto

Você também pode definir seletores que só serão aplicados se estiverem no contexto de
um outro seletor, por exemplo:
P.verde EM {color: 000040}
indica que o EM só terá sua cor alterada se ocorrer dentro de um bloco P da classe "verde".
Os seletores de contexto podem ser bem longos:
.bispo P UL UL LI A.classX:link {font-style: italic }
fará com que apenas os links não visitados da classe "classX" que estejam dentro de itens de
lista de segundo nível situados dentro de um parágrafo dentro de um bloco qualquer da classe
"bispo" sejam mostradas em itálico.
13.11. Cascata de folhas de estilo

Existem seis diferentes folhas de estilo que podem ser definidas. Além das três formas
que mostramos em seção anterior deste capítulo, há ainda, segundo a especificação, mais três
folhas de estilos que podem afetar uma página: 1) uma folha de estilos que é importada por
outra folha de estilos (isto é diferente daquela que é vinculada ao HTML, dentro de um
77
<link>), 2) uma folha de estilos definida pelo usuário (ou leitor da página) e 3) a folha de esti-
los default do browser (que é usada quando outra folha não define os estilos).
Todas estas folhas de estilo diferentes podem provocar uma grande confusão se não
houver uma regra clara de como devem ser consideradas. Ainda há um sétimo fator que é a
formatação introduzida pelo HTML, como nos descritores <font> e atributos align=center.
Listando todas as folhas de estilos que podem afetar um texto, temos:
1. Folha de estilos default do browser: todos os browsers possuem regras comuns para formatar
um texto. A especificação HTML não impõe um formatação padrão. Netscape Navigator por
exemplo usa um fundo cinza como padrão e links azuis sublinhados. Já o Internet Explorer
prefere um fundo branco.
2. Folha de estilos definida pelo leitor: a especificação define a possibilidade do leitor estabelecer
uma folha de estilos própria. Isto é parcialmente conseguido quando o browser permite
que se escolha diferentes cores para fundo, texto e links.
3. Folha de estilos vinculada ao HTML: é a folha de estilos que é importada pelo arquivo HTML
através do descritor de ligação <link>
4. Folha de estilos importada: uma folha de estilos externa (arquivo CSS) pode ser importada de
dentro de outra folha de estilos (um outro arquivo CSS ou bloco <style> no HTML) u-
sando um comando especial @import:
@import url (outroestilo.css)
5. Folha de estilos embutida no HTML: é a folha de estilos que aparece na página HTML entre os
descritores <style> e </style>.
6. Folha de estilos local: é aquela que é aplicada localmente a um descritor usando o atributo
style="lista de declarações".
7. Estilo definido pelo HTML: atributos e descritores podem provocar alterações na aparência
do texto, por exemplo: <font size>, <big>, <body bgcolor>, <p align=center>, etc.
Um browser que siga a especificação CSS à risca obedece a seguinte ordem de precedên-
cia: 1. Local, 2. Embutida, 3. Vinculada, 4. Importada, 5. HTML, 6. Leitor, 7. Browser
Na prática, as coisas não são tão bonitas. No Internet Explorer para Macintosh, a ordem é
respeitada. Na versão do Internet Explorer 3.0 para Windows, os estilos vinculados ao HTML têm
mais importância que os embutidos (o mesmo ocorre com Explorer 4 e Navigator 4). No Netsca-
pe Navigator 4 e Internet Explorer 4, os estilos aplicados via HTML têm precedência máxima (no
Internet Explorer 3 a precedência funciona corretamente, mas não no 4). Com as diferenças exis-
tentes nos browsers de hoje, não vale a pena ainda se aprofundar neste assunto. A solução
ainda é testar, testar, testar antes de colocar no ar.
78
14. 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.
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.
14.1. font-family
Uma família de fontes (tipo) é selecionada com a propriedade font-family. Esta pro-
priedade 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, que será usada caso nenhum dos nomes coincida com o nome de uma
fonte do sistema.
A sintaxe é:
font-family: fonte1, fonte2, fonte3, ..., fonte-genérica
Exemplos:
H1 { font-family: garamond }
H2 { font-family: arial, helvetica, sans-serif }
H3 { font-family: courier, "courier new", monospaced }
H4 { font-family: monospaced }
79
As fontes sans-serif e monospaced são nomes genéricos. Não se referem a uma fonte
em particular mas a um grupo genérico. Os outros são serif, cursive e fantasy.
O browser usará a primeira fonte da lista se a encontrar. Se não encontrar, irá procurar a
fonte seguinte.
Se o nome de uma fonte tiver mais de uma palavra, este deverá ser colocado entre aspas.
As aspas podem ser apóstrofes simples (') ou aspas duplas ("). Os apóstrofes são necessários
quando for preciso especificar estilos dentro de um atributo HTML:
<p style="font-family: 'times new roman', sans-serif">...</p>
14.2. font-size
O tamanho de uma fonte é alterado usando font-size. Pode ser especificado em valo-
res absolutos ou relativos. Para especificar um valor absoluto, pode-se usar:
font-size: número(pt | px | cm | mm | pc | in)
font-size: xx-small|x-small|small|medium|large|x-large|xx-large
O tamanho também 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}
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 usa-
dos cm ou in). Os browsers podem formatar os tamanhos de forma diferente e os mesmos
podem ser alterados pelos usuários nos browsers atuais. As unidades válidas são: pt (pontos),
px (pixels), pc (paicas), cm (centímetros), mm (milímetros) e in (polegadas).
80
Os tamanhos absolutos chamados pelo nome (xx-small, etc.) correspondem aos tama-
nhos de 1 a 7 do descritor <font size> e podem variar de acordo com a família de fontes usada
(variam bastante entre plataformas também). Veja um exemplo comparativo e o resultado no
Internet Explorer para Windows:
<style>
p {font-family: serif}
.t1 {font-size: xx-small}
.t2 {font-size: x-small}
.t3 {font-size: small}
.t4 {font-size: medium}
.t5 {font-size: large}
.t6 {font-size: x-large}
.t7 {font-size: xx-large}
</style>
(...)
<p><span class=t1>xx-small</span> |
<span class=t2>x-small</span> |
<span class=t3>small</span> |
<span class=t4>medium</span> |
<span class=t5>large</span> |
<span class=t6>x-large</span> |
<span class=t7>xx-large</span> <br>
<font size="1">size=1</font> |
<font size="7">size=7</font> |</p>
Os tamanhos relativos funcionam como o <BIG> e <SMALL>, aumentando a fonte

atual por 150%. A diferença é que podem passar além 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 distân-
cia horizontal equivalente ao tamanho de uma fonte (se uma fonte tem 20 pontos de tamanho,
um em corresponde a uma distância 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 contém o elemento atual. São úteis principalmente em espa-
çamento, sendo pouco usados em fontes.
81
As porcentagens são afetadas pela herança, por exemplo:

<style>
.sec {font-size: 18pt};
.sec H1 {font-size: 200%}
.sec P {font-size: 50%}
</style>
</head>
<body>
<div class=sec>Este é o texto desta seção.
<h1>2 vezes maior</h1>
<p>Este é um parágrafo da seção. O texto tem 50% do tamanho do texto
da seção.</p>
</div>
As porcentagens de 50% e 200% são aplicadas na fonte atual, que é a fonte do bloco que
contém os dois elementos (<DIV>), e que tem tamanho 18pt. O resultado é que o <H1> será
exibido em tamanho 26pt e <P> em tamanho 9pt.
14.3. font-style e font-weight

O estilo de uma fonte é afetado através de duas diferentes propriedades: font-weight,
que altera o peso da fonte, e font-style, que altera o estilo ou inclinação.
Sintaxe:
font-style: normal (ou italic, oblique)
Exemplos:
H1 { font-style: italic }
I { font-style: normal }
<p style="font-style: oblique">...</p>
Sintaxe:
82
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 não, meramente uma versão inclinada da mesma. Os browsers, porém,
não encontrando um equivalente "italic", "oblique", "kursiv" ou similar irão inclinar o texto,
simulando um itálico.
Os valores numéricos para font-weight oferecem um controle excepcional sobre o pe-
so da fonte na tela, embora isto esteja limitado aos níveis disponíveis nas fontes instaladas (pa-
ra um mesmo nome de fonte). Na prática, dos 9 níveis disponíveis de peso, se consegue 4 ou 5
níveis diferentes de mais pesado ou mais leve. 700 é o "bold" típico e 400 é o "normal".
O exemplo a seguir ilustra o efeito com a fonte "Tahoma" (Windows):
<style type=text/css>
P {font-family: tahoma;
font-size: 18pt;}
.b100 {font-weight: 100}
.nor {font-weight: normal}
.bol {font-weight: bold}
</style>
(...)
<p><span class=b100>100</span>
<span class=b200>200</span>
<span class=nor>normal</span><br>
<span class=b600>600</span><br>
<span class=bol>bold</span><br>
<span class=b900>900</span></p>
83
Os valores lighter e bolder especificam pesos de fontes relativos a algum valor her-
dado. Eles avançam ou retrocedem na escala de 100 a 900 relativos aos pesos de fontes.
14.4. font-variant
Atualmente a única opção disponível para esta propriedade é small-caps, que deve co-
locar o texto selecionado em maiúsculas, porém menores que as capitulares. Na prática, até as
maiúsculas são reduzidas no Internet Explorer.
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, são falsos. As le-
tras maiúsculas não 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... verdadei-
ros</span>.</p>
84
14.5. A propriedade font

Para especificar várias propriedades de um seletor de uma vez só, pode-se usar a propri-
edade font em vez de definir em separado font-size, font-weight, font-family, etc.
Nesta sintaxe, a ordem dos fatores é importante, porém nem todos os elementos precisam
estar presentes:
font: font-style font-variant font-weight font-size
line-height font-family
Exemplos:
H1 {font: italic 700 24pt Tahoma, Arial, sans-serif }
85
15. Atributos de texto
As propriedades desta seção tratam de transformações e atributos aplicados a texto, não

afetando a exibição das fontes. Os atributos tipográficos afetam a forma como o texto é apre-
sentado na tela como o espaçamento entre linhas, entre palavras, entre letras, o alinhamento de
parágrafos e a endentação.
A propriedade text-transform permite colocar letras em maiúsculas ou minúsculas e a
propriedade text-decoration permite acrescentar ou tirar efeitos decorativos do texto como
riscados e sublinhados.
15.1. text-transform
A propriedade text-transform realiza transformações 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 maiúsculas. Uppercase coloca tudo
em maiúsculas e lowercase coloca tudo em minúsculas. None remove qualquer transformação
deixando o texto da forma como foi definido antes das transformações.
<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 transformação:
<span class=non>É preciso conhecer bem HTML e CSS</span></p>
86
<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>
15.2. 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="algumlugar.html"
style="text-decoration: none">Link sem sublinhado</a>
<style>
.und {text-decoration: underline}
.ovr {text-decoration: overline}
.blk {text-decoration: blink}
.lin {text-decoration: line-through}
.non, .non a {text-decoration: none}
</style>
(...)
<p><span class=und>Underline. <a href="#">Link</a></span> -----
<span class=ovr>Overline. <a href="#">Link</a></span></p>
<p><span class=blk>Blink. <a href="#">Link</a></span> -----
<span class=lin>Line-through. <a href="#">Link</a></span> -----
<span class=non>None. <a href="#">Link</a></span></p>
87
Vínculos (links) são normalmente

sublinhados na maior parte dos browsers.
O sublinhado pode ser removido com a
propriedade text-decoration: none.
O browser Netscape 4 não suporta
a propriedade overline. O Internet Ex-
plorer não suporta a propriedade blink.
15.3. text-align e vertical-align

CSS oferece propriedades que permitem contro-
lar o alinhamento horizontal do texto, seu alinhamento
vertical e endentação 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 precedência. 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 característica é herdada para sub-blocos. O
valor default é sempre left. Exemplo:
DIV { text-align: center }
Alinhamento vertical em HTML só pode ser a-

plicado 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 a altura da linha (line-heght)

do próprio elemento. Usando porcentagens negativas consegue-se sobrepor elementos.
Na prática, apenas o Internet Explorer 4 suporta vertical-align com os valores sub e
super (coloca elementos em subscrito ou sobrescrito).
88
15.4. text-indent
A propriedade text-indent se aplica a elementos de bloco e realiza a endentação da
primeira linha. A sua sintaxe é:
text-indent: comprimento
text-indent: porcentagem
A porcentagem ocorre em relação à largura do elemento que contém o seletor. Pode ser
a largura total da página, a largura da célula de uma tabela, etc. Exemplos:
P { text-indent: 1 cm }
P {text-indent: 50% }
<P style="text-indent: 1in">
A endentação tratada aqui é apenas para uma linha de texto. Para endentar blocos intei-
ros, deve-se usar as margens (em seção mais a frente).
15.5. line-height
Este atributo é usado para controlar o espaço
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 (espaço du-
plo). O espaço simples equivale geralmente a line-
height: 120%. Uma line-height menor que o
tamanho da fonte produzirá sobreposição de texto.
Embora ambos os browsers mais populares su-
portem este recurso, ele não ocorre da maneira corre-
ta. Os browsers não acrescentam a mesma quantidade
de espaço antes e depois como esperado.
Um bug no Internet Explorer 3 faz com que ele
interprete valores absolutos (sem unidade) como va-
lores em pixels. Por exemplo, 1.5 indica espaço 1 e
meio ou 150%. No Internet Explorer 3 as linhas ficam
sobrepostas pois o browser interpreta a unidade co-
mo 1.5 pixels. Evite, portanto, usar valores absolutos
(use porcentagens).
A sintaxe é:
line-height: número_absoluto
line-height: comprimento ou unidade
line-height: porcentagem
89
Exemplos:
H1 {line-height: 0 } // sobreposição de linhas
H1 {line-height: 2 } // espaço duplo
H1 {line-height: 0.3em }
H1 {line-height: 150% } // espaço 1 e meio
Se você usar um valor percentual menor que 100%, um valor absoluto menor que 1 ou
uma unidade menor que o tamanho da fonte, haverá sobreposição de linhas.
15.6. letter-spacing
A propriedade letter-spacing altera o
espaço entre as letras. A sua sintaxe é:
letter-spacing: normal
letter-spacing: comprimento
As unidades podem ser quaisquer uma

das unidades válidas para tamanho de fontes
(pt, px, pc, cm, in, mm, em e ex). Na tipografia,
é mais comum usar "em" como medida de es-
paçamento por ser proporcional ao tamanho da
fonte.
Pode-se usar também valores negativos
para sobrepor caracteres, criar ligaduras (usadas
em kerning) e caracteres especiais (por exem-
plo, sobrepondo / com \).
O suporte a letter-spacing nos prin-
cipais browsers ainda é inconsistente. O Netsca-
pe (versão 4) não o suporta.
90
16. Cores
Com as propriedades de cores, podemos controlar as cores de várias partes da página, do

texto, do fundo da página e de elementos HTML. Além disso, podemos aplicar imagens de
fundo em qualquer elemento, não só no elemento BODY como já se faz em HTML.
As cores definidas em CSS, assim como em HTML, podem ser especificadas por um
número em hexadecimal (representando um código RGB) ou por um nome. Além dessas duas
formas, podem ainda ser especificadas por três números decimais, representando também o
código RGB da cor.
Os códigos RGB informam a quantidade de luz vermelha, verde e azul que compõe a
cor, respectivamente. Cada cor pode ter 16 níveis de intensidade: 0 a 256 (00 a FF, em hexade-
cimal). O total de combinações possíveis é de 16.777.216 cores.
A exibição correta das cores depende da capacidade do vídeo onde serão vistas. Poucos
sistemas têm capacidade de mostrar mais que 65.536 cores simultâneas. A maioria só mostra
256.
A tabela abaixo relaciona em negrito os 16 nomes padrão, suportados por todos os
browsers que exibem cores, e seus respectivos códigos RGB em hexadecimal e decimal.
Cor Nome Cód. Decimal Cód. Hexa Cor Nome Cód. Decimal Cód. Hexa
red 255, 0, 0 ff0000 maroon 128, 0, 0 800000
lime 0, 255, 0 00ff00 green 0, 128, 0 008000
blue 0, 0, 255 0000ff navy 0, 0, 128 000080
yellow 255, 255, 0 ffff00 olive 128, 128, 0 808000
aqua 0, 255, 255 00ffff teal 0, 128, 128 008080
fuchsia 255, 0, 255 ff00ff purple 128, 0, 128 800080
white 255, 255, 255 ffffff silver 192, 192, 192 c0c0c0
black 0, 0, 0 000000 gray 0, 0, 0 808080
Há muito mais cores com nomes suportadas pelo Netscape e Internet Explorer. Estas lista-
das são as únicas que fazem parte da especificação oficial do HTML 4. São todas "seguras", ou
seja, fazem parte da paleta básica de 216 cores.
91
16.1. 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 página e no site, como qualquer outra propriedade de estilo.
A sintaxe da propriedade color é:
color: nome_de_cor
color: #número_hexadecimal
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 são qualquer nome válido de cor. Se o browser não encontrar o nome ao qual
o estilo se refere, deve exibir a cor default (ou herdada). O símbolo "#" é opcional no código
hexadecimal. A intensidade da cor pode ser expressa em valores absolutos (0 a 255) ou percen-
tagens (0.0-100.0%).
16.2. background-color
As cores de fundo de qualquer elemento podem ser alteradas através da propriedade
background-color. A sintaxe é:
background-color: transparent (valor default)

background-color: nome_de_cor
background-color: #número_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 contém. O

fundo, para texto, ocupa todo o espaço da fonte (inclusive espaço em branco acima e abaixo
que fazem parte da fonte). A cor não é estendida quando o espaçamento entre linhas é aumen-
tado em alguns browsers.
92
16.3. background-image
Com background-image é possível 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)
Exemplos:
H1 { background-image: url(http://www.xyz.com/abc.jpg) }
B {background-image: url(../monstro.gif) navy
<TD STYLE="background-image: url(dinheiro.gif)">...</TD>
As URLs são relativas à localização do arquivo que contém a folha de estilos (pode ser a
própria página ou não). A cor de backup é usada para 'vazar' pelas partes transparentes da ima-
gem ou prevenir contra o não carregamento do fundo (para permitir a leitura em fundo escuro
pode-se usar preto como cor de backup de uma imagem escura).
16.4. background-repeat
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(china.jpg);
background-repeat: repeat-x }
TABLE{background-image: url(corinthians.gif)
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 não 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 posi-
cionamento do fundo da tela.
16.5. background-position e background-attachment

O posicionamento e a forma de exibição do papel de parede são controlados pelas pro-
priedades background-attachment e background-position. A primeira define se o fundo
93
irá ou não se mover com o texto ou ficar fixo na tela. A segunda permite o posicionamento do
fundo em um local exato da tela. Infelizmente essas duas propriedades não têm suporte uni-
versal pelos browsers comerciais (apenas o Internet Explorer os suporta).
Sintaxe:
background-attachment: fixed
background-attachment: scroll
Exemplo:
BODY {background-image: url (china.jpg);
background-attachment: fixed }
Sintaxe:
background-position: porcentagem_horiz% porcentagem_vert%
background-position: comprimento comprimento
background-position: posição_vertical posição_horizontal
Exemplos:
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 são relativos à posição do elemento sobre o qual se aplica o

estilo. As posições são sempre dadas em pares, tendo os valores separados por espaços. O
primeiro valor é sempre um valor horizontal e o segundo um valor vertical. O browser coloca
o bloco afetado dentro de uma "caixa invisível" e a posiciona de acordo com as porcentagens.
Um valor de 100% para o primeiro valor, empurra a margem direita (oposta) desta "caixa invi-
sível" contra a margem direita do browser.
Os valores de comprimento, assim como os de porcentagem também são dados em pa-
res. O primeiro é a distância da margem horizontal a partir do canto superior esquerdo do ob-
jeto; o segundo é a distância da margem superior. As unidades válidas são as mesmas usadas
em fontes (cm, mm, in, pc, px, pt, em, ex) e podem ser misturadas nos dois valores do par.
94
Os valores de posição são palavras-chave usadas também aos pares. São equivalentes das
porcentagens básicas 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%).
16.6. background
A propriedade background pode ser usada para definir várias características de fundo de
uma única vez. Na sintaxe abaixo, a ordem dos fatores é importante. A sua sintaxe é:
background: background-color background-image background-repeat
background-attachment background-position
Deve haver pelo menos um valor definido, mas qualquer número de valores pode ser a-
tribuído de uma vez.
Exemplos:
BODY {background: url(../duke.gif) white no-repeat fixed 50% 25%}
95
17. Propriedades de
classificação
Estas propriedades classificam os elementos em categorias que podem receber estilos.

Categorias podem ser listas, blocos, trechos de blocos ou itens invisíveis.
17.1. display
Esta propriedade define como um elemento é mostrado. A propriedade none desliga o e-
lemento e fecha o espaço que o objeto antes ocupava (torna o objeto invisível). block abre
uma nova caixa onde o objeto é posicionado, relativo aos outros blocos, list-item é um blo-
co com um marcador de lista e inline define um elemento como parte de um bloco.
Sintaxe:
Exemplo:
P {display: list-item}
IMG {display: none} // desliga todas as imagens
17.2. white-space
Define como o espaço em branco do elemento é gerenciado (se as linhas devem ser
quebradas para que apareçam na tela ou não (nowrap) ou se os espaços em branco, tabulações,
etc. devem ser considerados (pre).
96
17.3. list-style
Esta propriedade e as propriedades list-style-type, list-style-image e list-
style-position definem atributos para objetos de lista, como tipo de marcador, imagem do
marcador e posição. Esses elementos não são suportados no Netscape.
list-style-type: disc | circle | square | decimal | lower-roman
upper-roman | lower-alpha | upper-alpha | none
list-style-image: url(url_da_imagem)
Exemplo:
list-style-image: url(bullet.gif)
É possível definir as três propriedades através de um atalho usando list-type. A or-

dem 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
97
18. Controle de blocos
Uma “caixa” é uma propriedade de qualquer elemento de bloco no HTML (H1, P, DIV, etc.
que automaticamente definem seu próprio bloco ou parágrafo). 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 veremos nes-
ta seção mostrarão como alterá-las. A cor e tamanho da borda podem ser alterados assim co-
mo o fundo (como vimos na seção anterior). A margem externa é sempre transparente mas a
margem interna herda a cor de fundo do objeto.
Também são alteráveis 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:
98
18.1. margin e padding

As margens externas são 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 vários aspectos das margens externas de uma vez só. A or-
dem dos fatores é importante. Podem ser incluídos 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%
margin: espaço_vertical espaço_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. horário: top, right, bottom, left
// (em cima 5; à direita 3; em baixo 2;...
As margens internas (padding) são 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 vários aspectos das margens internas de uma vez só. A or-
dem dos fatores é importante. Podem ser incluídos 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%
99
padding: espaço_vertical espaço_horizontal

padding: margem_de_todos_os_lados
18.2. border-width
Pode se controlar vários aspectos das bordas como a sua espessura em cada um dos qua-
tro lados, suas cores (também cada um dos quatro lados) e estilos (idem). Isto pode ser feito de
diversas maneiras. Para que as bordas apareçam é preciso primeiro que o estilo (border-
style) seja definido. Por exemplo:
border-style: solid
A espessura das bordas pode ser controlada através da propriedade border-width, afe-
tando as espessuras de todos os lados da borda, ou individualmente através de border-top-
width, border-bottom-width, border-right-width e border-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 or-
dem dos fatores é importante. Podem ser incluídos 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 // horário: top, right, bottom, left
18.3. 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 também podem ser definidas indivi-
dualmente através de border-top-color, border-bottom-color, border-right-color e
border-left-color.
border-top-color: cor (nome ou código)

border-bottom-color: cor (nome ou código)
100
border-right-color: cor (nome ou código)

border-left-color: cor (nome ou código)
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 or-
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 indi-
vidualmente.
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 horário
18.4. border-style
O estilo de cada uma das quatro bordas pode ser alterado com border-style. Também
é possível defini-los individualmente usando border-top-style, border-bottom-style,
border-right-style e border-left-style. São vários os estilos disponíveis (tracejado,
pontilhado, várias versões 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 or-
border-style: border-top-style border-right-style
border-bottom-style border-left-style
101
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, da-
shed, solid, double, groove, ridge, inset, outset. No Netscape e Internet Explorer, funcio-
nam os estilos solid, inset (efeito baixo-relevo) e outset (efeito alto-relevo). No Netscape
solid é default mas no Explorer, o default é none, portanto, uma borda não aparece se a propri-
edade border-style não for definida antes.
18.5. border
As propriedades border-top, border-bottom, border-left e border-right agru-
pam 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 to-
das as bordas e de forma idêntica (não é possível especificar valores diferentes para as bordas
neste caso). Todos os itens não precisam aparecer, mas a ordem dos fatores é importante:
border: border-width border-style border-color
18.6. 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 blo-
co. Sintaxe:
width: comprimento | auto
height: comprimento | auto
18.7. float
A propriedade float permite que um bloco qualquer seja posicionado à direita ou es-
querda da janela do browser, fazendo com que o texto restante flua em 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:
102
18.8. clear
E finalmente, para evitar que um bloco flua em torno de uma imagem ou bloco que uti-
liza a propriedade float, existe a propriedade clear, que deve ser atribuída a um bloco ou
parágrafo que é afetado pela flutuação 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 não).
Primeiro pa- Primeiro pará-

rágrafo flui ao grafo flui ao
lado da ima- lado da ima-
gem. gem.
Outro pará-
grafo que não
devia fluir. Outro parágrafo que não
devia fluir (com clear).
103
19. Posicionamento
O posicionamento de objetos em HTML pode ser conseguido em termos absolutos ou

relativos usando CSS 2. As propriedades permitem o posicionamento em três dimensões (hori-
zontal, vertical e em camadas). Embora os recursos de posicionamento não façam parte do
CSS1, tanto o Netscape Navigator 4 como o Internet Explorer 4 o suportam.
19.1. 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 posição absoluta será a posição do objeto no nível imediatamente superior. O posi-
cionamento relativo se refere à posição anterior do objeto. Sintaxe:
position: absolute | relative
left: comprimento | porcentagem | auto
top: comprimento | porcentagem | auto
Exemplo: considere as quatro imagens a seguir:
104
<div class="imagem1">
<img src="T1.gif" width=150 height=72 border=1> 1 Posição 0 0
</div>
</div>
<img src="T3.gif" width=150 height=72 border=1> 3 Posição -25 -25
</div>
</div>
Aplicando a seguinte folha de estilos para posicionar as quatro imagens relativamente à sua
localização original obtemos a imagem ao lado. Os retângulos claros indicam a posição original
da imagem:
DIV.imagem1 {
position: relative;
top: 0px;
left: 0px;
}
DIV.imagem2 {
position: relative;
top: 0px;
left: 200px;
}
DIV.imagem3 {
position: relative;
top: -25px;
left: -25px;
}
DIV.imagem4 {
position: relative;
top: 100px;
left: 0px;
}
Usando posicionamento absoluto, o bloco é movido em relação ao canto superior es-

querdo do browser.
105
DIV.imagem1 {
position: absolute;
top: 0px;
left: 250px;
}
DIV.imagem2 {
position: absolute;
top: 100px;
left: 0px;
}
DIV.imagem3 {
position: absolute;
top: 160px;
left: 120px;
}
DIV.imagem4 {
position: absolute;
top: 200px;
left: -80px;
}
19.2. 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: número
onde número é a camada de exibição. Quanto maior o número, mais alta a camada. o corres-
ponde à camada do texto. Se um objeto tiver z-index menor que zero aparecerá atrás do
texto. Se z-index for maior que zero, aparecerá na frente. Quando não é definido ou quando
z-index: 0 o bloco ocupará a mesma camada que o texto.
19.3. visibility
Esta propriedade serve para tornar um bloco visível ou invisível. Difere de display porque
não remove o espaço antes ocupado pela imagem:
visibility: hidden | visible
Exemplo:
IMG {visibility: hidden} // torna invisíveis todas as imagens
106
20. Exercícios
20.1. Testes sobre Folhas de Estilo

1. Qual das seguintes regras de estilo está incorreta? Marque uma.
a) a:link {color: rgb(0%,40%,40%)}
b) div.code pre {margin-bottom: 0px}
c) body {font-size: 0.5cm, color: yellow, background: black}
d) .botcor {font-size: 16pt; font-family: tahoma, sans-serif;}
e) Estão todas corretas.
2. Qual dos seguintes trechos de código é ilegal dentro de um arquivo .css? Marque uma.
a) span.value {color: maroon}
b) /* <H1>Titulo</H1> */
c) @import url(http://ww.estilos.org/estilo.css);
d) <STYLE>
e) Nenhuma das alternativas é ilegal dentro de um arquivo CSS.
3. Qual das regras abaixo, de uma folha de estilos, declara que os parágrafos e células de da-
dos de tabelas terão texto vermelho?
a) P TD {color: red}
b) P: TD {color: ff0000}
c) P, TD {color: rgb(100%, 0%, 0%)}
d) P; TD {color: rgb(255, 0, 0)}
e) P, TD {color=red}
4. Qual das declarações abaixo, contida em uma página HTML, a vincula à folha de estilos
basico.css, localizada no mesmo diretório que a página?
a) <LINK REL=StyleSheet HREF="basico.css">
b) <LINK REL=StyleSheet SRC="basico.css">
c) <A HREF="basico.css" TITLE="StyleSheet">Folha de estilos</A>
d) <FRAME SRC="basico.css" REL="StyleSheet">
e) <A HREF="basico.css">Folha de estilos</A>
5. Considere o seguinte trecho de código HTML:
107
<div>
<p>Parágrafo</p>
</div>
Quais declarações abaixo, em um bloco <STYLE> do arquivo que contém o trecho acima,
farão com que o texto do parágrafo tenha tamanho 10pt em um browser que suporte fo-
lhas de estilo? Marque uma ou mais.
a) div {font-size: 20pt}
p {font-size: 50%}
b) div {font-size: 10pt}
c) p {font-size: 10pt}
d) div {font-size: 5pt}
p {font-size: 100%}
e) p div {font-size: 10pt}
6. Considere a seguinte folha de estilos, com uma única regra, vinculada a uma página HTML.
P {color: green}
Dentro dessa página, logo depois da instrução que vincula o estilo à página, há um bloco
<STYLE>, com a seguinte regra:
P {color: red}
A página possui dez parágrafos. Um deles atribui um estilo local usando o atributo STYLE,
da forma:
<P STYLE="color: blue">Parágrafo</P>
Supondo que a página seja visualizada em um browser que suporte folhas de estilo CSS,
qual é a cor da maior parte dos parágrafos dessa página?
a) azul (blue)
b) vermelha (red)
c) verde (green)
d) preta (black)
e) indefinida
7. Identifique as alternativas que contém HTML ou CSS incorretos:

a) <span style="color: red; font-size: 24pt">Texto</span>
b) <span color=red font-size="24pt">Texto</span>
c) <div class="sec1">Tem <span class=item1>mais texto</span>.</div>
d) <span>Itens e <div class="sec1">seções</div> especiais.</span>
e) <div style="P {color: yellow}"><P>Texto amarelo</P></div>
8. Considere o código HTML abaixo:

<div class=sec2>
<p class=novo>Texto modificado</p>
</div>
108
Quais das regras de estilo abaixo fará com que o parágrafo seja exibido na cor azul, em um
browser que suporte folhas de estilos CSS?
a) P {color: blue}
b) .sec2 {color: blue}
c) P.novo {color: blue}
d) .sec2 .novo {color: blue}
e) P.sec2 {color: blue}
9. Qual das regras abaixo retira o sublinhado apenas dos links visitados? Marque uma.
a) a: visited {text-decoration: none}
b) a, visited {text-decoration: none}
c) a.visited {text-decoration: none}
d) a visited {text-decoration: none}
e) Nenhuma das regras anteriores.
10. Marque apenas as alternativas verdadeiras

a) Uma mesma folha de estilos pode ser usada por várias páginas.
b) Uma mesma página pode usar várias folhas de estilo.
c) Se um browser não suportar uma folha de estilos requerida pela página, poderá ha-
ver uma degradação na qualidade da apresentação mas nunca haverá perda de in-
formação.
d) É possível construir um site inteiro usando apenas CSS.
e) A linguagem CSS usada para construir folhas de estilo é uma recomendação do
W3C – consórcio de empresas que estabelece os padrões para a Web.
20.2. Exercícios com Folhas de Estilo

Os exercícios a seguir têm a finalidade de explorar as principais propriedades do CSS e
permitir que se verifique o suporte a elas nos browsers populares. Eles são mais didáticos do
que úteis. O objetivo é apenas praticar com folhas de estilos. Para realizá-los, use os arquivos
disponíveis no disquete (ou no Website).
Conceitos básicos
1. Crie uma folha de estilos, chame-a de basico.css, e a carregue no arquivo StyleTest.html.
2. Nesta folha de estilos, usando o mínimo de declarações possível, declare:
a) que todo H1 tenha fonte Tahoma, ou sans-serif, se Tahoma não existir
b) que todo o texto do corpo (BODY) do arquivo tenha tamanho 10 pontos
c) que todos os H1, H2 e H3 sejam vermelhos
d) que os H1 tenham tamanho 24 pontos
e) que os H2 tenham tamanho 18 pontos
f) que os H3 tenham tamanho 14 pontos
3. Mude a cor do fundo da página para azul marinho (navy) e a cor default do texto para bran-
co em uma única declaração.
109
4. Faça com que todo texto marcado em itálico apareça em azul ciano (cyan).
Formas de usar CSS

5. Carregue a folha de estilos basico.css em outros arquivos HTML e veja o que acontece.
Faça com que uma dessas outras páginas tenha uma cor de fundo clara (amarela, por e-
xemplo) e cor de texto escuro (diferente daquela definida por basico.css) sem que isto alte-
re as outras paginas que usam o mesmo arquivo.
6. Faça com que o primeiro parágrafo do arquivo StyleTest.html tenha texto verde.
7. Faça com que a célula do meio da tabela de StyleTest.html tenha texto vermelho sobre
fundo amarelo (a tabela 3x3 encontra-se no meio da página).
Classes, links, seletores de contexto

Para os exercícios abaixo, desligue a folha de estilos usada nos exercícios anteriores (mude o
nome ou remova o elemento <LINK>) para que a página fique limpa outra vez. Use uma no-
va folha de estilos para aplicar as alterações a seguir.
8. Defina classes sec2, sec3, sec31 e sec32 para as seções (<DIV>) do documento Style-
Test.html. As seções estão indicadas em comentários HTML (por exemplo: ) para proteger browsers antigos
da exibição indesejada do código:

</style>
Finalmente, há uma forma de aplicar estilos diretamente a um descritor individual. Para

fazer isto deve-se usar o atributo STYLE em quase qualquer descritor. Este método não cor-
responde exatamente a uma "folha" de estilos, pois os estilos aplicados não são reaproveitáveis.
4-9
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">Este texto</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">
4-10
<style type="text/css">  </style>
</HEAD>
Mais adiante, existe um parágrafo e um título da forma:

<h1 style="color: navy">Auto da Compadecida</h1>
<p style="color: black">Ariano Suassuna (Recife, 1955)</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.
4.2.8. Classes e IDs

Às vezes um parágrafo tem uma aparência diferente dos outros parágrafos em uma 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 3.2, pode-se usar o atributo ID:
<P ID=w779>Texto especial</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 ele-
mento 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=padre>Eu retiro o que disse, João</p>
<p class=grilo>Retirando ou não retirando, o fato é que o cachorro
enterrou-se em latim</p>
<p class=bispo>Um cachorro? Enterrado em latim? </p>
4-11
<p class=padre>Enterrado latindo, Senhor Bispo, Au, au, au, não sa-
be? </p>
Para dar a cada parágrafo de um mesmo personagem (mesma classe) os mesmos atribu-
tos, usa-se:
P.grilo { color: maroon }
P.padre { color: black }
P.bispo { color: navy }
Desta maneira, todos os textos que deverão ser lidos pelo personagem "Bispo" estarão
em azul marinho.
Uma classe também pode conter descritores diferentes. Se todos os textos citados por
um 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.
4.2.9. Links (pseudo-classes e pseudo-elementos)

Para seletores especiais que mudam de estado, como o texto marcado com <A>, é pos-
sí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}
4.2.10. Seletores de contexto

Você também pode definir seletores que só serão aplicados se estiverem no contexto de
um outro seletor, por exemplo:
P.verde EM {color: 000040}
indica que o EM só terá sua cor alterada se ocorrer dentro de um bloco P da classe "verde".
Os seletores de contexto podem ser bem longos:
.bispo P UL UL LI A.classX:link {font-style: italic }
4-12
fará com que apenas os links não visitados da classe "classX" que estejam dentro de itens de
lista de segundo nível situados dentro de um parágrafo dentro de um bloco qualquer da classe
"bispo" sejam mostradas em itálico.
4.2.11. Cascata de folhas de estilo

Existem seis diferentes folhas de estilo que podem ser definidas. Além das três formas
que mostramos em seção anterior deste capítulo, há ainda, segundo a especificação, mais três
folhas de estilos que podem afetar uma página: 1) uma folha de estilos que é importada por
outra folha de estilos (isto é diferente daquela que é vinculada ao HTML, dentro de um
<link>), 2) uma folha de estilos definida pelo usuário (ou leitor da página) e 3) a folha de esti-
los default do browser (que é usada quando outra folha não define os estilos).
Todas estas folhas de estilo diferentes podem provocar uma grande confusão se não
houver uma regra clara de como devem ser consideradas. Ainda há um sétimo fator que é a
formatação introduzida pelo HTML, como nos descritores <font> e atributos align=center.
Listando todas as folhas de estilos que podem afetar um texto, temos:
1. Folha de estilos default do browser: todos os browsers possuem regras comuns para formatar
um texto. A especificação HTML não impõe um formatação padrão. Netscape Navigator por
exemplo usa um fundo cinza como padrão e links azuis sublinhados. Já o Internet Explorer
prefere um fundo branco.
2. Folha de estilos definida pelo leitor: a especificação define a possibilidade do leitor estabelecer
uma folha de estilos própria. Isto é parcialmente conseguido quando o browser permite
que se escolha diferentes cores para fundo, texto e links.
3. Folha de estilos vinculada ao HTML: é a folha de estilos que é importada pelo arquivo HTML
através do descritor de ligação <link>
4. Folha de estilos importada: uma folha de estilos externa (arquivo CSS) pode ser importada de
dentro de outra folha de estilos (um outro arquivo CSS ou bloco <style> no HTML) u-
sando um comando especial @import:
@import url (outroestilo.css)
5. Folha de estilos embutida no HTML: é a folha de estilos que aparece na página HTML entre os
descritores <style> e </style>.
6. Folha de estilos local: é aquela que é aplicada localmente a um descritor usando o atributo
style="lista de declarações".
7. Estilo definido pelo HTML: atributos e descritores podem provocar alterações na aparência
do texto, por exemplo: <font size>, <big>, <body bgcolor>, <p align=center>, etc.
Um browser que siga a especificação CSS à risca obedece a seguinte ordem de precedên-
cia: 1. Local, 2. Embutida, 3. Vinculada, 4. Importada, 5. HTML, 6. Leitor, 7. Browser
Na prática, as coisas não são tão bonitas. No Internet Explorer para Macintosh, a ordem é
respeitada. Na versão do Internet Explorer 3.0 para Windows, os estilos vinculados ao HTML têm
4-13
mais importância que os embutidos (o mesmo ocorre com Explorer 4 e Navigator 4). No Netsca-
pe Navigator 4 e Internet Explorer 4, os estilos aplicados via HTML têm precedência máxima (no
Internet Explorer 3 a precedência funciona corretamente, mas não no 4). Com as diferenças exis-
tentes nos browsers de hoje, não vale a pena ainda se aprofundar neste assunto. A solução
ainda é testar, testar, testar antes de colocar no ar.
4.3. 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.
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.
4.3.1. font-family
Uma família de fontes (tipo) é selecionada com a propriedade font-family. Esta pro-
priedade 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, que será usada caso nenhum dos nomes coincida com o nome de uma
fonte do sistema.
A sintaxe é:
font-family: fonte1, fonte2, fonte3, ..., fonte-genérica
Exemplos:
H1 { font-family: garamond }
H2 { font-family: arial, helvetica, sans-serif }
H3 { font-family: courier, "courier new", monospaced }
H4 { font-family: monospaced }
4-14
As fontes sans-serif e monospaced são nomes genéricos. Não se referem a uma fonte
em particular mas a um grupo genérico. Os outros são serif, cursive e fantasy.
O browser usará a primeira fonte da lista se a encontrar. Se não encontrar, irá procurar a
fonte seguinte.
Se o nome de uma fonte tiver mais de uma palavra, este deverá ser colocado entre aspas.
As aspas podem ser apóstrofes simples (') ou aspas duplas ("). Os apóstrofes são necessários
quando for preciso especificar estilos dentro de um atributo HTML:
<p style="font-family: 'times new roman', sans-serif">...</p>
4.3.2. font-size
O tamanho de uma fonte é alterado usando font-size. Pode ser especificado em valo-
res absolutos ou relativos. Para especificar um valor absoluto, pode-se usar:
font-size: número(pt | px | cm | mm | pc | in)
font-size: xx-small|x-small|small|medium|large|x-large|xx-large
O tamanho também 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}
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 usa-
dos cm ou in). Os browsers podem formatar os tamanhos de forma diferente e os mesmos
podem ser alterados pelos usuários nos browsers atuais. As unidades válidas são: pt (pontos),
px (pixels), pc (paicas), cm (centímetros), mm (milímetros) e in (polegadas).
4-15
Os tamanhos absolutos chamados pelo nome (xx-small, etc.) correspondem aos tama-
nhos de 1 a 7 do descritor <font size> e podem variar de acordo com a família de fontes usada
(variam bastante entre plataformas também). Veja um exemplo comparativo e o resultado no
Internet Explorer para Windows:
<style>
p {font-family: serif}
.t1 {font-size: xx-small}
.t2 {font-size: x-small}
.t3 {font-size: small}
.t4 {font-size: medium}
.t5 {font-size: large}
.t6 {font-size: x-large}
.t7 {font-size: xx-large}
</style>
(...)
<p><span class=t1>xx-small</span> |
<span class=t2>x-small</span> |
<span class=t3>small</span> |
<span class=t4>medium</span> |
<span class=t5>large</span> |
<span class=t6>x-large</span> |
<span class=t7>xx-large</span> <br>
<font size="7">size=7</font> |</p>
Os tamanhos relativos funcionam como o <BIG> e <SMALL>, aumentando a fonte

atual por 150%. A diferença é que podem passar além 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 distân-
cia horizontal equivalente ao tamanho de uma fonte (se uma fonte tem 20 pontos de tamanho,
um em corresponde a uma distância 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 contém o elemento atual. São úteis principalmente em espa-
çamento, sendo pouco usados em fontes.
4-16
As porcentagens são afetadas pela herança, por exemplo:

<style>
.sec {font-size: 18pt};
.sec H1 {font-size: 200%}
.sec P {font-size: 50%}
</style>
</head>
<body>
<div class=sec>Este é o texto desta seção.
<h1>2 vezes maior</h1>
<p>Este é um parágrafo da seção. O texto tem 50% do tamanho do texto
da seção.</p>
</div>
As porcentagens de 50% e 200% são aplicadas na fonte atual, que é a fonte do bloco que
contém os dois elementos (<DIV>), e que tem tamanho 18pt. O resultado é que o <H1> será
exibido em tamanho 26pt e <P> em tamanho 9pt.
4.3.3. font-style e font-weight

O estilo de uma fonte é afetado através de duas diferentes propriedades: font-weight,
que altera o peso da fonte, e font-style, que altera o estilo ou inclinação.
Sintaxe:
font-style: normal (ou italic, oblique)
Exemplos:
H1 { font-style: italic }
I { font-style: normal }
<p style="font-style: oblique">...</p>
Sintaxe:
4-17
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 não, meramente uma versão inclinada da mesma. Os browsers, porém,
não encontrando um equivalente "italic", "oblique", "kursiv" ou similar irão inclinar o texto,
simulando um itálico.
Os valores numéricos para font-weight oferecem um controle excepcional sobre o pe-
so da fonte na tela, embora isto esteja limitado aos níveis disponíveis nas fontes instaladas (pa-
ra um mesmo nome de fonte). Na prática, dos 9 níveis disponíveis de peso, se consegue 4 ou 5
níveis diferentes de mais pesado ou mais leve. 700 é o "bold" típico e 400 é o "normal".
O exemplo a seguir ilustra o efeito com a fonte "Tahoma" (Windows):
<style type=text/css>
P {font-family: tahoma;
font-size: 18pt;}
.nor {font-weight: normal}
.bol {font-weight: bold}
</style>
(...)
<p><span class=b100>100</span>
<span class=nor>normal</span><br>
<span class=b600>600</span><br>
<span class=bol>bold</span><br>
<span class=b900>900</span></p>
4-18
Os valores lighter e bolder especificam pesos de fontes relativos a algum valor her-
dado. Eles avançam ou retrocedem na escala de 100 a 900 relativos aos pesos de fontes.
4.3.4. font-variant
Atualmente a única opção disponível para esta propriedade é small-caps, que deve co-
locar o texto selecionado em maiúsculas, porém menores que as capitulares. Na prática, até as
maiúsculas são reduzidas no Internet Explorer.
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, são falsos. As le-
tras maiúsculas não 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... verdadei-
ros</span>.</p>
4-19
4.3.5. A propriedade font

Para especificar várias propriedades de um seletor de uma vez só, pode-se usar a propri-
edade font em vez de definir em separado font-size, font-weight, font-family, etc.
Nesta sintaxe, a ordem dos fatores é importante, porém nem todos os elementos precisam
estar presentes:
font: font-style font-variant font-weight font-size
line-height font-family
Exemplos:
H1 {font: italic 700 24pt Tahoma, Arial, sans-serif }
4.4. Atributos de texto

As propriedades desta seção tratam de transformações e atributos aplicados a texto, não
afetando a exibição das fontes. Os atributos tipográficos afetam a forma como o texto é apre-
sentado na tela como o espaçamento entre linhas, entre palavras, entre letras, o alinhamento de
parágrafos e a endentação.
A propriedade text-transform permite colocar letras em maiúsculas ou minúsculas e a
propriedade text-decoration permite acrescentar ou tirar efeitos decorativos do texto como
riscados e sublinhados.
4.4.1. text-transform
A propriedade text-transform realiza transformações 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 maiúsculas. Uppercase coloca tudo
em maiúsculas e lowercase coloca tudo em minúsculas. None remove qualquer transformação
deixando o texto da forma como foi definido antes das transformações.
<style>
p {font-weight: bold}
span {font-weight: normal}
.non {text-transform: none}
.upp {text-transform: uppercase}
4-20
.cap {text-transform: capitalize}

.low {text-transform: lowercase}
</style>
(...)
<p>Sem transformação:
<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>
4.4.2. 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="algumlugar.html"
style="text-decoration: none">Link sem sublinhado</a>
<style>
.und {text-decoration: underline}
.ovr {text-decoration: overline}
.blk {text-decoration: blink}
.lin {text-decoration: line-through}
.non, .non a {text-decoration: none}
</style>
4-21
(...)
<p><span class=und>Underline. <a href="#">Link</a></span> -----
<span class=ovr>Overline. <a href="#">Link</a></span></p>
<p><span class=blk>Blink. <a href="#">Link</a></span> -----
<span class=lin>Line-through. <a href="#">Link</a></span> -----
<span class=non>None. <a href="#">Link</a></span></p>
Vínculos (links) são normalmente

sublinhados na maior parte dos browsers.
O sublinhado pode ser removido com a
propriedade text-decoration: none.
O browser Netscape 4 não suporta
a propriedade overline. O Internet Ex-
plorer não suporta a propriedade blink.
4.4.3. text-align e vertical-align

CSS oferece propriedades que permitem contro-
lar o alinhamento horizontal do texto, seu alinhamento
vertical e endentação 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 precedência. 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 característica é herdada para sub-blocos. O
valor default é sempre left. Exemplo:
DIV { text-align: center }
Alinhamento vertical em HTML só pode ser a-

plicado 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 a altura da linha (line-heght)

do próprio elemento. Usando porcentagens negativas consegue-se sobrepor elementos.
4-22
Na prática, apenas o Internet Explorer 4 suporta vertical-align com os valores sub e

super (coloca elementos em subscrito ou sobrescrito).
4.4.4. text-indent
A propriedade text-indent se aplica a elementos de bloco e realiza a endentação da
primeira linha. A sua sintaxe é:
text-indent: comprimento
text-indent: porcentagem
A porcentagem ocorre em relação à largura do elemento que contém o seletor. Pode ser
a largura total da página, a largura da célula de uma tabela, etc. Exemplos:
P { text-indent: 1 cm }
P {text-indent: 50% }
<P style="text-indent: 1in">
A endentação tratada aqui é apenas para uma linha de texto. Para endentar blocos intei-
ros, deve-se usar as margens (em seção mais a frente).
4.4.5. line-height
Este atributo é usado para controlar o espaço
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 (espaço du-
plo). O espaço simples equivale geralmente a line-
height: 120%. Uma line-height menor que o
tamanho da fonte produzirá sobreposição de texto.
Embora ambos os browsers mais populares su-
portem este recurso, ele não ocorre da maneira corre-
ta. Os browsers não acrescentam a mesma quantidade
de espaço antes e depois como esperado.
Um bug no Internet Explorer 3 faz com que ele
interprete valores absolutos (sem unidade) como va-
lores em pixels. Por exemplo, 1.5 indica espaço 1 e
meio ou 150%. No Internet Explorer 3 as linhas ficam
sobrepostas pois o browser interpreta a unidade co-
mo 1.5 pixels. Evite, portanto, usar valores absolutos
(use porcentagens).
A sintaxe é:
4-23
line-height: número_absoluto
line-height: comprimento ou unidade
line-height: porcentagem
Exemplos:
H1 {line-height: 0 } // sobreposição de linhas
H1 {line-height: 2 } // espaço duplo
H1 {line-height: 0.3em }
H1 {line-height: 150% } // espaço 1 e meio
Se você usar um valor percentual menor que 100%, um valor absoluto menor que 1 ou
uma unidade menor que o tamanho da fonte, haverá sobreposição de linhas.
4.4.6. letter-spacing
A propriedade letter-spacing altera o
espaço entre as letras. A sua sintaxe é:
letter-spacing: normal
letter-spacing: comprimento
As unidades podem ser quaisquer uma

das unidades válidas para tamanho de fontes
(pt, px, pc, cm, in, mm, em e ex). Na tipografia,
é mais comum usar "em" como medida de es-
paçamento por ser proporcional ao tamanho da
fonte.
Pode-se usar também valores negativos
para sobrepor caracteres, criar ligaduras (usadas
em kerning) e caracteres especiais (por exem-
plo, sobrepondo / com \).
O suporte a letter-spacing nos prin-
cipais browsers ainda é inconsistente. O Netsca-
pe (versão 4) não o suporta.
4.5. Cores
Com as propriedades de cores, podemos controlar as cores de várias partes da página, do
texto, do fundo da página e de elementos HTML. Além disso, podemos aplicar imagens de
fundo em qualquer elemento, não só no elemento BODY como já se faz em HTML.
As cores definidas em CSS, assim como em HTML, podem ser especificadas por um
número em hexadecimal (representando um código RGB) ou por um nome. Além dessas duas
formas, podem ainda ser especificadas por três números decimais, representando também o
código RGB da cor.
4-24
Os códigos RGB informam a quantidade de luz vermelha, verde e azul que compõe a
cor, respectivamente. Cada cor pode ter 16 níveis de intensidade: 0 a 256 (00 a FF, em hexade-
cimal). O total de combinações possíveis é de 16.777.216 cores.
A exibição correta das cores depende da capacidade do vídeo onde serão vistas. Poucos
sistemas têm capacidade de mostrar mais que 65.536 cores simultâneas. A maioria só mostra
256.
A tabela abaixo relaciona em negrito os 16 nomes padrão, suportados por todos os
browsers que exibem cores, e seus respectivos códigos RGB em hexadecimal e decimal.
Cor Nome Cód. Decimal Cód. Hexa Cor Nome Cód. Decimal Cód. Hexa
red 255, 0, 0 ff0000 maroon 128, 0, 0 800000
lime 0, 255, 0 00ff00 green 0, 128, 0 008000
blue 0, 0, 255 0000ff navy 0, 0, 128 000080
yellow 255, 255, 0 ffff00 olive 128, 128, 0 808000
aqua 0, 255, 255 00ffff teal 0, 128, 128 008080
fuchsia 255, 0, 255 ff00ff purple 128, 0, 128 800080
white 255, 255, 255 ffffff silver 192, 192, 192 c0c0c0
black 0, 0, 0 000000 gray 0, 0, 0 808080
Há muito mais cores com nomes suportadas pelo Netscape e Internet Explorer. Estas lista-
das são as únicas que fazem parte da especificação oficial do HTML 4. São todas "seguras", ou
seja, fazem parte da paleta básica de 216 cores.
4.5.1. 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 página e no site, como qualquer outra propriedade de estilo.
A sintaxe da propriedade color é:
color: nome_de_cor
color: #número_hexadecimal
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 são qualquer nome válido de cor. Se o browser não encontrar o nome ao qual
o estilo se refere, deve exibir a cor default (ou herdada). O símbolo "#" é opcional no código
4-25
hexadecimal. A intensidade da cor pode ser expressa em valores absolutos (0 a 255) ou percen-
tagens (0.0-100.0%).
4.5.2. background-color
As cores de fundo de qualquer elemento podem ser alteradas através da propriedade
background-color. A sintaxe é:
background-color: transparent (valor default)

background-color: nome_de_cor
background-color: #número_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 contém. O

fundo, para texto, ocupa todo o espaço da fonte (inclusive espaço em branco acima e abaixo
que fazem parte da fonte). A cor não é estendida quando o espaçamento entre linhas é aumen-
tado em alguns browsers.
4.5.3. background-image
Com background-image é possível 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)
Exemplos:
H1 { background-image: url(http://www.xyz.com/abc.jpg) }
B {background-image: url(../monstro.gif) navy
<TD STYLE="background-image: url(dinheiro.gif)">...</TD>
As URLs são relativas à localização do arquivo que contém a folha de estilos (pode ser a
própria página ou não). A cor de backup é usada para 'vazar' pelas partes transparentes da ima-
gem ou prevenir contra o não carregamento do fundo (para permitir a leitura em fundo escuro
pode-se usar preto como cor de backup de uma imagem escura).
4.5.4. background-repeat
CSS permite mais controle ainda sobre a imagem de fundo, facilitando a maneira como a
mesma irá se repetir. A propriedade é background-repeat. Sintaxe:
4-26
background-repeat: repeat (default)

background-repeat: repeat-x
background-repeat: repeat-y
background-repeat: no-repeat
Exemplos:
background-repeat: repeat-x }
TABLE{background-image: url(corinthians.gif)
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 não 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 posi-
cionamento do fundo da tela.
4.5.5. background-position e background-attachment

O posicionamento e a forma de exibição do papel de parede são controlados pelas pro-
priedades background-attachment e background-position. A primeira define se o fundo
irá ou não se mover com o texto ou ficar fixo na tela. A segunda permite o posicionamento do
fundo em um local exato da tela. Infelizmente essas duas propriedades não têm suporte uni-
versal pelos browsers comerciais (apenas o Internet Explorer os suporta).
Sintaxe:
background-attachment: fixed
background-attachment: scroll
Exemplo:
BODY {background-image: url (china.jpg);
background-attachment: fixed }
Sintaxe:
background-position: porcentagem_horiz% porcentagem_vert%
background-position: comprimento comprimento
background-position: posição_vertical posição_horizontal
Exemplos:
background-position: 50% 100% }
4-27

background-position: 25pt 2.5cm }

background-position: center top }

background-position: left bottom }
Os valores de porcentagem são relativos à posição do elemento sobre o qual se aplica o

estilo. As posições são sempre dadas em pares, tendo os valores separados por espaços. O
primeiro valor é sempre um valor horizontal e o segundo um valor vertical. O browser coloca
o bloco afetado dentro de uma "caixa invisível" e a posiciona de acordo com as porcentagens.
Um valor de 100% para o primeiro valor, empurra a margem direita (oposta) desta "caixa invi-
sível" contra a margem direita do browser.
Os valores de comprimento, assim como os de porcentagem também são dados em pa-
res. O primeiro é a distância da margem horizontal a partir do canto superior esquerdo do ob-
jeto; o segundo é a distância da margem superior. As unidades válidas são 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 posição são palavras-chave usadas também aos pares. São equivalentes das
porcentagens básicas 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%).
4.5.6. background
A propriedade background pode ser usada para definir várias características de fundo de
uma única vez. Na sintaxe abaixo, a ordem dos fatores é importante. A sua sintaxe é:
background: background-color background-image background-repeat
background-attachment background-position
Deve haver pelo menos um valor definido, mas qualquer número de valores pode ser a-
tribuído de uma vez.
Exemplos:
BODY {background: url(../duke.gif) white no-repeat fixed 50% 25%}
4-28
4.6. Propriedades de classificação

Estas propriedades classificam os elementos em categorias que podem receber estilos.
Categorias podem ser listas, blocos, trechos de blocos ou itens invisíveis.
4.6.1. display
Esta propriedade define como um elemento é mostrado. A propriedade none desliga o e-
lemento e fecha o espaço que o objeto antes ocupava (torna o objeto invisível). block abre
uma nova caixa onde o objeto é posicionado, relativo aos outros blocos, list-item é um blo-
co com um marcador de lista e inline define um elemento como parte de um bloco.
Sintaxe:
Exemplo:
P {display: list-item}
IMG {display: none} // desliga todas as imagens
4.6.2. white-space
Define como o espaço em branco do elemento é gerenciado (se as linhas devem ser
quebradas para que apareçam na tela ou não (nowrap) ou se os espaços em branco, tabulações,
etc. devem ser considerados (pre).
4.6.3. list-style
Esta propriedade e as propriedades list-style-type, list-style-image e list-
style-position definem atributos para objetos de lista, como tipo de marcador, imagem do
marcador e posição. Esses elementos não são suportados no Netscape.
list-style-type: disc | circle | square | decimal | lower-roman
upper-roman | lower-alpha | upper-alpha | none
list-style-image: url(url_da_imagem)
Exemplo:
list-style-image: url(bullet.gif)
É possível definir as três propriedades através de um atalho usando list-type. A or-

dem dos fatores é importante neste caso.
4-29
list-style: list-style-type list-style-image list-style-position
Exemplo:
list-style: url(bullet.gif)
list-style: square outside
4.7. Controle de blocos

Uma “caixa” é uma propriedade de qualquer elemento de bloco no HTML (H1, P, DIV,
etc. que automaticamente definem seu próprio bloco ou parágrafo). 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 veremos nes-
ta seção mostrarão como alterá-las. A cor e tamanho da borda podem ser alterados assim co-
mo o fundo (como vimos na seção anterior). A margem externa é sempre transparente mas a
margem interna herda a cor de fundo do objeto.
Também são alteráveis 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:
4-30
4.7.1. margin e padding

As margens externas são 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 vários aspectos das margens externas de uma vez só. A or-
dem dos fatores é importante. Podem ser incluídos 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%
margin: espaço_vertical espaço_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. horário: top, right, bottom, left
// (em cima 5; à direita 3; em baixo 2;...
As margens internas (padding) são 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 vários aspectos das margens internas de uma vez só. A or-
dem dos fatores é importante. Podem ser incluídos 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%
4-31
padding: espaço_vertical espaço_horizontal

padding: margem_de_todos_os_lados
4.7.2. border-width
Pode se controlar vários aspectos das bordas como a sua espessura em cada um dos qua-
tro lados, suas cores (também cada um dos quatro lados) e estilos (idem). Isto pode ser feito de
diversas maneiras. Para que as bordas apareçam é preciso primeiro que o estilo (border-
style) seja definido. Por exemplo:
border-style: solid
A espessura das bordas pode ser controlada através da propriedade border-width, afe-
tando as espessuras de todos os lados da borda, ou individualmente através de border-top-
width, border-bottom-width, border-right-width e border-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 or-
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 // horário: top, right, bottom, left
4.7.3. 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 também podem ser definidas indivi-
dualmente através de border-top-color, border-bottom-color, border-right-color e
border-left-color.
border-top-color: cor (nome ou código)

border-bottom-color: cor (nome ou código)
4-32
border-right-color: cor (nome ou código)

border-left-color: cor (nome ou código)
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 or-
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 indi-
vidualmente.
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 horário
4.7.4. border-style
O estilo de cada uma das quatro bordas pode ser alterado com border-style. Também
é possível defini-los individualmente usando border-top-style, border-bottom-style,
border-right-style e border-left-style. São vários os estilos disponíveis (tracejado,
pontilhado, várias versões 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 or-
border-style: border-top-style border-right-style
border-bottom-style border-left-style
4-33
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, da-
shed, solid, double, groove, ridge, inset, outset. No Netscape e Internet Explorer, funcio-
nam os estilos solid, inset (efeito baixo-relevo) e outset (efeito alto-relevo). No Netscape
solid é default mas no Explorer, o default é none, portanto, uma borda não aparece se a propri-
edade border-style não for definida antes.
4.7.5. border
As propriedades border-top, border-bottom, border-left e border-right agru-
pam 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 to-
das as bordas e de forma idêntica (não é possível especificar valores diferentes para as bordas
neste caso). Todos os itens não precisam aparecer, mas a ordem dos fatores é importante:
border: border-width border-style border-color
4.7.6. 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 blo-
co. Sintaxe:
width: comprimento | auto
height: comprimento | auto
4.7.7. float
A propriedade float permite que um bloco qualquer seja posicionado à direita ou es-
querda da janela do browser, fazendo com que o texto restante flua em 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:
4-34
4.7.8. clear
E finalmente, para evitar que um bloco flua em torno de uma imagem ou bloco que uti-
liza a propriedade float, existe a propriedade clear, que deve ser atribuída a um bloco ou
parágrafo que é afetado pela flutuação 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 não).
Primeiro pa- Primeiro pará-

rágrafo flui ao grafo flui ao
lado da ima- lado da ima-
gem. gem.
Outro pará-
grafo que não
devia fluir. Outro parágrafo que não
devia fluir (com clear).
4.8. Posicionamento
O posicionamento de objetos em HTML pode ser conseguido em termos absolutos ou
relativos usando CSS 2. As propriedades permitem o posicionamento em três dimensões (hori-
zontal, vertical e em camadas). Embora os recursos de posicionamento não façam parte do
CSS1, tanto o Netscape Navigator 4 como o Internet Explorer 4 o suportam.
4.8.1. 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 posição absoluta será a posição do objeto no nível imediatamente superior. O posi-
cionamento relativo se refere à posição anterior do objeto. Sintaxe:
position: absolute | relative
left: comprimento | porcentagem | auto
top: comprimento | porcentagem | auto
4-35
Exemplo: considere as quatro imagens a seguir:
</div>
</div>
<img src="T3.gif" width=150 height=72 border=1> 3 Posição -25 -25
</div>
</div>
Aplicando a seguinte folha de estilos para posicionar as quatro imagens relativamente à sua
localização original obtemos a imagem ao lado. Os retângulos claros indicam a posição original
da imagem:
DIV.imagem1 {
position: relative;
top: 0px;
left: 0px;
}
4-36
DIV.imagem2 {
position: relative;
top: 0px;
left: 200px;
}
DIV.imagem3 {
position: relative;
top: -25px;
left: -25px;
}
DIV.imagem4 {
position: relative;
top: 100px;
left: 0px;
}
Usando posicionamento absoluto, o bloco é movido em relação ao canto superior es-

querdo do browser.
4-37
DIV.imagem1 {
position: absolute;
top: 0px;
left: 250px;
}
DIV.imagem2 {
position: absolute;
top: 100px;
left: 0px;
}
DIV.imagem3 {
position: absolute;
top: 160px;
left: 120px;
}
DIV.imagem4 {
position: absolute;
top: 200px;
left: -80px;
}
4.8.2. 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: número
onde número é a camada de exibição. Quanto maior o número, mais alta a camada. o corres-
ponde à camada do texto. Se um objeto tiver z-index menor que zero aparecerá atrás do
texto. Se z-index for maior que zero, aparecerá na frente. Quando não é definido ou quando
z-index: 0 o bloco ocupará a mesma camada que o texto.
4.8.3. visibility
Esta propriedade serve para tornar um bloco visível ou invisível. Difere de display porque
não remove o espaço antes ocupado pela imagem:
visibility: hidden | visible
Exemplo:
IMG {visibility: hidden} // torna invisíveis todas as imagens
4-38
4.9. Exercícios
4.9.1. Testes sobre Folhas de Estilo
1. Qual das seguintes regras de estilo está incorreta? Marque uma.
a) a:link {color: rgb(0%,40%,40%)}
b) div.code pre {margin-bottom: 0px}
c) body {font-size: 0.5cm, color: yellow, background: black}
d) .botcor {font-size: 16pt; font-family: tahoma, sans-serif;}
e) Estão todas corretas.
2. Qual dos seguintes trechos de código é ilegal dentro de um arquivo .css? Marque uma.
a) span.value {color: maroon}
b) /* <H1>Titulo</H1> */
c) @import url(http://ww.estilos.org/estilo.css);
d) <STYLE>
e) Nenhuma das alternativas é ilegal dentro de um arquivo CSS.
3. Qual das regras abaixo, de uma folha de estilos, declara que os parágrafos e células de da-
dos de tabelas terão texto vermelho?
a) P TD {color: red}
b) P: TD {color: ff0000}
c) P, TD {color: rgb(100%, 0%, 0%)}
d) P; TD {color: rgb(255, 0, 0)}
e) P, TD {color=red}
4. Qual das declarações abaixo, contida em uma página HTML, a vincula à folha de estilos
basico.css, localizada no mesmo diretório que a página?
a) <LINK REL=StyleSheet HREF="basico.css">
b) <LINK REL=StyleSheet SRC="basico.css">
c) <A HREF="basico.css" TITLE="StyleSheet">Folha de estilos</A>
d) <FRAME SRC="basico.css" REL="StyleSheet">
e) <A HREF="basico.css">Folha de estilos</A>
5. Considere o seguinte trecho de código HTML:

<div>
<p>Parágrafo</p>
</div>
Quais declarações abaixo, em um bloco <STYLE> do arquivo que contém o trecho acima,
farão com que o texto do parágrafo tenha tamanho 10pt em um browser que suporte fo-
lhas de estilo? Marque uma ou mais.
a) div {font-size: 20pt}
p {font-size: 50%}
b) div {font-size: 10pt}
4-39
c) p {font-size: 10pt}
d) div {font-size: 5pt}
p {font-size: 100%}
e) p div {font-size: 10pt}
6. Considere a seguinte folha de estilos, com uma única regra, vinculada a uma página HTML.
P {color: green}
Dentro dessa página, logo depois da instrução que vincula o estilo à página, há um bloco
<STYLE>, com a seguinte regra:
P {color: red}
A página possui dez parágrafos. Um deles atribui um estilo local usando o atributo STYLE,
da forma:
<P STYLE="color: blue">Parágrafo</P>
Supondo que a página seja visualizada em um browser que suporte folhas de estilo CSS,
qual é a cor da maior parte dos parágrafos dessa página?
a) azul (blue)
b) vermelha (red)
c) verde (green)
d) preta (black)
e) indefinida
7. Identifique as alternativas que contém HTML ou CSS incorretos:

a) <span style="color: red; font-size: 24pt">Texto</span>
b) <span color=red font-size="24pt">Texto</span>
c) <div class="sec1">Tem <span class=item1>mais texto</span>.</div>
d) <span>Itens e <div class="sec1">seções</div> especiais.</span>
e) <div style="P {color: yellow}"><P>Texto amarelo</P></div>
8. Considere o código HTML abaixo:

<div class=sec2>
<p class=novo>Texto modificado</p>
</div>
Quais das regras de estilo abaixo fará com que o parágrafo seja exibido na cor azul, em um
browser que suporte folhas de estilos CSS?
a) P {color: blue}
b) .sec2 {color: blue}
c) P.novo {color: blue}
d) .sec2 .novo {color: blue}
e) P.sec2 {color: blue}
9. Qual das regras abaixo retira o sublinhado apenas dos links visitados? Marque uma.
a) a: visited {text-decoration: none}
b) a, visited {text-decoration: none}
4-40
c) a.visited {text-decoration: none}

d) a visited {text-decoration: none}
e) Nenhuma das regras anteriores.
10. Marque apenas as alternativas verdadeiras

a) Uma mesma folha de estilos pode ser usada por várias páginas.
b) Uma mesma página pode usar várias folhas de estilo.
c) Se um browser não suportar uma folha de estilos requerida pela página, poderá ha-
ver uma degradação na qualidade da apresentação mas nunca haverá perda de in-
formação.
d) É possível construir um site inteiro usando apenas CSS.
e) A linguagem CSS usada para construir folhas de estilo é uma recomendação do
W3C – consórcio de empresas que estabelece os padrões para a Web.
4.9.2. Exercícios com Folhas de Estilo

Os exercícios a seguir têm a finalidade de explorar as principais propriedades do CSS e
permitir que se verifique o suporte a elas nos browsers populares. Eles são mais didáticos do
que úteis. O objetivo é apenas praticar com folhas de estilos. Para realizá-los, use os arquivos
disponíveis no CD do ASIT.
Conceitos básicos
1. Crie uma folha de estilos, chame-a de basico.css, e a carregue no arquivo StyleTest.html.
2. Nesta folha de estilos, usando o mínimo de declarações possível, declare:
a) que todo H1 tenha fonte Tahoma, ou sans-serif, se Tahoma não existir
b) que todo o texto do corpo (BODY) do arquivo tenha tamanho 10 pontos
c) que todos os H1, H2 e H3 sejam vermelhos
d) que os H1 tenham tamanho 24 pontos
e) que os H2 tenham tamanho 18 pontos
f) que os H3 tenham tamanho 14 pontos
3. Mude a cor do fundo da página para azul marinho (navy) e a cor default do texto para bran-
co em uma única declaração.
4. Faça com que todo texto marcado em itálico apareça em azul ciano (cyan).
Formas de usar CSS

5. Carregue a folha de estilos basico.css em outros arquivos HTML e veja o que acontece.
Faça com que uma dessas outras páginas tenha uma cor de fundo clara (amarela, por e-
xemplo) e cor de texto escuro (diferente daquela definida por basico.css) sem que isto alte-
re as outras paginas que usam o mesmo arquivo.
6. Faça com que o primeiro parágrafo do arquivo StyleTest.html tenha texto verde.
4-41
7. Faça com que a célula do meio da tabela de StyleTest.html tenha texto vermelho sobre
fundo amarelo (a tabela 3x3 encontra-se no meio da página).
Classes, links, seletores de contexto

Para os exercícios abaixo, desligue a folha de estilos usada nos exercícios anteriores (mude o
nome ou remova o elemento <LINK>) para que a página fique limpa outra vez. Use uma no-
va folha de estilos para aplicar as alterações a seguir.
8. Defina classes sec2, sec3, sec31 e sec32 para as seções (<DIV>) do documento Style-
Test.html. As seções estão indicadas em comentários HTML (por exemplo: <!--Seção 2 --
>). Aplique um fundo diferente (imagem ou cor) nessas seções para diferenciá-las das ou-
tras.
9. Tire os sublinhados de todos os links e substitua-os por um fundo cinza claro.
10. Faça com que o link ativo (active) fique em negrito; que o link normal tenha tamanho 10pt
e que mostre fundo amarelo quando o mouse estiver sobre ele (hover); e que o link visita-
do não tenha mais cor de fundo mas recupere o sublinhado. Obs: Para fazer um link ainda
não visitado, faça um link para qualquer recurso do sistema de arquivos; para ver o link ati-
vo, clique no link e segure o mouse.
11. Faça com que:

a) todos os itálicos dentro de negritos sejam colocados em maiúsculas (use text-
transform: uppercase).
b) todos os negritos dentro de itálicos sejam sublinhados
c) todos os negritos que estejam dentro de um bloco itálico que está dentro de um bloco
LI que está dentro de uma UL que está em outra UL, sejam colocados em fonte arial,
em maiúsculas e em vermelho.
Fontes
Crie uma nova folha de estilos (fontes.css) para aplicar fontes. Vincule (LINK) ou importe-a
(@import) em seus arquivos.
12. a) Aplique Verdana como fonte default em todo o site. Garanta que, se Verdana não existir,
Arial será usada, e se esta não existir, será usada a default sans-serif. Para testar, mude os
nomes das primeiras fontes para nomes desconhecidos do sistema. b) Teste a compatibili-
dade dos dois browsers em relação ao suporte de fontes com nomes longos (entre aspas)
em folhas de estilo locais e remotas.
13. Faça com que os <B> de seus parágrafos sejam 20% maiores que o texto normal destes
parágrafos.
Atributos de texto e classificação

Crie uma nova folha de estilos para esses exercícios.
4-42
14. a) Aplique um espaçamento de 1 cm entre palavras de um parágrafo seu texto (isto poderá
não funcionar devido à falta de suporte dos browsers). b) Aplique um espaçamento de 1
cm entre as letras de outro parágrafo. Teste nos dois browsers.
15. Defina todos os títulos H2 como sendo caixa alta (uppercase).
16. Experimente com as propriedades text-decoration (use overline e outras propriedades em

blocos <SPAN> criados para mostrar cada propriedade.
17. Elimine o espaçamento entre os parágrafos (<P>) usando {margin-top: 0pt}, endente a
primeira linha e coloque todos os seus parágrafos, com exceção dos parágrafos da terceira
seção, com alinhamento justificado. O alinhamento deve ser aplicado apenas nos parágra-
fos e não em listas ou tabelas.
Cores
18. Experimente com cores, aplicando cores em textos, backgrounds de diversos componentes
da página, inclusive formulários (<INPUT> e <SELECT>). Use as três formas (url(r, g,
b), rrggbb e nomes) e veja como ocorre o suporte dos browsers em folhas de estilo locais e
externas. Dica: crie uma folha de estilos só para este exercício.
Fundos, Imagens e Repetições

19. Inclua a imagem rabbit.gif (ou outra qualquer do subdirectório 3_Imagens do CD do A-
SIT) no fundo da página StyleTest.html (usando uma nova folha de estilos: back-
ground.css). Experimente com posicionamento, fazendo a imagem ficar fixa em vez de ro-
lar na tela. Teste nos dois browsers. Experimente com repetições, fazendo a imagem repe-
tir na vertical, na horizontal e não repetir. Veja o que acontece nos dois browsers.
20. Numa outra folha de estilos (para este exercício), posicione a imagem no centro da página,
sem repetições e uma outra imagem no centro da tabela, também sem repetições.
21. Posicione (outra folha de estilos) o rabbit.gif (ou outra imagem) em uma posição a 4cm da
margem esquerda e a 7cm da margem superior. Na seção 2 (sec2), posicione bart.gif, repe-
tindo somente na vertical, afastado 11cm da margem esquerda e iniciando 1 cm abaixo da
margem superior.
Posicionamento e Layout
22. Remova o espaço entre todos os parágrafos de StyleTest.html. Aplique um text-indent de
1cm em cada parágrafo.
23. Faça com que os blocos (parágrafos e cabeçalhos) da seção 3.1 e 3.2 (DIV) tenham 0,3 cm
de margem esquerda e direita, e 0,5cm de margem superior e inferior, em relação às bordas
da seção.
4-43
24. Faça com que as seções 3.2 e 3.1 tenham uma margem externa de 0,5 cm em relação à se-
ção 3.
25. Aplique uma borda azul, sólida, de 3mm acima da seção 2 (<DIV>), uma outra, também
de 3mm, abaixo, na cor amarelo. Dos lados, coloque bordas vermelhas, de 5mm.
26. Aplique uma borda verde, de 4mm à esquerda de todos os parágrafos da seção 2. Entre a
borda e o texto deve haver um espaço de 5mm. Entre a borda e a margem da página, mais
5mm (sem levar em conta o offset).
27. Sem usar tabelas, aplique uma largura máxima de 500 pixels em toda a página.
28. Faça com que a seção 3.1 tenha largura máxima de 220 pixels e flutue para a direita, dei-
xando o restante do texto fluir em volta dela.
29. Monte o quebra-cabeças do exercício 1, do livro 3 (Além do HTML) sem usar tabelas (u-
sando apenas posicionamento de folhas de estilo).
30. Diagrame a página do exercício 2, do livro 3, sem usar tabelas (usando apenas posiciona-
mento de folhas de estilo).
4-44
Css Página 1
CSS
Sumário
Introdução ao CSS......................................................................................................................... 4
O que mais posso fazer com CSS? ................................................................................................ 6
Como funciona as CSS.................................................................................................................. 7
Método 1: In-line (o atributo style) ........................................................................................... 8
Método 2: Interno (a tag style) .................................................................................................. 8
Método 3: Externo (link para uma folha de estilos) .................................................................. 8
Prática:....................................................................................................................................... 9
Cores e fundos ........................................................................................................................... 9
Cor do primeiro plano: a propriedade 'color'............................................................................. 9
A propriedade 'background-color' ........................................................................................... 10
Image de fundo fixa [background-attachment] ....................................................................... 11
Posição da imagem de fundo [background-position] .............................................................. 12
Compilando [background]....................................................................................................... 13
Fontes .......................................................................................................................................... 13
Família de fontes [font-family] ............................................................................................... 14
nome para famílias de fontes ................................................................................................... 14
nome para famílias genéricas .................................................................................................. 14
Estilo da fonte [font-style]....................................................................................................... 15
Fonte variante [font-variant] ................................................................................................... 15
Peso da fonte [font-weight] ..................................................................................................... 15
Tamanho da fonte [font-size] .................................................................................................. 15
Compilando [font] ................................................................................................................... 16
Textos ...................................................................................................................................... 16
Indentação de texto [text-indent]............................................................................................. 16
Alinhamento de textos [text-align] .......................................................................................... 16
Decoração de textos [text-decoration]..................................................................................... 17
Espaço entre letras [letter-spacing] ......................................................................................... 17
Transformação de textos [text-transform] ............................................................................... 17
Links........................................................................................................................................ 18
O que é pseudo-classe? ........................................................................................................... 18
Pseudo-classe: link .............................................................................................................. 19
Css Página 2
Pseudo-classe: visited.......................................................................................................... 19
Pseudo-classe: active ........................................................................................................... 19
Pseudo-classe: hover ........................................................................................................... 19
Exemplo 1: Efeito quando o ponteiro está sobre o link....................................................... 19
Exemplo 1a: Espaçamento entre as letras ........................................................................... 19
Exemplo 1b: UPPERCASE e lowercase ............................................................................. 20
Exemplo 2: Removendo sublinhado dos links .................................................................... 20
Identificando e agrupando elementos (classes e id) .................................................................... 21
Agrupando elementos com uso de classe ................................................................................ 21
Identificando um elemento com uso de id .............................................................................. 22
Agrupando elementos (span e div) .......................................................................................... 23
Agrupando com <span> ...................................................................................................... 23
Agrupando com <div> ........................................................................................................ 23
Box Model................................................................................................................................... 24
O box model em CSS .............................................................................................................. 25
Margin e padding .................................................................................................................... 26
Definindo margin de um elemento .......................................................................................... 26
Definindo padding de um elemento ........................................................................................ 27
Bordas ......................................................................................................................................... 27
A espessura das bordas [border-width] ................................................................................... 28
As cores das bordas [border-color] ......................................................................................... 28
Tipos de bordas[border-style] ................................................................................................. 28
Exemplos de definição de bordas ............................................................................................ 28
Compilando [border] ............................................................................................................... 30
Altura e largura ........................................................................................................................... 30
Atribuindo largura [width] ...................................................................................................... 30
Atribuindo altura [height]........................................................................................................ 30
Flutuando elementos (floats) ................................................................................................... 31
Outro exemplo : colunas ......................................................................................................... 32
A propriedade clear ..................................................................................................................... 32
Posicionando elementos .......................................................................................................... 33
O princípio de posicionamento CSS ........................................................................................... 33
Posicionamento absoluto ......................................................................................................... 34
Posicionamento relativo .......................................................................................................... 35
Css Página 3
Usando z-index (Layers) ............................................................................................................. 35
BIBLIOGRAFIA: ............................................................................................................................. 36
Introdução ao CSS
CSS significa Cascading Style Sheetes (Folhas de Estilo em Cascata). Não seria
ótimo fazer layouts na sua página sem ter que alterar o HTML toda vez que quisesse
mudar?
Nesta introdução vamos ter uma breve introdução ao CSS para ter uma idéia de
como o CSS é prático. Podemos dizer que o CSS é a melhor metade do HTML.
Codificando, não há melhor parceria: HTML é responsável pelo trabalho pesado (a
estrutura), enquanto CSS dá o toque de elegância (layout).
CSS pode ser adicionado com uso do atributo style. Por exemplo, você pode
definir o tipo e o tamanho da fonte em um parágrafo:
<p style="font-size:20px;">Este parágrafo em tamanho de fonte igual a

20px</p>
<p style="font-family:courier;">Este parágrafo em fonte Courier</p>
<p style="font-size:16px; font-family:cambria">Este parágrafo em fonte
Cambria e tamanho 20px</p>
Será renderizado no navegador assim:
Este parágrafo em tamanho de fonte igual a 20px

Este parágrafo em fonte Courier
Este parágrafo em fonte Cambria e tamanho 16px
Css Página 4
No exemplo acima usamos o atributo style para definir o tipo de fonte usado
(com a propriedade font-family) e o tamanho da fonte (com a propriedade font-size).
Notar que no último parágrafo do exemplo definimos tanto o tipo como o tamanho da
fonte separado por um ponto e vírgula.
Uma das funcionalidades mais inteligentes das CSS é a possibilidade de
controlar o layout de um arquivo central. Em lugar de se usar o atributo style em cada
tag, você pode dizer ao navegador como deve ser o layout de todos os textos em uma
página:
<html>
<head>
<title>Minha primeira página CSS</title>
h1 {font-size: 30px; font-family: arial}
h2 {font-size: 15px; font-family: courier}
p {font-size: 8px; font-family: times new roman}
</style>
</head>
<body>
<h1>Minha primeira página CSS</h1>
<h2>Bem vindo à minha primeira página CSS</h2>
<p>Aqui você verá como funciona CSS</p>
</body>
</html>
No exemplo acima inserimos as CSS na seção head do documento, assim ela

se aplica à página inteira. Para fazer isto use a tag <style type="text/css"> que informa
ao navegador que você está digitando CSS.
No exemplo, todos os cabeçalhos da página serão em fonte Arial e tamanho
30px. Todos os subtítulos serão em fonte Courier tamanho 15. E, todos os textos dos
parágrafos serão em fonte Times New Roman tamanho 8. Uma outra opção é a de
digitar as CSS em um documento separado. Com as CSS em um documento separado
você pode gerenciar o layout de muitas páginas ao mesmo tempo. Muito inteligente,
pois você pode mudar de uma só vez, o tipo ou o tamanho da fonte de todo o site, quer
ele tenha centenas ou milhares de páginas. Nós não nos aprofundaremos em CSS agora,
mas você pode aprender tudo, no futuro, em nosso tutorial CSS.
<html>
<head>
<title>Minha primeira página CSS</title>
h1 {font-size: 30px; font-family: arial}
h2 {font-size: 15px; font-family: courier}
p {font-size: 8px; font-family: times new roman}
</style>
</head>
<body>
<h1>Minha primeira página CSS</h1>
<h2>Bem vindo à minha primeira página CSS</h2>
<p>Aqui você verá como funciona CSS</p>
</body>
</html>
Css Página 5
O que mais posso fazer com CSS?
CSS faz muito mais do que definir tipos e tamanhos de fontes. Por exemplo, você pode
adicionar cores, fundos e estilos de texto. A seguir alguns exemplos para prática:
<p style="color:green;">Texto verde</p>

<h1 style="background-color: blue;">Cabeçalho com fundo azul</h1>
<body style="background-image: url('http://www.html.net/logo.png');">
Além de cores, tipos de fontes, etc., CSS pode ser usado para controlar a
configuração e a apresentação da página (margens, flutuações, alinhamentos,
larguras, alturas, etc.) Controlando os diferentes elementos com CSS você será capaz de
criar layouts elegantes e precisos.
<p style="padding:25px;border:1px solid red;">Eu amo CSS</p>
Com a propriedade float um elemento poderá "flutuar" à esquerda ou à direita. O

exemplo seguinte ilustra este princípio:
<img src="bandeiradobrasil.jpg" alt="Bandeira do Brasil" style=

"float:left;" />
<p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX,
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX...</p>
XXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXX
No exemplo mostrado, um elemento (a imagem) flutua à esquerda e o outro elemento
Css Página 6
(o texto) preenche o espaço deixado à direita. Com a propriedade position, você pode
posicionar um elemento em qualquer lugar da página, com precisão:
<img src="bill.jpg" alt="Bill Gates"

style="position:absolute;bottom:50px;right:10px;" />
No exemplo mostrado a imagem foi posicionada a 50 pixels da borda inferior e a 10

pixels da borda direita do navegador. Você pode colocar em qualquer lugar na página.
Você não aprende CSS em 10 minutos. É preciso se dedicar um tempo para estudar.
Mas não é nada difícil, vamos ver nas próximas páginas o que você precisa saber sobre
as CSS.
Como funciona as CSS
Nesta lição você aprenderá a desenvolver sua primeira folha de estilos. Você verá o
básico sobre o modelo CSS e que código é necessário para usar CSS em um documento
HTML.
Muitas das propriedades usadas em Cascading Style Sheets (CSS) são semelhantes
àquelas do HTML. Se você está acostumado a usar HTML para layout irá reconhecer
muitos dos códigos que usaremos.
A sintaxe básica das CSS
Suponha que desejamos uma cor de fundo vermelha para a página web.
Usando HTML podemos fazer assim:
<body bgcolor="#FF0000">
Com CSS o mesmo resultado será obtido assim:
body {background-color: #FF0000;}
Como você pode notar os códigos HTML e CSS são mais ou menos parecidos. O
exemplo acima serve também para demonstrar o fundamento do modelo CSS:
seletor {propriedade: valor}

seletor: Em qual tag será aplicada a propriedade. Por exemplo: body
propriedade: A propriedade pode ser como por exemplo: a cor do fundo
valor: O valor da propriedade cor do fundo por exemplo:
vermelha(“#FF0000”)
Mas, onde colocamos o código CSS? É isto que veremos a seguir. Aplicando CSS a um
documento HTML Você pode aplicar CSS a um documento de três maneiras distintas.
Os três métodos de aplicação estão exemplificados a seguir. Recomendo que você foque
no terceiro método, ou seja o método externo. O método externo além de ser menos
confuso para trabalhar por não estar junto com o HTML ele não ficará amostra se
alguém olhar o código fonte da sua página pelo browser, pois estará ‘escondido’ no
servidor onde está hospedando o seu site.
Css Página 7
Método 1: In-line (o atributo style)
Uma maneira de aplicar CSS é pelo uso do atributo style do HTML. Tomando como
base o exemplo mostrado anteriormente à cor vermelha para o fundo da página pode ser
<html>
<head>
<title>Exemplo</title>
</head>
<body style="background-color: #FF0000;">
<p>Esta é uma página com fundo vermelho</p>
</body>
</html>
Método 2: Interno (a tag style)

Uma outra maneira de aplicar CSS e pelo uso da tag <style> do HTML. Como
mostrado:
<html>
<head>
<title>Exemplo</title>
body {background-color: #FF0000;}
</style>
</head>
<body>
<p>Esta é uma página com fundo vermelho</p>
</body>
</html>
Método 3: Externo (link para uma folha de estilos)

O método recomendado é o de “lincar” para uma folha de estilos externa. Usaremos este
método nos exemplos a seguir.
Uma folha de estilos externa é um simples arquivo de texto com a extensão .css. Tal
como qualquer outro tipo de arquivo você pode colocar uma folha de estilos tanto no
servidor como no disco rígido.
Vamos supor, por exemplo, que sua folha de estilos tenha sido nomeada de estilo.css e
está localizada no diretório estilo (o que não é necessário, colocar em pasta separada
do arquivo HTML). Tal situação está mostrada a seguir:
O que você tem a fazer é criar um link no documento HTML (índex.html) para a folha
de estilos (estilo.css). O link é criado em uma simples linha de código HTML como
mostrado a seguir:
<link rel="stylesheet" type="text/css" href="c:\~documentos~/estilo.css" />
Notar que o caminho para a folha de estilos é indicado no atributo href.

Esta linha de código deve ser inserida na seção header do documento HTML, isto é,
entre as tags <head> e </head>. Conforme mostrado abaixo:
<html>
<head>
<title>Meu documento</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
Css Página 8
</head>
<body>
Este link informa ao navegador para usar o arquivo CSS na renderização e apresentação
do layout do documento HTML.
A coisa realmente inteligente disto é que vários documentos HTML podem lincar para
uma mesma folha de estilos. Em outras palavras isto significa que um simples arquivo
será capaz de controlar a apresentação de muitos documentos HTML.
Esta técnica pode economizar uma grande quantidade de trabalho. Se por exemplo, você
quiser trocar a cor do fundo de um site com 100 páginas, a folha de estilos evita que
você edite manualmente uma a uma as páginas para fazer a mudança nos 100
documentos HTML. Usando CSS a mudança se fará em uns poucos segundos trocando-
se a cor em uma folha de estilos central.
Prática:
1 - Dentro do editor e crie dois arquivos — um arquivo HTML e um arquivo CSS —
com os seguintes conteúdos:
Index.html
<html>
<head>
<title>Meu documento</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>Minha primeira folha de estilos</h1>
</body>
</html>
estilo.css
body {
background-color: #FF0000;
}
Salve os dois arquivos no mesmo diretório. Lembre-se de salvar os arquivos com a

extensão apropriada (".css" e ".html"(ou “htm”).
Abra index.html no seu navegador e veja uma página com o fundo vermelho.
Se der certo, a sua primeira página com estilo css foi criada.
Cores e fundos
Você vai aprender agora como aplicar cores de primeiro plano e cores de fundo no seu
website. Abordaremos ainda os métodos avançados de controle e posicionamento de
imagens de fundo.
Cor do primeiro plano: a propriedade 'color'

A propriedade color define a cor do primeiro plano de um elemento. Considere, por
exemplo, que desejamos que todos os cabeçalhos de primeiro nível no documento sejam
na cor vermelha. O elemento HTML que marca tais cabeçalhos é o elemento <h1>. O
código a seguir define todos os <h1> na cor vermelha.
Css Página 9
h1 {
color: #ff0000;
}
As cores podem ser definidas pelo seu valor hexadecimal como no exemplo acima
(#ff0000), com uso do nome da cor ("red") ou ainda pelo seu valor rgb (rgb(255,0,0)).
A propriedade 'background-color'
A propriedade background-color define a cor do fundo de um elemento. O elemento
<body> contém todo o conteúdo de um documento HTML. Assim, para mudar a cor de
fundo da página, devemos aplicar a propriedade background-color ao elemento <body>.
Você pode aplicar cores de fundo para outros elementos, inclusive para cabeçalhos e
textos. No exemplo abaixo foram aplicadas diferentes cores de fundo para os elementos
<body> e <h1>.
body {
background-color: #FFCC66;
}
h1 {
color: #990000;
background-color: #FC9804;
}
Obs.: Note que foram aplicadas duas propriedades ao elemento <h1> separadas por um
ponto e vírgula.
Imagens de fundo [background-image]

A propriedade CSS background-image é usada para definir uma imagem de fundo. Para
inserir uma imagem de fundo na página basta aplicar a propriedade background-image
ao elemento <body> e especificar o caminho para onde está gravada a imagem.
body {
background-image: url("imagem.gif");
}
h1 {
color: #990000;
}
Obs.: Note como foi especificado o caminho para a imagem usando url("imagem.gif").
Isto significa que a imagem está localizada no mesmo diretório da folha de estilos. Pode
ser escolhido um outro diretório para gravar as imagens e o caminho seria
url("../images/imagem.gif") ou até mesmo hospedá-la na Internet:
url("http://www.html.net/imagem.gif").
Imagem de fundo repetida [background-repeat]

No exemplo anterior você observou que a imagem se repetiu tanto na vertical como na
horizontal cobrindo toda a tela? A propriedade background-repeat controla o
comportamento de repetição da imagem de fundo.
A tabela a seguir mostra os quatro diferentes valores para background-repeat.
Css Página 10
Por exemplo, o código mostrado a seguir é para que a imagem não se repita na tela:
body {
background-image: url("butterfly.gif");
}
h1 {
color: #990000;
}
Image de fundo fixa [background-attachment]

A propriedade background-attachment define se a imagem será fixa ou se irá rolar
juntamente com o elemento que a contém.
Uma imagem de fundo fixa permanece no mesmo lugar e não rola com a tela ao
contrário da imagem que não é fixa e rola acompanhando o conteúdo da tela.
A tabela a seguir mostra os quatro diferentes valores para background-attachment. Veja
os exemplos para constatar a diferença entre imagem fixa e imagem que rola.
Por exemplo, o código abaixo fixa a imagem na tela.
body {
}
h1 {
color: #990000;
}
Css Página 11
Posição da imagem de fundo [background-position]
Por padrão uma imagem de fundo é posicionada no canto superior esquerdo da tela. A
propriedade background-position permite alterar este posicionamento padrão e colocar a
imagem em qualquer lugar na tela. Existem várias maneiras de definir o posicionamento
da imagem na tela definindo valores para background-position. Todas elas se utilizam
de um sistema de coordenadas. Por exemplo, os valores '100px 200px' posiciona a
imagem a 100px do topo e a 200px do lado esquerdo da janela do navegador. As
coordenadas podem ser expressas em percentagem da largura da janeja, em unidades
fixas (pixels, centímetros, etc.) ou pode-se usar as palavras top, bottom, center, left e
right. A figura a seguir ilustra o modelo de coordenadas:
Na tabela a seguir são mostrados alguns exemplos.
No exemplo de código a seguir a imagem é posicionada no canto inferior direito da

página:
body {
background-position: right bottom;
}
Css Página 12
h1 {
color: #990000;
}
Compilando [background]
A propriedade background é uma abreviação para todas as propriedades listadas
anteriormente. Com background você declara várias propriedades de modo abreviado,
economizando digitação e alguns bites, além de tornar a folha de estilo mais fácil de se
ler e entender.
Por exemplo, observe as cinco linhas a seguir:
background-position: right bottom;
}
Usando background você consegue o mesmo resultado, abreviando como mostrado

abaixo:
background: #FFCC66 url("imagem.gif") no-repeat fixed right bottom;
A declaração abreviada deve seguir a seguinte ordem:
background-color
background-image
background-repeat
background-attachment
background-position
Se uma das propriedades não for declarada ela assume automaticamente o seu valor
default. Por exemplo, a propriedade background-attachment e background-position não
foram declaradas no código mostrado a seguir:
background: #FFCC66 url("imagem.gif") no-repeat;
As duas propriedades não declaradas assumirão o valor default que como você já sabe
são: a imagem rola na tela e será posicionada no canto superior esquerdo (que são os
valores default para as propriedades não declaradas).
Fontes
Estudaremos as fontes e como aplicá-las usando CSS. Veremos como criar situações
para que determinada fonte seja visualizada pelo usuário mesmo não estando instalada
em seu sistema operacional.
Css Página 13
Família de fontes [font-family]
A propriedade font-family é usada para definir uma lista de fontes e sua prioridade para
apresentação de um elemento em uma página. Se a primeira fonte da lista não estiver
instalada na máquina do usuário, deverá ser usada a segunda e assim por diante até ser
encontrada uma fonte instalada. Existem dois tipos de nomes para definir fontes: nomes
para famílias de fontes e nomes para famílias genéricas. Os dois são explicados a seguir:
nome para famílias de fontes

Exemplos para este tipo (normalmente conhecidas como "font") são "Arial", "Times
New Roman" ou "Tahoma".
nome para famílias genéricas

Famílias genéricas são fontes que pertencem a um grupo com aparência uniforme. Um
exemplo são as fontes sans-serif que englobam a coleção de fontes que "não têm pé".
Ao listar fontes para seu website, comece com aquela preferida, seguindo-se algumas
alternativas para ela. É recomendável encerrar a listagem das fontes com uma fonte
genérica. Assim fazendo, em último caso a página será renderizada com fonte da mesma
família das que foram especificadas quando todas as demais estiverem indisponíveis na
máquina do usuário. A seguir mostramos um exemplo de listagem de fontes:
h1 {font-family: arial, verdana, sans-serif;}

h2 {font-family: "Times New Roman", serif;}
Cabeçalhos <h1> serão renderizados com fonte "Arial". Se o usuário não tiver a font
Arial instalada, será usada a fonte "Verdana". Se ambas estiverem indisponíveis na
máquina do usuário será usada uma fonte da família sans-serif.
Css Página 14
Notar que para especificar a fonte "Times New Roman" foram usadas aspas. Isto é
necessário para fontes com nomes compostos e que contenham espaços entre os nomes.
Estilo da fonte [font-style]

A propriedade font-style define a escolha da fonte em normal, italic ou oblique. No
exemplo a seguir todos as cabeçalhos <h2> serão em itálico.
h1 {font-family: arial, verdana, sans-serif;}

h2 {font-family: "Times New Roman", serif; font-style: italic;}
Fonte variante [font-variant]

A propriedade font-variant é usada para escolher as variantes normal ou smallcaps.
Uma fonte small-caps é aquela que usa letras maiúsculas de tamanhos reduzidos. Veja
os exemplos a seguir:
Se a propriedade font-variant for definida para small-caps e não estiver disponível na

máquina do usuário, será usada fonte em maiúscula.
h1 {font-variant: small-caps;}
h2 {font-variant: normal;}
Peso da fonte [font-weight]

A propriedade font-weight define se a fonte será o quão negrito. Uma fonte pode ser
normal ou bold. Alguns navegadores suportam números de 100-900 (em intervalos de
100 em 100) para definir o peso da fonte.
p {font-family: arial, verdana, sans-serif;}

td {font-family: arial, verdana, sans-serif; font-weight: bold;}
Tamanho da fonte [font-size]

O tamanho da fonte é definido pela propriedade font-size.
Existem muitas unidades (p. ex.:. pixels e porcentagens) que podem ser usadas para
definir o tamanho da fonte. Neste tutorial nós usaremos as unidades mais comuns e
apropriadas. Ver exemplos a seguir:
h1 {font-size: 30px;}
h2 {font-size: 12pt;}
h3 {font-size: 120%;}
p {font-size: 1em;}
Existe uma diferença fundamental entre as quatro unidades adotadas no exemplo acima.
As unidades 'px' e 'pt' são absolutas, enquanto '%' e 'em' permitem ao usuário ajustar o
Css Página 15
tamanho das fontes ao seu gosto e necessidade. Para fazer seu site acessível a todos,
você deverá usar unidades como '%' ou 'em'.
Compilando [font]
Usar font é uma abreviação que permite definir várias propriedades em uma só. Veja a
seguir quatro linhas de código usadas para definir propriedades de fonte para um
parágrafo <p>:
p {
font-style: italic;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif;
}
Usar a abreviação simplifica o código como mostrado abaixo:
p {
font: italic bold 30px arial, sans-serif;
}
A ordem dos valores para font é a mostrada a seguir:
font-style
font-variant
font-weight
font-size
font-family
Textos
Formatar e estilizar textos é um item chave para qualquer web designer. Nesta lição
você será apresentado às interessantes oportunidades que as CSS proporcionam para
adicionar layout aos textos. Serão discutidadas as propriedades listadas abaixo:
Indentação de texto [text-indent]

A propriedade text-indent permite que você aplique um recuo à primeira linha de um
parágrafo. No exemplo a seguir um recuo de 30px é aplicado à todos os textos
p {
text-indent: 30px;
}
Alinhamento de textos [text-align]

A propriedade text-align corresponde ao atributo align das antigas versões do HTML.
Textos podem ser alinhados à esquerda (left), à direita (right) ou centrados (centred). E
temos ainda o valor justify que faz com o texto contido em uma linha se estenda
tocando as margens esquerda e direita. Este tipo de alinhamento é usado em jornais e
revistas. No exemplo a seguir o texto contido na célula de cabeçalho <th> é alinhado à
direita e os contidos nas células de dados <td> são centrados. E, os textos normais em
parágrafos são justificados:
Css Página 16
th {
text-align: right;
}
td {
text-align: center;
}
p {
text-align: justify;
}
Decoração de textos [text-decoration]

A propriedade text-decoration possibilita adicionar "efeitos" em textos. Você pode por
exemplo, sublinhar textos, cortar o texto com uma linha, colocar uma linha sobre o
texto, etc. No exemplo a seguir os cabeçalhos <h1> são sublinhados, os cabeçalhos
<h2> levam um linha em cima e os cabeçalhos <h3> são cortados por uma linha.
h1 {
text-decoration: underline;
}
h2 {
text-decoration: overline;
}
h3 {
text-decoration: line-through;
}
Espaço entre letras [letter-spacing]

O espaçamento entre os caracteres de um texto é controlado pela propriedade
letterspacing. O valor desta propriedade define o espaço entre os caracteres. Por
exemplo, se você deseja um espaço de 3px entre as letras do texto de um parágrafo <p>
e de 6px entre as letras do texto de um cabeçalho <h1> o código a seguir deverá ser
usado.
h1 {
letter-spacing: 6px;
}
p {
}
Transformação de textos [text-transform]

A propriedade text-transform controla a capitalização (tornar maiúscula) do texto. Você
pode escolher capitalize, uppercase ou lowercase independentemente de como o texto
foi escrito no código HTML. Como exemplo tomamos a palavra "cabeçalho" que pode
ser apresentada ao usuário como "CABEÇALHO" ou "Cabeçalho". São quatro os
valores possíveis para texttransform:
capitalize
Capitaliza a primeira letra de cada palavra. Por exemplo: "john doe" transforma-se para
"John Doe".
uppercase
Css Página 17
Converte todas as letras para maiúscula. Por exemplo: "john doe" transforma-se
para"JOHN DOE".
lowercase
Converte todas as letras para minúscula. Por exemplo: "JOHN DOE" transforma-se
para"john doe".
none
Sem trasformações - o texto é apresentado como foi escrito no código HTML. Para
exemplificar vamos usar uma lista de nomes. Os nomes estão marcados com o elemento
<li> (item de lista). Vamos supor que desejamos os nomes capitalizados e os cabeçalhos
em letras maiúsculas. Ao consultar o exemplo sugerido para este código dê uma olhada
no HTML da página e observe que os textos no código foram escritos com todas as
letras em minúsculas.
h1 {
text-transform: uppercase;
}
li {
text-transform: capitalize;
}
Links
Você pode aplicar aos links tudo que aprendeu nas lições anteriores (mudar cores,
fontes, sublinhados, etc). A novidade aqui é que você pode definir as propriedades de
maneira diferenciada de acordo com o estado do link ou seja visitado, não visitado,
ativo ou com o ponteiro do mouse sobre o link. Isto possibilita adicionar interessantes
efeitos ao seu website. Para estilizar estes efeitos você usará as chamadas pseudoclasses.
O que é pseudo-classe?
Uma pseudo-classe permite estilizar levando em conta condições diferentes ou eventos
ao definir uma propriedade de estilo para uma tag HTML. Vamos ver um exemplo.
Como você já sabe, links são marcados no HTML com tags <a>. Podemos então usar a
como um seletor CSS:
a {
color: blue;
}
Um link pode ter diferentes estados. Por exemplo, pode ter sido visitado ou não
visitado. Você usará pseudo-classes para estilizar links visitados e não visitados.
a:link {
color: blue;
}
a:visited {
color: red;
}
Use as pseudo-classes a:link e a:visited para estilizar links não visitados e visitados
respectivamente. Links ativos são estilizados com a pseudo-classe a:active e a:hover,
esta última é a pseudo-classe para links com o ponteiro do mouse sobre ele.
Css Página 18
A seguir explicaremos com mais detalhes e exemplificação, as quatro pseudo-classes.
Pseudo-classe: link
A pseudo-classe :link é usada para links não visitados.
No exemplo a seguir links não vistados serão na cor verde.
a:link {
color: green;
}
Pseudo-classe: visited
A pseudo-clases: visited é usada para links visitados. No exemplo a seguir links
visitados serão na cor amarela:
a:visited {
color: yellow;
}
Pseudo-classe: active
A pseudo-classe :active é usada para links ativos.
No exemplo a seguir links ativos terão seu fundo na cor vermelha:
a:active {
background-color: red;
}
Pseudo-classe: hover
A pseudo-classe :hover é usada para quando o ponteiro do mouse está sobre o link. Isto
pode ser usado para conseguir efeitos bem interessantes. Por exemplo, podemos mudar
a cor do link para laranja e o texto para itálico quando o ponteiro do mouse passa sobre
ele, o código CSS para estes efeitos é o mostrado a seguir:
a:hover {
color: orange;
font-style: italic;
}
Exemplo 1: Efeito quando o ponteiro está sobre o link

É comum a criação de efeitos diferentes quando o ponteiro está sobre o link. Veremos a
seguir alguns exemplos extras de estilização da pseudo-classe :hover.
Exemplo 1a: Espaçamento entre as letras

Como você deve estar lembrado da lição anterior, o espaçamento entre as letras de um
texto pode ser controlado pela propriedade letter-spacing. Isto pode ser aplicado aos
links para obter um efeito interessante:
a:hover {
Css Página 19
font-weight:bold;
color:red;
}
Exemplo 1b: UPPERCASE e lowercase

Na lição anterior vimos a propriedade text-transform, para estilizar com letras
maiúsculas e minúsculas. Isto pode ser usado para estilizar links:
a:hover {
text-transform: uppercase;
font-weight:bold;
color:blue;
background-color:yellow;
}
Exemplo 2: Removendo sublinhado dos links

Uma pergunta comum: Como remover o sublinhado dos links?
Você deve estudar com muito cuidado a necessidade de retirar o sublinhado dos
links, pois isto poderá reduzir signifcativamente a usabilidade do website. As
pessoas estão acostumadas com links na cor azul e sublinhados e sabem que ali há um
texto a ser clicado. Se você muda a cor e retira o sublinhado dos links, poderá confundir
seus visitantes e em conseqüência não retirar o máximo dos conteúdos do seu website.
Feita esta ressalva, é muito fácil retirar o sublinhado dos links. Conforme explicado na
lição anterior, a propriedade text-decoration pode ser usada para definir se o texto é ou
não sublinhado. Para remover o sublinhado, basta definir o valor none para a
propriedade text-decoration.
a {
}
Alternativamente, você pode definir text-decoration juntamente com outras

propriedades para as quatro pseudo-classes.
a:link {
color: blue;
}
a:visited {
color: purple;
}
a:active {
background-color: yellow;
}
a:hover {
color:red;
}
Css Página 20
Identificando e agrupando elementos (classes e id)
Em alguns casos você deseja aplicar estilos a um elemento ou grupo de elementos em
particular. Nesta lição veremos como usar class e id para estilizar elementos. Como
definir uma cor para um determinado cabeçalho, diferente da cor usada para os demais
cabeçalhos do website? Como agrupar links em diferentes categorias e estilizar cada
categoria diferentemente? Estas são algumas das questões que vamos ver agora.
Agrupando elementos com uso de classe

Vamos supor que temos duas listas de links para diferentes tipos de uvas usadas na
produção de vinho branco e de vinho tinto. O código HTML conforme mostrado
abaixo:
<p>Uvas para vinho branco:</p>

<ul>
<li><a href="ri.htm">Riesling</a></li>
<li><a href="ch.htm">Chardonnay</a></li>
<li><a href="pb.htm">Pinot Blanc</a></li>
</ul>
<p>Uvas para vinho tinto:</p>
<ul>
<li><a href="cs.htm">Cabernet Sauvignon</a></li>
<li><a href="me.htm">Merlot</a></li>
<li><a href="pn.htm">Pinot Noir</a></li>
</ul>
Queremos que os links para vinho branco sejam na cor amarela, para vinho tinto na cor
vermelha e os demais links na página permaneçam na cor azul.
Para conseguir isto, dividimos os links em duas categorias. Isto é feito atribuindo uma
classe para cada link, usando o atributo class.
Vamos especificar esta classe no exemplo a seguir:
<p>Uvas para vinho branco:</p>

<ul>
<li><a href="ri.htm" class="whitewine">Riesling</a></li>
<li><a href="ch.htm" class="whitewine">Chardonnay</a></li>
<li><a href="pb.htm" class="whitewine">Pinot Blanc</a></li>
</ul>
<p>Uvas para vinho tinto:</p>
<ul>
<li><a href="cs.htm" class="redwine">Cabernet Sauvignon</a></li>
<li><a href="me.htm" class="redwine">Merlot</a></li>
<li><a href="pn.htm" class="redwine">Pinot Noir</a></li>
</ul>
Agora podemos definir propriedades específicas para links pertencentes as classes

whitewine e redwine, respectivamente.
a {
color: blue;
}
a.whitewine {
color: #FFBB00;
}
a.redwine {
Css Página 21
color: #800000;
}
<li><a href="cs.htm" class="redwine">Cabernet Sauvignon</a></li>
<li><a href="me.htm" class="redwine">Merlot</a></li>
<li><a href="pn.htm" class="redwine">Pinot Noir</a></li>
</ul>
Como mostrado no exemplo acima, pode-se definir propriedades para estilização dos
elementos pertencentes a uma determinada classe usando um .nomedaclasse na folha de
estilos do documento.
Identificando um elemento com uso de id

Além de agrupar elementos podemos querer atribuir identificação a um único elemento.
Isto é feito usando o atributo id. O que há de especial no atributo id é que não poderá
existir dois ou mais elementos com a mesma id, ou seja em um documento apenas um e
somente um elemento poderá ter uma determinada id. Cada id é única. Para casos em
que haja necessidade de mais de um elemento com a mesma identificação usamos o
atributo class. A seguir um exemplo de possível uso de id:
<h1>Capítulo 1</h1>
...
<h2>Capítulo 1.1</h2>
...
...
<h1>Capítulo 2</h1>
...
...
<h3>Capítulo 2.1.2</h3>
...
O exemplo acima simula os cabeçalhos de um documento estruturado em capítulos e

parágrafos. É comum atribuir uma id para cada capítulo como mostrado a seguir:
<h1 id="c1">Capítulo 1</h1>

...
<h2 id="c1-1">Capítulo 1.1</h2>
...
<h2 id="c1-2">Capítulo 1.2</h2>
...
<h1 id="c2">Capítulo 2</h1>
...
<h2 id="c2-1">CCapítulo 2.1</h2>
...
<h3 id="c2-1-2">Capítulo 2.1.2</h3>
...
Vamos supor que o cabeçalho do capítulo 1.2 deva ser na cor vermelha. Isto pode ser
feito conforme mostrado na folha de estilo a seguir:
#c1-2 {
color: red;
}
Css Página 22
Como mostrado no exemplo acima, podemos definir propriedades para um elemento
específico usando um seletor #id na folha de estilos para o documento.
Agrupando elementos (span e div)

Os elementos <span> e <div> são usados para agrupar e estruturar um documento e são
freqüentemente usados em conjunto com os atributos class e id.
Nesta lição veremos com detalhes o uso dos elementos HTML <span> e <div> no que
se refere a sua vital importância para as CSS.
· Agrupando com <span>

·
· Agrupando com<div>
Agrupando com <span>

O elemento <span> é um elemento neutro e que não adiciona qualquer tipo de
semântica ao documento. Contudo, <span> pode ser usado pelas CSS para adicionar
efeitos visuais a partes específicas do texto no seu documento. Um exemplo deste uso é
mostrado na citação abaixo:
<p>Dormir cedo e acordar cedo faz o homem saudável, rico e sábio.</p>
Vamos supor que queremos enfatizar na cor vermelha os benefícios apontados na frase.
Para isto marcamos os benefícios com <span>. A cada span atribuímos uma class, e
estilizamos na folha de estilos:
<p>Dormir cedo e acordar cedo faz o homem

<span class="beneficio">saudável</span>,
<span class="beneficio">rico</span>
e <span class="beneficio">sábio</span>.</p>
A folha de estilos:
span.beneficio {
color:red;
}
É claro que você pode usar id para estilizar o elemento <span>. Mas, como você deve
estar lembrado, deverá usar uma única id para cada um os três elementos <span>,
conforme foi explicado na lição anterior.
Agrupando com <div>

Enquanto <span> é usado dentro de um elemento nível de bloco como vimos no
exemplo anterior, <div> é usado para agrupar um ou mais elementos nível de bloco.
Diferenças à parte, o agrupamento com <div> funciona mais ou menos da mesma
maneira. Vamos ver um exemplo tomando duas listas de presidentes dos Estados
Unidos agrupados segundo suas filiações políticas:
<div id="democrats">
Css Página 23
<ul>
<li>Franklin D. Roosevelt</li>
<li>Harry S. Truman</li>
<li>John F. Kennedy</li>
<li>Lyndon B. Johnson</li>
<li>Jimmy Carter</li>
<li>Bill Clinton</li>
</ul>
</div>
<div id="republicans">
<ul>
<li>Dwight D. Eisenhower</li>
<li>Richard Nixon</li>
<li>Gerald Ford</li>
<li>Ronald Reagan</li>
<li>George Bush</li>
<li>George W. Bush</li>
</ul>
</div>
E na folha de estilos, podemos agrupar a estilização da mesma maneira como fizemos

no exemplo acima:
#democrats {
background:blue;
}
#republicans {
background:red;
}
Nos exemplos mostrados acima usamos somente <div> e <span> para simples
estilizações, tais como cores de textos e de fundos. Contudos estes dois elementos
possibilitam estilizações bem mais avançadas como veremos adiante nas lições deste
tutorial.
Box Model
O box model (modelo das caixas) em CSS, descreve os boxes (as caixas) geradas pelos
elementos HTML. O box model, detalha ainda, as opções de ajuste de margens, bordas,
padding e conteúdo para cada elemento. Abaixo apresentamos um diagrama
representando a estrutura de construção do box model:
Css Página 24
O box model em CSS
A ilustração acima é teórica. Vamos explicá-la na prática tomando como base um

cabeçalho e um texto. O HTML para nosso exemplo (o texto foi retirado da Declaração
Universal dos Direitos Humanos e está no original em inglês) é o mostrado abaixo:
<h1>Article 1:</h1>
<p>All human beings are born free
and equal in dignity and rights.
They are endowed with reason and conscience
and should act towards one another in a
spirit of brotherhood</p>
Definindo estilos para cores e fontes o exemplo pode ser apresentado como a seguir:
O exemplo contém dois elementos: <h1> e <p>. O box model para os dois
elementos é mostrado a seguir:
Css Página 25
Embora possa parecer um pouco complicado, a ilustração mostra como cada um dos
elementos é contido em um box (uma caixa). Boxes que podem ser ajustados e
controlados via CSS.
Margin e padding
Na lição anterior vimos o box model. Nesta lição veremos como controlar a
apresentação de um elemento definindo as propriedades margin e padding.
Definindo margin de um elemento

Um elemento tem quatro lados: right, left, top e bottom (direito, esquerdo, superior e
inferior). A margin é a distância entre os lados de elementos vizinhos (ou às bordas do
documento). Veja o diagrama da lição anterior. Vamos começar com um exemplo
mostrando como definir margins para o documento, ou seja, para o elemento <body>. A
ilustração a seguir mostra como serão as margens da página.
Css Página 26
As CSS são mostradas abaixo:
body {
margin-top: 100px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 70px;
}
Ou, adotando uma sintaxe mais elegante:
body {
margin: 100px 40px 10px 70px;
}
As margens para a maioria dos elementos pode ser definida conforme o exemplo acima.
Podemos então, por exemplo, definir margens para todos os parágrafos <p>:
body {
}
p {
}
Definindo padding de um elemento

Padding pode também ser entendido como "enchimento". Isto faz sentido, porque
padding não é computado na distância entre elementos, padding define simplesmente a
distância entre a borda e o conteúdo do elemento.
Ilustramos o uso de padding através de um exemplo onde todos os cabeçalhos têm uma
cor de fundo definida:
h1 {
background: yellow;
}
h2 {
background: orange;
}
Definindo padding para os cabeçalhos, alteramos a quantidade de enchimento existente

ao redor de cada um deles:
h1 {
background: yellow;
padding: 20px 20px 20px 80px;
}
h2 {
background: orange;
padding-left:120px;
}
Bordas
Bordas podem ser usadas para muitas coisas, por exemplo, como elemento
Css Página 27
decorativo ou para servir de linha de separação entre duas coisas. CSS proporciona
infinitas possibilidades de uso de bordas na página.
A espessura das bordas [border-width]

A espessura das bordas é definida pela propriedade border-width, que pode assumir os
valores thin, medium, e thick (fina, média e grossa), ou um valor numérico em pixels. A
figura a seguir ilustra algumas espessuras de bordas:
As cores das bordas [border-color]

A propriedade border-color define as cores para as bordas. Os valores são expressos em
código ou nome de cores, por exemplo, "#123456", "rgb(123,123,123)" ou"yellow".
Tipos de bordas[border-style]
Existem vários tipos de bordas disponíveis para escolha. A seguir apresentamos 8 tipos
diferentes de bordas e como elas são renderizadas Internet Explorer 5.5. Todos os
exemplos são mostrados na cor "gold" e com espessura "thick", mas você pode usar
qualquer cor e espessura ao seu gosto.
Os valores none ou hidden podem ser usados quando não se deseja a existência de
bordas.
Exemplos de definição de bordas

As três propriedades explicadas acima podem ser definidas juntas para cada elemento e
resultam em diferentes bordas. Para exemplificar, foram estilizadas diferentes bordas
para os elementos <h1>, <h2>, <ul> e <p>. O resultado pode não ser uma obra prima,
mas, ilustra bem algumas das inúmeras possibilidades de estilização de bordas:
Css Página 28
h1 {
border-width: thick;
border-style: dotted;
border-color: gold;
}
h2 {
border-width: 20px;
border-style: outset;
border-color: red;
}
p {
border-width: 1px;
border-style: dashed;
border-color: blue;
}
ul {
border-width: thin;
border-style: solid;
border-color: orange;
}
É possível ainda definir propriedades especialmente para as bordas top, bottom, right ou
left (superior, inferior, direita e esquerda). Veja o exemplo a seguir:
h1 {
border-top-width: thick;
border-top-style: solid;
border-top-color: red;
border-bottom-width: thick;
border-bottom-style: solid;
border-bottom-color: blue;
border-right-width: thick;
border-right-style: solid;
Css Página 29
border-right-color: green;
border-left-width: thick;
border-left-style: solid;
border-left-color: orange;
}
Compilando [border]
Assim como para muitas outras propriedades, você pode usar uma declaração abreviada
para bordas. Vamos a um exemplo:
p {
border-width: 1px;
border-style: solid;
border-color: blue;
}
Pode ser abreviada assim:
p {
border: 1px solid blue;
}
Altura e largura
Até agora ainda não fizemos qualquer consideração sobre as dimensões dos elementos
com que trabalhamos. Nesta lição veremos como é fácil atribuir uma altura e uma
largura para um elemento.
Atribuindo largura [width]

A propriedade width destina-se a definir a largura de um elemento. O exemplo a seguir
constrói um box dentro do qual podemos digitar um texto:
div.box {
width: 200px;
border: 1px solid black;
background: orange;
}
Atribuindo altura [height]

No exemplo acima a altura será determinada pelo conteúdo inserido no box. Você pode
definir a altura de um elemento com a propriedade height. Como exemplo, vamos fazer
a altura do box anterior igual a 500px:
div.box {
height: 500px;
width: 200px;
border: 1px solid black;
background: orange;
}
Css Página 30
Flutuando elementos (floats)
Um elemento pode ser 'flutuado' à esquerda ou à direita com uso da propriedade float.
Isto significa que o box e seu conteúdo são deslocados para a direita ou para a esquerda
do documento (ou do bloco container). A figura a seguir ilustra o princípio de float:
Se desejamos que um texto seja posicionado em

volta de uma figura como mostrado abaixo, basta
flutuarmos a imagem:
Uma imagem flutuada
textoxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxtexto
<div id="picture">
<img src="bandeiradobrasil.jpg" alt="Bandeira do Brasil">
</div>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx,
xxxxxxxxxxxxxxxxxxxxxxxxx...</p>
Para conseguir o efeito mostrado, basta definir uma largura para o box que o contém e
declarar para ele float: left;
#picture {
float:left;
width: 100px;
}
Css Página 31
Outro exemplo : colunas
Floats podem ser usados para construir colunas em um documento. Para criar as colunas
estruturamos as colunas no código HTML usando <div> como mostrado a seguir:
<div id="column1">
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...</p>
</div>
<div id="column2">
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx,
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...</p>
</div>
<div id="column3">
<p>xxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...</p>
</div>
A seguir definimos a largura de cada coluna, por exemplo 33%, e declaramos float: left;
para cada uma das colunas:
#column1 {
float:left;
width: 33%;
}
#column2 {
float:left;
width: 33%;
}
#column3 {
float:left;
width: 33%;
}
float pode ser declarado left, right ou none.
A propriedade clear
A propriedade clear é usada para controlar o comportamento dos elementos que se
seguem aos elementos floats no documento.
Por padrão, o elemento subsequente a um float, ocupa o espaço livre ao lado do
elemento flutuado. Veja no exemplo acima que o texto deslocou-se automaticamente
para o lado da foto de Bill Gates.
A propriedade clear pode assumir os valores left, right, both ou none. A regra geral é:
se clear, for por exemplo definido both para um box, a margem superior deste box será
posicionada sempre abaixo da margem inferior dos boxes flutuados que estejam antes
dele no código.
<div id="picture">
<img src="bandeiradobrasil.jpg" alt="Bandeira do Brasil">
</div>
<h1>Bandeira do Brasil</h1>
<p class="floatstop">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx,
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...</p>
Css Página 32
Para evitar que o texto se posicione no espaço livre deixado pela foto do Bandeira do
Brasil basta adicionar a seguinte regra CSS:
#picture {
float:left;
width: 100px;
}
.floatstop {
clear:both;
}
Posicionando elementos
Com posicionamento CSS podemos colocar um elemento em uma posição exata na
página. Combinado com floats (ver lição 13), o posicionamento abre muitas
possibilidades para criação de layouts precisos e avançados.
O princípio de posicionamento CSS

Considere a janela do navegador como um sistema de coordenadas:
O princípio de posicionamento CSS estabelece que você pode posicionar um elemento

em qualquer lugar na tela usando um sistema de coordenadas. Vamos supor que
queremos posicionar um cabeçalho. Usando o box model o cabeçalho pode ser
estilizado para ser apresentado como mostrado abaixo:
h1 {
position:absolute;
top: 100px;
left: 200px;
}
Css Página 33
O resultado é mostrado a seguir:
Como você pode ver, posicionar com CSS é uma técnica precisa para colocar
elementos. É muito mais fácil do que usar tabelas, imagens transparentes e tudo mais.
Um elemento posicionado absolutamente não cria nenhum espaço no documento. Isto
significa que não deixa nenhum espaço vazio após ser posicionado. Para posicionar um
elemento de forma absoluta a propriedade position deve ser definida para absolute.
Você pode então usar as propriedades left, right, top, e bottom para definir as
coordenadas e posicionar o elemento. Para exemplificar o posicionamento absoluto
escolhemos colocar quatro boxes nos quatro cantos da página:
#box1 {
position:absolute;
top: 50px;
left: 50px;
}
#box2 {
position:absolute;
top: 50px;
right: 50px;
}
#box3 {
position:absolute;
bottom: 50px;
right: 50px;
}
#box4 {
position:absolute;
bottom: 50px;
left: 50px;
}
Css Página 34
Posicionamento relativo
Para posicionar um elemento de forma relativa a propriedade position deve ser definida
para relative. A diferença entre os dois tipos de posicionamento é a maneira como o
posicionamento é calculado. O posicionamento para posição relativa é calculado com
base na posição original do elemento no documento. Isto significa uma
movimentação do elemento para a esquerda, para a direita, para cima ou para baixo.
Assim fazendo o elemento ocupa um espaço após ser posicionado.
Como exemplo de posicionamento relativo vamos tentar posicionar três imagens
relativamente as suas posições originais na página. Notar como as imagens deixam um
espaço vazio nas suas posições originais no documento:
#bola1 {
position:relative;
left: 350px;
bottom: 150px;
}
#bola2 {
position:relative;
left: 150px;
bottom: 500px;
}
#bola3 {
position:relative;
left: 50px;
bottom: 700px;
}
Usando z-index (Layers)

CSS usa o espaço tri-dimensional - altura, largura e profundidade. Nas lições anteriores
vimos as duas primeiras dimensões. Nesta lição aprenderemos como colocar elementos
em layers (camadas). Resumindo, camadas significam como os elementos se sobrepõem
uns aos outros. Para fazer isto definimos para cada elemento um número índice (z-
index). O comportamento é que elementos com número índice maior se sobrepõem
àqueles com menor número.
Vamos supor um royal flush no jogo de poker. As cartas podem ser apresentadas como
se cada uma delas tivesse um z-index:
Css Página 35
No caso mostrado, os números índice estão em uma seqüência direta (de 1-5), contudo o
mesmo resultado poderia ser obtido com uso de 5 diferentes números, não em
seqüência. O que conta é a cronologia dos números (a ordem).
O código para a ilustração das cartas é mostrado a seguir:
#ten_of_diamonds {
position: absolute;
left: 100px;
bottom: 100px;
z-index: 1;
}
#jack_of_diamonds {
position: absolute;
left: 115px;
bottom: 115px;
z-index: 2;
}
#queen_of_diamonds {
position: absolute;
left: 130px;
bottom: 130px;
z-index: 3;
}
#king_of_diamonds {
position: absolute;
left: 145px;
bottom: 145px;
z-index: 4;
}
#ace_of_diamonds {
position: absolute;
left: 160px;
bottom: 160px;
z-index: 5;
}
O método é simples, mas as possibilidades são muitas. Você pode colocar imagens
sobre textos, texto sobre texto, etc.
BIBLIOGRAFIA:
http://www.w3.org/International/O-charset.pt-br.php
http://www.w3c.br/divulgacao/guiasreferencia/xhtml1/#mod-eventos
http://www.w3schools.com/css/
http://pt.wikipedia.org/wiki/Cascading_Style_Sheets
http://pt-br.html.net/tutorials/css/
Css Página 36
CSS CURSO W3C ESCRITÓRIO BRASIL
ÍNDICE
1. CSS 5
O que é CSS? 5
2. Seletores complexos 7
O que é um seletor? 7
Exemplo de funcionamento 8
3. Gradiente 11
“Stops” ou definindo o tamanho do seu gradiente 12
4. Columns 15
column-count 15
column-width 15
column-gap 16
5. Transform 2D 17
CSS Transform na prática 17
Várias transformações em um único elemento 18
transform-origin 18
6. Transições e animações 21
O básico: propriedade transition 21
Propriedade animation e regra keyframe 24
Definindo ciclos 28
7. Bordas 31
Dividindo a imagem 31
Comportamento da imagem 32
Aplicação 32
8. Múltiplos backgrounds 35
9. Módulo Template Layout 37

Sintaxe e funcionamento 39
O funcionamento da propriedade display 39
Definindo a largura e altura dos slots 41
O funcionamento da propriedade position 42
Pseudo-elemento ::slot() 43
10. Cores 45
RGBA 45
RGBA e a diferença da propriedade OPACITY 45
currentColor 47
11. Paged media 49
@page 49
Terminologia e Page Model (modelo de página) 50
Page box 50
Page area 51
Margin box 51
Page sheet 51
Non-printable area - Área não impressa 52
Área de impressão 52
Propriedade size 52
auto 52
landscape 52
portrait 52
Page-size 53
12. @font-face 55
Compatibilidade 56
Kit de sobrevivência 56
13. Presentation-levels 57
Como funciona o modelo 57
A propriedade presentation-level 58
1. CSS
O que é CSS?
O CSS formata a informação entregue pelo HTML. Essa informação pode ser qualquer coisa: ima-
gem, texto, vídeo, áudio ou qualquer outro elemento criado. Grave isso: CSS formata a informação.
Essa formatação na maioria das vezes é visual, mas não necessariamente. No CSS Aural, nós ma-
nipulamos o áudio entregue ao visitante pelo sistema de leitura de tela. Nós controlamos volume,
profundidade, tipo da voz ou em qual das caixas de som a voz sairá. De certa forma você está for-
matando a informação que está em formato de áudio e que o visitante está consumindo ao entrar
no site utilizando um dispositivo ou um sistema de leitura de tela. O CSS prepara essa informação
para que ela seja consumida da melhor maneira possível.
O HTML5 trouxe poucas novidades para os desenvolvedores client-side. Basicamente foram cria-
das novas tags, o significado de algumas foi modificado e outras tags foram descontinuadas. As no-
vidades interessantes mesmo ficaram para o pessoal que conhece Javascript. As APIs que o HTML5
disponibilizou são sem dúvida uma das features mais aguardadas por todos estes desenvolvedores.
Diferentemente do CSS3 que trouxe mudanças drásticas para a manipulação visual dos elementos
do HTML.
Com o CSS que nós conhecemos podemos formatar algumas características básicas: cores, back-
ground, características de font, margins, paddings, posição e controlamos de uma maneira muito
artesanal e simples a estrutura do site com a propriedade float.
Você deve pensar: “mas com todas as características nós conseguimos fazer sites fantásticos, com
design atraente e com a manutenção relativamente simples”. E eu concordo com você, mas outras
características que nós não temos controles e dependemos de:

1) Algum programa visual como o Photoshop para criarmos detalhes de layout;
2) Javascript para tratarmos comportamentos ou manipularmos elementos específicos na es-
trutura do HTML;
3) Estrutura e controle dos elementos para melhorarmos acessibilidade e diversos aspectos do
SEO;
Com as atualizações do CSS3 e com os browsers atualizando o suporte do CSS2.1, nós entramos em
patamar onde sem dúvida o CSS é a arma mais poderosa para o designer web. Segue uma pequena
lista dos principais pontos que podemos controlar nesse novo patamar:
1) selecionar primeiro e último elemento;
2) selecionar elementos pares ou ímpares;
3) selecionarmos elementos específicos de um determinado grupo de elementos;
4) gradiente em textos e elementos;
5) bordas arredondadas;
6) sombras em texto e elementos;
7) manipulação de opacidade;
8) controle de rotação;
9) controle de perspectiva;
10) animação;
11) estruturação independente da posição no código HTML;
É agora que começa diversão ao formatar sites com CSS.

2. SELETORES COMPLEXOS
A sintaxe do CSS é simples:
seletor {
propriedade: valor;
}
A propriedade é a característica que você deseja modificar no elemento. O valor é o valor referente
a esta característica. Se você quer modificar a cor do texto, o valor é um Hexadecimal, RGBA ou até
mesmo o nome da cor por extenso. Até aqui, nada diferente. Muitas vezes você não precisa apren-
der do que se trata a propriedade, basta saber que existe e se quiser decorar, decore. Propriedades
são criadas todos os dias e não é um ato de heroísmo você saber todas as propriedades do CSS e
seus respectivos valores.
Os seletores são a alma do CSS e você precisa dominá-los. É com os seletores que você irá escolher
um determinado elemento dentro todos os outros elementos do site para formatá-lo. Boa parte da
inteligência do CSS está em saber utilizar os seletores de uma maneira eficaz, escalável e inteligente.
O que é um seletor?
O seletor representa uma estrutura. Essa estrutura é usada como uma condição para determinar
quais elementos de um grupo de elementos serão formatados.
Seletores encadeados e seletores agrupados são a base do CSS. Você os aprende por osmose duran-
te o dia a dia. Para você lembrar o que são seletores encadeados e agrupados segue um exemplo
abaixo:
Exemplo de seletor encadeado:
div p strong a {
color: red;
}

Este seletor formata o link (a), que está dentro de um strong, que está dentro de P e que por sua vez
está dentro de um DIV.
Exemplo de seletor agrupado:
strong, em, span {

color: red;
}
Você agrupa elementos separados por vírgula para que herdem a mesma formatação.
Estes seletores são para cobrir suas necessidades básicas de formatação de elementos. Eles fazem o
simples. O que vai fazer você trabalhar menos, escrever menos código CSS e também menos códi-
go Javascript são os seletores complexos.
Os seletores complexos selecionam elementos que talvez você precisaria fazer algum script em
Javascript para poder marcá-lo com uma CLASS ou um ID para então você formatá-lo. Com os
seletores complexos você consegue formatar elementos que antes eram inalcançáveis.
Exemplo de funcionamento
Imagine que você tenha um título (h1) seguido de um parágrafo (p). Você precisa selecionar todos
os parágrafos que vem depois de um título h1. Com os seletores complexos você fará assim:
h1 + p {
color:red;
}
Esses seletores é um dos mais simples e mais úteis que eu já utilizei em projetos por aí. Não precisei
adicionar uma classe com JQuery, não precisei de manipular o CMS para marcar esse parágrafo,
não precisei de nada. Apenas apliquei o seletor.

Abaixo, veja uma lista de seletores complexos e quais as suas funções. Não colocarei todas as possi-
bilidades aqui porque podem haver modificações, novos formatos ou outros formatos que podem
ser descontinuados. Para ter uma lista sempre atualizada, siga o link no final da tabela.
PADRÃO SIGNIFICADO CSS
elemento[atr] Elemento com um atributo específico. 2
elemento[atr=”x”] Elemento que tenha um atributo com um valor específico igual a “x”. 2
elemento[atr~=”x”] Elemento com um atributo cujo valor é uma lista separada por espa- 2
ços, sendo que um dos valores é “x”.
elemento[atr^=”x”] Elemento com um atributo cujo valor comece exatamente com 3
string “x”.
elemento[atr$=”x”] Elemento com um atributo cujo valor termina exatamente com 3
string “x”.
elemento[atr*=”x”] Elemento com um atributo cujo valor contenha a string “x”. 3
elemento[atr|=”en”] Um elemento que tem o atributo específico com o valor que é sepa- 2
rado por hífen começando com EN (da esquerda para direita).
elemento:root Elemento root do documento. Normalmente o HTML. 3
elemento:nth- Selecione um objeto N de um determinado elemento. 3
child(n)
elemento:nth-last- Seleciona um objeto N começando pelo último objeto do elemento. 3
child(n)
elemento:empty Seleciona um elemento vazio, sem filhos. Incluindo elementos de 3
texto.
elemento:enabled Seleciona um elemento de interface que esteja habilitado ou desabi- 3
elemento:disabled lidade, como selects, checkbox, radio button etc.
elemento:checked Seleciona elementos que estão checados, como radio buttons e 3
checkboxes.
E>F Seleciona os elementos E que são filhos diretos de F. 2
E+F Seleciona um elemento F que precede imediatamente o elemento E. 2
Lista atualizada pelo W3C http://www.w3.org/TR/css3-selectors/#selectors

3. GRADIENTE
Uma das features mais interessantes é a criação de gradientes apenas utilizando CSS. Todos os
browsers mais novos como Safari, Opera, Firefox e Chrome já aceitam essa feature e você pode
utilizá-la hoje. Os Internet Explorer atuais (8 e 9) não reconhecem ainda, contudo você poderá
utilizar imagens para estes browsers que não aceitam essa feature. Você pode perguntar: “Mas já
que terei o trabalho de produzir a imagem do gradiente, porque não utilizar imagens para todos os
browsers?“ Lembre-se que se utilizar uma imagem, o browser fará uma requisição no servidor bus-
cando essa imagem, sem imagem, teremos uma requisição a menos, logo o site fica um pouquinho
mais rápido. Multiplique isso para todas as imagens de gradiente que você fizer e tudo realmente
fará mais sentido.
Deixe para que os browsers não adeptos baixem imagens e façam mais requisições.
Veja abaixo um exemplo de código, juntamente com o fallback de imagem:
div {
width:200px;
height:200px;
background-color: #FFF;
/* imagem caso o browser não aceite a feature */

background-image: url(images/gradiente.png);
/* Firefox 3.6+ */
background-image: -moz-linear-gradient(green, red);

background-image: -webkit-linear-gradient(green, red);
/* Opera 11.10+ */
background-image: -o-linear-gradient(green, red);
}
Atenção: Até que os browsers implementem de vez essa feature, iremos utilizar seus prefixos.

Como ficou:
“Stops” ou definindo o tamanho do seu gradiente

O padrão é que o gradiente ocupe 100% do elemento como vimos no exemplo anterior, mas muitas
vezes queremos fazer apenas um detalhe.
Nesse caso nós temos que definir um STOP, para que o browser saiba onde uma cor deve terminar
para começar a outra. Perceba o 20% ao lado da cor vermelha. O browser calcula quanto é 20% da
altura (ou largura dependendo do caso) do elemento, e começa o gradiente da cor exatamente ali.
O código de exemplo segue abaixo:
/* Firefox 3.6+ */
background-image: -moz-linear-gradient(green, red 20%);

background-image: -webkit-linear-gradient(green, red 20%);
/* Opera 11.10+ */
background-image: -o-linear-gradient(green, red 20%);
Veja o resultado:
Se colocarmos um valor para o verde, nós iremos conseguir efeitos que antes só conseguiríamos no
Illustrator ou no Photoshop. Segue o código e o resultado logo após:
/* Firefox 3.6+ */
background-image: -moz-linear-gradient(green 10%, red 20%);

background-image: -webkit-linear-gradient(green 10%, red
20%);
/* Opera 11.10+ */
background-image: -o-linear-gradient(green 10%, red 20%);
Perceba que o tamanho da transição vai ficando menor à medida que vamos aumentando as por-
centagens. Muito, mas muito útil.

4. COLUMNS
Com o controle de colunas no CSS, podemos definir colunas de texto de forma automática. Até
hoje não havia maneira de fazer isso de maneira inteligente com CSS e o grupo de propriedades
columns pode fazer isso de maneira livre de gambiarras.
column-count
A propriedade column-count define a quantidade de colunas terá o bloco de textos.
/* Define a quantidade de colunas, a largura é definida uniforme-

mente. */
-moz-column-count: 2;
-webkit-column-count: 2;
column-width
Com a propriedade column-width definimos a largura destas colunas.
/* Define qual a largura mínima para as colunas. Se as colunas

forem espremidas, fazendo com que a largura delas fique menor que
este valor, elas se transformam em 1 coluna automaticamente */
-moz-column-width: 400px;
-webkit-column-width: 400px;
Fiz alguns testes aqui e há uma diferença entre o Firefox 3.5 e o Safari 4 (Public Beta).
O column-width define a largura mínima das colunas. Na documentação do W3C é a seguinte:
imagine que você tenha uma área disponível para as colunas de 100px. Ou seja, você tem um div
com 100px de largura (width). E você define que as larguras destas colunas (column-width) sejam
de 45px. Logo, haverá 10px de sobra, e as colunas irão automaticamente ter 50px de largura, preen-
chendo este espaço disponível. É esse o comportamento que o Firefox adota.
Já no Safari, acontece o seguinte: se você define um column-width, as colunas obedecem a esse va-
lor e não preenchem o espaço disponível, como acontece na explicação do W3C e como acontece
também no Firefox. Dessa forma faz mais sentido para mim.

Como a propriedade não está 100% aprovada ainda, há tempo para que isso seja modificado no-
vamente. Talvez a mudança da nomenclatura da classe para column-min-width ou algo parecida
venha a calhar, assim, ficamos com os dois resultados citados, que são bem úteis para nós de qual-
quer maneira.
column-gap
A propriedade column-gap cria um espaço entre as colunas, um gap.
/* Define o espaço entre as colunas. */

-moz-column-gap: 50px;
-webkit-column-gap: 50px;
Utilizamos aqui os prefixos -moz- e -webkit-, estas propriedades não funcionam oficialmente em
nenhum browser. Mas já podem ser usados em browsers como Firefox e Safari.
5. TRANSFORM 2D
A propriedade transform manipula a forma com que o elemento aparecerá na tela. Você pode-
rá manipular sua perspectiva, escala e ângulos. Uma transformação é especificada utilizando a
propriedade transform. Os browsers que suportam essa propriedade, a suportam com o prefixo
especificado.
Os valores possíveis até agora estão especificados abaixo:
scale
O valor scale modificará a dimensão do elemento. Ele aumentará proporcionalmente o tama-
nho do elemento levando em consideração o tamanho original do elemento.
skew
Skew modificará os ângulos dos elementos. Você pode modificar os ângulos individualmente
dos eixos X e Y como no código abaixo:
-webkit-transform: skewY(30deg);
-webkit-transform: skewX(30deg);
translation
O translation moverá o elemento no eixo X e Y. O interessante é que você não precisa se pre-
ocupar com floats, positions, margins e etc. Se você aplica o translation, ele moverá o objeto
e pronto.
rotate
O rotate rotaciona o elemento levando em consideração seu ângulo, especialmente quando o
ângulo é personalizado com o transform-origin.
CSS Transform na prática

Veja o código abaixo e seu respectivo resultado:
img {
-webkit-transform: skew(30deg); /* para webkit */
-moz-transform: skew(30deg); /* para gecko */
-o-transform: skew(30deg); /* para opera */
transform: skew(30deg); /* para browsers sem prefixo */
}

O código acima determina que o ângulo da imagem seja de 30deg. Colocamos um exemplo para
cada prefixo de browser. Ficando assim:
Várias transformações em um único elemento
Para utilizarmos vários valores ao mesmo tempo em um mesmo elemento, basta definir vários va-
lores separando-os com espaços em uma mesma propriedade transform:
img {
-webkit-transform: scale(1.5) skew(30deg); /* para webkit */
-moz-transform: scale(1.5) skew(30deg); /* para gecko */
-o-transform: scale(1.5) skew(30deg); /* para opera */
transform: scale(1.5) skew(30deg); /* para browsers sem prefi-
xo */
}
transform-origin
A propriedade transform-origin define qual o ponto do elemento a transformação terá origem. A
sintaxe é idêntica ao background-position. Observe o código abaixo:
img {
-webkit-transform-origin: 10px 10px; /* para webkit */
-moz-transform-origin: 10px 10px; /* para webkit */
-o-transform-origin: 10px 10px; /* para webkit */
transform-origin: 10px 10px; /* para webkit */
}
Como padrão as transições sempre acontecem tendo como ponto de âncora o centro do objeto.
Há algumas situações que pode ser que você queira modificar essa âncora, fazendo com que por
exemplo, a rotação aconteça em algum dos cantos do elemento. O código de exemplo acima fará
com que a transformação aconteça a partir dos 10px do topo no canto esquerdo. Veja a compara-
ção entre o padrão e o resultado do código acima.
A propriedade transform fica mais interessante quando a utilizamos com a propriedade transition,
onde podemos executar algumas animações básicas manipulando os valores de transformação.

6. TRANSIÇÕES E ANIMAÇÕES
Durante muito tempo o CSS só serviu para pintar quadradinhos e mais nada. Desde quando o
pessoal do WaSP organizou todo o movimento dos Padrões Web fazendo com que todos os desen-
volvedores, fabricantes de browsers e até mesmo o W3C acreditassem no poder dos padrões não
houve grandes atualizações no CSS. Praticamente formatávamos font, background, cor, tamanhos
e medidas de distância e posição.
A propriedade transition, a regra keyframe e outras propriedades vieram vitaminar a função que
o CSS tem perante o HTML acrescentando maneiras de produzirmos animações e transições. Não
estou dizendo que você fará animações complicadas, com diversos detalhes técnicos e etc. Para
esse tipo de resultado existem outras ferramentas, incluindo Canvas e SVG, que com certeza farão
um trabalho melhor com menos esforço. Mas é fato que as animações via CSS nos ajudará a levar a
experiência do usuário para outro patamar.
Lembrando que o nível de suporte de algumas dessas técnicas ainda é muito baixo. A propriedade
transition funciona em boa parte dos browsers atuais. Mas a regra keyframe que nos permite con-
trolar as fases de uma animação ainda é muito restrito. Para uma tabela mais atual e detalhada de
suporte e compatibilidade, faça uma procura no Google. Onde for possível demonstrarei o código
com o prefixo dos browsers que suportam as propriedades.
O básico: propriedade transition

A propriedade transition é praticamente auto-explicativa. Sua sintaxe tão simples que talvez até
dispense explicações mais elaboradas. Vamos começar com o código abaixo:
a {
color: white;
background: gray;
}
No código definimos que o link terá sua cor de texto igual a preta e seu background será cinza.

O resultado esperado é que ao passar o mouse no link a cor do texto seja modificada, mudando do
branco para o preto e que a cor de background mude de cinza para vermelho. O código abaixo faz
exatamente isso:
a {
color: white;
background: gray;
}
a:hover {
color: black;
background: red;
}
O problema é que a transição é muito brusca. O browser apenas modifica as características entre os
dois blocos e pronto. Não há nenhuma transição suave entre os dois estados.
Podemos fazer a mudança de um estado para outro utilizando a propriedade transition. Suponha
que ao passar o mouse, as mudanças acontecessem em um intervalo de meio segundo. Bastaria
colocar a propriedade transition no a:hover e pronto. Ao passar o mouse, o browser modificaria as
características do link com uma pequena transição de meio segundo. O código seria como se segue
abaixo:
a:hover {
color: black;
background: red;
}
Dessa forma a transição apenas acontece quando o hover é ativado. O problema é que ao tirar o
mouse, o browser volta bruscamente para as características iniciais. Para modificar isso basta inse-
rir também a propriedade transition no estado inicial.
a {
color: white;
background: gray;
}
a:hover {
color: black;
background: red;
}
O que a propriedade transition faz é comparar os valores das propriedades em comum entre os dois
estados do link ou de qualquer outro elemento, assim ela modifica suavemente os valores quando
há a ativação da função. Esta é uma técnica simples e que serve para manipularmos transições bá-
sicas como cor, tamanho, posição etc.
Agora suponha que em um bloco há uma determinada propriedade que no outro bloco não há,
como no código abaixo:
a {
border:1px solid orange;
color: white;
background: gray;
}
a:hover {
color: black;
background: red;
}
Nesse caso o browser detecta que há uma propriedade no primeiro estado, mas não no segundo,
por isso ele não faz a transição desta propriedade, apenas das propriedades em comuns.

Abaixo veja o código. copie em um arquivo HTML e veja o efeito:
<!DOCTYPE html>
<head>
<title>CSS Transition</title>
<style type=”text/css” media=”screen”>
a {
color:white;
background:gray;
}
a:hover {
color:black;
background:red;
}
</style>
</head>
<body>
<a href=”#”>Link! Hello World!</a>
</body>
</html>
Propriedade animation e regra keyframe

A propriedade trasition trabalha de forma muito simples e inflexível. Você praticamente diz para o
browser qual o valor inicial e o valor final para que ele aplique a transição automaticamente, con-
trolamos praticamente apenas o tempo de execução. Para termos mais controle sobre a animação
temos a propriedade animation que trabalha juntamente com a rule keyframe.
Basicamente você consegue controlar as características do objeto e suas diversas transformações
definindo fases da animação. Observe o código abaixo e veja seu funcionamento:
@-webkit-keyframes rodar {
from {
}
to {
}
}
O código acima define um valor inicial e um valor final. Agora vamos aplicar esse código a um
elemento. Minha ideia é fazer um DIV girar. ;-)
O código HTML até agora é este. Fiz apenas um div e defini este keyframe:
<!DOCTYPE html>
<head>
<title></title>
<style>
from {
}
to {
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Primeiro você define a função de animação, no caso é o nosso código que define um valor inicial de
0 graus e um valor final de 360 graus. Agora vamos definir as características deste DIV.
div {
width:50px;
height:50px;
margin:30% auto 0;
background:black;
}
Nas primeiras linhas defini qual será o estilo do div. Ele terá uma largura e uma altura de 50px. A
margin de 30% do topo garantirá um espaço entre o objeto e o topo do documento, e background
preto.

A propriedade animation tem uma série de propriedades que podem ser resumidas em um
shortcode bem simples. Veja a tabela logo a seguir para entender o que cada propriedade significa:
Propriedade Definição
animation-name Especificamos o nome da função de animação
animation- Define a duração da animação. O valor é declarado em segundos.
duration
animation-timing- Descreve qual será a progressão da animação a cada ciclo de duração.
function Existem uma série de valores possíveis e que pode ser que o seu navegador
ainda não suporte, mas são eles: ease, linear, ease-in, ease-out, ease-in-out,
cubic-bezier(<number>, <number>, <number>, <number>) [, ease, linear,
ease-in, ease-out, ease-in-out, cubic-bezier(<number>, <number>, <num-
ber>, <number>)]*
O valor padrão é ease.
animation- Define o número de vezes que o ciclo deve acontecer. O padrão é um, ou
interation-count seja, a animação acontece uma vez e pára. Pode ser também infinito defi-
nindo o valor infinite no valor.
animation- Define se a animação irá acontecer ou não no sentido inverso em ciclos
direction alternados. Ou seja, se a animação está acontecendo no sentido horário, ao
acabar a animação, o browser faz a mesma animação no elemento, mas no
sentido anti-horário. Os valores são alternate ou normal.
animation-play- Define se a animação está acontecendo ou se está pausada. Você poderá por
state exemplo, via script, pausar a animação se ela estiver acontecendo. Os valo-
res são running ou paused.
animation-delay Define quando a animação irá começar. Ou seja, você define um tempo
para que a animação inicie. O valor 0, significa que a animação começará
imediatamente.
Voltando para o nosso código, vamos aplicar algumas dessas propriedades:
div {
width:50px;
height:50px;
margin:30% auto 0;
background:black;
-webkit-animation-name: rodaroda;
-webkit-animation-duration: 0.5s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
Veja que na propriedade animation-name chamamos o mesmo nome que demos na nossa função
de keyframe logo no começo da explicação. Depois definimos uma duração de ciclo de meio se-
gundo. Definimos que o comportamento da animação será linear, e com a propriedade animation-
iteration-count definimos que ele girará infinitamente. E por último definimos pelo animation-di-
rection que a animação deverá ser alternada, ou seja, o DIV girará para um lado, e quando alcançar
o final da animação, o browser deverá alternar essa animação.
Podemos melhorar esse código utilizando a versão shortcode, que é mais recomendado. Veja a or-
dem que devemos escrever as propriedades animation em forma de shortcode:
animation: [<animation-name> || <animation-duration> || <anima-

tion-timing-function> || <animation-delay> || <animation-itera-
tion-count> || <animation-direction>] [, [<animation-name> ||
<animation-duration> || <animation-timing-function> || <anima-
tion-delay> || <animation-iteration-count> || <animation-direc-
tion>] ]*
Aplicando isso ao nosso código:
div {
width:50px;
height:50px;
margin:30% auto 0;
background:black;
-webkit-animation: rodaroda 0.5s linear infinite alternate;

}

Pronto. Agora temos um elemento que gira sem parar, hora para direita hora para esquerda.
Definindo ciclos
Nós definimos no keyframe do nosso último exemplo apenas um início e um fim. Mas e se quisés-
semos que ao chegar na metade da animação o nosso elemento ficasse com o background verme-
lho? Ou que ele mudasse de tamanho, posição e etc.? É aí onde podemos flexibilizar melhor nosso
keyframe definindo as fases da animação. Por exemplo, podemos dizer para o elemento ter uma cor
de background diferente quando a animação chegar aos 10% do ciclo, e assim por diante.
Veja o exemplo:
0% {
}
50% {
background:red;
}
100% {
}
}
Definimos acima que o início da animação o elemento começará na posição normal, 0 graus.
Quando a animação chegar aos 50% do ciclo, o elemento deverá ter girado para 180 graus e o ba-
ckground dele deve ser vermelho. E quando a animação chegar a 100% o elemento deve ter girado
ao todo 360 graus e o background, como não está sendo definido, volta ao valor padrão, no nosso
caso black, que foi definido no CSS onde formatamos este DIV.
Logo nosso elemento girará pra sempre e ficará alternando a cor de fundo de preto para vermelho.
Fiz um exemplo bem simples modificando apenas o background, mas você pode muito bem definir
um position e modificar os valores de left e top para fazer o elemento se movimentar.

No exemplo também defini apenas 3 estágios (0%, 50% e 100%) você pode definir um maior nú-
mero de estágios: 5%, 10%, 12%, 16% e etc... Adequando as fases da animação às suas necessidades.
Há exemplos muito interessantes na internet onde podemos ver todo o poder das animações feitas
pela CSS. Veja o exemplo que fizemos aqui neste texto no endereço: http://migre.me/4ubym

7. BORDAS
Definir imagem para as bordas é uma daquelas propriedades da CSS que você se pergunta como
vivíamos antes de conhecê-la. É muito mais fácil entender testando na prática, por isso sugiro que
se você estiver perto de um computador, faça testes enquanto lê este texto. A explicação pode não
ser suficiente em algumas partes, mas a prática irá ajudá-lo a entender.
Esta propriedade ainda está em fase de testes pelos browsers, por isso utilizaremos os prefixos para
ver os resultados.Utilizarei apenas o prefixo do Safari, mas o Firefox já entende essa propriedade
muito bem.
A sintaxe do border-image se divide em três partes: 1) URL da imagem que será utilizada. 2)
Tamanho do slice das bordas. 3) Como o browser irá aplicar a imagem na borda.
Segue um exemplo da sintaxe abaixo:
a {
display:block;
width:100px;
-webkit-border-image: url(border.gif) 10 10 10 10 stretch;
}
Acima definimos uma imagem com o nome de border.gif, logo depois definimos o width de cada
uma das bordas do elemento. A sintaxe é igual a outras propriedades com 4 valores: top, right, bot-
tom, left. E logo depois colocamos qual o tipo de tratamento que a imagem vai receber.
Dividindo a imagem
Para posicionar a imagem devidamente em seu objeto o browser divide a imagem em 9 seções:

Quando a imagem é colocada no elemento, o browser posiciona os cantos da imagem juntamente
com os cantos correspondentes do elemento. Ou seja, o bloco 1 da imagem é colocado no canto
superior esquerdo, o 3 no canto superior direito e assim por diante. Se você fizer o teste, a imagem
aparecerá no elemento como se estivesse desproporcional. Isso é normal porque a imagem deve
seguir as proporções do elemento e não as suas próprias.
Comportamento da imagem
O comportamento da imagem é a parte mais importante porque define como o centro da imagem
(no caso do nosso exemplo a seção de número 5), irá ser tratada. Há vários valores, mas que é mais
simples de se entender é a stretch, que estica e escala a imagem para o tamanho do elemento aplica-
do. Há outros valores como round e repeat. Mas hoje alguns browsers não tem tanto suporte e aca-
bam ou ignorando esses valores ou como no caso do Safari e o Chrome, interpretam o round como
o repeat. Vamos nos concentrar com o stretch e você entenderá como funciona a propriedade.
Aplicação
Vamos utilizar a imagem abaixo para aplicar a propriedade. Iremos fazer um botão ao estilo iPho-
ne. A coisa é simples e sugiro que você faça testes individualmente brincando com os valores das
bordas e com diversas outras imagens para ver como funciona o recurso.
Irei aplicar o estilo em um link. O código que irei aplicar segue abaixo:
a {
display:block;
width:100px;
text-align:center;
font:bold 13px verdana, arial, tahoma, sans-serif;
color:black;
}
Para inserir a imagem, colocamos as duas linhas abaixo:
border-width:10px;
-webkit-border-image: url(button.png) 10 stretch;
Defini com a primeira linha que a borda teria 10px de largura com a propriedade border-width. Na
segunda linha define que a imagem utilizada seria a button.png, que as áreas da imagem teriam que
se estender por 10px, e o valor stretch define que a imagem cobrirá o elemento inteiro, o resultado
segue abaixo:
Para você ver como tudo ali é meio estranho. Se eu diminuir o valor de 10 do border-image, que é
o valor que define quanto a imagem deve se estender nas bordas, veja como fica:
Temos o border-width definindo a largura da borda, mas não temos nenhum valor dizendo quanto
dessa largura a imagem deve tomar.
Os efeitos são bem estranhos quando esses valores estão mal formatados. Por isso, teste na prática
essa propriedade para que não haja problemas a implementar em seus projetos. O pulo da gato,
para mim, é a propriedade border-width.

8. MÚLTIPLOS BACKGROUNDS
Quem nunca teve que criar um background onde havia um gradiente em cima, embaixo e dos
lados? Você sabe que para criar algo parecido você não pode utilizar uma imagem só. A solução
até hoje seria criar 4 elementos divs aninhados (ou seja, um dentro do outro) e aplicar um pedaço
deste background em cada um destes elementos para dar a sensação de um background único. O
resultado é interessante mas o meio que isso é feito não é nada bonito. Você era obrigado a declarar
4 elementos “inúteis“ no seu HTML apenas para compensar um efeito visual. A possibilidade de
atribuirmos múltiplos backgrounds em apenas um elemento é a feature que vai ajudá-lo a não sujar
seu código.
A sintaxe para múltiplos backgrounds é praticamente idêntica a sintaxe para definir um back-
ground. Segue abaixo um exemplo:
div {
width:600px;
height:500px;
background:
url(img1.png) top left repeat-X,
url(img2.png) bottom left repeat-Y;
}
Definimos apenas uma propriedade background, o valor dessa propriedade em vez de conter ape-
nas um valor como normalmente fazemos, poderá haver vários, com suas respectivas definições de
posição, repeat e attachment (fixed).

9. MÓDULO TEMPLATE LAYOUT
Talvez você me chame de louco, mas para mim a parte mais fácil de desenvolver um site com CSS
é o planejamento e diagramação do layout. Coincidentemente é a parte que mais os desenvolvedo-
res tem problemas crossbrowser ou por falta de recursos mais avançados. Mas se você parar para
pensar, apenas uma propriedade cuida dessa parte, que é a propriedade float. De longe, para mim,
o float é a propriedade mais importante que há no CSS. Se o IE não soubesse o que é float, até hoje
nós não estaríamos fazendo sites com CSS. O float cuida de toda a diagramação do site, desde os
elementos que definirão as áreas mestres do site até os pequenos detalhes de imagens e ícones.
A propriedade float é muito simples de se entender. O problema não é o funcionamento, mas os
efeitos que a propriedade float causa nos elementos próximos. Se você pede para duas colunas fica-
rem flutuando à esquerda e outra coluna à direita, o rodapé sobe. Ou se você coloca um elemento
envolvendo outros elementos com float, esse elemento perde a altura. Estes são problemas corri-
queiros que já tem soluções inteligentes e que não apresentam chateações mais graves.
Infelizmente o float não é o ideal para a diagramação e organização dos elementos do layout. Ele
resolve muitos problemas, mas deixa a desejar em diversos sentidos. O float está completamente
ligado a ordem dos elementos no HTML. Existem técnicas que você consegue fazer quase que
qualquer organização visual sem encostar no código HTML. Mas há outras necessidades que in-
variavelmente você precisará modificar a ordem dos elementos no meio do HTML para que a
diagramação do site saia conforme o esperado. Essa organização do HTML pode alterar desde pro-
gramação server-side e até resultados de SEO e acessibilidade. Por isso é interessante que o HTML
fique organizado de forma que ele supre as necessidades dessas bases. Sua organização visual deve
ser independente desta organização.
Tendo em vista estes e outros problemas o W3C criou um novo módulo. Na verdade ele não é o
único, e nem pode ser para que tenhamos diversas formas de trabalhar. O módulo em questão é
chamado de Template Layout. Esse módulo consiste em uma forma de criarmos e organizarmos os
elementos e informações do layout de forma menos espartana e mais flexível.

Podemos dividir a construção do layout em duas grandes partes: 1) Definição dos elementos mes-
tres e grid a ser seguido. 2) Formatação de font, cores, background, bordas etc.
As propriedades nesta especificação trabalham associando uma política de layout de um elemento.
Essa política é chamada de template-based positioning (não tem nada a ver com a propriedade
position, pelo contrário é uma alternativa) que dá ao elemento uma grid invisível para alinhar seus
elementos descendentes.
Porque o layout deve se adaptar em diferentes janelas e tamanhos de papéis, as colunas e linhas do
grid deve ser fixas ou flexíveis dependendo do tamanho.
O W3C mostra alguns casos comuns:
•P áginas complexas com múltiplas barras de navegação em áreas com posições fixas como
publicidade, submenus e etc.
• Formulários complexos, onde o alinhamento de labels e campos podem ser facilmente defi-
nidos com as propriedades deste módulo com a ajuda das propriedades de margin, padding
e tables.
• GUIs, onde botões, toolbars, labels, ícones etc, tem alinhamentos complexos e precisam estar
sempre alinhados caso o tamanho ou a resolução da tela mudam.
• Medias que são paginadas, como medias de impressão onde cada página são divididos em
áreas fixas para conteúdos de gêneros diferentes.
Template-based positioning são uma alternativa para a propriedade position com o valor abso-
lute. Antigamente lembro-me que quase todos os desenvolvedores tentavam organizar e diagra-
mar layouts utilizando position. Não que seja errado, mas definitivamente não é a melhor for-
ma. Costumo dizer em meus cursos e palestras que position é para detalhes. Nada muito grande,
mas para pequenos detalhes. Usamos position para posicionarmos elementos que não tem rela-
ção direta com sua posição no código HTML. Ou seja, não importa onde o elemento esteja, o
position:absolute; irá posicionar o elemento nas coordenadas que você quiser.

Sintaxe e funcionamento
O módulo Template Layout basicamente define slots de layout para que você encaixe e posicione
seus elementos. O mapeamento dos slots é feito com duas propriedades que já conhecemos que
este módulo adiciona mais alguns valores e funcionalidades, são as propriedades position e display.
A propriedade display irá definir como será o Grid. Quantos slots e etc.
A propriedade position irá posicionar seus elementos nestes slots.
Veja o código HTML abaixo:
<div class=”geral”>
<nav class=”menu”>...</nav>
<aside class=”menulateral”>...</aside>
<aside class=”publicidade”>...</aside>
<article class=”post”>...</article>
<footer>...</footer>
</div>
Agora iremos definir a posição destes elementos. O código CSS seria assim:
.geral {
display: “aaa”
“bcd”
“eee”;
}
nav.menu {position:a;}
aside.menulateral {position:b;}
aside.publicidade {position:d;}
article.post {position:c;}
footer {position:e;}
O funcionamento da propriedade display

A propriedade display define a organização dos slots. Um slot é um local onde o seu elemento fica-
rá. Cada elemento fica em um slot.
Aqui o elemento display trabalha como um table, onde seu conteúdo será colocando em colunas
e linhas. A única diferença é que o número de linhas e colunas não dependem do conteúdo é fixa

pelo valor da propriedade. E a outra principal diferença é que a ordem dos descendentes no código
não importa.
Existem alguns valores para que você trabalhe: letra, @ (arroba) e “.” (pronto).
Cada letra diferente é um slot de conteúdo diferente. O @ define um sinal para um slot padrão. E o
“.” (ponto) define um espaço em branco.
Quando repetimos as letras como no exemplo anterior, tanto na horizontal quanto na vertical, é
formado um slot único que se expande para o tamanho da quantidade de slots. Lembra do colspan
ou rowspan utilizados na tabela? Pois é, funciona igualzinho.
Não é possível fazer um slot que não seja retangular ou vários slots com a mesma letra. Um templa-
te sem letra nenhuma também não é possível. Um template com mais de um @ também é proibido.
Se houverem esses erros a declaração é ignorada pelo browser.
Pra definir a altura da linha (row-height) podemos utilizar o valor padrão “auto”, que define altura
que a altura da linha é feito de acordo com a quantidade de conteúdo no slot. Você pode definir um
valor fixo para a altura. Não é possível definir um valor negativo. Quando definimos um * (asterís-
co) para a altura, isso quer dizer que todas as alturas de linha serão iguais.
A largura da coluna (col-width) é definida com valores fixos, como o row-height. Podemos definir
também o valor de * que funciona exatamente igual ao altura de linha, mas aplicados a largura da
coluna. Há dois valores chamados max-content e min-content que fazem com que a largura seja
determinada de acordo com o conteúdo. Outro valor é o minmax(p,q) que funciona assim: a lar-
gura das colunas são fixadas para ser maiores ou iguais a p e menores ou iguais a q. Pode haver um
espaço branco (white space) em volta de p e q. Se q > p, então q é ignorado e o minmax(p,q) é trata-
do como minmax(p,p). O valor fit-content é o equivalente a minmax(min-content, max-content).

Definindo a largura e altura dos slots
Para definir a altura dos slots, utilizamos uma sintaxe diretamente na propriedade display. Veja
abaixo um exemplo de como podemos fazer isso:
“b c d”
“e e e” / 150px
100px 400px 100px;
Formatando de uma maneira que você entenda, fica assim:
“b c d”
“e e e” /150px
100px 400px 100px;
Ou seja, a primeira coluna do grid terá 100px de largura, a segunda 400px e a terceira 100px.
As medidas que coloquei ao lado, iniciando com uma / (barra) definem a altura das linhas. Logo a
primeira linha terá 150px e a terceira linha também. A linha do meio, como não tem altura definida
terá a altura de acordo com a quantidade de conteúdo.
O espaço entre as colunas são definidos com “.” (pontos). Veja o exemplo abaixo:
“. . .” /50px
“b c d”
“. . .” /50px
“e e e” /150px
100px 400px 100px;

No exemplo acima fiz duas colunas no código compostos por pontos em vez de fazer com letras.
Isso quer dizer que entre as colunas do grid haverá um espaço em branco de 50px de altura. Veja a
imagem abaixo para entender melhor o código:
O funcionamento da propriedade position

O valor da propriedade position especifica qual linha e coluna o elemento será colocado no tem-
plate. Você escreve apenas uma letra por elemento. Vários elementos podem ser colocados em um
mesmo slot. Logo estes elementos terão o mesmo valor de position.
Abaixo veja uma imagem que pegamos diretamente do exemplo do W3C. O layout é muito simples:
Este layout é representado pelo código abaixo. Primeiro o HTML:
<ul id=”nav”>
<li>navigation</li>
</ul>
<div id=”content”>
<div class=”module news”>
<h3>Weather</h3>
<p>There will be weather</p>
</div>
<h3>Football</h3>
<p>People like football.</p>
</div>
<h3>Chess</h3>
<p>There was a brawl at the chess tournament</p>
</div>
<div class=”module personal”>
<h3>Your Horoscope</h3>
<p>You’re going to die (eventually).</p>
</div>
<p id=”foot”>Copyright some folks</p>
</div>
Agora veja o CSS com toda a mágica:
body {
display: “a b”
10em *;
}
#nav {
position: a;
}
#content {
position: b;
display: “c . d . e “
“. . . . . “ /1em
“. . f . . “
* 1em * 1em *;
}
.module.news {position: c;}
.module.sports {position: d;}
.module.personal {position: e;}
#foot {position: f;}
Lembre-se que não importa a posição dos elementos no código. E essa é a mágica. Podemos or-
ganizar o código HTML de acordo com nossas necessidades e levando em consideração SEO,
Acessibilidade e processo de manutenção. O HTML fica totalmente intacto separado de qualquer
formatação. Muito, mas muito interessante.
Pseudo-elemento ::slot()
Você pode formatar um slot especifico simplesmente declarando-o no CSS. Suponha que você
queira que um determinado slot tenha um fundo diferente, alinhamento e etc... Essa formatação
será aplicada diretamente no slot e não no elemento que você colocou lá. Fica mais simples de se
formatar porque você não atrela um estilo ao elemento e sim ao slot. Se você precisar posicionar
aquele elemento em outro lugar, você consegue facilmente.
body { display: “aaa”

“bcd” }
body::slot(b) { background: #FF0 }
body::slot(c), body::slot(d) { vertical-align: bottom }
As propriedades aplicadas no pseudo elemento slot() seguem abaixo:
• Todos as propriedades background.

• vertical-align
• overflow
• box-shadow, block-flow e direction ainda estão sendo estudados pelo W3C se elas entrarão
ou não.
10. CORES
RGBA
Normalmente em web trabalhamos com cores na forma de hexadecimal. É a forma mais comum
e mais utilizada desde os primórdios do desenvolvimento web. Mesmo assim, há outros formatos
menos comuns que funcionam sem problemas, um destes formatos é o RGB. O RGB são 3 con-
juntos de números que começam no 0 e vão até 255 (0% até 100%), onde o primeiro bloco define
a quantidade de vermelho (Red), o segundo bloco a quantidade de verde (Green) e o último bloco
a quantidade de azul (Blue). A combinação destes números formam todas as cores que você pode
imaginar.
No HTML o RGB pode ser usado em qualquer propriedade que tenha a necessidade de cor, como:
color, background, border etc. Exemplo:
p {
background:rgb(255,255,0);
padding:10px;
font:13px verdana;
}
Este código RGB define que o background o elemento P será amarelo.
RGBA e a diferença da propriedade OPACITY
Até então nós só podíamos escrever cores sólidas, sem nem ao menos escolhermos a opacidade
dessa cor. O CSS3 nos trouxe a possibilidade de modificar a opacidade dos elementos via pro-
priedade opacity. Lembrando que quando modificamos a opacidade do elemento, tudo o que está
contido nele também fica opaco e não apenas o background ou a cor dele. Veja o exemplo abaixo
e compare as imagens.

A primeira é a imagem normal, sem a aplicação de opacidade:
Agora com o bloco branco, marcado com um P, com opacidade definida. Perceba que o back-
ground e também a cor do texto ficaram transparentes.
Isso é útil mas dificulta muito quando queremos que apenas a cor de fundo de um determinado
elemento tenha a opacidade modificada. É aí que entra o RGBA. O RGBA funciona da mesma
forma que o RGB, ou seja, definindo uma cor para a propriedade. No caso do RGBA, além dos 3
canais RGB (Red, Green e Blue) há um quarto canal, A (Alpha) que controla a opacidade da cor.
Nesse caso, podemos controlar a opacidade da cor do background sem afetar a opacidade dos ou-
tros elementos:
Veja um exemplo de código aplicado abaixo:
p {
background:rgba(255,255,0, 0.5);
padding:10px;
font:13px verdana;
}
O último valor é referente ao canal Alpha, onde 1 é totalmente visível e 0 é totalmente invisível. No
exemplo acima está com uma opacidade de 50%.
currentColor
O valor currentColor é muito simples de se entender e pode ser muito útil para diminuirmos o
retrabalho em alguns momentos da produção. Imagine que o currentColor é uma variável cujo seu
valor é definido pelo valor da propriedade color do seletor. Veja o código abaixo:
p {
background:red;
padding:10px;
font:13px verdana;
color: green;
border:1px solid green;
}
Note que o valor da propriedade color é igual ao valor da cor da propriedade border.
Há uma redundância de código, que nesse caso é irrelevante, mas quando falamos de dezenas de
arquivos de CSS modulados, com centenas de linhas cada, essa redundância pode incomodar a

produtividade. A função do currentColor é simples: ele copia para outras propriedades do mesmo
seletor o valor da propriedade color. Veja o código abaixo para entender melhor:
p {
background:red;
padding:10px;
font:13px verdana;
color: green;
border:1px solid currentColor;
}
Veja que apliquei o valor currentColor onde deveria estar o valor de cor da propriedade border.
Agora, toda vez que o valor da propriedade color for modificado, o currentColor aplicará o mesmo
valor para a propriedade onde ela está sendo aplicada.
Isso funciona em qualquer propriedade que faça utilização de cor como background, border, etc.
Obviamente não funciona para a propriedade color. O currentColor também não funciona em se-
letores separados, ou seja, você não consegue atrelar o valor da propriedade color ao currentColor
de outro seletor.
11. PAGED MEDIA
Com certeza você já deve ter tentado ler um livro ou uma apostila em algum site na web e preferiu
imprimir o texto para ler off-line, no papel por ser mais confortável ou por ser mais prático quando
não se está conectado. Existem vários motivos para que um leitor queira imprimir o conteúdo de
um site, principalmente sites com textos longos e pesados. Durante muito tempo o principal mo-
tivo era que ler na tela do computador era cansativo. Hoje isso ainda é um problema, mas com o
avanço das telas e do aparecimento das tablets no mercado, você consegue passar mais tempo na
frente de uma tela lendo grandes quantidades de texto. O problema é que geralmente a organização
de páginas e o conteúdo não é exatamente confortável para passarmos horas lendo.
Outro problema comum é que nós desenvolvedores não temos uma maneira fácil de formatar pági-
nas. Na verdade temos, mas é um pouco de gambiarra e claro, não é maneira correta. A especifica-
ção de Paged Media traz nos possibilita formatar as páginas, transparências (aqueles “plásticos“ que
usamos com retroprojetores) ou até mesmo páginas que serão vistas pelo monitor. Controlaremos
suas medidas, tamanhos, margens, quebras de páginas e etc...
Nota: Para você não se confundir, quando digo páginas, quero dizer páginas físicas, de papel, não
páginas web, ok? ;-)
@page
Definiremos com CSS3 um modelo de página que especifica como o documento será formatado
em uma área retangular, chamada de page box, com larguras e alturas limitadas. Nem sempre o
page box tem referência correspondente para uma folha de papel física, como normalmente conhe-
cemos em diversos formatos: folhas, transparências e etc. Esta especificação formata o page box,
mas é o browser ou o meio de acesso que o usuário está utilizando que tem a responsabilidade de
transferir o formato do page box para a folha de papel no momento da impressão.

O documento é transferido no modelo da página para um ou mais page boxes. O page box é uma
caixa retangular que será sua área de impressão. Isso é como se fosse um viewport do browser.
Como qualquer outro box, a page box tem margin, border, padding e outras áreas. O conteúdo e as
áreas de margin do page box tem algumas funções especiais:
A área de conteúdo do page box é chamada de area da página ou page area. O conteúdo do docu-
mento flui na área de página. Os limites da área da página na primeira página estabelece o retângu-
lo inicial que contém o bloco do documento.
A área da margem da page box é dividido em 16 caixas de margem ou margin boxes. Você pode
definir para cada caixa de margem sua própria borda, margem, padding e áreas de conteúdo.
Normalmente essas caixas de margem são usadas para definir headers e footers do documento.
Confesso que o nome utilizado (caixas de margem) é meio estranho.
As propriedades do page box são determinadas pelas propriedades estabelecidas pelo page context,
o qual é a regra de CSS @page. Para definir a largura e altura de uma page box não se usa as pro-
priedades width e height. O tamanho da page box é especificada utilizando a propriedade size no
page context.
Terminologia e Page Model (modelo de página)

O page box tem algumas áreas simples de se entender que facilitará a explicação. Veja abaixo uma
imagem e uma explicação de suas respectivas áreas:
Page box
O page box é onde tudo acontece. Tenha em mente que o page box é o viewport das medias impres-
sas. É lá que conterá as áreas de margem, padding, border e onde o texto será consumido.
A largura e altura do page box é determinada pela propriedade size. Em um caso simples, o page
box tem a largura e a altura de uma folha. Entretanto em casos complexos onde page box difere
das folhas de papel em valores e orientações já que você pode personalizar de acordo com sua
necessidade.
Page area
A page area é a area de conteúdo (content area) do page box.
Margin box
Margin boxes contém boxes para header e footer. São conjunto de 16 boxes onde você pode inserir
conteúdo útil como número da página, título do livro, etc, etc, etc. Essas áreas ficam fora do Page
area. Cada um tem suas margins, paddings e bordas individuais. Veja o diagrama abaixo para vi-
sualizar melhor.
Page sheet
A folha, a página, a superfície que será impresso o conteúdo. A ilustração abaixo mostra a repre-
sentação de uma folha.

Non-printable area - Área não impressa
A área de não impressão é a área onde o dispositivo de impressão não é capaz de imprimir. Esta
área depende do dispositivo que você está utilizando. O page box fica dentro da área de impressão.
Área de impressão
A área impressa é onde o dispositivo de impressão é capaz de imprimir. A área de impressão é o
tamanho da page sheet menos a área de não impressão. Como a área de não impressão, a área útil
de impressão depende muito do dispositivo. O dispositivo pode ajustar o conteúdo para que seja
impresso sem problemas nessa área. Cada dispositivo tem seu meio de ajuste.
Propriedade size
A propriedade size especifica o tamanho e a orientação da área do de conteúdo, o page box. O ta-
manho do page box pode ser definida com valores absolutos (px) ou relativos (%). Você pode usar
três valores para definir a largura e a orientação do page box:
auto
O page box irá ter o tamanho e orientação do page sheet escolhido pelo usuário.
landscape
Define que a página será impressa em modo paisagem. O page box neste caso tem o mesmo ta-
manho da página, mas o lado maior é o horizontal. Se o tamanho da página não for definido, o
tamanho é especificado pelo usuário e seu dispositivo.
portrait
Define que a página será impressa em modo retrato. O page box neste caso tem o mesmo tamanho
da página, mas o lado maior é o vertical. Se o tamanho da página não for definido, o tamanho é
especificado pelo usuário e seu dispositivo.

Veja um exemplo abaixo:
@page {
size: auto; /* auto is the valor padrão */
margin: 10%; /* margem */
}
Como nessa caso a margem é variável, ela está sendo relativa às dimensões da página. Logo se a
página uma A4, com as dimensões: 210mm x 297mm, as margens serão 21mm e 29.7mm.
Outro exemplo:
@page {
size: 210mm 297mm; /* definem o page-sheet para um tamanho de A4
*/
}
Page-size
O page-size pode ser especificado utilizando um dos media names abaixo. Isso é o equivalente a
utilizar os valores escritos diretamente na propriedade size. Contudo é muito melhor utilizar o
nome de um formato de formato de papel.
Formato Descrição
A4 A página deve ser definida para o tamanho ISO A4: 210 mm x 297 mm.
B5 A página deve ser definida para o tamanho ISO B3 media: 176mm x 250mm.
B4 A página deve ser definida para o tamanho ISO B4: 250mm x 353mm.
letter A página deve ser definida para o tamanho papel carta: 8.5 pol x 11 pol
Abaixo veja um exemplo de aplicação:
@page {
size: A4 landscape;
}
O W3C tem uma especificação muito extensa que pode ser encontrada aqui:
http://www.w3.org/TR/css3-page/ CSS - Curso W3C Escritório Brasil 53

12. @FONT-FACE
A regra @font-face é utilizada para que você utilize fontes fora do padrão do sistema em seus sites.
Para que isso funcione, nós disponibilizamos as fontes necessárias em seu servidor e linkamos estas
fontes no arquivo CSS. A sintaxe é bem simples e tem suporte a todos os navegadores, com algumas
ressalvas.
@font-face {
}
Na primeira linha você customiza o nome da font que você usará durante todo o projeto. Na segun-
da linha definimos a URL onde o browser procurará o arquivo da font para baixar e aplicar no site.
Você aplica a fonte como abaixo:
p {font:36px helveticaneue, Arial, Tahoma, Sans-serif;}
Suponha que o usuário tenha a font instalada, logo ele não precisa baixar a font, assim podemos
indicar para que o browser possa utilizar o arquivo da própria máquina do usuário. Menos requi-
sições, mais velocidade. Veja o código abaixo:
@font-face {
src: local(HelveticaNeueLTStd-UltLt.otf),
url(HelveticaNeueLTStd-UltLt.otf);
}

Abaixo segue uma série de formatos que podem ser usados e que os browsers podem adotar:
String Font Format Common Extensions
truetype TrueType .ttf
opentype OpenType .ttf, .otf
truetype-aat TrueType with Apple Advanced .ttf
Typography extensions
embedded-opentype Embedded OpenType .eot
woff WOFF (Web Open Font .woff
Format)
svg SVG Font .svg, .svgz
Compatibilidade
As versões 7, 8 e 9 do Internet Explorer aceitam o @font-face apenas se a font for EOT. Você pode
encontrar qualquer conversor online que esse problema é resolvido. Você pode converter suas fon-
tes para EOT diretamente no Font Squirrel. O Safari, Firefox, Chrome e Opera aceitam fontes em
TTF e OTF.
Para suprir a necessidade de atenção do Internet Explorer, você precisa especificar a URL da font
.eot para que o Internet Explorer possa aplicar a font corretamente. A sintaxe fica desta forma:
@font-face {
src: url(helveticaNeueLTStd-UltLt.eot);
}
Kit de sobrevivência
O Font Squirrel fez um pequeno favor para toda a comunidade. É um sisteminha que con-
verte suas fontes para os formatos necessários e te devolve para você utilizar em seus sites:
http://migre.me/4qST9
13. PRESENTATION-LEVELS
A informação na web é reutilizada de diversas maneiras. Toda informação publicada é reutilizada
por diversos meios de acesso, seja o seu browser, leitor de tela ou robôs de busca. O HTML propor-
ciona essa liberdade para a informação. Por ser uma linguagem muito simples, podemos reutilizar
a informação marcada com HTML em diversos meios de acesso. Mas o HTML não cuida da forma
com que o usuário vai visualizar a informação em seu dispositivo. O HTML apenas exibe a infor-
mação. A maneira que o usuário consome essa informação é diferente em cada um dos meios de
acesso e dispositivos. É aí que entra todo o poder do CSS. O CSS formata a informação para que
ela possa ser acessível em diversos usar agents (meios de acesso). Se você acessa o site do seu banco
pelo monitor de 22’’ da sua casa ou pelo seu celular, a informação tem que aparecer bem organizada
em ambos cenários. É o CSS que organiza visualmente essas informações.
Além disso podemos apresentar a informação de diversas formas em um mesmo dispositivo. Por
exemplo: você pode ver uma galeria de imagens da maneira convencional, clicando nas thumbs das
fotos ou ver em forma de slideshow. Podemos levar essas experiências para websites de conteúdo
textual também. A especificação de presentation-levels é uma das especificações que levam o usu-
ário a terem conteúdo mostrados de uma outra forma da qual estamos acostumados. É muito útil
para apresentações de slides, com efeitos, transições e etc ou qualquer documento que seria mais
bem apresentado no formato de apresentação, como uma proposta, documentos técnicos e etc.
Como funciona o modelo

O modelo por trás da especificação é simples. Cada elemento no documento é definido como um
“elemento de apresentação“ ou no formato original “element’s presentation level“ - EPL.
O EPL pode ser explicito em uma folha de estilo ou calculado automaticamente baseado na posição
do elemento pela estrutura do documento. É assim que o browser calcula para mostrar os elemen-
tos progressivamente, como se faz normalmente em programas de apresentação.

O elemento fica em um dos três seguintes níveis que também são representadas por classes: below-
level, at-level e above-level. Dependendo da pontuação de EPL que o browser dá, o elemento fica
em um determinado nível. Essas pseudo-classes podem e devem ser modificadas via CSS.
A propriedade presentation-level
A propriedade presentation-level define como os valores de apresentação (EPL) de um determi-
nado objeto devem ser calculados. São três valores possíveis: números inteiros, increment e same.
Quando definimos um valor inteiro, o elemento tem aquele valor fixo.
Quando colocamos increment, o valor do objeto aumenta um ponto em relação ao objeto anterior.
Suponha que há duas LI em uma UL. A primeira LI tem o valor de 1, a segunda tem valor de 2 e
assim por diante.
Quando definimos o valor same, o browser computa o mesmo valor do objeto anterior.
Isso tudo vai ficar mais esclarecido com os exemplos a seguir.
Utilizando o mesmo exemplo da especificação do W3C, temos o código abaixo:
<!DOCTYPE html>
<html>
<body>
<h1>strategies</h1>
<ul>
<li>divide</li>
<li>conquer
<p>(in that order)</p>
</li>
</ul>
<ul>
<li>obfuscate</li>
<li>propagate</li>
</ul>
</body>
</html>
Vamos definir o CSS de presentation-levels para esse HTML adicionado o código CSS:
@media projection {
h1 { page-break-before: always }
li { presentation-level: increment }
:below-level { color: black }
:at-level { color: red }
:above-level { color: silver }
}
Definimos que o H1 irá sempre iniciar em uma nova página.
Mas o mais importante é a propriedade presentation-level que definimos para a LI. Isso quer dizer
que a cada LI o browser contará mais um ponto.
As três pseudo-classes que falamos no começo do texto: below-level, at-level, above-level, que for-
mata os elementos que foram mostrados anteriores, o que elemento que está sendo mostrado e o
próximo elemento.
Sendo assim, o browser calcula a pontuação de cada um dos elementos utilizados no exemplo
como mostra abaixo:
HTML Valor de EPL
<ul> 0
<li>divide</li> 1
<li>conquer</li> 2
</ul> 0
<ul> 0
</ul> 0

Temos um outro exemplo, segue abaixo o HTML e logo depois a tabela com os valores de EPL:
<!DOCTYPE html>
<html>
<style>
@media projection {
body * { presentation-level: 3; }
:above-level { display: none; }
}
</style>
<body>
<h1>strategies</h1>
<ul>
<li>divide</li>
<li>conquer</li>
</ul>
<ul>
<li>obfuscate</li>
<li>propagate</li>
</ul>
</body>
</html>
Perceba que agora definimos no CSS que tudo dentro de body tem o valor de 3. Logo o H1 que foi
definido como 0 pela propriedade presentation-level tem o valor de 3.
Definimos também display:none; para os próximos elementos. Agora veja a pontuação aplicada:
HTML Valor de EPL
<ul> 0
<li>divide</li> 0
<li>conquer</li> 0
</ul> 0
<ul> 0
</ul> 0
O W3C tem uma especificação completa e em constante atualização do presentation-levels aqui:
http://www.w3.org/TR/css3-preslev/

Css - Imprimir - 2 Por Folha

Enviado por

Dados do documento

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

Css - Imprimir - 2 Por Folha

Enviado por

Direitos autorais:

Formatos disponíveis

INFORMÁTICA

Aplicando Style Sheets ............................................................................................ 3

Entendendo Style Sheets .................................................................................................5

Anexando Style Sheets em documentos HTML..............................................................6

Adicionando regras para uma Style Sheet....................................................................12

Posicionando elementos ....................................................................................... 20

Entendendo posicionamento de elementos .................................................................22

Mudando o tamanho de um elemento ...........................................................................24

Sobrepondo elementos ..................................................................................................25

Aninhando posicionamento de elementos ...................................................................26

Posicionando elementos através de script...................................................................27

Trabalhando com elementos na página ........................................................................32

Mudando o conteúdo de um elemento..........................................................................33

Conectando scripts à estilos e classes.........................................................................34

Controlando a visibilidade de objetos...........................................................................35

Ao final deste capítulo você será capaz de :

Entendendo Style Sheets

Documentos WYSIWYG Documentos HTML ou XML

Anexando Style Sheets em documentos HTML

<META http-equiv="Content-Style-Type" content="text/css">

Incluindo CSS no documento

<HTML> <HEAD> </HEAD>

Definindo estilos junto com o elemento

<P STYLE=”color: blue”>

Importando Style Sheets

- Existência de um padrão de cores e navegação para todo o site

- Estilos definidos junto com o elemento;

H1 {color: red ! important;

Criando Style Sheets para cada tipo de Mídia

@media screen, print

A tabela abaixo descreve cada um dos estilos possíveis com a CSS:

Adicionando regras para uma Style Sheet

Atribuindo múltiplas propriedades em uma regra simples

H1 {color: blue; font-size: 12pt; text-line: center}

Agrupando seletores juntos em uma regra simples

P, UL, LI {font-size: 12pt}

Definindo relacionamentos Pai-Filho nas regras

<STYLE TYPE="text/css"> P {color: blue} </STYLE>

Trabalhando com Classes em Style Sheets

H1.blue {color: blue}

<H1 CLASS=red>Red Heading</H1>

<H1 CLASS=red>Red Heading</H1>

<P CLASS=red>Red Paragraph</P>

Definindo um estilo para um elemento específico

<P ID=test> This is a test paragraph <P>

Pseudo-elementos são usados para especificar sub-partes de elementos, enquanto pseudo-classes

Abaixo vemos um exemplo de utilização da pseudo-classe Anchor

A:link {color: blue}

Adicionando comentários em Style Sheets

Tanto para linhas de comentário quanto para blocos a sintaxe é a mesma:

H1 {font-size: 16; margin-left: -1in} /* estilo do elemento H1 */

Ocultando Style Sheets de navegadores antigos

2. É aconselhável que a funcionalidade do site dependa 100% de CSS?

3. Diferencie a necessidade de utilização de IDs e classes.

Ao final deste capítulo você será capaz de :

Entendendo posicionamento de elementos

Posicionando um Elemento HTML

Para posicionar o elemento são utilizadas as propriedades TOP e LEFT:

#element {position: absolute; top: 100; left: 20}

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

Mudando o tamanho de um elemento

O exemplo abaixo mostra o comportamento de um bloco de texto quando posicionado e

Utilizando as propriedades TOP e LEFT é possível sobrepor elementos e a ordem de exibição é a

Aninhando posicionamento de elementos