CSS Ejercicios

of 40 /40
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:

Embed Size (px)

Transcript of CSS Ejercicios

  • Ejercicios en CSS

    Capitulo 1. Declarando hojas de estilo en cascada CSS (Donde puede ir nuestro cdigo 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, gurdalo con el nombre de estilos.css y agrega el cdigo siguiente:

  • Y el documento HTML debe de quedar as:

    Nota: los estilos CSS de esta pgina son aadidos 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 lnea).

  • Ejercicio 6: Medios definidos con la etiqueta

    Archivo pantalla.css:

    Archivo impresoras-celulares.css

    Nota: Generar una vista preliminar de una impresin 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: Tipografas y tamaos de letra.

    Ejercicio 13: personalizar enlaces.

  • Ejercicio 14: Tpica personalizacin de enlaces.

    Capitulo 3. Selectores.

    Ejercicio 15: Selector de universal.

  • Ejercicio 16: Selector de etiqueta.

    Ejercicio 17: Mltiples 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 combinacin de

    selectores.

    Ejercicio 21: Exigimos un selector.

  • Ejercicio 22: Selectores de clase.

    Ejercicio 23: Los selectores de clase permiten una precisin 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 diseadores obvian el smbolo * 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 ms de una clase.

  • Ejercicio 28: Selectores de ID.

    Ejercicio 29: No debe confundirse los selectores siguientes:

  • Ejercicio 30: Combinacin de selectores bsicos.

    Ejercicio 31: A partir del cdigo HTML y CSS que se muestra, aadir 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 cdigo HTML proporcionado, aadir las reglas CSS necesarias para que la pgina 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: Tamao real de una caja.

  • Ejercicio 42: Al usar capas con posicionamiento esttico (normal), hay que tener en

    cuenta si un elemento es tipo bloque o de lnea.

  • Ejercicio 43: Posicionamiento relativo (relative).

    Ejercicio 44: Posicionamiento absoluto (absolute).

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

    Aada 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: Diseo a 2 columnas con cabecera y pie de pgina.

  • Ejercicio 58: Diseo a 3 columnas con cabecera y pie de pgina.

  • Ejercicio 59: Men Horizontal.

  • Listo! Si has terminado todos los ejercicios ahora ests preparado, a para realizar un quiz

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

    Para realizar un test (quiz) en HTML dirgete a la siguiente pgina:

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