Ejercicios de CSS

C.F.G.S. Administración de Sistemas Informáticos I.E.S. Celia Viñas. Curso 2005/2006

Ejercicio 01 Crea la página ejercicio_01.html imitando la que aparece más abajo. Utiliza en encabezado <h1> para el título y una tabla para el resto. No añadas ninguna etiqueta de formato.

Crea, del mismo modo, una página para la película "El método" y llámala "el_metodo.html". El texto y las imágenes están disponibles con el material que se te ha facilitado para hacer los ejercicios. El título se hace con un encabezado <h1> y el resto con una tabla. Enlaza las dos páginas como aparece en las figuras.

El texto "Acción" usará una fuente "Impact" de 14 puntos en color marrón. el aspecto de las dos páginas debe ser el siguiente: . El texto "Drama" usará una fuente "Book Antiqua" cursiva de 14 puntos en color azul.css". Al final. color del texto (negro). y márgenes con el párrafo anterior y posterior (6 puntos) Para las celdas de la tabla: fuente (verdana negrita).Ejercicios de CSS 2 Ejercicio 02 Formatea las dos páginas anteriores usando un único archivo CSS. llamado "ejercicio_02. las celdas de la izquierda tendrán el fondo gris plata y el texto en color blanco. tamaño (10 puntos) Para el texto de los enlaces (<a>): deben verse en color azul marino en lugar de negro. En la página principal o o o El texto "Comedia" tendrá una fuente "Comic Sans MS" negrita de 14 puntos en color verde. tamaño (24 puntos). sin subrayar y volviéndose de color naranja al situar el ratón encima. color (naranja). tamaño del texto (10 puntos) y fuente (verdana) Para el encabezado <h1>: fuente (verdana). aplicaremos los siguientes formatos a zonas específicas del texto: - - En la página de la película. alineación del texto (centrado). Además de este formato general. En él debes definir los siguientes aspectos del formato: Para todo el cuerpo de la página: color de fondo (amarillo pálido).

html" y enlázala con la página principal. puede reutilizarse todas las veces que sea necesario. una vez que se ha definido el formato en el archivo CSS. Llámala "wallace.Ejercicios de CSS 3 Ejercicio 03 Crea la página de la película "Wallace & Gromit". con CSS. porque. Observa cómo. Utiliza exactamente el mismo formato que en el caso de la página de "El método". se pueden crear páginas de formato similar de forma mucho más rápida que sólo con HTML. .

puedes insertar el código CSS dentro del archivo HTML en lugar de escribirlo en un archivo a parte.gif Fuente: Times de 16 puntos. Fíjate en que basta con cambiar una línea del archivo CSS para modificar de golpe el formato de todas las páginas. Ejercicio 05 Este es un pequeño ejercicio para formatear listas con CSS. Intenta reproducir la página que aparece aquí abajo y guarda el archivo con el nombre "ejercicio_05. negrita Color: Marrón Margen izquierdo de 2 cm - Tipo de viñeta: números romanos en mayúscula Fuente: Arial de 14 puntos Color: Verde .Ejercicios de CSS 4 Ejercicio 04 Cambia el archivo CSS para que la fuente por defecto de las celdas de las tablas sea "Century Gothic" normal (no negrita).html" (En este caso. ya que no lo vamos a reutilizar en otras páginas) - Tipo de viñeta: square Fuente: Arial de 14 puntos Color: azul - Tipo de viñeta: guitarra.

Guárdala con el nombre "ejercicio_06.html" .Ejercicios de CSS 5 Ejercicio 06 Practica con los cuadros/capas de CSS para intentar conseguir una página web como la de la figura.

el atributo "cellpadding". el atributo "border". Hay varias formas de resolverlo. 41 . Úsalo para descubrir atributos nuevos que te hagan falta para conseguir el resultado buscado. En el número correspondiente de PC-Cuadernos (págs. En su lugar. No olvides probar el resultado con varios navegadores.Ejercicios de CSS 6 Ejercicio 07 Mezcla tus habilidades adquiridas con HTML y CSS para conseguir un diseño complejo como el de la figura. utiliza reglas y atributos de CSS. . porque puede haber diferencias importantes. pero puede ser buena idea usar una tabla y luego cambiar ligeramente la posición de las celdas con CSS. Lo único que está prohibido es usar etiquetas y atributos de formato de HTML (como la etiqueta <font>.45) tienes un resumen de los atributos y valores más importantes de CSS. etc).

conseguir esta otra página. Cuando termines.Ejercicios de CSS 7 Ejercicio 08 (de ampliación) Más difícil todavía. con pequeñas modificaciones. . Intenta reutilizar el código anterior para. pruébalo con varios navegadores. El resultado debería ser lo suficientemente flexible como para que se pudiera cambiar con facilidad la ubicación de cada ficha. o bien añadir más fichas al diseño.