Caixa simples e elegante com CSS
Em muitas ocasiões, ao construir uma página web, necessita-se encaixar uma informação para remarcar seu conteúdo, destacando-o de outros textos do documento.
CSS é, nesses momentos, a tecnologia mais adequada para definir os estilos de um documento. O que antes havíamos realizado com HTML pode-se realizar com CSS obtendo várias vantagens da construção com Folhas de Estilo em Cascata.
O exercício
Para começar, seria bom observar o objetivo deste exercício, para ter uma idéia exata do que vamos fazer.
O exercício dispõe de três caixas com estilos diferentes, embora tenham códigos muito parecidos. Para variar seu aspecto, simplesmente muda-se a declaração de estilos para cada um.
A construção com estilos realiza-se utilizando etiquetas <DIV> ao invés de tabelas. Por isso o código inclui as etiquetas <DIV> necessárias e algo mais.
Este seria o código da primeira tabela.
<div id=tabela1>
<div id=cabtab1>
Caixa curiosa com HTML
</div>
<div id=corpotab1>
Este é o interior do caixa. Esperamos que lhe pareça elegante… é muito simples.
</div>
</div>
Contém três etiquetas <DIV> uma para englobar a caixa inteira, e atribuir estilos como a borda ou estilos que desejarmos que se apliquem a toda caixa. Também teremos um <DIV> para o cabeçalho da caixa e outro para o corpo.
Os estilos que utilizamos para esta caixa são os seguintes:
#tabela1{
border: 1px solid #1E679A;
width: 280px;
}
#cabtab1{
background-color: #1E679A;
font-weight: bold;
color: #ffffff;
padding: 2 2 2 2px;
}
#corpotab1{
padding: 4 4 4 4px;
background-color: #ffffcc;
}
Cada <DIV> tem atribuido um estilo diferente dependendo de nossas necessidades.
Para a segunda caixa poderemos ver um código HTML quase idêntico. A única coisa que mudamos são os identificadores dos <DIV> , para poder atribuir uns estilos diferentes à caixa.
<div id=tabela2>
<div id=cabtab2>
Caixa curiosa com HTML
</div>
<div id=corpotab2>
Este é o interior da caixa. Esperamos que lhe pareça elegante… é muito simples.
</div>
</div>
O código CSS para definir o aspecto é o seguinte:
#tabela2{
border: 1px solid #165480;
width: 200px;
}
#cabtab2{
background-color: #5fa6d7;
font-weight: bold;
font-size: 8pt;
padding: 2 2 2 2px;
}
#corpotab2{
font-size: 8pt;
padding: 4 4 4 4px;
background-color: #ffffcc;
}
Como pode ser visto, não tem nenhuma dificuldade adicional em relação ao primeiro exemplo, pois só se definem estilos para cada um dos <DIV> .
Na terceira caixa dificultamos um pouquinho o código, embora não signifique nenhuma complicação. Neste caso, como a caixa continha um texto com várias opções de uma lista, incluímos, dentro do corpo da caixa, um <ul> (unordered list) com cada uma das opções das opções a visualizar.
<div id=tabela3>
<div id=cabtab3>
Caixa curiosa com HTML
</div>
<div id=corpotab3>
<ul>
<li>Opção uno</li>
<li>Outra opção com texto em várias linhas</li>
<li>O que for que desejar destacar</li>
<li>Última opção</li>
</ul>
</div>
</div>
Na declaração de estilos também definimos o aspecto da lista, para que se ajuste a nossas necessidades.
#tabela3{
border: 1px solid #80A93E;
width: 200px;
}
#cabtab3{
background-color: #B7F259;
font-weight: bold;
font-size: 8pt;
padding: 2 2 2 2px;
}
#corpotab3{
font-size: 8pt;
padding: 4 4 4 4px;
background-color: #F5ECB9;
}
#corpotab3 ul{
margin: 0 2 0 20px;
padding: 0 0 0 0px;
}
#corpotab3 li{
margin: 0 2 0 2px;
padding: 0 0 0 0px;
}
Para definir o estilo da lista indicamos o identificador do <DIV> onde encontra-se a lista, seguido da etiqueta sobre a qual desejamos declarar os estilos, neste caso “ul” para definir os estilos da lista e “li” para declarar os estilos de cada uma das opções. Neste exemplo, declaramos os estilos necessários para definir uma margem adequada para a lista e para cada uma das suas opções.
Conclusão
Vimos uma maneira simples de fazer caixas com CSS. Talvez este artigo seja básico demais, mas trata-se de mostrar como se pode fazer com CSS algumas coisas que havíamos feito previamente com só HTML.
Como pode ser visto, comparando este exemplo com sua contrapartida em HTML , com CSS se constrói com muito mais coerência e se obtém um código muito mais claro.