CSS Tutorial

Sobre

Se você se interessa pela criação de home pages já deve ter ouvido falar em Cascading
Style Sheets, ou CSS apenas. Trata-se de um padrão de formatação para páginas web
que vai além das limitações impostas pelo html. Proposto pelo W3 Consortium:
http://www.w3.org - uma espécie de comitê que define os padrões de programação para
a WWW - o CSS foi introduzido pela primeira vez pela Microsoft, no lançamento do
Internet Explorer 3.0.

O Cascading Style Sheet permite uma versatilidade maior na programação do layout de

páginas web sem aumentar o seu tamanho em Kb, pois oferece várias possibilidades que
antes só eram conseguidas com a utilização de gifs e jpgs. Basicamente, o CSS permite
ao designer um controle maior sobre os atributos de uma home page, como tamanho e
cor das fontes, espaçamento entre linhas e caracteres, margem do texto, caixas de texto,
botões de formulário, entre outros. Introduziu também às páginas a utilização de layers,
permitindo a sobreposição de objetos como textos e imagens em camadas uma sobre as
outras.

Esta seção vai proporcionar uma visão geral dos CSS, incluindo as vantagens de se usar
os style sheets, as suas limitações, e um guia para utilizá-los. Ela mesma já se utiliza de
style sheets, e se você tiver múltiplos browsers, pode comparar a maneira como essas
páginas aparecem no Internet Explorer (3.0 ou superior) e nos outros browsers que não
suportam style sheets (Netscape 3.0 ou inferior, por exemplo). Mas observe que você só
será capaz de ver os efeitos dos style sheets se você vir essas páginas com o Internet
Explorer 3.0 ou o Netscape Communicator 4.0 (ou superior).

Copyleft 2002 - Todos os direitos reservados

Por que usar CSS ?

Todo documento escrito utiliza certos elementos de design para formatar seções de texto
a fim de manter a mesma aparência, seguir um padrão. Por exemplo, um elemento de
design Heading 1 é geralmente alguma fonte grande que identifica todas as principais
divisões de tópicos de um capítulo, artigo ou página da web. Um elemento de design
Heading 2 identifica todos os títulos dos subtópicos. A HTML inclui uma tag para
praticamente todos os elementos de design comumente utilizados, incluindo tags de
título (<H1>,<H2>...), lista (a tag <OL> para lista ordenada, a tag <UL> para lista não
ordenada) e assim por diante.

No passado , a tag <H1> em quase todos os web sites parecia a mesma - texto preto era
consideravelmente maior que o corpo do texto normal. Se você quisesse fazer seus
próprios títulos diferenciados, tinha de formatar cada tag de título individualmente,
utilizando tags <FONT> ou similares. Se mais tarde mudasse de idéias sobre a
aparência desses títulos, tinha de voltar e mudar cada título individualmente. Ou seja:
um processo lento e trabalhoso.
Uma grande vantagem é que as folhas de estilo em cascata mudam tudo isso. Com uma
folha de estilo, você pode fazer uma "declaração global", como "quero que todos os
meus títulos <H1> sejam verdes". Você precisa dizer isso somente uma vez e cada título
<H1> em seu site será verde. Se depois decidir que azul é uma cor melhor, não é preciso
voltar e alterar cada tag <H1> para a cor azul. Em vez disso, basta alterar o estilo - a
"regra" - para "quero que todos os meus títulos <H1> sejam azuis" e pronto!

Obviamente você não está limitado a títulos e nem a cor azul. Outra enorme vantagem
das folhas de estilo é que é possível definir um estilo personalizado para cada elemento
de design em seu web site, incluindo títulos, lista, tabelas e imagens, para citar só
alguns. E, além de definir uma cor, você pode definir a fonte, o tamanho, o alinhamento,
a espessura da borda, e assim por diante.

Copyleft 2002 - Todos os direitos reservados

Limitações e Desvantagens do CSS

Depois de ler sobre as vantagens do CSS você pode estar pensando "Então por que não
usar style sheets para todas as páginas web?" A primeira parte da resposta é: nós
provavelmente deveríamos. A segunda parte, no entato, é: não é assim tão fácil quanto
deveria ser.

Os problemas são múltiplos e relacionados. Neste momento em que o CSS é suportado

tanto pelo Internet Explorer quanto pelo Netscape, ambos usados por uma boa
quantidade de internautas, ainda se encontra um número pequeno de usuários que
utilizam versões mais antigas que o Netscape 4.0, e inclusive alguns preservando o IE
2.0. Mas isto em si ainda não é o grande problema, na medida em que se pode tomar
cuidado para assegurar que as páginas que usam styles também sejam mostradas pelos
browsers que não detectam o CSS. Um segundo e mais sério obstáculo é o de que a
implementação do CSS apresenta variações entre o Netscape e o IE, e mesmo entre o IE
3, 4, 5, 5.5, e o 6.0. Para resolver este problema, os desenvolvedores têm duas opções:

Escrever style sheets bastante simples, que funcionarão em todos os browsers

Usar JavaScript para detectar o tipo de browser do usuário e fazer um link para style
sheets diferentes (e escrever linhas de código diferentes em alguns casos) de acordo
com cada browser.

Além do mais, os criadores de páginas web devem considerar o seguinte:

Se você estiver trabalhando numa intranet onde os browsers não reconhecem CSS,
não há muita razão para usar style sheets
Se você quiser usar style sheets para a audiência da Internet em geral, deve se
assegurar antes de que os usuários que têm browsers que não suportam CSS terão uma
apresentação aceitável das suas páginas

Mais tarde eu darei algumas sugestões para tornar as suas páginas amigáveis tanto para
os browsers que suportam CSS quanto para para os que não suportam, mas antes duas
palavrinhas sobre precauções a serem tomadas:
Se você está pensando em manter conjuntos paralelos de páginas com e sem style
sheets, não o faça: qualquer um que já tentou fazer isto irá lhe dizer que manter um
conjunto paralelo de páginas é um pesadelo que não deve ser vivido a não ser que:
1) você esteja com um tédio terrível e procurando fazer um monte de coisas para matar
tempo, ou
2) alguém estiver apontando um revólver para a sua cabeça e lhe obrigando a fazer
isso...

A última linha aqui é para lembrar que se você quiser usar style sheets para Internet,
esteja preparado para pagar o preço de que alguns usuários (com alguma confiança, um
número que vai declinar rapidamente) estarão vendo as suas páginas sem nenhum
efeito.

Formas de Implementação dos Estilos

Os estilos podem ser inseridos nos documentos de três maneiras diferentes:

1) Por meio de um link direcionado para um arquivo de style sheet em separado,

funcionando para uma ou mais páginas web.

Este é o método que eu recomendo, porque ele permite usar um único style sheet para
várias páginas, talvez até para um site inteiro, o que é muito mais eficiente. (Isto pode
não funcionar se você tende a variar consideravelmente a formatação de cada página,
mas geralmente esta não é uma boa idéia em termos de comunicação efetiva). Este
método é muito útil tambem na administração do site, centralizando toda a configuração
em um unico arquivo. Se depois do site pronto resolvermos por exemplo alterar o
tamanho da fonte, basta alterar um arquivo .css e não todas as suas páginas.

Neste caso, você define os estilos num arquivo em separado com a extensão .css, e faz
uma referência a ele através de uma tag de link que se posiciona entre os tags de head de
cada arquivo HTML que irá utilizá-lo:

Exemplo
<html>
<head>
<link rel=STYLESHEET href="styles/stylesheets.css" type="text/css">
<title>...</title>
</head>
<body>...

Observe o atributo "type=text/css", também usado na tag <style> logo abaixo, para
identificar o arquivo referido como cascading style sheet. (Versões mais novas do
Internet Explorer não precisam disso, mas é mais prudente colocar porque outros
browsers pedem quando eles dão suporte para style sheets.)

2) Por meio de uma inserção de um style sheet numa única página web

Neste caso, você define os styles dentro de uma tag de style que se posiciona entre a tag
<html> e a tag <body>:

Exemplo
<html>
<head>
<style type="text/css">
<!--
P { font-size: 10pt; font-family: "Verdana, Arial, Sans-Serif"; color: #000066 }
H1 { font-size: 16pt; font-family: "Impact, Arial, Sans-Serif"; color: #990000 }
-->
</style>
...</head>
<body>...

Observe que em concreto as especificações do estilo (que eu explicarei nas páginas

seguintes) são inseridas dentro de uma tag de comentário -- isto é para assegurar que os
browsers que não suportam CSS não interpretarão estas linhas como conteúdo a ser
mostrado.

3) Pelo acréscimo de atributos de estilo inline em algumas tags como <p>, <div>, ou
<span>

Neste caso você especifica um estilo para um único bloco de texto, ou usa a tag <span>
para especificar o estilo para uma palavra ou frase:

Exemplo
<div style="margin-left: 0.5in; font-size: 10pt">
Este deve ser um bloco indentado com algum
<span style="font-weight: bold; background: #FFFF00"> texto selecionado</span>
dentro dele
</div>

Precedência dos Estilos

Em alguns casos você pode especificar diferentes características de estilo para o mesmo
texto por meio da combinação de um arquivo de style sheet referenciado em link com a
inserção de uma tag de style, e também com atributos de estilo inline. Se estas
diferentes especificações entrarem em conflito entre si, o browser tem que decidir qual
dos valores deve usar. Essa escolha é feita com base numa ordem de precedência (isto é
precisamente o que se quer dizer com cascading style sheets - "folhas de estilo em
cascata").

A ordem de precedência dos cascading style sheets é esta:

atributos de estilos inline têm precedência sobre tags de style inseridas

tags de style inseridas por sua vez têm precedência sobre style sheets por link
É importante lembrar esta ordem de precedência para que você saiba que valores de
style irão sobrepujar os outros.

Unidades de Medidas

Tanto na tabela de propriedades e valores quanto nos exemplos dados em todas as

páginas, você deve ter notado que os valores de muitos atributos foram dados em apenas
uma das várias unidades diferentes, normalmente:

pt (pontos)
pc (picas)
em (ems)
in (polegadas)
cm (centímetros)
mm (milímetros)
px (pixels)
% (de algum outro valor, normalmente tamanho de fonte)

Na maioria dos casos, a unidade que você usa não faz a menor diferença, na medida em
que você estiver familiarizado com ela (os autores de web nos EUA podem preferir usar
polegadas, enquanto que na maioria dos outros países pode preferir-se os centímetros,
por exemplo; a maioria de nós está acostumado a definir o tamanho das fontes em
pontos, embora poucos pareçam saber quanto vale um "ponto" -- 1/72 de polegada).

Entretanto, algumas questões devem ser observadas. À diferença das três primeiras
unidades, pixels não designam uma distância absoluta; em vez disso, um pixel é uma
unidade para mostrar a altura ou a largura, e que depende da resolução de vídeo do
usuário. Ajustes de resolução podem variar, sendo que a maioria ainda utiliza 800x600
pixels. A desvantagem é que um objeto em pixels varia de tamanho de acordo com a
resolução utilizada. E a vantagem é que as imagens são dimensionadas geralmente em
pixels, e se ajustarmos os textos em pixels tambem, os objetos do site estarão sempre
proporcionais. Mas, acima de tudo, é muito importante testar suas páginas em diferentes
resoluções de video.

Conceito de Herança

Mais um conceito prelimar, antes que a gente entre nos detalhes da especificações dos
estilos. Como veremos nas páginas que se seguem, as especificações para estilo dos
style sheets em link e das tags de style inseridas são feitas com relação a vários
elementos de HTML como <p>, <h1>, <li>, <table>, e assim por diante. Mas alguma
flexibilidade nos estilos pode ser ganha através da herança de estilo. A herança significa
que você pode especificar classes adicionais a cada elemento, e cada classe herdará
algumas características de estilo de elementos básicos, a não ser que ela as substitua por
valores novos ou essa característica não seja herdada. (A tabela de propriedades indica
quais são herdadas e quais não.)

Exemplo
P
{
font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif', 'Helvetica';
font-weight: bold;
font-size: 11pt;
color: #000066;
position: relative;
margin-left: 1cm;
}

produz um parágrafo que se parece com isto... enquanto que

P.small
{
font-size: 8pt;
text-align: center;
}

produz um parágrafo que se parece com isto.

Para produzir um parágrafo básico, você deve usar simplesmente uma tag <p>, e para
produzir o parágrafo pequeno e centralizado, você deve acrescentar o atributo
class=small (<p class=small>). Observe que também podem ser declaradas classes
gerais, que podem então ser usadas com qualquer elemento HTML:

Exemplo
.note
{
font-size: 10pt;
color: #006600;
background: #FFFFFF;
position: relative;
padding: 2pt;
border-width: thin;
border-style: ridge;
}

Com esta classe definida, uma parágrafo designado por <blockquote class=note> se pareceria com este.
Observe que somente um nível de classes é permitido: uma classe do tipo P.note.red não
funciona.

Classes Especiais para Links

Você deve conhecer também as classes pré-definidas para a tag <a>:

A.link { color: #FFFF00 }

A.visited { color: #990099 }
A.active { color: #FF0000 }

Tal como em qualquer outra definição de classes, você pode colocar cores ou outros
valores que desejar; nós vamos ver como fazer isto nas páginas seguintes.

Se você quiser que links e links visitados apareçam com cores distintas, como estamos
acostumados a ver na maioria das páginas web, então estas classes devem ser
especificadas nos seus style sheets.

Existem ainda algumas outras "pseudo-classes" pré-definidas para a primeira linha e

primeira letra de blocos, mas elas até agora não são suportadas pelo Internet Explorer.

Falando em geral, a herança é um atalho poderoso para criar variações dentro de um

estilo (style), do mesmo modo que a herança permite aos programadores em linguagens
orientadas a objetos criarem variações de objetos (criar style sheets é de fato uma forma
muito simples de programação orientada a objetos). Existem poucas ocasiões em que a
herança pode ser uma perturbação, nos casos em que certas propriedades são herdadas
sem que você queira (nós vamos ver um exemplo mais adiante).

Especificando um estilo para o site

Como você pode ter percebido olhando para os exemplos na página anterior, os estilos
são especificados como pares propriedade : valor que são separados por ponto e vírgula.
Qualquer valor pode ser colocado entre aspas, e valores com mais de uma palavra como
'Trebuchet MS' sempre devem ser colocados assim para evitar equivocos por browsers
mais antigos.

Estilos Inline

Para os estilos inline, a seqüência de pares propriedade : valor é colocada entre aspas e
posta como valor para o atributo de estilo:

<li style="font-size: 10pt; font-weight: bold">

Estilos em Link e Inseridos

Para os style sheets em links ou tags de style inseridas, as especificações de estilo são
feitas para os vários seletores, que podem ser qualquer um dos elementos do HTML.
Neste caso, os pares de especificação de estilo propriedade : valor são colocados entre
chaves logo depois do seletor:

H2
{
font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif';
font-weight: bold;
font-size: x-large;
color: #660066;
}

Observe que quando um dos valores consiste de palavras múltiplas (como no caso dos
valores das famílias de fontes no exemplo acima), cada um deles dentro da lista daquela
propriedade é colocado entre aspas.
Lembre-se também de que você pode especificar classes múltiplas (mas somente um
nível) para um seletor para variar as especificações de estilo, tal como vimos na
discussão da herança.

Estilos Contextuais

Finalmente, note também que você pode criar estilos contextuais através da combinação
de dois seletores:

P STRONG { color: #FF0000 }

Este estilo afeta somente o texto dentro do elemento STRONG, que está dentro do
elemento PARÁGRAFO. Se você quiser que o texto STRONG tenha sempre a mesma
cara independente de contexto, então crie um estilo simples com STRONG como
seletor:

STRONG { color: #FF0000 }

Observe que em ambos os casos qualquer outra especificação de estilo para o elemento
no qual os textos em STRONG aparecem ainda terão efeito, a não ser que a
especificação de estilo para STRONG a sobrepuje.

Atalhos de CSS

Alguns atributos de CSS lhe permitem fazer diversas configurações em uma declaração.
Por exemplo, suponha que você queira definir diversos aspectos da fnte utilizada para
tags H1, como segue:

H1 {font-style: italic;
font-weight: bold;
font-size: 18pt;
font-family: 'Times Roman'}

Como alternativa a especificar todas essas formatações de fonte individualmente, você

pode utilizar o atributo font: para defini-las todas de uma só vez, assim:

H1 {font: italic bold 18pt 'Times Roman'}

Propriedades e Valores de Estilos para Fontes

Provavelmente surgirão novas propriedades e valores a medida em que forem

desenvolvidos novos browsers cada vez mais poderosos e competitivos, e tentarei
deixar o site sempre atualizado.

Você tambem pode contribuir para o crescimento e aprimoramento do site, enviando

novidades, e dicas e exemplos sobre propriedades e valoes que ainda não constam em
nosso site.

Suporte Propriedade Descrição Valores Exemplo

 { font-size:
tamanho (pt, in, cm, px)
12pt }
porcentagem do tamanho normal
3.0 font-size Ajusta o tamanho do { font-size:
relativo: xx-large, x-large, large,
(herdado) texto 200% }
medium, small, x-small, xx-small,
4.0 { font-size: x-
larger, smaller
large }
{ font-family:
Ajusta os tipos de face
3.0 font-family nome do tipo de face Trebuchet
e as alternativas (em
(herdado) nome da família da fonte MS, Sans-
ordem de preferência)
4.0 serif }
normal
3.0 font-weight bold { font-weight:
Ajusta o peso do tipo
(herdado) (outras opções serão suportadas bold }
4.0 mais tarde)
normal
italic
3.0 font-style {font-style:
Texto em itálico (mais opções estarão disponíveis
(herdado) italic}
mais tarde; 'oblique smallcaps'
4.0
está disponível no IE4 somente)
smallcaps
font-variant especifica uma { font-variant:
(outras opções serão suportadas
4.0 (herdado) variante de fonte smallcaps }
mais tarde)
especifica uma
localização que dispõe @font-face {font-family:
de uma fonte que não nome_da_fonte; font-style:
@font-face está presente no estilo_da_fonte; font-weight:
4.0
sistema do usuário. densidade_da_fonte; src:
(veja a nota abaixo da url_da_fonte}
tabela)

Fonte incorporada

Utilizando as fontes incorporadas, o visitante do seu site fará o download e a instalação

da fonte utilizada por você em seu site caso ele ainda não a tenha em seu micro. Isto
acaba com o problema do html, que só reconhece fontes instaladas na maquina do
cliente. A sintaxe para incorporação é a seguinte:

<STYLE TYPE="text/css">
@font-face {font-family: nome_da_fonte;
font-style: estilo_da_fonte;
font-weight: densidade_da_fonte;
src: url_da_fonte}
</STYLE>

OBS: Essa declaração deve estar entre as tags <HEAD>...</HEAD> em sua página
HTML.

Atalhos de CSS
Alguns atributos de CSS lhe permitem fazer diversas configurações em uma declaração.
Por exemplo, suponha que você queira definir diversos aspectos da fnte utilizada para
tags H1, como segue:

H1 {font-style: italic;
font-weight: bold;
font-size: 18pt;
font-family: 'Times Roman'}

Como alternativa a especificar todas essas formatações de fonte individualmente, você

pode utilizar o atributo font: para defini-las todas de uma só vez, assim:

H1 {font: italic bold 18pt 'Times Roman'}

Propriedades e Valores de Estilos para Textos

Provavelmente surgirão novas propriedades e valores a medida em que forem

desenvolvidos novos browsers cada vez mais poderosos e competitivos, e tentarei
deixar o site sempre atualizado.

Você tambem pode contribuir para o crescimento e aprimoramento do site, enviando

novidades, e dicas e exemplos sobre propriedades e valoes que ainda não constam em
nosso site.

Suporte Propriedade Descrição Valores Exemplo

tamanho (pt, in, cm, px, { line-height:
3.x line-height Ajusta a distância entre as em) 18pt }
(herdado) bases da linha de texto porcentagem (%) do { line-height:
4.x tamanho de fonte 120% }
none
{ text-
3.x text-decoration Sublinha ou então seleciona o underline
decoration:
(não herdado) texto overline
underline }
4.x line-through
Ajusta o alinhamento de texto
left
3.x text-align para a margem esquerda ou { text-align:
center
(herdado) direita, ou para o centro da right }
right
4.x página

3.x text-indent Faz a indentação da primeira tamanho (pt, in, cm, { text-indent:
(herdado) linha do texto no elemento px) 0.5in }
4.x
vertical-align alinha o texto verticalmente baseline { vertical-
4.x (não herdado) dentro do elemento sub align: super }
super
top
text-top
 middle
bottom
text-bottom
porcentagem da altura
de linha a partir da base
da linha (%)
capitalize (coloca em
Ajusta as regras de maiúscula a primeira { text-
4.x text-transform
maiúsculas e minúsculas no letra de cada palavra) transform:
(herdado)
texto uppercase capitalize }
4.x
lowercase
ajusta o espaçamento entre as
normal,
letter-spacing letras no texto { letter-
tamanho (pt, in, cm, px,
4.x (herdado) (se espera que tenha suporte spacing: 2pt }
em)
na versão final do IE 4.0)

Propriedades e Valores de Estilos para Background e Cores

Provavelmente surgirão novas propriedades e valores a medida em que forem

desenvolvidos novos browsers cada vez mais poderosos e competitivos, e tentarei
deixar o site sempre atualizado.

Você tambem pode contribuir para o crescimento e aprimoramento do site, enviando

novidades, e dicas e exemplos sobre propriedades e valoes que ainda não constam em
nosso site.

Suporte Propriedade Descrição Valores Exemplo

{ color: blue }
nome da cor { color: #00F }
3.x Trio RGB { color:
cor (herdado) Ajusta a cor do texto
Código hex #0000FF }
4.x Valores RGB { color: RGB 0.0
0.0 1.0 }
{ background:
url(image1.gif)
url(URL) (com ou sem
background (não repeat }
repeat);
herdado) (no IE3.x, { background:
nome da cor (ou
as imagens de Red }
3.x Ajusta as imagens de transparent, ou dois
background são { background:
background ou cores nomes de cores, que
suportadas somente Red / Blue }
4.x serão misturadas,
em styles sheets { background:
separados por um /);
inseridos) transparent }
trio RGB (código hex)
{ background:
#CCCCCC }
background-color Ajusta a cor do nome da cor; { background-
3.x (não herdado) (no background trio RGB (código hex) color: Red }
IE3.x, as imagens de { background-
 background são
suportadas somente color:
4.x em styles sheets #CCCCCC }
inseridos)
background-image
(não herdado) (no
IE3.x, as imagens de { background-
Ajusta a imagem de
background são URL image:
4.x background
suportadas somente url(image1.gif) }
em styles sheets
inseridos)
background-repeat
repeat
(não herdado) (no
Ajusta a repetição do (horizontalmente e
IE3.x, as imagens de { background-
entelhamento das verticalmente);
background são repeat: repeat-
4.x imagens de repeat-x (horizontal);
suportadas somente y}
background repeat-y (vertical);
em styles sheets
no-repeat
inseridos)
background-
attachment (não
herdado) (no IE3.x, Fixa a imagem de
as imagens de background ou permite { background:
scroll ou fixed
4.x background são que ela deslize junto fixed }
suportadas somente com a página
em styles sheets
inseridos)
{ background-
position: 2cm
1cm }
{ background-
background-position Ajusta a posição inicial
position: 50%
(não herdado) (no das imagens de
Posição (x y) ou (x% 20% }
IE3.x, as imagens de background (Observe
y%); { background-
background são que a posição default,
4.x top, center, bottom position: top
suportadas somente 0,0 ou 0%,0%, é o
left, center, right center }
em styles sheets canto superior
{ background-
inseridos) esquerdo do elemento)
position: top }
{ background-
position: bottom
right }

Propriedades e Valores de Estilos para Caixas

Provavelmente surgirão novas propriedades e valores a medida em que forem

desenvolvidos novos browsers cada vez mais poderosos e competitivos, e tentarei
deixar o site sempre atualizado.

Você tambem pode contribuir para o crescimento e aprimoramento do site, enviando

novidades, e dicas e exemplos sobre propriedades e valoes que ainda não constam em
nosso site.

Suporte Propriedade Descrição Valores Exemplo

3.x margin-left Ajusta a distância a partir do lado tamanho (pt, in, { margin-left:
(não herdado) esquerdo da página cm, px) 1in }
4.x

3.x margin-right Ajusta a distância a partir do lado tamanho (pt, in, { margin-right:
(não herdado) direito da página cm, px) 1in }
4.x

3.x margin-top Ajusta a distância a partir da parte tamanho (pt, in, { margin-top:
(não herdado) de baixo do elemento prévio cm, px) -20pt }
4.x

margin-
3.x Ajusta a distância a partir da parte tamanho (pt, in, { margin-
bottom (não
de cima do próximo elemento cm, px) bottom: 20pt }
herdado)
4.x
tamanho (pt, in,
Ajustas as margens em todos os
cm, px) ou
quatro lados de um elemento (Se
porcentagem do { margin: .5cm
3.x margin (não houver somente um valor, ele se
tamanho da fonte .5cm 1cm
herdado) aplica a todos os lados; se houver
na ordem: alto, .5cm }
4.x dois ou três, o valor que falta será
direita, baixo,
tomado do lado oposto.)
esquerda
tamanho (pt, in,
Ajusta o preenchimento em todos
cm, px) ou
os quatro lados do conteúdo de um
porcentagem do { padding: .5cm
4.x padding (não elemento (Se houver somente um
tamanho da fonte .5cm 1cm
herdado) valor, ele se aplica a todos os lados;
na ordem: alto, .5cm }
4.x se houver dois ou três, o valor que
direita, baixo,
falta será tomado do lado oposto.)
esquerda
tamanho (pt, in,
3.x padding-top Ajusta o preenchimento na parte de cm, px) ou { padding-top:
(não herdado) cima do conteúdo de um elemento porcentagem do 5pt }
4.x tamanho da fonte
tamanho (pt, in,
Ajusta o preenchimento no lado
4.x padding-right cm, px) ou { padding-right:
direito do conteúdo de um
(não herdado) porcentagem do 5pt }
elemento
4.x tamanho da fonte
tamanho (pt, in,
padding-
4.x Ajusta o preenchimento na parte de cm, px) ou { padding-
bottom (não
baixo do conteúdo de um elemento porcentagem do bottom: 5pt }
herdado)
4.x tamanho da fonte
 tamanho (pt, in,
Ajusta o preenchimento no lado
4.x padding-left cm, px) ou { padding-left:
esquerdo do conteúdo de um
(não herdado) porcentagem do 5pt }
elemento
4.x tamanho da fonte

border-top- tamanho (pt, in,

4.x Ajusta a largura da borda ao longo { border-top-
width (não cm, px); thin,
da parte de cima de um elemento width: thin }
herdado) medium, thick
4.x

border-right- tamanho (pt, in,

4.x Ajusta a largura da borda ao longo { border-right-
width (não cm, px); thin,
do lado direito de um elemento width: thin }
herdado) medium, thick
4.x

border- tamanho (pt, in, { border-

4.x Ajusta a largura da borda ao longo
bottom-width cm, px); thin, bottom-width:
da parte de baixo de um elemento
(não herdado) medium, thick thin }
4.x
Ajusta a largura da borda em cada
lado de um elemento na ordem
parte de cima, lado direito, parte de
tamanho (pt, in, { border-width:
4.x border-width baixo, lado esquerdo (Se houver só
cm, px); thin, thin thin thick
(não herdado) um valor, ele se aplica a todos os
medium, thick thin }
4.x lados; se houver dois ou três, os
valores que faltam serão tomados
do lado oposto.)
border-top-
Ajusta a cor da borda ao longo do nome da cor ou { border-top-
color (não
4.x lado de cima de um elemento código hex color: green }
herdado)
border-right-
Ajusta a cor da borda ao longo do nome da cor ou { border-right-
color (não
4.x lado direito de um elemento código hex color: green }
herdado)
border- { border-
Ajusta a cor da borda ao longo do nome da cor ou
bottom-color bottom-color:
4.x lado de baixo de um elemento código hex
(não herdado) #00FF00 }
border-left-
Ajusta a cor da borda ao longo do nome da cor ou { border-left-
color (não
4.x lado esquerdo de um elemento código hex color: thin }
herdado)
Ajusta a cor da borda em cada lado
de um elemento na ordem parte de { border-color:
cima, lado direito, parte de baixo, green #FFFF00
lado esquerdo (Se houver só um #00FFFF
4.x border-color nome da cor ou
valor, ele se aplica a todos os lados; green } (IE4){
(não herdado) código hex
se houver dois ou três, os valores border-color:
4.x
que faltam serão tomados do lado green } (IE4 or
oposto; note que o Netscape só Netscape 4)
permite um valor)
border-top- Ajusta o estilo da borda ao longo nome do estilo { border-top-
4.x style (não do lado de cima de um elemento (none, solid, style: ridge }
 double, groove,
herdado)
ridge, inset, outset)
nome do estilo
border-right-
Ajusta o estilo da borda ao longo (none, solid, { border-right-
style (não
4.x do lado direito de um elemento double, groove, style: solid }
herdado)
ridge, inset, outset)
nome do estilo
border- { border-
Ajusta o estilo da borda ao longo (none, solid,
bottom-style bottom-style:
4.x do lado de baixo de um elemento double, groove,
(não herdado) groove }
ridge, inset, outset)
nome do estilo
border-left-
Ajusta o estilo da borda ao longo (none, solid, { border-left-
style (não
4.x do lado esquerdo de um elemento double, groove, style: inset }
herdado)
ridge, inset, outset)
nome do estilo
4.x border-style Ajusta o estilo da borda em todos (none, solid, { border-style:
(não herdado) os lados de um elemento double, groove, outset }
4.x ridge, inset, outset)
Ajusta a largura, cor, e estilo da { border-top:
border-top largura, cor, e
borda ao longo do lado de cima de thin green ridge
4.x (não herdado) estilo
um elemento }
Ajusta a largura, cor, e estilo da { border-right:
border-right largura, cor, e
borda ao longo do lado direito de thin green ridge
4.x (não herdado) estilo
um elemento }
border- Ajusta a largura, cor, e estilo da { border-
largura, cor, e
bottom (não borda ao longo do lado de baixo de bottom: thin
4.x estilo
herdado) um elemento green ridge }
Ajusta a largura, cor, e estilo da { border-left:
border-left largura, cor, e
borda ao longo do lado esquerdo de thin green ridge
4.x (não herdado) estilo
um elemento }
Ajusta a largura, cor, e estilo da
border (não largura, cor, e { border: thin
borda em todos os lados de um
4.x herdado) estilo green ridge }
elemento
Faz com que o elemento flutue para
4.x float (não um lado e outro do texto e o
left, right, ou none { float: left }
herdado) envolva. (Usado nos elementos
4.x DIV e SPAN.)
Especifica se o elemento pode ter
elementos flutuando à sua volta --
4.x clear (não faz com que o elemento se
left, right, ou both { clear: left }
herdado) posicione por baixo de qualquer
4.x elemento que esteja flutuando no
lado especificado.

Propriedades e Valores de Estilos para Listas

Provavelmente surgirão novas propriedades e valores a medida em que forem
desenvolvidos novos browsers cada vez mais poderosos e competitivos, e tentarei
deixar o site sempre atualizado.

Você tambem pode contribuir para o crescimento e aprimoramento do site, enviando

novidades, e dicas e exemplos sobre propriedades e valoes que ainda não constam em
nosso site.

Suporte Propriedade Descrição Valores Exemplo

faz com que o elemento não
4.x display (não apareça (não será reservado
none { display: none }
herdado) nenhum espaço para ele na
4.x página)
disk; circle; square;
especifica a aparência de
decimal; lower-roman;
4.x list-style-type marcadores de item de lista { list-style-type:
upper-roman; lower-
(herdado) (para uso com elementos square }
alpha; upper-alpha;
4.x LI)
none
especifica uma imagem para
list-style-
4.x ser usada como marcador de { list-style-image:
image url(URL); none
item de lista (para uso com url(redball.jpg) }
(herdado)
4.x elementos LI)
especifica a posição de
list-style-
4.x marcadores de item de lista { list-style-
position inside; outside
(para uso com elementos position: inside }
(herdado)
4.x LI)
inside; outside
especifica a posição, estilo,e disk; circle; square;
URL da imagem a ser usada decimal; lower-roman; { list-style: inside
4.x list-style
como marcador de item de upper-roman; lower- disk
(herdado)
lista (para uso com alpha; upper-alpha; url(redball.jpg) }
4.x
elementos LI) none
URL

Propriedades e Valores para Posicionamento com Estilos

Provavelmente surgirão novas propriedades e valores a medida em que forem

desenvolvidos novos browsers cada vez mais poderosos e competitivos, e tentarei
deixar o site sempre atualizado.

Você tambem pode contribuir para o crescimento e aprimoramento do site, enviando

novidades, e dicas e exemplos sobre propriedades e valoes que ainda não constam em
nosso site.

Suporte Propriedade Descrição Valores Exemplo

clip (não Especifica a área do elemento rect (top right left bottom) { clip: rect
4.x herdado) que aparece como onde top right left bottom (5pt auto
 são definidas como auto ou
transparente como valores de extensão auto auto) }
4.x
(pt, in, cm, px)
Especifica a altura de um
elemento (é mais útil para o
auto ou valores de extensão
4.x height (não escalonamento de imagens; a { height:
(pt, in, cm, px) ou
herdado) média da aparência será 50px }
porcentagem
4.x mantida se a width for
especificada como auto)
Especifica a largura de um
elemento (é mais útil para o
auto ou valores de extensão
4.x width (não escalonamento de imagens; a { width:
(pt, in, cm, px) or
herdado) média da aparência será 50% }
porcentagem
4.x mantida se height for
especificada como auto)

Especifica a posição esquerda auto ou valores de extensão

4.x left (não
de um elemento relativamente (pt, in, cm, px) or { left: 2pt }
herdado)
ou absolutamente posicionado porcentagem
4.x
Especifica a posição da parte
auto ou valores de extensão
4.x top (não de cima de um elemento
(pt, in, cm, px) ou { top: -2pt }
herdado) relativamente ou
porcentagem
4.x absolutamente posicionado
Especifica o manejo da porção clip (a porção inundada é
overflow de um elemento relativamente oculta) ou none (a porção
4.x { overflow:
(não ou absolutamente inundada aparece) ou scroll
clip }
herdado) posicionado, que se derrama (para revelar a porção
4.x
sobre outro elemento inundada)
absolute (em relação ao
documento); relative (em
4.x position (não Especifica se o elemento pode { position:
relação ao elemento pai);
herdado) ser posicionado relative }
static (default--não
4.x
posicionado)
Especifica se o elemento é
visibility
4.x visível (espaço para o { visibility:
(não visible; hidden
elemento é reservado em hidden }
herdado)
4.x ambos os casos)
number (positivo para cima,
Especifica se o elemento é
negativo para baixo,
mostrado acima ou abaixo de
começando do 1; por default
z-index (não outros elementos com os quais { z-index: 2
a elementos sucessivos são
4.x herdado) faz entelhamento (observe que }
assignados números
o Netscape 4.0 lida com isso
superiores aos elementos
através do atributo layer
antecedentes)
white-space Especifica se um elemento vai
{ white-
(não ser mostrado normalmente ou normal; pre
4.x space: pre }
herdado) num texto pré-formatado
 Propriedades e Valores de Estilos para Impressão

Provavelmente surgirão novas propriedades e valores a medida em que forem

desenvolvidos novos browsers cada vez mais poderosos e competitivos, e tentarei
deixar o site sempre atualizado.

Você tambem pode contribuir para o crescimento e aprimoramento do site, enviando

novidades, e dicas e exemplos sobre propriedades e valoes que ainda não constam em
nosso site.

Suporte Propriedade Descrição Valores Exemplo

always; auto (se necessário); left (insere
insere quebras de uma ou duas quebras de página até que { page-
page-break-
página (somente se chegue à p´gina esquerda em break-
before (não
4.x para fins de branco); right (insere uma ou duas before:
herdado)
impressão) quebras de página até que se chegue à p always }
´gina direita em branco)
always; auto (se necessário); left (insere
insere quebras de uma ou duas quebras de página até que
page-break- { page-
página (somente se chegue à p´gina esquerda em
after (não break-after:
4.x para fins de branco); right (insere uma ou duas
herdado) always }
impressão) quebras de página até que se chegue à p
´gina direita em branco)

Propriedades e Valores de Estilos para Filtros

Provavelmente surgirão novas propriedades e valores a medida em que forem

desenvolvidos novos browsers cada vez mais poderosos e competitivos, e tentarei
deixar o site sempre atualizado.

Você tambem pode contribuir para o crescimento e aprimoramento do site, enviando

novidades, e dicas e exemplos sobre propriedades e valoes que ainda não constam em
nosso site.

Suporte Propriedade Descrição Valores Exemplo

aplica várias
filter
filtragens Forma geral: { filter: { filter: dropshadow
(filtragem
visuais para nome_do_filtro(parâmetro1, (color=#9999FF, offx=3pt,
4.x visual)(não
efeitos parâmetro2...) offy=5pt) }
herdado)
especiais
Coloca um filter: alpha(Opacity=,
nível de FinishOpacity=, Style= filter: alpha(Opacity=75,
Alpha
4.x transparência StartX=, StartY=, FinishX=, FinishOpacity=15, Style=1)
uniforme. FinishY=)
Blur Cria a filter: blur(Add=, filter: blur(Add=1,
4.x impressão de Direction=, Strength=) Direction=90, Strength=10)
movimento
em alta
 velocidade.
Torna uma
cor
Chroma filter: chroma(Color=) filter: chroma(Color=#ffff00)
4.x específica
transparente.
Cria uma
filter:
silhueta filter: DropShadow(Color=,
DropShadow DropShadow(Color=#003399,
4.x sólida de um OffX=, OffY=, Positive=)
OffX=3, OffY=3, Positive=1)
objeto.
Cria um
reflexo
FlipH filter: fliph filter: fliph
4.x horizontal de
uma imagem.
Cria um
reflexo
FlipV filter: flipv filter: flipv
4.x vertical de
uma imagem.
Adiciona
irradiação ao
redor das filter: glow(Color=, filter: glow(Color=#00FF00,
Glow
4.x bordas Strength=) Strength=30)
externas de
um objeto.
Retira
informação
Grayscale filter: gray filter: gray
4.x de cor da
imagem.
Reverte os
valores de
Invert coloração, filter: invert filter: invert
4.x
saturação e
brilho.
Projeta uma
fonte de luz
Light filter: light filter: light
4.x sobre um
objeto.
Cria uma
máscara
Mask filter: mask(Color=) filter: mask (Color=#009933)
4.x transparente
de um objeto.
Cria uma
filter:
silhueta filter: shadow(Color=,
Shadow shadow(Color=#9900FF,
4.x sólida em Direction=)
Direction=135)
projeção.
Wave Cria uma filter: wave(Add=, Freq=, filter: wave(Add=1, Freq=10,
4.x distorção Phase=, LightStrength=, Phase=90, LightStrength=10,
 senoidal em
ondas ao
Strength=) Strength=10)
longo do eixo
X.
Mostra
somente as
XRay filter: xray filter: xray
4.x bordas do
objeto.
filter (filtro permite Forma geral: { filter: { filter: revealtrans
4.x de revelação revelar ou revealtrans (duration=2.0, transition=10 }
de transição) esconder (duração=duration, forma
(não elementos da
herdado) visuais, transição=transitionshape)}
usando (a duração é expressa em
padrões pré- segundos.milisegundos)
definidos (a forma da transição é
indicada por um valor de 1
a 23, como segue: Tipo de
transição Valor
Caixa interna: 0
Caixa externa: 1
Círculo interno: 2
Círculo externo: 3
Esfregado para cima: 4
Esfregado para baixo: 5
Esfregado para a direita: 6
Esfregado para a esquerda:
7
Cortinas verticais: 8
Cortinas horizontais: 9
Tabuleiro de damas
atravessado: 10
Tabuleiro de damas para
baixo: 11
Dissolução aleatória: 12
Fenda vertical para dentro:
13
Fenda vertical para fora: 14
Fenda horizontal para
dentro: 15
Fenda horizontal para fora:
16
Faixas à esquerda para
baixo: 17
Faixas à esquerda para
cima: 18
Faixas à direita para baixo:
19
Faixas à direita para cima:
 20
Barras horizontais
aleatórias: 21
Barras verticais aleatórias:
22
Aleatoriedade: 23
faz o
filter (filtro Forma geral: { filter:
elemento
de transição blendTrans
visual { filter: blendTrans
de mistura) (Duração=duration}
4.x desvanecer (duration=2.0, transition=10 }
(não (a duração é expressa em
ou aparecer
herdado) segundos.milisegundos)
gradualmente

Alguns Exemplos de Filtros

CSS Tutorial - filtro alpha

(transparência)

CSS Tutorial - filtro shadow

CSS Tutorial - filtro glow

Propriedades e Valores de Estilos para Impressão

Provavelmente surgirão novas propriedades e valores a medida em que forem

desenvolvidos novos browsers cada vez mais poderosos e competitivos, e tentarei
deixar o site sempre atualizado.

Você tambem pode contribuir para o crescimento e aprimoramento do site, enviando

novidades, e dicas e exemplos sobre propriedades e valoes que ainda não constam em
nosso site.

Suporte Propriedade Descrição Valores Exemplo

Importa outra folha de
estilo para dentro da
atual; deve aparecer
@import antes que qualquer
@import
(não estilo seja definido; @import: url(url)
4.x url(stylesheet2.css)
herdado) novas propriedades e
valores irão sobrepujar-
se às da folha de estilo
importada
 auto (default definido pelo
browser/sistema
especifica a aparência operacional); crosshair;
cursor do cursor quando default; hand; move; e-
{ cursor: help }
4.x (herdado) colocado dentro do resize; ne-resize; nw-
elemento resize; n-resize; se-resize;
sw-resize; s-resize; w-
resize; text; wait; help

Dicas enviadas por nossos usuários

Envie sua dica

Nunca uma page é 100% segura
Enviado por: Djavan
E-mail: Nulo
Data e hora: 30/07/2005 - 12:49h
Nunca se esqueça de um script bem bolado para sua home page, scrip para bloquear o
botao direito do mouse, a e um scrip para não permitir selecionar texto, tambem um
scrip para não permitir que o arrastar objetos, um script para bloquear o teclado "pq no
linux precionando a tecla Ctrl+U ira exibir o codigo fonte", a e sem esquecer de quebrar
a cabeça para criar um script para bloquear o menu exibir "coisa impossivel", pq no
menu exibir tem o bendito "Exibir codigo fonte" < onde entrega sua page. Obrigado
desculpa pelo trastorno.

Utilizando fontes que o usuário ainda não possui

Enviado por: Luciano Christianes
E-mail: lchristianes@uol.com.br
Data e hora: 05/10/2004 - 18:42h
Para utilizar aquela fonte bacana que vc tem e o usuário final nunca viu antes, devemos
utilizar a instrução @FONT-FACE entre as tags <HEAD></HEAD>.

Um dos parâmetros desta instrução é o local de origem da fonte, que deve estar
disponível na web em algum lugar, preferencialmente dentro da própria estrutura de
pastas do seu domínio.
Vamos partir do princípio.

Construa o texto que deseja com HTML simples, apenas com uma página de referência.
Defina nesta página um estilo para a sua fonte.
Observe o trecho de código a seguir:

<html>
<head>
<style type="text/css">
@font-face {font-family:"Souvenir Light
BT";src:url("http://www.meudominio.com.br/fonts/tt0019m_.ttf")}
.meuestilo {font-family:"Souvenir Light BT"}
</style>
</head>
<body>
<font class="meuestilo">Este é um exemplo de texto que vai ser escrito na fonte
Souvenir Light BT.</font>
</body>
</html>

Repare que tt0019m_.ttf é o arquivo que contém a fonte a ser utilizada, e está disponível
na web.
Salve a página e baixe o programa WEFT, distribuído gratuitamente pela Microsoft,
justamente para este fim no site

http://www.microsoft.com/typography/web/embedding/weft3/default.htm

Instale o programa e execute-o.

Crie um novo projeto, clicando em New. Uma janela se abrirá, pedindo uma página
HTML. Informe a página recém-criada, e siga o roteiro do wizard, até que a análise
desta página esteja completa.
Mais ou menos no meio da tela haverá um botão selecionado Subsets. Marque a sua
fonte na tabela e clique neste botão.
A partir daí, você vai escolher o conjunto de caracteres que serão exportados. Os que o
seu HTML possui já estão marcados. Aconselho marcar todo o conjunto de maiúsculas e
minúsculas, incluindo caracteres acentuados e números, sem esquecer do espaço, claro.
Talvez seja necessário navegar utilizando a combo-box no canto superior direito da tela,
para alternar entre os conjuntos de caracteres da fonte.
Confirme a seleção e aceite todas as telas até a exportação de um arquivo .EOT que será
gravado no local que você determinar.
Envie o arquivo .EOT para o local na web em que achar conveniente.
Altere seu código-fonte na página que conterá o novo conjunto de caracteres. Ela deverá
parecer-se com isto:

<html>
<head>
<style type="text/css">
@font-face {font-family:Souvenir Lt BT;font-style: normal;font-weight: 700;src:
url(fonts/souveni0.eot);}
.meuestilo {font-family:"Souvenir Lt BT";font-size:50px;color:#330099;font-
weight:bold}
</style>
</head>

<body>
<font class="meuestilo">Observe o efeito da sua nova fonte em qualquer lugar do
mundo!</font>
</body>

</html>
Colocando bordas em tabelas
Enviado por: Paulo Januário
E-mail: paulojanuario@superig.com.br
Data e hora: 08/09/2004 - 11:24h
<STYLE>
<br>
<br>BODY
<br>{
<br> BGCOLOR: white;
<br><dd>margin-top: 0px;
<br>}
<br>.tbBorder
<br>{
<br> BORDER-TOP: #000000 1px solid;
<br> BORDER-RIGHT: #000000 1px solid;
<br> BORDER-BOTTOM: #000000 1px solid;
<br> BORDER-LEFT: #000000 1px solid;
<br> BACKGROUND-COLOR: #CCFF99;
<br>}
<br></STYLE>
<br>Para incluir na tabela é so fazer isso:
<br><table cellpadding="0" cellspacing="0" CLASS="tbBorder">

Borda de 1 pixel
Enviado por: Areshandore
Data e hora: 02/06/2004 - 13:36h
<style>

.borda1px {
BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid;
BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid;

}
</style>

Pode usar pra fazer borda em imagens, contorno de tabela, contorno de célula de
tabela, etc. Basta colocar dentro da tag que vai ter a borda class=borda1px

Cabeçalho incrementado com CSS

Enviado por: Mauricio Samy Silva
E-mail: maujor@maujor.com
Data e hora: 22/02/2004 - 20:49h
<h2 style="border-top:3px solid #FF0000; border-bottom:2px dotted
#FF0000;">Cabeçalho Incrementado com CSS </h2>
Efeito "Drop Cap" com a propriedade float
Enviado por: Mauricio Samy Silva
E-mail: maujor@maujor.com
Data e hora: 22/02/2004 - 20:26h
<p><span style="font-size:3em; margin-top:-0.3em; float:left;">F</span>olhas de
Estilo em Cascata<br>http://www.maujor.com</p>

Colocando uma imagem transparente

Enviado por: Sergio Felix
E-mail: conectivo@click21.com.br
Data e hora: 22/01/2004 - 10:26h
<img src=path_imagem.formato style="filter: alpha (opacity=tolerancia em %);">

Formulário colorido
Enviado por: Anderson Roberto
E-mail: andersonn_roberto@ig.com.br
Data e hora: 21/08/2003 - 23:46h
Os atributos são os mesmos da tabela e caixas.
<input type=text name="" size=15 style=background-color:#7f7f7f;border-
style:solid;border-color:#b2b2b2>

Cor no Formulário
Enviado por: Brian
E-mail: brian.rpg@globo.com
Data e hora: 18/07/2003 - 14:26h
<style>
select { font-size: smaller; background-color:#ffcc00 ; font-weight: bold; color:
#000080; }
</style>

Mudando a cor do ScrollBar (I.E. Apenas)

Enviado por: Alexandre Teixeira
E-mail: altex@ig.com.br
Data e hora: 09/04/2003 - 02:27h
<style type="text/css">
<!--
BODY {
scrollbar-face-color:#cor_desejada;
scrollbar-highlight-color:#cor_desejada;
scrollbar-3dlight-color:#cor_desejada;
scrollbar-darkshadow-color:#cor_desejada;
scrollbar-shadow-color:##cor_desejada;
scrollbar-arrow-color:#cor_desejada;
 scrollbar-track-color:#cor_desejada;
}
-->
</style>

Sublinhado colorido
Enviado por: Filipe Martins Teixeira
E-mail: arame51@yahoo.com.br
Data e hora: 24/02/2003 - 14:27h
Se você quiser mudar a cor do sublinhado, use esse código e faça as alterações
necessárias:

<head>
<style type:text/css>
A:Hover {text-decoration: none; border-bottom: 1pt solid white;}
</style>
</head>

Cursor sobre o link

Enviado por: Filipe Martins Teixeira
E-mail: aram51@yahoo.com.br
Data e hora: 12/02/2003 - 12:00h
Para mudar o estilo do link quando o cursor está sobre ele use entre as tags
<head></head> o código:

<style type:text/css>
a:hover {text-decoration: underline; color:"#AADD00"}
</style>

Ou o que preferir colocar de pois de a:hover.

Retirando o sublinhado de todos os links

Enviado por: Victor Souza
E-mail: vic.tor@ibest.com.br
Data e hora: 09/02/2003 - 16:39h
Para retirar o sublinhado de todos os links de uma página colouqe o seguinte código
entre as tags <head> e </head>
<style type="text/css">
a {text-decoration: none}
</style>

Cursor tipo Mão

Enviado por: Diego Galafassi
E-mail: diego@diuno.com.br
Data e hora: 10/10/2002 - 13:43h
O netscape não reconhece quando é declarado CURSOR: HAND. Para que ele troque o
cursor normal para um cursor tipo mão, deve ser declarado da seguinte maneira.
CURSOR: POINTER.

Retirando o sublinhado de um link

Enviado por: Leonardo Leal
E-mail: leonardo@codigofonte.com
Data e hora: 13/09/2002 - 12:13h
Todo texto linkado, por padrão do html é sempre sublinhado. A única forma de retirar
esse sublinhado que na maioria das vezes é indesejado pelos desenvolvedores web é
utilizar CSS. Na tag <a href> utilize o atributo style="text-decoration: none;".
Exemplo:

<a href="link.html" style="text-decoration: none;">algum texto</a>

Fonte:

Todos os dados foram extraídos do site http://www.codigofonte.com/css

Divulgue seus serviços aqui http://www.fontte.com.br/fontte/?ac=pre_cadastro&id=31

ESCOLHA A OPÇÃO CLIENTE