Por Luciano Moreno
As Folhas de Estilos em Cascata (CSS) são sem dúvida uma das ferramentas mais úteis que podemos usar em nossas páginas web. Permite-nos definir o aspecto com o qual se apresentarão todos e cada um dos elementos de uma página web, conseguindo com isso a buscada separação entre dados e apresentação, tão buscada pelos desenvolvedores.
Mediante CSS podemos melhorar notavelmente o aspecto dos nossos botões de formulário, sempre e quando o navegador usado por nosso visitante suporte a aplicaão de estilos a estes elementos, ou seja, todos os navegadores de 5ª e 6ª geração.
| Referência: Está disponível em CriarWeb um manual de folhas de estilo CSS que lhe mostrará como utilizar esta tecnologia para criar páginas mais atrativas e precisas. |
Como exemplo, vamos modificar o aspecto externo do botão da página anterior, colocando um fundo azul, tirando o aspecto 3D e colocando o texto em branco, com fonte Verdana de 10 pixels. Também vamos definir seu tamanho exato. O código necessário será:
|
<style type="text/css"> .botao{ font-size:10px; font-family:Verdana,Helvetica; font-weight:bold; color:white; background:#638cb5; border:0px; width:80px; height:19px; } </style> <div align="center"> <form name="form1" action="http://br.yahoo.com/" target="_blank" method="post"> <input type="text" name="prova"><br><br> <input type="submit" value="enviar" class="boton"> </form> </div> |
Cujo resultado é o seguinte:
Analisando um pouco o código anterior, vemos que definimos uma classe de estilo, .boton, que define os atributos desejados para nosso botão. A classe vem definida estabelecendo, dentro das etiquetas <style...>...</style> o nome da mesma precedido por um ponto, umas chaves e dentro delas os atributos desejados com seus valores.
Desta forma podemos fixar o aspecto concreto de nossos botões, tendo a liberdade para definir quantas classes necessitarmos.
Como vantagens deste método estão a total configuração de aspecto e que continuamos tendo um botão submit padrão (que ao clicarmos a tecla Enter serão enviados os dados do formulário). As desvantagens são que estas características de estilos para botões não são aceitas pelo Netscape 4x e que continuamos tendo a limitação de botões retangulares.
