Este documento presenta los objetivos y ejercicios de una práctica sobre hojas de estilo CSS. Los estudiantes deben completar 7 ejercicios obligatorios y 3 complementarios en los que aplicarán diferentes reglas y propiedades CSS como posicionamiento, fuentes, colores e imágenes de fondo. La práctica debe entregarse subiendo los archivos al campus virtual y en el sitio web personal de cada estudiante.

1. Lenguajes para Internet
E.U.I.T. Informática de Oviedo
Curso 2008/2009
Práctica 3. Hojas de Estilos (CSS)
Objetivos
En esta práctica se va a realizar diferentes ejercicios sobre CSS. Todos los documentos
generados deben contener los iconos de validación del estándar XHTML 1.1 y CSS.
Se comprobará el cumplimiento de los estándares XHTML, CSS y el nivel AAA
(Triple-A) de accesibilidad de forma automática.
Todos los archivos deben colocarse en un directorio “practica3” dentro del directorio
“li” en Petra de cada alumno/a.
Ejercicios Obligatorios (5 puntos)
Cada alumno/a debe seleccionar un tema de su interés y buscar información sobre el
mismo, por ejemplo un grupo musical, una película, etc. Esta información será utilizada
para dotar de contenido a los ejercicios (se pueden utilizar los contenidos utilizados para
la práctica anterior).
Apartado Obligatorio para todas las reglas
Añadir como un comentario a cada regla de TODOS los ejercicios la "especificidad" de
los selectores de las hojas de estilo.
EjOb1.html y EjOb1.css
Tomar uno de los documentos XHTML creado para la práctica anterior y añadiendo si
es necesario los elementos oportunos realizar los siguientes apartados:
• Escribir clases para los siguientes estilos: “fondogris”, “textoverde” y
“textoamarillo”. Aplicar la primera clase (fondogris) y la tercera clase
(textoamarillo) a un párrafo, y aplicar la primera (fondogris) y la segunda clase
(textoverde) al texto de una división.
• Escribir una regla establezca fondo rojo para los elementos que tengan un
atributo “id” cuyo valor sea “menu”
• Escribir una regla que establezca el color del texto en negro sobre fondo rojo
para todos los elementos que tengan un atributo id.
• Escribir una regla que seleccione los elementos “h1” con atributo “title” y los
muestre con texto de color azul, el resto deben ser de color negro.
• Escribir las reglas necesarias para que en una lista de dos niveles, los elementos
“li” del primer nivel se muestren en fondo rojo y los de segundo nivel fondo
verde.
• Escribir reglas para que se muestren de diferente forma los elementos “li” de
listas ordenadas “ol” de los elementos “li” de listas no ordenadas “ul”.
• Escribir una regla que muestre en color rojo los elementos “h1” al pasar el ratón
por encima.
• Escribir una regla que muestre el texto de la primera línea de un párrafo en rojo
y el resto en gris.
1

2. Lenguajes para Internet
E.U.I.T. Informática de Oviedo
Curso 2008/2009
EjOb2.html y EjOb2.css
Tomar uno de los documentos XHTML creado para la práctica anterior y añadiendo si
es necesario los elementos oportunos realizar los siguientes apartados:
• Definir una imagen de fondo de formato pequeño se repita horizontalmente y
verticalmente en toda la página. El resto de elementos de la página deben tener
fondo blanco.
• Definir estilos para que los elementos h1, h2 tengan imágenes de fondo
diferentes entre sí y del fondo, si es necesario que se repitan verticalmente.
EjOb3.html y EjOb3.css
Tomar uno de los documentos XHTML creado para la práctica anterior y añadiendo si
es necesario los elementos oportunos realizar los siguientes apartados:
• Definir una imagen de fondo para el documento que se encuentre situada a 15%
del borde derecho y un 30% del borde superior
• Para la imagen del ejercicio anterior establecer la propiedad correspondiente
para que la imagen sea “fija” respecto al contenedor.
• Escribir todos los estilos del ejercicio anterior utilizando la propiedad resumen
“background”
EjOb4.html y EjOb4.css
Tomar uno de los documentos XHTML creado para la práctica anterior y añadiendo si
es necesario los elementos oportunos realizar los siguientes apartados:
• Definir la fuente como Georgia para un párrafo, con la fuente genérica
correspondiente.
• Escribir un estilo que defina un tipo de letra de espaciado fijo (monoespaciado)
para elementos <code> que mantenga los espacios en blanco, y un tamaño más
grande que su elemento padre.
• Definir un estilo para <h1> que sea Arial, de 24 pixeles y para <h2> de tipo serif
con un tamaño de 2em par <h1> y 1.8 para <h2>
• Definir el tamaño de <h3> con porcentajes y un tipo de letra de la familia sans-
serif. El tamaño fijado para <h3> debe ser equivalente a 1.5 em.
• Escribir una clase que permita obtener un texto de tamaño más grande que su
elemento padre.
• Establecer que los título <h4> sean en mayúsculas “pequeñas”
EjOb5.html y EjOb5.css
Utilizar la plantilla que se proporciona “EjOb5.html” y realizar la definición de las
reglas y elementos necesarios para realizar un posicionamiento FLOTANTE de los
elementos.
EjOb6.html y EjOb6.css
Utilizar la plantilla que se proporciona “EjOb6.html” y realizar la definición de las
reglas y elementos necesarios para realizar un posicionamiento RELATIVO de los
elementos.
2

3. Lenguajes para Internet
E.U.I.T. Informática de Oviedo
Curso 2008/2009
EjOb7.html y EjOb7.css
Utilizar la plantilla que se proporciona “EjOb7.html” y realizar la definición de las
reglas y elementos necesarios para realizar un posicionamiento ABSOLUTO de los
elementos.
Ejercicios Complementarios (hasta 5 puntos)
Ejercicio complementario 1: estilo.css
Crear una hoja de estilo para la web personal del alumno. Debe cumplir el estándar de
CSS.
EjCp2.html y EjCp2.css
Utilizar la plantilla que se proporciona “EjOb7.html” renombrada a “EjCp2” y realizar
la definición de las reglas y elementos necesarios para realizar un posicionamiento
LÍQUIDO de los elementos.
EjCp3.html y EjCp3.css
Crear un documento XHTML 1.1 válido que mediante una estructuración correcta
muestre los resultados de la realización de un estudio de las pautas de accesibilidad web
(WCAG 1.0) que influyen en la presentación de contenidos utilizando los elementos
vistos en la práctica.
Entrega
La entrega se realizará de dos formas OBLIGATORIAMENTE:
• Subiendo los ejercicios al campus virtual en los apartados correspondientes.
• En el sitio web personal de cada alumno según la estructura propuesta, cada
ejercicio debe ser un enlace, dentro del documento “practica3”:
o EjOb1
o EjOb2
o EjOb3
o EjOb4
o EjOb5
o EjOb6
o EjOb7
o EjCp1
o EjCp2
o EjCp3
La fecha de entrega será el día 27 jueves día 27 de noviembre a las 23:59 horas
3