Crear recuadros con CSS

Al maquetar una página web es necesario, en algunas oportunidades, destacar una informacón para que sobresalga dentro del contenido del documento. Es entonces cuando debemos acudir a las tablas. CSS es, en estos momentos, la tecnología más adecuada para definir los estilos de un documento. Lo que se hace con HTML se puede realizar con CSS, obteniendo varias ventajas de la maquetación con Hojas de Estilo en Cascada. Vamos a realizar un ejercicio en el que crearemos recuadros, utilizando tablas, pero apelando a CSS para aplicarles estilos, y así lograr unos recuadros más vistosos. El ejercicio dispone de dos recuadros con estilos distintos, pero códigos muy similares. Para variar su aspecto, se cambia la declaración de estilos para cada uno. La maquetación con estilos se realiza utilizando etiquetas <DIV> . Primer recuadro El código HTML para esta tabla es el siguiente: <div id=tabla1>    <div id=cabtab1>    Recuadro con CSS    </div>    <div id=cuerpotab1>    En este recuadro utilizamos código HTML con declaración de estilos.    </div> </div> Contiene tres etiquetas <div>: Una para englobar el recuadro completo y asignarle estilos como el borde y demás estilos que queremos que se apliquen. Una para el encabezamiento del recuadro. Una para el cuerpo. Utilizaremos los siguientes estilos para este recuadro: <style type="text/css"> #tabla1{    border: 2px solid #000000;    width: 280px; } #cabtab1{    background-color: #088A85;    font-weight: bold;    color: #ffffff;    padding: 2 2 2 2px; } #cuerpotab1{    padding: 4 4 4 4px;    background-color: #DF7401; } </style> Cada <DIV> tiene asignado un estilo distinto dependiendo de nuestras necesidades. En este caso estamos asignando: Con el primer <DIV>: Grosor del borde del recuadro. Color del borde del recuadro. Ancho del recuadro. Con el segundo <DIV>: Color del fondo del encabezamiento. Negrita para el texto. Color para el texto. Distancia de separación entre el borde y el texto (Padding) del encabezamiento. Con el tercer <DIV>: Distancia de separación entre el borde y el texto (Padding) del cuerpo del recuadro. Color del fondo del cuerpo Éste es el resultado: Segundo recuadro El código HTML de este recuadro es casi idéntico al del primero. Lo único diferente son los identificadores de los <DIV>, con los que asignamos unos estilos distintos al recuadro. <div id=tabla2>    <div id=cabtab2>    Recuadro con CSS    </div>    <div id=cuerpotab2>    CSS es, en estos momentos, la tecnología más adecuada para definir los estilos de un documento.    </div> </div> El código CSS para definir los estilos es el siguiente: <style type="text/css"> #tabla2{    border: 1px solid #fe5a5a;    width: 300px; } #cabtab2{    background-color: #2e9afe;    font-weight: bold;    font-size: 8pt;    padding: 4 4 4 4px; } #cuerpotab2{    font-size: 8pt;    padding: 6 6 6 6px;    background-color: #8abef7; } </style> Las etiquetas <div> están asignando estilos así: La primera etiqueta <div>: Grosor del borde Color del borde La segunda etiqueta <div>: Color del fondo de la cabecera. Negrita para las letras. Tamaño de las letras. Distancia de separación entre el borde y el texto (Padding) del encabezamiento. La tercer etiqueta <div>: Tamaño de las letras. Distancia de separación entre el borde y el texto (Padding) del cuerpo. Color del fondo del cuerpo. Éste es el resultado:

Twittear

Índice Hojas de Estilo en Cascada CSS
Generalidades
Ejemplos de códigos CSS
Crear menú dinámico con CSS
Tabla con borde punteado
Campos de texto estilos avanzados
Enlace con aspecto de botón
Crear recuadros con CSS

◄Anterior | Siguiente►