Como crear cuadros con Hojas de Estilo

En este articulo crearemos por medio de hojas de estilo cuadros o boxes con un color de fondo y un borde, primero les paso la Hoja de Estilo y luego veremos como realizar modificaciones.

<style type="text/css">  </style>

Este codigo CSS va entre las etiquetas <HEAD> y </HEAD>. Si sabemos algo de ingles mas o menos sabran para que sirve cada propiedad, sino aqui a continuacion lo vemos en detalle...

background-color - Determina el color de fondo.
border - Determina el color del borde.
border-style - Determina el estilo del borde, a continuacion vemos los diferentes tipos...

Solid

Dashed

Dotted

Double

border-top-width - Determina el ancho en pixeles del borde de arriba.
border-right-width - Determina el ancho en pixeles del borde derecho.
border-bottom-width - Determina el ancho en pixeles del borde de abajo.
border-left-width - Determina el ancho en pixeles del borde de la izquierda.

Para aplicarlo a la celda de una tabla el codigo HTML seria asi...

<table width="100" border="0" cellspacing="0" cellpadding="4" align="center"> <tr> <td class="cuadro"> </td> </tr> </table>En negrita esta resaltado el codigo que indica que esa celda utilize la clase "cuadro" que definimos anteriormente, el resultado de esto seria el siguiente...

Como ven la tabla tiene sus borde y su fondo tal cual lo definimos, si queremos podemos modificar las propiedades y asi obtener otras variables de colores del fondo y del borde, es cuestion de animarse.

Autor: El Guru Programador
http://www.elguruprogramador.com.ar/zonas/ver.asp?cod=72

Usuarios que han visto este tema también han visto...

- Redondear esquinas de una tabla
- Crear un menú dinámico con CSS
- Alternando Hojas de Estilo
- Crear menus de navegación en CSS usando listas
- FLOAT en CSS

- Versión imprimible de este documento

- Enviar por e-mail este documento