02 Dic Ejercicio css sobre forzar y romper la propiedad de herencia
El concepto de herencia css es muy útil si se sabe como y cuando usarlo.
La herencia es la propiedad por la cuál algunas etiquetas heredan ciertas propiedades cuando están encapsuladas.
Por ejemplo tiene sentido que un span herede el color negro cuando está dentro de un párrafo de color negro .
O también, tiene sentido que un span no herede el borde cuando está dentro de un div que tiene un borde.
Algunas lecturas de interés para resolver correctamente el ejercicio propuesto en esta lectura son:
Pasemos al ejercicio propuesto.
Enunciado A
El siguiente código html tiene como resultado la imagen adjunta:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="francesc ricart"/>
<title>Enlaces camuflados</title>
<style>
.parrafo-1{color:red;}
.parrafo-2{color:green;}
.parrafo-3{color:blue;}
.parrafo-4{color:orange;}
</style>
</head>
<body>
<p class="parrafo-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, necessitatibus.<a href="">enlace del párrafo 1</a></p>
<p class="parrafo-2">Eius veniam modi id, eaque quas mollitia deserunt optio incidunt.<a href="">enlace del párrafo 2</a></p>
<p class="parrafo-3">Provident distinctio cumque, incidunt beatae voluptas atque, eum. Consequuntur, nihil.<a href="">enlace del párrafo 3</a></p>
<p class="parrafo-4">Deserunt nihil sed earum provident hic incidunt alias mollitia tenetur.<a href="">enlace del párrafo 4</a></p>
</body>
</html>
Se desea que los enlaces hereden el color de los párrafos en los que están respectivamente encapsulados con una única instrucción css.
¿Qué escribirías en la hoja de estilos para que se viera la página como en la imagen propuesta?
Solución del ejercicio A
La siguiente hoja de estilos resuelve el ejercicio:
.parrafo-1{color:red;}
.parrafo-2{color:green;}
.parrafo-3{color:blue;}
.parrafo-4{color:orange;}
a{color:inherit;}El html no es necesario tocarlo para nada.
Enunciado B
El siguiente código html tiene como resultado la imagen adjunta:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="francesc ricart"/>
<title>Párrafos rebeldes</title>
<style>
div{color:blue;}
</style>
</head>
<body>
<div>
<p class="parrafo-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, provident.</p>
<p class="parrafo-2">Ipsa nesciunt numquam alias error quas, recusandae eius natus incidunt.</p>
<p class="parrafo-3">Odit vero quas ducimus facilis suscipit molestiae, sunt ullam! Iste.</p>
<p class="parrafo-4">Sint ipsam, minus veritatis pariatur voluptatem perspiciatis provident dignissimos aliquam?</p>
</div>
</body>
</html>
Se desea que el primer y el tercer párrafos tengan de nuevo el color definido por el navegador web. Es decir, que no hereden.
¿Qué escribirías en la hoja de estilos para que se viera la página como en la imagen propuesta?
Solución del ejercicio B
Será necesario añadir una misma clase para los párrafos primero y tercero.
El código final queda de la siguiente forma:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="francesc ricart"/>
<title>Párrafos rebeldes</title>
<style>
div{color:blue;}
.inicializar{color:initial;}
</style>
</head>
<body>
<div>
<p class="parrafo-1 inicializar">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, provident.</p>
<p class="parrafo-2">Ipsa nesciunt numquam alias error quas, recusandae eius natus incidunt.</p>
<p class="parrafo-3 inicializar">Odit vero quas ducimus facilis suscipit molestiae, sunt ullam! Iste.</p>
<p class="parrafo-4">Sint ipsam, minus veritatis pariatur voluptatem perspiciatis provident dignissimos aliquam?</p>
</div>
</body>
</html>¡Hola!
Querido lector,
Habrás visto que el enunciado es largo pero que la herencia nos permite ahorrar muchas líneas de código y resolver bastante rápido el ejercicio.
¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!
Entradas relacionadas:
La propiedad background se desarrolla en muchísimas variantes que permiten generar efectos muy interesantes. Veámoslas todas.
La letra capital es un recurso medieval que no es de mi devoción pero que me sirve para darte un par de ejemplos prácticos de uso del pseudoselector ::first-letter.
El sprite permite mejorar el tiempo de carga de una web. Creamos un sprite y mostramos un ejemplo de código html y css para usarlo
¿Hay alguna forma amable de leer páginas web dónde todo el contenido se haya compactado? Te presento algunas de mis herramientas favoritas.
Fontawesome, iconmoon, glyphicons,... ¿quieres saber como poner iconos en tu proyecto web y hacerlo bien? Te explico como y algún ejemplo.
Hacemos un repaso rápido a :hover :active y las propiedades box-shadow, border-radius, cursor y background para estilizar botones.
No Comments