|
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">
<!--
.cuadro { background-color: #CCCCCC; border: #666666; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}
-->
</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.
|