Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Mi primera web

Aprender a hacer una sencilla web paso a paso partiendo de cero.


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





logo

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




9. Tablas (II)

9.2. Estilo

Paso 23

logo miweb

El archivo tablas.css

Vamos a poner el estilo de la página "tablas" de nuestra web. Para ello haremos un nuevo archivo CCS, llamado tablas.css, tal como hemos indicado en el enlace o "link" de la cabecera del archivo tablas.html, que hemos hecho en el paso anterior.

Para ello creamos un archivo de texto en blanco, con el editor HTML-Kik pulsamos en "Archivo / Nuevo.." y en el cuadro que aparece pulsamos en la pestaña "General" y dentro de ella en "Blank Text File".

Se nos abre un archivo en blanco, que después guardaremos como el archivo CSS. De momento empezamos a escribir para poner el estilo del título principal, de los párrafos, y también para los elementos incluidos en los superíndices (etiqueta sup). Escribimos por lo tanto lo siguiente:

/*estilo específico para para página tablas.html*/
/*titulo principal y párrafos */
#principal h2 { margin: 0.5em; color: navy; font-size: 1.5em }
#principal p { margin: 0.5em 5em; text-align: justify; font-size: 0.9em; }
#principal sup { font-size: 0.5em; }

Las dos primeras líneas son comentarios. La primera indica una descripción de la página. La segunda explica lo que ponemos en las siguientes líneas.

En la tercera línea cambiamos el aspecto del título principal de la sección. Le ponemos un margen equivalente a media letra (margin), cambiamos el color del texto (color), y aumentamos el tamaño de letra (font-size).

La cuarta línea cambia el aspecto de los párrafos. Les ponemos márgenes, alineamos el texto a justificado, y reducimos un poco el tamaño de letra.

La quinta línea modifica los elementos que están en superíndice, en nuestro caso el "2" de "km2". Reducimos su tamaño para que se vea más pequeño que el resto de letras.

Antes de guardar el archivo seguiremos escribiendo dos líneas más. Aquí pondremos el estilo del título de la tabla (etiqueta h3). Escribimos debajo de lo que ya tenemos lo siguiente:

/*título de la lista*/
#principal h3 { color: navy; margin: 0.5em; font-size: 1.3em; }

La primera línea es un comentario, que indica lo que haremos en la siguiente. En la segunda línea cambiamos el color del título, le ponemos un margen, y ampliamos el tamaño de letra.

Ahora guardamos el archivo. Al guardarlo le ponemos como nombre tablas.css. Debemos guardarlo en la carpeta raíz de nuestra web, al mismo nivel que el archivo tablas.html.

Una vez que hemos guardado el nuevo archivo, comprobamos los cambios que hemos hecho. Para ello abrimos el archivo tablas.html con el navegador, el cual debe quedar como en el siguiente enlace:

Con esto tenemos ya el estilo de párrafos y títulos de la sección. Ya sólo nos falta poner el estilo en la tabla y los diferentes elementos que la componen.


Estilo general de la tabla

Cambiaremos aquí el aspecto de la tabla. Empezaremos por cambiar algunos aspectos generales, tanto de la tabla en sí misma como de las celdas que la componen.

Para ello abrimos el archivo tablas.css con el editor de textos, y le añadimos al final del mismo las siguientes líneas:

/*tabla: aspectos generales*/
table { border: 4px double blue; width: 70%; border-collapse: collapse;   }
table th, table td { border: 1px solid blue; padding: 0.5em; }

La primera línea, como de costumbre, es un comentario. Nosotros ponemos siempre un comentario delante del código CSS que cambia una parte de la página. Esto nos ayuda a entender mejor el código, y a localizar los elementos en caso de que queramos cambiarlos o revisarlos.

En la segunda línea ponemos tres propiedades CSS que afectarán a la tabla en sí misma.

En la tercera línea cambiamos el aspecto de las celdas. Fíjate en la forma de seleccionarlas. El selector tiene dos partes separadas por una coma. En la primera seleccionamos las celdas de cabecera (table th), y en la segunda las celdas normales (table td). Las propiedades que ponemos dentro de las llaves afectan tanto a unas como a otras.

El primer cambio que hacemos en las celdas es poner un borde (propiedad border. Aquí el borde es más estrecho 1px, y como tipo de línea hemos puesto solid. Esto da una línea continua normal. Ponemos el mismo color de línea que para el borde de la tabla. La segunda propiedad padding: 0.5em crea un margen interno dentro de las celdas, para que el texto no se vea pegado a los bordes.

Cerramos el archivo tablas.css y lo guardamos. Comprobamos a continuación los cambios que hemos realizado. Para ello abrimos el archivo tablas.html con el navegador, el cual lo veremos como el del siguiente enlace:

Vemos que la tabla ya tiene otro aspecto, pero nos queda por cambiar el estilo del texto del interior de las celdas.


Estilo específico para celdas

Cambiaremos aquí el aspecto del texto de las celdas, de manera que se diferencien claramente las celdas de contenido de las celdas de cabecera.

Abrimos de nuevo el archivo tablas.css con el editor de textos y añadimos al final del mismo las siguientes líneas:

/*estilo de celdas*/
table th { color: purple; }
table td { text-align: left; padding-left: 2em; }

La primera línea, es el comentario de lo que viene en las otras dos. En la segunda cambiamos el color de las celdas de cabecera. En la segunda modificamos las celdas de contenido. Las alineamos a la izquierda, y les ponemos un margen, también a la izquierda, para que no se vea el texto pegado al margen izquierdo.

Con esto ya acabamos la página de tablas. Cerramos y guardamos el archivo tablas.css, y comprobamos el resultado. Para ello abrimos el archivo tablas.html con el navegador, el cual debe quedar como el siguiente:


Código del archivo tablas.css

Por si hubiera alguna duda ponemos aquí el código completo del archivo tablas.css

/*estilo específico para para página tablas.html*/
/*titulo principal y párrafos */
#principal h2 { margin: 0.5em; color: navy; font-size: 1.5em }
#principal p { margin: 0.5em 5em; text-align: justify; font-size: 0.9em; }
#principal sup { font-size: 0.5em; }
/*título de la lista*/
#principal h3 { color: navy; margin: 0.5em; font-size: 1.3em; }
/*tabla: aspectos generales*/
table { border: 4px double blue; width: 70%; border-collapse: collapse;   }
table th, table td { border: 1px solid blue; padding: 0.5em; }
/*estilo de celdas*/
table th { color: purple; }
table td { text-align: left; padding-left: 2em; }



En el siguiente tema aprenderemos otro tipo de escruturas que suelen utilizar las páginas web: los formularios.

Formularios: contenido (I)




Mi primera web

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com