Tutorial CSS Tutorial

41
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 ?

description

Tutorial CSSTudo sobre [email protected] como cliente e divulgue seus serviços gratuitamenteLink: http://www.fontte.com.br/fontte/?ac=pre_cadastro&id=31

Transcript of Tutorial CSS Tutorial

Page 1: Tutorial CSS Tutorial

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.

Page 2: Tutorial CSS Tutorial

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:

Page 3: Tutorial CSS Tutorial

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

Page 4: Tutorial CSS Tutorial

<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

Page 5: Tutorial CSS Tutorial

É 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.)

ExemploP{

Page 6: Tutorial CSS Tutorial

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

Page 7: Tutorial CSS Tutorial

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

Page 8: Tutorial CSS Tutorial

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

 3.0 font-size Ajusta o tamanho do tamanho (pt, in, cm, px) { font-size:

Page 9: Tutorial CSS Tutorial

 4.0 (herdado) texto

porcentagem do tamanho normalrelativo: xx-large, x-large, large, medium, small, x-small, xx-small, larger, smaller

12pt }{ font-size: 200% }{ font-size: x-large }

 3.0 4.0

font-family (herdado)

Ajusta os tipos de face e as alternativas (em ordem de preferência)

nome do tipo de facenome da família da fonte

{ font-family: Trebuchet MS, Sans-serif }

 3.0 4.0

font-weight (herdado)

Ajusta o peso do tipo

normalbold(outras opções serão suportadas mais tarde)

{ font-weight: bold }

 3.0 4.0

font-style (herdado)

Texto em itálico

normalitalic(mais opções estarão disponíveis mais tarde; 'oblique smallcaps' está disponível no IE4 somente)

{font-style: italic}

 4.0font-variant (herdado)

especifica uma variante de fonte

smallcaps (outras opções serão suportadas mais tarde)

{ font-variant: smallcaps }

 4.0 @font-face

especifica uma localização que dispõe de uma fonte que não está presente no sistema do usuário.(veja a nota abaixo da tabela)

@font-face {font-family: nome_da_fonte; font-style: estilo_da_fonte; font-weight: densidade_da_fonte; src: url_da_fonte}

 

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

Page 10: Tutorial CSS Tutorial

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

 3.x 4.x

line-height (herdado)

Ajusta a distância entre as bases da linha de texto

tamanho (pt, in, cm, px, em)porcentagem (%) do tamanho de fonte

{ line-height: 18pt }{ line-height: 120% }

 3.x 4.x

text-decoration (não herdado)

Sublinha ou então seleciona o texto

noneunderlineoverlineline-through

{ text-decoration: underline }

 3.x 4.x

text-align (herdado)

Ajusta o alinhamento de texto para a margem esquerda ou direita, ou para o centro da página

leftcenterright

{ text-align: right }

 3.x 4.x

text-indent (herdado)

Faz a indentação da primeira linha do texto no elemento

tamanho (pt, in, cm, px)

{ text-indent: 0.5in }

 4.x vertical-align (não herdado)

alinha o texto verticalmente dentro do elemento

baselinesubsupertoptext-topmiddlebottom

{ vertical-align: super }

Page 11: Tutorial CSS Tutorial

text-bottomporcentagem da altura de linha a partir da base da linha (%)

 4.x 4.x

text-transform (herdado)

Ajusta as regras de maiúsculas e minúsculas no texto

capitalize (coloca em maiúscula a primeira letra de cada palavra)uppercaselowercase

{ text-transform: capitalize }

 4.xletter-spacing (herdado)

ajusta o espaçamento entre as letras no texto(se espera que tenha suporte na versão final do IE 4.0)

normal,tamanho (pt, in, cm, px, em)

{ letter-spacing: 2pt }

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

 3.x 4.x

cor (herdado) Ajusta a cor do texto

nome da corTrio RGBCódigo hexValores RGB

{ color: blue }{ color: #00F }{ color: #0000FF }{ color: RGB 0.0 0.0 1.0 }

 3.x 4.x

background (não herdado) (no IE3.x, as imagens de background são suportadas somente em styles sheets inseridos)

Ajusta as imagens de background ou cores

url(URL) (com ou sem repeat);nome da cor (ou transparent, ou dois nomes de cores, que serão misturadas, separados por um /);trio RGB (código hex)

{ background: url(image1.gif) repeat }{ background: Red }{ background: Red / Blue }{ background: transparent }{ background: #CCCCCC }

 3.x 4.x

background-color (não herdado) (no IE3.x, as imagens de background são suportadas somente

Ajusta a cor do background

nome da cor;trio RGB (código hex)

{ background-color: Red }{ background-color: #CCCCCC }

Page 12: Tutorial CSS Tutorial

em styles sheets inseridos)

 4.x

background-image (não herdado) (no IE3.x, as imagens de background são suportadas somente em styles sheets inseridos)

Ajusta a imagem de background

URL { background-image: url(image1.gif) }

 4.x

background-repeat (não herdado) (no IE3.x, as imagens de background são suportadas somente em styles sheets inseridos)

Ajusta a repetição do entelhamento das imagens de background

repeat (horizontalmente e verticalmente);repeat-x (horizontal);repeat-y (vertical);no-repeat

{ background-repeat: repeat-y }

 4.x

background-attachment (não herdado) (no IE3.x, as imagens de background são suportadas somente em styles sheets inseridos)

Fixa a imagem de background ou permite que ela deslize junto com a página

scroll ou fixed { background: fixed }

 4.x

background-position (não herdado) (no IE3.x, as imagens de background são suportadas somente em styles sheets inseridos)

Ajusta a posição inicial das imagens de background (Observe que a posição default, 0,0 ou 0%,0%, é o canto superior esquerdo do elemento)

Posição (x y) ou (x% y%);top, center, bottomleft, center, right

{ background-position: 2cm 1cm }{ background-position: 50% 20% }{ background-position: top center }{ background-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.

Page 13: Tutorial CSS Tutorial

Suporte Propriedade Descrição Valores Exemplo

 3.x 4.x

margin-left (não herdado)

Ajusta a distância a partir do lado esquerdo da página

tamanho (pt, in, cm, px)

{ margin-left: 1in }

 3.x 4.x

margin-right (não herdado)

Ajusta a distância a partir do lado direito da página

tamanho (pt, in, cm, px)

{ margin-right: 1in }

 3.x 4.x

margin-top (não herdado)

Ajusta a distância a partir da parte de baixo do elemento prévio

tamanho (pt, in, cm, px)

{ margin-top: -20pt }

 3.x 4.x

margin-bottom (não herdado)

Ajusta a distância a partir da parte de cima do próximo elemento

tamanho (pt, in, cm, px)

{ margin-bottom: 20pt }

 3.x 4.x

margin (não herdado)

Ajustas as margens em todos os quatro lados de um elemento (Se houver somente um valor, ele se aplica a todos os lados; se houver dois ou três, o valor que falta será tomado do lado oposto.)

tamanho (pt, in, cm, px) ou porcentagem do tamanho da fonte na ordem: alto, direita, baixo, esquerda

{ margin: .5cm .5cm 1cm .5cm }

 4.x 4.x

padding (não herdado)

Ajusta o preenchimento em todos os quatro lados do conteúdo de um elemento (Se houver somente um valor, ele se aplica a todos os lados; se houver dois ou três, o valor que falta será tomado do lado oposto.)

tamanho (pt, in, cm, px) ou porcentagem do tamanho da fonte na ordem: alto, direita, baixo, esquerda

{ padding: .5cm .5cm 1cm .5cm }

 3.x 4.x

padding-top (não herdado)

Ajusta o preenchimento na parte de cima do conteúdo de um elemento

tamanho (pt, in, cm, px) ou porcentagem do tamanho da fonte

{ padding-top: 5pt }

 4.x 4.x

padding-right (não herdado)

Ajusta o preenchimento no lado direito do conteúdo de um elemento

tamanho (pt, in, cm, px) ou porcentagem do tamanho da fonte

{ padding-right: 5pt }

 4.x 4.x

padding-bottom (não herdado)

Ajusta o preenchimento na parte de baixo do conteúdo de um elemento

tamanho (pt, in, cm, px) ou porcentagem do tamanho da fonte

{ padding-bottom: 5pt }

 4.x 4.x

padding-left (não herdado)

Ajusta o preenchimento no lado esquerdo do conteúdo de um elemento

tamanho (pt, in, cm, px) ou porcentagem do tamanho da fonte

{ padding-left: 5pt }

 4.x 4.x

border-top-width (não herdado)

Ajusta a largura da borda ao longo da parte de cima de um elemento

tamanho (pt, in, cm, px); thin, medium, thick

{ border-top-width: thin }

 4.x 4.x

border-right-width (não herdado)

Ajusta a largura da borda ao longo do lado direito de um elemento

tamanho (pt, in, cm, px); thin, medium, thick

{ border-right-width: thin }

Page 14: Tutorial CSS Tutorial

 4.x 4.x

border-bottom-width (não herdado)

Ajusta a largura da borda ao longo da parte de baixo de um elemento

tamanho (pt, in, cm, px); thin, medium, thick

{ border-bottom-width: thin }

 4.x 4.x

border-width (não herdado)

Ajusta a largura da borda em cada lado de um elemento na ordem parte de cima, lado direito, parte de baixo, lado esquerdo (Se houver só um valor, ele se aplica a todos os lados; se houver dois ou três, os valores que faltam serão tomados do lado oposto.)

tamanho (pt, in, cm, px); thin, medium, thick

{ border-width: thin thin thick thin }

 4.xborder-top-color (não herdado)

Ajusta a cor da borda ao longo do lado de cima de um elemento

nome da cor ou código hex

{ border-top-color: green }

 4.xborder-right-color (não herdado)

Ajusta a cor da borda ao longo do lado direito de um elemento

nome da cor ou código hex

{ border-right-color: green }

 4.xborder-bottom-color (não herdado)

Ajusta a cor da borda ao longo do lado de baixo de um elemento

nome da cor ou código hex

{ border-bottom-color: #00FF00 }

 4.xborder-left-color (não herdado)

Ajusta a cor da borda ao longo do lado esquerdo de um elemento

nome da cor ou código hex

{ border-left-color: thin }

 4.x 4.x

border-color (não herdado)

Ajusta a cor da borda em cada lado de um elemento na ordem parte de cima, lado direito, parte de baixo, lado esquerdo (Se houver só um valor, ele se aplica a todos os lados; se houver dois ou três, os valores que faltam serão tomados do lado oposto; note que o Netscape só permite um valor)

nome da cor ou código hex

{ border-color: green #FFFF00 #00FFFF green } (IE4){ border-color: green } (IE4 or Netscape 4)

 4.xborder-top-style (não herdado)

Ajusta o estilo da borda ao longo do lado de cima de um elemento

nome do estilo (none, solid, double, groove, ridge, inset, outset)

{ border-top-style: ridge }

 4.xborder-right-style (não herdado)

Ajusta o estilo da borda ao longo do lado direito de um elemento

nome do estilo (none, solid, double, groove, ridge, inset, outset)

{ border-right-style: solid }

 4.xborder-bottom-style (não herdado)

Ajusta o estilo da borda ao longo do lado de baixo de um elemento

nome do estilo (none, solid, double, groove, ridge, inset, outset)

{ border-bottom-style: groove }

 4.x border-left-style (não herdado)

Ajusta o estilo da borda ao longo do lado esquerdo de um elemento

nome do estilo (none, solid, double, groove,

{ border-left-style: inset }

Page 15: Tutorial CSS Tutorial

ridge, inset, outset)

 4.x 4.x

border-style (não herdado)

Ajusta o estilo da borda em todos os lados de um elemento

nome do estilo (none, solid, double, groove, ridge, inset, outset)

{ border-style: outset }

 4.xborder-top (não herdado)

Ajusta a largura, cor, e estilo da borda ao longo do lado de cima de um elemento

largura, cor, e estilo

{ border-top: thin green ridge }

 4.xborder-right (não herdado)

Ajusta a largura, cor, e estilo da borda ao longo do lado direito de um elemento

largura, cor, e estilo

{ border-right: thin green ridge }

 4.xborder-bottom (não herdado)

Ajusta a largura, cor, e estilo da borda ao longo do lado de baixo de um elemento

largura, cor, e estilo

{ border-bottom: thin green ridge }

 4.xborder-left (não herdado)

Ajusta a largura, cor, e estilo da borda ao longo do lado esquerdo de um elemento

largura, cor, e estilo

{ border-left: thin green ridge }

 4.xborder (não herdado)

Ajusta a largura, cor, e estilo da borda em todos os lados de um elemento

largura, cor, e estilo

{ border: thin green ridge }

 4.x 4.x

float (não herdado)

Faz com que o elemento flutue para um lado e outro do texto e o envolva. (Usado nos elementos DIV e SPAN.)

left, right, ou none { float: left }

 4.x 4.x

clear (não herdado)

Especifica se o elemento pode ter elementos flutuando à sua volta -- faz com que o elemento se posicione por baixo de qualquer elemento que esteja flutuando no lado especificado.

left, right, ou both { clear: left }

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

 4.x 4.x

display (não herdado)

faz com que o elemento não apareça (não será reservado nenhum espaço para ele na página)

none { display: none }

Page 16: Tutorial CSS Tutorial

 4.x 4.x

list-style-type (herdado)

especifica a aparência de marcadores de item de lista (para uso com elementos LI)

disk; circle; square; decimal; lower-roman; upper-roman; lower-alpha; upper-alpha; none

{ list-style-type: square }

 4.x 4.x

list-style-image (herdado)

especifica uma imagem para ser usada como marcador de item de lista (para uso com elementos LI)

url(URL); none { list-style-image: url(redball.jpg) }

 4.x 4.x

list-style-position (herdado)

especifica a posição de marcadores de item de lista (para uso com elementos LI)

inside; outside{ list-style-position: inside }

 4.x 4.x

list-style (herdado)

especifica a posição, estilo,e URL da imagem a ser usada como marcador de item de lista (para uso com elementos LI)

inside; outsidedisk; circle; square; decimal; lower-roman; upper-roman; lower-alpha; upper-alpha; noneURL

{ list-style: inside disk url(redball.jpg) }

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

 4.x 4.x

clip (não herdado)

Especifica a área do elemento que aparece como transparente

rect (top right left bottom) onde top right left bottom são definidas como auto ou como valores de extensão (pt, in, cm, px)

{ clip: rect (5pt auto auto auto) }

 4.x 4.x

height (não herdado)

Especifica a altura de um elemento (é mais útil para o escalonamento de imagens; a média da aparência será mantida se a width for especificada como auto)

auto ou valores de extensão (pt, in, cm, px) ou porcentagem

{ height: 50px }

 4.x 4.x

width (não herdado)

Especifica a largura de um elemento (é mais útil para o escalonamento de imagens; a média da aparência será mantida se height for

auto ou valores de extensão (pt, in, cm, px) or porcentagem

{ width: 50% }

Page 17: Tutorial CSS Tutorial

especificada como auto)

 4.x 4.x

left (não herdado)

Especifica a posição esquerda de um elemento relativamente ou absolutamente posicionado

auto ou valores de extensão (pt, in, cm, px) or porcentagem

{ left: 2pt }

 4.x 4.x

top (não herdado)

Especifica a posição da parte de cima de um elemento relativamente ou absolutamente posicionado

auto ou valores de extensão (pt, in, cm, px) ou porcentagem

{ top: -2pt }

 4.x 4.x

overflow (não herdado)

Especifica o manejo da porção de um elemento relativamente ou absolutamente posicionado, que se derrama sobre outro elemento

clip (a porção inundada é oculta) ou none (a porção inundada aparece) ou scroll (para revelar a porção inundada)

{ overflow: clip }

 4.x 4.x

position (não herdado)

Especifica se o elemento pode ser posicionado

absolute (em relação ao documento); relative (em relação ao elemento pai); static (default--não posicionado)

{ position: relative }

 4.x 4.x

visibility (não herdado)

Especifica se o elemento é visível (espaço para o elemento é reservado em ambos os casos)

visible; hidden { visibility: hidden }

 4.xz-index (não herdado)

Especifica se o elemento é mostrado acima ou abaixo de outros elementos com os quais faz entelhamento (observe que o Netscape 4.0 lida com isso através do atributo layer

number (positivo para cima, negativo para baixo, começando do 1; por default a elementos sucessivos são assignados números superiores aos elementos antecedentes)

{ z-index: 2 }

 4.xwhite-space (não herdado)

Especifica se um elemento vai ser mostrado normalmente ou num texto pré-formatado

normal; pre { white-space: pre }

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

 4.x page-break-before (não herdado)

insere quebras de página (somente para fins de impressão)

always; auto (se necessário); left (insere uma ou duas quebras de página até que se chegue à p´gina esquerda em branco); right (insere uma ou duas

{ page-break-before: always }

Page 18: Tutorial CSS Tutorial

quebras de página até que se chegue à p´gina direita em branco)

 4.xpage-break-after (não herdado)

insere quebras de página (somente para fins de impressão)

always; auto (se necessário); left (insere uma ou duas quebras de página até que se chegue à p´gina esquerda em branco); right (insere uma ou duas quebras de página até que se chegue à p´gina direita em branco)

{ page-break-after: always }

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

 4.x

filter (filtragem visual)(não herdado)

aplica várias filtragens visuais para efeitos especiais

Forma geral: { filter: nome_do_filtro(parâmetro1, parâmetro2...)

{ filter: dropshadow (color=#9999FF, offx=3pt, offy=5pt) }

 4.x Alpha

Coloca um nível de transparência uniforme.

filter: alpha(Opacity=, FinishOpacity=, Style= StartX=, StartY=, FinishX=, FinishY=)

filter: alpha(Opacity=75, FinishOpacity=15, Style=1)

 4.x Blur

Cria a impressão de movimento em alta velocidade.

filter: blur(Add=, Direction=, Strength=)

filter: blur(Add=1, Direction=90, Strength=10)

 4.x Chroma

Torna uma cor específica transparente.

filter: chroma(Color=) filter: chroma(Color=#ffff00)

 4.x DropShadow

Cria uma silhueta sólida de um objeto.

filter: DropShadow(Color=, OffX=, OffY=, Positive=)

filter: DropShadow(Color=#003399, OffX=3, OffY=3, Positive=1)

 4.x FlipH

Cria um reflexo horizontal de uma imagem.

filter: fliph filter: fliph

 4.x FlipV Cria um filter: flipv filter: flipv

Page 19: Tutorial CSS Tutorial

reflexo vertical de uma imagem.

 4.x Glow

Adiciona irradiação ao redor das bordas externas de um objeto.

filter: glow(Color=, Strength=)

filter: glow(Color=#00FF00, Strength=30)

 4.x Grayscale

Retira informação de cor da imagem.

filter: gray filter: gray

 4.x Invert

Reverte os valores de coloração, saturação e brilho.

filter: invert filter: invert

 4.x Light

Projeta uma fonte de luz sobre um objeto.

filter: light filter: light

 4.x Mask

Cria uma máscara transparente de um objeto.

filter: mask(Color=) filter: mask (Color=#009933)

 4.x Shadow

Cria uma silhueta sólida em projeção.

filter: shadow(Color=, Direction=)

filter: shadow(Color=#9900FF, Direction=135)

 4.x Wave

Cria uma distorção senoidal em ondas ao longo do eixo X.

filter: wave(Add=, Freq=, Phase=, LightStrength=, Strength=)

filter: wave(Add=1, Freq=10, Phase=90, LightStrength=10, Strength=10)

 4.x XRay

Mostra somente as bordas do objeto.

filter: xray filter: xray

 4.x filter (filtro de revelação de transição) (não herdado)

permite revelar ou esconder elementos visuais, usando padrões pré-

Forma geral: { filter: revealtrans (duração=duration, forma da transição=transitionshape)} (a duração é expressa em segundos.milisegundos)

{ filter: revealtrans (duration=2.0, transition=10 }

Page 20: Tutorial CSS Tutorial

definidos

(a forma da transição é indicada por um valor de 1 a 23, como segue: Tipo de transição Valor Caixa interna: 0Caixa externa: 1Círculo interno: 2Círculo externo: 3Esfregado para cima: 4Esfregado para baixo: 5Esfregado para a direita: 6Esfregado para a esquerda: 7Cortinas verticais: 8Cortinas horizontais: 9Tabuleiro de damas atravessado: 10Tabuleiro de damas para baixo: 11Dissolução aleatória: 12Fenda vertical para dentro: 13Fenda vertical para fora: 14Fenda horizontal para dentro: 15Fenda horizontal para fora: 16Faixas à esquerda para baixo: 17Faixas à esquerda para cima: 18Faixas à direita para baixo: 19Faixas à direita para cima: 20Barras horizontais aleatórias: 21Barras verticais aleatórias: 22Aleatoriedade: 23

 4.x

filter (filtro de transição de mistura) (não herdado)

faz o elemento visual desvanecer ou aparecer gradualmente

Forma geral: { filter: blendTrans (Duração=duration}(a duração é expressa em segundos.milisegundos)

{ filter: blendTrans (duration=2.0, transition=10 }

Alguns Exemplos de Filtros

Page 21: Tutorial CSS Tutorial

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

 4.x@import (não herdado)

Importa outra folha de estilo para dentro da atual; deve aparecer antes que qualquer estilo seja definido; novas propriedades e valores irão sobrepujar-se às da folha de estilo importada

@import: url(url)@import url(stylesheet2.css)

 4.xcursor (herdado)

especifica a aparência do cursor quando colocado dentro do elemento

auto (default definido pelo browser/sistema operacional); crosshair; default; hand; move; e-resize; ne-resize; nw-resize; n-resize; se-resize; sw-resize; s-resize; w-resize; text; wait; help

{ cursor: help }

Dicas enviadas por nossos usuários

Envie sua dicaNunca uma page é 100% seguraEnviado por: Djavan

Page 22: Tutorial CSS Tutorial

E-mail: NuloData e hora:    30/07/2005 - 12:49hNunca 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 possuiEnviado por: Luciano ChristianesE-mail: [email protected] e hora:    05/10/2004 - 18:42hPara 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.

Page 23: Tutorial CSS Tutorial

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 tabelasEnviado por: Paulo JanuárioE-mail: [email protected] 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;

Page 24: Tutorial CSS Tutorial

<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 pixelEnviado por: AreshandoreData 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 CSSEnviado por: Mauricio Samy SilvaE-mail: [email protected] 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 floatEnviado por: Mauricio Samy SilvaE-mail: [email protected] 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 transparenteEnviado por: Sergio FelixE-mail: [email protected] e hora:    22/01/2004 - 10:26h<img src=path_imagem.formato style="filter: alpha (opacity=tolerancia em %);">

Page 25: Tutorial CSS Tutorial

Formulário coloridoEnviado por: Anderson RobertoE-mail: [email protected] e hora:    21/08/2003 - 23:46hOs 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árioEnviado por: BrianE-mail: [email protected] 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 TeixeiraE-mail: [email protected] 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 coloridoEnviado por: Filipe Martins TeixeiraE-mail: [email protected] e hora:    24/02/2003 - 14:27hSe você quiser mudar a cor do sublinhado, use esse código e faça as alterações necessárias:

<head>

Page 26: Tutorial CSS Tutorial

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

Cursor sobre o linkEnviado por: Filipe Martins TeixeiraE-mail: [email protected] e hora:    12/02/2003 - 12:00hPara 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 linksEnviado por: Victor SouzaE-mail: [email protected] e hora:    09/02/2003 - 16:39hPara 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ãoEnviado por: Diego GalafassiE-mail: [email protected] e hora:    10/10/2002 - 13:43hO 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 linkEnviado por: Leonardo LealE-mail: [email protected] e hora:    13/09/2002 - 12:13hTodo 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;".

Page 27: Tutorial CSS Tutorial

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=31ESCOLHA A OPÇÃO CLIENTE