Apostila: CSS

Curso de CSS - Cascading Style Sheets
Desenvolvimento, aplicações e referências de acordo com as normas do W3C

Índice
PARTE I – CSS Básico
1 – Primeiro contato................................................................................................. 6
A sintaxe CSS.................................................................................................... 6
Agrupar seletores...............................................................................................8
Seletores de classe............................................................................................8
Seletor de id....................................................................................................... 10
Escrever comentários........................................................................................ 11
A colocação 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 formatação com estilos é superior? ........................................ 16
Limitações dos browsers atuais........................................................................ 17

3 – Escrita e combinação de estilos....................................................................... 17
Inserir uma folha de estilos interna.................................................................... 17
Definição de estilos com o atributo style............................................................18
Folha de estilos num arquivo externo................................................................ 19
Como se combinam estilos concorrentes.......................................................... 20
Herança de estilos entre elementos.................................................................. 22

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

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

6 - Unidades de Medida............................................................................................ 33
Medição de distâncias numa página HTML....................................................... 33
Definição 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 Avançado
10 – Controlar as margens dos elementos............................................................ 55

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

12 – Controle das dimensões dos elementos........................................................ 62

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

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


14 – Formatação de listas........................................................................................ 69

15 – Propriedades de classificação........................................................................ 73

16 – Pseudo-classes.................................................................................................78
Sintaxe............................................................................................................... 78
Pseudo-classes para ligações........................................................................... 79
A pseudo-classe :first-child................................................................................ 79
A pseudo-classe :lang........................................................................................80
Lista de pseudo-classes.................................................................................... 81

17 – Pseudo-elementos............................................................................................ 82
Sintaxe............................................................................................................... 83
Uma formatação especial para a primeira linha................................................ 83
O pseudo-elemento first-letter........................................................................... 84
Pseudo-elementos em classes CSS................................................................. 85
Vários 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 vários tipos de media................................................................................... 89

PARTE III – Material de Referência Rápida CSS
19 – Listagem das propriedades definidas em CSS............................................. 90
Fundos (background) ....................................................................................... 90
Linhas de fronteira (border) .............................................................................. 90
Propriedades de classificação........................................................................... 92
Controle dos tamanhos dos elementos............................................................. 93
Tipos de letra (font) ........................................................................................... 93
Gerar conteúdos................................................................................................ 95
Listas e marcadores...........................................................................................96
Margens............................................................................................................. 96
Linhas de contorno............................................................................................ 97
Espaço em branco dentro de um elemento (padding) ...................................... 97
Posicionamento................................................................................................. 98
Formatação de tabelas...................................................................................... 99
Formatação de texto.......................................................................................... 99

20 – Referência de CSS2 Print.................................................................................100
Propriedades para impressão de documentos.................................................. 100

PARTE IV – Referência 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 Básico
A forma recomendada para formatar as páginas escritas em HTML baseia-se
nos padrões "Cascading Style Sheets" (folhas de estilos em cascata), publicados pelo
World Wide Web Consortium (W3C).

A utilização deste padrão da Web permite ganhar tempo, dar consistência e
facilitar muito a escrita de páginas para a Web. Neste curso vamos aprender a usar
folhas de estilos em cascata (estilos CSS) para criar páginas mais flexíveis, mais
leves, e controlar o seu aspecto gráfico com maior precisão e com maior facilidade na
correção de erros.

Para seguir as matérias que aqui são apresentadas o aluno precisa saber
construir páginas simples em HTML. É necessário que já se tenha uma base bem
sólida sobre o HTML.

1. Primeiro contato
A maioria das pessoas que fazem um curso voltado para a web gostam de
começar a fazer coisas muito rapidamente, portanto, vamos já começar a ver alguns
exemplos e realizar exercícios práticos. Logo a seguir teremos um capítulo de
"conversa" em que analisaremos a situação que levou o W3C a criar este padrão e
depois vários capítulos com a matéria a sério e dezenas de exercícios práticos.

1.1 A sintaxe CSS

A sintaxe das definições CSS é composta por duas partes: um seletor e uma
declaração. Vejamos um exemplo:

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

A declaração fica entre chaves ({...}) e pode conter várias definições. Cada
definição é 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
genérica:
seletor { propriedade: valor }

O exemplo seguinte permite-lhe experimentar isto de imediato:

<html>
<head>
<style type="text/css">
H1 { color: green }
</style>
</head>
<body>
<H1>Este cabeçalho tem cor verde</H1>
</body>
</html>



O seletor é normalmente o nome de um elemento do HTML, mas também pode
ser um seletor de classe, um seletor de ID ou um seletor contextual (estes conceitos
serão 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:

<html>
<head>
p { font-family: "comic sans ms" }
</style>
</head>
<body>
<p>
O texto deste parágrafo tem tipo de letra "comic sans ms".
</p>
</body>
</html>

Dentro das chaves (caracteres { e }) podemos colocar várias definições
separadas pelo caractere ";" (ponto e vírgula). O exemplo seguinte define três
propriedades para o elemento <p>, que são o alinhamento, a cor do texto e o tipo de
letra.

<html>
<head>
p
{
text-align: center;
color: green;



font-family: arial
}
</style>
</head>
<body>
<p>
O texto deste parágrafo tem tipo de letra "arial", cor verde e está
alinhado ao centro.
</p>
</body>
</html>

Para tornarmos mais legíveis as definições dos estilos colocamos cada
definição numa linha diferente, mas podíamos 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 definições. Para isso escrevemos uns a seguir
aos outros separados por vírgulas. No exemplo seguinte os elementos de <h1> até
<h6> partilham todos a mesma definição:

h1,h2,h3,h4,h5,h6
{
color: green
}

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
parágrafo no documento: um alinhado à direita e outro alinhado ao centro. Vejamos
como os seletores de classe tornam isto muito fácil:

<html>
<head>
p.direita { text-align: right }
p.centro { text-align: center }
</style>
</head>
<body>
<p class="direita">
Este parágrafo está alinhado a direita.
</p>

<p class="centro">



Este parágrafo está alinhado ao centro.
</p>
</body>
</html>

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

<p class="direita" class="verde">
Este parágrafo tem um erro causado pela utilização repetida do atributo
class.
</p>

Os seletores de classe também podem ser definidos sem colocarmos o nome
de um elemento no início da definição. Quando isso acontece as definições 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:

<html>
<head>
.centro { text-align: center }
</style>
</head>
<body>
<h2 class="centro">
Cabeçalho alinhado ao centro
</h2>
<p class="centro">
Este parágrafo também está alinhado ao centro.
</p>
</body>
</html>



1.4 Seletor de id

O seletor de id é diferente do seletor de classe porque se aplica a um único
elemento da página. As regras do HTML ditam que os valores do atributo id não
podem repetir-se numa mesma página. Daí resulta que o número de elementos no
documento com um determinado id é um ou é zero.

A regra de seleção para o estilo definido no exemplo seguinte indica que ele só
pode ser aplicado a um elemento <p> que tenha o valor "para1" no atributo id:

<html>
<head>
p#para1
{
text-align: center;
color: red
}
</style>
</head>
<body>
<p id="para1">
Este parágrafo está alinhado ao centro e tem cor vermelha.
</p>
</body>
</html>

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

<html>
<head>



p#para1
{
text-align: center;
color: red
}
</style>
</head>
<body>
<div id="para1">
Este elemento não está alinhado ao centro e não tem cor vermelha porque
não é um parágrafo.
</div>
</body>
</html>

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

*#para1
{
text-align: center;
color: red
}

A regra acima é aplicável 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 id="para1">Este é um texto de cabeçalho</h1>

1.5 Escrever comentários numa folha de estilos

Podemos inserir comentários nas definições CSS para explicar o código que
escrevemos tornando-o mais fácil de compreender. Quando mais tarde voltarmos a
uma folha de estilos, ou se a partilharmos com outra pessoa, será mais fácil perceber
como ela funciona.

Os comentários devem ser ignorados pelo browser, mas as versões 5 do MSIE
os lê como se eles fossem definições, o que pode causar erros. Por isso coloque
comentários apenas em folhas de estilos que sejam lidas apenas pelos browsers
superiores as versões MSIE 6, Netscape 7/Mozilla ou pelo Opera.

Para iniciar um comentário escreva a seqüência de caracteres "/*", depois o
texto do comentário, e no fim escreva "*/" para terminar o comentário. O exemplo
seguinte mostra como se faz:



P {
text-align: center; /* Isto é um comentário */
color: black;
/* O MSIE 5 não reconhece os comentários!!! */
font-family: arial
}

1.6 A colocação dos elementos em CSS baseia-se em caixas

Todos os elementos que podem ser vistos numa página da Web ocupam uma
determinada área na página. Essa área tem a forma de um retângulo, que designamos
por caixa. A caixa de um elemento contém tudo aquilo que lhe diz respeito: conteúdo,
linhas de contorno, margens e espaço em branco. O gráfico que pode ver a seguir
representa as diversas áreas que constituem a caixa de um elemento.

Para percebermos o significado deste gráfico encontram - se abaixo alguns
esclarecimentos:

• O conteúdo do elemento fica dentro de um retângulo ao redor do qual existem
outras áreas.
• Entre o conteúdo do elemento e os seus limites (border) pode existir espaço
em branco, que designamos por padding.
• Os limites do elemento designam-se por border. É aí que o elemento termina.
• O retângulo (caixa) que contém o elemento pode ter margens (margin) que o
separa dos outros elementos da página. As margens estão fora dos limites do
elemento.

A largura de um elemento é determinada unicamente pela largura do seu
conteúdo. Já a largura da caixa que contém o elemento é dada pela soma da largura
do conteúdo mais as larguras ocupadas pelas linhas de contorno (border) e pelo
espaço em branco (padding). A altura de um elemento calcula-se de forma análoga.
As margens servem para deslocar o retângulo (caixa) do elemento relativamente à sua
posição normal.



Elementos de bloco e elementos "inline"

Todos os elementos visíveis numa página escrita em HTML pertencem a um
destes dois tipos: bloco ou "inline". Os elementos de bloco, como por exemplo <div>
ou <table>, começam numa nova linha e ao terminarem ocorre novamente uma
mudança de linha. Os elementos de bloco recebem larguras que são calculadas em
função da largura do bloco em que estão contidos.

Os elementos "inline", como <b> ou <span>, não dão início a uma nova linha e
a sua largura é determinada apenas pelo seu conteúdo. O seu comportamento é
semelhante ao comportamento do texto simples.

Exemplos de Aplicação

Elementos de bloco

<html>
<head>
<title></title>
</head>
<body>
<h1>Os cabeçalhos são elementos de bloco</h1>texto normal
<p>Os parágrafos são elementos de bloco</p>
<div>
Os elementos <div> e <table> também são elementos de bloco
</div>
</body>
</html>

Elementos "inline"

<html>
<head>
<title></title>
</head>
<body>
<p>
Os elementos <b><b> (bold)</b>, <i><i> (itálico)</i>,
<strong><strong> (texto forte)</strong>,
<code><code> (código de computador)</code> são exemplos de
elementos "inline".
</p>
</body>
</html>



1.7 Posicionamento absoluto e posicionamento relativo

A ordem de colocação dos elementos numa página HTML consiste
habitualmente em desenhá-los à medida que eles vão surgindo. Este método é
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 página e podem
sobrepor-se uns aos outros. Este método é designado por posicionamento absoluto
porque nos permite indicar o local exato da página em que queremos que o elemento
seja desenhado. Se esse local já estiver ocupado por outro elemento não há qualquer
problema porque os estilos CSS permitem-nos sobrepor elementos. Tudo se passa
como se a página fosse uma mesa sobre a qual podemos colocar folhas umas sobre
as outras.


Posicionamento absoluto com sobreposição de elementos

<html>
<head>
<title></title>
</head>
<body>
<p>
Este parágrafo está na posição normal (relativa.)
</p>
<p style="position: absolute; top: 100px; left: 30px">
Este parágrafo está numa posição absoluta.
</p>
<p style="position: relative">
Este parágrafo também está numa posição relativa.
</p>
</body>
</html>



2. Porque é que devemos formatar com estilos?
2.1 Vantagens dos estilos CSS

• Os estilos CSS foram adicionados pelo W3C às recomendações HTML 4 e
XHTML para resolver problemas muito sérios que afetavam a qualidade das
páginas escritas em HTML e dificultavam a sua manutenção.
• A utilização de folhas de estilos externas permite poupar tempo, ganhar
flexibilidade e aumentar a consistência das páginas que constituem um
website.
• Quando guardamos os estilos num arquivo externo e os aplicamos a todas as
páginas de um website, a modificação de diversas qualidades do aspecto
gráfico passa a ser uma tarefa fácil.
• As páginas que usam estilos CSS, além de serem mais fáceis de escrever, são
também mais leves e aparecem mais depressa no browser.

As folhas de estilos permitem ganhar tempo e flexibilidade

Os estilos CSS definem o aspecto gráfico a dar aos elementos do HTML. Os
estilos podem ser definidos numa folha de estilos externa ou internamente no próprio
documento HTML. Quando definidos num arquivo externo, os estilos podem ser
partilhados por muitas páginas, o que permite alterar instantaneamente o aspecto
gráfico de todas as páginas modificando apenas o arquivo em que os estilos são
definidos. Quando tínhamos que usar as técnicas antigas para fazer alterações no
aspecto gráfico de um website éramos obrigados a alterar todos os elementos <font> e
todas as tabelas usadas para formatar as páginas. Isto tinha de ser feito em todas as
páginas. Quando utilizamos estilos CSS basta modificar um número reduzido de
definições numa única folha de estilos para instantaneamente atualizarmos centenas
ou milhares de páginas com um esforço mínimo. Os erros ocorrem com menor
freqüência e são mais fáceis de corrigir.

A facilidade com que as alterações passam a ser feitas dá uma maior
flexibilidade ao website e melhoram o seu desempenho. As páginas ficam
simultaneamente mais ricas e mais leves.

2.2 O "mecanismo" de cascata

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



HTML. O browser lê todas as definições 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 várias versões para o mesmo
estilo o browser guarda a última que encontrou. Outra regra diz que alguns estilos são
herdados pelos elementos que se encontram dentro de outros elementos.

2.3 Porque é que a formatação com estilos é superior?

As etiquetas que definem os elementos do HTML foram concebidas para definir
conteúdos. O autor do HTML nunca teve qualquer intenção de usar esta linguagem
para definir estilos gráficos para as páginas. Os elementos do HTML foram idealizados
para declarar coisas como "Isto é um parágrafo", ou "Isto é um cabeçalho". Para isso
colocavam-se etiquetas como <p> ou <h1> ao redor do texto. A forma como esta
informação devia ser apresentada graficamente era um problema que o browser tinha
que resolver tendo em consideração o significado de cada elemento.

Este conceito perfeitamente racional era muito adequado enquanto o objetivo
das páginas foi apenas a escrita e a partilha de textos na Web, mas a rápida aceitação
da Web fez com que as pessoas que davam importância ao design também se
interessassem por este meio.

Esse interesse levou a esforços para criar páginas graficamente elaboradas,
mais ao gosto dos designers. Um dos efeitos mais importantes desses esforços foi a
completa adulteração do propósito de diversos elementos. O elemento <table>, por
exemplo, foi concebido unicamente para apresentar tabelas com dados numéricos,
mas os designers passaram a usá-lo, colocando esses elementos em diversos pontos
das páginas em arranjos cada vez mais complexos.

Mas isto não era suficiente porque havia coisas que não podiam ser feitas
usando apenas os elementos disponíveis. Para dar aos designers aquilo que eles
pediam os criadores dos browsers acharam que era uma boa idéia inventarem as suas
próprias etiquetas e acrescentaram atributos estilísticos aos que já existiam. Estas
extensões permitiram usar o HTML para dar cores e estilos diferentes ao texto e
aplicar outras formatações.

A formatação baseada em etiquetas e atributos estilísticos 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 <font>) davam importância ao
aspecto gráfico que produziam e não ao significado daquilo que continham.

Apesar de todas as contra-indicações, a criação e rápida disseminação de
etiquetas conduziu a uma situação em que os conteúdos das páginas estavam
completamente misturados com os aspectos estilísticos. Isto levou a que no final da
década de 1990 o HTML estivesse num estado em que era muito difícil criar e fazer a
manutenção de websites compostos por mais que fosse um número reduzido de
páginas. Os conteúdos das páginas não eram mais do que imensas "sopas de
etiquetas" mal organizadas cujo significado não era muito claro.

Este problema começou a ser resolvido pelo World Wide Web Consortium
(W3C) com a criação dos padrões HTML 4, CSS, XML e XHTML. O HTML deve ser
usado em conjunto com estilos CSS, sendo que os conteúdos se exprimem em HTML
e os estilos em CSS.



Este novo paradigma para a criação de páginas é bem suportado por todos os
browsers dominantes: Netscape/Mozilla, Microsoft Internet Explorer e Opera. Esta
realidade faz com que ninguém tenha desculpas para continuar a escrever um mau
HTML!

2.4 Limitações 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 atenção para o fato de ainda
subsistirem alguns problemas quando aplicamos técnicas avançadas de formatação
baseada em CSS.

Os problemas mais graves são causados pelo MSIE, que contém bugs que lhe
dão alguns comportamentos que se desviam dos padrões CSS. O bug mais grave
resulta da implementação errada do modelo de dimensionamento dos elementos.
Esse bug é bem conhecido e pode quase sempre ser superado recorrendo a truques
que não comprometem o funcionamento das páginas nos restantes browsers.

Além deste bug e de outros bugs menos importantes devemos ter sempre em
atenção o fato de as implementações dos padrões CSS serem geralmente
incompletas. Isto significa que não podemos contar com algumas propriedades.
Apesar disso podemos estar seguros de que as propriedades com que podemos
contar são suficientemente úteis para não querermos passar sem elas.

As limitações associadas ao suporte que os browsers atuais oferecem têm de
estar sempre presentes na mente do criador de páginas baseadas em CSS. Se usar
apenas as funcionalidades que são bem suportadas, que já são muitas, não será
preciso tomar muitas precauções. Se você decidiu utilizar funcionalidades mais
avançadas definidas pelos padrões CSS lembre-se que é preciso testar tudo de forma
exaustiva em todos os browsers relevantes para não ter surpresas desagradáveis.

3. Escrita e combinação de estilos
Quando o browser encontra uma folha de estilos num documento ele usa-a
para formatar os elementos desse documento. Existem três 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 são usados uma
única vez. Nesse caso as definições fazem-se dentro de um elemento <style> que
deve ser colocado dentro do elemento <head> da página HTML, assim:

<head>
hr { color: blue }
p { margin-left: 20px }
body { background-image: url("images/back40.gif") }
</style>
</head>

O browser lê as definições contidas no elemento <style> e faz a formatação
dos elementos da página aplicando essas definições.


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

<head>

</style>
</head>

3.2 Definição de estilos com o atributo style

A definição de estilos utilizando o atributo style nos faz perder muitas das
vantagens das folhas de estilos porque acaba misturando os estilos com os
conteúdos. Esta forma de definir estilos deve ser usada com moderação 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 parágrafo:

<html>
<body>
<p style="color: blue; margin-left: 20px">
Isto é um parágrafo formatado com o atributo style
</p>
</body>
</html>

Se precisarmos dar a uma propriedade um valor que contém espaços devemos
colocá-lo entre aspas. O exemplo seguinte faz isso para dar o tipo de letra "sans serif"
a um parágrafo e "comic sans ms" a outro.

<html>
<body>
<p style="font-family: 'sans-serif'">
Neste parágrafo o tipo de letra é "sans-serif"
</p>
<p style="font-family: 'comic sans ms'">
Neste parágrafo o tipo de letra é "comic sans ms"


</p>
</body>
</html>

3.3 Folha de estilos num arquivo externo

Uma folha de estilos externa constitui a melhor opção quando os mesmos
estilos são aplicados a várias páginas. Com uma folha de estilos externa podemos
alterar o aspecto gráfico de muitas páginas bastando para isso alterar apenas o
arquivo em que estão definidos os estilos. Cada página contém um elemento <link>
que a liga à folha de estilos. O elemento <link> deve ser colocado dentro do elemento
<head> nas páginas HTML:

<head>
<link rel="stylesheet" type="text/css" href="estilos.css">
</head>


Estilos definidos num arquivo externo

estilos.css

h1 {
font-family: sans-serif;
color: #666666;
}

p { font-family: cursive; }

<html>
<head>
<link href="estilos.css" type="text/css" rel="stylesheet">
<title>Exemplo</title>
</head>
<body>
<h1>Este cabeçalho foi formatado com uma folha de estilos.</h1>
<p>Este parágrafo também!</p>
</body>
</html>



O browser lê as definições contidas na folha de estilos (estilos.css) e faz a
formatação dos elementos do documento aplicando essas definições.

Se ao executar o exemplo de aplicação mais acima você prestou atenção no
arquivo de estilos então reparou que a folha de estilos externa é apenas um arquivo de
texto que contém definições CSS. No seu conteúdo não podem aparecer elementos
do HTML, só são permitidas definições CSS válidas.

3.4 Como se combinam estilos concorrentes

Um documento HTML pode definir ou utilizar mais do que uma folha de estilos.
Quando isso acontece é possível que algumas propriedades sejam definidas numa
folha e definidas de novo numa outra. Nestes casos o browser deve aplicar regras
para decidir qual das definições é mais importante.

A ordem da cascata

Quando um estilo é definido mais de uma vez qual das definições deve o
browser escolher? A primeira? A última? Nenhuma delas? Para decidir o browser
aplica as regras seguintes (listadas por ordem crescente de importância):

1. Estilos definidos por omissão (são aplicados sempre que não 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 através do atributo style nos elementos do documento
HTML)

Assim, temos que os estilos que são definidos no próprio elemento através do
atributo style têm a prioridade mais elevada. As definições que o atributo style faz
sobrepor-se a qualquer definição que tenha sido feita antes.

O exercício de aplicação seguinte ilustra melhor este mecanismo:


Regras de cascata com um arquivo externo e estilos internos

<html>
<head>
<link href="estilos.css" type="text/css" rel="stylesheet">



p { font-family: arial }
</style>
<title>Exemplo</title>
</head>
<body>
<h1>Este cabeçalho foi formatado com uma folha de estilos externa.</h1>
<p>
Repare que o tipo de letra deste parágrafo é aquele indicado pela folha
de estilos interna ("arial"). Apesar de a folha externa contida no
arquivo "estilos.css" conter uma definição diferente ("cursive") as
regras de cascata dizem que caso existam duas definições concorrente
deve prevalecer a mais recente.
</p>
</body>
</html>

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

h3
{
color: red;
text-align: left;
font-size: 8pt
}

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

h3
{
text-align: right;
font-size: 20pt
}

Se a página que contém a folha de estilos interna usar o elemento <link> para
se ligar à folha de estilos externa indicada antes, então as duas definições serão
combinadas para produzir a seguinte versão final para o seletor h3:

h3
{
color: red;
text-align: right;
font-size: 20pt
}



A cor foi herdada da folha externa, mas o alinhamento do texto e o tamanho de
letra foram substituídos pelas definições dadas na folha interna.

3.5 Herança 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 são herdadas. O exemplo seguinte mostra como
funciona este mecanismo de "herança" de estilos:

<html>
<head>
div { color: blue }
</style>
</head>
<body>
<div>
O texto dos elementos <div> tem cor azul.
<p>
Este parágrafo está dentro de um elemento <div>.
Ele herda a cor azul.
</p>
</div>
<p>
Este parágrafo não está dentro de nenhum elemento que lhe deixe uma
"herança".
</p>
</body>
</html>

No exemplo que acabamos de ver, a folha de estilos diz que o texto dos
elementos <div> deve ter cor azul. O parágrafo que está dentro de um elemento <div>
herda a cor azul porque a propriedade color é herdada pelos descendentes de um
elemento. Já o segundo parágrafo não está dentro de nenhum elemento que lhe deixe
uma "herança" (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 são aplicadas e não
se propagam aos seus descendentes. Diz-se que estas propriedades não são
herdadas. O exemplo seguinte é semelhante ao anterior, mas agora à propriedade
herdada color juntamos a propriedade border, que não é herdada:

<html>
<head>



div
{
color: blue;
border: solid thin red
}
</style>
</head>
<body>
<div>
Os elementos <div> recebem uma linha de contorno vermelha
(border) e texto com cor azul.
<p>
Este parágrafo está dentro de um elemento <div>.
Ele herda a cor azul mas não herda a linha de contorno (border).
</p>
<div>
Tal como o elemento <div> principal este elemento <div>
recebe a sua própria linha de contorno.
</div>
</div>
</body>
</html>

Como pode observar, a propriedade color propaga-se ao elemento <p> mas a
propriedade border não.


Uma cascata de estilos com "herança"

<html>
<head>
div { color: blue }
.verde { color: green }
</style>
<title></title>
</head>
<body>
<div>
A folha de estilos diz que o texto dos elementos <div> deve ter
cor azul.
<p>
Este parágrafo está dentro de um elemento <div>. Ele herda a
cor azul porque a propriedade color é herdada pelos descendentes de
um elemento.
</p>
</div>



<p>
Ao contrário do parágrafo anterior este parágrafo não está dentro de
nenhum elemento que lhe deixe uma "herança" (que neste caso é a
propriedade color).
</p>
</body>
</html>

Uma cascata de estilos com e sem "herança"

<html>
<head>
div
{
border: solid thin red;
color: blue
}
</style>
<title></title>
</head>
<body>
<div>
A folha de estilos diz que os elementos <div>
devem ter uma linha de contorno vermelha e o texto deve
ser azul.
<p>
Este parágrafo está dentro de um elemento <div>,
mas não tem linha de contorno. Isto acontece porque a
propriedade border não é herdada pelos descendentes de um
elemento. Já a cor é azul porque a propriedade color é herdada.
</p>
</div>
<p>
O texto deste parágrafo, tal como o anterior, não tem linha
de contorno. A cor é diferente porque não há nada para herdar.
</p>
</body>
</html>



Uma cascata de estilos simples

<html>
<head>
p
{
color: blue;
font-family: cursive;
font-size:16px
}
</style>
<title></title>
</head>
<body>
<p style="color: red">
A última definição de estilos encontrada diz
que a cor deste texto deve ser vermelha ("red").
De acordo com as regras de cascata é ela que
prevalece por ser a mais recente. O tipo de letra
definido inicialmente ("cursive") mantém-se.
</p>
<p>
Este parágrafo possui todas as definições feitas
na folha de estilos.
</p>
</body>
</html>

Outra cascata de estilos

<html>



<head>
p
{
color: blue;
font-family: cursive;
font-size:16px
}

.verde { color:green }
</style>
<title></title>
</head>
<body>
<p class="verde" style="color: red">
A última definição de estilos encontrada diz
que a cor deste texto deve ser vermelha ("red").
</p>
<p class="verde">
O texto deste parágrafo é verde porque a última
definição (atributo class="verde") lhe dá essa cor.
</p>
<p>
Este parágrafo possui as definições normais.
</p>
</body>
</html>

4. Definir cores em CSS
Podemos obter qualquer cor à nossa escolha combinando em proporções
corretas três 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 notação
hexadecimal. Nesta forma as cores exprimem-se usando três números hexadecimais
que definem as quantidades de vermelho, verde e azul que entram na composição de
uma determinada cor. O valor mais baixo de uma determinada cor é 0 (#00 na notação
hexadecimal usada em CSS) e o valor mais alto é 255 (#FF em notação 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 referências mais completas sobre as cores
e suas possíveis combinações.



O exemplo seguinte mostra três formas diferentes para escrever o texto com
cor vermelha.

<html>
<body>
<p style="color: rgb(255, 0, 0)">
Este parágrafo tem cor rgb(255, 0, 0)
</p>
<p style="color: #FF0000">
Este parágrafo tem cor #FF0000
</p>
<p style="color: Red">
Este parágrafo tem cor "Red"
</p>
<p style="color: #0000FF">
Este parágrafo tem cor #0000FF
</p>
</body>
</html>

4.2 Nomes de Cores

Consulte o Curso de HTML para ter acesso às cores oficias definidas pelos
padrões do W3C. É importante ressaltar que nem todas as cores possuem nomes
oficiais, porém a maioria é reconhecida pelos browsers mais atuais.

4.3 Quatro formas possíveis para definir cores

Acabamos de ver que podemos definir uma cor numa folha de estilos
indicando-a de três 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".

Além destas três formas podemos usar uma outra forma rgb baseada em
porcentagens do valor máximo de cada cor. Esta forma é menos recomendada do que
as restantes mas pode ser útil em algumas situações. A tabela seguinte apresenta
uma listagem de todas as formas que podemos usar.

Forma Descrição
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 máximo de cor (por exemplo
rgb(100%,0%,0%) é a cor vermelha.)
#rrggbb Um número hexadecimal (por exemplo #ff0000
para a cor vermelha).

4.4 Cuidados que devemos ter quando utilizamos cores

Atualmente praticamente todos os monitores de computador estão preparados
para apresentar mais de 16 milhões de cores diferentes. No entanto, é preciso levar
em conta que existem cada vez mais dispositivos móveis 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 dimensões e baixo consumo não vai muito além disto.

Se deseja que as páginas criadas por você sejam vistas corretamente nesses
aparelhos deve ter alguns cuidados ao escolher as cores para suas páginas. Uma boa
forma de conseguir resultados aceitáveis consiste em usar apenas cores seguras da
Web nas suas páginas. 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 (posição, repetição, etc).

5.1 Propriedades dos Fundos (background):

Notas Importantes

Nota 1: A última coluna da tabela, cujo título é W3C, indica o padrão que define
a propriedade. CSS1 significa que a propriedade é definida pelo padrão "Cascading
Style Sheets level 1" e CSS2 significa que a propriedade é definida pelo padrão
"Cascading Style Sheets level 2".

Nota 2: É preciso não esquecer que os browsers apresentam deficiências na
forma como suportam os padrões CSS. O padrão CSS1 é bem suportado e por isso
pode usar todas as propriedades CSS1 praticamente sem restrições. Quanto ao
padrão CSS2 o grau de suporte já é muito amplo mas é preciso tomar precauções. Se
decidiu utilizar funcionalidades mais avançadas definidas em CSS2 lembre-se que é
preciso testar tudo de forma exaustiva em todos os browsers relevantes para não ter
surpresas desagradáveis. Os exemplos que apresentamos exploram apenas as
propriedades que são bem suportadas.

Nota 3: Muitas propriedades estão descritas apenas de forma sumária nesta
tabela. Nesses casos consulte o nome da propriedade na referencia de CSS para
obter informações mais completas.

Nota 4: Os browsers da Microsoft contêm bugs que lhe dão alguns
comportamentos que se desviam dos padrões CSS. O bug mais grave resulta da
implementação errada do modelo de dimensionamento dos elementos. Esse bug é
bem conhecido e pode quase sempre ser superado recorrendo a truques que não
comprometem o funcionamento das páginas nos restantes browsers.



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


Definir a cor de fundo

<html>
<head>
body { background-color: yellow }
h1 { background-color: #00ff00 }
h2 { background-color: transparent }
p { background-color: rgb(250,0,255) }
</style>



<title></title>
</head>
<body>
<h1>Isto é um cabeçalho de nível 1</h1>


<p>Isto é um parágrafo</p>
</body>
</html>

Colocar uma imagem como fundo de um elemento

<html>
<head>
body { background-image: url("bg-pegadas.jpg") }
</style>
<title></title>
</head>
<body>
<p>Texto da página</p><br>
<p>Texto da página</p>
</body>
</html>

Repetir a imagem de fundo (background) na vertical

<html>
<head>



body
{
background-image: url("bg-pegadas.jpg");
background-repeat: repeat-y
}
</style>
<title></title>
</head>
<body>
</body>
</html>

Controlar a posição de uma imagem de fundo

<html>
<head>
body
{
background-repeat: no-repeat;
background-position: 30 50
}
</style>
<title></title>
</head>
<body>
</body>
</html>



Imagens de fundo fixas (não acompanham o deslocamento da página)

<html>
<head>
body
{
background-attachment: fixed
}
</style>
<title></title>
</head>
<body>
<p style="width: 1400px">
Esta imagem de fundo permanece imóvel quando se desce
ou sobe na página ou quando se desloca para a direita
ou para a esquerda
</p><br><br>
<p>
ou para a esquerda
</p><br><br>
<p>
ou para a esquerda
</p><br><br>
<p>
ou para a esquerda
</p><br><br>
<p>
ou para a esquerda
</p><br><br>
</body>
</html>



Uma única declaração para definir todas as propriedades do fundo

<html>
<head>
body {background: #00ffff url("bg-pegadas.jpg") no-repeat fixed center center}
</style>
<title></title>
</head>
<body>
<p>Texto da página</p><br><br>
</body>
</html>

6. Unidades de Medida
6.1 Medição de distâncias numa página HTML

O valor de um comprimento escreve-se com um número seguido de uma
abreviação que indica as unidades de medida. Não podemos colocar espaços entre o
número e as unidades (não escreva 2 cm mas sim 2cm). Quando o comprimento é 0
(zero) não é preciso indicar as unidades.



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

Unidade Descrição
% porcentagem de um valor
in polegadas (inch)
cm centímetros
mm milímetros
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 Definição de cores

Esta tabela limita-se a resumir o que vimos num capítulo anterior.

Forma Descrição
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 máximo de cor (por exemplo
rgb(100%,0%,0%) é a cor vermelha.)
#rrggbb Um número hexadecimal (por exemplo #ff0000
para a cor vermelha).

7. Propriedades do texto
As propriedades de texto definem o aspecto gráfico a dar ao texto. Estas
propriedades permitem-nos controlar cores, aumentar ou reduzir o espaço entre os
caracteres, alinhar o texto, escolher o tipo de letra, decorá-lo, etc.

7.1 Propriedades de Texto:

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



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


Definir a cor do texto

<html>
<head>
h1 { color: #00ff00 }
h2 { color: #dda0dd }
p { color: rgb(0,0,255) }
</style>
<title></title>
</head>
<body>
<h1>Cabeçalho de nível 1</h1>
</body>
</html>



Especificar o espaço que separa os caracteres
<html>
<head>
h1 { letter-spacing: -3px }
h4 { letter-spacing: 0.5cm }
</style>
<title></title>
</head>
<body>
</body>
</html>

Alinhamento do texto
<html>
<head>
h1 { text-align: center }
h2 { text-align: left }
h3 { text-align: right }
</style>
<title></title>
</head>
<body>
</body>
</html>



Decoração do texto

<html>
<head>
h1 { text-decoration: overline }
h2 { text-decoration: line-through }
h3 { text-decoration: underline }
a { text-decoration: none }
</style>
<title></title>
</head>
<body>
<p><a href="http://www.w3.org">Isto é uma ligação</a></p>
</body>
</html>

Inícios de parágrafo

<html>
<head>
p { text-indent: 1cm }
</style>
<title></title>
</head>
<body>
<p>
A primeira linha de cada parágrafo inicia-se um pouco mais
à direita do que as linhas seguintes. Isto deve-se ao estilo
CSS que usamos para formatar os parágrafos desta página.
</p>
<p>
A primeira linha de cada parágrafo inicia-se um pouco mais
à direita do que as linhas seguintes. Isto deve-se ao estilo
CSS que usamos para formatar os parágrafos desta página.
</p>

</body>
</html>



Controlar as letras de um texto

<html>
<head>
p.uppercase { text-transform: uppercase }
p.lowercase { text-transform: lowercase }
p.capitalize { text-transform: capitalize }
</style>
<title></title>
</head>
<body>
<p class="uppercase">
A class que demos a este parágrafo dá-lhe uma formatação
em que todas as letras são maiúsculas (em inglês "upercase".)
</p>

<p class="lowercase">
em que todas as letras são minúsculas (em inglês "lowercase".)
</p>

<p class="capitalize">
em que todas as palavras começam com
letra maiúscula ("capitalize" em inglês.)
</p>
</body>
</html>



8. Controlar o tipo de letra
8.1 Propriedades "font":

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

font Aceita os valores que icon CSS1
podem ser dados ao menu
restante das propriedades message-box
desta tabela mais aqueles small-caption
que se encontram na status-bar
coluna seguinte desta linha.
Oferece-nos uma forma
abreviada para definir numa
única declaração todas as
propriedades relativas ao
tipo de letra.
font-family A propriedade font-family family-name CSS1
consiste numa lista com os generic-family
tipos de letra que o browser
pode escolher para
escrever os textos. A lista
está ordenada de forma
prioritária: 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
família ou nomes genéricos.
font-size Define o tamanho de um xx-small CSS1
tipo de letra x-small
small
medium
large
x-large
xx-large
smaller
larger
comprimento
%
font-size-adjust Se o tipo de letra (font) none CSS2
escolhido não estiver número
disponível, 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 acessível
preservando a altura da
letra "x" e mantendo a
legibilidade do texto.
font-stretch A propriedade font-stretch normal CSS2
provoca uma expansão ou wider
uma contração horizontal ultra-condensed
no tamanho da letra. extra-condensed
condensed
semi-condensed
semi-expanded
expanded
extra-expanded
ultra-expanded
font-style Define o estilo de letra a normal CSS1
usar italic
oblique
font-variant Escreve o texto usando um normal CSS1
tipo de letra "small-caps" ou small-caps
o tipo normal
font-weight Define a espessura do traço normal CSS1
com que são desenhadas a bold
letras bolder
lighter
100
200
300
400
500
600
700
800
900


Definir o tipo de letra para um texto

<html>
<head>
h3 { font-family: times }
p { font-family: courier }
p.sansserif { font-family: sans-serif }
</style>
<title></title>
</head>
<body>
<p class="sansserif">Isto é um parágrafo com uma class diferente</p>
</body>
</html>



Definir o tamanho das letras

<html>
<head>
h1 { font-size: 150% }
h2 { font-size: 130% }
p { font-size: 100% }
</style>

<title></title>
</head>
<body>
</body>
</html>

Definir o estilo das letras

<html>
<head>
h1 { font-style: italic }
h2 { font-style: normal }
p { font-style: oblique }
</style>
<title></title>
</head>
<body>



</body>
</html>

Definir uma variante de um tipo de letra

<html>
<head>
p.normal { font-variant: normal }
p.small { font-variant: small-caps }
</style>
<title></title>
</head>
<body>
<p class="normal">Isto é um parágrafo</p>
<p class="small">Isto é um parágrafo</p>
</body>
</html>

Escrever com texto mais carregado (negrito)

<html>
<head>
p.normal { font-weight: normal }
p.thick { font-weight: bold }
p.thicker { font-weight: 900 }
</style>
<title></title>
</head>
<body>
<p class="normal">Isto é um parágrafo com letra normal</p>
<p class="thick">Isto é um parágrafo com letra mais grossa</p>
<p class="thicker">Isto é um parágrafo com letra muito grossa</p>
</body>



</html>

Todas as propriedades do tipo de letra numa única declaração

<html>
<head>
p { font: italic small-caps 900 13px arial }
</style>
<title></title>
</head>
<body>
</body>
</html>

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 padrão 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 tínhamos 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 border-width CSS1
abreviada para escrever border-style
numa única declaração border-color
todos os parâmetros
relativos às linhas de



fronteira. Aceita os valores
que podem ser dados às
propriedades listadas à
direita.
border-bottom Oferece-nos uma forma border-width CSS1
todas as propriedades da border-color
linha de fronteira do lado de
baixo numa única
declaração. Aceita os
valores que podem ser
dados às propriedades
listadas à direita.
border-bottom-color Define a cor da linha de border-color CSS2
fronteira de baixo
border-bottom-style Define o estilo da linha de border-style CSS2
fronteira de baixo
border-bottom-width Define a espessura da linha border-width CSS1
de fronteira de baixo
border-color Define as cores das quatro cor CSS1
linhas de fronteira. Aceita
de um a quatro valores.
border-left Oferece-nos uma forma border-width CSS1
abreviada para border-style
escrevermos todas as border-color
propriedades da linha de
fronteira do lado esquerdo
numa única declaração.
Aceita os valores que
podem ser dados às
direita.
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 border-width CSS1
de fronteira do lado
esquerdo
border-right Oferece-nos uma forma border-width CSS1
fronteira do lado direito
podem ser dados às
direita.
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 border-width CSS1
de fronteira do lado direito
border-style A propriedade border-style none CSS1
define o estilo das quatro hidden
linhas de fronteira. Aceita dotted
de um a quatro valores. dashed
solid
double
groove
ridge
inset
outset
border-top Oferece-nos uma forma border-width CSS1
fronteira do lado de cima
podem ser dados às
direita.
border-top-color Define a cor da linha de border-color CSS2
fronteira superior
border-top-style Define o estilo da linha de border-style CSS2
fronteira superior
border-top-width Define a espessura da linha border-width CSS1
de fronteira superior
border-width Oferece-nos uma forma thin CSS1
abreviada para definirmos medium
as espessuras de todas as thick
linhas de fronteira. Aceita comprimento


Definir o estilo das quatro linhas de fronteira

<html>
<head>
p.dotted { border-style: dotted }
p.dashed { border-style: dashed }
p.solid { border-style: solid }
p.double { border-style: double }
p.groove { border-style: groove }
p.ridge { border-style: ridge }
p.inset { border-style: inset }
p.outset { border-style: outset }
</style>
<title></title>
</head>
<body>
<p>
O MSIE 5.5 e superior suportam todos os estilos de linha
de fronteira ("border-style"), mas o MSIE 5.0 não suporta
os estilos "dotted" e "dashed".
</p>



<p class="dotted">Uma linha de fronteira composta por pontos</p>
<p class="dashed">Uma linha de fronteira composta por traços</p>
<p class="solid">Uma linha de fronteira com traço contínuo</p>
<p class="double">Uma linha de fronteira dupla</p>
<p class="groove">Uma linha de fronteira com "relevo"</p>
<p class="ridge">Outra linha de fronteira com "relevo"</p>
<p class="inset">Uma linha de fronteira com um efeito especial</p>
<p class="outset">Outra linha de fronteira com um efeito especial</p>
</body>
</html>

Linhas de fronteira diferentes em cada um dos lados

<html>
<head>
p.soliddouble { border-style: solid double }
p.doublesolid { border-style: double solid }
p.groovedouble { border-style: groove double }
p.three { border-style: solid double groove }
</style>
<title></title>
</head>
<body>
<p class="soliddouble">Parágrafo com texto</p><br>
<p class="doublesolid">Parágrafo com texto</p><br>
<p class="groovedouble">Parágrafo com texto</p><br>
<p class="three">Parágrafo com texto</p>
</body>
</html>



Definir as cores das quatro linhas de fronteira

<html>
<head>
p.stl1
{
border-style: solid;
border-color: #0000ff
}
p.stl2
{
border-color: #ff0000 #0000ff
}
p.stl3
{
border-color: #ff0000 #00ff00 #0000ff
}
p.stl4
{
border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255)
}
</style>
<title></title>
</head>
<body>
<p class="stl1">Parágrafo com o estilo "stl1"</p>
</body>
</html>



Definir a espessura da linha de fronteira inferior

<html>
<head>
p
{
border-bottom-width: 15px
}
</style>
<title></title>
</head>
<body>
<p>
Nas versões mais antigas do MSIE 5 a propriedade
"border-bottom-width" não é aplicada corretamente
quando usada isoladamente. Neste caso devemos definir
primeiro um valor para a propriedade "border-style" e
só depois "border-bottom-width".
</p>
</body>
</html>

Definir a espessura da linha de fronteira esquerda

<html>
<head>
p
{
border-left-width: 15px
}



</style>
<title></title>
</head>
<body>
<p>
"border-left-width" não é aplicada corretamente
</p>
</body>
</html>

Definir a espessura da linha de fronteira do lado direito

<html>
<head>
p
{
border-right-width: 15px
}
</style>
<title></title>
</head>
<body>
<p>
"border-right-width" não é aplicada corretamente
</p>
</body>
</html>



Definir a espessura da linha de fronteira superior

<html>
<head>
p
{
border-top-width: 15px
}
</style>
<title></title>
</head>
<body>
<p>
"border-top-width" não é aplicada corretamente
</p>
</body>
</html>

Todas as propriedades da linha de fronteira inferior numa única declaração

<html>
<head>
p { border-bottom: medium solid #ff0000 }
</style>
<title></title>
</head>
<body>
<p>Parágrafo com texto</p>
</body>
</html>



Todas as propriedades da linha de fronteira esquerda numa única declaração

<html>
<head>
p { border-left: medium solid #ff0000 }
</style>
<title></title>
</head>
<body>
</body>
</html>

Todas as propriedades da linha de fronteira do lado direito numa única
declaração

<html>
<head>
p { border-right: medium solid #ff0000 }
</style>
<title></title>
</head>
<body>
</body>
</html>



Todas as propriedades da linha de fronteira do lado de cima numa única
declaração

<html>
<head>
p { border-top: medium solid #ff0000 }
</style>
<title></title>
</head>
<body>
</body>
</html>

Todas as propriedades relativas à espessura das linhas de fronteira numa única
declaração

<html>
<head>
p.stl1
{
border-width: 5px
}
p.stl2
{
border-width: 5px 10px
}
p.stl3
{
border-width: 5px 10px 1px
}



p.stl4
{
border-width: 5px 10px 1px medium
}
</style>
<title></title>
</head>
<body>
<p class="stl1">
"border-width" não é aplicada corretamente
só depois "border-width".
</p>
<p class="stl2">Parágrafo com texto</p>
</body>
</html>

Todas as propriedades das linhas de fronteira numa única declaração

<html>
<head>
p { border: medium double #ff00ff }
</style>
<title></title>
</head>
<body>
</body>
</html>



PARTE II: CSS Avançado
10. Controlar as margens dos elementos
10.1 Propriedades das Margens

As margens de um elemento são constituídas por espaço 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 são adjacentes mas se for negativo
ele aproxima-se dos outros elementos. Isto significa que podemos usar as margens
para afastar e aproximar os conteúdos 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 margin-top CSS1
oferece uma forma margin-right
abreviada para definir numa margin-bottom
única declaração todas as margin-left
propriedades relativas às
quatro margens de um
elemento.
margin-bottom Define a margem inferior de auto CSS1
um elemento comprimento
%
margin-left Define a margem esquerda auto CSS1
de um elemento comprimento
%
margin-right Define a margem direita de auto CSS1
%
margin-top Define a margem superior auto CSS1
de um elemento comprimento
%


Definir a margem esquerda para um texto

<html>
<head>
p.margin { margin-left: 2cm }
</style>
<title></title>
</head>
<body>
<p>
Este parágrafo contém algum texto não
formatado com estilos CSS.
</p>
<p class="margin">
Neste parágrafo usamos estilos CSS para tornar a
margem esquerda um pouco mais larga.
</p>
</body>
</html>



Definir a margem direita para um texto

<html>
<head>
p.margin { margin-right: 2cm }
</style>
<title></title>
</head>
<body>
<p>
</p>
<p class="margin">
margem direita um pouco mais larga. Vamos escrever
mais um pouco só para que ele ocupe mais do que uma
linha e torne o efeito evidente.
</p>
</body>
</html>

Definir a margem superior para um texto

<html>
<head>
p.margin { margin-top: 2cm }
</style>
<title></title>
</head>
<body>
<p>
</p>



<p class="margin">
margem superior um pouco mais larga.
</p>
</body>
</html>

Definir a margem inferior para um texto

<html>
<head>
p.margin { margin-bottom: 80px }
</style>
<title></title>
</head>
<body>
<p>
</p>
<p class="margin">
margem inferior um pouco mais larga.
</p>
<p> Este parágrafo contém algum texto não
</p>
</body>
</html>



Todas as propriedades relativas a margens numa única declaração

<html>
<head>
p.margin { margin: 2cm 4cm 3cm 4cm }
</style>
<title></title>
</head>
<body>
<p>
</p>
<p class="margin">
Neste parágrafo as margens são todas mais largas
</p>
<p> Este parágrafo contém algum texto não
</p>
</body>
</html>

11. Propriedades de "padding"
As propriedades padding controlam o espaço em branco que separa os
conteúdos de um elemento dos seus limites ("border"). É proibido usar valores
negativos para estas propriedades porque isso colocaria os conteúdos fora do
elemento, o que não faria sentido. Os quatro lados podem ser controlados todos de
uma vez ou separadamente.

11.1 Propriedades que controlam o espaço entre o conteúdo e os limites:

padding Propriedade que nos padding-top CSS1
oferece uma forma padding-right
abreviada para definir numa padding-bottom
única declaração todos os padding-left
aspectos dos
espaçamentos entre o



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


Definir o espaço em branco entre o limite esquerdo e o conteúdo de uma célula
de tabela

<html>
<head>
td {padding-left: 20px}
</style>
<title></title>
</head>
<body>
<table border="1">
<tr>
<td> Nesta célula de tabela existe uma separação de 20px
entre o conteúdo e o limite do lado esquerdo.
</td>
</tr>
</table>
</body>
</html>

Definir o espaço em branco entre o limite direito e o conteúdo de uma célula de
tabela

<html>
<head>
td {padding-right: 50px}
</style>
<title></title>



</head>
<body>
<table border="1">
<tr>
entre o conteúdo e o limite do lado direito. Vamos
escrever mais um pouco para que tenha mais do que uma
linha, o que põe o efeito em evidência.
</td>
</tr>
</table>
</body>
</html>

Definir o espaço em branco entre o limite de cima e o conteúdo de uma célula de
tabela

<html>
<head>
td {padding-top: 32px}
</style>
<title></title>
</head>
<body>
<table border="1">
<tr>
entre o conteúdo e o limite superior.
</td>
</tr>
</table>
</body>
</html>



Definir o espaço em branco entre o limite de baixo e o conteúdo de uma célula
de tabela

<html>
<head>
td {padding-bottom: 42px}
</style>
<title></title>
</head>
<body>
<table border="1">
<tr>
entre o conteúdo e o limite inferior.
</td>
</tr>
</table>
</body>
</html>

Uma única declaração para definir todas as propriedades relativas ao espaço em
branco dentro de um elemento

<html>
<head>
td { padding: 42px }
td.stl2 { padding: 22px 52px }
</style>
<title></title>
</head>
<body>
<table border="1">
<tr>
<td>
Nesta célula de tabela existe uma separação de 42px
entre o conteúdo e todos os limites.
</td>
</tr>
</table>
<br>
<table border="1">
<tr>
<td class="stl2">
Nesta célula de tabela existe uma separação de 22px
entre o conteúdo e os limites superior e inferior.
Entre o conteúdo e os limites esquerdo e direito a
separação é de 52px.
</td>
</tr>
</table>



</body>
</html>

12. Controle das dimensões dos elementos
As propriedades relativas a dimensões são usadas para controlar a altura e a
largura dos elementos e o espaço entre linhas de texto.

12.1 Propriedades Relativas a Dimensões:

height Define a altura de um auto CSS1
elemento comprimento
%
line-height Define a distância entre as normal CSS1
linhas número
comprimento
%
max-height Define a altura máxima de none CSS2
%
max-width Define a largura máxima de none CSS2
%
min-height Define a altura mínima de comprimento CSS2
um elemento %
min-width Define a largura mínima de comprimento CSS2
um elemento %
width Define a largura de um auto CSS1
elemento %
comprimento


Definir a altura e a largura de uma imagem

<html>



<head>
img.normal
{
height: auto;
width: auto
}

img.grande
{
height: 64px;
width: 64px
}

img.pequeno
{
height: 16px;
width: 16px
}
</style>
<title></title>
</head>
<body>
<img class="normal" height="32" width="32" src="2569.gif"><br><br>
<img class="grande" height="32" width="32" src="2569.gif"><br><br>
<img class="pequeno" height="32" width="32" src="2569.gif">
</body>
</html>

Aumentar o espaço entre as linhas

<html>
<head>
p.aumentar {line-height: 32px}
</style>
<title></title>
</head>
<body>
<p> Isto é um parágrafo com texto. Isto é um parágrafo com texto.
Isto é um parágrafo com texto. Isto é um parágrafo com texto.
</p>
<p class="aumentar">
</p>



</body>
</html>

13. Posicionamento dos elementos
As propriedades que controlam o posicionamento dos elementos permitem-nos
controlar a área ocupada e escolher a localização com rigor.

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



top Define a distância (para auto CSS2
deve ficar o limite de cima comprimento
de um elemento
cima do elemento que o
contém.
vertical-align Define o alinhamento baseline CSS1
vertical de um elemento. sub
super
top
text-top
middle
bottom
text-bottom
comprimento
%
z-index Define a ordem de auto CSS2
apresentação (prioridade) número
dos elementos no caso de
existir sobreposição entre
eles.


Define a posição do elemento relativamente ao topo e ao lado esquerdo da
página

<html>
<head>
h1
{
position: absolute;
top: 100px;
left: 100px
}

p
{
position: absolute;
top: 200px;
left: 100px
}
</style>
<title></title>
</head>
<body>
<h1>Um Cabeçalho</h1>

<p> O <b>cabeçalho</b> está colocado 100px abaixo do topo do
documento e 100px à direita da extremidade
esquerda. O <b>parágrafo</b> está colocado 200px abaixo
do topo do documento e 100px à direita da extremidade
esquerda.
</p>
</body>
</html>



Alinhar uma imagem na vertical

<html>
<head>
img.top { vertical-align:text-top }
img.bottom { vertical-align:text-bottom }
</style>
<title></title>
</head>
<body>
<p> Isto é uma imagem <img class="bottom" src="2569.gif">
dentro de um parágrafo.
</p>

<p> Isto é a mesma imagem <img class="top" src="2569.gif">
dentro de outro parágrafo.
</p>
</body>
</html>

O que deve ser feito quando o conteúdo de um elemento excede a sua área

<html>
<head>
div
{



width:150px;
height:150px;
overflow: scroll
}
</style>
<title></title>
</head>
<body>
<p> A propriedade "overflow" faz com que o browser coloque barras
de deslocamento num elemento para que seja possível mostrar
todo o seu conteúdo mesmo que ele ocupe uma área maior do que
aquela que lhe está destinada.
</p>
<div>
Neste caso o conteúdo não cabe num quadrado com
150px de lado, sendo assim, só colocando
barras de deslocamento é que seremos capazes de vê-lo todo.<br><br>
Experimente mudar o valor da propriedade "overflow" para:
visible, hidden, auto, ou inherit e veja o que acontece. O
valor por omissão é visible.
</body>
</html>

Colocar um elemento "na frente" de outro elemento

<html>
<head>
img.x
{
position:absolute;
left:0;
top:0;
z-index: 1
}
</style>
<title></title>
</head>
<body>
<h1>Isto é um cabeçalho</h1>
<img class="x" src="euros.jpg">
<p> O valor por omissão da propriedade z-index é 0.
A imagem tem o z-index com valor 1, deste modo,
a sua prioridade é superior. Por isso ela
aparece à frente do restante conteúdo.
</p>
</body>



</html>

Definir a forma de um elemento

<html>
<head>
img
{
position:absolute;
clip: rect(0 200 100 0)
}
</style>
<title></title>
</head>
<body>
<p> A propriedade "CLIP" permite-nos cortar a imagem.
Neste exemplo as dimensões da imagem são 300x200,
mas os valores dados à propriedade "CLIP" fazem com
que apenas seja apresentada uma seção com 200x100.
Note que a imagem ocupa todo o seu espaço original.
</p>
<p><img width="300" height="200" src="caminho.jpg"></p>
</body>
</html>



14. Formatação de listas
As propriedades relativas às listas permitem-nos controlar diversos aspectos da
apresentação de uma lista. Entre outros aspectos podemos escolher os símbolos para
os marcadores, usar uma imagem como marcador, e escolher a posição dos
marcadores.

14.1 Propriedades das Listas:

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


Símbolos disponíveis para marcadores de item em listas não ordenadas

<html>
<head>
ul.disc { list-style-type: disc }
ul.circle { list-style-type: circle }
ul.square { list-style-type: square }
ul.none { list-style-type: none }
</style>
<title></title>
</head>
<body>
<ul class="disc">
<li>Cicletes</li>
<li>Balinhas</li>
<li>Pirulitos</li>
</ul>
<ul class="circle">
<li>Cicletes</li>
<li>Balinhas</li>



<li>Pirulitos</li>
</ul>
<ul class="square">
<li>Cicletes</li>
<li>Balinhas</li>
<li>Pirulitos</li>
</ul>
<ul class="none">
<li>Cicletes</li>
<li>Balinhas</li>
<li>Pirulitos</li>
</ul>
</body>
</html>

Símbolos disponíveis para marcadores de item em listas ordenadas

<html>
<head>
ol.decimal { list-style-type: decimal }
ol.lroman { list-style-type: lower-roman }
ol.uroman { list-style-type: upper-roman }
ol.lalpha { list-style-type: lower-alpha }
ol.ualpha { list-style-type: upper-alpha }
</style>
<title></title>
</head>
<body>
<ol class="decimal">
<li>Cicletes</li>
<li>Balinhas</li>
<li>Pirulitos</li>
</ol>

<ol class="lroman">
<li>Cicletes</li>
<li>Balinhas</li>
<li>Pirulitos</li>
</ol>

<ol class="uroman">
<li>Cicletes</li>



<li>Balinhas</li>
<li>Pirulitos</li>
</ol>

<ol class="lalpha">
<li>Cicletes</li>
<li>Balinhas</li>
<li>Pirulitos</li>
</ol>

<ol class="ualpha">
<li>Cicletes</li>
<li>Balinhas</li>
<li>Pirulitos</li>
</ol>
</body>
</html>

Uma imagem como marcador de item numa lista

<html>
<head>
ul { list-style-image: url("seta.gif") }
</style>
<title></title>
</head>
<body>
<ul>
<li>Cicletes</li>
<li>Balinhas</li>
<li>Pirulitos</li>
</ul>
</body>
</html>



Controle da posição do marcador

<html>
<head>
<title></title>
</head>
<body>
<p>Esta lista tem o estilo "inside":</p>
<ul style="list-style-position: inside">
<li>Cicletes</li>
<li>Balinhas</li>
<li>Pirulitos</li>
</ul>
<p>Esta lista tem o estilo "outside":</p>
<ul style="list-style-position: outside">
<li>Cicletes</li>
<li>Balinhas</li>
<li>Pirulitos</li>
</ul>
</body>
</html>

Todas as propriedades numa única declaração

<html>
<head>
ul { list-style: square inside url("seta.gif") }
</style>
<title></title>
</head>



<body>
<ul>
<li>Cicletes</li>
<li>Balinhas</li>
<li>Pirulitos</li>
</ul>
</body>
</html>

15. Propriedades de classificação

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

15.1 Propriedades de Classificação:

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



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 left CSS1
imagem ou elemento de right
bloco deve aparecer dentro none
de outro elemento
position Coloca um elemento numa static CSS2
posição que pode ser relative
estática, relativa, absoluta absolute
ou fixa fixed
visibility Indica se um elemento deve visible CSS2
estar visível ou invisível hidden
collapse


Como deve ser apresentado um elemento?

<html>
<head>
div { display: none }
p { display: inline }
</style>
<title></title>
</head>
<body>
<div>
O conteúdo deste elemento <div>
não será apresentado pelo browser.
</div>
<p>
Isto é um parágrafo.
</p>
<p> Este outro parágrafo está colado ao parágrafo anterior porque
a folha de estilos CSS estabelece que os parágrafos normais
devem ter uma apresentação ("display") do tipo "inline".
</p>
</body>
</html>



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

<html>
<head>
img { float: right }
</style>
<title></title>
</head>
<body>
<p><img src="magoo.gif">
O valor "right" dado à propriedade "float" faz com
que a imagem flutue à direita do restante conteúdo do
parágrafo.
</p>
</body>
</html>

Posicionar um elemento relativamente à sua posição normal

<html>
<head>
h1.ex1
{
position:relative;
left: 20px
}
h1.ex2
{
position:relative;
left: -20px
}
</style>
<title></title>



</head>
<body>
<h1 class="ex1">Cabeçalho deslocado 20px para a direita</h1>
<h1 class="ex2">Cabeçalho deslocado 20px para a esquerda</h1>
<p> O posicionamento relativo faz deslocar os elementos
relativamente àquela que seria a sua posição normal.
</p>
<p>"left: 20px" soma 20 pixels à propriedade "LEFT"
do elemento, deslocando-o para a direita.
</p>
<p>"left: -20px" subtrai 20 pixels à propriedade "LEFT"
do elemento, deslocando-o para a esquerda.
</p>
</body>
</html>

Posicionar um elemento com um valor absoluto

<html>
<head>
h1.x
{
position:absolute;
left:100px;
top:150px
}
</style>
<title></title>
</head>
<body>
<h1 class="x">Cabeçalho com posicionamento absoluto</h1>
<p> O posicionamento absoluto permite-nos colocar
um elemento no ponto que quisermos sobre a página.
</p>
<p> A propriedade "LEFT" coloca o cabeçalho a 100 pixels
de distância do extremo esquerdo da página e a
propriedade "TOP" coloca-o a 150 pixels de distância
do topo da página.
</p>
</body>
</html>



Como tornar um elemento invisível

<html>
<head>
h1.stl1 { visibility:visible }
h1.stl2 { visibility:hidden }
</style>
<title></title>
</head>
<body>
<h1 class="stl1">Cabeçalho 1</h1>
<p>Consegue ver o cabeçalho 2?</p>
</body>
</html>

Alterar o símbolo mostrado pelo cursor

<html>
<head>
<title></title>
</head>
<body>
<p> Passe com o ponteiro do mouse sobre as palavras mais abaixo e
veja como ele muda de forma.
</p>



<span style="CURSOR: auto">Auto</span><br>
<span style="CURSOR: crosshair">Crosshair</span><br>
<span style="CURSOR: default">Default</span><br>
<span style="CURSOR: pointer">Pointer</span><br>
<span style="CURSOR: move">Move</span><br>
<span style="CURSOR: e-resize">e-resize</span><br>
<span style="CURSOR: ne-resize">ne-resize</span><br>
<span style="CURSOR: nw-resize">nw-resize</span><br>
<span style="CURSOR: n-resize">n-resize</span><br>
<span style="CURSOR: se-resize">se-resize</span><br>
<span style="CURSOR: sw-resize">sw-resize</span><br>
<span style="CURSOR: s-resize">s-resize</span><br>
<span style="CURSOR: w-resize">w-resize</span><br>
<span style="CURSOR: text">text</span><br>
<span style="CURSOR: wait">wait</span><br>
<span style="CURSOR: help">help</span>
</body>
</html>

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:

seletor:pseudo-classe { propriedade: valor }

As classes CSS também podem ser utilizadas com pseudo-classes:

seletor.classe:pseudo-classe { propriedade: valor }



16.2 Pseudo-classes para ligações

Aviso: Os padrões do W3C dizem que a pseudo-classe hover deve funcionar
com todos os elementos que possuam conteúdo, mas o MSIE contém um bug que faz
com que ele só funcione com o elemento <a>

As ligações (links) em estado ativo, já visitadas, não visitadas, ou que se
encontram sob o ponteiro do mouse podem ser apresentadas com cores e estilos
diferentes:

a:link { color: #FF0000 } /* link ainda não visitado */
a:visited { color: #00FF00 } /* link já visitado */
a:hover { color: #FF00FF } /* link que está sob o ponteiro do mouse */
a:active { color: #0000FF } /* link selecionado */

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 são insensíveis ao tipo de letra. Pode-se usar
maiúsculas ou minúsculas sem distinção.

As pseudo-classes podem ser combinadas com classes CSS definidas na
página:

a.red:visited { color: #FF0000 }

<a class="red" href="pagina.html">uma página<a>

Se a ligação 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 não é bem suportada pelos browsers. Não a
utilize porque não 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:

div:first-child p { text-indent:25px }

No código seguinte, o seletor que acabamos de definir afeta o primeiro
parágrafo que está dentro do elemento div:

<div>
<p>
Este é o primeiro parágrafo.
Este parágrafo será deslocado para a direita.
</p>
<p>



Este é o segundo parágrafo.
Este parágrafo não será deslocado para a direita.
</p>
</div>

Mas o parágrafo do código HTML seguinte não será afetado porque não é o
primeiro descendente do elemento div:

<div>
<h3>Cabeçalho</h3>
<p>
Este é o primeiro parágrafo.
Este parágrafo não será deslocado para a direita
porque não é o primeiro descendente do elemento div.
</p>
</div>

No exemplo seguinte o seletor afetará um elemento <em> que apareça em
primeiro lugar (primeiro descendente) dentro de um elemento p, fazendo com que o
seu conteúdo seja escrito em negrito:

p:first-child em { font-weight:bold }

Por exemplo, o elemento <em> no HTML seguinte é o primeiro descendente do
parágrafo:

<p>Hércules é <em>forte</em> e corajoso.</p>

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

a:first-child { text-decoration:none }

Se aplicarmos este estilo ao exemplo seguinte iremos ver que o primeiro
elemento <a> do HTML é o primeiro descendente do parágrafo e por isso não vai estar
sublinhado, mas o segundo elemento <a> vai estar sublinhado:

<p>
Visite o <a href="http://www.w3.org">W3C</a>
e consulte as recomendações para CSS.
Visite o <a href="http://www.w3.org">W3C</a>
e consulte as recomendações para o HTML.
</p>

16.4 A pseudo-classe :lang

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

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

html:lang(fr) { quotes: '« ' ' »' }

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

blockquote:lang(fr) { quotes: '« ' ' »' }



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 não 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 estilísticos diferentes para
aplicar ao texto escrito numa determinada língua


Dar cores diferentes a uma ligação

<html>
<head>
a:link { color: #FF0000 }
a:visited { color: #00FF00 }
a:hover { color: #FF00FF }
a:active { color: #0000FF }
</style>
<title></title>
</head>
<body>
<p style="font-weight: bold">
<a href="ex_css.htm">Isto é uma ligação</a>
</p>
<p>
<b>Nota:</b> a:hover deve ser definido DEPOIS de a:link e de
a:visited já estarem definidos para que tudo funcione bem.
</p>
<p>
<b>Nota:</b> a:active deve ser definido DEPOIS de a:hover
já estar definido para que tudo funcione bem.
</p>
</body>
</html>



Dar outros estilos a uma ligação

<html>
<head>
a.stl1:link { color: #ff0000 }
a.stl1:visited { color: #0000ff }
a.stl1:hover { color: #ffcc00 }

a.stl2:hover { font-size: 150% }

a.stl3:hover { background: #66ff66 }

a.stl4:hover { font-family: fixedsys }

a.stl5:link { color: #ff0000; text-decoration: none }
a.stl5:visited { color: #0000ff; text-decoration: none }
a.stl5:hover { text-decoration: underline }
</style>
<title></title>
</head>
<body>
<p>
Passe com o ponteiro do mouse sobre as ligações e
veja como elas reagem de maneira diferente.
</p>
<p style="font-weight: bold">
<a class="stl1" href="ex_css.htm">Esta muda de cor</a><br>
<a class="stl2" href="ex_css.htm">Esta muda o tamanho das letras</a><br>
<a class="stl3" href="ex_css.htm">Esta muda a cor de fundo</a><br>
<a class="stl4" href="ex_css.htm">Esta muda o tipo de letra</a><br>
<a class="stl5" href="ex_css.htm">Esta muda a decoração do texto</a>
</p>
</body>
</html>

17. Pseudo-elementos
Os pseudo-elementos são usados em CSS para adicionar efeitos a alguns
seletores ou a partes de seletores.



17.1 Sintaxe

A sintaxe dos pseudo-elementos é a seguinte:

seletor:pseudo-elemento { propriedade: valor }

As classes CSS também podem ser utilizadas com pseudo-elementos:

seletor.classe:pseudo-elemento { propriedade: valor }

17.2 Uma formatação especial para a primeira linha

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

<html>
<head>
p { font-size: 12pt }
p:first-line { color: #0000FF; font-variant: small-caps }
</style>
</head>
<body>
<p>
Texto que ocupa<br> duas ou mais linhas<br>
A primeira linha tem uma<br> formatação especial
dada pelo pseudo-elemento first-line.
</p>
</body>
</html>

No exemplo anterior o browser apresenta a primeira linha formatada de acordo
com o pseudo-elemento "first-line". Se não forçarmos 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 são aplicáveis ao pseudo-elemento "first-line":

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



• espaço entre as palavras (word-spacing)
• espaço entre as letras (letter-spacing)
• decoração do texto (text-decoration)
• alinhamento vertical (vertical-align)
• transformação do texto (text-transform)
• altura das linhas (line-height)
• clear

O MSIE 5.0 não 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:first-letter { font-size: 200%; float: left }

<p>Primeiras palavras de um texto (...)<p>

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

<html>
<head>
p:first-letter { font-size: 200%; float: left }
</style>
</head>
<body>
<p>
A primeira letra deste parágrafo é maior<br> do que as restantes.
</p>
<p>
A primeira letra deste parágrafo é maior<br> do que as restantes.
</p>
</body>
</html>

Notas:

• O MSIE 5.0 não suporta o pseudo-elemento "first-letter".
• O pseudo-elemento "first-letter" só pode ser usado em elementos de bloco.
• As propriedades seguintes são aplicáveis 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 espaço entre o texto e a fronteira
o propriedades das linhas de fronteira
o decoração do texto (text-decoration)
o alinhamento vertical (apenas se 'float' tiver o valor 'none')
o transformação 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.artigo:first-letter { color: #FF0000 }

<p class="artigo">Um parágrafo de um artigo</p>

O código anterior faria com que a primeira letra de cada parágrafo que tenha
class="artigo" seja escrita seja vermelho. Os parágrafos que não tenham esta classe
não são afetados.

17.5 Vários pseudo-elementos

Podemos combinar vários pseudo-elementos para controlar a apresentação de
um elemento:

p:first-letter { color: red; font-size: 200% }
p:first-line { color: blue }

<p>Primeiras palavras de um artigo<p>

No output teremos a primeira letra de cada parágrafo com o dobro do tamanho
(24pt) e cor vermelha. Para além disso as restantes letras da primeira linha terão cor
azul. O resto do parágrafo será normal.

17.6 Os pseudo-elementos :before e :after

Aviso: Estes pseudo-elementos são bem suportados pelo Netscape 7/Mozilla+
e pelo Opera 7.2+ mas não pelo MSIE.

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

O estilo apresentado em baixo insere uma imagem com uma seta antes da
ocorrência de um cabeçalho de nível 4.

<html>
<head>
h4:before { content: url(seta.gif) }
</style>
</head>



<body>
<h4>Este cabeçalho tem uma seta</h4>
</body>
</html>

Aviso: Estes pseudo-elementos são bem suportados pelo Netscape 7/Mozilla+
e pelo Opera 7.2+ mas não pelo MSIE.

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

O estilo apresentado abaixo insere uma imagem com uma seta depois da
ocorrência de um cabeçalho de nível 4.

<html>
<head>
h4:after { content: url(seta.gif) }
</style>
</head>
<body>
<h4>Este cabeçalho tem uma seta</h4>
</body>
</html>

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 conteúdo antes de um elemento
after CSS2 Insere algum conteúdo depois de um elemento


Dar um estilo especial à primeira letra de um texto

<html>
<head>
div:first-letter
{
color: red;
font-size:xx-large
}
</style>
<title></title>
</head>
<body>
<p><b>Nota:</b> O Internet Explorer 5.0 não
suporta o pseudo-elemento "first-letter".</p>
<div>
O pseudo-elemento "first-letter" permite dar um estilo
especial ao texto fazendo com que a primeira letra de
um bloco tenha um estilo diferente.
</div>
</body>
</html>

Dar um estilo especial à primeira linha de um texto

<html>
<head>
div:first-line
{
color: #ff0000;
font-variant: small-caps
}
</style>
<title></title>
</head>
<body>
<p><b>Nota:</b> O Internet Explorer 5.0 não
suporta o pseudo-elemento "first-line".</p>
<div>
O pseudo-elemento "first-line" permite dar um estilo especial
ao texto fazendo com que a primeira linha de um bloco



tenha um estilo diferente das restantes.
</div>
</body>
</html>

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 precisão a forma
como os documentos são apresentados aos usuários. Podemos definir estilos para
serem aplicados quando as páginas são apresentadas graficamente num browser,
impressas sobre papel, ou lidas em voz alta num browser capaz de sintetizar voz.

Algumas propriedades definidas em CSS são aplicáveis apenas a um tipo de
media. Por exemplo, a propriedade "voice-family" só faz sentido quando a página é
apresentada por um browser capaz de sintetizar voz. Já a propriedade "font-size" só
faz sentido quando a página é apresentada graficamente num browser ou impressa
sobre papel, provavelmente com valores diferentes em cada um dos casos porque a
impressão 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 página é
impressa deve ser usado o tipo de letra Times com o tamanho 10pt. Tanto na tela
como na impressão o texto estará em negrito (bold):

<html>
<head>
<style>
@media screen /* estilos a aplicar na tela (screen) */
{
p.test { font-family:verdana,sans-serif; font-size:14px }
}
@media print /* estilos para impressão (print) */
{
p.test { font-family:times,serif; font-size:10pt }
}
@media screen,print /* estilos para tela e para impressão */
{
p.test { font-weight:bold }
}



</style>
</head>

<body>

....

</body>
</html>

18.2 Os vários tipos de media

Media Type Descrição
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 móveis (PDAs,
telefones celulares, ...)
print Define estilos para quando a página é impressa sobre papel
projection Define estilos para quando a página é apresentada num projetor
(slides, por exemplo)
screen Estilos para apresentação na tela de computador
tty Estilos para apresentação em terminais com recursos limitados
(caracteres com tamanho fixo e outras limitações)
tv Define estilos a aplicar quando a página é apresentada num
televisor ou aparelho semelhante



PARTE III: Material de Referência Rápida
19. Listagem das propriedades definidas em CSS

19.1 Fundos (background)

background Oferece-nos uma forma background-color CSS1
abreviada para escrever background-image
todas as propriedades do background-repeat
fundo de um elemento background-
numa única declaração. attachment
background-position
background- A propriedade background- scroll CSS1
attachment attachment indica se a fixed
imagem de fundo deve
permanecer imóvel na
janela do browser ou se
acompanha o deslizamento
(scroll) da página.
background-color Define a cor de fundo de color-rgb CSS1
um elemento. color-hex
color-name
transparent
background-image Define uma imagem para url CSS1
ser usada como fundo no none
elemento
background-position Define o local onde se top left CSS1
começa a desenhar a top center
imagem de fundo. top right
center left
center center
center right
bottom left
bottom center
bottom right
x-% y-%
x-pos y-pos
background-repeat Estabelece se a imagem de repeat CSS1
fundo deve repetir-se repeat-x
(formando um mosaico) ou repeat-y
não e as direções da no-repeat
repetição.

19.2 Linhas de fronteira (border)

border Oferece uma forma border-width CSS1
numa única declaração border-color
todos os parâmetros



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



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

19.3 Propriedades de classificação

clear Define os lados de um left CSS1
elemento dentro do qual right
não são permitidos both
elementos flutuantes none
cursor Especifica o tipo de cursor url CSS2
a apresentar auto
crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
display Indica se um elemento deve none CSS1
ser apresentado e a forma inline
como deve ser block
apresentado. 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 left CSS1
imagem ou bloco deve right
aparecer dentro de outro none
elemento.
position Coloca um elemento numa static CSS2
destas posições: estática, relative
relativa, absoluta ou fixa. absolute
fixed
visibility Indica se um elemento deve visible CSS2
estar visível ou invisível. hidden
collapse

19.4 Controle dos tamanhos dos elementos

height Define a altura de um auto CSS1
elemento comprimento
%
line-height Define a distância entre as normal CSS1
linhas número
comprimento
%
max-height Define a altura máxima de none CSS2
%
max-width Define a largura máxima de none CSS2
%
min-height Define a altura mínima de comprimento CSS2
um elemento %
min-width Define a largura mínima de comprimento CSS2
um elemento %
width Define a largura de um auto CSS1
elemento %
comprimento

19.5 Tipos de letra (font)




font Este propriedade oferece- font-style CSS1
nos uma forma abreviada font-variant
para definir numa única font-weight
declaração todas as font-size/line-height
propriedades relativas ao font-family
tipo de letra. caption
icon
menu
message-box
small-caption
status-bar
font-family A propriedade font-family family-name CSS1
consiste numa lista com os generic-family
tipos de letra que o browser
pode escolher para
escrever os textos. A lista
está ordenada de forma
prioritária: 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 família ou
nomes genéricos.
font-size Define o tamanho a aplicar xx-small CSS1
a um tipo de letra. x-small
small
medium
large
x-large
xx-large
smaller
larger
comprimento
%
font-size-adjust Se o tipo de letra (font) none CSS2
escolhido não estiver número
disponível, 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 acessível
preservando a altura da
letra "x" e mantendo a
legibilidade do texto.
font-stretch A propriedade font-stretch normal CSS2
provoca uma expansão ou wider



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

19.6 Gerar conteúdos

content Gera conteúdos e insere-os string CSS2
no documento. Usa-se em url
conjunto com os pseudo- counter(name)
elementos :before e :after 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
counter-increment Define quanto se deve none CSS2
incrementar o contador por número identificador
cada ocorrência de um
seletor.
counter-reset Define o valor a dar ao none CSS2
contador sempre que número identificador
ocorre um seletor.
quotes Define o estilo das aspas. none CSS2



string string

19.7 Listas e marcadores

list-style Este propriedade oferece- list-style-type CSS1
nos uma forma abreviada list-style-position
para definir numa única list-style-image
declaração todas as
propriedades relativas a
uma lista.
list-style-image Define uma imagem como none CSS1
marcador de item numa url
lista
list-style-position Define o local em que o inside CSS1
marcador deve ser outside
colocado na lista.
list-style-type Define o tipo de marcador a none CSS1
usar. 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
marker-offset auto CSS2
comprimento

19.8 Margens

margin Propriedade que nos margin-top CSS1
oferece uma forma margin-right
abreviada para definir numa margin-bottom
única declaração todas as margin-left
propriedades relativas às
quatro margens de um
elemento.
margin-bottom Define a margem inferior de auto CSS1
um elemento. comprimento



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

19.9 Linhas de contorno

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

19.10 Espaço em branco dentro de um elemento (padding)

padding Propriedade que nos padding-top CSS1
oferece uma forma padding-right
abreviada para definir numa padding-bottom
única declaração todos os padding-left
aspectos dos
espaçamentos entre o
conteúdo de um elemento e
os seus limites.
padding-bottom Define o espaço que separa comprimento CSS1
do seu limite inferior.
padding-left Define o espaço que separa comprimento CSS1
do seu limite esquerdo.



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

19.11 Posicionamento

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



bottom
text-bottom
comprimento
%
z-index Define a ordem de auto CSS2
apresentação (prioridade) número
dos elementos no caso de
existir sobreposição entre
eles.

19.12 Formatação de tabelas

border-collapse Define o modelo da linha de collapse CSS2
fronteira de uma tabela. separate
border-spacing Define a distância entre as comprimento CSS2
linhas de fronteira de
células adjacentes
(aplicável apenas quando
se usa o modelo "separated
borders" para as linhas de
fronteira da tabela)
caption-side Define a posição da top CSS2
legenda na tabela. bottom
left
right
empty-cells Indica se as células que show CSS2
não têm conteúdo visível hide
devem ter linhas de
fronteira ou não (aplicável
apenas quando se usa o
modelo "separated borders"
para as linhas de fronteira
da tabela.)
table-layout Escolhe o algoritmo a usar auto CSS2
para desenhar a tabela. fixed

19.13 Formatação de texto

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



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

20. Referência de CSS2 Print
Nota: A última coluna de cada tabela, cujo título é W3C, indica o padrão que
define a propriedade. CSS1 significa que a propriedade é definida pelo padrão
"Cascading Style Sheets level 1" e CSS2 significa que a propriedade é definida pelo
padrão "Cascading Style Sheets level 2".

20.1 Propriedades para impressão de documentos

A impressão satisfatória de documentos escritos em HTML tem sido sempre
um problema complicado. O fato de uma página HTML poder ter comprimento e
largura arbitrários entra em conflito com os tamanhos fixos de uma folha de papel.
Muitas vezes é bastante difícil fazer com que a largura uma página da Web caiba
numa folha de papel e conseguir mudanças de página que não quebrem elementos
que devem ficar inteiros.

O padrão CSS2 tenta dar uma ajuda para atenuar este problema através da
definição de propriedades específicas para a impressão de documentos em papel.

As ligações apresentadas na coluna "Propriedade" apontam para mais
informação útil acerca da propriedade em causa.

orphans Define o número mínimo de número CSS2
linhas de um parágrafo que
podem ficar sozinhas no fim
de uma página.
page Define o tipo de página que auto CSS2
deve ser usado para identificador
imprimir um elemento.
page-break-after Define a forma como se auto CSS2
fazem as mudanças de always
página depois de um avoid
elemento. left
right
page-break-before Define a forma como se auto CSS2
fazem as mudanças de always



página antes de um avoid
elemento. left
right
page-break-inside Define a forma como se auto CSS2
fazem as mudanças de avoid
página dentro de um
elemento.
widows Define o número mínimo de número CSS2
linhas de um parágrafo que
podem ficar sozinhas no
topo de uma página.



PARTE IV: Referência CSS
1. background
A propriedade background permite-nos escrever de forma abreviada numa só
declaração todos os parâmetros relativos ao fundo de um elemento.

Herdada: Não

Exemplo

body { background: url(bg_pegadas.jpg) #f0f8ff fixed }

Valores permitidos

Valor Descrição
Todos os valores que podemos Oferece-nos uma forma abreviada para escrever
dar às seguintes propriedades: todas as propriedades do fundo numa única
declaração.
background-color,
background-image,
background-repeat,
background-attachment,
background-position

2. background-attachment
A propriedade background-attachment indica se a imagem de fundo deve
permanecer imóvel na janela do browser ou se acompanha o deslizamento (scroll) da
página.

Herdada: Não

Exemplo

body
{
background-image: url(bg_pegadas.jpg);
background-attachment: scroll
}

Valores permitidos

Valor Descrição
scroll A imagem de fundo desliza juntamente com o resto da página
fixed A imagem de fundo não desliza com o resto da página. Ela permanece
imóvel na janela do browser.

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

Herdada: Não



Exemplo

P { background-color: #00ff00 }

Valores permitidos

Valor Descrição
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 código 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 não conseguir carregá-la.

Herdada: Não

Exemplo

body
{
background-color: #000000
}

Valor Descrição
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 começa a desenhar
a imagem de fundo.

Herdada: Não

Exemplo

body
{
background-position: top left
}

body
{
background-position: 0% 0%
}



Valores permitidos

Valor Descrição
top left Se escrever apenas uma palavra o browser dará à segunda o
top center valor por omissão "center".
top right
center left
center center
center right
bottom left
bottom center
bottom right
x-% y-% O primeiro valor é a posição segundo a horizontal e o segundo
valor é a posição 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 omissão de 50%.
x-pos y-pos O primeiro valor é a posição segundo a horizontal e o segundo
valor é a posição 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 posições absolutas com posicionamentos percentuais.
Se escrever apenas um valor o browser dará ao segundo o valor
por omissão de 50%.

6. background-repeat
A propriedade background-repeat estabelece se a imagem de fundo deve ou
não repetir-se (formando um mosaico) e indica as direções da repetição.

Herdada: Não

Exemplo

body
{
background-repeat: repeat-x
}

Valores permitidos

Valor Descrição
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 não se repete (é desenhada uma única vez).

7. border
A propriedade border permite escrever de forma abreviada numa única
declaração todos os parâmetros relativos às linhas de fronteira.



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

Herdada: Não

Exemplo

P { border: thin dotted #00FF00 }
Span { border: solid #0000FF }

Valores permitidos

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

8. border-color
A propriedade border-color define a cor das quatro linhas de fronteira. Ela
aceita no mínimo uma cor e no máximo quatro cores.

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

Herdada: Não

Exemplo

table { border-color: red }
/* todas as quatro linhas de fronteira serão vermelhas (red)*/

table { border-color: red green }
/* as linhas de fronteira do topo e de baixo serão vermelhas e as linhas da
esquerda e direita serão verdes */

table { border-color: red green blue }
/* a linha de topo será vermelha, as linhas esquerda e direita serão verdes e
a linha de baixo será azul */

table { border-color: red green blue yellow }
/* a linha de topo será vermelha, a linha direita será verde, a linha de
baixo será azul e a linha da esquerda será amarela. */

Valores permitidos

Valor Descrição
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 código 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: Não

Exemplo

table { border-style: dotted }
/* todas as quatro linhas de fronteira serão desenhadas com pontos */

table { border-style: dotted dashed }
/* as linhas de fronteira do topo e de baixo serão desenhadas com pontos e as
linhas esquerda e direita serão desenhadas com traços */

table { border-style: dotted dashed solid }
/* a linha de topo será desenhada com pontos, as linhas da esquerda e direita
serão desenhadas com traços e a linha de baixo será contínua */

table { border-style: dotted dashed solid double }
/* a linha de topo será desenhada com pontos, a linha direita será desenhada
com traços, a linha de baixo será contínua e a linha da esquerda será dupla */

Valores permitidos

Valor Descrição
none Faz com que não seja desenhada nenhuma linha de fronteira
hidden É o mesmo que "none" (a linha não é desenhada), exceto em situações
de resolução de conflitos com definições 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 traços. Alguns browsers acabam
desenhando uma linha contínua (estilo solid).
solid Define uma linha de fronteira contínua
double Define duas linhas de fronteira lado a lado. A largura das duas linhas
juntas é igual ao valor dado pelo parâmetro border-width.
groove Define uma linha de fronteira com um efeito 3D (estilo groove). A
qualidade do efeito depende do valor definido no parâmetro 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 notação abreviada para definir a largura das
quatro linhas de fronteira numa única declaração. Ela pode assumir quatro valores
diferentes.



Herdada: Não

Exemplo

table { border-width: thin }
/* todas as quatro linhas de fronteira serão finas */

table { border-width: thin medium }
/* as linhas de fronteira do topo e de baixo serão finas e as linhas da
esquerda e direita serão médias */

table { border-width: thin medium thick }
/* a linha de topo será fina, as linhas da esquerda e direita serão médias e a
linha de baixo será grossa */

table { border-width: thin medium thick none }
/* a linha de topo será fina, a linha direita será média, a linha de baixo
será grossa e no lado esquerdo não será desenhada qualquer linha */

Valores permitidos

Valor Descrição
thin Define uma linha de fronteira fina
medium Define uma linha de fronteira média
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 são totalmente análogas: bottom é o lado de baixo,
top o lado de cima, left o lado esquerdo e right é o lado direito. A descrição e os
exemplos que se seguem usam o lado de baixo (bottom). Para obtermos as
descrições dos restantes lados basta trocar bottom por top, left, e right.

Descrição

A propriedade border-bottom permite-nos escrever de forma abreviada numa
só declaração todos os parâmetros relativos à linha de fronteira de baixo.

Herdada: Não

Exemplo

Table { border-bottom: thin dotted #00FF00 }

Span { border-bottom: solid #0000FF }

Valores permitidos

Valor Descrição
border-bottom-width Pode assumir os valores das propriedades indicadas à
border-style esquerda.
border-color



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

Descrição

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

Herdada: Não

Exemplo

Table { border-bottom-color: #ff3366 }
Table { border-bottom-color: rgb(255,0,0) }

Valores permitidos

Valor Descrição
exemplo).

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

Descrição

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

Herdada: Não

Exemplo

Table { border-bottom-style: solid }

Valores permitidos

Valor Descrição
none Faz com que não seja desenhada nenhuma linha de fronteira
hidden É o mesmo que "none" (a linha não é desenhada), exceto em situações
de resolução de conflitos com definições 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 traços. Alguns browsers acabam por
desenhar uma linha contínua (estilo solid).
solid Define uma linha de fronteira contínua
double Define duas linhas de fronteira lado a lado. A largura das duas linhas
juntas é igual ao valor dado pelo parâmetro 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

Descrição

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

Herdada: Não

Exemplo

Table { border-bottom-width: thin }
Table { border-bottom-width: 0.5px }

Valores permitidos
Valor Descrição
thin Define uma linha de fronteira fina em baixo
medium Define uma linha de fronteira média 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 posições 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 são elementos flutuantes. A propriedade clear impõe
restrições na colocação dos elementos flutuantes.

Herdada: Não

Exemplo

h2 { clear: right }
address { clear: both }

Valores permitidos

Valor Descrição
left Não são permitidos elementos flutuantes no lado esquerdo
right Não são permitidos elementos flutuantes no lado direito
both Não são permitidos elementos flutuantes no lado esquerdo
nem no lado direito
none São 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 { cursor: crosshair }
p { cursor : url("first.cur"), pointer }

Valores permitidos

Valor Descrição
url O URL de um arquivo que contém a definição do cursor a
usar. Nota: Indique também um cursor genérico para ser
apresentado caso o arquivo que contém o cursor especial não
puder der carregado.
default O cursor a usar por omissão (geralmente uma seta)
auto O browser escolhe o cursor
crosshair Um cursor em forma de cruz
pointer Um cursor para apontar para uma ligação de hipertexto
(normalmente uma mão 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
execução (normalmente uma ampulheta ou um relógio)
help Este cursor indica que há informação auxiliar disponível
(assume normalmente a forma de um ponto de interrogação)

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

Herdada: Não

Exemplos

p { display: block }
li { display: list-item }
table { display: table }
td, th { display: table-cell }

Valores permitidos

Valor Descrição
none O elemento não será apresentado
block O elemento será apresentado como se fosse um elemento de
bloco, com uma mudança de linha antes e outra depois.
inline O elemento será apresentado como se fosse um elemento
"inline" sem mudanças de linha antes nem depois da sua
ocorrência.
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 mudanças de linha antes e depois.
inline-table O elemento será apresentado como uma tabela (<table>),
mas sem mudanças 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
cabeçalho 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 células de
uma tabela (<col>)
table-cell O elemento será apresentado como uma célula 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: Não

Exemplo

Img { float: left }

Valores permitidos

Valor Descrição
left O elemento flutua para a esquerda do conteúdo do elemento
que o contém
right O elemento flutua para a direita do conteúdo do elemento que
o contém
none Não há flutuação. O elemento é apresentado no local em que
aparece.

19. position
A propriedade position serve para colocar um elemento numa posição absoluta,
relativa, fixa ou estática.

Herdada: Não

Exemplo

h1
{
position:absolute;
left:100px;
top:150px;
}



Valores permitidos

Valor Descrição
static O elemento é colocado na sua posição normal. Quando usamos
este valor não devemos definir as propriedades left nem top.
relative Desloca o elemento relativamente à sua posição normal ("left:
20px" desloca-o 20 pixels para a direita)
absolute Coloca o elemento numa posição absoluta sobre a página. "left:
20px" significa que ele começa 20 pixels à direita do extremo
esquerdo da página.

20. visibility
A propriedade visibility indica se um elemento deve ou não ser visível.

Nota: Os elementos invisíveis continuam a ocupar espaço na página. Se
precisar de usar elementos que não ocupam espaço use a propriedade display com
"display: none".

Nota: Esta propriedade é muito usada em scripts de HTML Dinâmico.

Herdada: Não

Exemplo

P { visibility: visible }

Valores permitidos

Valor Descrição
visible O elemento é visível
hidden O elemento é invisível
collapse Quando usado em elementos de tabela este valor remove uma
linha ou uma coluna sem alterar o arranjo da tabela. O espaço
que seria ocupado pelos elementos removidos fica disponível
para outros conteúdos. Quando usado em elementos que não
tabelas dá o mesmo resultado que "hidden".

21. height
A propriedade height define a altura de um elemento

Herdada: Não

Exemplo

Img { height: 230px }

Valores permitidos

Valor Descrição
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 contém

22. line-height
A propriedade line-height define a distância entre as linhas

Nota: Não são permitidos números negativos

Herdada: Sim

Exemplo

P { line-height: 1.4 }
P { line-height: 14pt }
P { line-height: 140% }

Valores permitidos

Valor Descrição
normal Define um valor razoável para a distância entre as linhas
número Define um número que será multiplicado pelo tamanho de letra em
uso para estabelecer a distância entre as linhas
comprimento Define um valor fixo para a distância entre as linhas
% Define a distância entre as linhas como uma porcentagem do
tamanho de letra usado

23. max-height
A propriedade max-height define a altura máxima permitida para um elemento

Herdada: Não

Exemplo

P { max-height: 100px }

Valores permitidos

Valor Descrição
none Não estabelece qualquer limite para a altura máxima do elemento
comprimento Define a altura máxima do elemento
% Define a altura máxima do elemento como uma porcentagem da
altura do bloco que o contém

24. max-width
A propriedade max-width define a largura máxima de um elemento

Herdada: Não

Exemplo

h2 { max-width: 500px }



Valores permitidos

Valor Descrição
none Não estabelece qualquer limite para a largura máxima do elemento
comprimento Define a largura máxima permitida para o elemento
% Define a largura máxima permitida para o elemento como uma
porcentagem da largura do bloco que o contém

25. min-height
A propriedade min-height define a altura mínima de um elemento

Herdada: Não

Exemplo

P { min-height: 10px }

Valores permitidos

Valor Descrição
comprimento Define a altura mínima do elemento
% Define a altura mínima do elemento como uma porcentagem da
altura do bloco que o contém

26. min-width
A propriedade min-width define a largura mínima de um elemento

Herdada: Não

Exemplo

h2 { min-width: 50px }

Valores permitidos

Valor Descrição
comprimento Define a largura mínima do elemento
% Define a largura mínima do elemento como uma porcentagem da
largura do bloco que o contém

27. width
A propriedade width define a largura de um elemento

Herdada: Não

Exemplo

Img { width: 100% }



Valores permitidos

Valor Descrição
auto É o browser que decide a largura a usar
% Define a largura do elemento como uma porcentagem da largura do
elemento que o contém
comprimento Define uma largura fixa em unidades px, cm, etc.

28. font
A propriedade font é, com exceção de alguns tipos de letra de sistema, uma
forma abreviada de definir todas as propriedades do texto usando uma única
declaração.

Nota: Esta propriedade aceita mais uma definição. Trata-se de "line-height",
que define o espaço entre as linhas.

Herdada: Sim

Exemplo

P { font: italic bolder }
P { font: italic small-caps bold 12px arial }
P { font: oblique small-caps 900 12px/14px arial }
P { font: menu }

Valores permitidos

Valor Descrição
font-style Aceita os valores que podem ser dados às propriedades
font-variant listadas à esquerda mais os valores que se encontram
font-weight listados nas linhas seguintes desta tabela.
font-size
font-family
caption Define as propriedades do tipo de letra a usar para escrever
as legendas em elementos de formulários (botões, 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
diálogo.
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
prioritária: 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 família do tipo de letra, como "times", "courier", "arial",
etc.
• generic-family: O nome genérico de família, como "serif", "sans-serif", "cursive",
"fantasy", "monospace".

Nota: Os múltiplos valores dados à propriedade font-family devem ser
separados por virgulas. Como precaução escreva sempre como última opção um
nome genérico (generic-family).

Nota: Se o nome de família tiver um espaço deve colocá-lo entre aspas. Se a
definição se faz através do atributo style do HTML use aspas simples.

Herdada: Sim

Exemplo

Body { font-family: courier, serif }
P { font-family: arial, "lucida console", sans-serif }

<p style="font-family: arial, 'lucida console', sans-serif">

Valores permitidos

Valor Descrição
family-name Uma lista ordenada de forma prioritária contendo nomes que o
generic-family browser pode escolher.

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

Herdada: Sim

Exemplo

Body { font-size: x-large }
P { font-size: 10px }

Valores permitidos

Valor Descrição
xx-small Define o tamanho de letra para diversas dimensões, desde xx-small
x-small (menor) até xx-large (maior)
small
medium
large
x-large
xx-large
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 razão entre o valor da propriedade "font-size" e a altura da letra "x" minúscula
designa-se por "aspect value". Se o valor do "aspect value" for grande, o texto
continuará a ser legível 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 legível do
que o tipo de letra Times New Roman quando se escreve com letras muito pequenas.

Se o tipo de letra (font-family) escolhido não estiver disponível, 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 acessível preservando a altura da letra "x"

Herdada: Sim

Exemplo

h2 { font-size-adjust: 0.58 }

Valores permitidos

Valor Descrição
none Não é preciso preservar a altura da letra x quando for necessário
substituir o tipo de letra por outro diferente.
número Define o "aspect value" para o tipo de letra (font)

Fórmula:
font-size para aplicar ao tipo de letra disponível = (font-size do tipo de
letra que é primeira escolha) * font-size-adjust / "aspect value" do tipo
de letra disponível)

Exemplo: Se o tipo de letra escolhido é Verdana o "aspect value" é
de 0.58. Se este tipo de letra e não estiver disponível, 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 expansão ou uma contração horizontal
no tamanho da letra.

Nota: Só a largura sofre um aumento ou uma redução. A altura dos caracteres
não é afetada.



Nota: Use esta propriedade com cautela pois alguns browsers usados
atualmente podem não reconhecê-la.

Herdada: Sim

Exemplo

h2 { font-stretch: ultra-condensed }

Valores permitidos

Valor Descrição
normal Define o valor normal (não há contração nem expansão)
wider Aumenta a largura dos caracteres
narrower Reduz a largura dos caracteres
ultra-condensed Define a escala para a contração ou para a expansão dos
extra-condensed caracteres. "ultra-condensed" é o tamanho mais estreito de
condensed todos e "ultra-expanded" é o tamanho mais largo de todos
semi-condensed
semi-expanded
expanded
extra-expanded
ultra-expanded

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

Herdada: Sim

Exemplo

Body { font-style: italic }

Valores permitidos

Valor Descrição
normal O texto é escrito com o tipo de letra normal
italic O texto é escrito com caracteres itálicos (inclinados)
oblique O texto é escrito com caracteres oblíquos

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 maiúscula (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 { font-variant: small-caps }



Valores permitidos

Valor Descrição
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 traço com que são
desenhadas as letras do texto

Herdada: Sim

Exemplo

P { font-weight: bold }

Valores permitidos

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

36. content
A propriedade content usa-se em combinação com os pseudo-elementos
:before e :after. Esta propriedade gera conteúdos que serão anexados antes (se usado
com :before) ou depois (se usado com :after) do seletor CSS em que é usada.

Herdada: Não

Exemplo

h4:before { content: url(seta.gif) }

Valores permitidos

Valor Descrição
string Define conteúdo 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
páginas sempre que for encontrado um determinado seletor CSS. O valor pré-
estabelecido (por omissão) é 1.

Nota: Se um elemento usar a propriedade "display: none" então o seu
aparecimento não incrementará o contador, mas se usar "visibility: hidden" então o seu
aparecimento já incrementará o contador.

Herdada: Não

Exemplo

Uma solução para numerarmos seções na forma "Seção 1", "Seção 2", "Seção
3", etc:

h1:before
{
content: "Seção " counter(section) " ";
/* Adiciona 1 ao número da seção */
counter-increment: section;
}

Uma solução para numerarmos seções na forma "Seção 1", "Seção 3", "Seção
5", etc:

h1:before
{
content: "Seção " counter(section) " ";
/* Adiciona 2 ao número da seção */
counter-increment: section 2;
}

Valores permitidos

Valor Descrição
none Não aplicar qualquer incremento ao encontrar o seletor CSS
número O identificador define um seletor, um ID ou uma classe que
identificador ao serem encontrados provocarão um incremento do
contador. O número define o valor do incremento a aplicar. O
número pode ser positivo,zero, ou negativo.



38. counter-reset
A propriedade counter-reset estabelece o valor que será atribuído ao contador
ao ser encontrado um seletor. O valor por omissão é zero.

Nota: Se um seletor tiver "display: none" o seu aparecimento não fará mudar o
valor do contador, mas se tiver "visibility: hiden" então o seu aparecimento fará com
que seja atribuído ao contador o valor definido pela propriedade counter-reset.

Herdada: Não

Exemplo

Uma solução para numerarmos seções e subseções na forma "Seção 1",
"Seção 2", "Seção 3", etc:

h1:before
{
content: "Seção " counter(section) ". ";
/* Adiciona 1 ao número de seção */
counter-increment: section;
/* Coloca a sub-seção a 0 */
counter-reset: section;
}

h2:before
{
content: counter(section) "." counter(sub-section) " ";
counter-increment: sub-section;
}

Valores permitidos

Valor Descrição
none O seletor não provoca o "reset" do contador
número O identificador define um seletor, um ID, ou uma classe que
identificador ao serem encontrados provocarão o "reset" do contador. O
número estabelece o valor a ser atribuído ao contador sempre
que aparecer o seletor. O número 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 declaração.

Herdada: Sim

Exemplos

Ul { list-style: disc outside }
Ol { list-style: decimal inside }

Valores permitidos

Valor Descrição
list-style-type Podemos usar os valores permitidos para as propriedades



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

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 também a propriedade list-style-type
para servir de alternativa no caso de a imagem não puder ser usada.

Herdada: Sim

Exemplo

ol
{
list-style-image: url(seta.gif);
list-style-type: circle
}

Valores permitidos

Valor Descrição
url O URL da imagem a usar como marcador.
none Não 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 { list-style-position: inside }

Valores permitidos

Valor Descrição
inside Os marcadores passam para o lado de dentro dos itens da
lista (deslocam-se para a direita). Com esta opção, se o texto
de um item da lista ocupar mais do que uma linha, as linhas
depois da primeira começam mesmo por baixo do marcador
(são 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 não suportam todos os tipos indicados mais abaixo e os
mais antigos suportam apenas o tipo "disc".

Herdada: Sim

Exemplo

ul { list-style-type: disc }

Valores permitidos

Valor Descrição
none Não usar marcadores
disc Usar um disco como marcador (círculo cheio)
circle Circunferência (anel)
square Quadrado
decimal Usar números como marcador
decimal-leading-zero Usar números como marcador com zeros à esquerda (01, 02,
03, etc.) Pertence ao padrão CSS2.
lower-roman Usar números romanos minúsculos (i, ii, iii, iv, v, etc.)
upper-roman Usar números romanos maiúsculos (I, II, III, IV, V, etc.)
lower-alpha Usar letras do alfabeto minúsculas (a, b, c, d, e, etc.)
upper-alpha Usar letras do alfabeto maiúsculas (A, B, C, D, E, etc.)

43. margin
A propriedade margin permite-nos escrever de forma abreviada numa única
declaração as propriedades das quatro margens de um elemento de bloco.

Nota: As margens podem ter valores negativos.

Herdada: Não

Exemplos

h1 { margin: 10px }
/* todas as margens têm 10px */

h1 { margin: 10px 2%}
/* as margens de cima e de baixo (top e bottom) têm 10px e as margens esquerda
e direita (left e right) têm 2% da largura total do documento. */

h1 { margin: 10px 2% -10px }
/* a margem de cima (top) tem 10px, as margens esquerda e direita têm 2% da
largura total do documento e a margem de baixo tem -10px (valor negativo). */

h1 { margin: 10px 2% -10px auto }
/* a margem de cima tem 10px, a margem direita tem 2% da largura total, a
margem de baixo tem -10px e a largura da margem esquerda será escolhida pelo
browser. */

Valores permitidos

Valor Descrição
margin-top Podemos usar os valores permitidos para as propriedades
margin-right indicadas à esquerda.



margin-bottom
margin-left

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

Descrição

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

Nota: São permitidos valores negativos.

Herdada: Não

Exemplo

h1 { margin-bottom: 10px }
h2 { margin-bottom: -20px }

Valores permitidos

Valor Descrição
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 obtém com as propriedades de border, que definem as linhas de fronteira que são
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: Não

Exemplo

button { outline: red solid thin }

Valores permitidos

Valor Descrição
outline-color Podemos usar todos os valores permitidos para as



outline-style propriedades indicadas à esquerda numa única declaração
outline-width

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 obtém com as propriedades de border, que definem as linhas
de fronteira que são desenhadas ao redor de um elemento.


Herdada: Não

Exemplo

button { outline-color: red }

Valores permitidos

Valor Descrição
invert Inverte as cores. Este truque pode ser usado para assegurar que a
linha de fronteira (border) é sempre visível 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

button { outline-style: solid }

Valores permitidos

Valor Descrição
none Não são desenhadas linhas de contorno de tipo outline
dotted Desenha uma linha formada por pontos
dashed Desenha uma linha formada por traços



solid Desenha uma linha contínua
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
obtém 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: Não

Exemplo

Button { outline-width: medium }

Valores permitidos

Valor Descrição
thin Uma linha fina
medium Uma linha de largura média
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 espaçamentos que separam os
limites de um elemento dos seus conteúdos usando uma única declaração.

Nota: Não são permitidos valores negativos.

Herdada: Não

Exemplo

h1 { padding: 10px }
/* a separação (padding) entre os conteúdos e os limites é de 10px em todos os
quatro lados */

h1 { padding: 10px 2% }



/* os conteúdos ficam separados dos limites de cima e de baixo por 10px; a
separação entre os limites esquerdo e direito e os conteúdos é 2% da largura
total do elemento */

h1 { padding: 10px 2% 15px }
/* o padding em cima é de 10px, à direita e à esquerda é de 2% da largura
total do elemento e em baixo é 15px */

Valores permitidos

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

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

Descrição

A propriedade padding-bottom define o espaço em branco que separa o
conteúdo de um elemento do seu limite de baixo.

Nota: Não são permitidos valores negativos.

Herdada: Não

Exemplo

h1 { padding-bottom: 10px }

Valores permitidos

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

51. bottom, left, top, right

Descrição

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



Nota: Se a propriedade position tiver o valor static a propriedade bottom não
produzirá qualquer efeito.

Nota: São permitidos valores negativos.

Herdada: Não

Exemplos

p
{
position: absolute;
bottom: 20px
}
/* este exemplo faz com que o limite de baixo do elemento fique 20px acima do
limite de baixo da janela que contém a página */

p
{
position: absolute;
bottom: -20px
}
/* este exemplo faz com que o limite de baixo do parágrafo fique 20px abaixo
do limite de baixo da janela */

Valores permitidos

Valor Descrição
auto Deixa o browser escolher a posição do limite inferior
% Define a posição do limite inferior como uma porcentagem da
altura da página
comprimento Define a posição do limite de baixo com um valor fixo dado em
px, pt, cm, etc.

52. clip
A propriedade clip define o retângulo 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 visível.

Nota: Esta propriedade não pode ser usada quando em simultâneo damos o
valor "visible" à propriedade overflow.

Herdada: Não

Exemplo

img { clip: rect(10px, 5px, 10px, 5px) }

Valores permitidos

Valor Descrição
rect(top, right, bottom, Define o retângulo (parte do elemento) que deve ficar visível.
left) top, right, bottom e left são unidades de comprimento
(normalmente px).



auto O browser escolhe o retângulo que deve ficar visível.

53. overflow
A propriedade overflow diz ao browser o que deve fazer no caso de o conteúdo
exceder a área que lhe está destinada.

Herdada: Não

Exemplo

p { overflow: scroll }

Valores permitidos

Valor Descrição
visible Mostra todo o conteúdo. Uma parte será apresentada já fora da
área do elemento a que pertence.
hidden O conteúdo é cortado. A parte que excede a área disponível não
será mostrada.
scroll O conteúdo é cortado, mas o browser acrescenta barras de
deslocamento (scrollbars) para que o restante conteúdo também
possa ser visto se necessário.
auto Caso ocorra um corte no conteúdo por ele exceder a área
disponível o browser deve acrescentar barras de deslocamento
(scrollbars) para que o excedente também possa ser visto se
necessário.

54. vertical-align
A propriedade vertical-align define o alinhamento vertical do elemento e do seu
conteúdo.

Herdada: Não

Exemplo

img { vertical-align: bottom }

Valores permitidos

Valor Descrição
baseline A linha de base (de baixo) do elemento é alinhada com a linha de
base do elemento que o contém.
sub Alinha o elemento ligeiramente abaixo da posição normal
(semelhante ao resultado que se obtém com o elemento <sub>
do HTML).
super Alinha o elemento ligeiramente acima da posição normal
(semelhante ao resultado que se obtém com o elemento <sup>
do HTML).
top Alinha o topo do elemento o mais acima possível 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 contém.
bottom Alinha o limite inferior do elemento o mais baixo possível 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. São permitidos valores negativos.

55. z-index
A propriedade z-index serve para definir a forma como os elementos se
sobrepõem na página. 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 visível
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: Não

Exemplo

img { z-index: -1 }

Valores permitidos

Valor Descrição
auto O valor de z-index é escolhido pelo browser
número 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

table { border-collapse: separate }

Valores permitidos

Valor Descrição
collapse Escolhe o modelo em que as linhas de fronteira estão juntas
separate Escolhe o modelo em que as linhas de fronteira estão separadas

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



Herdada: Sim

Exemplos

body { color: rgb(255,255,0) }

Valores permitidos

Valor Descrição
exemplo).

58. direction
A propriedade direction define a direção do texto

Herdada: Sim

Exemplos

div { direction: rtl }

Valores permitidos

Valor Descrição
ltr A direção é da esquerda para a direita ("left-to-right")
rtl A direção é da direita para a esquerda ("right-to-left")

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

Herdada: Sim

Nota: São permitidos números negativos

Exemplos

P { letter-spacing: 12px }
P { letter-spacing: -0.5px }

Valores permitidos

Valor Descrição
normal Define o espaçamento normal entre as letras.
comprimento Define um espaçamento 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 { text-align: center }

Valores permitidos

Valor Descrição
left Alinha o texto à esquerda
right Alinha o texto à direita
center Alinha o texto ao centro
justify Alinha o texto simultâneamente à esquerda e à direita inserindo no
interior os espaços que forem necessários.

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

Herdada: Sim

Nota: A cor da decoração deve ser definida através da propriedade "color".

Exemplos

P { text-decoration: underline }

Valores permitidos

Valor Descrição
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: São permitidos valores negativos. Se o valor for negativo a primeira linha
começa mais à esquerda do que as restantes.

Exemplos

P { text-indent: 20px }
P { text-indent: -12px }

Valores permitidos

Valor Descrição
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 contém o texto.

63. text-transform
A propriedade text-transform controla as letras de um elemento

Herdada: Sim

Exemplos

P { text-transform: uppercase }

Valores permitidos

Valor Descrição
none Define texto normal, com letras maiúsculas e minúsculas.
capitalize Todas as palavras começam com letra maiúscula.
uppercase Todas as letras são escritas como maiúsculas
lowercase Todas as letras são escritas como minúsculas

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

Herdada: Sim

Exemplos

P { white-space: normal }

Valores permitidos

Valor Descrição
normal O browser ignora os caracteres de espaço
pre O browser preserva todos os caracteres de espaço. O comportamento
é igual ao que se obtém com o elemento <pre> do HTML
nowrap O browser deixa de inserir mudanças de linha automáticas. A escrita de
texto só muda de linha quando é encontrado um elemento <br>.

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

Herdada: Sim

Nota: São permitidos valores negativos

Exemplos

p { word-spacing: 30px }



p { word-spacing: -0.5px }

Valores permitidos

Valor Descrição
normal Define o espaçamento normal entre as palavras.
comprimento Define um espaçamento 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
mudanças de página a seguir a um elemento quando a página é impressa.

Nota: Não podemos usar esta propriedade em elementos que têm
posicionamento absoluto.

Nota: As propriedades page-break devem ser usadas o menos possível 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: Não

Exemplo

Table { page-break-after: always }

Valores permitidos

Valor Descrição
auto Se for preciso pode-se fazer uma mudança de página a seguir ao
elemento.
always Fazer sempre uma mudança de página a seguir ao elemento.
avoid Evitar as mudanças de página a seguir ao elemento.
left Fazer mudanças de página depois do elemento até se alcançar
uma página do lado esquerdo em branco (isto usa-se quando as
páginas do lado esquerdo e do lado direito recebem formatações
diferentes, como nos livros.)
right Fazer mudanças de página depois do elemento até se alcançar
uma página 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
mudanças de página antes de um elemento quando a página é impressa.


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



Herdada: Não

Exemplo

Table { page-break-before: always }

Valores permitidos
Valor Descrição
auto Se for preciso pode-se fazer uma mudança de página antes do
elemento.
always Fazer sempre uma mudança de página antes do elemento.
avoid Evitar as mudanças de página antes do elemento.
left Fazer mudanças de página antes do elemento até se alcançar uma
página do lado esquerdo em branco (isto usa-se quando as
right Fazer mudanças de página antes do elemento até se alcançar uma
página do lado direito em branco (isto usa-se quando as páginas do
lado esquerdo e do lado direito recebem formatações diferentes,
como nos livros.)

68. page-break-inside
A propriedade page-break-inside determina a forma como se fazem as
mudanças de página dentro de um elemento quando a página é impressa.


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

Herdada: Não

Exemplo

P { page-break-inside: avoid }

Valores permitidos
Valor Descrição
auto Se for preciso pode-se fazer uma mudança de página dentro do
elemento.
avoid Evitar as mudanças de página dentro do elemento.


Apostila: CSS

Mais conteúdo relacionado

Destaque

Semelhante a Apostila: CSS

Mais de Verônica Veiga

Último

Apostila: CSS