apostila: css

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

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

Í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



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> <style type="text/css"> 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> <style type="text/css"> 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> <style type="text/css"> 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> <style type="text/css"> .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> <style type="text/css"> 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 { 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. Exemplos de Aplicação 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> <style type="text/css"> 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 type="text/css">  </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> Exemplos de Aplicação 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: Exemplos de Aplicação Regras de cascata com um arquivo externo e estilos internos <html> <head> <link href="estilos.css" type="text/css" rel="stylesheet"> <style type="text/css">



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> <style type="text/css"> 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>



<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> <style type="text/css"> 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> <style type="text/css"> 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> <style type="text/css"> 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

abreviada para escrever todas as propriedades do fundo numa única declaração.

Esta propriedade aceita os valores que podemos dar a todas as restantes propriedades desta tabela (background-color, background-image, background-repeat background-attachment e background-position)

CSS1

background-attachment

A propriedade background-attachment indica se a imagem de fundo deve permanecer imóvel na janela do browser ou se acompanha o conteúdo quando o movemos (scroll).

scroll fixed

CSS1

background-color Define a cor de fundo de um elemento.

color-rgb color-hex color-name transparent

CSS1

background-image Define uma imagem de fundo para ser usada no elemento

url none

CSS1

background-position Define o local onde se começa a desenhar a imagem de fundo.

top left top center top right center left center center center right bottom left bottom center bottom right x-% y-% x-pos y-pos

CSS1

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

repeat repeat-x repeat-y no-repeat

CSS1

Exemplos de Aplicação Definir a cor de fundo <html> <head> <style type="text/css"> 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> <h2>Isto é um cabeçalho de nível 2</h2> <p>Isto é um parágrafo</p> </body> </html>

Colocar uma imagem como fundo de um elemento <html> <head> <style type="text/css"> 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><br> <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> <style type="text/css">



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

Controlar a posição de uma imagem de fundo <html> <head> <style type="text/css"> body { background-image: url("bg-pegadas.jpg"); background-repeat: no-repeat; background-position: 30 50 } </style> <title></title> </head> <body> <p>Texto da página</p><br> <p>Texto da página</p><br> <p>Texto da página</p><br> <p>Texto da página</p> </body> </html>



Imagens de fundo fixas (não acompanham o deslocamento da página) <html> <head> <style type="text/css"> body { background-image: url("bg-pegadas.jpg"); background-repeat: no-repeat; 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> 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> 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> 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> 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> </body> </html>



Uma única declaração para definir todas as propriedades do fundo <html> <head> <style type="text/css"> 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> <p>Texto da página</p><br><br> <p>Texto da página</p><br><br> <p>Texto da página</p><br><br> <p>Texto da página</p><br><br> <p>Texto da página</p><br><br> <p>Texto da página</p><br><br> <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 CSS1direction Define a direção de escrita

do texto ltr rtl

CSS2

letter-spacing Aumenta ou diminui o espaço entre os caracteres

normal comprimento

CSS1

text-align Alinha o texto dentro de um elemento

left right center justify

CSS1

text-decoration Adiciona pormenores decorativos ao texto

none underline overline

CSS1



line-through blink

text-indent Desloca para a direita ou para a esquerda a primeira letra da primeira linha do texto.

comprimento %

CSS1

text-transform Controla as letras de um elemento

none capitalize uppercase lowercase

CSS1

unicode-bidi normal embed bidi-override

CSS2

white-space Define a forma como é tratado o espaço em branco dentro de um elemento

normal pre nowrap

CSS1

word-spacing Aumenta ou diminui o espaço entre as palavras

normal comprimento

CSS1

Exemplos de Aplicação Definir a cor do texto <html> <head> <style type="text/css"> 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> <h2>Cabeçalho de nível 2</h2> <p>Texto da página</p><br><br> <p>Texto da página</p><br><br> <p>Texto da página</p><br><br> </body> </html>



Especificar o espaço que separa os caracteres <html> <head> <style type="text/css"> h1 { letter-spacing: -3px } h4 { letter-spacing: 0.5cm } </style> <title></title> </head> <body> <h1>Cabeçalho de nível 1</h1> <h4>Cabeçalho de nível 4</h4> </body> </html>

Alinhamento do texto <html> <head> <style type="text/css"> h1 { text-align: center } h2 { text-align: left } h3 { text-align: right } </style> <title></title> </head> <body> <h1>Cabeçalho de nível 1</h1> <h2>Cabeçalho de nível 2</h2> <h3>Cabeçalho de nível 3</h3> </body> </html>



Decoração do texto <html> <head> <style type="text/css"> h1 { text-decoration: overline } h2 { text-decoration: line-through } h3 { text-decoration: underline } a { text-decoration: none } </style> <title></title> </head> <body> <h1>Cabeçalho de nível 1</h1> <h2>Cabeçalho de nível 2</h2> <h3>Cabeçalho de nível 3</h3> <p><a href="http://www.w3.org">Isto é uma ligação</a></p> </body> </html>

Inícios de parágrafo <html> <head> <style type="text/css"> 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> <style type="text/css"> 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"> A class que demos a este parágrafo dá-lhe uma formatação em que todas as letras são minúsculas (em inglês "lowercase".) </p> <p class="capitalize"> A class que demos a este parágrafo dá-lhe uma formatação 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. Propriedade Descrição Valores W3C font Aceita os valores que

podem ser dados ao restante das propriedades desta tabela mais aqueles que se encontram na coluna seguinte desta linha. Oferece-nos uma forma abreviada para definir numa única declaração todas as propriedades relativas ao tipo de letra.

icon menu message-box small-caption status-bar

CSS1

font-family A propriedade font-family consiste numa lista com os tipos de letra que o browser pode escolher para escrever os textos. A lista está ordenada de forma 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.

family-name generic-family

CSS1

font-size Define o tamanho de um tipo de letra

xx-small x-small small medium large x-large xx-large smaller larger comprimento %

CSS1

font-size-adjust Se o tipo de letra (font) escolhido não estiver disponível, o browser vê-se obrigado a usar um outro tipo diferente. A propriedade font-size-adjust

none número

CSS2



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 provoca uma expansão ou uma contração horizontal no tamanho da letra.

normal wider ultra-condensed extra-condensed condensed semi-condensed semi-expanded expanded extra-expanded ultra-expanded

CSS2

font-style Define o estilo de letra a usar

normal italic oblique

CSS1

font-variant Escreve o texto usando um tipo de letra "small-caps" ou o tipo normal

normal small-caps

CSS1

font-weight Define a espessura do traço com que são desenhadas a letras

normal bold bolder lighter 100 200 300 400 500 600 700 800 900

CSS1

Exemplos de Aplicação Definir o tipo de letra para um texto <html> <head> <style type="text/css"> h3 { font-family: times } p { font-family: courier } p.sansserif { font-family: sans-serif } </style> <title></title> </head> <body> <h3>Isto é um cabeçalho de nível 3</h3> <p>Isto é um parágrafo</p> <p class="sansserif">Isto é um parágrafo com uma class diferente</p> </body> </html>



Definir o tamanho das letras <html> <head> <style type="text/css"> h1 { font-size: 150% } h2 { font-size: 130% } p { font-size: 100% } </style> <title></title> </head> <body> <h1>Isto é um cabeçalho de nível 1</h1> <h2>Isto é um cabeçalho de nível 2</h2> <p>Isto é um parágrafo</p> </body> </html>

Definir o estilo das letras <html> <head> <style type="text/css"> h1 { font-style: italic } h2 { font-style: normal } p { font-style: oblique } </style> <title></title> </head> <body> <h1>Isto é um cabeçalho de nível 1</h1> <h2>Isto é um cabeçalho de nível 2</h2> <p>Isto é um parágrafo</p>



</body> </html>

Definir uma variante de um tipo de letra <html> <head> <style type="text/css"> 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> <style type="text/css"> 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> <style type="text/css"> p { font: italic small-caps 900 13px arial } </style> <title></title> </head> <body> <p>Isto é um parágrafo</p> </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". Propriedade Descrição Valores W3C border Oferece uma forma

abreviada para escrever numa única declaração todos os parâmetros relativos às linhas de

border-width border-style border-color

CSS1



fronteira. Aceita os valores que podem ser dados às propriedades listadas à direita.

border-bottom Oferece-nos uma forma abreviada para escrever todas as propriedades da linha de fronteira do lado de baixo numa única declaração. Aceita os valores que podem ser dados às propriedades listadas à direita.


CSS1

border-bottom-color Define a cor da linha de fronteira de baixo

border-color CSS2

border-bottom-style Define o estilo da linha de fronteira de baixo

border-style CSS2

border-bottom-width Define a espessura da linha de fronteira de baixo

border-width CSS1

border-color Define as cores das quatro linhas de fronteira. Aceita de um a quatro valores.

cor CSS1

border-left Oferece-nos uma forma abreviada para escrevermos todas as propriedades da linha de fronteira do lado esquerdo numa única declaração. Aceita os valores que podem ser dados às propriedades listadas à direita.


CSS1

border-left-color Define a cor da linha de fronteira do lado esquerdo

border-color CSS2

border-left-style Define o estilo da linha de fronteira do lado esquerdo

border-style CSS2

border-left-width Define a espessura da linha de fronteira do lado esquerdo

border-width CSS1

border-right Oferece-nos uma forma abreviada para escrevermos todas as propriedades da linha de fronteira do lado direito numa única declaração. Aceita os valores que podem ser dados às propriedades listadas à direita.


CSS1

border-right-color Define a cor da linha de fronteira do lado direito

border-color CSS2

border-right-style Define o estilo da linha de fronteira do lado direito

border-style CSS2



border-right-width Define a espessura da linha de fronteira do lado direito

border-width CSS1

border-style A propriedade border-style define o estilo das quatro linhas de fronteira. Aceita de um a quatro valores.

none hidden dotted dashed solid double groove ridge inset outset

CSS1

border-top Oferece-nos uma forma abreviada para escrevermos todas as propriedades da linha de fronteira do lado de cima numa única declaração. Aceita os valores que podem ser dados às propriedades listadas à direita.


CSS1

border-top-color Define a cor da linha de fronteira superior

border-color CSS2

border-top-style Define o estilo da linha de fronteira superior

border-style CSS2

border-top-width Define a espessura da linha de fronteira superior

border-width CSS1

border-width Oferece-nos uma forma abreviada para definirmos as espessuras de todas as linhas de fronteira. Aceita de um a quatro valores.

thin medium thick comprimento

CSS1

Exemplos de Aplicação Definir o estilo das quatro linhas de fronteira <html> <head> <style type="text/css"> 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> <style type="text/css"> 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> <style type="text/css"> p.stl1 { border-style: solid; border-color: #0000ff } p.stl2 { border-style: solid; border-color: #ff0000 #0000ff } p.stl3 { border-style: solid; border-color: #ff0000 #00ff00 #0000ff } p.stl4 { border-style: solid; border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255) } </style> <title></title> </head> <body> <p class="stl1">Parágrafo com o estilo "stl1"</p> <p class="stl2">Parágrafo com o estilo "stl2"</p> <p class="stl3">Parágrafo com o estilo "stl3"</p> <p class="stl4">Parágrafo com o estilo "stl4"</p> </body> </html>



Definir a espessura da linha de fronteira inferior <html> <head> <style type="text/css"> p { border-style: solid; 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> <style type="text/css"> p { border-style: solid; border-left-width: 15px }



</style> <title></title> </head> <body> <p>

Nas versões mais antigas do MSIE 5 a propriedade "border-left-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 do lado direito <html> <head> <style type="text/css"> p { border-style: solid; border-right-width: 15px } </style> <title></title> </head> <body> <p>

Nas versões mais antigas do MSIE 5 a propriedade "border-right-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 superior <html> <head> <style type="text/css"> p { border-style: solid; border-top-width: 15px } </style> <title></title> </head> <body> <p>

Nas versões mais antigas do MSIE 5 a propriedade "border-top-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>

Todas as propriedades da linha de fronteira inferior numa única declaração <html> <head> <style type="text/css"> 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> <style type="text/css"> p { border-left: medium solid #ff0000 } </style> <title></title> </head> <body> <p>Parágrafo com texto</p> </body> </html>

Todas as propriedades da linha de fronteira do lado direito numa única declaração <html> <head> <style type="text/css"> p { border-right: medium solid #ff0000 } </style> <title></title> </head> <body> <p>Parágrafo com texto</p> </body> </html>



Todas as propriedades da linha de fronteira do lado de cima numa única declaração <html> <head> <style type="text/css"> p { border-top: medium solid #ff0000 } </style> <title></title> </head> <body> <p>Parágrafo com texto</p> </body> </html>

Todas as propriedades relativas à espessura das linhas de fronteira numa única declaração <html> <head> <style type="text/css"> p.stl1 { border-style: solid; border-width: 5px } p.stl2 { border-style: solid; border-width: 5px 10px } p.stl3 { border-style: solid; border-width: 5px 10px 1px }



p.stl4 { border-style: solid; border-width: 5px 10px 1px medium } </style> <title></title> </head> <body> <p class="stl1"> Nas versões mais antigas do MSIE 5 a propriedade "border-width" não é aplicada corretamente quando usada isoladamente. Neste caso devemos definir primeiro um valor para a propriedade "border-style" e só depois "border-width". </p> <p class="stl2">Parágrafo com texto</p> <p class="stl3">Parágrafo com texto</p> <p class="stl4">Parágrafo com texto</p> </body> </html>

Todas as propriedades das linhas de fronteira numa única declaração <html> <head> <style type="text/css"> p { border: medium double #ff00ff } </style> <title></title> </head> <body> <p>Parágrafo com texto</p> </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. Propriedade Descrição Valores W3C margin Propriedade que nos

oferece uma forma abreviada para definir numa única declaração todas as propriedades relativas às quatro margens de um elemento.

margin-top margin-right margin-bottom margin-left

CSS1

margin-bottom Define a margem inferior de um elemento

auto comprimento %

CSS1

margin-left Define a margem esquerda de um elemento

auto comprimento %

CSS1

margin-right Define a margem direita de um elemento

auto comprimento %

CSS1

margin-top Define a margem superior de um elemento

auto comprimento %

CSS1

Exemplos de Aplicação Definir a margem esquerda para um texto <html> <head> <style type="text/css"> 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> <style type="text/css"> p.margin { margin-right: 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 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> <style type="text/css"> p.margin { margin-top: 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 superior um pouco mais larga. </p> </body> </html>

Definir a margem inferior para um texto <html> <head> <style type="text/css"> p.margin { margin-bottom: 80px } </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 inferior um pouco mais larga. </p> <p> Este parágrafo contém algum texto não formatado com estilos CSS. </p> </body> </html>



Todas as propriedades relativas a margens numa única declaração <html> <head> <style type="text/css"> p.margin { margin: 2cm 4cm 3cm 4cm } </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 as margens são todas mais largas </p> <p> Este parágrafo contém algum texto não formatado com estilos CSS. </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: Propriedade Descrição Valores W3C padding Propriedade que nos

oferece uma forma abreviada para definir numa única declaração todos os aspectos dos espaçamentos entre o

padding-top padding-right padding-bottom padding-left

CSS1



conteúdo de um elemento e os seus limites.

padding-bottom Define o espaço que separa o conteúdo de um elemento do seu limite inferior

comprimento %

CSS1

padding-left Define o espaço que separa o conteúdo de um elemento do seu limite esquerdo

comprimento %

CSS1

padding-right Define o espaço que separa o conteúdo de um elemento do seu limite direito

comprimento %

CSS1

padding-top Define o espaço que separa o conteúdo de um elemento do seu limite superior

comprimento %

CSS1

Exemplos de Aplicação Definir o espaço em branco entre o limite esquerdo e o conteúdo de uma célula de tabela <html> <head> <style type="text/css"> 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> <style type="text/css"> td {padding-right: 50px} </style> <title></title>



</head> <body> <table border="1"> <tr> <td> Nesta célula de tabela existe uma separação de 50px 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> <style type="text/css"> td {padding-top: 32px} </style> <title></title> </head> <body> <table border="1"> <tr> <td> Nesta célula de tabela existe uma separação de 32px 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> <style type="text/css"> td {padding-bottom: 42px} </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 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> <style type="text/css"> 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: Propriedade Descrição Valores W3C height Define a altura de um

elemento auto comprimento %

CSS1

line-height Define a distância entre as linhas

normal número comprimento %

CSS1

max-height Define a altura máxima de um elemento

none comprimento %

CSS2

max-width Define a largura máxima de um elemento

none comprimento %

CSS2

min-height Define a altura mínima de um elemento

comprimento %

CSS2

min-width Define a largura mínima de um elemento

comprimento %

CSS2

width Define a largura de um elemento

auto % comprimento

CSS1

Exemplos de Aplicação Definir a altura e a largura de uma imagem <html>



<head> <style type="text/css"> 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> <style type="text/css"> 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. Isto é um parágrafo com texto. Isto é um parágrafo com texto. </p> <p class="aumentar"> Isto é um parágrafo com texto. Isto é um parágrafo com texto. 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>



</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.

Propriedade Descrição Valores W3C bottom Define a distância (para

baixo ou para cima) a que deve ficar o limite de baixo de um elemento relativamente ao limite de baixo do elemento que o contém.

auto % comprimento

CSS2

clip Define a forma de um elemento. O elemento é recortado na forma desejada e depois mostrado.

shape auto

CSS2

left Define a distância (para a esquerda ou para a direita) a que deve ficar o limite esquerdo de um elemento relativamente ao limite esquerdo do elemento que o contém.

auto % comprimento

CSS2

overflow Define o que acontece quando o conteúdo de um elemento excede a sua área.

visible hidden scroll auto

CSS2

right Define a distância (para a esquerda ou para a direita) a que deve ficar o limite direito de um elemento relativamente ao limite direito do elemento que o contém.

auto % comprimento

CSS2



top Define a distância (para baixo ou para cima) a que deve ficar o limite de cima de um elemento relativamente ao limite de cima do elemento que o contém.

auto % comprimento

CSS2

vertical-align Define o alinhamento vertical de um elemento.

baseline sub super top text-top middle bottom text-bottom comprimento %

CSS1

z-index Define a ordem de apresentação (prioridade) dos elementos no caso de existir sobreposição entre eles.

auto número

CSS2

Exemplos de Aplicação Define a posição do elemento relativamente ao topo e ao lado esquerdo da página <html> <head> <style type="text/css"> 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> <style type="text/css"> 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> <style type="text/css"> 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> <style type="text/css"> 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> <style type="text/css"> 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: Propriedade Descrição Valores W3C list-style Este propriedade oferece-

nos uma forma abreviada para definir numa única declaração todas as propriedades relativas a uma lista.

list-style-type list-style-position list-style-image

CSS1

list-style-image Define uma imagem como marcador de item numa lista

none url

CSS1

list-style-position Define a posição em que o marcador deve ser colocado

inside outside

CSS1

list-style-type Define o tipo de marcador a usar

none disc circle square decimal lower-roman upper-roman lower-alpha upper-alpha

CSS1

marker-offset auto comprimento

CSS2

Exemplos de Aplicação Símbolos disponíveis para marcadores de item em listas não ordenadas <html> <head> <style type="text/css"> 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> <style type="text/css"> 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> <style type="text/css"> 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> <style type="text/css"> 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: Propriedade Descrição Valores W3C clear Define os lados de um

elemento junto aos quais não são permitidos elementos flutuantes

left right both none

CSS1

cursor Especifica o tipo de cursor a apresentar

url auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help

CSS2

display Indica se e como um elemento deve ser

none inline

CSS2



apresentado block list-item run-in compact marker table inline-table table-row-group table-header-group table-footer-group table-row table-column-group table-column table-cell table-caption

float Define o lugar onde uma imagem ou elemento de bloco deve aparecer dentro de outro elemento

left right none

CSS1

position Coloca um elemento numa posição que pode ser estática, relativa, absoluta ou fixa

static relative absolute fixed

CSS2

visibility Indica se um elemento deve estar visível ou invisível

visible hidden collapse

CSS2

Exemplos de Aplicação Como deve ser apresentado um elemento? <html> <head> <style type="text/css"> 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> <style type="text/css"> 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> <style type="text/css"> 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> <style type="text/css"> 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> <style type="text/css"> h1.stl1 { visibility:visible } h1.stl2 { visibility:hidden } </style> <title></title> </head> <body> <h1 class="stl1">Cabeçalho 1</h1> <h1 class="stl2">Cabeçalho 2</h1> <h1 class="stl1">Cabeçalho 3</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

Exemplos de Aplicação Dar cores diferentes a uma ligação <html> <head> <style type="text/css"> 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> <style type="text/css"> a.stl1:link { color: #ff0000 } a.stl1:visited { color: #0000ff } a.stl1:hover { color: #ffcc00 } a.stl2:link { color: #ff0000 } a.stl2:visited { color: #0000ff } a.stl2:hover { font-size: 150% } a.stl3:link { color: #ff0000 } a.stl3:visited { color: #0000ff } a.stl3:hover { background: #66ff66 } a.stl4:link { color: #ff0000 } a.stl4:visited { color: #0000ff } 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> <style type="text/css"> 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 { font-size: 12pt } 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> <style type="text/css"> p { font-size: 12pt } 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 { font-size: 12pt } 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> <style type="text/css"> 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> <style type="text/css"> 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 Exemplos de Aplicação Dar um estilo especial à primeira letra de um texto <html> <head> <style type="text/css"> 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> <style type="text/css"> 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) Propriedade Descrição Valores W3C background Oferece-nos uma forma

abreviada para escrever todas as propriedades do fundo de um elemento numa única declaração.

background-color background-image background-repeat background-attachment background-position

CSS1

background-attachment

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

scroll fixed

CSS1

background-color Define a cor de fundo de um elemento.

color-rgb color-hex color-name transparent

CSS1

background-image Define uma imagem para ser usada como fundo no elemento

url none

CSS1

background-position Define o local onde se começa a desenhar a imagem de fundo.

top left top center top right center left center center center right bottom left bottom center bottom right x-% y-% x-pos y-pos

CSS1

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

repeat repeat-x repeat-y no-repeat

CSS1

19.2 Linhas de fronteira (border) Propriedade Descrição Valores W3C border Oferece uma forma

abreviada para escrever numa única declaração todos os parâmetros


CSS1



relativos às linhas de fronteira.

border-bottom Oferece-nos uma forma abreviada para escrever todas as propriedades da linha de fronteira do lado de baixo numa única declaração.

border-bottom-width border-style border-color

CSS1

border-bottom-color Define a cor da linha de fronteira de baixo

border-color CSS2

border-bottom-style Define o estilo da linha de fronteira de baixo

border-style CSS2

border-bottom-width Define a espessura da linha de fronteira de baixo


CSS1

border-color Define a cor das quatro linhas de fronteira. Aceita de um a quatro valores.

cor CSS1

border-left Oferece-nos uma forma abreviada para escrevermos todas as propriedades da linha de fronteira do lado esquerdo numa única operação.

border-left-width border-style border-color

CSS1

border-left-color Define a cor da linha de fronteira do lado esquerdo.

border-color CSS2

border-left-style Define o estilo da linha de fronteira do lado esquerdo.

border-style CSS2

border-left-width Define a espessura da linha de fronteira do lado esquerdo.


CSS1

border-right Oferece-nos uma forma abreviada para escrevermos todas as propriedades da linha de fronteira do lado direito numa única declaração.

border-right-width border-style border-color

CSS1

border-right-color Define a cor da linha de fronteira do lado direito.

border-color CSS2

border-right-style Define o estilo da linha de fronteira do lado direito.

border-style CSS2

border-right-width Define a espessura da linha de fronteira do lado direito.


CSS1

border-style A propriedade border-style define o estilo das quatro linhas de fronteira. Aceita de um a quatro valores.

none hidden dotted dashed solid

CSS1



double groove ridge inset outset

border-top Oferece-nos uma forma abreviada para escrevermos todas as propriedades da linha de fronteira do lado de cima numa única declaração.

border-top-width border-style border-color

CSS1

border-top-color Define a espessura da linha de fronteira superior.

border-color CSS2

border-top-style Define o estilo da linha de fronteira superior.

border-style CSS2

border-top-width Define a espessura da linha de fronteira superior.


CSS1

border-width Oferece-nos uma forma abreviada para definirmos as espessuras de todas as linhas de fronteira. Aceita de um a quatro valores.


CSS1

19.3 Propriedades de classificação Propriedade Descrição Valores W3C clear Define os lados de um

elemento dentro do qual não são permitidos elementos flutuantes

left right both none

CSS1

cursor Especifica o tipo de cursor a apresentar

url auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help

CSS2

display Indica se um elemento deve ser apresentado e a forma como deve ser apresentado.

none inline block list-item

CSS1



run-in compact marker table inline-table table-row-group table-header-group table-footer-group table-row table-column-group table-column table-cell table-caption

float Define o lugar onde uma imagem ou bloco deve aparecer dentro de outro elemento.

left right none

CSS1

position Coloca um elemento numa destas posições: estática, relativa, absoluta ou fixa.

static relative absolute fixed

CSS2

visibility Indica se um elemento deve estar visível ou invisível.

visible hidden collapse

CSS2

19.4 Controle dos tamanhos dos elementos Propriedade Descrição Valores W3C height Define a altura de um

elemento auto comprimento %

CSS1

line-height Define a distância entre as linhas

normal número comprimento %

CSS1

max-height Define a altura máxima de um elemento

none comprimento %

CSS2

max-width Define a largura máxima de um elemento

none comprimento %

CSS2

min-height Define a altura mínima de um elemento

comprimento %

CSS2

min-width Define a largura mínima de um elemento

comprimento %

CSS2

width Define a largura de um elemento

auto % comprimento

CSS1

19.5 Tipos de letra (font) Propriedade Descrição Valores W3C



font Este propriedade oferece-nos uma forma abreviada para definir numa única declaração todas as propriedades relativas ao tipo de letra.

font-style font-variant font-weight font-size/line-height font-family caption icon menu message-box small-caption status-bar

CSS1

font-family A propriedade font-family consiste numa lista com os tipos de letra que o browser pode escolher para escrever os textos. A lista está ordenada de forma 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.

family-name generic-family

CSS1

font-size Define o tamanho a aplicar a um tipo de letra.

xx-small x-small small medium large x-large xx-large smaller larger comprimento %

CSS1

font-size-adjust Se o tipo de letra (font) escolhido 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" e mantendo a legibilidade do texto.

none número

CSS2

font-stretch A propriedade font-stretch provoca uma expansão ou

normal wider

CSS2



uma contração horizontais no tamanho da letra.

narrower ultra-condensed extra-condensed condensed semi-condensed semi-expanded expanded extra-expanded ultra-expanded

font-style Define o estilo a aplicar ao tipo de letra.

normal italic oblique

CSS1

font-variant Escreve o texto usando um tipo de letra "small-caps" ou o tipo normal.

normal small-caps

CSS1

font-weight Define a espessura do traço com que são desenhadas a letras.

normal bold bolder lighter 100 200 300 400 500 600 700 800 900

CSS1

19.6 Gerar conteúdos Propriedade Descrição Valores W3C content Gera conteúdos e insere-os

no documento. Usa-se em conjunto com os pseudo-elementos :before e :after

string url counter(name) counter(name, list-style-type) counters(name, string) counters(name, string, list-style-type) attr(X) open-quote close-quote no-open-quote no-close-quote

CSS2

counter-increment Define quanto se deve incrementar o contador por cada ocorrência de um seletor.

none número identificador

CSS2

counter-reset Define o valor a dar ao contador sempre que ocorre um seletor.

none número identificador

CSS2

quotes Define o estilo das aspas. none CSS2



string string 19.7 Listas e marcadores Propriedade Descrição Valores W3C list-style Este propriedade oferece-

nos uma forma abreviada para definir numa única declaração todas as propriedades relativas a uma lista.

list-style-type list-style-position list-style-image

CSS1

list-style-image Define uma imagem como marcador de item numa lista

none url

CSS1

list-style-position Define o local em que o marcador deve ser colocado na lista.

inside outside

CSS1

list-style-type Define o tipo de marcador a usar.

none disc circle square decimal decimal-leading-zero lower-roman upper-roman lower-alpha upper-alpha lower-greek lower-latin upper-latin hebrew armenian georgian cjk-ideographic hiragana katakana hiragana-iroha katakana-iroha

CSS1

marker-offset auto comprimento

CSS2

19.8 Margens Propriedade Descrição Valores W3C margin Propriedade que nos

oferece uma forma abreviada para definir numa única declaração todas as propriedades relativas às quatro margens de um elemento.

margin-top margin-right margin-bottom margin-left

CSS1

margin-bottom Define a margem inferior de um elemento.

auto comprimento

CSS1



% margin-left Define a margem esquerda

de um elemento. auto comprimento %

CSS1

margin-right Define a margem direita de um elemento.

auto comprimento %

CSS1

margin-top Define a margem superior de um elemento.

auto comprimento %

CSS1

19.9 Linhas de contorno Propriedade Descrição Valores W3C outline Oferece-nos uma forma

abreviada para definir todas as propriedades do contorno numa única declaração.

outline-color outline-style outline-width

CSS2

outline-color Define a cor do contorno de um elemento.

color invert

CSS2

outline-style Define o estilo do contorno de um elemento.

none dotted dashed solid double groove ridge inset outset

CSS2

outline-width Define a espessura da linha de contorno de um elemento


CSS2

19.10 Espaço em branco dentro de um elemento (padding) Propriedade Descrição Valores W3C padding Propriedade que nos

oferece uma forma abreviada para definir numa única declaração todos os aspectos dos espaçamentos entre o conteúdo de um elemento e os seus limites.

padding-top padding-right padding-bottom padding-left

CSS1

padding-bottom Define o espaço que separa o conteúdo de um elemento do seu limite inferior.

comprimento %

CSS1

padding-left Define o espaço que separa o conteúdo de um elemento do seu limite esquerdo.

comprimento %

CSS1



padding-right Define o espaço que separa o conteúdo de um elemento do seu limite direito.

comprimento %

CSS1

padding-top Define o espaço que separa o conteúdo de um elemento do seu limite superior.

comprimento %

CSS1

19.11 Posicionamento Propriedade Descrição Valores W3C bottom Define a distância (para

baixo ou para cima) a que deve ficar o limite de baixo de um elemento relativamente ao limite de baixo do elemento que o contém.

auto % comprimento

CSS2

clip Define a forma de um elemento. O elemento é recortado na forma desejada e depois mostrado.

shape auto

CSS2

left Define a distância (para a esquerda ou para a direita) a que deve ficar o limite esquerdo de um elemento relativamente ao limite esquerdo do elemento que o contém.

auto % comprimento

CSS2

overflow Define o que acontece quando o conteúdo de um elemento excede a sua área.

visible hidden scroll auto

CSS2

right Define a distância (para a esquerda ou para a direita) a que deve ficar o limite direito de um elemento relativamente ao limite direito do elemento que o contém.

auto % comprimento

CSS2

top Define a distância (para baixo ou para cima) a que deve ficar o limite de cima de um elemento relativamente ao limite de cima do elemento que o contém.

auto % comprimento

CSS2

vertical-align Define o alinhamento vertical de um elemento.

baseline sub super top text-top middle

CSS1



bottom text-bottom comprimento %

z-index Define a ordem de apresentação (prioridade) dos elementos no caso de existir sobreposição entre eles.

auto número

CSS2

19.12 Formatação de tabelas Propriedade Descrição Valores W3C border-collapse Define o modelo da linha de

fronteira de uma tabela. collapse separate

CSS2

border-spacing Define a distância entre as linhas de fronteira de células adjacentes (aplicável apenas quando se usa o modelo "separated borders" para as linhas de fronteira da tabela)

comprimento CSS2

caption-side Define a posição da legenda na tabela.

top bottom left right

CSS2

empty-cells Indica se as células que não têm conteúdo visível 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.)

show hide

CSS2

table-layout Escolhe o algoritmo a usar para desenhar a tabela.

auto fixed

CSS2

19.13 Formatação de texto Propriedade Descrição Valores permitidos W3C color Define a cor do texto. cor CSS1direction Define a direção de escrita

do texto. ltr rtl

CSS2

letter-spacing Aumenta ou diminui o espaço entre os caracteres.

normal comprimento

CSS1

text-align Alinha o texto dentro de um elemento.

left right center justify

CSS1

text-decoration Adiciona pormenores decorativos ao texto.

none underline overline

CSS1



line-through blink

text-indent Desloca para a direita ou para a esquerda a primeira letra da primeira linha do texto.

comprimento %

CSS1

text-transform Controla as letras de um elemento.

none capitalize uppercase lowercase

CSS1

white-space Define a forma como é tratado o espaço em branco dentro de um elemento.

normal pre nowrap

CSS1

word-spacing Aumenta ou diminui o espaço entre as palavras.

normal comprimento

CSS1

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. Propriedade Descrição Valores W3C orphans Define o número mínimo de

linhas de um parágrafo que podem ficar sozinhas no fim de uma página.

número CSS2

page Define o tipo de página que deve ser usado para imprimir um elemento.

auto identificador

CSS2

page-break-after Define a forma como se fazem as mudanças de página depois de um elemento.

auto always avoid left right

CSS2

page-break-before Define a forma como se fazem as mudanças de

auto always

CSS2



página antes de um elemento.

avoid left right

page-break-inside Define a forma como se fazem as mudanças de página dentro de um elemento.

auto avoid

CSS2

widows Define o número mínimo de linhas de um parágrafo que podem ficar sozinhas no topo de uma página.

número CSS2



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 dar às seguintes propriedades: background-color, background-image, background-repeat, background-attachment, background-position

Oferece-nos uma forma abreviada para escrever todas as propriedades do fundo numa única declaração.

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-image: url(bg_pegadas.jpg); 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-image: url(bg_pegadas.jpg); background-repeat: no-repeat; background-position: top left } body { background-image: url(bg_pegadas.jpg); background-repeat: no-repeat; background-position: 0% 0% }



Valores permitidos Valor Descrição top left top center top right center left center center center right bottom left bottom center bottom right

Se escrever apenas uma palavra o browser dará à segunda o valor por omissão "center".

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-image: url(bg_pegadas.jpg); 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 border-style border-color

Define as propriedades das quatro linhas de fronteira. Aceita os valores que podem ser dados às propriedades listadas à esquerda.

8. border-color

A propriedade border-color define a cor das quatro linhas de fronteira. Ela aceita no 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 qualidade do efeito depende do valor definido no parâmetro border-color

inset Define uma linha de fronteira com um efeito 3D (estilo inset). A qualidade do efeito depende do valor definido no parâmetro border-color

outset Define uma linha de fronteira com um efeito 3D (estilo outset). A qualidade do efeito depende do valor definido no parâmetro border-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 border-style border-color

Pode assumir os valores das propriedades indicadas à esquerda.



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


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 cor O valor da cor pode ser o seu nome (red por exemplo), o seu valor rgb (


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


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

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 qualidade do efeito depende do valor definido no parâmetro border-color

inset Define uma linha de fronteira com um efeito 3D (estilo inset). A qualidade do efeito depende do valor definido no parâmetro border-color

outset Define uma linha de fronteira com um efeito 3D (estilo outset). A qualidade do efeito depende do valor definido no parâmetro border-color

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


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 font-variant font-weight font-size font-family

Aceita os valores que podem ser dados às propriedades listadas à esquerda mais os valores que se encontram listados nas linhas seguintes desta tabela.

caption Define as propriedades do tipo de letra a usar para escrever as legendas em elementos de 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 generic-family

Uma lista ordenada de forma prioritária contendo nomes que o browser pode escolher.

30. font-size

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

Herdada: Sim Exemplo Body { font-size: x-large } P { font-size: 10px } Valores permitidos Valor Descrição xx-small x-small small medium large x-large xx-large

Define o tamanho de letra para diversas dimensões, desde xx-small (menor) até xx-large (maior)

smaller Seleciona o tamanho de letra abaixo daquele que estava sendo usado

larger Seleciona o tamanho de letra acima daquele que estava sendo usado



comprimento Define um valor fixo para o tamanho de letra (dado em px, pt, pc, etc.)

% Define o tamanho de letra como uma porcentagem daquele que estava sendo usado

31. font-size-adjust

A 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 extra-condensed condensed semi-condensed semi-expanded expanded extra-expanded ultra-expanded

Define a escala para a contração ou para a expansão dos caracteres. "ultra-condensed" é o tamanho mais estreito de todos e "ultra-expanded" é o tamanho mais largo de todos

33. font-style

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

Herdada: Sim Exemplo Body { 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 200 300 400 500 600 700 800

Define a espessura do traço com que são desenhados os caracteres desde 100 (mais fino) até 800 (mais grosso). O valor normal é 400. 700 é o mesmo que bold.

36. content

A propriedade content usa-se em 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 identificador

O identificador define um seletor, um ID ou uma classe que 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 identificador

O identificador define um seletor, um ID, ou uma classe que 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 list-style-image

indicadas à esquerda.

40. list-style-image

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

Nota: Quando usar esta propriedade use 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 margin-right

Podemos usar os valores permitidos para as propriedades indicadas à esquerda.



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


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 outline-width

propriedades indicadas à esquerda numa única declaração

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 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: 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

obtém depende da cor. inset Define uma linha num estilo 3D. A qualidade do efeito que se

obtém depende da cor. outset Define uma linha num estilo 3D. A qualidade do efeito que se

obtém depende da cor. 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 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-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 padding-right padding-bottom padding-left

Define o valor de padding. Podem ser usados os valores permitidos para as propriedades indicadas à esquerda.

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


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


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, left)

Define o retângulo (parte do elemento) que deve ficar visível. 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 cor O valor da cor pode ser o seu nome (red por exemplo), o seu valor rgb (


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 páginas do lado esquerdo e do lado direito recebem formatações diferentes, como nos livros.)

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.


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-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 páginas do lado esquerdo e do lado direito recebem formatações diferentes, como nos livros.)

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.


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

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

Technology