Práctica de CSS

Introducción a la Ingeniería del Software y a los Sistemas de
Información Laboratorio 5: Introducción a CSS
Marzo 2012
Enunciado
Esta práctica consiste en la aplicación de hojas de estilo CSS para dar formato a un
documento HTML. Para ello, vamos a comenzar modificando la tabla y el formulario
desarrollados en la práctica anterior para darle formato utilizando una hoja de estilo. A
continuación, veremos un uso más avanzado de las CSS consistente en diseñar la estructura
de un sitio web.
1.- Dar formato a tabla
En una práctica anterior realizamos una tabla como la que aparece en la figura 1 utilizando
los atributos align, valign, bgcolor y border. Es decir, mezclando elementos de formato en
el código HTML de la tabla. El objetivo de este ejercicio es eliminar esos atributos del
código HTML y crear una hoja de estilo en donde figure toda esa información de formato.
Las propiedades de estilo básicas que tendrá que usar serán border-style, border-collapse
(para conseguir que los bordes de las celdas sean una única línea), vertical-align, text-align
y background-color, aparte de tener que usar los atributos class y/o id en el código HTML.
Observe las ventajas de utilizar una hoja de estilo en caso de que deseemos, por ejemplo,
modificar el color asociado a ABD o el color de fondo de las celdas de cabecera (use nombre
de colores estándar cuando sea posible). Intente hacer que todas las columnas de la tabla
salvo la de las horas tengan el mismo ancho mediante la hoja de estilo CSS.
Figura 1. Tabla con formato
Página 1 de 4
Introducción a la Ingeniería del Software y a los Sistemas de
Información Laboratorio 5: Introducción a CSS
Marzo 2012
2.- Dar formato a un formulario
En la práctica anterior, maquetamos el formulario que aparece en la figura 2 utilizando una
tabla. Esta es una práctica en desuso en la actualidad y no recomendada . En este ejercicio
vamos a eliminar la tabla del formulario y realizaremos la maquetación haciendo uso de
elementos de posicionamiento de las hojas de estilo.
Figura 2. Formulario con maquetación CSS
Algunos consejos que pueden ayudar son los siguientes:
1. Agrupe mediante elementos div todos aquellos elementos susceptibles de tener que
tratarse como un grupo desde el punto de vista del posicionamiento. P.e. los botones radio
del sexo, que pueden agruparse en un div que flote a la derecha.
2. Para poder alinear los cuadros de texto se necesita poder especificar un mismo tamaño
para los elementos label correspondientes. Por lo tanto, tendrá que definirlos como un
bloque (display: block) y darles un ancho fijo (width: XX). Por defecto, un elemento label se
visualiza como inline (en la misma línea que el anterior).
3: Se puede reemplazar el atributo size de los cuadros de texto y los atributos cols y rows
del elemento textarea por las propiedades de estilo width y height.
Página 2 de 4
Introducción a la Ingeniería del Software y a los Sistemas de
Información Laboratorio 5: Introducción a CSS
Marzo 2012
3.- Maquetar un portal web
Cree un archivo llamado portal.html con un contenido similar al de la figura 3 aplicando los
conceptos vistos en los dos primeros ejercicios de esta práctica usando como base el
material suministrado (archivo “portal.html” y carpeta “images”).
Figura 3. Maquetación de Portal Web
Para conseguir que los elementos de la lista se visualicen en una misma línea es necesario
usar la propiedad display con el valor inline. Para evitar que se visualicen los marcadores
habituales de las listas puede usar la propiedad list-style-type con el valor none.
Página 3 de 4
Introducción a la Ingeniería del Software y a los Sistemas de
Información Laboratorio 5: Introducción a CSS
Marzo 2012
4.- Cambiar el aspecto de un portal web
Cree una nueva hoja de estilo CSS para que la apariencia del portal sea la que puede verse
en la figura 4 sin modificar nada del código HTML.
Figura 4. Maquetación alternativa de Portal
Página 4 de 4