CSS Tutorial

Apresentação | GuestBook | Links | Contato

Introdução
	Sobre
	Vantagens
	Limitações
	Implementando
	Precêdencia

Trabalhando com CSS
	Unidades de Medida
	Herança
	Especificando um estilo

Propriedades e Valores
	Fontes
	Textos
	Background e Cores
	Caixas
	Listas
	Posicionamento
	Impressão
	Filtros
	Amostras de Filtros
	Outras Propriedades

Contribuições dos Usuários
	Dicas e exemplos
	Novidades
	Fórum de discussão

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

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