C贸mo hacer un recuadro atractivo pero muy f谩cil de hacer, utilizando CSS para aplicarle los estilos.
En
muchas ocasiones, al maquetar una p谩gina web, se necesita recuadrar una
informaci贸n para remarcar su contenido, destac谩ndolo de otros textos
del documento.
Es b谩sicamente lo que vamos a hacer en el
ejercicio de esta ocasi贸n. Se trata de un ejemplo muy sencillo, pero
que sirve como continuaci贸n de otro art铆culo que hemos publicado en el
taller de HTML. (ENLACE A http://www.desarrolloweb.com/articulos/2025.php) En dicho taller realiz谩bamos los recuadros utilizando 煤nicamente HTML, sin declaraci贸n de estilos, lo que no es muy adecuado debido a las tendencias actuales.
CSS
es, en estos momentos, la tecnolog铆a m谩s adecuada para definir los
estilos de un documento. Lo que antes hab铆amos realizado con HTML se puede realizar con CSS obteniendo varias ventajas de la maquetaci贸n con Hojas de Estilo en Cascada.
Nota: Las ventajas y fundamentos de las Hojas de Estilo en Cascada (CSS) se pueden ver en el art铆culo Maquetar una web con CSS.
El ejercicio
Para empezar, ser铆a bueno observar el objetivo de este ejercicio, para tener una idea exacta de lo que vamos a hacer.
El
ejercicio dispone de tres recuadros con estilos distintos, aunque a
pesar de ello tienen c贸digos muy similares. Para variar su aspecto,
simplemente se cambia la declaraci贸n de estilos para cada uno.
La maquetaci贸n con estilos se realiza utilizando etiquetas <;DIV>; en lugar de tablas. Por eso el c贸digo incluye las etiquetas <;DIV>; necesarias y poco m谩s.
Este ser铆a el c贸digo de la primera tabla.
<;div id=tabla1>;
<;div id=cabtab1>;
Recuadro curioso con HTML
<;/div>;
<;div id=cuerpotab1>;
Este es el interior del recuadro. Esperamos que os resulte elegante... es muy sencillo.
<;/div>;
<;/div>;
Contiene tres
etiquetas <;DIV>; una para englobar el recuadro entero, y
asignarle estilos como el borde o estilos que deseemos que se apliquen
a todo el recuadro. Tambi茅n tendremos un <;DIV>; para el
encabezamiento del recuadro y otro para el cuerpo.
Los estilos que utilizamos para este recuadro son los siguientes.
#tabla1{
border: 1px solid #1E679A;
width: 280px;
}
#cabtab1{
background-color: #1E679A;
font-weight: bold;
color: #ffffff;
padding: 2 2 2 2px;
}
#cuerpotab1{
padding: 4 4 4 4px;
background-color: #ffffcc;
} Cada <;DIV>; tiene asignado un estilo distinto dependiendo de nuestras necesidades.
Para el segundo recuadro podremos ver un c贸digo HTML
casi id茅ntico. Lo 煤nico que cambiamos son los identificadores de los
<;DIV>; , para poder asignar unos estilos distintos al recuadro.
<;div id=tabla2>;
<;div id=cabtab2>;
Recuadro curioso con HTML
<;/div>;
<;div id=cuerpotab2>;
Este es el interior del recuadro. Esperamos que os resulte elegante... es muy sencillo.
<;/div>;
<;/div>;
El c贸digo CSS para definir el aspecto es el siguiente.
#tabla2{
border: 1px solid #165480;
width: 200px;
}
#cabtab2{
background-color: #5fa6d7;
font-weight: bold;
font-size: 8pt;
padding: 2 2 2 2px;
}
#cuerpotab2{
font-size: 8pt;
padding: 4 4 4 4px;
background-color: #ffffcc;
}
Como
se puede ver, no tiene ninguna dificultad adicional con respecto al
primer ejemplo, pues s贸lo se definen estilos para cada uno de los
<;DIV>; .
En el tercer recuadro hemos complicado un
poquito el c贸digo, aunque nada reviste ninguna complicaci贸n. En este
caso, como el recuadro conten铆a un texto con varias opciones de una
lista, hemos incluido, dentro del cuerpo del recuadro, un <;ul>;
(unordered list) con cada una de las opciones a visualizar.
<;div id=tabla3>;
<;div id=cabtab3>;
Recuadro curioso con HTML
<;/div>;
<;div id=cuerpotab3>;
<;ul>;
<;li>;Opci贸n uno<;/li>;
<;li>;Otra opci贸n con texto en varias l铆neas<;/li>;
<;li>;Lo que sea que desees destacar<;/li>;
<;li>;脷ltima opci贸n<;/li>;
<;/ul>;
<;/div>;
<;/div>;
En la declaraci贸n de estilos tambi茅n hemos definido el aspecto de la lista, para que se ajuste a nuestras necesidades.
#tabla3{
border: 1px solid #80A93E;
width: 200px;
}
#cabtab3{
background-color: #B7F259;
font-weight: bold;
font-size: 8pt;
padding: 2 2 2 2px;
}
#cuerpotab3{
font-size: 8pt;
padding: 4 4 4 4px;
background-color: #F5ECB9;
}
#cuerpotab3 ul{
margin: 0 2 0 20px;
padding: 0 0 0 0px;
}
#cuerpotab3 li{
margin: 0 2 0 2px;
padding: 0 0 0 0px;
}
Para
definir el estilo de la lista indicamos el identificador del
<;DIV>; donde se encuentra la lista, seguido de la etiqueta sobre
la que deseamos declarar los estilos, en este caso "ul" para definir
los estilos de la lista y "li" para declarar los estilos de cada una de
las opciones. En este ejemplo hemos declarado los estilos necesarios
para definir un margen adecuado para la lista y para cada una de sus
opciones.
Conclusi贸n
Hemos visto una manera sencilla de hacer cajas con CSS. Tal vez este art铆culo es demasiado b谩sico, pero se trataba de mostrar c贸mo se pueden hacer con CSS algunas cosas que hab铆amos hecho previamente con s贸lo HTML.
Como se puede ver, comparando este ejemplo con su contrapartida en HTML , Con CSS se maqueta con mucha m谩s coherencia y se obtiene un c贸digo mucho m谩s claro.
|
