Ejemplos de CSS y ejercicios resueltos

Anterior

Ahora que conocemos el lenguaje de estilos CSS, es momento de aplicar todo lo aprendido; para ello veremos ejemplos aplicativos y además varios ejercicios y problemas con sus respectivas soluciones.

Ejemplos de CSS

Cada ejercicio será planteado o explicado según sea el caso al principio, se describirán las características que se desean obtener mediante CSS y si la pregunta lo requiere se tomarán notas y aclaraciones al final de cada ejercicio.

Primero.- Ejercicio resuelto de propiedad z-index

Ya que venimos de haber terminado la lección de la propiedad z-index, resolveremos el ejercicio que nada más lo vimos como gráfico, para quienes se suman recientemente les cuento; se trata de tres bloques <div> con sus respectivos z-index, el bloque 2 contiene tres bloques hijo dentro de ella y también estan con sus respectivas propiedades z-index declarados. veamos el cogido y resultado.

Se busca demostrar que el bloque 2 es un bloque padre independiente y que las propiedades z-index de sus hijos no es influenciada por los bloques 1 y 3, sin embargo el padre 2 si es influenciado, sus hijos no. Veamos el código y resultado.

Código HTML

<div class="bloque1">BLOQUE 1</div>

<div class="bloque2">BLOQUE 2
<div class="hijo1">Hijo 1 de bloque 2</div>
<div class="hijo2">Hijo 2 de bloque 2</div>
<div class="hijo3">hijo 3 de bloque 3</div>

</div>
<div class="bloque3">BLOQUE 3</div>

Código CSS

div {
 
  position: absolute;
border:1px solid #41729c;
}
div.bloque1 {
  background-color: #ebf0f9;
width:353px;
height:113px;
  top: 95px;
  left:56px;
z-index:800;
}
div.bloque2 {
  background-color: #c5e0b4;
width:297px;
height:387px;
  top: 40px;
  left: 81px;
z-index: 40;
}
div.bloque3 {
  background-color: #ffe699;
width:397px;
height:116px;
  top: 374px;
  left: 20px;
z-index: 20;
}

div.bloque2 div.hijo1 {
  background-color: #5b9ad5;
width:266px;
height:98px;
  top: 120px;
  left: 15px;
z-index:90;
}

div.bloque2 div.hijo2 {
  background-color: #d0cece;
width:143px;
height:296px;
  top: 33px;
  left:126px;
z-index:30;
}


div.bloque2 div.hijo3 {
  background-color: #ffb9b9;
width:176px;
height:99px;
  top: 278px;
  left: 105px;
z-index: 10;
}

Resultado:

Te recomendamos leer:  Posicionamiento en CSS

Código ejecutable

A continuación tienes el mismo ejemplo pero con el código HTML y CSS en el mismo documento, por lo tanto puedes ejecutar mediante el icono de reproducción y verás que el resultado es la misma que se muestra en la imagen. observa que el código CSS se incrustó mediante la etiqueta <style>.

<div class="bloque1">BLOQUE 1</div>

<div class="bloque2">BLOQUE 2
<div class="hijo1">Hijo 1 de bloque 2</div>
<div class="hijo2">Hijo 2 de bloque 2</div>
<div class="hijo3">hijo 3 de bloque 3</div>

</div>
<div class="bloque3">BLOQUE 3</div>

<style>
div {
 
  position: absolute;
border:1px solid #41729c;
}
div.bloque1 {
  background-color: #ebf0f9;
width:353px;
height:113px;
  top: 95px;
  left:56px;
z-index:800;
}
div.bloque2 {
  background-color: #c5e0b4;
width:297px;
height:387px;
  top: 40px;
  left: 81px;
z-index: 40;
}
div.bloque3 {
  background-color: #ffe699;
width:397px;
height:116px;
  top: 374px;
  left: 20px;
z-index: 20;
}

div.bloque2 div.hijo1 {
  background-color: #5b9ad5;
width:266px;
height:98px;
  top: 120px;
  left: 15px;
z-index:90;
}

div.bloque2 div.hijo2 {
  background-color: #d0cece;
width:143px;
height:296px;
  top: 33px;
  left:126px;
z-index:30;
}


div.bloque2 div.hijo3 {
  background-color: #ffb9b9;
width:176px;
height:99px;
  top: 278px;
  left: 105px;
z-index: 10;
}

</style>

Segundo.- Ejercicio de modelo de cajas

Crea un bloque con las siguientes características: Ancho de 400px, altura de 150px, color de fondo a tu elección, borde de 4px con puntos, color a tu elección, margen de 50px, relleno de 40px y que contenga una frase al medio que diga:»¡Me encanta CSS!» colócale el mejor tipo de letra, tamaño y además mediante CSS has que sea pura mayúscula. ¡Adelante!

Código HTML

<div><p>¡Me encanta CSS!</p></div>

Código CSS

div {
  width:400px;
  height:150px;
  background-color:#ad6be3;
  border: 4px dotted;
  padding:40px;
  margin:50px;
  display: inline-table;
  text-align:center;
}
div p {
 display: table-cell;
 vertical-align:middle;
 font-family: impact;
 font-size:32px;
 text-transform: uppercase;
 color:#330757;}

Resultado:

Ejercicios propuestos

  • El el siguiente ejemplo consiste en realizar un circulo con radio de 250 pixeles, un borde doble de color naranja y color de fondo color azul.
  • El segundo ejercicio consiste en realizar un color de fondo degradado para un párrafo, además agregarle un margen de 20 pixeles, un relleno de 14px, un borde de radio 20px.
  • El tercer ejercicio se trata de un botón, con color de fondo rojo, el tipo de letra helvética, y pura mayúscula, y cuando el ratón pase por encima de ella, esta debe volverse color verde.
  • Los demás ejercicios se trataran de aplicar estilos a listas, tablas y muchos otros elementos HTML que hemos conocido.
Te recomendamos leer:  Estilos CSS para textos
Lecciones CSS
Anterior
0 0 votar
Calificación
guest
0 Comentarios
Comentarios en línea
Ver todos los comentarios

Aquí tienes el temario completo del curso CSS, para que no te pierdas ninguna lección. :)

Temario CSS

1.- Qué es CSS y Introducción
2.- Cómo usar CSS
3.- Selectores CSS – Reglas y sintaxis
4.- Cascada de estilos y herencia
5.- Estilos CSS para textos
6.- Ancho y alto
7.- Modelo de cajas
8.- Las propiedades: border, padding y margin
9.- La propiedad Background
10.- Estilo para listas
11.- Estilos CSS para tablas
12.- Estilos para enlaces CSS
13.- Personalizando el cursor
14.- Propiedad display y visivility
15.- Posicionamiento en CSS
16.- La propiedad overflow
17.- Propiedad Z-INDEX en CSS
18.- Ejemplos y ejercicios resueltos

 

Aquí tienes el temario completo del curso CSS, para que no te pierdas ninguna lección. :)

Temario CSS

1.- Qué es CSS y Introducción
2.- Cómo usar CSS
3.- Selectores CSS – Reglas y sintaxis
4.- Cascada de estilos y herencia
5.- Estilos CSS para textos
6.- Ancho y alto
7.- Modelo de cajas
8.- Las propiedades: border, padding y margin
9.- La propiedad Background
10.- Estilo para listas
11.- Estilos CSS para tablas
12.- Estilos para enlaces CSS
13.- Personalizando el cursor
14.- Propiedad display y visivility
15.- Posicionamiento en CSS
16.- La propiedad overflow
17.- Propiedad Z-INDEX en CSS
18.- Ejemplos y ejercicios resueltos