css ejercicios

5/17/2018 CSS Ejercicios - slidepdf.com

http://slidepdf.com/reader/full/css-ejercicios-55b0791ad1f54 1/7

Ejercicios de CSSC.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 textoy 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.



Ejercicios de CSS 2

Ejercicio 02

Formatea las dos páginas anteriores usando un único archivo CSS, llamado "ejercicio_02.css". En éldebes definir los siguientes aspectos del formato:

- Para todo el cuerpo de la página: color de fondo (amarillo pálido), color del texto (negro),alineación del texto (centrado), tamaño del texto (10 puntos) y fuente (verdana)

- Para el encabezado <h1>: fuente (verdana), tamaño (24 puntos), color (naranja), y márgenescon el párrafo anterior y posterior (6 puntos)

- Para las celdas de la tabla: fuente (verdana negrita), tamaño (10 puntos)

- Para el texto de los enlaces (<a>): deben verse en color azul marino en lugar de negro, sinsubrayar y volviéndose de color naranja al situar el ratón encima.

Además de este formato general, aplicaremos los siguientes formatos a zonas específicas del texto:

- En la página principal

o El texto "Comedia" tendrá una fuente "Comic Sans MS" negrita de 14 puntos en color verde.o El texto "Acción" usará una fuente "Impact" de 14 puntos en color marrón.

o El texto "Drama" usará una fuente "Book Antiqua" cursiva de 14 puntos en color azul.

- En la página de la película, las celdas de la izquierda tendrán el fondo gris plata y el texto encolor blanco.

Al final, el aspecto de las dos páginas debe ser el siguiente:



Ejercicios de CSS 3

Ejercicio 03

Crea la página de la película "Wallace & Gromit". Llámala "wallace.html" y enlázala con la páginaprincipal. Utiliza exactamente el mismo formato que en el caso de la página de "El método".

Observa cómo, con CSS, se pueden crear páginas de formato similar de forma mucho más rápidaque sólo con HTML, porque, una vez que se ha definido el formato en el archivo CSS, puedereutilizarse todas las veces que sea necesario.



Ejercicios de CSS 4

Ejercicio 04

Cambia el archivo CSS para que la fuente por defecto de las celdas de las tablas sea "CenturyGothic" normal (no negrita). Fíjate en que basta con cambiar una línea del archivo CSS paramodificar 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 apareceaquí abajo y guarda el archivo con el nombre "ejercicio_05.html"

(En este caso, puedes insertar el código CSS dentro del archivo HTML en lugar de escribirlo en unarchivo a parte, 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.gif - Fuente: Times de 16 puntos, 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 5

Ejercicio 06

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



Ejercicios de CSS 6

Ejercicio 07

Mezcla tus habilidades adquiridas con HTML y CSS para conseguir un diseño complejo como el de lafigura. Hay varias formas de resolverlo, 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>, el atributo "border", el atributo "cellpadding", etc). En su lugar, utiliza reglas y atributos deCSS.

En el número correspondiente de PC-Cuadernos (págs. 41 - 45) tienes un resumen de los atributos yvalores más importantes de CSS. Úsalo para descubrir atributos nuevos que te hagan falta paraconseguir el resultado buscado.

No olvides probar el resultado con varios navegadores, porque puede haber diferencias importantes.



Ejercicios de CSS 7

Ejercicio 08 (de ampliación)

Más difícil todavía. Intenta reutilizar el código anterior para, con pequeñas modificaciones, conseguir esta otra página.

El resultado debería ser lo suficientemente flexible como para que se pudiera cambiar con facilidad laubicación de cada ficha, o bien añadir más fichas al diseño.

Cuando termines, pruébalo con varios navegadores.

css ejercicios

Documents