Para ir asimilando toda la información que estoy compartiendo con vosotros en este Curso de CSS3 desde 0, estoy dividiendo el inicio de este curso en dosis mas fáciles de consumir. Pero eso solo va a durar hasta esta clase, ya que vamos a meternos de lleno con la cascada en CSS3, ya veréis que divertido. ¡HEE! pero vamos al grano, que aquí lo que queremos es aprender ha hacer una pagina web profesional
Como has podido leer el titulo del post, ya sabes que vamos a hablar de la herencia en CSS3. La herencia es una característica de CSS que te permite asignar a los hijos, algunas propiedades de los padres. Si aplicas estilos a una etiqueta html, todos los elementos hijos van a heredar ciertas características o estilos, pero no todas.
He encontrado una definición en la web de mosaic que dice lo siguiente: "La herencia en CSS es el mecanismo mediante el cual determinadas propiedades de un elemento padre se transmiten a sus hijos. De hecho, se parece mucho a la herencia genética. Si los progenitores tienen los ojos azules, los hijos seguramente también tendrán los ojos azules."
Un ejemplo claro es que, en nuestra hoja de estilos hemos aplicado a la etiqueta <body> el color rojo. Con lo cual el párrafo que esta dentro de la etiqueta <body> en nuestro documento html, hereda el color rojo. Aunque la herencia de estilos se aplica automáticamente, se puede anular su efecto estableciendo de forma explícita otro valor para la propiedad que se hereda. La W3C tiene una lista de todas las propiedades CSS que se pueden heredar.
/*----CSS----*/
body {
background: red;
}
<!-- HTML -->
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/estilos.css">
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad totam saepe porro, nostrum tenetur quaerat odit id ut assumenda esse quidem sed vel dolore quisquam fuga, culpa non, ducimus impedit.
</p>
<div>
<ul>
<li>Enlemento 1</li>
<li>Enlemento 2</li>
<li>Enlemento 3</li>
</ul>
</div>
</body>
</html>
Vista en el navegador Google Chrome
Finalizando la clase
Estoy totalmente seguro de que habéis entendido la herencia en CSS3 perfectamente. Pero no por esto deja de tener importancia, debemos tenerla muy en cuenta a la hora de realizar nuestros trabajos. Lógicamente podría haberme extendido mucho más con el tema de la herencia en CSS3, pero para nuestro proyecto web solo vamos a necesitar saber esto. De hecho, yo solo necesité esto para desarrollar mi web, para el JavaScript use una librería. Pero de todas maneras me queda mucho para que esté como yo quiero y por eso sigo estudiando desarrollo web.
Hasta aquí hemos llegado por hoy, pero antes de despedirme quiero dar las gracias a todas las personas que visitáis este blog. Me gustaría pedirte un favor, comparte el contenido en tu red social favorita para que otras personas puedan beneficiarse de esta información al igual que lo has hecho tu. O si te apetece, déjame un comentario y cuéntame que te ha parecido la publicación de hoy, también puedes enviarme un correo a través del formulario.
¡HASTA LA SIGUIENTE CLASE!
0 Comentarios