Ejemplos de CSS y ejercicios resueltos

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 están con sus respectivas propiedades z-index declaradas. 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.

<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>

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:

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!

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

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 siguiente ejemplo consiste en realizar un círculo con radio de 250 píxeles, 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 píxeles, 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 tratarán de aplicar estilos a listas, tablas y muchos otros elementos HTML que hemos conocido.

[popup_anything id=»4273″]