Bordas pontilhadas com 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 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 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.