CSS Ejercicios

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).

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

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 elementos.

una precisión total al seleccionar los

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: po sition: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.