CSS: Ejercicios introductorios

Ejercicio 1:

a.- Crea una carpeta llamada 'ejercicio1-css' en tu área privada.

b.- Descarga y extrae el contenido que encontrarás aquí en la carpeta creada en el punto anterior.

c.- Abre el archivo poema.html en el explorador.

d.- Abre el archivo poema.html y estilos.css en el bloc de notas.

e.- Estudia, analiza y comprende cada uno de los comportamientos de los elementos definidos en la hoja de estilos.

f.- Utiliza el link que se encuentra en la parte superior para ir a la versión en francés.

Ejercicio 2:

En la versión inglesa, ¿por qué los últimos 5 párrafos se muestran de forma diferente que los 2 primeros?

a.- Edita el fichero poema.html para que los últimos 5 párrafos tengan el mismo aspecto que los 2 primeros (deberás usar la clase "verse").

Ejercicio 3: Experimentando con el fichero CSS

a.- Abre el fichero estilos.css y cambia la linea:

body {background-color: tan} por esta otra: body {background-color: aqua}

b.- Guarda los cambios y visualiza el resultado en ambos idiomas.

c.- Experimenta cambiando otros atributos de color en el fichero CSS. Por ejemplo, cambia los atributos de color para todos los enlaces. (lista de colores: black, gray, silver, white, navy, blue, aqua, teal, marron, red, purple, fuschia, green, lime, yellow, olive).

Ejercicio 4: Experimentando con el fichero CSS

a.- Encuentra la línea /*DIVS */ en el fichero estilos.css e inserta debajo la siguiente linea:

div.reference {color:slategray; margin-left: 40px;}

b.- Inserta una regla apropiada debajo de la linea /* Paragraphs */ para cambiar el color de los párrafos con la clase 'comment'.

c.- Inserta una regla css bajo la linea/* Headers */ para cambiar el color de las cabeceras 'h2'.

Ejercicio 5: Experimentando con el fichero CSS

a.- Modifica la altura de la línea horizontal a 10px.

Ejercicio 6: Experimentando con el fichero CSS

a.- Modifica los estilos para el elemento body para que queden de la siguiente manera:

body {
background-color: tan;
background-image: url('jabber2.gif'); /* comillas obligatoris*/
background-position: center right; /* centrado verticalmente, a la derecha verticamente*/
background-repeat: no-repeat;
background-attachment: fixed /*evita el scroll*/
}

b.- Visualiza los cambios en ambas versiones (inglés y francés).

c.- Utilizando márgenes, asegúrate que los diferentes elementos (hr, por ejemplo) no se superpongan encima de la imagen (la imagen tiene un ancho de 304 pixeles.

Ejercicio 7: Experimentando con el fichero CSS

a.- Edita el selector h1 para que quede de la siguiente manera:

h1 {
color:maroon;
font-size:20pt;
padding: 10px 10px 10px 10px; /* top-right-bottom-left */
background-color: white;
border-style: groove double;
border-color: blue;
border-width: 10px;
}

b.- Añádele la propiedad text-align:center;

c.- Añádele un margen derecho de 500 pixeles.

d.- Añádele como imagen de fondo la imagen llamada "backtitle.gif".


REFERENCIA

CSS

SELECTORES

COLORES

BOX MODEL

FONDOS

POSICIONAMIENTO

VISUALIZACIÓN

TIPOGRAFÍA

TEXTO

ENLACES

IMÁGENES

LISTAS

TABLAS

FORMULARIOS

LAYOUT

Ejercicios

ANEXO