EJERCICIOS HOJAS DE ESTILOS: CSS

Problema1:El objetivo de este ejercicio es ver cmo afecta el estilo definido a la marca p Esto es un ejemplo

Problema 2: Definicin de estilos a nivel de marca HTML.Crear una pgina HTML y definir un mensaje con cada una de las marcas h1, h2 y h3. Definir el mismo color para el texto de cada bloque y colores diferentes para el fondo de los mismos (cada marca HTML debe tener definida la propiedad style).

Problema 3: Definicin de estilos a nivel de pgina.Definir un estilo diferente para las marcas h1, h2, h3, h4, h5 y h6. Mostrar mensajes utilizando estas marcas a las que se le han definido estilos (por ahora definir slo el color de texto y fondo).

1

EJERCICIOS HOJAS DE ESTILOS: CSS

Problema 4: Propiedades relacionadas con tipografas.Definir reglas para las marcas HTML h1, h2, h3, h4, h5 y h6. Escribe una frase con cada una de ellas: Cambia el tamao de la fuente de cada marca a 60, 55, 50, 45, 40 y 35 pxeles respectivamente. Cambia las familias a Arial, Courier New, Georgia, Impact, Tahoma y Times New Roman Aplica los estilos normal, italic, oblique, normal, italic y oblique Cambia el grosor de las fuentes a bold, bolder, lighter, normal, bolder y bold respectivamente.

Problema 5: Agrupacin de varias marcas HTML con una misma regla de estiloDefinir la misma fuente, color y tamao de fuente para las marcas h2 y p. Escribe una frase con cada una de ellas.

2

EJERCICIOS HOJAS DE ESTILOS: CSS

Problema 6: Definicin de varias reglas para una misma marca HTML.Definir para la marca h6 el mismo tamao de fuente (24px) que la marca p, color azul para el ttulo y gris claro (color:#aaaaaa) para el prrafo. Agrupar las dos marcas para la definicin de la fuente y posteriormente agregar a cada marca el valor respectivo para el color del texto.

Problema 7: Propiedades relacionadas al texto.Definir estilos relacionados al texto para las marcas: h1 Tamao 30px, color azul, subrayado, alineacin izquierda. h2 Tamao 30px, color verdel, tachado, alineacin derecha. h3 Tamao 30px, color rojo, lnea superior, alineacin centrada. h4 Tamao 30px, color gris, sin decoracin, alineacin justificada (utiliza un texto largo).

3

EJERCICIOS HOJAS DE ESTILOS: CSS

Problema 8: Ms propiedades relacionadas al texto.Define las siguientes clases y aplcaselas a prrafos con el mismo texto: uno espaciado entre letras 2px, sangra 30px, todo a maysculas dos espaciado entre palabras 10px, sangra -5px, todo a minsculas tres espaciado entre letras y palabras a 3px, sin sangra y maysculas la primera letra de cada palabra.

Problema 9: Herencia de propiedades de estilo.Confecciona una pgina que define una regla para la marca body y configura las propiedades color azul y fuente Arial. Luego define reglas de estilo para las marcas h1 y h2 que asignen la fuente con valores: Times New Roman y Courier New respectivamente. Utiliza los dos ttulos, y por ltimo escribe un prrafo.

Problema 10: Definicin de un estilo en funcin del contexto.Conseguir que el texto encerrado por la marca b dentro de un prrafo sea de color azul; pero si la marca b est contenida dentro de una marca h1 el color debe ser rojo. Para cualquier otra marca se mantendr el color que le corresponda.

4

EJERCICIOS HOJAS DE ESTILOS: CSS

Problema 11: Definicin de hojas de estilo en un archivo externo.Confeccionar una pgina HTML que incorpore una hoja de estilo desde un archivo externo de nombre estilos11.css. Definir reglas de estilos para las marcas body, h1 y p.

Problema 12: Definicin de estilos por medio de clases.1) Definir en una hoja de estilo con nombre estilos12a.css estas dos clases:.subrayado { color:#00aa00; .tachado { color:#00aa00; text-decoration:underline; } text-decoration:line-through; }

Luego, en la pgina HTML, definir un ttulo h1 y subrayar todo el ttulo. Aadir un prrafo que tenga algunas palabras subrayadas y otras tachadas (utilizar la marca span para asignar estilos a una palabra).

2) Definir en una hoja de estilo llamada eslilos12b.css estas dos reglas..pregunta { font-family:verdana; font-size:14px; font-style:italic; color:#0000aa; }

.respuesta { font-family:verdana; font-size:12px; font-style:normal; color:#555555; text-align:justify; }

Crea a continuacin una pgina HTML que contenga 3 preguntas y 3 respuestas. Disponer cada pregunta y respuesta en un prrafo distinto. Asignar los estilos .pregunta y .respuesta.

5

EJERCICIOS HOJAS DE ESTILOS: CSS

Problema 13: Definicin de estilos por medio de Id.Definir tres estilos de tipo Id (cabecera, cuerpo y pie), luego definir en el archivo HTML tres reas (div) inicializando el atributo Id con los nombres de estilo creados. Asignar a cada rea un color de fondo diferente, con alturas 20%, 70% y 10% respectivamente.

Problema 14: Propiedades relacionadas al borde de una marca HTML.Inicializar las marcas h1, h2 y h3 con bordes de 2 pixels, color azul, verde y rojo, y diferentes estilos para cada una (solido, punteado y rayado). Crear una pgina HTML que los utilice.

Problema 15: Ms propiedades relacionadas al borde de una marca HTMLInicializar la marca h1 para que al utilizarla en una pgina html tenga el aspecto de la siguiente figura:

6

EJERCICIOS HOJAS DE ESTILOS: CSS

Problema 16: Propiedades relacionadas al padding de una marca HTML.Mostrar con la marca pre de HTML un pequeo programa en Javascript (copiar el de la figura). Hacer que el mismo aparezca en un rectngulo amarillo, con borde negro de 1px y una separacin entre el borde y el contenido de 20 pixeles.

Problema 17: Propiedades relacionadas al margen de una marca HTML.Definir para la marca h1 un margen de 0px, y para la marca p 30px, con colores de fondo diferentes. Escribir un documento html con dos marcas consecutivas h1 y p.

Problema 18: Propiedades relacionadas a listas.Probar todos los valores posibles que puede tomar la propiedad list-style-type creando para cada uno de ellos un estilo con un selector de clase.

7

EJERCICIOS HOJAS DE ESTILOS: CSS

Problema 19: Propiedades relacionadas al fondo (background)Disear tres hojas de estilo en las que en la primera se repita una pequea imagen de fondo slo horizontalmente, en la segunda slo verticalmente, y en la tercera se mantenga fija al desplazar la pgina (para probar esta ltima debers rellenar la pgina con muchas copias de un mismo prrafo, p.ej.)

Problema 20: Propiedades relacionadas a fuentes (FORMATO RESUMIDO)Definir la propiedad font para la marca p utilizando el formato reducido de inicializacin: negrita, cursiva, de 25 pixels de alto y tipografa verdana.

Problema 21:

Propiedades relacionadas con el borde (FORMATO RESUMIDO)

Definir lar propiedades de los bordes en formato resumido para las marcas h1 y p para que se asemejen a los estilos mostrados en la siguiente figura:

8

EJERCICIOS HOJAS DE ESTILOS: CSS

Problema 22: Propiedades relacionadas con padding (FORMATO RESUMIDO)Definir el estilo resumido de margen interno (padding), color de fondo y justificado del texto para la marca p y aplicarla sobre un prrafo extenso para ver el resultado.

Problema 23: Propiedades relacionadas con margin (FORMATO RESUMIDO)Definir para la marca p una clase con un margen superior de 30px, inferior de 20px, izquierdo de 40px y derecho de 100px utilizando el formato resumido. Aplicar un color de fondo para apreciar mejor el efecto.

Problema 24: Propiedades relacionadas al fondo (background) (FORMATO RESUMIDO)Definir un fondo de pgina en formato resumido con color verde, imagen foto.jpg, sin que se repita, sin que se desplace y situada en el borde superior derecho de la pgina.

9

EJERCICIOS HOJAS DE ESTILOS: CSS

Problema 25: El selector universal *Definir las propiedades de color, tipografa, margen externo e interno para el selector universal e implementar una pgina HTML que pruebe su funcionamiento.

Problema 26: PseudoclasesMostrar en una pgina una serie de enlaces con distintos colores segn si el link est visitado, no visitado, el ratn est sobre el link o el link tiene el foco.

Problema 27: Eliminar el subrayado a un enlace por medio de las pseudoclasesEliminar el subrayado de los enlaces.

10

EJERCICIOS HOJAS DE ESTILOS: CSS

Problema 28: Creacin de un men vertical configurando las pseudoclases.Hacer un men de hipervnculos que se muestren de forma vertical con una anchura de 160px, coloreando el fondo y el texto en funcin de si el ratn est situado encima de alguna opcin o no.

Problema 29: Creacin de un men horizontal con una lista.Hacer un men de hipervnculos que se muestren de forma horizontal empleando una lista ul con una anchura de 100px, coloreando el fondo y el texto en funcin de si el ratn est situado encima de alguna opcin o no.

Problema 30: Propiedades relacionadas a la dimensin de un objeto en la pgina.Crear una pgina HTML con dos prrafos. Uno de ellos de tamao 250x60 pixels y el otro con una anchura del 50% de la pgina y justificado. Colorear el fondo para apreciar mejor el efecto.

11

EJERCICIOS HOJAS DE ESTILOS: CSS

Problema 31: Unidades de medida (px, cm, mm, em etc.)Disponer dos prrafos por cada tipo de unidad de medida y asignar valores distintos.

Problema 32: Formas para indicar el color.Disponer tres prrafos pintando su fondo, utilizar distintas formas para inicializar el color de la propiedad background-color.

12

EJERCICIOS HOJAS DE ESTILOS: CSS

Problema 33: Definir un cursor para un control HTML.Disponer los nombres de los valores que puede adoptar la propiedad cursor. Luego define dicho cursor para cada valor de propiedad. Prueba a pasar el ratn por encima de cada prrafo para ver el efecto.

Problema 34: Aplicacin de hojas de estilo a un formulario.Crear un formulario que solicite el ingreso del nombre, mail y comentarios de un visitante. Delimita el espacio del formulario con un borde y fondo diferente al de la pgina, encolumna correctamente las etiquetas de los campos y redisea el botn de enviar.

Problema 35: Definiendo reglas de estilo a una tabla.Crear una tabla donde se deben mostrar las precipitaciones de 3 tres provincias durante los meses de enero, febrero y marzo. Definir estilos apropiados para las marcas table, caption, tbody, thead, th y td.

13

EJERCICIOS HOJAS DE ESTILOS: CSS

Problema 36: Posicionamiento relativo.Definir 3 elementos de tipo div, luego mediante la propiedad position desplazar el segundo div 15 pxeles a la derecha y 5 hacia abajo. Colorear las cajas para apreciar mejor el efecto.

Problema 37: Posicionamiento absoluto.Disponer tres cajas de texto mediante div. Luego posicionar la segunda caja en las coordenadas de la pgina 50 px horizontal y 30 vertical de forma absoluta. Colorear las cajas para apreciar mejor el efecto.

14

EJERCICIOS HOJAS DE ESTILOS: CSS

Problema 38: Disposicin de 2 columnas.Crear una pgina con dos columnas utilizando cajas div, posicionando la primera de forma absoluta a la izquierda con un ancho de 200px, y dando a la segunda un margen izquierdo de 220px.

Problema 39: Propiedad float aplicada a una imagen.Preparar tres hojas de estilo en las que una imagen flote a la izquierda, en la segunda flote la derecha, y en la tercera no se aplique este estilo. Preparar una pgina HTML con la imagen y un prrafo de texto con los que apreciar los efectos.

Problema 40: Disposicin de 2 columnas (propiedad float)Crear una pgina con dos columnas. La primera hacer que flote a la izquierda con 200 pxeles de ancho.

15

EJERCICIOS HOJAS DE ESTILOS: CSS

Problema 41: Disposicin de 2 columnas, cabecera y pie.Crear una pgina que tenga una cabecera, 2 columnas y finalmente un pie de pgina utilizando cajas div flotantes.

Problema 42: Disposicin de 3 columnas, cabecera y pie.Crear una pgina con tres columnas, cabecera y pie de pgina utilizando cajas div flotantes.

16