Prueba sobre CSS


Vamos a realizar una web, programando un archivo CSS con el estilo que se detalla a continuación.

  1. Crea tres bloques <div>. Cada bloque va a tener un estilo definido en el archivo CSS, que puede ser configurado con selectores de id. (1 punto)
  2. El primer bloque mostrará un rectángulo de 1000 px de ancho y 30 px de altura. El color de fondo es verde, el texto de tamaño extra grande, en negrita, centrado y color blanco. Se presentará la frase “Historia de Córdoba”. (2 puntos)
  3. En el segundo bloque se incluirá un texto suficientemente largo como para que aparezca un scroll vertical. Puedes descargar en este enlace un archivo de texto para incluir en este <div>: historia.txt. El color del texto será azul, en negrita y el fondo de este bloque se presentará de color amarillo. (2 puntos)
  4. El tercer bloque presentará un rectángulo de 1000 px de ancho y 20 px de altura. El color de fondo es verde, el texto de tamaño grande, en negrita, centrado y color blanco. Se presentará la frase “Web realizada por ……………………”. (2 puntos)
  5. Tanto el primer bloque como el tercero deben permanecer fijos en la página. (1 punto)
  6. Establece un espacio o margen interno entre el primer bloque y el texto, así como entre el tercer bloque y el texto de 30px, con el objetivo de no estar ocultado parte del texto por el encabezado y el pie de la página web. (1 punto)
  7. No olvides referenciar en el archivo HTML la ruta del archivo CSS que marcará el estilo de la web. (1 punto)
  8. Una vez programados los archivos HTML y CSS guarda cada uno de ellos con el formato HTMLnombreapellidos y CSSnombreapellidos y envía estos dos archivos adjuntos a mi correo josempanadero@gmail.com. Recuerda escribir en el asunto “Examen de Nombre Apellidos”.

El resultado debe visualizarse como la imagen de abajo:

pruebacss

Anuncios

Una respuesta a “Prueba sobre CSS

  1. Pingback: Prueba sobre CSS | Tecnologia, Robotica y algo ...

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s