Ejercicios Css Enunciados

EJERCICIOS HOJAS DE ESTILOS: CSS

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

Problema 2: Definición de estilos a nivel de marca HTML. Crear una página 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). style).

Problema 3: Definición de estilos a nivel de página. 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 sólo el color de texto y fondo).

1


Problema 4: Propiedades relacionadas con tipografías. Definir reglas para las marcas HTML h1, h2, h3, h4, h5 y h6. Escribe una frase con cada una de ellas : 

Cambia el tamaño de la fuente de cada marca a 60, 55, 50, 45, 4 0 y 35 píxeles respectivamente.



Cambia las familias a “Arial”, “Courier New”, “Georgia”, “Impact”, “Tahoma” y “Times New Roman”



Aplica los estilos “normal”, “italic”, “oblique”, “normal”, “ital ic” y “oblique”



Cambia el grosor de las fuentes a “bold”, “bolder”, lighter”, “normal”, “bolder” y “bold” respectivamente.

Problema 5: Agrupación de varias marcas HTML con una misma regla de estilo Definir la misma fuente, color y tamaño de fuente para las marcas h2 y p. Escribe una frase con cada una de ellas.

2


Problema 6: Definición de varias reglas para una misma marca HTML. Definir para la marca h6 el mismo tamaño de fuente (24px) que la marca p, color azul para el título y gris claro (color:#aaaaaa) para el párrafo. Agrupar las dos marcas para la definición 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 l as marcas: 

h1  Tamaño 30px, color azul, subrayado, alineación izquierda.



h2  Tamaño 30px, color verdel, tachado, alineación derecha.



h3  Tamaño 30px, color rojo, línea superior, ali neación centrada.



h4  Tamaño 30px, color gris, sin decoración, alineación justificada (utiliza un texto largo).

3


Problema 8: Más propiedades relacionadas al texto. Define las siguientes clases y aplícaselas a párrafos con el mismo texto: 

uno  espaciado entre letras 2px, sangría 30px, todo a mayúsculas



dos espaciado entre palabras 10px, sangría -5px, todo a minúsculas



tres  espaciado entre letras y palabras a 3px, sin sangría y mayúsculas la primera letra de cada palabra.

Problema 9: Herencia de propiedades de estilo. Confecciona una página 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 títulos, y por último escribe un párrafo.

Problema 10: Definición de un estilo en función del contexto. Conseguir que el texto encerrado por la marca b dentro de un párrafo 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


Problema 11: Definición de hojas de estilo en un archivo externo. Confeccionar una página 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: Definición de estilos por medio de clases. 1) Definir en una hoja de estilo con nombre “estilos12a.css” estas dos clases: .subrayado { color:#00aa00;

text-decoration :underline; }

.tachado

text-decoration :line-through; }

{ color:#00aa00;

Luego, en la página HTML, definir un título h1 y subrayar todo el título. Añadir un párrafo 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:ver dana; 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 continuación una página HTML que contenga 3 preguntas y 3 respuestas. Disponer cada pregunta y respuesta en un párrafo distinto. Asignar los estilos “.pregunta” y “.respuesta”.

5


Problema 13: Definición 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 página HTML que los utilice.

Problema 15: Más propiedades relacionadas al borde de una marca HTML Inicializar la marca h1 para que al utilizarla en una página html tenga el aspecto de la siguiente figura:

6


Problema 16: Propiedades relacionadas al padding de una marca HTML. Mostrar con la marca pre de HTML un pequeño programa en Javascript (copiar el de la figura). Hacer que el mismo aparezca en un rectángulo amarillo, con borde negro de 1px y una separación 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


Problema 19: Propiedades relacionadas al fondo (background) Diseñar tres hojas de estilo en las que en la primera se repita una pequeña imagen de fondo sólo horizontalmente, en la segunda sólo verticalmente, y en la tercera se mantenga fija al desplazar la página (para probar esta última deberás rellenar la página con muchas copias de un mismo párrafo, p.ej.)

Problema 20: Propiedades relacionadas a fuentes (FORMATO RESUMIDO) Definir la propiedad font para la marca p utilizando el formato reducido de inicialización: negrita, cursiva, de 2 5 pixels de alto y tipografía “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


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 párrafo 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 página 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 página.

9


Problema 25: El selector universal * Definir las propiedades de color, tipografía, margen externo e interno para el selector universal e implementar una página HTML que pruebe su funcionamiento.

Problema 26: Pseudoclases Mostrar en una página una serie de enlaces con distintos colores según si el link está visitado, no visitado, el ratón está sobre el link o el link tiene el foco.

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

10


Problema 28: Creación de un menú vertical configurando las pseudoclases. Hacer un menú de hipervínculos que se muestren de forma vertical con una anchura de 160px, coloreando el fondo y el texto en función de si el ratón está situado encima de alguna opción o no.

Problema 29: Creación de un menú horizontal con una lista. Hacer un menú de hipervínculos que se muestren de forma horizontal empleando una lista ul con una anchura de 100px, coloreando el fondo y el texto en función de si el ratón está situado encima de alguna opción o no.

Problema 30: Propiedades relacionadas a la dimensión de un objeto en la página. Crear una página HTML con dos párrafos. Uno de ellos de tamaño 250x60 pixels y el otro con una anchura del 50% de la página y justificado. Colorear el fondo para apreciar mejor el efecto.

11


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

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

12


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 ratón por encima de cada párrafo para ver el efecto.

Problema 34: Aplicación 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 página, encolumna correctamente las etiquetas de los campos y rediseña el botón 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


Problema 36: Posicionamiento relativo. Definir 3 elementos de tipo div, luego mediante la propiedad position desplazar el segundo div 15 píxeles 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 página 50 px horizontal y 30 vertical de forma absoluta. Colorear las cajas para apreciar mejor el efecto.

14


Problema 38: Disposición de 2 columnas. Crear una página 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 página HTML con la imagen y un párrafo de texto con los que apreciar los efectos.

Problema 40: Disposición de 2 columnas (propiedad float) Crear una página con dos columnas. La primera hacer que “flote” a la izquierda con 200 píxeles de ancho.

15


Problema 41: Disposición de 2 columnas, cabecera y pie. Crear una página que tenga una cabecera, 2 columnas y finalmente un pie de página utilizando cajas div flotantes.

Problema 42: Disposición de 3 columnas, cabecera y pie. Crear una página con tres columnas, cabecera y pie de página utilizando cajas div flotantes.

16

Ejercicios Css Enunciados

Recommend Documents