Definiendo los Estilos CSS

Vamos a definir los estilos para algunas tablas y celdas. Paso a paso, como siempre:

Estilos para Tablas

Como habéis visto antes, hemos definido que las tablas creadas serán de una anchura del 99% de la ventana del navegador. Esto lo podemos hacer con la hoja de estilos de la siguiente forma.

Definimos en la hoja estilo2.css el tipo de tabla llamado por ejemplo "tabla.ancho99" escribiendo en ella esto:

table.ancho99{width:99%}

donde:

table indica que vamos a crear un tipo de estilo de tabla

.ancho99 indica que esa clase de estilo se llamará ancho99

99% indica la anchura definida

Daos cuenta que la forma de definir los estilos no es igual que el Html. Para definir propiedades en Html se ponía width="99%" mientras que en la hoja de estilos se escribe como width:99%, con dos puntos y sin comillas.

Más tarde tendremos que indicar en la plantilla1.htm que las tablas tienen que seguir el estilo .ancho99 pero lo vemos después.

Estilos para celdas

Ahora vamos a definir el color de fondo de algunas celdas. Para diferenciar unas celdas de otras les pondremos colores diferentes a algunas. Además, cada una tendrá una anchura distinta, de modo que definiremos un estilo para cada una de las celdas. Parece un tostón, pero una vez hecho resulta de lo más cómodo, os lo prometo.

¿Os acordais del juego ese de hundir la flota? Ese de los barquitos, que uno decía h4, "tocadoo", e2 "Hundidoo!!!", je je. Pues vamos a hacer lo mismo con las celdas.

Así, la celda superior de la izquierda será la "a1", la superior del centro la "a2" y la superior de la derecha la "a3". Los estilos de las celdas de la tabla siguiente serán "b1" y "b2" y así con todas ellas.

Vamos a abrir la hoja de estilos estilo2.css si la habéis cerrado, y escribimos en ella esto (podéis copiar y pegar):

table.ancho99 {width:99%;}

td.a1 { ;}
td.a2 { ;}

td.b1 { ;}
td.b2 { ;}
td.b3 { ;}

td.c1 { ;}
td.c2 { ;}
td.c3 { ;}

td.d1{ ;}
td.d2{ ;}
td.d3{ ;}

td.e1{ ;}
td.e2{ ;}
td.e3{ ;}

Aquí vemos definido el estilo de la tabla de antes y las definiciones "vacias" de cada celda de la página. Vamos a completar estas definiciones.

Los espacios que gue he dejado en blanco son solo para separar por tablas, vamos, para aclarar un poco solamente. Cada propiedad va dentro de los corchetes (no son (paréntesis), sino {corchetes}!!). Ahora está en blanco como véis. Os recuerdo también que dentro pueden ir varias propiedades, pero deben separarse unas de otras mediante punto y coma " ; ".

Notad también que en el caso de definir propiedades en CSS (en la hoja de estilos) no se ponen las unidades de medida entre "comillas" tal y como hacíamos en Html, aunque sigue siendo recomendable indicar las unidades (pixeles, puntos, centímetros...) con las letras correspondientes (px, pt, cm...).

Vamos a rellenar esas propiedades en la siguiente página...