Download - CSS Ejercicios
![Page 1: CSS Ejercicios](https://reader034.vdocuments.co/reader034/viewer/2022042519/55cf9d44550346d033ace5fb/html5/thumbnails/1.jpg)
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:
![Page 2: CSS Ejercicios](https://reader034.vdocuments.co/reader034/viewer/2022042519/55cf9d44550346d033ace5fb/html5/thumbnails/2.jpg)
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).
![Page 3: CSS Ejercicios](https://reader034.vdocuments.co/reader034/viewer/2022042519/55cf9d44550346d033ace5fb/html5/thumbnails/3.jpg)
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.
![Page 4: CSS Ejercicios](https://reader034.vdocuments.co/reader034/viewer/2022042519/55cf9d44550346d033ace5fb/html5/thumbnails/4.jpg)
Ejercicio 7: Comentarios.
Capitulo 2. Estilos CSS.
Ejercicio 8: background-Color:
![Page 5: CSS Ejercicios](https://reader034.vdocuments.co/reader034/viewer/2022042519/55cf9d44550346d033ace5fb/html5/thumbnails/5.jpg)
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).
![Page 6: CSS Ejercicios](https://reader034.vdocuments.co/reader034/viewer/2022042519/55cf9d44550346d033ace5fb/html5/thumbnails/6.jpg)
Ejercicio 11: Tratamiento de texto.
![Page 7: CSS Ejercicios](https://reader034.vdocuments.co/reader034/viewer/2022042519/55cf9d44550346d033ace5fb/html5/thumbnails/7.jpg)
Ejercicio 12: Tipografías y tamaños de letra.
Ejercicio 13: personalizar enlaces.
![Page 8: CSS Ejercicios](https://reader034.vdocuments.co/reader034/viewer/2022042519/55cf9d44550346d033ace5fb/html5/thumbnails/8.jpg)
Ejercicio 14: Típica personalización de enlaces.
Capitulo 3. Selectores.
Ejercicio 15: Selector de universal.
![Page 9: CSS Ejercicios](https://reader034.vdocuments.co/reader034/viewer/2022042519/55cf9d44550346d033ace5fb/html5/thumbnails/9.jpg)
Ejercicio 16: Selector de etiqueta.
Ejercicio 17: Múltiples selectores de etiqueta con una sola regla.
![Page 10: CSS Ejercicios](https://reader034.vdocuments.co/reader034/viewer/2022042519/55cf9d44550346d033ace5fb/html5/thumbnails/10.jpg)
Ejercicio 18: Selector descendente.
Ejercicio 19: Selector descendente con muchos ancestros.
![Page 11: CSS Ejercicios](https://reader034.vdocuments.co/reader034/viewer/2022042519/55cf9d44550346d033ace5fb/html5/thumbnails/11.jpg)
Ejercicio 20: No debe confundirse el selector descendente con la combinación de
selectores.
Ejercicio 21: Exigimos un selector.
![Page 12: CSS Ejercicios](https://reader034.vdocuments.co/reader034/viewer/2022042519/55cf9d44550346d033ace5fb/html5/thumbnails/12.jpg)
Ejercicio 22: Selectores de clase.
Ejercicio 23: Los selectores de clase permiten una precisión total al seleccionar los
elementos.
![Page 13: CSS Ejercicios](https://reader034.vdocuments.co/reader034/viewer/2022042519/55cf9d44550346d033ace5fb/html5/thumbnails/13.jpg)
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:
![Page 14: CSS Ejercicios](https://reader034.vdocuments.co/reader034/viewer/2022042519/55cf9d44550346d033ace5fb/html5/thumbnails/14.jpg)
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.
![Page 15: CSS Ejercicios](https://reader034.vdocuments.co/reader034/viewer/2022042519/55cf9d44550346d033ace5fb/html5/thumbnails/15.jpg)
Ejercicio 28: Selectores de ID.
Ejercicio 29: No debe confundirse los selectores siguientes:
![Page 16: CSS Ejercicios](https://reader034.vdocuments.co/reader034/viewer/2022042519/55cf9d44550346d033ace5fb/html5/thumbnails/16.jpg)
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:
![Page 17: CSS Ejercicios](https://reader034.vdocuments.co/reader034/viewer/2022042519/55cf9d44550346d033ace5fb/html5/thumbnails/17.jpg)
Ejercicio 33: Colisiones de estilos;
![Page 18: CSS Ejercicios](https://reader034.vdocuments.co/reader034/viewer/2022042519/55cf9d44550346d033ace5fb/html5/thumbnails/18.jpg)
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:
![Page 19: CSS Ejercicios](https://reader034.vdocuments.co/reader034/viewer/2022042519/55cf9d44550346d033ace5fb/html5/thumbnails/19.jpg)
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).
![Page 20: CSS Ejercicios](https://reader034.vdocuments.co/reader034/viewer/2022042519/55cf9d44550346d033ace5fb/html5/thumbnails/20.jpg)
Ejercicio 37: Margen (margin).
Ejercicio 38: Margen arriba, izquierdo, abajo y derecho.
![Page 21: CSS Ejercicios](https://reader034.vdocuments.co/reader034/viewer/2022042519/55cf9d44550346d033ace5fb/html5/thumbnails/21.jpg)
Ejercicio 39: Rellenos (paddings)
Ejercicio 40: Bordes.
![Page 22: CSS Ejercicios](https://reader034.vdocuments.co/reader034/viewer/2022042519/55cf9d44550346d033ace5fb/html5/thumbnails/22.jpg)
Ejercicio 41: Tamaño real de una caja.
![Page 23: CSS Ejercicios](https://reader034.vdocuments.co/reader034/viewer/2022042519/55cf9d44550346d033ace5fb/html5/thumbnails/23.jpg)
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.
![Page 24: CSS Ejercicios](https://reader034.vdocuments.co/reader034/viewer/2022042519/55cf9d44550346d033ace5fb/html5/thumbnails/24.jpg)
Ejercicio 43: Posicionamiento relativo (relative).
Ejercicio 44: Posicionamiento absoluto (absolute).
![Page 25: CSS Ejercicios](https://reader034.vdocuments.co/reader034/viewer/2022042519/55cf9d44550346d033ace5fb/html5/thumbnails/25.jpg)
Ejercicio 45: Posicionamiento absoluto (absolute) a partir de posicionamiento relativo.
Añada una nueva propiedad al elmento div: position:relavite.
![Page 26: CSS Ejercicios](https://reader034.vdocuments.co/reader034/viewer/2022042519/55cf9d44550346d033ace5fb/html5/thumbnails/26.jpg)
Ejercicio 46: Posicionamiento fijo (fixed).
![Page 27: CSS Ejercicios](https://reader034.vdocuments.co/reader034/viewer/2022042519/55cf9d44550346d033ace5fb/html5/thumbnails/27.jpg)
Ejercicio 47: Posicionamiento flotante (float).
Ejercicio 48: Posicionamiento flotante (float); capas encimadas, float desaparece del
flujo normal.
![Page 28: CSS Ejercicios](https://reader034.vdocuments.co/reader034/viewer/2022042519/55cf9d44550346d033ace5fb/html5/thumbnails/28.jpg)
Ejercicio 49: Posicionamiento flotante (float); todas las capas flotando se reconocen
entre sí.
Ejercicio 50: Posicionamiento flotante (float); capas no caben.
![Page 29: CSS Ejercicios](https://reader034.vdocuments.co/reader034/viewer/2022042519/55cf9d44550346d033ace5fb/html5/thumbnails/29.jpg)
Ejercicio 51: Limpiar (clear).
Ahora agregue una nueva capa con la propiedad clear:both como se muestra en la siguiente
imagen.
![Page 30: CSS Ejercicios](https://reader034.vdocuments.co/reader034/viewer/2022042519/55cf9d44550346d033ace5fb/html5/thumbnails/30.jpg)
Ejercicio 52: Propiedad display.
Ejercicio 53: Propiedad Visibility.
![Page 31: CSS Ejercicios](https://reader034.vdocuments.co/reader034/viewer/2022042519/55cf9d44550346d033ace5fb/html5/thumbnails/31.jpg)
Ejercicio 54: Propiedad overflow.
![Page 32: CSS Ejercicios](https://reader034.vdocuments.co/reader034/viewer/2022042519/55cf9d44550346d033ace5fb/html5/thumbnails/32.jpg)
Ejercicio 55: Propiedad z-index.
![Page 33: CSS Ejercicios](https://reader034.vdocuments.co/reader034/viewer/2022042519/55cf9d44550346d033ace5fb/html5/thumbnails/33.jpg)
![Page 34: CSS Ejercicios](https://reader034.vdocuments.co/reader034/viewer/2022042519/55cf9d44550346d033ace5fb/html5/thumbnails/34.jpg)
Ejercicio 56: Centrar una capa verticalmente.
![Page 35: CSS Ejercicios](https://reader034.vdocuments.co/reader034/viewer/2022042519/55cf9d44550346d033ace5fb/html5/thumbnails/35.jpg)
Ejercicio 57: Diseño a 2 columnas con cabecera y pie de página.
![Page 36: CSS Ejercicios](https://reader034.vdocuments.co/reader034/viewer/2022042519/55cf9d44550346d033ace5fb/html5/thumbnails/36.jpg)
![Page 37: CSS Ejercicios](https://reader034.vdocuments.co/reader034/viewer/2022042519/55cf9d44550346d033ace5fb/html5/thumbnails/37.jpg)
Ejercicio 58: Diseño a 3 columnas con cabecera y pie de página.
![Page 38: CSS Ejercicios](https://reader034.vdocuments.co/reader034/viewer/2022042519/55cf9d44550346d033ace5fb/html5/thumbnails/38.jpg)
![Page 39: CSS Ejercicios](https://reader034.vdocuments.co/reader034/viewer/2022042519/55cf9d44550346d033ace5fb/html5/thumbnails/39.jpg)
Ejercicio 59: Menú Horizontal.
![Page 40: CSS Ejercicios](https://reader034.vdocuments.co/reader034/viewer/2022042519/55cf9d44550346d033ace5fb/html5/thumbnails/40.jpg)
¡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