Ejercicios en CSS

Capitulo 1. Declarando hojas de estilo en cascada CSS (¿Donde puede ir nuestro código CSS?).

Ejercicio 1: Ejemplo de estilos sin CSS.

Ejercicio 2: Ejemplo de estilos con CSS.

Ejercicio 3: Definir CSS en un archivo externo.

Crea una carpeta con el nombre de ejercicio3 y dentro crea archivo de tipo CSS, guárdalo con el nombre de “estilos.css” y agrega el código siguiente:

Y el documento HTML debe de quedar así:

Nota: los estilos CSS de esta página son añadidos mediante el elemento link.

Ejercicio 4: Ejemplo de estilos CSS en un archivo externo usando @import.

Ejercicio 5: Incluir CSS en los elementos HTML (estilos en línea).

Ejercicio 6: Medios definidos con la etiqueta <link>

Archivo pantalla.css:

Archivo impresoras-celulares.css

Nota: Generar una vista preliminar de una impresión para notar los cambios.

Ejercicio 7: Comentarios.

Capitulo 2. Estilos CSS.

Ejercicio 8: background-Color:

Ejercicio 9: background-image, background-repeat, background-position:

Nota: la imagen se encuentra en la carpeta de ejercicios. Jugar con las propiedades y

probar cada valor como se manifiesta.

Ejercicio 10: background (propiedades cortas).

Ejercicio 11: Tratamiento de texto.

Ejercicio 12: Tipografías y tamaños de letra.

Ejercicio 13: personalizar enlaces.

Ejercicio 14: Típica personalización de enlaces.

Capitulo 3. Selectores.

Ejercicio 15: Selector de universal.

Ejercicio 16: Selector de etiqueta.

Ejercicio 17: Múltiples selectores de etiqueta con una sola regla.

Ejercicio 18: Selector descendente.

Ejercicio 19: Selector descendente con muchos ancestros.

Ejercicio 20: No debe confundirse el selector descendente con la combinación de

selectores.

Ejercicio 21: Exigimos un selector.

Ejercicio 22: Selectores de clase.

Ejercicio 23: Los selectores de clase permiten una precisión total al seleccionar los

elementos.

Ejercicio 24: Restringiendo el alcance del selector de clase.

Nota: de lo anterior se deduce que el atributo .destacado es equivalente a *.destacado, por lo que todos los diseñadores obvian el símbolo * al escribir un selector de clase normal. Ejercicio 25: No debe confundirse los selectores siguientes:

Ejercicio 26: es posible aplicar los estilos de varias clases CSS sobre un mismo

elemento.

Ejercicio 27: Seleccionando elementos con más de una clase.

Ejercicio 28: Selectores de ID.

Ejercicio 29: No debe confundirse los selectores siguientes:

Ejercicio 30: Combinación de selectores básicos.

Ejercicio 31: A partir del código HTML y CSS que se muestra, añadir los selectores CSS que faltan para aplicar los estilos deseados. Cada regla CSS incluye un comentario en el que se explica los elementos a los que debe aplicarse. El ejercicio se encuentra en el archivo: ejercicio-31.html. Ejercicio 32: Herencia; Cuando se establece el valor de alguna propiedad en un elemento, todos sus descendientes heredan inicialmente ese mismo valor, salvo que se indique lo contrario:

Ejercicio 33: Colisiones de estilos;

Ejercicio 34:

Ejercicio 35: A partir del código HTML proporcionado, añadir las reglas CSS necesarias para que la página resultante tenga el mismo aspecto que el de la siguiente imagen:

Nota: En este ejercicio, se deben utilizar los colores: teal, red, blue, orange, purple, olive, fuchsia y green. El ejercicio se encuentra en el archivo: ejercicio-35.html.

Capitulo 4. Modelo de cajas.

Ejercicio 36: Uso de width (ancho) y height (alto).

Ejercicio 37: Margen (margin).

Ejercicio 38: Margen arriba, izquierdo, abajo y derecho.

Ejercicio 39: Rellenos (paddings)

Ejercicio 40: Bordes.

Ejercicio 41: Tamaño real de una caja.

Ejercicio 42: Al usar capas con posicionamiento estático (normal), hay que tener en

cuenta si un elemento es tipo bloque o de línea.

Ejercicio 43: Posicionamiento relativo (relative).

Ejercicio 44: Posicionamiento absoluto (absolute).

Ejercicio 45: Posicionamiento absoluto (absolute) a partir de posicionamiento relativo.

Añada una nueva propiedad al elmento div: position:relavite.

Ejercicio 46: Posicionamiento fijo (fixed).

Ejercicio 47: Posicionamiento flotante (float).

Ejercicio 48: Posicionamiento flotante (float); capas encimadas, float desaparece del

flujo normal.

Ejercicio 49: Posicionamiento flotante (float); todas las capas flotando se reconocen

entre sí.

Ejercicio 50: Posicionamiento flotante (float); capas no caben.

Ejercicio 51: Limpiar (clear).

Ahora agregue una nueva capa con la propiedad clear:both como se muestra en la siguiente

imagen.

Ejercicio 52: Propiedad display.

Ejercicio 53: Propiedad Visibility.

Ejercicio 54: Propiedad overflow.

Ejercicio 55: Propiedad z-index.

Ejercicio 56: Centrar una capa verticalmente.

Ejercicio 57: Diseño a 2 columnas con cabecera y pie de página.

Ejercicio 58: Diseño a 3 columnas con cabecera y pie de página.

Ejercicio 59: Menú Horizontal.

¡Listo! Si has terminado todos los ejercicios ahora estás preparado, a para realizar un “quiz”

(prueba) y corroborar que tanto has aprendido de HTML:

Para realizar un test (quiz) en HTML dirígete a la siguiente página:

http://www.w3schools.com/css/css_quiz.asp