Página Anticuada. Visita la nueva versión.

Definiendo los Estilos

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.99" escribiendo en ella esto:

table.99{width:99%}

donde:

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

.99 indica que ese tipo de estilo se llamará 99

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 .99 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, tal y como en esta misma web. 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 comodo, 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.99 {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 acompletar 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...