Download CSS – Relación de Ejercicios

CSS – Relación de Ejercicios
EJERCICIO PRÁCTICO 1
A) Confecciona un documento HTML que tenga los siguientes elementos:
• Un título formateado con la etiqueta <h1>.
• Dos párrafos formateados con la etiqueta <p>, precedidos de un título formateado con la
etiqueta <h2>.
• Dos imágenes de coches, dos imágenes de motos y dos imágenes de ciudades nevadas.
B) Aplícale los siguientes estilos mediante una hoja externa:
• El fondo de la página será de color azul.
• La etiqueta <h1> irá centrada y con color de fuente blanco.
• Las etiquetas <h2> irán alineadas a la izquierda y con color de fuente blanco.
• El primer párrafo tendrá un color de fondo amarillo y fuente en color negro.
• El segundo párrafo tendrá un color de fondo blanco y fuente en color azul.
• Las imágenes de coches irán alineadas a la izquierda del documento (propiedad float) y con
separación de margen de 4 píxeles (propiedad margin).
• Las imágenes de vehículos tendrán un borde sólido rojo.
• Las imágenes de ciudades nevadas tendrán un tamaño de 640x480 píxeles.
EJERCICIO PRÁCTICO 2
1. Crea un archivo en html llamado ejerc2.html, que contenga los siguientes elementos:
• Un título escrito mediante la etiqueta h1.
• Tres párrafos
• Justo encima de cada párrafo habrá un subtítulo escrito con la etiqueta h2.
• Una tabla de dos filas y dos columnas.
• En cada casilla de la tabla habrá una imagen, teniendo en cuenta que todas las imágenes tienen que tener el mismo tamaño, por ejemplo 240x320.
2. Crea una hoja de estilos llamada estilos2.css para aplicársela al archivo anterior. La forma de trabajar será añadiendo cada uno de los siguientes estilos y comprobando a continuación que funciona correctamente. No debes pasar al siguiente estilo hasta que se produzca tal situación.
a) El fondo será de color azul, la fuente de color blanco y justificada.
b) El título estará centrado.
c) El primer subtítulo tendrá color rojo, el segundo anaranjado y el tercero amarillo.
d) El primer párrafo tiene sangría de primera línea de medida 3em.
e) El segundo párrafo tiene efecto tachado y el tercero es intermitente.
EJERCICIO PRÁCTICO 3
1. Realiza una copia del archivo html del ejercicio anterior y llámalo ejerc3.html. Añade a
continuación los siguientes elementos:
•
•
•
Crea un subtítulo llamado Enlaces con la etiqueta h2.
Incluye a continuación enlaces con texto a 8 páginas webs cualquiera.
Después, crea una tabla de una fila y cuatro columnas, incluyendo en cada celda el logo de
una página web de forma que al hacer clic en él con el ratón se visite dicha página en el
navegador.
2. Crea una hoja de estilos llamada estilos3.css para aplicársela al archivo anterior. La forma de
trabajar será añadiendo cada uno de los siguientes estilos y comprobando a continuación que
funciona correctamente. No debes pasar al siguiente estilo hasta que se produzca tal situación.
•
•
•
•
•
Añade un sombreado gris a todos los subtítulos.
En la primera tabla, pon un marco punteado a las imágenes de la primera fila y de línea
continua a las imágenes de la segunda fila.
Realiza las siguientes acciones a los enlaces de texto:
◦ Efecto lupa al situar sobre ellos el puntero del ratón.
◦ Una vez visitado un enlace, dejará de verse (simularemos que desaparece)
Letra Capital de color negro para cada uno de los tres primeros párrafos.
Borde de tabla de color rojo doble y de línea discontinua para las imágenes.
EJERCICIO PRÁCTICO 4
Crea la hoja de estilos estilos4.css con efectos de tu libre elección y aplícaselos a ejerc3.html.
EJERCICIO PRÁCTICO 5
Realiza una copia del archivo ejerc3.html y llámalo ejerc5.html. Crea la hoja de estilos estilos5.css
con los siguientes efectos:
•
Realiza sombreados de diferentes colores para cada título y el párrafo que le sigue. Deberás
utilizar las etiquetas <div>.
•
Utiliza las etiquetas <spam> para resaltar en cada párrafo alguna frase de forma que
aparezcan subrayadas, en color rojo, etc.
•
Pon un marco y un sombreado a todos los enlaces de texto.
EJERCICIO PRÁCTICO 6
Realiza una copia del archivo ejerc5.html y llámalo ejerc6.html. Crea la hoja de estilos estilos6.css
con los siguientes efectos:
•
Pon un borde sólido a cada elemento <div> de forma que cada lado tenga un color diferente.
•
Utiliza la propiedad margin para hacer que los elementos <div> tengan una separación
apreciable entre ellos, por ejemplo de 50px.
•
Realiza un relleno (padding) para los contenidos de los elementos <div>, de 30px con
respecto a los bordes superior e inferior y de 15px con respecto a los laterales.
•
Pon un borde punteado rojo a los elementos <spam>.
•
Para la tabla:
◦ Céntrala.
◦ Utiliza un borde de estilo groove.
◦ Realiza una separación de 20px por todos los lados, de cada imagen con respecto a los
bordes de la celda.
EJERCICIO PRÁCTICO 7
Reproduce en un blog de Wordpress la siguiente entrada, utilizando para ello hojas de
estilo locales: