Login: Senha: Registrar-se - Esqueci minha senha
.: Menu
Home
Buscar no Na Faixa
Artigos
Jogos Online
Sign. dos Sonhos
Humor e Piadas
Papel de Parede
Ilusões de Ótica
.: Bancos
Emoticons e Gifs
Ícones
Logos
.: Canais
Apostilas
Arte/Cultura
Blog
Busca
Celular
Downloads
E-mail Grátis
Emoticons
Esportes
Filmes
Flogs
Fontes
GTA Mods
Host Grátis
Humor
Infantil
Informática
Jogos
Jogos Online
Linux
Músicas
Notícias
Offline
Redirecionadores
Sites Parceiros
Webdesigners
Webmasters
.: Serviços
Mural de Recados
Editor de Fotos
Protetor de Links
Usuários Online
Bloco de Notas
Formmail
Meu IP
Teste de Conexão
Banner Rotativo
.: Geradores
Barra de Rolagem
Recomende
Pop-up
Inverter Link
.: Na Faixa
Sobre
Contato
Recomende-nos
Termos de uso

Bordas pontilhadas com CSS

Enviado em 21/02/2007 - 03:20
Fonte: A A A A

Para dar distintos efeitos a elementos estruturados, como as tabelas, podemos recorrer às classes, parte integrante das folhas de estilo (CSS).


Veremos agora outra maneira de utilizar as CSS (folhas de estilo cascata) para criar um estilo que podemos utilizar em HTML. É um estilo para realizar as bordas das tabelas com linhas pontilhadas, que aliás é bastante original porém nosso conselho é não abusar muito disso.

Para conseguir isso, simplesmente temos que utilizar a propriedade de CSS "border-style", atribuindo o valor "dotted", que quer dizer pontilhado em inglês. Ademais, podemos definir outros valores ao estilo de borda pontilhada, como pode ser a cor da borda ou a cor de fundo da tabela.

Para este exercício definimos uma classe que aplicaremos às tabelas ou a outros elementos que desejamos que tenham a borda pontilhada.

Nota: Uma classe é uma declaração de estilo que podemos utilizar em qualquer elemento de uma página. Para isso, inclui-se o atributo class="nome_classe" na etiqueta HTML que desejamos que tenha tal estilo.

<style type="text/css">
.pontilhado{
border-style: dotted;
border-width: 1px;
border-color: 660033;
background-color: cc3366;
font-family: verdana, arial;
font-size: 10pt;
}
</style>

Esta classe tem uma série de atributos de estilos definidos. Desde o primeiro até o último são: tipo de borda, largura da borda, cor da borda, cor de fundo, tipo de letra e tamanho da fonte. O atributo que nos interessa é o primeiro, no qual se indica que se deseja um tipo de borda pontilhado.

Para utilizar o estilo temos que atribuir a um elemento de HMTL a classe gerada anteriormente. Para isso, utilizamos o atributo class de HTML. Tal como foi definida a classe pode-se utilizar em qualquer elemento da página web, como uma tabela ou uma célula.

<table class="pontilhado" width=80% align="center">
<tr>
<td>
<b>Isto é um texto</b>
<br>
Coloco para ver como fica. Com certeza, vou gostar! E vocês também!
</td>
</tr>
</table>

Neste exemplo, toda a tabela terá um efeito de borda pontilhada. Se colocássemos essa classe unicamente em uma célula, somente essa célula teria a borda pontilhada. É o caso do seguinte exemplo:

<table width=300>
<tr>
<td class= "pontilhado"><b>Título da tabela</b></td>
</tr>
<tr>
<td>

Aqui poderíamos colocar qualquer coisa. Seria como o corpo da tabela que corresponderia com o titular que teria algum estilo legal.

</td>
</tr>
</table>

Não abusar do uso das bordas pontilhadas

As bordas com linhas pontilhadas podem ser muito úteis e vistosas, mas se exageramos em sua utilização pode acontecer do efeito ficar pouco agradável.

A borda pontilhada chama a atenção sobre o elemento que a utiliza, porém provoca uma sensação de instabilidade. Também dá a impressão de que não está terminado ou que não está integrado com o resto do desenho.

Enviado por: brunohcs

Esse artigo foi visualizado 4923 vezes

Compartilhe este artigo
facebook del.icio.us rec6 digg
Recomende este artigo a um amigo


Voltar
>> Comentários
 
Related Posts Plugin for WordPress, Blogger...
Comentar
Buscar Artigos:
.: Jogos Online
Ação
Aventura
Cassino
Classicos
Colorir
Corrida
Educativos
Esporte
Estrategia
Infantil
Luta
Meninas
Nave
Tiro
Outros
Adulto
Top Jogos
.: GTA (Grand Theft Auto)
GTA SA, VC, IV
SA - Carros
IV - Carros
Mods
GTA IV
SA - Mods Cleo
.: Saúde
Calculadora de IMC
Peso Ideal
Artigos de Saúde
Sexualidade
.: Google
Diagnóstico
.: Parceiros
Mural de Recados Grátis
Papel de Parede
Papel de Parede Grátis
Show Moto
Web Visual
.: Nossos Números
Artigos: 912
Categorias: 52
Comentarios: 1863
Usuarios: 25417
Blocos de Nota: 87
Canais: 168

website monitoring service
eXTReMe Tracker
Na Faixa.net - Todos os direitos reservados.
Leia nossos Termos de Uso - Política de Privacidade
Desenvolvido por Web Visual - on buzi
Apartir de:
Crie seu Site - Jogos Online - Papel de Parede Grátis - Show Moto - Mural de Recados Grátis - Dicas Para Blogs