Cursodecss Cascadingstylesheets

Curso de CSS - Cascading Style Sheets
Desenvolvimento, aplicaes e referncias de acordo com as normas do W3C

<meta name="autor" content="Rafael Feitosa"> 2
ndice

PARTE I CSS Bsico

1 Primeiro contato................................................................................................. 6
A sintaxe CSS.................................................................................................... 6
Agrupar seletores............................................................................................... 8
Seletores de classe............................................................................................ 8
Seletor de id....................................................................................................... 10
Escrever comentrios........................................................................................ 11
A colocao dos elementos............................................................................... 12
Posicionamento absoluto e posicionamento relativo......................................... 14

2 Porque que devemos formatar com estilos? ............................................... 15
Vantagens dos estilos CSS............................................................................... 15
O "mecanismo" de cascata................................................................................ 15
Porque que a formatao com estilos superior? ........................................ 16
Limitaes dos browsers atuais........................................................................ 17

3 Escrita e combinao de estilos....................................................................... 17
Inserir uma folha de estilos interna.................................................................... 17
Definio de estilos com o atributo style............................................................ 18
Folha de estilos num arquivo externo................................................................ 19
Como se combinam estilos concorrentes.......................................................... 20
Herana de estilos entre elementos.................................................................. 22

4 Definir cores em CSS......................................................................................... 26
Formas de exprimir cores.................................................................................. 26
Nomes de Cores................................................................................................ 27
Quatro formas possveis para definir cores....................................................... 27
Cuidados que devemos ter................................................................................ 28

5 Propriedades dos fundos dos elementos (background) ............................... 28

6 - Unidades de Medida............................................................................................ 33
Medio de distncias numa pgina HTML....................................................... 33
Definio de Cores............................................................................................ 34

7 Propriedades do texto........................................................................................ 34

8 Controlar o tipo de letra..................................................................................... 39

9 As linhas de contorno dos elementos (border) .............................................. 43

PARTE II CSS Avanado

10 Controlar as margens dos elementos............................................................ 55

11 Propriedades de " padding" ............................................................................. 58

12 Controle das dimenses dos elementos........................................................ 62

13 Posicionamento dos elementos...................................................................... 64

14 Formatao de listas........................................................................................ 69

15 Propriedades de classificao........................................................................ 73

16 Pseudo-classes................................................................................................. 78
Sintaxe............................................................................................................... 78
Pseudo-classes para ligaes........................................................................... 79
A pseudo-classe :first-child................................................................................ 79
A pseudo-classe :lang........................................................................................ 80
Lista de pseudo-classes.................................................................................... 81

17 Pseudo-elementos............................................................................................ 82
Sintaxe............................................................................................................... 83
Uma formatao especial para a primeira linha................................................ 83
O pseudo-elemento first-letter........................................................................... 84
Pseudo-elementos em classes CSS................................................................. 85
Vrios pseudo-elementos.................................................................................. 85
Os pseudo-elementos :before e :after............................................................... 85
Lista de pseudo-elementos................................................................................ 86

18 Tipos de media................................................................................................. 88
A Regra @media............................................................................................... 88
Os vrios tipos de media................................................................................... 89

PARTE III Material de Referncia Rpida CSS

19 Listagem das propriedades definidas em CSS............................................. 90
Fundos (background) ....................................................................................... 90
Linhas de fronteira (border) .............................................................................. 90
Propriedades de classificao........................................................................... 92
Controle dos tamanhos dos elementos............................................................. 93
Tipos de letra (font) ........................................................................................... 93
Gerar contedos................................................................................................ 95
Listas e marcadores........................................................................................... 96
Margens............................................................................................................. 96
Linhas de contorno............................................................................................ 97
Espao em branco dentro de um elemento (padding) ...................................... 97
Posicionamento................................................................................................. 98
Formatao de tabelas...................................................................................... 99
Formatao de texto.......................................................................................... 99

20 Referncia de CSS2 Print................................................................................. 100
Propriedades para impresso de documentos.................................................. 100

PARTE IV Referncia CSS
background..................................................................................................... 102
background-attachment.................................................................................. 102
background-color............................................................................................ 102
background-image.......................................................................................... 103
background-position........................................................................................ 103
background-repeat.......................................................................................... 104
border.............................................................................................................. 104

border-bottom................................................................................................. 107
border-bottom-color........................................................................................ 108
border-bottom-style......................................................................................... 108
border-bottom-width........................................................................................ 109
border-collapse............................................................................................... 131
border-color..................................................................................................... 105
border-left........................................................................................................ 107
border-left-color............................................................................................... 108
border-left-style............................................................................................... 108
border-left-width.............................................................................................. 109
border-right..................................................................................................... 107
border-right-color............................................................................................ 108
border-right-style............................................................................................. 108
border-right-width............................................................................................ 109
border-style..................................................................................................... 106
border-top....................................................................................................... 107
border-top-color.............................................................................................. 108
border-top-style............................................................................................... 108
border-top-width.............................................................................................. 109
border-width.................................................................................................... 106
bottom............................................................................................................. 128
clear................................................................................................................ 109
clip................................................................................................................... 129
color................................................................................................................ 131
content............................................................................................................ 120
counter-increment........................................................................................... 121
counter-reset................................................................................................... 122
cursor.............................................................................................................. 110
direction.......................................................................................................... 132
display............................................................................................................. 111
float................................................................................................................. 112
font.................................................................................................................. 116
font-family....................................................................................................... 116
font-size.......................................................................................................... 117
font-size-adjust................................................................................................ 118
font-stretch...................................................................................................... 118
font-style......................................................................................................... 119
font-variant...................................................................................................... 119
font-weight...................................................................................................... 120
height.............................................................................................................. 113
left................................................................................................................... 128
letter-spacing.................................................................................................. 132
line-height....................................................................................................... 114
list-style........................................................................................................... 122
list-style-image................................................................................................ 123
list-style-position............................................................................................. 123
list-style-type................................................................................................... 123
margin............................................................................................................. 124
margin-bottom................................................................................................. 125
margin-left....................................................................................................... 125
margin-right..................................................................................................... 125
margin-top....................................................................................................... 125

max-height...................................................................................................... 114
max-width........................................................................................................ 114
min-height....................................................................................................... 115
min-width......................................................................................................... 115
outline............................................................................................................. 125
outline-color.................................................................................................... 127
outline-style..................................................................................................... 127
outline-width.................................................................................................... 127
overflow........................................................................................................... 130
padding........................................................................................................... 127
padding-bottom............................................................................................... 128
padding-left..................................................................................................... 128
padding-right................................................................................................... 128
padding-top..................................................................................................... 128
page-break-after............................................................................................. 135
page-break-before.......................................................................................... 135
page-break-inside........................................................................................... 136
position............................................................................................................ 112
right................................................................................................................. 128
text-align......................................................................................................... 132
text-decoration................................................................................................ 133
text-indent....................................................................................................... 133
text-transform.................................................................................................. 134
top................................................................................................................... 128
vertical-align.................................................................................................... 130
visibility............................................................................................................ 113
white-space..................................................................................................... 134
width................................................................................................................ 115
word-spacing................................................................................................... 134
z-index............................................................................................................ 131


PARTE I: CSS Bsico

A forma recomendada para formatar as pginas escritas em HTML baseia-se
nos padres "Cascading Style Sheets" (folhas de estilos em cascata), publicados pelo
World Wide Web Consortium (W3C).

A utilizao deste padro da Web permite ganhar tempo, dar consistncia e
facilitar muito a escrita de pginas para a Web. Neste curso vamos aprender a usar
folhas de estilos em cascata (estilos CSS) para criar pginas mais flexveis, mais
leves, e controlar o seu aspecto grfico com maior preciso e com maior facilidade na
correo de erros.

Para seguir as matrias que aqui so apresentadas o aluno precisa saber
construir pginas simples em HTML. necessrio que j se tenha uma base bem
slida sobre o HTML.

1. Primeiro contato

A maioria das pessoas que fazem um curso voltado para a web gostam de
comear a fazer coisas muito rapidamente, portanto, vamos j comear a ver alguns
exemplos e realizar exerccios prticos. Logo a seguir teremos um captulo de
"conversa" em que analisaremos a situao que levou o W3C a criar este padro e
depois vrios captulos com a matria a srio e dezenas de exerccios prticos.

1.1 A sintaxe CSS

A sintaxe das definies CSS composta por duas partes: um seletor e uma
declarao. Vejamos um exemplo:

Neste exemplo o seletor H1 diz que o estilo se aplica a elementos <h1> e a
definio diz que a cor do texto destes elementos deve ser verde ("green").

A declarao fica entre chaves ({...}) e pode conter vrias definies. Cada
definio formada por um par de propriedade:valor, em que o valor separado da
propriedade pelo caractere : (dois pontos). O exemplo seguinte ilustra isto de forma
genrica:

sel et or { pr opr i edade: val or }

O exemplo seguinte permite-lhe experimentar isto de imediato:

<ht ml >
<head>
<st yl e t ype=" t ext / css" >
H1 { col or : gr een }
</ st yl e>
</ head>
<body>
<H1>Est e cabeal ho t emcor ver de</ H1>
</ body>
</ ht ml >


O seletor normalmente o nome de um elemento do HTML, mas tambm pode
ser um seletor de classe, um seletor de ID ou um seletor contextual (estes conceitos
sero esclarecidos mais frente.)

Se o valor que queremos dar propriedade tiver mais do que uma palavra
devemos coloc-lo entre aspas, como se mostra a seguir:

<ht ml >
<head>
p { f ont - f ami l y: " comi c sans ms" }
</ st yl e>
</ head>
<body>

O t ext o dest e par gr af o t emt i po de l et r a " comi c sans ms" .

</ body>
</ ht ml >

Dentro das chaves (caracteres { e }) podemos colocar vrias definies
separadas pelo caractere ";" (ponto e vrgula). O exemplo seguinte define trs
propriedades para o elemento , que so o alinhamento, a cor do texto e o tipo de
letra.

<ht ml >
<head>
p
{
t ext - al i gn: cent er ;
col or : gr een;

f ont - f ami l y: ar i al
}
</ st yl e>
</ head>
<body>

O t ext o dest e par gr af o t emt i po de l et r a " ar i al " , cor ver de e est
al i nhado ao cent r o.

</ body>
</ ht ml >

Para tornarmos mais legveis as definies dos estilos colocamos cada
definio numa linha diferente, mas podamos ter escrito tudo na mesma linha.

1.2 Agrupar seletores

Se precisarmos aplicar os estilos a mais do que um elemento podemos agrupar
os seletores que partilham das mesmas definies. Para isso escrevemos uns a seguir
aos outros separados por vrgulas. No exemplo seguinte os elementos de <h1> at
<h6> partilham todos a mesma definio:

h1, h2, h3, h4, h5, h6
{
col or : gr een
}

1.3 Seletores de classe

Os seletores de classe permitem-nos definir estilos diferentes que podem ser
aplicados ao mesmo elemento. Imagine que precise ter dois tipos diferentes de
pargrafo no documento: um alinhado direita e outro alinhado ao centro. Vejamos
como os seletores de classe tornam isto muito fcil:

<ht ml >
<head>
p. di r ei t a { t ext - al i gn: r i ght }
p. cent r o { t ext - al i gn: cent er }
</ st yl e>
</ head>
<body>

Est e par gr af o est al i nhado a di r ei t a.




Est e par gr af o est al i nhado ao cent r o.

</ body>
</ ht ml >

Nota: O atributo class, como qualquer outro atributo, s pode ser especificado
uma nica vez num dado elemento. O exemplo seguinte est errado:


Est e par gr af o t emumer r o causado pel a ut i l i zao r epet i da do at r i but o
cl ass.


Os seletores de classe tambm podem ser definidos sem colocarmos o nome
de um elemento no incio da definio. Quando isso acontece as definies podem ser
aplicadas a qualquer elemento cujo atributo class tenha o mesmo valor. O exemplo
seguinte define uma classe que pode ser utilizada com qualquer elemento do HTML:

<ht ml >
<head>
. cent r o { t ext - al i gn: cent er }
</ st yl e>
</ head>
<body>
<h2 cl ass=" cent r o" >
Cabeal ho al i nhado ao cent r o
</ h2>

Est e par gr af o t ambmest al i nhado ao cent r o.

</ body>
</ ht ml >



1.4 Seletor de id

O seletor de id diferente do seletor de classe porque se aplica a um nico
elemento da pgina. As regras do HTML ditam que os valores do atributo id no
podem repetir-se numa mesma pgina. Da resulta que o nmero de elementos no
documento com um determinado id um ou zero.

A regra de seleo para o estilo definido no exemplo seguinte indica que ele s
pode ser aplicado a um elemento que tenha o valor "para1" no atributo id:

<ht ml >
<head>
p#par a1
{
col or : r ed
}
</ st yl e>
</ head>
<body>

Est e par gr af o est al i nhado ao cent r o e t emcor ver mel ha.

</ body>
</ ht ml >

Se tentarmos aplicar esta regra a um elemento <div>, usando id="para1",
vemos que o browser no a aceita:

<ht ml >
<head>

p#par a1
{
col or : r ed
}
</ st yl e>
</ head>
<body>
<di v i d=" par a1" >
Est e el ement o no est al i nhado ao cent r o e no t emcor ver mel ha por que
no umpar gr af o.
</ di v>
</ body>
</ ht ml >

Se quisermos que a regra se aplique a qualquer elemento que tenha o id para1
basta escrev-la na forma seguinte:

*#par a1
{
col or : r ed
}

A regra acima aplicvel a qualquer elemento que tenha o id para1 porque o
seletor * diz que ela se aplica a todos os elementos. No exemplo seguinte ela seria
aplicada ao elemento <h1>:

<h1 i d=" par a1" >Est e umt ext o de cabeal ho</ h1>

1.5 Escrever comentrios numa folha de estilos

Podemos inserir comentrios nas definies CSS para explicar o cdigo que
escrevemos tornando-o mais fcil de compreender. Quando mais tarde voltarmos a
uma folha de estilos, ou se a partilharmos com outra pessoa, ser mais fcil perceber
como ela funciona.

Os comentrios devem ser ignorados pelo browser, mas as verses 5 do MSIE
os l como se eles fossem definies, o que pode causar erros. Por isso coloque
comentrios apenas em folhas de estilos que sejam lidas apenas pelos browsers
superiores as verses MSIE 6, Netscape 7/Mozilla ou pelo Opera.

Para iniciar um comentrio escreva a seqncia de caracteres "/*", depois o
texto do comentrio, e no fim escreva "*/" para terminar o comentrio. O exemplo
seguinte mostra como se faz:

P {
t ext - al i gn: cent er ; / * I st o umcoment r i o */
col or : bl ack;
/ * O MSI E 5 no r econhece os coment r i os! ! ! */
f ont - f ami l y: ar i al
}

1.6 A colocao dos elementos em CSS baseia-se em caixas

Todos os elementos que podem ser vistos numa pgina da Web ocupam uma
determinada rea na pgina. Essa rea tem a forma de um retngulo, que designamos
por caixa. A caixa de um elemento contm tudo aquilo que lhe diz respeito: contedo,
linhas de contorno, margens e espao em branco. O grfico que pode ver a seguir
representa as diversas reas que constituem a caixa de um elemento.

Para percebermos o significado deste grfico encontram - se abaixo alguns
esclarecimentos:

O contedo do elemento fica dentro de um retngulo ao redor do qual existem
outras reas.
Entre o contedo do elemento e os seus limites (border) pode existir espao
em branco, que designamos por padding.
Os limites do elemento designam-se por border. a que o elemento termina.
O retngulo (caixa) que contm o elemento pode ter margens (margin) que o
separa dos outros elementos da pgina. As margens esto fora dos limites do
elemento.

A largura de um elemento determinada unicamente pela largura do seu
contedo. J a largura da caixa que contm o elemento dada pela soma da largura
do contedo mais as larguras ocupadas pelas linhas de contorno (border) e pelo
espao em branco (padding). A altura de um elemento calcula-se de forma anloga.
As margens servem para deslocar o retngulo (caixa) do elemento relativamente sua
posio normal.


Elementos de bloco e elementos " inline"

Todos os elementos visveis numa pgina escrita em HTML pertencem a um
destes dois tipos: bloco ou "inline". Os elementos de bloco, como por exemplo <div>
ou <table>, comeam numa nova linha e ao terminarem ocorre novamente uma
mudana de linha. Os elementos de bloco recebem larguras que so calculadas em
funo da largura do bloco em que esto contidos.

Os elementos "inline", como ou , no do incio a uma nova linha e
a sua largura determinada apenas pelo seu contedo. O seu comportamento
semelhante ao comportamento do texto simples.

Exemplos de Aplicao

Elementos de bloco

<ht ml >
<head>
<t i t l e></ t i t l e>
</ head>
<body>
<h1>Os cabeal hos so el ement os de bl oco</ h1>t ext o nor mal
Os par gr af os so el ement os de bl oco
<di v>
Os el ement os &l t ; di v&gt ; e &l t ; t abl e&gt ; t ambmso el ement os de bl oco
</ di v>
</ body>
</ ht ml >

Elementos " inline"

<ht ml >
<head>
</ head>
<body>

Os el ement os &l t ; b&gt ; ( bol d) , &l t ; i &gt ; ( i t l i co) ,
<st r ong>&l t ; st r ong&gt ; ( t ext o f or t e) </ st r ong>,
<code>&l t ; code&gt ; ( cdi go de comput ador ) </ code> so exempl os de
el ement os " i nl i ne" .

</ body>
</ ht ml >



1.7 Posicionamento absoluto e posicionamento relativo

A ordem de colocao dos elementos numa pgina HTML consiste
habitualmente em desenh-los medida que eles vo surgindo. Este mtodo
designado por posicionamento relativo.

Contudo, as folhas de estilos CSS introduziram um ingrediente novo: os
elementos de bloco podem ser colocados em qualquer ponto da pgina e podem
sobrepor-se uns aos outros. Este mtodo designado por posicionamento absoluto
porque nos permite indicar o local exato da pgina em que queremos que o elemento
seja desenhado. Se esse local j estiver ocupado por outro elemento no h qualquer
problema porque os estilos CSS permitem-nos sobrepor elementos. Tudo se passa
como se a pgina fosse uma mesa sobre a qual podemos colocar folhas umas sobre
as outras.

Exemplos de Aplicao

Posicionamento absoluto com sobreposio de elementos

<ht ml >
<head>
</ head>
<body>

Est e par gr af o est na posi o nor mal ( r el at i va. )


Est e par gr af o est numa posi o absol ut a.


Est e par gr af o t ambmest numa posi o r el at i va.

</ body>
</ ht ml >



2. Porque que devemos formatar com estilos?

2.1 Vantagens dos estilos CSS

Os estilos CSS foram adicionados pelo W3C s recomendaes HTML 4 e
XHTML para resolver problemas muito srios que afetavam a qualidade das
pginas escritas em HTML e dificultavam a sua manuteno.
A utilizao de folhas de estilos externas permite poupar tempo, ganhar
flexibilidade e aumentar a consistncia das pginas que constituem um
website.
Quando guardamos os estilos num arquivo externo e os aplicamos a todas as
pginas de um website, a modificao de diversas qualidades do aspecto
grfico passa a ser uma tarefa fcil.
As pginas que usam estilos CSS, alm de serem mais fceis de escrever, so
tambm mais leves e aparecem mais depressa no browser.

As folhas de estilos permitem ganhar tempo e flexibilidade

Os estilos CSS definem o aspecto grfico a dar aos elementos do HTML. Os
estilos podem ser definidos numa folha de estilos externa ou internamente no prprio
documento HTML. Quando definidos num arquivo externo, os estilos podem ser
partilhados por muitas pginas, o que permite alterar instantaneamente o aspecto
grfico de todas as pginas modificando apenas o arquivo em que os estilos so
definidos. Quando tnhamos que usar as tcnicas antigas para fazer alteraes no
aspecto grfico de um website ramos obrigados a alterar todos os elementos e
todas as tabelas usadas para formatar as pginas. Isto tinha de ser feito em todas as
pginas. Quando utilizamos estilos CSS basta modificar um nmero reduzido de
definies numa nica folha de estilos para instantaneamente atualizarmos centenas
ou milhares de pginas com um esforo mnimo. Os erros ocorrem com menor
freqncia e so mais fceis de corrigir.

A facilidade com que as alteraes passam a ser feitas d uma maior
flexibilidade ao website e melhoram o seu desempenho. As pginas ficam
simultaneamente mais ricas e mais leves.

2.2 O " mecanismo" de cascata

As folhas de estilos CSS nos do muita liberdade na forma de definir os estilos.
No mesmo documento podemos utilizar um ou mais arquivos externos, definir os
estilos na seo head do documento ou utilizar o atributo style nos elementos do

HTML. O browser l todas as definies de estilos que encontra e quando aparecem
estilos repetidos ele combina-os num s estilo seguindo algumas regras simples.

Uma das regras da cascata diz que ao encontrar vrias verses para o mesmo
estilo o browser guarda a ltima que encontrou. Outra regra diz que alguns estilos so
herdados pelos elementos que se encontram dentro de outros elementos.

2.3 Porque que a formatao com estilos superior?

As etiquetas que definem os elementos do HTML foram concebidas para definir
contedos. O autor do HTML nunca teve qualquer inteno de usar esta linguagem
para definir estilos grficos para as pginas. Os elementos do HTML foram idealizados
para declarar coisas como "Isto um pargrafo", ou "Isto um cabealho". Para isso
colocavam-se etiquetas como ou <h1> ao redor do texto. A forma como esta
informao devia ser apresentada graficamente era um problema que o browser tinha
que resolver tendo em considerao o significado de cada elemento.

Este conceito perfeitamente racional era muito adequado enquanto o objetivo
das pginas foi apenas a escrita e a partilha de textos na Web, mas a rpida aceitao
da Web fez com que as pessoas que davam importncia ao design tambm se
interessassem por este meio.

Esse interesse levou a esforos para criar pginas graficamente elaboradas,
mais ao gosto dos designers. Um dos efeitos mais importantes desses esforos foi a
completa adulterao do propsito de diversos elementos. O elemento <table>, por
exemplo, foi concebido unicamente para apresentar tabelas com dados numricos,
mas os designers passaram a us-lo, colocando esses elementos em diversos pontos
das pginas em arranjos cada vez mais complexos.

Mas isto no era suficiente porque havia coisas que no podiam ser feitas
usando apenas os elementos disponveis. Para dar aos designers aquilo que eles
pediam os criadores dos browsers acharam que era uma boa idia inventarem as suas
prprias etiquetas e acrescentaram atributos estilsticos aos que j existiam. Estas
extenses permitiram usar o HTML para dar cores e estilos diferentes ao texto e
aplicar outras formataes.

A formatao baseada em etiquetas e atributos estilsticos estava errada!

As iniciativas dos criadores destas novas etiquetas e atributos ignoraram por
completo a filosofia na qual o criador do HTML, Tim Berners-Lee, se baseou para criar
a linguagem. As novas etiquetas (como a famigerada ) davam importncia ao
aspecto grfico que produziam e no ao significado daquilo que continham.

Apesar de todas as contra-indicaes, a criao e rpida disseminao de
etiquetas conduziu a uma situao em que os contedos das pginas estavam
completamente misturados com os aspectos estilsticos. Isto levou a que no final da
dcada de 1990 o HTML estivesse num estado em que era muito difcil criar e fazer a
manuteno de websites compostos por mais que fosse um nmero reduzido de
pginas. Os contedos das pginas no eram mais do que imensas "sopas de
etiquetas" mal organizadas cujo significado no era muito claro.

Este problema comeou a ser resolvido pelo World Wide Web Consortium
(W3C) com a criao dos padres HTML 4, CSS, XML e XHTML. O HTML deve ser
usado em conjunto com estilos CSS, sendo que os contedos se exprimem em HTML
e os estilos em CSS.


Este novo paradigma para a criao de pginas bem suportado por todos os
browsers dominantes: Netscape/Mozilla, Microsoft Internet Explorer e Opera. Esta
realidade faz com que ningum tenha desculpas para continuar a escrever um mau
HTML!

2.4 Limitaes dos browsers atuais

Apesar de os browsers atuais (Netscape/Mozilla, MSIE 7, Opera 9) oferecerem
um bom suporte para os estilos CSS, preciso chamar a ateno para o fato de ainda
subsistirem alguns problemas quando aplicamos tcnicas avanadas de formatao
baseada em CSS.

Os problemas mais graves so causados pelo MSIE, que contm bugs que lhe
do alguns comportamentos que se desviam dos padres CSS. O bug mais grave
resulta da implementao errada do modelo de dimensionamento dos elementos.
Esse bug bem conhecido e pode quase sempre ser superado recorrendo a truques
que no comprometem o funcionamento das pginas nos restantes browsers.

Alm deste bug e de outros bugs menos importantes devemos ter sempre em
ateno o fato de as implementaes dos padres CSS serem geralmente
incompletas. Isto significa que no podemos contar com algumas propriedades.
Apesar disso podemos estar seguros de que as propriedades com que podemos
contar so suficientemente teis para no querermos passar sem elas.

As limitaes associadas ao suporte que os browsers atuais oferecem tm de
estar sempre presentes na mente do criador de pginas baseadas em CSS. Se usar
apenas as funcionalidades que so bem suportadas, que j so muitas, no ser
preciso tomar muitas precaues. Se voc decidiu utilizar funcionalidades mais
avanadas definidas pelos padres CSS lembre-se que preciso testar tudo de forma
exaustiva em todos os browsers relevantes para no ter surpresas desagradveis.

3. Escrita e combinao de estilos

Quando o browser encontra uma folha de estilos num documento ele usa-a
para formatar os elementos desse documento. Existem trs formas diferentes para
definir estilos e inseri-los num documento.

3.1 Inserir uma folha de estilos interna

Uma folha de estilos interna deve ser usada quando os estilos so usados uma
nica vez. Nesse caso as definies fazem-se dentro de um elemento <style> que
deve ser colocado dentro do elemento <head> da pgina HTML, assim:

<head>
hr { col or : bl ue }
p { mar gi n- l ef t : 20px }
body { backgr ound- i mage: ur l ( " i mages/ back40. gi f " ) }
</ st yl e>
</ head>

O browser l as definies contidas no elemento <style> e faz a formatao
dos elementos da pgina aplicando essas definies.


Nota: O comportamento normal dos browsers consiste em ignorar os
elementos cujo significado desconhecem. Isto significa que um browser muito antigo
que no suporta estilos CSS ignorar o elemento <style>, mas no ignorar o texto
que est escrito l dentro. Se for necessrio evitar que esse browser escreva o texto
das definies devemos ocult-lo colocando-o dentro de um comentrio do HTML,
como se mostra a seguir:

<head>
<! - -
hr { col or : bl ue }
p { mar gi n- l ef t : 20px }
body { backgr ound- i mage: ur l ( " backgr nd. j pg" ) }
- - >
</ st yl e>
</ head>

3.2 Definio de estilos com o atributo style

A definio de estilos utilizando o atributo style nos faz perder muitas das
vantagens das folhas de estilos porque acaba misturando os estilos com os
contedos. Esta forma de definir estilos deve ser usada com moderao e apenas
quando precisarmos aplicar um estilo uma nica vez a um nico elemento.

O atributo style aceita quase todas as propriedades CSS. O exemplo seguinte
mostra como podemos controlar a cor e a margem esquerda de um pargrafo:

<ht ml >
<body>

I st o umpar gr af o f or mat ado como at r i but o st yl e

</ body>
</ ht ml >

Se precisarmos dar a uma propriedade um valor que contm espaos devemos
coloc-lo entre aspas. O exemplo seguinte faz isso para dar o tipo de letra "sans serif"
a um pargrafo e "comic sans ms" a outro.

<ht ml >
<body>

Nest e par gr af o o t i po de l et r a " sansser i f "


Nest e par gr af o o t i po de l et r a " comi c sans ms"


</ body>
</ ht ml >

3.3 Folha de estilos num arquivo externo

Uma folha de estilos externa constitui a melhor opo quando os mesmos
estilos so aplicados a vrias pginas. Com uma folha de estilos externa podemos
alterar o aspecto grfico de muitas pginas bastando para isso alterar apenas o
arquivo em que esto definidos os estilos. Cada pgina contm um elemento <link>
que a liga folha de estilos. O elemento <link> deve ser colocado dentro do elemento
<head> nas pginas HTML:

<head>
<l i nk r el =" st yl esheet " t ype=" t ext / css" hr ef =" est i l os. css" >
</ head>

Exemplos de Aplicao

Estilos definidos num arquivo externo

estilos.css

h1 {
f ont - f ami l y: sansser i f ;
col or : #666666;
}

p { f ont - f ami l y: cur si ve; }

<ht ml >
<head>
<l i nk hr ef =" est i l os. css" t ype=" t ext / css" r el =" st yl esheet " >
<t i t l e>Exempl o</ t i t l e>
</ head>
<body>
<h1>Est e cabeal ho f oi f or mat ado comuma f ol ha de est i l os. </ h1>
Est e par gr af o t ambm! 
</ body>
</ ht ml >



O browser l as definies contidas na folha de estilos (estilos.css) e faz a
formatao dos elementos do documento aplicando essas definies.

Se ao executar o exemplo de aplicao mais acima voc prestou ateno no
arquivo de estilos ento reparou que a folha de estilos externa apenas um arquivo de
texto que contm definies CSS. No seu contedo no podem aparecer elementos
do HTML, s so permitidas definies CSS vlidas.

3.4 Como se combinam estilos concorrentes

Um documento HTML pode definir ou utilizar mais do que uma folha de estilos.
Quando isso acontece possvel que algumas propriedades sejam definidas numa
folha e definidas de novo numa outra. Nestes casos o browser deve aplicar regras
para decidir qual das definies mais importante.

A ordem da cascata

Quando um estilo definido mais de uma vez qual das definies deve o
browser escolher? A primeira? A ltima? Nenhuma delas? Para decidir o browser
aplica as regras seguintes (listadas por ordem crescente de importncia):

1. Estilos definidos por omisso (so aplicados sempre que no existirem outros
que se sobreponham a eles)
2. Estilos definidos numa folha de estilos interna (dentro do elemento <style>) ou
num arquivo externo
3. Estilos "inline" (definidos atravs do atributo style nos elementos do documento
HTML)

Assim, temos que os estilos que so definidos no prprio elemento atravs do
atributo style tm a prioridade mais elevada. As definies que o atributo style faz
sobrepor-se a qualquer definio que tenha sido feita antes.

O exerccio de aplicao seguinte ilustra melhor este mecanismo:

Exemplos de Aplicao

Regras de cascata com um arquivo externo e estilos internos

<ht ml >
<head>
<l i nk hr ef =" est i l os. css" t ype=" t ext / css" r el =" st yl esheet " >

p { f ont - f ami l y: ar i al }
</ st yl e>
<t i t l e>Exempl o</ t i t l e>
</ head>
<body>
<h1>Est e cabeal ho f oi f or mat ado comuma f ol ha de est i l os ext er na. </ h1>

Repar e que o t i po de l et r a dest e par gr af o aquel e i ndi cado pel a f ol ha
de est i l os i nt er na ( " ar i al " ) . Apesar de a f ol ha ext er na cont i da no
ar qui vo " est i l os. css" cont er uma def i ni o di f er ent e ( " cur si ve" ) as
r egr as de cascat a di zemque caso exi st amduas def i ni es concor r ent e
deve pr eval ecer a mai s r ecent e.

</ body>
</ ht ml >

Apesar de o exemplo de aplicao anterior ser elucidativo analisemos mais um
exemplo. Suponhamos que uma folha de estilos externa define as seguintes
propriedades para o seletor h3:

h3
{
col or : r ed;
t ext - al i gn: l ef t ;
f ont - si ze: 8pt
}

Mas existe uma folha de estilos interna com as seguintes propriedades tambm
para o seletor h3:

h3
{
t ext - al i gn: r i ght ;
f ont - si ze: 20pt
}

Se a pgina que contm a folha de estilos interna usar o elemento <link> para
se ligar folha de estilos externa indicada antes, ento as duas definies sero
combinadas para produzir a seguinte verso final para o seletor h3:

h3
{
col or : r ed;
t ext - al i gn: r i ght ;
f ont - si ze: 20pt
}


A cor foi herdada da folha externa, mas o alinhamento do texto e o tamanho de
letra foram substitudos pelas definies dadas na folha interna.

3.5 Herana de estilos entre elementos

Algumas propriedades CSS definidas para um elemento passam
automaticamente a ser aplicadas aos descendentes desse elemento. Quando isso
acontece diz-se que as propriedades so herdadas. O exemplo seguinte mostra como
funciona este mecanismo de "herana" de estilos:

<ht ml >
<head>
di v { col or : bl ue }
</ st yl e>
</ head>
<body>
<di v>
O t ext o dos el ement os &l t ; di v&gt ; t emcor azul .

Est e par gr af o est dent r o de umel ement o &l t ; di v&gt ; .
El e her da a cor azul .

</ di v>

Est e par gr af o no est dent r o de nenhumel ement o que l he dei xe uma
" her ana" .

</ body>
</ ht ml >

No exemplo que acabamos de ver, a folha de estilos diz que o texto dos
elementos <div> deve ter cor azul. O pargrafo que est dentro de um elemento <div>
herda a cor azul porque a propriedade color herdada pelos descendentes de um
elemento. J o segundo pargrafo no est dentro de nenhum elemento que lhe deixe
uma "herana" (que neste caso a propriedade color) por isso o seu texto tem a cor
normal.

H outras propriedades que s afetam o elemento ao qual so aplicadas e no
se propagam aos seus descendentes. Diz-se que estas propriedades no so
herdadas. O exemplo seguinte semelhante ao anterior, mas agora propriedade
herdada color juntamos a propriedade border, que no herdada:

<ht ml >
<head>

di v
{
col or : bl ue;
bor der : sol i d t hi n r ed
}
</ st yl e>
</ head>
<body>
<di v>
Os el ement os &l t ; di v&gt ; r ecebemuma l i nha de cont or no ver mel ha
( bor der ) e t ext o comcor azul .

Est e par gr af o est dent r o de umel ement o &l t ; di v&gt ; .
El e her da a cor azul mas no her da a l i nha de cont or no ( bor der ) .

<di v>
Tal como o el ement o &l t ; di v&gt ; pr i nci pal est e el ement o &l t ; di v&gt ;
r ecebe a sua pr pr i a l i nha de cont or no.
</ di v>
</ di v>
</ body>
</ ht ml >

Como pode observar, a propriedade color propaga-se ao elemento mas a
propriedade border no.

Exemplos de Aplicao

Uma cascata de estilos com " herana"

<ht ml >
<head>
di v { col or : bl ue }
. ver de { col or : gr een }
</ st yl e>
</ head>
<body>
<di v>
A f ol ha de est i l os di z que o t ext o dos el ement os &l t ; di v&gt ; deve t er
cor azul .

Est e par gr af o est dent r o de umel ement o &l t ; di v&gt ; . El e her da a
cor azul por que a pr opr i edade col or her dada pel os descendent es de
umel ement o.

</ di v>


Ao cont r r i o do par gr af o ant er i or est e par gr af o no est dent r o de
nenhumel ement o que l he dei xe uma " her ana" ( que nest e caso a
pr opr i edade col or ) .

</ body>
</ ht ml >

Uma cascata de estilos com e sem " herana"

<ht ml >
<head>
di v
{
bor der : sol i d t hi n r ed;
col or : bl ue
}
</ st yl e>
</ head>
<body>
<di v>
A f ol ha de est i l os di z que os el ement os &l t ; di v&gt ;
devemt er uma l i nha de cont or no ver mel ha e o t ext o deve
ser azul .

Est e par gr af o est dent r o de umel ement o &l t ; di v&gt ; ,
mas no t eml i nha de cont or no. I st o acont ece por que a
pr opr i edade bor der no her dada pel os descendent es de um
el ement o. J a cor azul por que a pr opr i edade col or her dada.

</ di v>

O t ext o dest e par gr af o, t al como o ant er i or , no t eml i nha
de cont or no. A cor di f er ent e por que no h nada par a her dar .

</ body>
</ ht ml >



Uma cascata de estilos simples

<ht ml >
<head>
p
{
col or : bl ue;
f ont - f ami l y: cur si ve;
f ont - si ze: 16px
}
</ st yl e>
</ head>
<body>

A l t i ma def i ni o de est i l os encont r ada di z
que a cor dest e t ext o deve ser ver mel ha ( " r ed" ) .
De acor do comas r egr as de cascat a el a que
pr eval ece por ser a mai s r ecent e. O t i po de l et r a
def i ni do i ni ci al ment e ( " cur si ve" ) mant m- se.


Est e par gr af o possui t odas as def i ni es f ei t as
na f ol ha de est i l os.

</ body>
</ ht ml >

Outra cascata de estilos

<ht ml >

<head>
p
{
col or : bl ue;
f ont - f ami l y: cur si ve;
f ont - si ze: 16px
}

. ver de { col or : gr een }
</ st yl e>
</ head>
<body>

A l t i ma def i ni o de est i l os encont r ada di z
que a cor dest e t ext o deve ser ver mel ha ( " r ed" ) .


O t ext o dest e par gr af o ver de por que a l t i ma
def i ni o ( at r i but o cl ass=" ver de" ) l he d essa cor .


Est e par gr af o possui as def i ni es nor mai s.

</ body>
</ ht ml >

4. Definir cores em CSS

Podemos obter qualquer cor nossa escolha combinando em propores
corretas trs cores base: vermelho (red), verde (green) e azul (blue).

4.1 Formas de exprimir cores

Em CSS a forma recomendada para exprimir cores baseia-se em notao
hexadecimal. Nesta forma as cores exprimem-se usando trs nmeros hexadecimais
que definem as quantidades de vermelho, verde e azul que entram na composio de
uma determinada cor. O valor mais baixo de uma determinada cor 0 (#00 na notao
hexadecimal usada em CSS) e o valor mais alto 255 (#FF em notao hexadecimal.)
Assim, a cor preta tem 0 Vermelho, 0 Verde e 0 Azul escrevendo na forma de
#000000. J o branco tem 255 vermelho, 255 verde e 255 azul escrevendo na forma
de #FFFFFF. O amarelo forte tem 255 de vermelho, 255 de verde e zero de azul e
escreve-se como #FFFF00.

Consulte o Curso de HTML para ter referncias mais completas sobre as cores
e suas possveis combinaes.


O exemplo seguinte mostra trs formas diferentes para escrever o texto com
cor vermelha.

<ht ml >
<body>

Est e par gr af o t emcor r gb( 255, 0, 0)


Est e par gr af o t emcor #FF0000


Est e par gr af o t emcor " Red"


Est e par gr af o t emcor #0000FF

</ body>
</ ht ml >

4.2 Nomes de Cores

Consulte o Curso de HTML para ter acesso s cores oficias definidas pelos
padres do W3C. importante ressaltar que nem todas as cores possuem nomes
oficiais, porm a maioria reconhecida pelos browsers mais atuais.

4.3 Quatro formas possveis para definir cores

Acabamos de ver que podemos definir uma cor numa folha de estilos
indicando-a de trs formas: 1) indicando o seu nome, por exemplo "Aqua"; 2)
indicando a sua forma rgb, por exemplo rgb(0, 255, 255) para a cor "Aqua"; 3)
indicando a sua forma hexadecimal, por exemplo #00FFFF para a cor "Aqua".

Alm destas trs formas podemos usar uma outra forma rgb baseada em
porcentagens do valor mximo de cada cor. Esta forma menos recomendada do que
as restantes mas pode ser til em algumas situaes. A tabela seguinte apresenta
uma listagem de todas as formas que podemos usar.

Forma Descrio
color_name Um nome de cor (por exemplo red, ou blue)
rgb(vermelho,verde,azul) Um valor rgb para a cor (por exemplo rgb(255,0,0)
a cor vermelha.)

rgb(vermelho%, verde%, azul%) Um valor rgb dado como uma porcentagem do
valor mximo de cor (por exemplo
rgb(100%,0%,0%) a cor vermelha.)
#rrggbb Um nmero hexadecimal (por exemplo #ff0000
para a cor vermelha).

4.4 Cuidados que devemos ter quando utilizamos cores

Atualmente praticamente todos os monitores de computador esto preparados
para apresentar mais de 16 milhes de cores diferentes. No entanto, preciso levar
em conta que existem cada vez mais dispositivos mveis com tela a cores (telefones
celulares e PDAs) que em regra possuem paletas bastante mais reduzidas. Alguns
conseguem mostrar apenas 256 cores, outros 4096 e outros 65536. Normalmente um
aparelho de pequenas dimenses e baixo consumo no vai muito alm disto.

Se deseja que as pginas criadas por voc sejam vistas corretamente nesses
aparelhos deve ter alguns cuidados ao escolher as cores para suas pginas. Uma boa
forma de conseguir resultados aceitveis consiste em usar apenas cores seguras da
Web nas suas pginas. Para aprender mais sobre este assunto consulte o Curso de
HTML.

5. Propriedades dos fundos dos elementos (background)

As propriedades dos fundos dos elementos definem cores de fundo e imagens
de fundo para os elementos do HTML. Estas propriedades nos permitem controlar as
cores e as imagens de fundo dos elementos (posio, repetio, etc).

5.1 Propriedades dos Fundos (background):

Notas Importantes

Nota 1: A ltima coluna da tabela, cujo ttulo W3C, indica o padro que define
a propriedade. CSS1 significa que a propriedade definida pelo padro "Cascading
Style Sheets level 1" e CSS2 significa que a propriedade definida pelo padro
"Cascading Style Sheets level 2".

Nota 2: preciso no esquecer que os browsers apresentam deficincias na
forma como suportam os padres CSS. O padro CSS1 bem suportado e por isso
pode usar todas as propriedades CSS1 praticamente sem restries. Quanto ao
padro CSS2 o grau de suporte j muito amplo mas preciso tomar precaues. Se
decidiu utilizar funcionalidades mais avanadas definidas em CSS2 lembre-se que
preciso testar tudo de forma exaustiva em todos os browsers relevantes para no ter
surpresas desagradveis. Os exemplos que apresentamos exploram apenas as
propriedades que so bem suportadas.

Nota 3: Muitas propriedades esto descritas apenas de forma sumria nesta
tabela. Nesses casos consulte o nome da propriedade na referencia de CSS para
obter informaes mais completas.

Nota 4: Os browsers da Microsoft contm bugs que lhe do alguns
comportamentos que se desviam dos padres CSS. O bug mais grave resulta da
implementao errada do modelo de dimensionamento dos elementos. Esse bug
bem conhecido e pode quase sempre ser superado recorrendo a truques que no
comprometem o funcionamento das pginas nos restantes browsers.

Propriedade Descrio Valores W3C
background Nos oferece uma forma
abreviada para escrever
todas as propriedades do
fundo numa nica
declarao.
Esta propriedade
aceita os valores que
podemos dar a todas
as restantes
propriedades desta
tabela (background-
color, background-
image, background-
repeat background-
attachment e
background-position)
CSS1
background-
attachment
A propriedade background-
attachment indica se a
imagem de fundo deve
permanecer imvel na
janela do browser ou se
acompanha o contedo
quando o movemos (scroll).
scroll
fixed
CSS1
background-color Define a cor de fundo de
um elemento.
color-rgb
color-hex
color-name
transparent
CSS1
background-image Define uma imagem de
fundo para ser usada no
elemento
url
none
CSS1
background-position Define o local onde se
comea a desenhar a
imagem de fundo.
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x-% y-%
x-pos y-pos
CSS1
background-repeat Estabelece se a imagem de
fundo deve repetir-se
(formando um mosaico) ou
no, e as direes da
repetio.
repeat
repeat-x
repeat-y
no-repeat
CSS1

Exemplos de Aplicao

Definir a cor de fundo

<ht ml >
<head>
body { backgr ound- col or : yel l ow }
h1 { backgr ound- col or : #00f f 00 }
h2 { backgr ound- col or : t r anspar ent }
p { backgr ound- col or : r gb( 250, 0, 255) }
</ st yl e>

</ head>
<body>
<h1>I st o umcabeal ho de n vel 1</ h1>


I st o umpar gr af o
</ body>
</ ht ml >

Colocar uma imagem como fundo de um elemento

<ht ml >
<head>
body { backgr ound- i mage: ur l ( " bg- pegadas. j pg" ) }
</ st yl e>
</ head>
<body>
Text o da pgi na 
Text o da pgi na
</ body>
</ ht ml >

Repetir a imagem de fundo (background) na vertical

<ht ml >
<head>

body
{
backgr ound- i mage: ur l ( " bg- pegadas. j pg" ) ;
backgr ound- r epeat : r epeat - y
}
</ st yl e>
</ head>
<body>
</ body>
</ ht ml >

Controlar a posio de uma imagem de fundo

<ht ml >
<head>
body
{
backgr ound- r epeat : no- r epeat ;
backgr ound- posi t i on: 30 50
}
</ st yl e>
</ head>
<body>
</ body>
</ ht ml >



Imagens de fundo fixas (no acompanham o deslocamento da pgina)

<ht ml >
<head>
body
{
backgr ound- at t achment : f i xed
}
</ st yl e>
</ head>
<body>

Est a i magemde f undo per manece i mvel quando se desce
ou sobe na pgi na ou quando se desl oca par a a di r ei t a
ou par a a esquer da
 

 

 

 

 
</ body>
</ ht ml >



Uma nica declarao para definir todas as propriedades do fundo

<ht ml >
<head>
body {backgr ound: #00f f f f ur l ( " bg- pegadas. j pg" ) no- r epeat f i xed cent er cent er }
</ st yl e>
</ head>
<body>
Text o da pgi na 
</ body>
</ ht ml >

6. Unidades de Medida

6.1 Medio de distncias numa pgina HTML

O valor de um comprimento escreve-se com um nmero seguido de uma
abreviao que indica as unidades de medida. No podemos colocar espaos entre o
nmero e as unidades (no escreva 2 cm mas sim 2cm). Quando o comprimento 0
(zero) no preciso indicar as unidades.


A tabela seguinte descreve as unidades de medida que podemos usar em
CSS.

Unidade Descrio
% porcentagem de um valor
in polegadas (inch)
cm centmetros
mm milmetros
em 1 em igual ao tamanho do tipo de letra que est sendo usado
ex 1 ex igual altura da letra "x" no tipo de letra que est sendo
usado (cerca de metade do valor da propriedade font-size).
pt pontos (1 pt o mesmo que 1/72 polegadas)
pc picas (1 pc o mesmo que 12 pt)
px pixels (1 px um ponto na tela do computador)

6.2 Definio de cores

Esta tabela limita-se a resumir o que vimos num captulo anterior.

Forma Descrio
color_name Um nome de cor (por exemplo red, ou blue)
rgb(vermelho,verde,azul) Um valor rgb para a cor (por exemplo rgb(255,0,0)
a cor vermelha.)
rgb(vermelho%, verde%, azul%) Um valor rgb dado como uma porcentagem do
valor mximo de cor (por exemplo
rgb(100%,0%,0%) a cor vermelha.)
#rrggbb Um nmero hexadecimal (por exemplo #ff0000
para a cor vermelha).

7. Propriedades do texto

As propriedades de texto definem o aspecto grfico a dar ao texto. Estas
propriedades permitem-nos controlar cores, aumentar ou reduzir o espao entre os
caracteres, alinhar o texto, escolher o tipo de letra, decor-lo, etc.

7.1 Propriedades de Texto:

Propriedade Descrio Valores permitidos W3C
color Define a cor do texto cor CSS1
direction Define a direo de escrita
do texto
ltr
rtl
CSS2
letter-spacing Aumenta ou diminui o
espao entre os caracteres
normal
comprimento
CSS1
text-align Alinha o texto dentro de um
elemento
left
right
center
justify
CSS1
text-decoration Adiciona pormenores
decorativos ao texto
none
underline
overline
CSS1

line-through
blink
text-indent Desloca para a direita ou
para a esquerda a primeira
letra da primeira linha do
texto.
comprimento
%
CSS1
text-transform Controla as letras de um
elemento
none
capitalize
uppercase
lowercase
CSS1
unicode-bidi normal
embed
bidi-override
CSS2
white-space Define a forma como
tratado o espao em branco
dentro de um elemento
normal
pre
nowrap
CSS1
word-spacing Aumenta ou diminui o
espao entre as palavras
normal
comprimento
CSS1

Exemplos de Aplicao

Definir a cor do texto

<ht ml >
<head>
h1 { col or : #00f f 00 }
h2 { col or : #dda0dd }
p { col or : r gb( 0, 0, 255) }
</ st yl e>
</ head>
<body>
<h1>Cabeal ho de n vel 1</ h1>
</ body>
</ ht ml >


Especificar o espao que separa os caracteres

<ht ml >
<head>
h1 { l et t er - spaci ng: - 3px }
h4 { l et t er - spaci ng: 0. 5cm}
</ st yl e>
</ head>
<body>
</ body>
</ ht ml >

Alinhamento do texto

<ht ml >
<head>
h1 { t ext - al i gn: cent er }
h2 { t ext - al i gn: l ef t }
h3 { t ext - al i gn: r i ght }
</ st yl e>
</ head>
<body>
</ body>
</ ht ml >


Decorao do texto

<ht ml >
<head>
h1 { t ext - decor at i on: over l i ne }
h2 { t ext - decor at i on: l i ne- t hr ough }
h3 { t ext - decor at i on: under l i ne }
a { t ext - decor at i on: none }
</ st yl e>
</ head>
<body>
<a hr ef =" ht t p: / / www. w3. or g" >I st o uma l i gao</ a>
</ body>
</ ht ml >

Incios de pargrafo

<ht ml >
<head>
p { t ext - i ndent : 1cm}
</ st yl e>
</ head>
<body>

A pr i mei r a l i nha de cada par gr af o i ni ci a- se umpouco mai s
di r ei t a do que as l i nhas segui nt es. I st o deve- se ao est i l o
CSS que usamos par a f or mat ar os par gr af os dest a pgi na.


A pr i mei r a l i nha de cada par gr af o i ni ci a- se umpouco mai s
di r ei t a do que as l i nhas segui nt es. I st o deve- se ao est i l o
CSS que usamos par a f or mat ar os par gr af os dest a pgi na.


</ body>
</ ht ml >



Controlar as letras de um texto

<ht ml >
<head>
p. upper case { t ext - t r ansf or m: upper case }
p. l ower case { t ext - t r ansf or m: l ower case }
p. capi t al i ze { t ext - t r ansf or m: capi t al i ze }
</ st yl e>
</ head>
<body>

A cl ass que demos a est e par gr af o d- l he uma f or mat ao
emque t odas as l et r as so mai scul as ( emi ngl s " uper case" . )



emque t odas as l et r as so mi nscul as ( emi ngl s " l ower case" . )



emque t odas as pal avr as comeamcom
l et r a mai scul a ( " capi t al i ze" emi ngl s. )

</ body>
</ ht ml >


8. Controlar o tipo de letra

8.1 Propriedades " font" :

As propriedades do tipo de letra definem aspectos estilsticos das letras com
que se escreve o texto. Elas nos permitem escolher entre vrios conjuntos de
caracteres que desenham as letras de forma diferente, controlar os tamanhos, ajustar
as suas formas, etc.

font Aceita os valores que
podem ser dados ao
restante das propriedades
desta tabela mais aqueles
que se encontram na
coluna seguinte desta linha.
Oferece-nos uma forma
abreviada para definir numa
nica declarao todas as
propriedades relativas ao
tipo de letra.
icon
menu
message-box
small-caption
status-bar
CSS1
font-family A propriedade font-family
consiste numa lista com os
tipos de letra que o browser
pode escolher para
escrever os textos. A lista
est ordenada de forma
prioritria: a primeira
escolha aparece primeiro, a
seguir vem a segunda
escolha e assim
sucessivamente. O browser
escolhe o primeiro tipo que
seja capaz de usar. Os
nomes dos tipos de letra
podem ser nomes de
famlia ou nomes genricos.
family-name
generic-family
CSS1
font-size Define o tamanho de um
tipo de letra
xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
comprimento
%
CSS1
font-size-adjust Se o tipo de letra (font)
escolhido no estiver
disponvel, o browser v-se
obrigado a usar um outro
tipo diferente. A
propriedade font-size-adjust
none
nmero
CSS2

especifica o "aspect value"
do tipo de letra escolhido
para que o browser possa
substitu-lo por um outro
tipo que esteja acessvel
preservando a altura da
letra "x" e mantendo a
legibilidade do texto.
font-stretch A propriedade font-stretch
provoca uma expanso ou
uma contrao horizontal
no tamanho da letra.
normal
wider
ultra-condensed
extra-condensed
condensed
semi-condensed
semi-expanded
expanded
extra-expanded
ultra-expanded
CSS2
font-style Define o estilo de letra a
usar
normal
italic
oblique
CSS1
font-variant Escreve o texto usando um
tipo de letra "small-caps" ou
o tipo normal
normal
small-caps
CSS1
font-weight Define a espessura do trao
com que so desenhadas a
letras
normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900
CSS1

Exemplos de Aplicao

Definir o tipo de letra para um texto

<ht ml >
<head>
h3 { f ont - f ami l y: t i mes }
p { f ont - f ami l y: cour i er }
p. sansser i f { f ont - f ami l y: sansser i f }
</ st yl e>
</ head>
<body>
I st o umpar gr af o comuma cl ass di f er ent e
</ body>
</ ht ml >


Definir o tamanho das letras

<ht ml >
<head>
h1 { f ont - si ze: 150%}
h2 { f ont - si ze: 130%}
p { f ont - si ze: 100%}
</ st yl e>

</ head>
<body>
</ body>
</ ht ml >

Definir o estilo das letras

<ht ml >
<head>
h1 { f ont - st yl e: i t al i c }
h2 { f ont - st yl e: nor mal }
p { f ont - st yl e: obl i que }
</ st yl e>
</ head>
<body>

</ body>
</ ht ml >

Definir uma variante de um tipo de letra

<ht ml >
<head>
p. nor mal { f ont - var i ant : nor mal }
p. smal l { f ont - var i ant : smal l - caps }
</ st yl e>
</ head>
<body>
I st o umpar gr af o
I st o umpar gr af o
</ body>
</ ht ml >

Escrever com texto mais carregado (negrito)

<ht ml >
<head>
p. nor mal { f ont - wei ght : nor mal }
p. t hi ck { f ont - wei ght : bol d }
p. t hi cker { f ont - wei ght : 900 }
</ st yl e>
</ head>
<body>
I st o umpar gr af o coml et r a nor mal 
I st o umpar gr af o coml et r a mai s gr ossa
I st o umpar gr af o coml et r a mui t o gr ossa
</ body>

</ ht ml >

Todas as propriedades do tipo de letra numa nica declarao

<ht ml >
<head>
p { f ont : i t al i c smal l - caps 900 13px ar i al }
</ st yl e>
</ head>
<body>
</ body>
</ ht ml >

9. As linhas de contorno dos elementos (border)

9.1 Propriedades das Margens

Como vimos antes, o limite de um elemento designa-se por "border". Ao redor
do limite podemos desenhar linhas de contorno. O padro CSS permite-nos
especificar o estilo, a cor e a espessura das linhas que delimitam um elemento do
HTML. Antes de termos os estilos CSS, para desenharmos linhas ao redor de um
elemento tnhamos de coloc-lo dentro de uma tabela e desenhar as linhas usando os
elementos da tabela juntamente com o atributo "border".

border Oferece uma forma
numa nica declarao
todos os parmetros
relativos s linhas de
border-width
border-style
border-color
CSS1

fronteira. Aceita os valores
que podem ser dados s
propriedades listadas
direita.
border-bottom Oferece-nos uma forma
todas as propriedades da
linha de fronteira do lado de
baixo numa nica
declarao. Aceita os
valores que podem ser
dados s propriedades
listadas direita.
border-width
border-style
border-color
CSS1
border-bottom-color Define a cor da linha de
fronteira de baixo
border-color CSS2
border-bottom-style Define o estilo da linha de
fronteira de baixo
border-style CSS2
border-bottom-width Define a espessura da linha
de fronteira de baixo
border-width CSS1
border-color Define as cores das quatro
linhas de fronteira. Aceita
de um a quatro valores.
cor CSS1
border-left Oferece-nos uma forma
abreviada para
escrevermos todas as
propriedades da linha de
fronteira do lado esquerdo
numa nica declarao.
Aceita os valores que
podem ser dados s
direita.
border-width
border-style
border-color
CSS1
border-left-color Define a cor da linha de
border-color CSS2
border-left-style Define o estilo da linha de
border-style CSS2
border-left-width Define a espessura da linha
de fronteira do lado
esquerdo
border-width CSS1
border-right Oferece-nos uma forma
abreviada para
fronteira do lado direito
numa nica declarao.
podem ser dados s
direita.
border-width
border-style
border-color
CSS1
border-right-color Define a cor da linha de
border-color CSS2
border-right-style Define o estilo da linha de
border-style CSS2

border-right-width Define a espessura da linha
de fronteira do lado direito
border-width CSS1
border-style A propriedade border-style
define o estilo das quatro
none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
CSS1
border-top Oferece-nos uma forma
abreviada para
fronteira do lado de cima
numa nica declarao.
podem ser dados s
direita.
border-width
border-style
border-color
CSS1
border-top-color Define a cor da linha de
fronteira superior
border-color CSS2
border-top-style Define o estilo da linha de
fronteira superior
border-style CSS2
border-top-width Define a espessura da linha
de fronteira superior
border-width CSS1
border-width Oferece-nos uma forma
abreviada para definirmos
as espessuras de todas as
thin
medium
thick
comprimento
CSS1

Exemplos de Aplicao

Definir o estilo das quatro linhas de fronteira

<ht ml >
<head>
p. dot t ed { bor der - st yl e: dot t ed }
p. dashed { bor der - st yl e: dashed }
p. sol i d { bor der - st yl e: sol i d }
p. doubl e { bor der - st yl e: doubl e }
p. gr oove { bor der - st yl e: gr oove }
p. r i dge { bor der - st yl e: r i dge }
p. i nset { bor der - st yl e: i nset }
p. out set { bor der - st yl e: out set }
</ st yl e>
</ head>
<body>

O MSI E 5. 5 e super i or supor t amt odos os est i l os de l i nha
de f r ont ei r a ( " bor der - st yl e" ) , mas o MSI E 5. 0 no supor t a
os est i l os " dot t ed" e " dashed" .


Uma l i nha de f r ont ei r a compost a por pont os
Uma l i nha de f r ont ei r a compost a por t r aos
Uma l i nha de f r ont ei r a comt r ao cont nuo
Uma l i nha de f r ont ei r a dupl a
Uma l i nha de f r ont ei r a com" r el evo" 
Out r a l i nha de f r ont ei r a com" r el evo" 
Uma l i nha de f r ont ei r a comumef ei t o especi al 
Out r a l i nha de f r ont ei r a comumef ei t o especi al 
</ body>
</ ht ml >

Linhas de fronteira diferentes em cada um dos lados

<ht ml >
<head>
p. sol i ddoubl e { bor der - st yl e: sol i d doubl e }
p. doubl esol i d { bor der - st yl e: doubl e sol i d }
p. gr oovedoubl e { bor der - st yl e: gr oove doubl e }
p. t hr ee { bor der - st yl e: sol i d doubl e gr oove }
</ st yl e>
</ head>
<body>
Par gr af o comt ext o 
Par gr af o comt ext o 
Par gr af o comt ext o 
Par gr af o comt ext o
</ body>
</ ht ml >



Definir as cores das quatro linhas de fronteira

<ht ml >
<head>
p. st l 1
{
bor der - st yl e: sol i d;
bor der - col or : #0000f f
}
p. st l 2
{
bor der - col or : #f f 0000 #0000f f
}
p. st l 3
{
bor der - col or : #f f 0000 #00f f 00 #0000f f
}
p. st l 4
{
bor der - col or : #f f 0000 #00f f 00 #0000f f r gb( 250, 0, 255)
}
</ st yl e>
</ head>
<body>
Par gr af o como est i l o " st l 1" 
</ body>
</ ht ml >



Definir a espessura da linha de fronteira inferior

<ht ml >
<head>
p
{
bor der - bot t om- wi dt h: 15px
}
</ st yl e>
</ head>
<body>

Nas ver ses mai s ant i gas do MSI E 5 a pr opr i edade
" bor der - bot t om- wi dt h" no apl i cada cor r et ament e
quando usada i sol adament e. Nest e caso devemos def i ni r
pr i mei r o umval or par a a pr opr i edade " bor der - st yl e" e
s depoi s " bor der - bot t om- wi dt h" .

</ body>
</ ht ml >

Definir a espessura da linha de fronteira esquerda

<ht ml >
<head>
p
{
bor der - l ef t - wi dt h: 15px
}

</ st yl e>
</ head>
<body>

" bor der - l ef t - wi dt h" no apl i cada cor r et ament e

</ body>
</ ht ml >

Definir a espessura da linha de fronteira do lado direito

<ht ml >
<head>
p
{
bor der - r i ght - wi dt h: 15px
}
</ st yl e>
</ head>
<body>

" bor der - r i ght - wi dt h" no apl i cada cor r et ament e

</ body>
</ ht ml >



Definir a espessura da linha de fronteira superior

<ht ml >
<head>
p
{
bor der - t op- wi dt h: 15px
}
</ st yl e>
</ head>
<body>

" bor der - t op- wi dt h" no apl i cada cor r et ament e

</ body>
</ ht ml >

Todas as propriedades da linha de fronteira inferior numa nica declarao

<ht ml >
<head>
p { bor der - bot t om: medi umsol i d #f f 0000 }
</ st yl e>
</ head>
<body>
Par gr af o comt ext o
</ body>
</ ht ml >



Todas as propriedades da linha de fronteira esquerda numa nica declarao

<ht ml >
<head>
p { bor der - l ef t : medi umsol i d #f f 0000 }
</ st yl e>
</ head>
<body>
</ body>
</ ht ml >

Todas as propriedades da linha de fronteira do lado direito numa nica
declarao

<ht ml >
<head>
p { bor der - r i ght : medi umsol i d #f f 0000 }
</ st yl e>
</ head>
<body>
</ body>
</ ht ml >



Todas as propriedades da linha de fronteira do lado de cima numa nica
declarao

<ht ml >
<head>
p { bor der - t op: medi umsol i d #f f 0000 }
</ st yl e>
</ head>
<body>
</ body>
</ ht ml >

Todas as propriedades relativas espessura das linhas de fronteira numa nica
declarao

<ht ml >
<head>
p. st l 1
{
bor der - wi dt h: 5px
}
p. st l 2
{
bor der - wi dt h: 5px 10px
}
p. st l 3
{
bor der - wi dt h: 5px 10px 1px
}

p. st l 4
{
bor der - wi dt h: 5px 10px 1px medi um
}
</ st yl e>
</ head>
<body>

" bor der - wi dt h" no apl i cada cor r et ament e
s depoi s " bor der - wi dt h" .

Par gr af o comt ext o
</ body>
</ ht ml >

Todas as propriedades das linhas de fronteira numa nica declarao

<ht ml >
<head>
p { bor der : medi umdoubl e #f f 00f f }
</ st yl e>
</ head>
<body>
</ body>
</ ht ml >




PARTE II: CSS Avanado

10. Controlar as margens dos elementos

10.1 Propriedades das Margens

As margens de um elemento so constitudas por espao em branco que ficam
ao seu redor e o separa dos elementos adjacentes. Se o valor de uma margem for
positivo o elemento afasta-se dos outros que lhe so adjacentes mas se for negativo
ele aproxima-se dos outros elementos. Isto significa que podemos usar as margens
para afastar e aproximar os contedos de dois ou mais elementos e at sobrep-los.
As quatro margens podem ser controladas todas ao mesmo tempo ou separadamente.

margin Propriedade que nos
oferece uma forma
propriedades relativas s
quatro margens de um
elemento.
margin-top
margin-right
margin-bottom
margin-left
CSS1
margin-bottom Define a margem inferior de
um elemento
auto
comprimento
%
CSS1
margin-left Define a margem esquerda
de um elemento
auto
comprimento
%
CSS1
margin-right Define a margem direita de
um elemento
auto
comprimento
%
CSS1
margin-top Define a margem superior
de um elemento
auto
comprimento
%
CSS1

Exemplos de Aplicao

Definir a margem esquerda para um texto

<ht ml >
<head>
p. mar gi n { mar gi n- l ef t : 2cm}
</ st yl e>
</ head>
<body>

Est e par gr af o cont mal gumt ext o no
f or mat ado comest i l os CSS.


Nest e par gr af o usamos est i l os CSS par a t or nar a
mar gemesquer da umpouco mai s l ar ga.

</ body>
</ ht ml >


Definir a margem direita para um texto

<ht ml >
<head>
p. mar gi n { mar gi n- r i ght : 2cm}
</ st yl e>
</ head>
<body>


mar gemdi r ei t a umpouco mai s l ar ga. Vamos escr ever
mai s umpouco s par a que el e ocupe mai s do que uma
l i nha e t or ne o ef ei t o evi dent e.

</ body>
</ ht ml >

Definir a margem superior para um texto

<ht ml >
<head>
p. mar gi n { mar gi n- t op: 2cm}
</ st yl e>
</ head>
<body>



mar gemsuper i or umpouco mai s l ar ga.

</ body>
</ ht ml >

Definir a margem inferior para um texto

<ht ml >
<head>
p. mar gi n { mar gi n- bot t om: 80px }
</ st yl e>
</ head>
<body>


mar gemi nf er i or umpouco mai s l ar ga.

 Est e par gr af o cont mal gumt ext o no

</ body>
</ ht ml >


Todas as propriedades relativas a margens numa nica declarao

<ht ml >
<head>
p. mar gi n { mar gi n: 2cm4cm3cm4cm}
</ st yl e>
</ head>
<body>


Nest e par gr af o as mar gens so t odas mai s l ar gas

 Est e par gr af o cont mal gumt ext o no

</ body>
</ ht ml >

11. Propriedades de " padding"

As propriedades padding controlam o espao em branco que separa os
contedos de um elemento dos seus limites ("border"). proibido usar valores
negativos para estas propriedades porque isso colocaria os contedos fora do
elemento, o que no faria sentido. Os quatro lados podem ser controlados todos de
uma vez ou separadamente.

11.1 Propriedades que controlam o espao entre o contedo e os limites:

padding Propriedade que nos
oferece uma forma
nica declarao todos os
aspectos dos
espaamentos entre o
padding-top
padding-right
padding-bottom
padding-left
CSS1

contedo de um elemento e
os seus limites.
padding-bottom Define o espao que separa
o contedo de um elemento
do seu limite inferior
comprimento
%
CSS1
padding-left Define o espao que separa
do seu limite esquerdo
comprimento
%
CSS1
padding-right Define o espao que separa
do seu limite direito
comprimento
%
CSS1
padding-top Define o espao que separa
do seu limite superior
comprimento
%
CSS1

Exemplos de Aplicao

Definir o espao em branco entre o limite esquerdo e o contedo de uma clula
de tabela

<ht ml >
<head>
t d {paddi ng- l ef t : 20px}
</ st yl e>
</ head>
<body>
<t abl e bor der =" 1" >
<t r >
<t d>Nest a cl ul a de t abel a exi st e uma separ ao de 20px
ent r e o cont edo e o l i mi t e do l ado esquer do.
</ t d>
</ t r >
</ t abl e>
</ body>
</ ht ml >

Definir o espao em branco entre o limite direito e o contedo de uma clula de
tabela

<ht ml >
<head>
t d {paddi ng- r i ght : 50px}
</ st yl e>

</ head>
<body>
<t r >
ent r e o cont edo e o l i mi t e do l ado di r ei t o. Vamos
escr ever mai s umpouco par a que t enha mai s do que uma
l i nha, o que pe o ef ei t o emevi dnci a.
</ t d>
</ t r >
</ t abl e>
</ body>
</ ht ml >

Definir o espao em branco entre o limite de cima e o contedo de uma clula de
tabela

<ht ml >
<head>
t d {paddi ng- t op: 32px}
</ st yl e>
</ head>
<body>
<t r >
ent r e o cont edo e o l i mi t e super i or .
</ t d>
</ t r >
</ t abl e>
</ body>
</ ht ml >


Definir o espao em branco entre o limite de baixo e o contedo de uma clula
de tabela

<ht ml >
<head>
t d {paddi ng- bot t om: 42px}
</ st yl e>
</ head>
<body>
<t r >
ent r e o cont edo e o l i mi t e i nf er i or .
</ t d>
</ t r >
</ t abl e>
</ body>
</ ht ml >

Uma nica declarao para definir todas as propriedades relativas ao espao em
branco dentro de um elemento

<ht ml >
<head>
t d { paddi ng: 42px }
t d. st l 2 { paddi ng: 22px 52px }
</ st yl e>
</ head>
<body>
<t r >
<t d>
Nest a cl ul a de t abel a exi st e uma separ ao de 42px
ent r e o cont edo e t odos os l i mi t es.
</ t d>
</ t r >
</ t abl e>
 
<t r >
<t d cl ass=" st l 2" >
Nest a cl ul a de t abel a exi st e uma separ ao de 22px
ent r e o cont edo e os l i mi t es super i or e i nf er i or .
Ent r e o cont edo e os l i mi t es esquer do e di r ei t o a
separ ao de 52px.
</ t d>
</ t r >
</ t abl e>

</ body>
</ ht ml >

12. Controle das dimenses dos elementos

As propriedades relativas a dimenses so usadas para controlar a altura e a
largura dos elementos e o espao entre linhas de texto.

12.1 Propriedades Relativas a Dimenses:

height Define a altura de um
elemento
auto
comprimento
%
CSS1
line-height Define a distncia entre as
linhas
normal
nmero
comprimento
%
CSS1
max-height Define a altura mxima de
um elemento
none
comprimento
%
CSS2
max-width Define a largura mxima de
um elemento
none
comprimento
%
CSS2
min-height Define a altura mnima de
um elemento
comprimento
%
CSS2
min-width Define a largura mnima de
um elemento
comprimento
%
CSS2
width Define a largura de um
elemento
auto
%
comprimento
CSS1

Exemplos de Aplicao

Definir a altura e a largura de uma imagem

<ht ml >

<head>
i mg. nor mal
{
hei ght : aut o;
wi dt h: aut o
}

i mg. gr ande
{
hei ght : 64px;
wi dt h: 64px
}

i mg. pequeno
{
hei ght : 16px;
wi dt h: 16px
}
</ st yl e>
</ head>
<body>
 
 

</ body>
</ ht ml >

Aumentar o espao entre as linhas

<ht ml >
<head>
p. aument ar {l i ne- hei ght : 32px}
</ st yl e>
</ head>
<body>
I st o umpar gr af o comt ext o. I st o umpar gr af o comt ext o.
I st o umpar gr af o comt ext o. I st o umpar gr af o comt ext o.




</ body>
</ ht ml >

13. Posicionamento dos elementos

As propriedades que controlam o posicionamento dos elementos permitem-nos
controlar a rea ocupada e escolher a localizao com rigor.

bottom Define a distncia (para
baixo ou para cima) a que
deve ficar o limite de baixo
de um elemento
relativamente ao limite de
baixo do elemento que o
contm.
auto
%
comprimento
CSS2
clip Define a forma de um
elemento. O elemento
recortado na forma
desejada e depois
mostrado.
shape
auto
CSS2
left Define a distncia (para a
esquerda ou para a direita)
a que deve ficar o limite
esquerdo de um elemento
relativamente ao limite
esquerdo do elemento que
o contm.
auto
%
comprimento
CSS2
overflow Define o que acontece
quando o contedo de um
elemento excede a sua
rea.
visible
hidden
scroll
auto
CSS2
right Define a distncia (para a
direito de um elemento
direito do elemento que o
contm.
auto
%
comprimento
CSS2

top Define a distncia (para
deve ficar o limite de cima
de um elemento
cima do elemento que o
contm.
auto
%
comprimento
CSS2
vertical-align Define o alinhamento
vertical de um elemento.
baseline
sub
super
top
text-top
middle
bottom
text-bottom
comprimento
%
CSS1
z-index Define a ordem de
apresentao (prioridade)
dos elementos no caso de
existir sobreposio entre
eles.
auto
nmero
CSS2

Exemplos de Aplicao

Define a posio do elemento relativamente ao topo e ao lado esquerdo da
pgina

<ht ml >
<head>
h1
{
posi t i on: absol ut e;
t op: 100px;
l ef t : 100px
}

p
{
t op: 200px;
l ef t : 100px
}
</ st yl e>
</ head>
<body>
<h1>UmCabeal ho</ h1>

O cabeal ho est col ocado 100px abai xo do t opo do
document o e 100px di r ei t a da ext r emi dade
esquer da. O par gr af o est col ocado 200px abai xo
do t opo do document o e 100px di r ei t a da ext r emi dade
esquer da.

</ body>
</ ht ml >



Alinhar uma imagem na vertical

<ht ml >
<head>
i mg. t op { ver t i cal - al i gn: t ext - t op }
i mg. bot t om { ver t i cal - al i gn: t ext - bot t om}
</ st yl e>
</ head>
<body>
I st o uma i magem
dent r o de umpar gr af o.


I st o a mesma i magem
dent r o de out r o par gr af o.

</ body>
</ ht ml >

O que deve ser feito quando o contedo de um elemento excede a sua rea

<ht ml >
<head>
di v
{

wi dt h: 150px;
hei ght : 150px;
over f l ow: scr ol l
}
</ st yl e>
</ head>
<body>
A pr opr i edade " over f l ow" f az comque o br owser col oque bar r as
de desl ocament o numel ement o par a que sej a poss vel most r ar
t odo o seu cont edo mesmo que el e ocupe uma r ea mai or do que
aquel a que l he est dest i nada.

<di v>
Nest e caso o cont edo no cabe numquadr ado com
150px de l ado, sendo assi m, s col ocando
bar r as de desl ocament o que ser emos capazes de v- l o t odo. 
Exper i ment e mudar o val or da pr opr i edade " over f l ow" par a:
vi si bl e, hi dden, aut o, ou i nher i t e vej a o que acont ece. O
val or por omi sso vi si bl e.
</ body>
</ ht ml >

Colocar um elemento " na frente" de outro elemento

<ht ml >
<head>
i mg. x
{
l ef t : 0;
t op: 0;
z- i ndex: 1
}
</ st yl e>
</ head>
<body>
<h1>I st o umcabeal ho</ h1>

O val or por omi sso da pr opr i edade z- i ndex 0.
A i magemt emo z- i ndex comval or 1, dest e modo,
a sua pr i or i dade super i or . Por i sso el a
apar ece f r ent e do r est ant e cont edo.

</ body>

</ ht ml >

Definir a forma de um elemento

<ht ml >
<head>
i mg
{
cl i p: r ect ( 0 200 100 0)
}
</ st yl e>
</ head>
<body>
A pr opr i edade " CLI P" per mi t e- nos cor t ar a i magem.
Nest e exempl o as di menses da i magemso 300x200,
mas os val or es dados pr opr i edade " CLI P" f azemcom
que apenas sej a apr esent ada uma seo com200x100.
Not e que a i magemocupa t odo o seu espao or i gi nal .


</ body>
</ ht ml >


14. Formatao de listas

As propriedades relativas s listas permitem-nos controlar diversos aspectos da
apresentao de uma lista. Entre outros aspectos podemos escolher os smbolos para
os marcadores, usar uma imagem como marcador, e escolher a posio dos
marcadores.

14.1 Propriedades das Listas:

list-style Este propriedade oferece-
nos uma forma abreviada
para definir numa nica
declarao todas as
propriedades relativas a
uma lista.
list-style-type
list-style-position
list-style-image
CSS1
list-style-image Define uma imagem como
marcador de item numa
lista
none
url
CSS1
list-style-position Define a posio em que o
marcador deve ser
colocado
inside
outside
CSS1
list-style-type Define o tipo de marcador a
usar
none
disc
circle
square
decimal
lower-roman
upper-roman
lower-alpha
upper-alpha
CSS1
marker-offset auto
comprimento
CSS2

Exemplos de Aplicao

Smbolos disponveis para marcadores de item em listas no ordenadas

<ht ml >
<head>
ul . di sc { l i st - st yl e- t ype: di sc }
ul . ci r cl e { l i st - st yl e- t ype: ci r cl e }
ul . squar e { l i st - st yl e- t ype: squar e }
ul . none { l i st - st yl e- t ype: none }
</ st yl e>
</ head>
<body>
<ul cl ass=" di sc" >
<l i >Ci cl et es</ l i >
<l i >Bal i nhas</ l i >
<l i >Pi r ul i t os</ l i >
</ ul >
<ul cl ass=" ci r cl e" >

</ ul >
<ul cl ass=" squar e" >
</ ul >
<ul cl ass=" none" >
</ ul >
</ body>
</ ht ml >

Smbolos disponveis para marcadores de item em listas ordenadas

<ht ml >
<head>
ol . deci mal { l i st - st yl e- t ype: deci mal }
ol . l r oman { l i st - st yl e- t ype: l ower - r oman }
ol . ur oman { l i st - st yl e- t ype: upper - r oman }
ol . l al pha { l i st - st yl e- t ype: l ower - al pha }
ol . ual pha { l i st - st yl e- t ype: upper - al pha }
</ st yl e>
</ head>
<body>
<ol cl ass=" deci mal " >
</ ol >

<ol cl ass=" l r oman" >
</ ol >

<ol cl ass=" ur oman" >

</ ol >

<ol cl ass=" l al pha" >
</ ol >

<ol cl ass=" ual pha" >
</ ol >
</ body>
</ ht ml >

Uma imagem como marcador de item numa lista

<ht ml >
<head>
ul { l i st - st yl e- i mage: ur l ( " set a. gi f " ) }
</ st yl e>
</ head>
<body>
<ul >
</ ul >
</ body>
</ ht ml >



Controle da posio do marcador

<ht ml >
<head>
</ head>
<body>
Est a l i st a t emo est i l o " i nsi de" : 
<ul st yl e=" l i st - st yl e- posi t i on: i nsi de" >
</ ul >
Est a l i st a t emo est i l o " out si de" : 
<ul st yl e=" l i st - st yl e- posi t i on: out si de" >
</ ul >
</ body>
</ ht ml >

Todas as propriedades numa nica declarao

<ht ml >
<head>
ul { l i st - st yl e: squar e i nsi de ur l ( " set a. gi f " ) }
</ st yl e>
</ head>


<body>
<ul >
</ ul >
</ body>
</ ht ml >

15. Propriedades de classificao

As propriedades de classificao permitem-nos controlar a forma como os
elementos so apresentados: escolher o local onde uma imagem deve aparecer,
posicionar os elementos de forma absoluta ou em relao uns aos outros e controlar a
sua visibilidade.

15.1 Propriedades de Classificao:

clear Define os lados de um
elemento junto aos quais
no so permitidos
elementos flutuantes
left
right
both
none
CSS1
cursor Especifica o tipo de cursor
a apresentar
url
auto
crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
CSS2
display Indica se e como um
elemento deve ser
none
inline
CSS2

apresentado block
list-item
run-in
compact
marker
table
inline-table
table-row-group
table-header-group
table-footer-group
table-row
table-column-group
table-column
table-cell
table-caption
float Define o lugar onde uma
imagem ou elemento de
bloco deve aparecer dentro
de outro elemento
left
right
none
CSS1
position Coloca um elemento numa
posio que pode ser
esttica, relativa, absoluta
ou fixa
static
relative
absolute
fixed
CSS2
visibility Indica se um elemento deve
estar visvel ou invisvel
visible
hidden
collapse
CSS2

Exemplos de Aplicao

Como deve ser apresentado um elemento?

<ht ml >
<head>
di v { di spl ay: none }
p { di spl ay: i nl i ne }
</ st yl e>
</ head>
<body>
<di v>
O cont edo dest e el ement o &l t ; di v&gt ;
no ser apr esent ado pel o br owser .
</ di v>

I st o umpar gr af o.

Est e out r o par gr af o est col ado ao par gr af o ant er i or por que
a f ol ha de est i l os CSS est abel ece que os par gr af os nor mai s
devemt er uma apr esent ao ( " di spl ay" ) do t i po " i nl i ne" .

</ body>
</ ht ml >



Definir o local em que uma imagem deve ser colocada dentro de outro elemento

<ht ml >
<head>
i mg { f l oat : r i ght }
</ st yl e>
</ head>
<body>

O val or " r i ght " dado pr opr i edade " f l oat " f az com
que a i magemf l ut ue di r ei t a do r est ant e cont edo do
par gr af o.

</ body>
</ ht ml >

Posicionar um elemento relativamente sua posio normal

<ht ml >
<head>
h1. ex1
{
posi t i on: r el at i ve;
l ef t : 20px
}
h1. ex2
{
posi t i on: r el at i ve;
l ef t : - 20px
}
</ st yl e>

</ head>
<body>
<h1 cl ass=" ex1" >Cabeal ho desl ocado 20px par a a di r ei t a</ h1>
<h1 cl ass=" ex2" >Cabeal ho desl ocado 20px par a a esquer da</ h1>
O posi ci onament o r el at i vo f az desl ocar os el ement os
r el at i vament e quel a que ser i a a sua posi o nor mal .

" l ef t : 20px" soma 20 pi xel s pr opr i edade " LEFT"
do el ement o, desl ocando- o par a a di r ei t a.

" l ef t : - 20px" subt r ai 20 pi xel s pr opr i edade " LEFT"
do el ement o, desl ocando- o par a a esquer da.

</ body>
</ ht ml >

Posicionar um elemento com um valor absoluto

<ht ml >
<head>
h1. x
{
l ef t : 100px;
t op: 150px
}
</ st yl e>
</ head>
<body>
<h1 cl ass=" x" >Cabeal ho composi ci onament o absol ut o</ h1>
O posi ci onament o absol ut o per mi t e- nos col ocar
umel ement o no pont o que qui ser mos sobr e a pgi na.

A pr opr i edade " LEFT" col oca o cabeal ho a 100 pi xel s
de di st nci a do ext r emo esquer do da pgi na e a
pr opr i edade " TOP" col oca- o a 150 pi xel s de di st nci a
do t opo da pgi na.

</ body>
</ ht ml >



Como tornar um elemento invisvel

<ht ml >
<head>
h1. st l 1 { vi si bi l i t y: vi si bl e }
h1. st l 2 { vi si bi l i t y: hi dden }
</ st yl e>
</ head>
<body>
<h1 cl ass=" st l 1" >Cabeal ho 1</ h1>
Consegue ver o cabeal ho 2?
</ body>
</ ht ml >

Alterar o smbolo mostrado pelo cursor

<ht ml >
<head>
</ head>
<body>
Passe como pont ei r o do mouse sobr e as pal avr as mai s abai xo e
vej a como el e muda de f or ma.


Aut o 
Cr osshai r 
Def aul t 
Poi nt er 
Move 
e- r esi ze 
ne- r esi ze 
nw- r esi ze 
n- r esi ze 
se- r esi ze 
sw- r esi ze 
s- r esi ze 
w- r esi ze 
t ext 
wai t 
hel p
</ body>
</ ht ml >

16. Pseudo-classes

As pseudo-classes permitem-nos associar efeitos especiais a seletores CSS ou
a partes de seletores.

16.1 Sintaxe

A sintaxe das pseudo-classes a seguinte:

sel et or : pseudo- cl asse { pr opr i edade: val or }

As classes CSS tambm podem ser utilizadas com pseudo-classes:

sel et or . cl asse: pseudo- cl asse { pr opr i edade: val or }


16.2 Pseudo-classes para ligaes

Aviso: Os padres do W3C dizem que a pseudo-classe hover deve funcionar
com todos os elementos que possuam contedo, mas o MSIE contm um bug que faz
com que ele s funcione com o elemento <a>

As ligaes (links) em estado ativo, j visitadas, no visitadas, ou que se
encontram sob o ponteiro do mouse podem ser apresentadas com cores e estilos
diferentes:

a: l i nk { col or : #FF0000 } / * l i nk ai nda no vi si t ado */
a: vi si t ed { col or : #00FF00 } / * l i nk j vi si t ado */
a: hover { col or : #FF00FF } / * l i nk que est sob o pont ei r o do mouse */
a: act i ve { col or : #0000FF } / * l i nk sel eci onado */

Notas:

Para funcionar bem, a:hover deve ser definido depois de a:link e a:visited
estarem definidos.
Para funcionar bem, a:active deve ser definido depois de a:hover.
Os nomes das pseudo-classes so insensveis ao tipo de letra. Pode-se usar
maisculas ou minsculas sem distino.

As pseudo-classes podem ser combinadas com classes CSS definidas na
pgina:

a. r ed: vi si t ed { col or : #FF0000 }

<a cl ass=" r ed" hr ef =" pagi na. ht ml " >uma pgi na<a>

Se a ligao do exemplo anterior j tiver sido clicada (visitada) o texto
aparecer na cor vermelha.

16.3 A pseudo-classe :first-child

Aviso: Esta pseudo-classe ainda no bem suportada pelos browsers. No a
utilize porque no ir obter os resultados que pretende.

A pseudo-classe :first-child afeta o primeiro dos elementos (primeiro
descendente) que se encontra dentro de um outro elemento.

Neste exemplo o seletor afeta o elemento p que aparece em primeiro lugar
dentro de um elemento div, deslocando-o um pouco mais para a direita relativamente
aos restantes:

di v: f i r st - chi l d p { t ext - i ndent : 25px }

No cdigo seguinte, o seletor que acabamos de definir afeta o primeiro
pargrafo que est dentro do elemento div:

<di v>

Est e o pr i mei r o par gr af o.
Est e par gr af o ser desl ocado par a a di r ei t a.



Est e o segundo par gr af o.
Est e par gr af o no ser desl ocado par a a di r ei t a.

</ di v>

Mas o pargrafo do cdigo HTML seguinte no ser afetado porque no o
primeiro descendente do elemento div:

<di v>
<h3>Cabeal ho</ h3>

Est e o pr i mei r o par gr af o.
Est e par gr af o no ser desl ocado par a a di r ei t a
por que no o pr i mei r o descendent e do el ement o di v.

</ di v>

No exemplo seguinte o seletor afetar um elemento que aparea em
primeiro lugar (primeiro descendente) dentro de um elemento p, fazendo com que o
seu contedo seja escrito em negrito:

p: f i r st - chi l d em { f ont - wei ght : bol d }

Por exemplo, o elemento no HTML seguinte o primeiro descendente do
pargrafo:

Hr cul es f or t e e cor aj oso. 

No exemplo seguinte o seletor afetar um elemento <a> que aparea em
primeiro lugar (primeiro descendente) dentro de um elemento qualquer, fazendo com
que a sua propriedade text-decoration tenha o valor none:

a: f i r st - chi l d { t ext - decor at i on: none }

Se aplicarmos este estilo ao exemplo seguinte iremos ver que o primeiro
elemento <a> do HTML o primeiro descendente do pargrafo e por isso no vai estar
sublinhado, mas o segundo elemento <a> vai estar sublinhado:


Vi si t e o <a hr ef =" ht t p: / / www. w3. or g" >W3C</ a>
e consul t e as r ecomendaes par a CSS.
Vi si t e o <a hr ef =" ht t p: / / www. w3. or g" >W3C</ a>
e consul t e as r ecomendaes par a o HTML.


16.4 A pseudo-classe :lang

A pseudo-classe :lang permite ao autor especificar a lngua usada num
documento ou num determinado elemento.

No exemplo seguinte, define-se um tipo de aspas diferentes para o texto que
estiver escrito em francs:

ht ml : l ang( f r ) { quot es: ' ' ' ' }

No prximo exemplo, define-se o tipo de aspas a usar com o elemento
blockquote:

bl ockquot e: l ang( f r ) { quot es: ' ' ' ' }


16.5 Lista de pseudo-classes

Pseudo-classe W3C Finalidade
active CSS1 Define o estilo a aplicar a um link selecionado
hover CSS1 Define o estilo a aplicar a um link quando o ponteiro do
mouse est sobre ele
link CSS1 Define o estilo a aplicar a um link que ainda no foi
visitado
visited CSS1 Define o estilo a aplicar a um link que j foi visitado
first-child CSS2 Define o estilo as aplicar ao primeiro dos elementos
que se encontram dentro de um outro elemento
(primeiro descendente.)
lang CSS2 Permite definir atributos estilsticos diferentes para
aplicar ao texto escrito numa determinada lngua

Exemplos de Aplicao

Dar cores diferentes a uma ligao

<ht ml >
<head>
a: l i nk { col or : #FF0000 }
a: vi si t ed { col or : #00FF00 }
a: hover { col or : #FF00FF }
a: act i ve { col or : #0000FF }
</ st yl e>
</ head>
<body>

<a hr ef =" ex_css. ht m" >I st o uma l i gao</ a>


Not a: a: hover deve ser def i ni do DEPOI S de a: l i nk e de
a: vi si t ed j est ar emdef i ni dos par a que t udo f unci one bem.


Not a: a: act i ve deve ser def i ni do DEPOI S de a: hover
j est ar def i ni do par a que t udo f unci one bem.

</ body>
</ ht ml >


Dar outros estilos a uma ligao

<ht ml >
<head>
a. st l 1: l i nk { col or : #f f 0000 }
a. st l 1: vi si t ed { col or : #0000f f }
a. st l 1: hover { col or : #f f cc00 }

a. st l 2: hover { f ont - si ze: 150%}

a. st l 3: hover { backgr ound: #66f f 66 }

a. st l 4: hover { f ont - f ami l y: f i xedsys }

a. st l 5: l i nk { col or : #f f 0000; t ext - decor at i on: none }
a. st l 5: vi si t ed { col or : #0000f f ; t ext - decor at i on: none }
a. st l 5: hover { t ext - decor at i on: under l i ne }
</ st yl e>
</ head>
<body>

Passe como pont ei r o do mouse sobr e as l i gaes e
vej a como el as r eagemde manei r a di f er ent e.


<a cl ass=" st l 1" hr ef =" ex_css. ht m" >Est a muda de cor </ a> 
<a cl ass=" st l 2" hr ef =" ex_css. ht m" >Est a muda o t amanho das l et r as</ a> 
<a cl ass=" st l 3" hr ef =" ex_css. ht m" >Est a muda a cor de f undo</ a> 
<a cl ass=" st l 4" hr ef =" ex_css. ht m" >Est a muda o t i po de l et r a</ a> 
<a cl ass=" st l 5" hr ef =" ex_css. ht m" >Est a muda a decor ao do t ext o</ a>

</ body>
</ ht ml >

17. Pseudo-elementos

Os pseudo-elementos so usados em CSS para adicionar efeitos a alguns
seletores ou a partes de seletores.


17.1 Sintaxe

A sintaxe dos pseudo-elementos a seguinte:

sel et or : pseudo- el ement o { pr opr i edade: val or }

As classes CSS tambm podem ser utilizadas com pseudo-elementos:

sel et or . cl asse: pseudo- el ement o { pr opr i edade: val or }

17.2 Uma formatao especial para a primeira linha

O pseudo-elemento "first-line" usa-se para adicionar estilos especiais
primeira linha de um texto:

<ht ml >
<head>
p { f ont - si ze: 12pt }
p: f i r st - l i ne { col or : #0000FF; f ont - var i ant : smal l - caps }
</ st yl e>
</ head>
<body>

Text o que ocupa duas ou mai s l i nhas 
A pr i mei r a l i nha t emuma f or mat ao especi al
dada pel o pseudo- el ement o f i r st - l i ne.

</ body>
</ ht ml >

No exemplo anterior o browser apresenta a primeira linha formatada de acordo
com o pseudo-elemento "first-line". Se no forarmos a quebra de linha o local em que
o browser muda de linha depende do tamanho da janela.

Notas:

O pseudo-elemento "first-line" s pode ser usado em elementos de bloco.

As propriedades seguintes so aplicveis ao pseudo-elemento "first-line":

propriedades do tipo de letra (font)
propriedades de cor
propriedades do fundo (background)

espao entre as palavras (word-spacing)
espao entre as letras (letter-spacing)
decorao do texto (text-decoration)
alinhamento vertical (vertical-align)
transformao do texto (text-transform)
altura das linhas (line-height)
clear

O MSIE 5.0 no suporta o pseudo-elemento "first-line".

17.3 O pseudo-elemento first-letter

O pseudo-elemento "first-letter" usa-se para adicionar estilos especiais
primeira letra de um texto:

p: f i r st - l et t er { f ont - si ze: 200%; f l oat : l ef t }

Pr i mei r as pal avr as de umt ext o ( . . . ) 

O output apresentar a primeira letra do pargrafo com o dobro do tamanho
(24pt):

<ht ml >
<head>
p: f i r st - l et t er { f ont - si ze: 200%; f l oat : l ef t }
</ st yl e>
</ head>
<body>

A pr i mei r a l et r a dest e par gr af o mai or do que as r est ant es.


A pr i mei r a l et r a dest e par gr af o mai or do que as r est ant es.

</ body>
</ ht ml >

Notas:

O MSIE 5.0 no suporta o pseudo-elemento "first-letter".
O pseudo-elemento "first-letter" s pode ser usado em elementos de bloco.
As propriedades seguintes so aplicveis ao pseudo-elemento "first-letter":

o propriedades do tipo de letra (font)
o propriedades de cor
o propriedades do fundo (background)
o propriedades das margens
o propriedades do espao entre o texto e a fronteira
o propriedades das linhas de fronteira
o decorao do texto (text-decoration)
o alinhamento vertical (apenas se 'float' tiver o valor 'none')
o transformao do texto (text-transform)
o altura das linhas (line-height)
o float
o clear

17.4 Pseudo-elementos em classes CSS

Os pseudo-elementos podem combinados com classes CSS:

p. ar t i go: f i r st - l et t er { col or : #FF0000 }

Umpar gr af o de umar t i go

O cdigo anterior faria com que a primeira letra de cada pargrafo que tenha
class="artigo" seja escrita seja vermelho. Os pargrafos que no tenham esta classe
no so afetados.

17.5 Vrios pseudo-elementos

Podemos combinar vrios pseudo-elementos para controlar a apresentao de
um elemento:

p: f i r st - l et t er { col or : r ed; f ont - si ze: 200%}
p: f i r st - l i ne { col or : bl ue }

Pr i mei r as pal avr as de umar t i go

No output teremos a primeira letra de cada pargrafo com o dobro do tamanho
(24pt) e cor vermelha. Para alm disso as restantes letras da primeira linha tero cor
azul. O resto do pargrafo ser normal.

17.6 Os pseudo-elementos :before e :after

Aviso: Estes pseudo-elementos so bem suportados pelo Netscape 7/Mozilla+
e pelo Opera 7.2+ mas no pelo MSIE.

O pseudo-elemento ":before" pode ser usado para inserir algum contedo
antes de um elemento.

O estilo apresentado em baixo insere uma imagem com uma seta antes da
ocorrncia de um cabealho de nvel 4.

<ht ml >
<head>
h4: bef or e { cont ent : ur l ( set a. gi f ) }
</ st yl e>
</ head>

<body>
<h4>Est e cabeal ho t emuma set a</ h4>
</ body>
</ ht ml >

Aviso: Estes pseudo-elementos so bem suportados pelo Netscape 7/Mozilla+
e pelo Opera 7.2+ mas no pelo MSIE.

O pseudo-elemento ":after" pode ser usado para inserir algum contedo depois
de um elemento.

O estilo apresentado abaixo insere uma imagem com uma seta depois da
ocorrncia de um cabealho de nvel 4.

<ht ml >
<head>
h4: af t er { cont ent : ur l ( set a. gi f ) }
</ st yl e>
</ head>
<body>
<h4>Est e cabeal ho t emuma set a</ h4>
</ body>
</ ht ml >

17.7 Lista de pseudo-elementos

Pseudo-elementos W3C Finalidade
first-letter CSS1 Define um estilo especial para a primeira letra de
um texto.
first-line CSS1 Define um estilo especial para a primeira linha de

um texto.
before CSS2 Insere algum contedo antes de um elemento
after CSS2 Insere algum contedo depois de um elemento

Exemplos de Aplicao

Dar um estilo especial primeira letra de um texto

<ht ml >
<head>
di v: f i r st - l et t er
{
col or : r ed;
f ont - si ze: xx- l ar ge
}
</ st yl e>
</ head>
<body>
Not a: O I nt er net Expl or er 5. 0 no
supor t a o pseudo- el ement o " f i r st - l et t er " . 
<di v>
O pseudo- el ement o " f i r st - l et t er " per mi t e dar umest i l o
especi al ao t ext o f azendo comque a pr i mei r a l et r a de
umbl oco t enha umest i l o di f er ent e.
</ di v>
</ body>
</ ht ml >

Dar um estilo especial primeira linha de um texto

<ht ml >
<head>
di v: f i r st - l i ne
{
col or : #f f 0000;
f ont - var i ant : smal l - caps
}
</ st yl e>
</ head>
<body>
Not a: O I nt er net Expl or er 5. 0 no
supor t a o pseudo- el ement o " f i r st - l i ne" . 
<di v>
O pseudo- el ement o " f i r st - l i ne" per mi t e dar umest i l o especi al
ao t ext o f azendo comque a pr i mei r a l i nha de umbl oco

t enha umest i l o di f er ent e das r est ant es.
</ di v>
</ body>
</ ht ml >

18. Tipos de media

A possibilidade que nos dada pelos estilos CSS para escolher os estilos a
aplicar aos diversos tipos de media permite-nos especificar com preciso a forma
como os documentos so apresentados aos usurios. Podemos definir estilos para
serem aplicados quando as pginas so apresentadas graficamente num browser,
impressas sobre papel, ou lidas em voz alta num browser capaz de sintetizar voz.

Algumas propriedades definidas em CSS so aplicveis apenas a um tipo de
media. Por exemplo, a propriedade "voice-family" s faz sentido quando a pgina
apresentada por um browser capaz de sintetizar voz. J a propriedade "font-size" s
faz sentido quando a pgina apresentada graficamente num browser ou impressa
sobre papel, provavelmente com valores diferentes em cada um dos casos porque a
impresso em papel normalmente faz-se com um tipo de letra menor.

18.1 A Regra @media

A regra @media permite-nos definir numa mesma folha de estilos,
propriedades diferentes para serem aplicadas a tipos de media diferentes.

Os estilos definidos no exemplo seguinte dizem ao browser para apresentar o
texto na tela com o tipo de letra Verdana e com 14px de tamanho. Quando a pgina
impressa deve ser usado o tipo de letra Times com o tamanho 10pt. Tanto na tela
como na impresso o texto estar em negrito (bold):

<ht ml >
<head>
<st yl e>
@medi a scr een / * est i l os a apl i car na t el a ( scr een) */
{
p. t est { f ont - f ami l y: ver dana, sansser i f ; f ont - si ze: 14px }
}
@medi a pr i nt / * est i l os par a i mpr esso ( pr i nt ) */
{
p. t est { f ont - f ami l y: t i mes, ser i f ; f ont - si ze: 10pt }
}
@medi a scr een, pr i nt / * est i l os par a t el a e par a i mpr esso */
{
p. t est { f ont - wei ght : bol d }
}

</ st yl e>
</ head>

<body>

. . . .

</ body>
</ ht ml >

18.2 Os vrios tipos de media

Media Type Descrio
all Usa-se para definir estilos para todos os tipos de media
aural Usa-se para definir estilos para sintetizadores de voz
braille Usa-se para definir estilos a aplicar a texto escrito em braille
embossed Define estilos para textos a imprimir em impressoras braille
handheld Usa-se para definir estilos para pequenos aparelhos mveis (PDAs,
telefones celulares, ...)
print Define estilos para quando a pgina impressa sobre papel
projection Define estilos para quando a pgina apresentada num projetor
(slides, por exemplo)
screen Estilos para apresentao na tela de computador
tty Estilos para apresentao em terminais com recursos limitados
(caracteres com tamanho fixo e outras limitaes)
tv Define estilos a aplicar quando a pgina apresentada num
televisor ou aparelho semelhante


PARTE III: Material de Referncia Rpida

19. Listagem das propriedades definidas em CSS

19.1 Fundos (background)

background Oferece-nos uma forma
todas as propriedades do
fundo de um elemento
numa nica declarao.
background-color
background-image
background-repeat
background-
attachment
background-position
CSS1
background-
attachment
A propriedade background-
attachment indica se a
imagem de fundo deve
permanecer imvel na
janela do browser ou se
acompanha o deslizamento
(scroll) da pgina.
scroll
fixed
CSS1
background-color Define a cor de fundo de
um elemento.
color-rgb
color-hex
color-name
transparent
CSS1
background-image Define uma imagem para
ser usada como fundo no
elemento
url
none
CSS1
background-position Define o local onde se
comea a desenhar a
imagem de fundo.
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x-% y-%
x-pos y-pos
CSS1
background-repeat Estabelece se a imagem de
fundo deve repetir-se
(formando um mosaico) ou
no e as direes da
repetio.
repeat
repeat-x
repeat-y
no-repeat
CSS1

19.2 Linhas de fronteira (border)

border Oferece uma forma
numa nica declarao
todos os parmetros
border-width
border-style
border-color
CSS1

relativos s linhas de
fronteira.
border-bottom Oferece-nos uma forma
todas as propriedades da
linha de fronteira do lado de
baixo numa nica
declarao.
border-bottom-width
border-style
border-color
CSS1
border-bottom-color Define a cor da linha de
fronteira de baixo
border-color CSS2
border-bottom-style Define o estilo da linha de
fronteira de baixo
border-style CSS2
border-bottom-width Define a espessura da linha
de fronteira de baixo
thin
medium
thick
comprimento
CSS1
border-color Define a cor das quatro
cor CSS1
border-left Oferece-nos uma forma
abreviada para
numa nica operao.
border-left-width
border-style
border-color
CSS1
border-left-color Define a cor da linha de
fronteira do lado esquerdo.
border-color CSS2
border-left-style Define o estilo da linha de
fronteira do lado esquerdo.
border-style CSS2
border-left-width Define a espessura da linha
de fronteira do lado
esquerdo.
thin
medium
thick
comprimento
CSS1
border-right Oferece-nos uma forma
abreviada para
numa nica declarao.
border-right-width
border-style
border-color
CSS1
border-right-color Define a cor da linha de
fronteira do lado direito.
border-color CSS2
border-right-style Define o estilo da linha de
fronteira do lado direito.
border-style CSS2
border-right-width Define a espessura da linha
de fronteira do lado direito.
thin
medium
thick
comprimento
CSS1
border-style A propriedade border-style
define o estilo das quatro
none
hidden
dotted
dashed
solid
CSS1

double
groove
ridge
inset
outset
border-top Oferece-nos uma forma
abreviada para
fronteira do lado de cima
numa nica declarao.
border-top-width
border-style
border-color
CSS1
border-top-color Define a espessura da linha
de fronteira superior.
border-color CSS2
border-top-style Define o estilo da linha de
fronteira superior.
border-style CSS2
border-top-width Define a espessura da linha
de fronteira superior.
thin
medium
thick
comprimento
CSS1
border-width Oferece-nos uma forma
abreviada para definirmos
as espessuras de todas as
thin
medium
thick
comprimento
CSS1

19.3 Propriedades de classificao

clear Define os lados de um
elemento dentro do qual
no so permitidos
elementos flutuantes
left
right
both
none
CSS1
cursor Especifica o tipo de cursor
a apresentar
url
auto
crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
CSS2
display Indica se um elemento deve
ser apresentado e a forma
como deve ser
apresentado.
none
inline
block
list-item
CSS1

run-in
compact
marker
table
inline-table
table-row-group
table-header-group
table-footer-group
table-row
table-column-group
table-column
table-cell
table-caption
float Define o lugar onde uma
imagem ou bloco deve
aparecer dentro de outro
elemento.
left
right
none
CSS1
position Coloca um elemento numa
destas posies: esttica,
relativa, absoluta ou fixa.
static
relative
absolute
fixed
CSS2
visibility Indica se um elemento deve
estar visvel ou invisvel.
visible
hidden
collapse
CSS2

19.4 Controle dos tamanhos dos elementos

height Define a altura de um
elemento
auto
comprimento
%
CSS1
line-height Define a distncia entre as
linhas
normal
nmero
comprimento
%
CSS1
max-height Define a altura mxima de
um elemento
none
comprimento
%
CSS2
max-width Define a largura mxima de
um elemento
none
comprimento
%
CSS2
min-height Define a altura mnima de
um elemento
comprimento
%
CSS2
min-width Define a largura mnima de
um elemento
comprimento
%
CSS2
width Define a largura de um
elemento
auto
%
comprimento
CSS1

19.5 Tipos de letra (font)


font Este propriedade oferece-
declarao todas as
propriedades relativas ao
tipo de letra.
font-style
font-variant
font-weight
font-size/line-height
font-family
caption
icon
menu
message-box
small-caption
status-bar
CSS1
font-family A propriedade font-family
consiste numa lista com os
tipos de letra que o browser
pode escolher para
escrever os textos. A lista
est ordenada de forma
prioritria: a primeira
escolha aparece primeiro, a
seguir vem a segunda
escolha e assim
sucessivamente. O browser
escolhe o primeiro tipo que
capaz de usar. Os nomes
dos tipos de letra podem
ser nomes de famlia ou
nomes genricos.
family-name
generic-family
CSS1
font-size Define o tamanho a aplicar
a um tipo de letra.
xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
comprimento
%
CSS1
font-size-adjust Se o tipo de letra (font)
escolhido no estiver
disponvel, o browser v-se
obrigado a usar um outro
tipo diferente. A
propriedade font-size-adjust
especifica o "aspect value"
do tipo de letra escolhido
para que o browser possa
substitu-lo por um outro
tipo que esteja acessvel
preservando a altura da
letra "x" e mantendo a
legibilidade do texto.
none
nmero
CSS2
font-stretch A propriedade font-stretch
provoca uma expanso ou
normal
wider
CSS2

uma contrao horizontais
narrower
ultra-condensed
extra-condensed
condensed
semi-condensed
semi-expanded
expanded
extra-expanded
ultra-expanded
font-style Define o estilo a aplicar ao
tipo de letra.
normal
italic
oblique
CSS1
font-variant Escreve o texto usando um
tipo de letra "small-caps" ou
o tipo normal.
normal
small-caps
CSS1
font-weight Define a espessura do trao
com que so desenhadas a
letras.
normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900
CSS1

19.6 Gerar contedos

content Gera contedos e insere-os
no documento. Usa-se em
conjunto com os pseudo-
elementos :before e :after
string
url
counter(name)
counter(name, list-
style-type)
counters(name, string)
counters(name, string,
list-style-type)
attr(X)
open-quote
close-quote
no-open-quote
no-close-quote
CSS2
counter-increment Define quanto se deve
incrementar o contador por
cada ocorrncia de um
seletor.
none
nmero identificador
CSS2
counter-reset Define o valor a dar ao
contador sempre que
ocorre um seletor.
none
nmero identificador
CSS2
quotes Define o estilo das aspas. none CSS2

string string

19.7 Listas e marcadores

list-style Este propriedade oferece-
declarao todas as
propriedades relativas a
uma lista.
list-style-type
list-style-position
list-style-image
CSS1
list-style-image Define uma imagem como
marcador de item numa
lista
none
url
CSS1
list-style-position Define o local em que o
marcador deve ser
colocado na lista.
inside
outside
CSS1
list-style-type Define o tipo de marcador a
usar.
none
disc
circle
square
decimal
decimal-leading-zero
lower-roman
upper-roman
lower-alpha
upper-alpha
lower-greek
lower-latin
upper-latin
hebrew
armenian
georgian
cjk-ideographic
hiragana
katakana
hiragana-iroha
katakana-iroha
CSS1
marker-offset auto
comprimento
CSS2

19.8 Margens

margin Propriedade que nos
oferece uma forma
propriedades relativas s
quatro margens de um
elemento.
margin-top
margin-right
margin-bottom
margin-left
CSS1
margin-bottom Define a margem inferior de
um elemento.
auto
comprimento
CSS1

%
margin-left Define a margem esquerda
de um elemento.
auto
comprimento
%
CSS1
margin-right Define a margem direita de
um elemento.
auto
comprimento
%
CSS1
margin-top Define a margem superior
de um elemento.
auto
comprimento
%
CSS1

19.9 Linhas de contorno

outline Oferece-nos uma forma
abreviada para definir todas
as propriedades do
contorno numa nica
declarao.
outline-color
outline-style
outline-width
CSS2
outline-color Define a cor do contorno de
um elemento.
color
invert
CSS2
outline-style Define o estilo do contorno
de um elemento.
none
dotted
dashed
solid
double
groove
ridge
inset
outset
CSS2
outline-width Define a espessura da linha
de contorno de um
elemento
thin
medium
thick
comprimento
CSS2

19.10 Espao em branco dentro de um elemento (padding)

padding Propriedade que nos
oferece uma forma
nica declarao todos os
aspectos dos
espaamentos entre o
contedo de um elemento e
os seus limites.
padding-top
padding-right
padding-bottom
padding-left
CSS1
padding-bottom Define o espao que separa
do seu limite inferior.
comprimento
%
CSS1
padding-left Define o espao que separa
do seu limite esquerdo.
comprimento
%
CSS1

padding-right Define o espao que separa
do seu limite direito.
comprimento
%
CSS1
padding-top Define o espao que separa
do seu limite superior.
comprimento
%
CSS1

19.11 Posicionamento

bottom Define a distncia (para
deve ficar o limite de baixo
de um elemento
baixo do elemento que o
contm.
auto
%
comprimento
CSS2
clip Define a forma de um
elemento. O elemento
recortado na forma
desejada e depois
mostrado.
shape
auto
CSS2
left Define a distncia (para a
esquerdo de um elemento
esquerdo do elemento que
o contm.
auto
%
comprimento
CSS2
overflow Define o que acontece
quando o contedo de um
elemento excede a sua
rea.
visible
hidden
scroll
auto
CSS2
right Define a distncia (para a
direito de um elemento
direito do elemento que o
contm.
auto
%
comprimento
CSS2
top Define a distncia (para
deve ficar o limite de cima
de um elemento
cima do elemento que o
contm.
auto
%
comprimento
CSS2
vertical-align Define o alinhamento
vertical de um elemento.
baseline
sub
super
top
text-top
middle
CSS1

bottom
text-bottom
comprimento
%
z-index Define a ordem de
apresentao (prioridade)
dos elementos no caso de
existir sobreposio entre
eles.
auto
nmero
CSS2

19.12 Formatao de tabelas

border-collapse Define o modelo da linha de
fronteira de uma tabela.
collapse
separate
CSS2
border-spacing Define a distncia entre as
linhas de fronteira de
clulas adjacentes
(aplicvel apenas quando
se usa o modelo "separated
borders" para as linhas de
fronteira da tabela)
comprimento CSS2
caption-side Define a posio da
legenda na tabela.
top
bottom
left
right
CSS2
empty-cells Indica se as clulas que
no tm contedo visvel
devem ter linhas de
fronteira ou no (aplicvel
apenas quando se usa o
modelo "separated borders"
para as linhas de fronteira
da tabela.)
show
hide
CSS2
table-layout Escolhe o algoritmo a usar
para desenhar a tabela.
auto
fixed
CSS2

19.13 Formatao de texto

Propriedade Descrio Valores permitidos W3C
color Define a cor do texto. cor CSS1
direction Define a direo de escrita
do texto.
ltr
rtl
CSS2
letter-spacing Aumenta ou diminui o
espao entre os caracteres.
normal
comprimento
CSS1
text-align Alinha o texto dentro de um
elemento.
left
right
center
justify
CSS1
text-decoration Adiciona pormenores
decorativos ao texto.
none
underline
overline
CSS1

line-through
blink
text-indent Desloca para a direita ou
para a esquerda a primeira
letra da primeira linha do
texto.
comprimento
%
CSS1
text-transform Controla as letras de um
elemento.
none
capitalize
uppercase
lowercase
CSS1
white-space Define a forma como
tratado o espao em branco
dentro de um elemento.
normal
pre
nowrap
CSS1
word-spacing Aumenta ou diminui o
espao entre as palavras.
normal
comprimento
CSS1

20. Referncia de CSS2 Print

Nota: A ltima coluna de cada tabela, cujo ttulo W3C, indica o padro que
define a propriedade. CSS1 significa que a propriedade definida pelo padro
"Cascading Style Sheets level 1" e CSS2 significa que a propriedade definida pelo
padro "Cascading Style Sheets level 2".

20.1 Propriedades para impresso de documentos

A impresso satisfatria de documentos escritos em HTML tem sido sempre
um problema complicado. O fato de uma pgina HTML poder ter comprimento e
largura arbitrrios entra em conflito com os tamanhos fixos de uma folha de papel.
Muitas vezes bastante difcil fazer com que a largura uma pgina da Web caiba
numa folha de papel e conseguir mudanas de pgina que no quebrem elementos
que devem ficar inteiros.

O padro CSS2 tenta dar uma ajuda para atenuar este problema atravs da
definio de propriedades especficas para a impresso de documentos em papel.

As ligaes apresentadas na coluna "Propriedade" apontam para mais
informao til acerca da propriedade em causa.

orphans Define o nmero mnimo de
linhas de um pargrafo que
podem ficar sozinhas no fim
de uma pgina.
nmero CSS2
page Define o tipo de pgina que
deve ser usado para
imprimir um elemento.
auto
identificador
CSS2
page-break-after Define a forma como se
fazem as mudanas de
pgina depois de um
elemento.
auto
always
avoid
left
right
CSS2
page-break-before Define a forma como se
fazem as mudanas de
auto
always
CSS2

pgina antes de um
elemento.
avoid
left
right
page-break-inside Define a forma como se
fazem as mudanas de
pgina dentro de um
elemento.
auto
avoid
CSS2
widows Define o nmero mnimo de
linhas de um pargrafo que
podem ficar sozinhas no
topo de uma pgina.
nmero CSS2


PARTE IV: Referncia CSS

1. background

A propriedade background permite-nos escrever de forma abreviada numa s
declarao todos os parmetros relativos ao fundo de um elemento.

Herdada: No

Exemplo

body { backgr ound: ur l ( bg_pegadas. j pg) #f 0f 8f f f i xed }

Valores permitidos

Valor Descrio
Todos os valores que podemos
dar s seguintes propriedades:

background-color,
background-image,
background-repeat,
background-attachment,
background-position
Oferece-nos uma forma abreviada para escrever
todas as propriedades do fundo numa nica
declarao.

2. background-attachment

A propriedade background-attachment indica se a imagem de fundo deve
permanecer imvel na janela do browser ou se acompanha o deslizamento (scroll) da
pgina.

Herdada: No

Exemplo

body
{
backgr ound- i mage: ur l ( bg_pegadas. j pg) ;
backgr ound- at t achment : scr ol l
}

Valores permitidos

Valor Descrio
scroll A imagem de fundo desliza juntamente com o resto da pgina
fixed A imagem de fundo no desliza com o resto da pgina. Ela permanece
imvel na janela do browser.

3. background-color

A propriedade background-color define a cor de fundo de um elemento.

Herdada: No


Exemplo

P { backgr ound- col or : #00f f 00 }

Valores permitidos

Valor Descrio
cor O valor da cor pode ser o seu nome (por exemplo red,) o seu valor rgb
(por exemplo rgb(255,0,0),) ou o seu cdigo hexadecimal (por exemplo
#FF0000).
transparent A cor de fundo transparente

4. background-image

A propriedade background-image indica uma imagem para ser usada como
fundo.

Dica: Defina igualmente uma cor de fundo para ser mostrada em vez da
imagem no caso de o browser no conseguir carreg-la.

Herdada: No

Exemplo

body
{
backgr ound- col or : #000000
}

Valor Descrio
url O local onde se encontra o arquivo com a imagem
none Nenhuma imagem de fundo

5. background-position

A propriedade background-position define o local onde se comea a desenhar
a imagem de fundo.

Herdada: No

Exemplo

body
{
backgr ound- posi t i on: t op l ef t
}

body
{
backgr ound- posi t i on: 0%0%
}


Valores permitidos

Valor Descrio
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
Se escrever apenas uma palavra o browser dar segunda o
valor por omisso "center".
x-% y-% O primeiro valor a posio segundo a horizontal e o segundo
valor a posio segundo a vertical. Ao canto superior esquerdo
correspondem os valores 0% 0%. Ao canto inferior direito
correspondem os valores 100% 100%. Se escrever apenas um
valor o browser dar ao segundo o valor por omisso de 50%.
x-pos y-pos O primeiro valor a posio segundo a horizontal e o segundo
valor a posio segundo a vertical. Ao canto superior esquerdo
correspondem os valores 0 0. As unidades de medida podem ser
pixels ou outra unidade de medida definida em CSS. permitido
misturar posies absolutas com posicionamentos percentuais.
Se escrever apenas um valor o browser dar ao segundo o valor
por omisso de 50%.

6. background-repeat

A propriedade background-repeat estabelece se a imagem de fundo deve ou
no repetir-se (formando um mosaico) e indica as direes da repetio.

Herdada: No

Exemplo

body
{
backgr ound- r epeat : r epeat - x
}

Valores permitidos

Valor Descrio
repeat A imagem de fundo repete-se tanto na horizontal como na vertical
(forma um mosaico).
repeat-x A imagem de fundo repete-se apenas na horizontal.
repeat-y A imagem de fundo repete-se apenas na vertical.
no-repeat A imagem de fundo no se repete ( desenhada uma nica vez).

7. border

A propriedade border permite escrever de forma abreviada numa nica
declarao todos os parmetros relativos s linhas de fronteira.


Nota: Esta propriedade afeta todas as quatro linhas de fronteira ao mesmo
tempo. Existem propriedades especficas para controlar cada uma das linhas
individualmente.

Herdada: No

Exemplo

P { bor der : t hi n dot t ed #00FF00 }
Span { bor der : sol i d #0000FF }

Valores permitidos

Valor Descrio
border-width
border-style
border-color
Define as propriedades das quatro linhas de fronteira. Aceita os
valores que podem ser dados s propriedades listadas
esquerda.

8. border-color

A propriedade border-color define a cor das quatro linhas de fronteira. Ela
aceita no mnimo uma cor e no mximo quatro cores.

Nota: A propriedade border-style deve ser declarada antes da propriedade
border-color. Isto necessrio porque s se pode mudar a cor da propriedade border
depois de se conhecer o seu estilo.

Herdada: No

Exemplo

t abl e { bor der - col or : r ed }
/ * t odas as quat r o l i nhas de f r ont ei r a ser o ver mel has ( r ed) */

t abl e { bor der - col or : r ed gr een }
/ * as l i nhas de f r ont ei r a do t opo e de bai xo ser o ver mel has e as l i nhas da
esquer da e di r ei t a ser o ver des */

t abl e { bor der - col or : r ed gr een bl ue }
/ * a l i nha de t opo ser ver mel ha, as l i nhas esquer da e di r ei t a ser o ver des e
a l i nha de bai xo ser azul */

t abl e { bor der - col or : r ed gr een bl ue yel l ow }
/ * a l i nha de t opo ser ver mel ha, a l i nha di r ei t a ser ver de, a l i nha de
bai xo ser azul e a l i nha da esquer da ser amar el a. */

Valores permitidos

Valor Descrio
cor O valor da cor pode ser o seu nome (red por exemplo), o seu valor rgb (
rgb(255,0,0) por exemplo), ou o seu cdigo hexadecimal (#FF0000 por
exemplo).
transparent A linha de fronteira transparente


9. border-style

A propriedade border-style define o estilo das quatro linhas de fronteira e pode
assumir quatro valores diferentes.

Herdada: No

Exemplo

t abl e { bor der - st yl e: dot t ed }
/ * t odas as quat r o l i nhas de f r ont ei r a ser o desenhadas compont os */

t abl e { bor der - st yl e: dot t ed dashed }
/ * as l i nhas de f r ont ei r a do t opo e de bai xo ser o desenhadas compont os e as
l i nhas esquer da e di r ei t a ser o desenhadas comt r aos */

t abl e { bor der - st yl e: dot t ed dashed sol i d }
/ * a l i nha de t opo ser desenhada compont os, as l i nhas da esquer da e di r ei t a
ser o desenhadas comt r aos e a l i nha de bai xo ser cont nua */

t abl e { bor der - st yl e: dot t ed dashed sol i d doubl e }
/ * a l i nha de t opo ser desenhada compont os, a l i nha di r ei t a ser desenhada
comt r aos, a l i nha de bai xo ser cont nua e a l i nha da esquer da ser dupl a */

Valores permitidos

Valor Descrio
none Faz com que no seja desenhada nenhuma linha de fronteira
hidden o mesmo que "none" (a linha no desenhada), exceto em situaes
de resoluo de conflitos com definies dadas em elementos de
tabelas
dotted Define uma linha desenhada com pontos. Alguns browsers acabam por
desenhar uma linha continua (estilo solid).
dashed Define uma linha desenhada com traos. Alguns browsers acabam
desenhando uma linha contnua (estilo solid).
solid Define uma linha de fronteira contnua
double Define duas linhas de fronteira lado a lado. A largura das duas linhas
juntas igual ao valor dado pelo parmetro border-width.
groove Define uma linha de fronteira com um efeito 3D (estilo groove). A
qualidade do efeito depende do valor definido no parmetro border-
color
ridge Define uma outra linha de fronteira com um efeito 3D (estilo ridge). A
color
inset Define uma linha de fronteira com um efeito 3D (estilo inset). A
color
outset Define uma linha de fronteira com um efeito 3D (estilo outset). A
color

10. border-width

A propriedade border-width uma notao abreviada para definir a largura das
quatro linhas de fronteira numa nica declarao. Ela pode assumir quatro valores
diferentes.

Herdada: No

Exemplo

t abl e { bor der - wi dt h: t hi n }
/ * t odas as quat r o l i nhas de f r ont ei r a ser o f i nas */

t abl e { bor der - wi dt h: t hi n medi um}
/ * as l i nhas de f r ont ei r a do t opo e de bai xo ser o f i nas e as l i nhas da
esquer da e di r ei t a ser o mdi as */

t abl e { bor der - wi dt h: t hi n medi umt hi ck }
/ * a l i nha de t opo ser f i na, as l i nhas da esquer da e di r ei t a ser o mdi as e a
l i nha de bai xo ser gr ossa */

t abl e { bor der - wi dt h: t hi n medi umt hi ck none }
/ * a l i nha de t opo ser f i na, a l i nha di r ei t a ser mdi a, a l i nha de bai xo
ser gr ossa e no l ado esquer do no ser desenhada qual quer l i nha */

Valores permitidos

Valor Descrio
thin Define uma linha de fronteira fina
medium Define uma linha de fronteira mdia
thick Define uma linha de fronteira espessa (grossa)
comprimento Permite definir a espessura das linhas de fronteira

11. border-bottom, border-left, border-right, border-top

Estas quatro propriedades so totalmente anlogas: bottom o lado de baixo,
top o lado de cima, left o lado esquerdo e right o lado direito. A descrio e os
exemplos que se seguem usam o lado de baixo (bottom). Para obtermos as
descries dos restantes lados basta trocar bottom por top, left, e right.

Descrio

A propriedade border-bottom permite-nos escrever de forma abreviada numa
s declarao todos os parmetros relativos linha de fronteira de baixo.

Herdada: No

Exemplo

Tabl e { bor der - bot t om: t hi n dot t ed #00FF00 }

Span { bor der - bot t om: sol i d #0000FF }

Valores permitidos

Valor Descrio
border-bottom-width
border-style
border-color
Pode assumir os valores das propriedades indicadas
esquerda.


12. border-bottom-color, border-left-color, border-right-color,
border-top-color


Descrio

A propriedade border-bottom-color define a cor da linha de fronteira desenhada
por baixo de um elemento

Herdada: No

Exemplo

Tabl e { bor der - bot t om- col or : #f f 3366 }
Tabl e { bor der - bot t om- col or : r gb( 255, 0, 0) }

Valores permitidos

Valor Descrio
exemplo).

13. border-bottom-style, border-left-style, border-right-style,
border-top-style


Descrio

A propriedade border-bottom-style define o estilo da linha de fronteira
desenhada por baixo de um elemento

Herdada: No

Exemplo

Tabl e { bor der - bot t om- st yl e: sol i d }

Valores permitidos

Valor Descrio
none Faz com que no seja desenhada nenhuma linha de fronteira
hidden o mesmo que "none" (a linha no desenhada), exceto em situaes
de resoluo de conflitos com definies dadas em elementos de
tabelas

dotted Define uma linha desenhada com pontos. Alguns browsers acabam por
desenhar uma linha continua (estilo solid).
dashed Define uma linha desenhada com traos. Alguns browsers acabam por
desenhar uma linha contnua (estilo solid).
solid Define uma linha de fronteira contnua
double Define duas linhas de fronteira lado a lado. A largura das duas linhas
juntas igual ao valor dado pelo parmetro border-width.
groove Define uma linha de fronteira com um efeito 3D (estilo groove). A
color
ridge Define uma outra linha de fronteira com um efeito 3D (estilo ridge). A
color
inset Define uma linha de fronteira com um efeito 3D (estilo inset). A
color
outset Define uma linha de fronteira com um efeito 3D (estilo outset). A
color

14. border-bottom-width, border-left-width, border-right-width,
border-top-width


Descrio

A propriedade border-bottom-width define a espessura da linha de fronteira
desenhada por baixo de um elemento

Herdada: No

Exemplo

Tabl e { bor der - bot t om- wi dt h: t hi n }
Tabl e { bor der - bot t om- wi dt h: 0. 5px }

Valores permitidos

Valor Descrio
thin Define uma linha de fronteira fina em baixo
medium Define uma linha de fronteira mdia em baixo
thick Define uma linha de fronteira espessa (grossa) em baixo
comprimento Permite definir a espessura da linha de fronteira que fica em baixo
(dada em px, pt, pc, cm, etc.)

15. clear

As posies em que ficam elementos como imagens, texto e outros variam com
o tamanho da janela do browser, com o tamanho de letra usado e com outros fatores.

Por isso dizemos que eles so elementos flutuantes. A propriedade clear impe
restries na colocao dos elementos flutuantes.

Herdada: No

Exemplo

h2 { cl ear : r i ght }
addr ess { cl ear : bot h }

Valores permitidos

Valor Descrio
left No so permitidos elementos flutuantes no lado esquerdo
right No so permitidos elementos flutuantes no lado direito
both No so permitidos elementos flutuantes no lado esquerdo
nem no lado direito
none So permitidos elementos flutuantes tanto do lado esquerdo
como do direito

16. cursor

A propriedade cursor especifica o tipo de cursor que deve ser mostrado quando
o ponteiro do mouse est sobre o elemento.

Herdada: Sim

Exemplo

h2 { cur sor : cr osshai r }
p { cur sor : ur l ( " f i r st . cur " ) , poi nt er }

Valores permitidos

Valor Descrio
url O URL de um arquivo que contm a definio do cursor a
usar. Nota: Indique tambm um cursor genrico para ser
apresentado caso o arquivo que contm o cursor especial no
puder der carregado.
default O cursor a usar por omisso (geralmente uma seta)
auto O browser escolhe o cursor
crosshair Um cursor em forma de cruz
pointer Um cursor para apontar para uma ligao de hipertexto
(normalmente uma mo com o dedo indicador esticado)
move O cursor que se v quando se move uma janela na tela
e-resize O cursor que se v enquanto se redimensiona uma janela na
tela arrastando a aresta direita ("east", ou leste)
ne-resize O cursor que se v enquanto se redimensiona uma janela na
tela arrastando o canto superior direito ("north/east", ou
nordeste)
nw-resize O cursor que se v enquanto se redimensiona uma janela na
tela arrastando o canto superior esquerdo ("north/west", ou
noroeste)

n-resize O cursor que se v enquanto se redimensiona uma janela na
tela arrastando a aresta de cima ("north", ou norte)
se-resize O cursor que se v enquanto se redimensiona uma janela na
tela arrastando o canto inferior direito ("south/east", ou
"sudeste")
sw-resize O cursor que se v enquanto se redimensiona uma janela na
tela arrastando o canto inferior esquerdo ("south/west", ou
sudoeste)
s-resize O cursor que se v enquanto se redimensiona uma janela na
tela arrastando a aresta de baixo ("south", ou sul)
w-resize O cursor que se v enquanto se redimensiona uma janela na
tela arrastando a aresta esquerda ("west", ou oeste)
text O cursor est sobre texto
wait O cursor que diz para esperar porque est uma tarefa em
execuo (normalmente uma ampulheta ou um relgio)
help Este cursor indica que h informao auxiliar disponvel
(assume normalmente a forma de um ponto de interrogao)

17. display

A propriedade display define se um elemento deve ser apresentado e como
deve ser apresentado.

Herdada: No

Exemplos

p { di spl ay: bl ock }
l i { di spl ay: l i st - i t em}
t abl e { di spl ay: t abl e }
t d, t h { di spl ay: t abl e- cel l }

Valores permitidos

Valor Descrio
none O elemento no ser apresentado
block O elemento ser apresentado como se fosse um elemento de
bloco, com uma mudana de linha antes e outra depois.
inline O elemento ser apresentado como se fosse um elemento
"inline" sem mudanas de linha antes nem depois da sua
ocorrncia.
list-item O elemento ser apresentado como se fosse um item de uma
lista
run-in O elemento ser apresentado como um elemento de bloco ou
como um elemento "inline" dependendo do contexto em que
aparece.
compact O elemento ser apresentado como um elemento de bloco ou
como um elemento "inline" dependendo do contexto em que
aparece.
table O elemento ser apresentado como uma tabela (<table>),
com mudanas de linha antes e depois.
inline-table O elemento ser apresentado como uma tabela (<table>),
mas sem mudanas de linha antes e depois.

table-row-group O elemento ser apresentado como um grupo de linhas de
uma tabela (<tbody>)
table-header-group O elemento ser apresentado como um grupo de linhas do
cabealho de uma tabela (<thead>)
table-footer-group O elemento ser apresentado como um grupo de linhas do
rodap de uma tabela (<tfoot>)
table-row O elemento ser apresentado como uma linha de uma tabela
(<tr>)
table-column-group O elemento ser apresentado como uma coluna ou mais
colunas de uma tabela (<colgroup>)
table-column O elemento ser apresentado como uma coluna de clulas de
uma tabela (<col>)
table-cell O elemento ser apresentado como uma clula de uma
tabela (<td>)
table-caption O elemento ser apresentado como uma legenda de uma
tabela (<caption>)

18. float

A propriedade float define o local em que um elemento deve ser colocado.

Herdada: No

Exemplo

I mg { f l oat : l ef t }

Valores permitidos

Valor Descrio
left O elemento flutua para a esquerda do contedo do elemento
que o contm
right O elemento flutua para a direita do contedo do elemento que
o contm
none No h flutuao. O elemento apresentado no local em que
aparece.

19. position

A propriedade position serve para colocar um elemento numa posio absoluta,
relativa, fixa ou esttica.

Herdada: No

Exemplo

h1
{
l ef t : 100px;
t op: 150px;
}


Valores permitidos

Valor Descrio
static O elemento colocado na sua posio normal. Quando usamos
este valor no devemos definir as propriedades left nem top.
relative Desloca o elemento relativamente sua posio normal ("left:
20px" desloca-o 20 pixels para a direita)
absolute Coloca o elemento numa posio absoluta sobre a pgina. "left:
20px" significa que ele comea 20 pixels direita do extremo
esquerdo da pgina.

20. visibility

A propriedade visibility indica se um elemento deve ou no ser visvel.

Nota: Os elementos invisveis continuam a ocupar espao na pgina. Se
precisar de usar elementos que no ocupam espao use a propriedade display com
"display: none".

Nota: Esta propriedade muito usada em scripts de HTML Dinmico.

Herdada: No

Exemplo

P { vi si bi l i t y: vi si bl e }

Valores permitidos

Valor Descrio
visible O elemento visvel
hidden O elemento invisvel
collapse Quando usado em elementos de tabela este valor remove uma
linha ou uma coluna sem alterar o arranjo da tabela. O espao
que seria ocupado pelos elementos removidos fica disponvel
para outros contedos. Quando usado em elementos que no
tabelas d o mesmo resultado que "hidden".

21. height

A propriedade height define a altura de um elemento

Herdada: No

Exemplo

I mg { hei ght : 230px }

Valores permitidos

Valor Descrio
auto o browser que decide a altura a usar
comprimento Define a altura em unidades px, cm, etc.

% Define a altura do elemento como uma porcentagem da altura do
bloco que o contm

22. line-height

A propriedade line-height define a distncia entre as linhas

Nota: No so permitidos nmeros negativos

Herdada: Sim

Exemplo

P { l i ne- hei ght : 1. 4 }
P { l i ne- hei ght : 14pt }
P { l i ne- hei ght : 140%}

Valores permitidos

Valor Descrio
normal Define um valor razovel para a distncia entre as linhas
nmero Define um nmero que ser multiplicado pelo tamanho de letra em
uso para estabelecer a distncia entre as linhas
comprimento Define um valor fixo para a distncia entre as linhas
% Define a distncia entre as linhas como uma porcentagem do
tamanho de letra usado

23. max-height

A propriedade max-height define a altura mxima permitida para um elemento

Herdada: No

Exemplo

P { max- hei ght : 100px }

Valores permitidos

Valor Descrio
none No estabelece qualquer limite para a altura mxima do elemento
comprimento Define a altura mxima do elemento
% Define a altura mxima do elemento como uma porcentagem da
altura do bloco que o contm

24. max-width

A propriedade max-width define a largura mxima de um elemento

Herdada: No

Exemplo

h2 { max- wi dt h: 500px }


Valores permitidos

Valor Descrio
none No estabelece qualquer limite para a largura mxima do elemento
comprimento Define a largura mxima permitida para o elemento
% Define a largura mxima permitida para o elemento como uma
porcentagem da largura do bloco que o contm

25. min-height

A propriedade min-height define a altura mnima de um elemento

Herdada: No

Exemplo

P { mi n- hei ght : 10px }

Valores permitidos

Valor Descrio
comprimento Define a altura mnima do elemento
% Define a altura mnima do elemento como uma porcentagem da
altura do bloco que o contm

26. min-width

A propriedade min-width define a largura mnima de um elemento

Herdada: No

Exemplo

h2 { mi n- wi dt h: 50px }

Valores permitidos

Valor Descrio
comprimento Define a largura mnima do elemento
% Define a largura mnima do elemento como uma porcentagem da
largura do bloco que o contm

27. width

A propriedade width define a largura de um elemento

Herdada: No

Exemplo

I mg { wi dt h: 100%}


Valores permitidos

Valor Descrio
auto o browser que decide a largura a usar
% Define a largura do elemento como uma porcentagem da largura do
elemento que o contm
comprimento Define uma largura fixa em unidades px, cm, etc.

28. font

A propriedade font , com exceo de alguns tipos de letra de sistema, uma
forma abreviada de definir todas as propriedades do texto usando uma nica
declarao.

Nota: Esta propriedade aceita mais uma definio. Trata-se de "line-height",
que define o espao entre as linhas.

Herdada: Sim

Exemplo

P { f ont : i t al i c bol der }
P { f ont : i t al i c smal l - caps bol d 12px ar i al }
P { f ont : obl i que smal l - caps 900 12px/ 14px ar i al }
P { f ont : menu }

Valores permitidos

Valor Descrio
font-style
font-variant
font-weight
font-size
font-family
Aceita os valores que podem ser dados s propriedades
listadas esquerda mais os valores que se encontram
listados nas linhas seguintes desta tabela.
caption Define as propriedades do tipo de letra a usar para escrever
as legendas em elementos de formulrios (botes, listas,
etc.)
icon Define as propriedades do tipo de letra a usar com cones.
menu Define as propriedades do tipo de letra a usar em menus.
message-box Define as propriedades do tipo de letra a usar nas caixas de
dilogo.
small-caption
status-bar Define as propriedades do tipo de letra a usar na barra de
estado do browser.

29. font-family

A propriedade font-family consiste numa lista com os tipos de letra que o
browser pode escolher para escrever os textos. A lista est ordenada de forma
prioritria: a primeira escolha aparece primeiro, a seguir vem a segunda escolha e
assim sucessivamente. O browser escolhe o primeiro tipo que conseguir usar.


Existem duas classes de valores que podem ser usados com a propriedade
font-family:

family-name: O nome de famlia do tipo de letra, como "times", "courier", "arial",
etc.
generic-family: O nome genrico de famlia, como "serif", "sans-serif", "cursive",
"fantasy", "monospace".

Nota: Os mltiplos valores dados propriedade font-family devem ser
separados por virgulas. Como precauo escreva sempre como ltima opo um
nome genrico (generic-family).

Nota: Se o nome de famlia tiver um espao deve coloc-lo entre aspas. Se a
definio se faz atravs do atributo style do HTML use aspas simples.

Herdada: Sim

Exemplo

Body { f ont - f ami l y: cour i er , ser i f }
P { f ont - f ami l y: ar i al , " l uci da consol e" , sansser i f }



Valores permitidos

Valor Descrio
family-name
generic-family
Uma lista ordenada de forma prioritria contendo nomes que o
browser pode escolher.

30. font-size

A propriedade font-size define o tamanho de letra a usar

Herdada: Sim

Exemplo

Body { f ont - si ze: x- l ar ge }
P { f ont - si ze: 10px }

Valores permitidos

Valor Descrio
xx-small
x-small
small
medium
large
x-large
xx-large
Define o tamanho de letra para diversas dimenses, desde xx-small
(menor) at xx-large (maior)
smaller Seleciona o tamanho de letra abaixo daquele que estava sendo
usado
larger Seleciona o tamanho de letra acima daquele que estava sendo
usado

comprimento Define um valor fixo para o tamanho de letra (dado em px, pt, pc,
etc.)
% Define o tamanho de letra como uma porcentagem daquele que
estava sendo usado

31. font-size-adjust

A razo entre o valor da propriedade "font-size" e a altura da letra "x" minscula
designa-se por "aspect value". Se o valor do "aspect value" for grande, o texto
continuar a ser legvel mesmo que o tamanho das letras seja reduzido para um valor
menor. Por exemplo: o tipo de letra Verdana tem um aspect value" de 0.58 (o que
significa que se a propriedade font-size for 100px a letra "x" ter uma altura de 58px).
O tipo de letra Times New Roman tem um "aspect value" de 0.46. O fato de o "aspect
value" do tipo de letra Verdana ser mais elevado faz com que ele seja mais legvel do
que o tipo de letra Times New Roman quando se escreve com letras muito pequenas.

Se o tipo de letra (font-family) escolhido no estiver disponvel, o browser v-se
obrigado a usar um outro tipo diferente. A propriedade font-size-adjust especifica o
"aspect value" do tipo de letra escolhido para que o browser possa substitu-lo por um
outro tipo que esteja acessvel preservando a altura da letra "x"

Herdada: Sim

Exemplo

h2 { f ont - si ze- adj ust : 0. 58 }

Valores permitidos

Valor Descrio
none No preciso preservar a altura da letra x quando for necessrio
substituir o tipo de letra por outro diferente.
nmero Define o "aspect value" para o tipo de letra (font)

Frmula:
font-size para aplicar ao tipo de letra disponvel = (font-size do tipo de
letra que primeira escolha) * font-size-adjust / "aspect value" do tipo
de letra disponvel)

Exemplo: Se o tipo de letra escolhido Verdana o "aspect value"
de 0.58. Se este tipo de letra e no estiver disponvel, o browser
obrigado a usar outro tipo de letra com um "aspect value" diferente
(suponhamos que 0.46) e ter de reajustar o tamanho. Se o tamanho
escolhido para Verdana for de 14 px, ao substituir este tipo pelo
outro, o tamanho da letra ser ajustado para 17.65px = 14px *
(0.58/0.46).

32. font-stretch

A propriedade font-stretch provoca uma expanso ou uma contrao horizontal

Nota: S a largura sofre um aumento ou uma reduo. A altura dos caracteres
no afetada.

Nota: Use esta propriedade com cautela pois alguns browsers usados
atualmente podem no reconhec-la.

Herdada: Sim

Exemplo

h2 { f ont - st r et ch: ul t r a- condensed }

Valores permitidos

Valor Descrio
normal Define o valor normal (no h contrao nem expanso)
wider Aumenta a largura dos caracteres
narrower Reduz a largura dos caracteres
ultra-condensed
extra-condensed
condensed
semi-condensed
semi-expanded
expanded
extra-expanded
ultra-expanded
Define a escala para a contrao ou para a expanso dos
caracteres. "ultra-condensed" o tamanho mais estreito de
todos e "ultra-expanded" o tamanho mais largo de todos

33. font-style

A propriedade font-style define o estilo de letra a usar

Herdada: Sim

Exemplo

Body { f ont - st yl e: i t al i c }

Valores permitidos

Valor Descrio
normal O texto escrito com o tipo de letra normal
italic O texto escrito com caracteres itlicos (inclinados)
oblique O texto escrito com caracteres oblquos

34. font-variant

A propriedade font-variant usada para apresentar texto com um tipo de letra
(fonte) "small-caps". Este tipo de letra consiste em converter todos os caracteres para
letra maiscula (capitals, ou caps) e em reduzir o tamanho (font-size) para um valor
inferior aquele usado para escrever o resto do texto.

Herdada: Sim

Exemplo

P { f ont - var i ant : smal l - caps }


Valores permitidos

Valor Descrio
normal O texto escrito com o tipo de letra normal
small-caps O texto escrito com o tipo de letra "small-caps"

35. font-weight

A propriedade font-weight define a espessura do trao com que so
desenhadas as letras do texto

Herdada: Sim

Exemplo

P { f ont - wei ght : bol d }

Valores permitidos

Valor Descrio
normal Define caracteres normais
bold Define caracteres desenhados com trao espesso
bolder Define caracteres desenhados com trao mais espesso
lighter Define caracteres desenhados com trao fino
100
200
300
400
500
600
700
800
Define a espessura do trao com que so desenhados os caracteres
desde 100 (mais fino) at 800 (mais grosso). O valor normal 400. 700
o mesmo que bold.

36. content

A propriedade content usa-se em combinao com os pseudo-elementos
:before e :after. Esta propriedade gera contedos que sero anexados antes (se usado
com :before) ou depois (se usado com :after) do seletor CSS em que usada.

Herdada: No

Exemplo

h4: bef or e { cont ent : ur l ( set a. gi f ) }

Valores permitidos

Valor Descrio
string Define contedo de texto
url Define um url
counter(name)

counter(name, list-
style-type)
counters(name, string)
counters(name, string,
list-style-type)
attr(X) Define um atributo para ser apresentado antes ou depois do
seletor CSS
open-quote
close-quote
no-open-quote
no-close-quote

37. counter-increment

Esta propriedade define o valor a adicionar (incremento) ao contador de
pginas sempre que for encontrado um determinado seletor CSS. O valor pr-
estabelecido (por omisso) 1.

Nota: Se um elemento usar a propriedade "display: none" ento o seu
aparecimento no incrementar o contador, mas se usar "visibility: hidden" ento o seu
aparecimento j incrementar o contador.

Herdada: No

Exemplo

Uma soluo para numerarmos sees na forma "Seo 1", "Seo 2", "Seo
3", etc:

h1: bef or e
{
cont ent : " Seo " count er ( sect i on) " " ;
/ * Adi ci ona 1 ao nmer o da seo */
count er - i ncr ement : sect i on;
}

Uma soluo para numerarmos sees na forma "Seo 1", "Seo 3", "Seo
5", etc:

h1: bef or e
{
cont ent : " Seo " count er ( sect i on) " " ;
/ * Adi ci ona 2 ao nmer o da seo */
count er - i ncr ement : sect i on 2;
}

Valores permitidos

Valor Descrio
none No aplicar qualquer incremento ao encontrar o seletor CSS
nmero
identificador
O identificador define um seletor, um ID ou uma classe que
ao serem encontrados provocaro um incremento do
contador. O nmero define o valor do incremento a aplicar. O
nmero pode ser positivo,zero, ou negativo.


38. counter-reset

A propriedade counter-reset estabelece o valor que ser atribudo ao contador
ao ser encontrado um seletor. O valor por omisso zero.

Nota: Se um seletor tiver "display: none" o seu aparecimento no far mudar o
valor do contador, mas se tiver "visibility: hiden" ento o seu aparecimento far com
que seja atribudo ao contador o valor definido pela propriedade counter-reset.

Herdada: No

Exemplo

Uma soluo para numerarmos sees e subsees na forma "Seo 1",
"Seo 2", "Seo 3", etc:

h1: bef or e
{
cont ent : " Seo " count er ( sect i on) " . " ;
/ * Adi ci ona 1 ao nmer o de seo */
count er - i ncr ement : sect i on;
/ * Col oca a sub- seo a 0 */
count er - r eset : sect i on;
}

h2: bef or e
{
cont ent : count er ( sect i on) " . " count er ( sub- sect i on) " " ;
count er - i ncr ement : sub- sect i on;
}

Valores permitidos

Valor Descrio
none O seletor no provoca o "reset" do contador
nmero
identificador
O identificador define um seletor, um ID, ou uma classe que
ao serem encontrados provocaro o "reset" do contador. O
nmero estabelece o valor a ser atribudo ao contador sempre
que aparecer o seletor. O nmero pode ser positivo, zero ou
negativo.

39. list-style

A propriedade list-style permite-nos definir todas as propriedades de uma lista
usando uma nica declarao.

Herdada: Sim

Exemplos

Ul { l i st - st yl e: di sc out si de }
Ol { l i st - st yl e: deci mal i nsi de }

Valores permitidos

Valor Descrio
list-style-type Podemos usar os valores permitidos para as propriedades

list-style-position
list-style-image
indicadas esquerda.

40. list-style-image

A propriedade list-style-image permite-nos usar uma imagem como marcador
em vez dos marcadores pr-definidos.

Nota: Quando usar esta propriedade use tambm a propriedade list-style-type
para servir de alternativa no caso de a imagem no puder ser usada.

Herdada: Sim

Exemplo

ol
{
l i st - st yl e- i mage: ur l ( set a. gi f ) ;
l i st - st yl e- t ype: ci r cl e
}

Valores permitidos

Valor Descrio
url O URL da imagem a usar como marcador.
none No apresentar qualquer imagem como marcador.

41. list-style-position

A propriedade list-style-position define onde devem ser colocados os
marcadores da lista.

Herdada: Sim

Exemplo

Ol { l i st - st yl e- posi t i on: i nsi de }

Valores permitidos

Valor Descrio
inside Os marcadores passam para o lado de dentro dos itens da
lista (deslocam-se para a direita). Com esta opo, se o texto
de um item da lista ocupar mais do que uma linha, as linhas
depois da primeira comeam mesmo por baixo do marcador
(so alinhadas pelo marcador.)
outside Os marcadores ficam totalmente fora dos itens da lista. Os
marcadores ficam sempre esquerda dos textos.

42. list-style-type

Esta propriedade define o tipo de marcadores a usar na lista.


Nota: Os browsers no suportam todos os tipos indicados mais abaixo e os
mais antigos suportam apenas o tipo "disc".

Herdada: Sim

Exemplo

ul { l i st - st yl e- t ype: di sc }

Valores permitidos

Valor Descrio
none No usar marcadores
disc Usar um disco como marcador (crculo cheio)
circle Circunferncia (anel)
square Quadrado
decimal Usar nmeros como marcador
decimal-leading-zero Usar nmeros como marcador com zeros esquerda (01, 02,
03, etc.) Pertence ao padro CSS2.
lower-roman Usar nmeros romanos minsculos (i, ii, iii, iv, v, etc.)
upper-roman Usar nmeros romanos maisculos (I, II, III, IV, V, etc.)
lower-alpha Usar letras do alfabeto minsculas (a, b, c, d, e, etc.)
upper-alpha Usar letras do alfabeto maisculas (A, B, C, D, E, etc.)

43. margin

A propriedade margin permite-nos escrever de forma abreviada numa nica
declarao as propriedades das quatro margens de um elemento de bloco.

Nota: As margens podem ter valores negativos.

Herdada: No

Exemplos

h1 { mar gi n: 10px }
/ * t odas as mar gens t m10px */

h1 { mar gi n: 10px 2%}
/ * as mar gens de ci ma e de bai xo ( t op e bot t om) t m10px e as mar gens esquer da
e di r ei t a ( l ef t e r i ght ) t m2%da l ar gur a t ot al do document o. */

h1 { mar gi n: 10px 2%- 10px }
/ * a mar gemde ci ma ( t op) t em10px, as mar gens esquer da e di r ei t a t m2%da
l ar gur a t ot al do document o e a mar gemde bai xo t em- 10px ( val or negat i vo) . */

h1 { mar gi n: 10px 2%- 10px aut o }
/ * a mar gemde ci ma t em10px, a mar gemdi r ei t a t em2%da l ar gur a t ot al , a
mar gem de bai xo t em - 10px e a l ar gur a da mar gem esquer da ser escol hi da pel o
br owser . */

Valores permitidos

Valor Descrio
margin-top
margin-right
Podemos usar os valores permitidos para as propriedades
indicadas esquerda.

margin-bottom
margin-left

44. margin-bottom, margin-left, margin-right, margin-top


Descrio

A propriedade margin-bottom define as margens do lado de baixo de um
elemento de bloco.

Nota: So permitidos valores negativos.

Herdada: No

Exemplo

h1 { mar gi n- bot t om: 10px }
h2 { mar gi n- bot t om: - 20px }

Valores permitidos

Valor Descrio
auto o browser que escolhe o tamanho da margem.
comprimento Define um comprimento fixo (dado em px, pt, pc, cm, etc.)
comprimento % Define o comprimento da margem como uma porcentagem da
altura do documento (para bottom e top) ou como uma
porcentagem da largura do documento (para left e right.)

45. outline

A propriedade outline define a linha que desenhada ao redor de um elemento
para que ele se destaque. Esta propriedade produz um resultado semelhante ao que
se obtm com as propriedades de border, que definem as linhas de fronteira que so
desenhadas ao redor de um elemento.

Nota: Esta propriedade mal suportada pelos browsers, que em geral s a
aplicam a alguns elementos. O Opera 7.2+ aplica-a a todos os elementos de bloco
desenhando uma linha por fora da linha de border e encostada a esta.

Herdada: No

Exemplo

but t on { out l i ne: r ed sol i d t hi n }

Valores permitidos

Valor Descrio
outline-color Podemos usar todos os valores permitidos para as

outline-style
outline-width
propriedades indicadas esquerda numa nica declarao

46. outline-color

A propriedade outline-color define a cor da linha que desenhada ao redor de
um elemento para que ele se destaque. Esta propriedade produz um resultado
semelhante ao que se obtm com as propriedades de border, que definem as linhas
de fronteira que so desenhadas ao redor de um elemento.


Herdada: No

Exemplo

but t on { out l i ne- col or : r ed }

Valores permitidos

Valor Descrio
invert Inverte as cores. Este truque pode ser usado para assegurar que a
linha de fronteira (border) sempre visvel qualquer que seja a cor
de fundo.
cor Uma cor que pode ser dada por um nome (red por exemplo), por
um valor rgb ( rgb(255,0,0) por exemplo), ou na forma hexadecimal
(#ff0000 por exemplo.)

47. outline-style

A propriedade outline-style define o estilo da linha que desenhada ao redor
de um elemento para que ele se destaque. Esta propriedade produz um resultado


Herdada: Sim

Exemplo

but t on { out l i nest yl e: sol i d }

Valores permitidos

Valor Descrio
none No so desenhadas linhas de contorno de tipo outline
dotted Desenha uma linha formada por pontos
dashed Desenha uma linha formada por traos

solid Desenha uma linha contnua
double Desenha duas linhas ao redor do elemento. A largura de cada
uma delas igual ao valor da propriedade outline-width.
groove Define uma linha num estilo 3D. A qualidade do efeito que se
obtm depende da cor.
ridge Define uma linha num estilo 3D. A qualidade do efeito que se
inset Define uma linha num estilo 3D. A qualidade do efeito que se
outset Define uma linha num estilo 3D. A qualidade do efeito que se

48. outline-width

A propriedade outline-width define a largura da linha que desenhada ao redor
de um elemento para que ele se destaque. Esta propriedade produz um resultado


Herdada: No

Exemplo

But t on { out l i ne- wi dt h: medi um}

Valores permitidos

Valor Descrio
thin Uma linha fina
medium Uma linha de largura mdia
thick Uma linha larga
comprimento Define uma largura fixa para a linha. O valor pode ser dado em
px, pt, cm, etc.

49. padding

A propriedade padding permite-nos definir os espaamentos que separam os
limites de um elemento dos seus contedos usando uma nica declarao.

Nota: No so permitidos valores negativos.

Herdada: No

Exemplo

h1 { paddi ng: 10px }
/ * a separ ao ( paddi ng) ent r e os cont edos e os l i mi t es de 10px emt odos os
quat r o l ados */

h1 { paddi ng: 10px 2%}

/ * os cont edos f i camsepar ados dos l i mi t es de ci ma e de bai xo por 10px; a
separ ao ent r e os l i mi t es esquer do e di r ei t o e os cont edos 2%da l ar gur a
t ot al do el ement o */

h1 { paddi ng: 10px 2%15px }
/ * o paddi ng emci ma de 10px, di r ei t a e esquer da de 2%da l ar gur a
t ot al do el ement o e embai xo 15px */

Valores permitidos

Valor Descrio
padding-top
padding-right
padding-bottom
padding-left
Define o valor de padding. Podem ser usados os valores
permitidos para as propriedades indicadas esquerda.

50. padding-bottom, padding-top, padding-left, padding-right


Descrio

A propriedade padding-bottom define o espao em branco que separa o
contedo de um elemento do seu limite de baixo.

Nota: No so permitidos valores negativos.

Herdada: No

Exemplo

h1 { paddi ng- bot t om: 10px }

Valores permitidos

Valor Descrio
comprimento Define um comprimento fixo para o espao em branco (dado em
px, pt, pc, cm, etc).
% Define um comprimento relativo ao espao em branco usando
uma pocentagem da largura total do elemento.

51. bottom, left, top, right


Descrio

A propriedade bottom define o limite de baixo de um elemento.


Nota: Se a propriedade position tiver o valor static a propriedade bottom no
produzir qualquer efeito.

Nota: So permitidos valores negativos.

Herdada: No

Exemplos

p
{
bot t om: 20px
}
/ * est e exempl o f az comque o l i mi t e de bai xo do el ement o f i que 20px aci ma do
l i mi t e de bai xo da j anel a que cont ma pgi na */

p
{
bot t om: - 20px
}
/ * est e exempl o f az comque o l i mi t e de bai xo do par gr af o f i que 20px abai xo
do l i mi t e de bai xo da j anel a */

Valores permitidos

Valor Descrio
auto Deixa o browser escolher a posio do limite inferior
% Define a posio do limite inferior como uma porcentagem da
altura da pgina
comprimento Define a posio do limite de baixo com um valor fixo dado em
px, pt, cm, etc.

52. clip

A propriedade clip define o retngulo ocupado por um elemento.

Esta propriedade til sempre que precisamos colocar um elemento dentro de
uma rea inferior ao seu tamanho porque nos permite escolher a parte que queremos
que fique visvel.

Nota: Esta propriedade no pode ser usada quando em simultneo damos o
valor "visible" propriedade overflow.

Herdada: No

Exemplo

i mg { cl i p: r ect ( 10px, 5px, 10px, 5px) }

Valores permitidos

Valor Descrio
rect(top, right, bottom,
left)
Define o retngulo (parte do elemento) que deve ficar visvel.
top, right, bottom e left so unidades de comprimento
(normalmente px).

auto O browser escolhe o retngulo que deve ficar visvel.

53. overflow

A propriedade overflow diz ao browser o que deve fazer no caso de o contedo
exceder a rea que lhe est destinada.

Herdada: No

Exemplo

p { over f l ow: scr ol l }

Valores permitidos

Valor Descrio
visible Mostra todo o contedo. Uma parte ser apresentada j fora da
rea do elemento a que pertence.
hidden O contedo cortado. A parte que excede a rea disponvel no
ser mostrada.
scroll O contedo cortado, mas o browser acrescenta barras de
deslocamento (scrollbars) para que o restante contedo tambm
possa ser visto se necessrio.
auto Caso ocorra um corte no contedo por ele exceder a rea
disponvel o browser deve acrescentar barras de deslocamento
(scrollbars) para que o excedente tambm possa ser visto se
necessrio.

54. vertical-align

A propriedade vertical-align define o alinhamento vertical do elemento e do seu
contedo.

Herdada: No

Exemplo

i mg { ver t i cal - al i gn: bot t om}

Valores permitidos

Valor Descrio
baseline A linha de base (de baixo) do elemento alinhada com a linha de
base do elemento que o contm.
sub Alinha o elemento ligeiramente abaixo da posio normal
(semelhante ao resultado que se obtm com o elemento 
do HTML).
super Alinha o elemento ligeiramente acima da posio normal
(semelhante ao resultado que se obtm com o elemento 
do HTML).
top Alinha o topo do elemento o mais acima possvel na linha a que
pertence.
text-top Alinha o topo do elemento com o limite mais alto do texto na linha

a que pertence.
middle Alinha o elemento meia altura do elemento que o contm.
bottom Alinha o limite inferior do elemento o mais baixo possvel na linha
a que pertence.
text-bottom Alinha o limite de baixo do elemento (bottom) com o limite de
baixo do texto na linha a que pertence.
% Alinha o elemento como uma porcentagem do valor da
propriedade line-height. So permitidos valores negativos.

55. z-index

A propriedade z-index serve para definir a forma como os elementos se
sobrepem na pgina. Quando dois ou mais elementos ocupam a mesma rea aquele
que possuir o valor de z-index mais elevado est por cima e ele que fica visvel
ocultando o(s) restante(s).

Nota: O z-index pode ter valores negativos.

Nota: A propriedade z-index s produz efeito quando aplicada a elementos
posicionados de forma absoluta (position: absolute)

Herdada: No

Exemplo

i mg { z- i ndex: - 1 }

Valores permitidos

Valor Descrio
auto O valor de z-index escolhido pelo browser
nmero Define o valor de z-index do elemento

56. border-collapse

A propriedade border-collapse define o modelo a usar para a linha de fronteira
de uma tabela.

Herdada: Sim

Exemplo

t abl e { bor der - col l apse: separ at e }

Valores permitidos

Valor Descrio
collapse Escolhe o modelo em que as linhas de fronteira esto juntas
separate Escolhe o modelo em que as linhas de fronteira esto separadas

57. color

A propriedade color define a cor com que se escreve o texto.

Herdada: Sim

Exemplos

body { col or : r gb( 255, 255, 0) }

Valores permitidos

Valor Descrio
exemplo).

58. direction

A propriedade direction define a direo do texto

Herdada: Sim

Exemplos

di v { di r ect i on: r t l }

Valores permitidos

Valor Descrio
ltr A direo da esquerda para a direita ("left-to-right")
rtl A direo da direita para a esquerda ("right-to-left")

59. letter-spacing

A propriedade letter-spacing usa-se para aumentar e para diminuir o espao
que separa as letras dentro de uma palavra.

Herdada: Sim

Nota: So permitidos nmeros negativos

Exemplos

P { l et t er - spaci ng: 12px }
P { l et t er - spaci ng: - 0. 5px }

Valores permitidos

Valor Descrio
normal Define o espaamento normal entre as letras.
comprimento Define um espaamento fixo entre as letras dado em px, pt, pc, etc.

60. text-align

A propriedade text-align usa-se para definir o alinhamento do texto

Herdada: Sim


Exemplos

P { t ext - al i gn: cent er }

Valores permitidos

Valor Descrio
left Alinha o texto esquerda
right Alinha o texto direita
center Alinha o texto ao centro
justify Alinha o texto simultneamente esquerda e direita inserindo no
interior os espaos que forem necessrios.

61. text-decoration

A propriedade text-decoration usa-se para decorar o texto.

Herdada: Sim

Nota: A cor da decorao deve ser definida atravs da propriedade "color".

Exemplos

P { t ext - decor at i on: under l i ne }

Valores permitidos

Valor Descrio
none Define texto normal
underline Define texto sublinhado
overline Define texto com uma linha por cima
line-through Define texto com uma linha horizontal sobreposta a meia altura
blink Faz com que o texto fique piscando

62. text-indent

A propriedade text-indent usa-se para deslocar para a direita a primeira letra da
primeira linha do texto.

Herdada: Sim

Nota: So permitidos valores negativos. Se o valor for negativo a primeira linha
comea mais esquerda do que as restantes.

Exemplos

P { t ext - i ndent : 20px }
P { t ext - i ndent : - 12px }

Valores permitidos

Valor Descrio
comprimento Define um deslocamento fixo para a primeira letra da primeira linha

(pode ser dado em px, pt, pc, etc.)
% Define o deslocamento para a direita da primeira letra da primeira linha
como uma porcentagem da largura do elemento que contm o texto.

63. text-transform

A propriedade text-transform controla as letras de um elemento

Herdada: Sim

Exemplos

P { t ext - t r ansf or m: upper case }

Valores permitidos

Valor Descrio
none Define texto normal, com letras maisculas e minsculas.
capitalize Todas as palavras comeam com letra maiscula.
uppercase Todas as letras so escritas como maisculas
lowercase Todas as letras so escritas como minsculas

64. white-space

A propriedade white-space define a forma como devem ser tratados os
caracteres de espao em branco dentro de um elemento.

Herdada: Sim

Exemplos

P { whi t e- space: nor mal }

Valores permitidos

Valor Descrio
normal O browser ignora os caracteres de espao
pre O browser preserva todos os caracteres de espao. O comportamento
igual ao que se obtm com o elemento <pre> do HTML
nowrap O browser deixa de inserir mudanas de linha automticas. A escrita de
texto s muda de linha quando encontrado um elemento .

65. word-spacing

A propriedade word-spacing usa-se para aumentar e para diminuir o espao
que separa as palavras.

Herdada: Sim

Nota: So permitidos valores negativos

Exemplos

p { wor d- spaci ng: 30px }

p { wor d- spaci ng: - 0. 5px }

Valores permitidos

Valor Descrio
normal Define o espaamento normal entre as palavras.
comprimento Define um espaamento fixo entre as palavras (pode ser dado em px,
pt, pc, etc.)

66. page-break-after

A propriedade page-break-after determina a forma como se fazem as
mudanas de pgina a seguir a um elemento quando a pgina impressa.

Nota: No podemos usar esta propriedade em elementos que tm
posicionamento absoluto.

Nota: As propriedades page-break devem ser usadas o menos possvel e deve
evitar-se a todo o custo us-las junto a tabelas, elementos flutuantes (que usam a
propriedade float) e elementos que usam a propriedade border.

Herdada: No

Exemplo

Tabl e { page- br eak- af t er : al ways }

Valores permitidos

Valor Descrio
auto Se for preciso pode-se fazer uma mudana de pgina a seguir ao
elemento.
always Fazer sempre uma mudana de pgina a seguir ao elemento.
avoid Evitar as mudanas de pgina a seguir ao elemento.
left Fazer mudanas de pgina depois do elemento at se alcanar
uma pgina do lado esquerdo em branco (isto usa-se quando as
pginas do lado esquerdo e do lado direito recebem formataes
diferentes, como nos livros.)
right Fazer mudanas de pgina depois do elemento at se alcanar
uma pgina do lado direito em branco (isto usa-se quando as

67. page-break-before

A propriedade page-break-before determina a forma como se fazem as
mudanas de pgina antes de um elemento quando a pgina impressa.


evitar-se a todo o custo us-las junto a tabelas, elementos flutuantes (que usam a

Herdada: No

Exemplo

Tabl e { page- br eak- bef or e: al ways }

Valores permitidos

Valor Descrio
auto Se for preciso pode-se fazer uma mudana de pgina antes do
elemento.
always Fazer sempre uma mudana de pgina antes do elemento.
avoid Evitar as mudanas de pgina antes do elemento.
left Fazer mudanas de pgina antes do elemento at se alcanar uma
pgina do lado esquerdo em branco (isto usa-se quando as
right Fazer mudanas de pgina antes do elemento at se alcanar uma
pgina do lado direito em branco (isto usa-se quando as pginas do
lado esquerdo e do lado direito recebem formataes diferentes,
como nos livros.)

68. page-break-inside

A propriedade page-break-inside determina a forma como se fazem as
mudanas de pgina dentro de um elemento quando a pgina impressa.


evitar-se a todo o custo us-las dentro de tabelas, elementos flutuantes (que usam a

Herdada: No

Exemplo

P { page- br eak- i nsi de: avoi d }

Valores permitidos

Valor Descrio
auto Se for preciso pode-se fazer uma mudana de pgina dentro do
elemento.
avoid Evitar as mudanas de pgina dentro do elemento.

Cursodecss Cascadingstylesheets

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Cursodecss Cascadingstylesheets

Diunggah oleh

Hak Cipta:

Format Tersedia

Curso de CSS - Cascading Style Sheets

Desenvolvimento, aplicaes e referncias de acordo com as normas do W3C

Anda mungkin juga menyukai