Home Importante! História Tutorial HTML Glossário Faqs Buscadores Sinapse
Fóruns ASCII Cores JavaScript CSS Links Novidades Browsers Conclusão
  T u t o r i a l   D H T M L / C S S   E d a u r e l i o
            2 0 0 1  -  2 0 0 4

Cascading Style Sheets
Folhas de Estilo em Cascata

O CSS: (Cascading Style Sheets) ou Folhas de Estilo em Cascata, é uma tecnologia que apareceu em 1996, padronizada pelo World Wide Web Consortium (a entidade que define os padrões da WEB), e que não é parte do HTML padrão, mas sim um conjunto de novas tags que ajudam a ter um melhor controle sobre o layout e o gerenciamento de nossas páginas. Agora vamos conhecer um pouco mais sobre essa tecnologia: O nosso próximo assunto será...

BORDAS (esta criada com TABLE)
<TABLE WIDTH="680" border background="imagens/bg_t14.jpg" bgcolor="#ffcc99" bordercolor="red">
<TR><TD ALIGN="center"><TT><B><FONT SIZE="4">BORDAS</FONT></B></TT> (esta criada com TABLE)
</TD></TR>
</TABLE>

BORDAS (esta criado com CSS)
<DIV STYLE="border-style:double; border-width:3px; border-color:red; background:url(imagens/bg_t14.jpg)">
<CENTER><TT><B><FONT SIZE="4">BORDAS</FONT></B></TT> (esta criado com CSS)</CENTER>
</DIV>

A exemplo dos dois efeitos de ilustração sobre o título deste tópico "BORDAS", apresentados acima, o primeiro foi criado com a tag <TABLE> e o segundo com o recurso CSS, <DIV>. Embora os recursos de tabela tenha oferecido diversas opções de configuração ao webmaster, o CSS surgiu para aumentar essa liberdade com maior ênfase à criatividade.

Os dois modelos acima foram configurados com os mesmos parâmetros de cor, textura e fonte, observe a diferença de apresentação. Muito sutil, não é mesmo? Porém a borda criada com os recursos da Folha de Estilo possui outros parâmetros de formatação que a tag TABLE não possui. Agora vou apresentar algumas propriedades que estão relacionadas com as bordas:

 

padding
Cria um espaçamento entre o objeto (nesse caso o texto) e as quadro bordas. Esse espaçamento pode ser definido em points (pt), inches (in), centimeters (cm), pixels (px) ou percentage (%).

<DIV STYLE="border: solid; border-width:1px; padding:5px">padding com 5px</DIV>
padding com 5px

<DIV STYLE="border: solid; border-width:1px; padding:10pt">padding com 10pt</DIV>
padding com 10pt

<DIV STYLE="border: solid; border-width:1px; padding:1cm">padding com 1cm</DIV>
padding com 1cm

 

Porém há situações que não precisamos de um espaço eqüidistante entre o objeto e seus quatro lados. Nesse caso para obter um controle mais refinado sobre as bordas podemos usar as seguintes propriedades:

padding-bottom
Cria um espaçamento entre o objeto e a borda da base.

padding-left
Cria um espaçamento entre o objeto e a borda esquerda.

padding-right
Cria um espaçamento entre o objeto e a borda da direita.

padding-top
Cria um espaçamento entre o objeto e a borda de topo. Os espaçamento são definido em points (pt), inches (in), centimeters (cm), pixels (px) ou percentage (%).

<DIV STYLE="border: solid; border-width:1px; padding-bottom:15px">padding com 5px</DIV>
padding com 5px

<DIV STYLE="border: solid; border-width:1px; padding-left:25pt">padding com 10pt</DIV>
padding com 10pt

<DIV STYLE="border: solid; border-width:1px; padding-top:1cm">padding com 1cm</DIV>
padding com 1cm

Aprenda mais sobre essa propriedade em Botões Texturizados

 

border-width
Especifica a espessura da borda. A espessura pode ser definida em três padrões específicos: thin, medium e thick ou em pixels.

Exemplos:

<DIV STYLE="border: solid; border-width: 1px;">borda extrafina</DIV>
borda extrafina

<DIV STYLE="border: solid; border-width: thin;">borda fina</DIV>
borda fina

<DIV STYLE="border: solid; border-width: medium;">borda média</DIV>
borda média

<DIV STYLE="border: solid; border-width: thick;">borda grossa</DIV>
borda grossa

<DIV STYLE="border: solid; border-width: 10px;">borda com 10 pixels</DIV>
borda com 10 pixels

 

border-color
Altera a cor da borda. A cor pode ser definida pelo nome padrão ou pelo código RGB.

<DIV STYLE="border: solid; border-color: green;">borda verde</DIV>
borda verde

<DIV STYLE="border: solid; border-color: #6495ed;">borda azul</DIV>
borda azul

 

border-style
Altera o estilo da borda e possibilita até oito tipos diferentes de configuração: solid (solido), dashed (tracejado), dotted (pontilhado), double (duplo), groove (entalhe), ridge (saliente), inset (baixo relevo), outset (alto relevo) e none (sem borda).

Exemplos:

<DIV STYLE="border-style: solid;">borda sólida</DIV>
borda sólida

<DIV STYLE="border-style: dashed;">borda tracejada</DIV>
borda tracejada

<DIV STYLE="border-style: dotted;">borda pontilhada</DIV>
borda pontilhada

<DIV STYLE="border-style: double;">borda dupla</DIV>
borda dupla

<DIV STYLE="border-style: groove;">borda sombreada</DIV>
borda sombreada

<DIV STYLE="border-style: ridge;">borda sombreada</DIV>
borda sombreada

<DIV STYLE="border-style: inset;">borda em baixo relevo</DIV>
borda em baixo relevo

<DIV STYLE="border-style: outset;">borda em alto relevo</DIV>
borda em alto relevo

<DIV STYLE="border-style: none;">Sem borda</DIV>
Sem borda

 

A configuração da borda também pode ser feita em cada um de seus lados independentemente. Existem propriedades que tratam de efeitos como espessura, tipo e cor de apenas um dos lados da borda sem alterar a configuração dos demais lados. Eles são:

border-bottom-color - Cor da borda base.
border-bottom-style - Estilo da borda base.
border-bottom-width - Largura da borda base. 		border-left-color - Cor da borda esquerda.
border-left-style - Estilo da borda esquerda.
border-left-width - Largura da borda esquerda.
 
border-right-color - Cor da borda direita.
border-right-style - Estilo da borda direita.
border-right-width - Largura da borda direita. 		border-top-color - Cor da borda topo.
border-top-style - Estilo da borda topo.
border-top-width - Largura da borda topo.

Os valores de color são definidos pelo nome da cor ou pelo código RGB. Os valores de style são solid, dashed, dotted, double, groove, ridge, inset, outset e none. Os valores de width são thin, medium, thick e pixels.

Exemplo:

<DIV STYLE="border-top-color:#1E90FF; border-top-width:4px; border-top-style:double; border-bottom-color:#1E90FF; border-bottom-width:4px; border-bottom-style:double; border-left-style:none; border-right-style:none">Um quadro com borda dupla sem as laterais</DIV>

Um quadro com borda dupla sem as laterais

Porém existe uma forma mais simples caso queira especificar os quatro lados com estilo, cor e largura sem precisar repetir todas as categorias de propriedades. A propriedade border-top, por exemplo, aceita os três valores de largura, cor e tipo simultaneamente. Então a sintaxe do código fonte do mesmo exemplo acima ficaria assim:

<DIV STYLE="border-top:#1E90FF 4px double; border-bottom:#1E90FF 4px double; border-left:none; border-right:none"> Um quadro com borda dupla sem as laterais</DIV>

Um quadro com borda dupla sem as laterais

Mais outro exemplo, agora mudando todas as bordas radicalmente:

<DIV STYLE="border-top:#87ceeb 2px dashed; border-bottom:#ff4500 5px double; border-left:#ffff00 7px solid; border-right:#FF7F00 10px solid; ">Um quadro com borda mista</DIV>

Um quadro com borda mista

 

O controle das bordas não fica só nisso. Podemos combina-las com outras tags HTML e JavaScript. No exemplo abaixo tem um marcador de data e horas (JavaScript) realçado com bordas. O comando CSS está destacado em negrito. A TABLE é um recurso que usei para definir o comprimento da barra (pois WIDTH não funciona dentro do CSS e BORDER-WIDTH executa outra função)

<CENTER>
<TABLE WIDTH="300">
<TR>
<TD ALIGN="center">
<DIV STYLE="border-style: outset; background: #b0c4de">
<font size="1" face="verdana">
<script language="JavaScript"><!--
var agora = new Date();
var hora = agora.getHours()
var minuto = agora.getMinutes()
var aNome = agora.getYear()
var mNome = agora.getMonth() + 1;
var dNome = agora.getDay() + 1;
var diaNr = ((agora.getDate()<10) ? "0" : "")+ agora.getDate();
var hora = ((hora<10) ? "0" : "")+ hora;
var minuto = ((minuto<10) ? "0" : "")+ minuto;
if (aNome < 2000) { aNome = agora.getYear() + 1900; }
if(dNome==1) dia = "Domingo";
if(dNome==2) dia = "Segunda";
if(dNome==3) dia = "Terça-feira";
if(dNome==4) dia = "Quarta-feira";
if(dNome==5) dia = "Quinta-feira";
if(dNome==6) dia = "Sexta-feira";
if(dNome==7) dia = "Sábado";
if(mNome==1) mes="Janeiro";
if(mNome==2) mes="Fevereiro";
if(mNome==3) mes="Março";
if(mNome==4) mes="Abril";
if(mNome==5) mes="Maio";
if(mNome==6) mes="Junho";
if(mNome==7) mes="Julho";
if(mNome==8) mes="Agosto";
if(mNome==9) mes="Setembro";
if(mNome==10) mes="Outubro";
if(mNome==11) mes="Novembro";
if(mNome==12) mes="Dezembro";
var DiaHoje =(" "+diaNr+" de "+mes+" de "+aNome);
var DiaHora =(" "+dia+" - "+hora+":"+minuto);
document.write("<FONT COLOR='#000000' FACE=Verdana,Arial,Helvetica SIZE=1>"+DiaHoje+" - "+DiaHora+"</FONT>");
// --></script>
</DIV>
</TD>
</TR>
</TABLE>
</CENTER>

Agora uma borda com background com texto em movimento.

<DIV STYLE="border-style: outset; background: #66cdaa">
<MARQUEE behavior=scroll scrollamount="2" width=100%>
<FONT SIZE="1" face="verdana">COMBINANDO COMANDOS COM CSS</FONT>
</MARQUEE>
</DIV>

COMBINANDO COMANDOS COM CSS

Criando botões...

<TABLE>
<TR>
<TD width="100" align="center">
<DIV STYLE="border-style: outset; background: #d8bfd8">
<a href="index.htm" style="text-decoration:none">
<FONT SIZE="1" face="verdana">Home</FONT></A></DIV>
</TD>
</TR>
</TABLE>

Criando botões com textura gif/jpg...

<TABLE>
<TR>
<TD width="100" align="center">
<DIV STYLE="border-style: outset;
background:url(imagens/textura01.jpe)">
<a href="index.htm" style="text-decoration:none">
<FONT SIZE="3" face="courier new">Home</FONT></A></DIV>
</TD>
</TR>
</TABLE>

Para criar uma barra de comandos basta repetir a sintaxe do botão (acima) para cada link e inseri-los dentro de uma tabela. Veja como ficou minha barra de comandos com esta formatação.

 

border-collapse
O Efeito Collapse. Para mostrar o que é este efeito nada melhor que a aplicação prática de um exemplo. A tabela do lado esquerdo possui uma formatação padrão cuja borda, em alto relevo, já é bem conhecida na Internet.

TABELA PADRÃO
' ^ ~ ç   Acentos, til, cedilha
; : ,    Ponto e vírgula, dois pontos, vírgula
< >   Sinal de maior ou menor
# & *   Trelha, E comercial, asterisco
( ) [ ] { }   Parênteses, chaves, colchetes
! ? $   Exclamação, interrogação, cifrão
` " +   Apóstrofe, aspas. mais
/ | \   Barra, pipe, barra invertida
 
TABELA COM COLLAPSE
' ^ ~ ç   Acentos, til, cedilha
; : ,    Ponto e vírgula, dois pontos, vírgula
< >   Sinal de maior ou menor
# & *   Trelha, E comercial, asterisco
( ) [ ] { }   Parênteses, chaves, colchetes
! ? $   Exclamação, interrogação, cifrão
` " +   Apóstrofe, aspas. mais
/ | \   Barra, pipe, barra invertida

No lado direito temos a mesma tabela configurada com o Efeito Collapse que omite suas bordas e apresenta uma textura suave em auto-relevo dando um acabamento visual mais refinado. Aqui está uma aplicação CSS à tabela. Praticamente todos os comandos de border-style podem ser usados para revestir uma tabela criando novos efeitos.

Abaixo segue uma seleção dos efeitos mais interessantes. Novamente vamos começar com uma tabela padrão, ela serve como ponto de referência.

<table border width="230">
<tr><th colspan=2>Tabela padrão</th></tr>
<tr><td>célula 1</td><td>célula 2</td></tr>
</table>
Tabela padrão
célula 1célula 2

<table border width="230"
STYLE="border-collapse:collapse">
<tr><th colspan=2>Efeito collapse</th></tr>
<tr><td>célula 1</td><td>célula 2</td></tr>
</table>
Efeito collapse
célula 1célula 2

<table border width="230"
STYLE="border:4px dashed">
<tr><th colspan=2>Borda tracejada</th></tr>
<tr><td>célula 1</td><td>célula 2</td></tr>
</table>
Borda tracejada
célula 1célula 2

<table border width="230"
STYLE="border:5px double">
<tr><th colspan=2>Borda dupla</th></tr>
<tr><td>célula 1</td><td>célula 2</td></tr>
</table>
Borda dupla
célula 1célula 2

<table border width="230"
STYLE="border:3px inset">
<tr><th colspan=2>Baixo relevo</th></tr>
<tr><td>célula 1</td><td>célula 2</td></tr>
</table>
Baixo relevo
célula 1célula 2

<table border width="230"
STYLE="border:3px outset">
<tr><th colspan=2>Alto relevo</th></tr>
<tr><td>célula 1</td><td>célula 2</td></tr>
</table>
Alto relevo
célula 1célula 2

<table border width="230"
STYLE="border:3px none">
<tr><th colspan=2>Sem bordas</th></tr>
<tr><td>célula 1</td><td>célula 2</td></tr>
</table>
Sem bordas
célula 1célula 2

<table border width="180"
STYLE="border-collapse:collapse;
border-top:#b0c4de 4px solid;
border-left: #228b22 4px solid;
border-bottom:#ff6347 4px solid;
border-right:#ee82ee 4px solid">
<tr><th colspan=2>Multicolorida</th></tr>
<tr><td>célula 1</td><td>célula 2</td></tr>
</table>
Multicolorida
célula 1célula 2

 

LINHAS TRACEJADAS <DIV STYLE atributos></DIV>

Aqui temos um texto envolto por uma linha tracejada. Na verdade é uma borda tracejada que também pode ser usada como linha. Para isso basta omitir o texto entre <DIV> e </DIV> e a borda se transforma em linha.

<DIV STYLE="border-bottom:dashed 1px"></DIV>

<DIV STYLE="border-bottom:dashed 4px"></DIV>

<DIV STYLE="border-bottom:dashed 6px"></DIV>

<DIV STYLE="border-bottom:dashed 2px #7b68ee"></DIV>

<DIV STYLE="border-bottom:dashed 4px #238E23"></DIV>

<DIV STYLE="border-bottom:dashed 6px #FF6EC7"></DIV>

Outros tipos de linhas...

<DIV STYLE="border-style: double;"></DIV>

<DIV STYLE="border-style: groove;"></DIV>

<DIV STYLE="border-style: double; border-width: thick;"></DIV>

<DIV STYLE="border-style: inset;"></DIV>

<DIV STYLE="border-top: #ffff00 2px solid; border-bottom: #FF7F00 2px solid;"></DIV>
<DIV STYLE="border-top: #ffff00 2px solid; border-bottom: #FF7F00 2px solid;"></DIV>

 

Home Importante! História Tutorial HTML Glossário Faqs Buscadores Sinapse
Fóruns ASCII Cores JavaScript CSS Links Novidades Browsers Conclusão
© Free Copyright - edaurelio@hotmail.com - Arquivo atualizado em 22/08/04