css ejercicios
Post on 01-Dec-2015
193 Views
Preview:
TRANSCRIPT
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
top related