Herencia en CSS: Cómo Funciona y Afecta a los Estilos
Contenido del curso
Jossie Steeven Quintero Giron
Jose Juan Diaz Alvarez
Stalin Badillo
Iván Arcos
Fabio Gomez
Diego Garcia Hernandez
Andres Gallego
María José Ledesma
Andrés Corral
Héctor Alonso Padilla Ramírez
Daniel Torrealba Febres Cordero
Nicolas Vargas
Ixchel Garcia
Andres Condezo Monge
Emily García
Carlos Eduardo Gomez García
Yair Lira
Juan Diego Bolaños Peña
Jorge Luis Rueda Marin
Cesar Lozano Rodriguez
Saulo Joaquín Ramírez Suruy
Giselly Romero Nuñez
Joel Dominguez Merino
Jimmy Buriticá Londoño
Eduardo Rodriguez
juan osuna
Alberto Medina
Mauricio Moreno Morales
Eleno Dela Rosa Calvillo
Harrinson Quintero
Andres Condezo Monge
Henry Alexander Velásquez Rosas
Henry Alexander Velásquez Rosas
Ernesto Angulo
Guadalupe Monge Barale
María Del Pilar Chávez Gutiérrez
Erick Fernando Guzmán Valerio
Roger Carlos Ariel Alba
Alejandro Picado Brenes
Diana Gonzalez Yescas
CRISTIAN BARBERO PÉREZ
Obed Ulises Orta Aguilar
David Aragón
Alejandro Picado Brenes
Armando Machacca
Jossie Steeven Quintero Giron
Obed Tzay
Alex Camacho
Profesor
John Cardenas
El mas cool de los ejemplos jajaja
jaja, muy buen ejemplo
Herencia y sus valores: Inherit. Este es un valor por medio de una keyword que especifica que, a la propiedad que se la apliquemos debe de heredar los valores de su elemento padre. Podemos decir que la palabra Inherit significa “Usa el valor de mi padre”, si el elemento padre no tiene definido dicho valor el navegador seguirá el DOM hasta que encuentre un elemento superior que lo contenga, y en ultima instancia de no tenerlo ningún elemento superior se aplicara el valor por defecto.
Initial. Este valor pertenece a la especificación CSS3 y cuando aplicamos a una propiedad el valor initial estamos dando el valor inicial y predefinido por el navegador en cuestión.
Upset. Este valor unset es una combinación entre inherit y initial, cuando utilizamos este valor en una propiedad esta tratara de heredar el valor de su elemento padre si este esta disponible, de no ser así este valor colocará el valor de la propiedad en su valor inicial, como si usáramos inherit e initial juntos.
Gracias!
Gracias por la info, me fue muy útil para complementar mis apuntes :D
Mis notas juntando también la de los compañeros :D
¡Gracias por el aporte!
Gracias!!
Algunas propiedades CSS se heredan desde los elementos padres a los elementos hijos, modificando el valor que tienen por defecto:
body { color: green; /* Color de texto verde */ }
Aplicamos a la etiqueta HTML <body> el color de texto verde. En principio, esta propiedad aplicará dicho color a los textos que estén dentro de dicha etiqueta <body>.
Sin embargo, si tenemos más etiquetas dentro, como por ejemplo una etiqueta <div> con texto en su interior, si no tenemos aplicada una propiedad color a dicho elemento, veremos que también aparece en color verde. Esto ocurre porque la propiedad color es una de las propiedades CSS que, en el caso de no tener valor específico, hereda el valor de su elemento padre.
Ojo, porque esto no ocurre si lo hacemos con otras propiedades CSS, como por ejemplo, con los bordes de un elemento HTML:
body { border-width: 2px; border-style: solid; border-color: red; }
Si esta propiedad aplicará herencia, todos los elementos HTML situados en el interior de <body> tendrían un borde rojo, comportamiento que no suele ser el deseado. Por esa razón, la herencia no ocurre con todas las propiedades CSS, sino sólo con algunas propiedades como color o font, donde si suele ser deseable.
Valores especiales Además de los valores habituales de cada propiedad CSS, también podemos aplicar ciertos valores especiales que son comunes a todas las propiedades existentes. Con estos valores modificamos el comportamiento de la herencia en dicha propiedad:
body { border-width: 2px; border-style: solid; border-color: red; } div { border: inherit; }
Si tenemos un elemento <div> dentro del <body>, el primero heredará los estilos del elemento <body>, ya que le hemos especificado el valor inherit en la propiedad border.
Fuente Herencia en CSS
Tremendo. Lo entendí claro.
Gracias por compartirnos esta informacion.
Buenas noches! Unas cositas que pude conseguir y para complementar nuestro conocimiento en esta parte. Además del concepto de especificidad (que nos ayudan bastante el momento de implementar selectores) existe el concepto de cascada que también debemos de tener en mente, el cual es básicamente que cuando existe un conflicto de dos o más estilos en un mismo elemento se toma el que se encuentre de último 😀. En un segundo lugar, tenemos que USUALMENTE (no siempre) los valores heredados son valores computados, que no necesariamente son los valores especificados para un estilo determinado ya que si no se encuentra el mismo entonces el navegador es obligado a implementar los estilos por default como explico Diego. Link para consulta: https://www.w3.org/TR/css-cascade-3/
Atenta a sus observaciones!
Gracias por el aporte.
Muy buen aporte, gracias!
La herencia en CSS es algo muy útil cuando quieres "reciclar" los estilos del padre, pero recuerda que todos lo que cambies en el padre también afectará a los hijos que estén heredando estilos de el
Trataré de hacer ENTENDIBLE la herencia: •inherit: ya sabemos •initial: fuerza a no aplicar la herencia, lo contrario a inherit, es parte de especificidad, un tema que veremos adelante. •Unset: Es como un inherit flojo, ya que inherit inspecciona hasta encontrar un padre con un estilo, unset solo inspecciona el padre próximo, si encuentra estilo lo hereda, si no lo hay se resetea al su valor natural. • Revert: Pone su valor a la capa de estilo por defecto del navegador.
SI cometí un error, diganlo, si lo explique bien denme ese corazón
Bien! Me gustó lo de "inherit flojo" xd
Muy aclaradora la explicación
Algo no me cuadraba en la explicacion del ejemplo del <html> font-size = 75%, y es que que @degranda indica que el font-size de <h1> no heredaba del seteado en <html>, creo yo sin embargo creo que si lo hace pero de una manera muy particular que paso a explicar
primero indicar los valores por default segun mi navegador Chrome (sin el <html> font-size = 75%):
una vez seteado el <html> font-size = 75%:
Como lo indico, todos los font-size's de <html> y elementos debajo de este son el 75% de sus valores por default, inclusive <h1> es afectado por ese 75%, y aqui es donde viene lo particular y es que no esta heredando el valor de 12px de <html> si no mas bien esta aplicando el porcentaje que indica <html> font-size sobre su valor original de 32px
Cuando @degranda ya setea explicitamente <h1> font-size = inherit el valor es diferente al "inherited" anterior
y es que parece ser que aca no toma el 75% sino mas bien directamente el valor en pixeles del <html>
Tenés razón, qué curioso, a mí tampoco me cuadraba la explicación.
Pero a qué te referís con "directamente el valor en pixeles del <html>"?
tampo me explicaba, pye pero a que te refieres cuando dices :
y es que parece ser que aca no toma el 75% sino mas bien directamente el valor en pixeles del <html>
Se pueden aplicar estos 3 valores a las propiedades en css.
Gracias
Excelente, gracias!
• Herencia: La herencia es el mecanismo mediante el cual, determinadas propiedades de un elemento padre son transferidas a un elemento hijo, no todas la propiedades son trasferidas de padre a hijo, ya que hay muchas que no tienen sentido que lo fueran ( por ejemplo los bordes)
Es importante tener bien en claro a lo que nos referimos cuando hablamos de etiquetas padres e hijo, cuando una etiqueta contiene a otra, se dice que esta es su etiqueta padre.
Tenemos que entender que hay muchos valores que se heredaran, por ejemplo, si cambio el color de fuente de en una etiqueta, todos sus hijos heredaran esta propiedad, pero si le asigno un borde negro a una etiqueta padre seria ilógico que todos sus hijos heredaran esta propiedad.
• Controlar la herencia: CSS nos brinda 4 valores que nos permite tener control de la herencia de una propiedad, todas las propiedades de CSS aceptan estos valores.
• Inherit: Establece que el valor de la propiedad sea heredado de la etiqueta padre.
• Initial: Establece que el valor de esa propiedad será establecida por la hoja de estilos del navegador.
• Unset: El valor Unset es como usar Inherit e Initial al mismo tiempo, tiene dos casos.
En caso de que el valor se herede de forma natural, el valor de esta propiedad será heredado.
En caso de que el valor no se herede de forma natural funcionara como Initial.
¿Cuál es la diferencia entre usar el selector universal y la etiqueta de html?
El selector universal abarca todos los elementos <p><h1><div><a>Etc... y la etiqueta html abarca solo el elemento raíz de el documento, como un nivel más profundo al body.
El selector universal es mas para que le digas al navegador que los vales pre-asignados sean reasignados, mientras que los de la etiqueta html son para definir cosas en la pagina y no en el navegador
Mas información sobre el tema de herencia en el siguiente link:
Gracias.
Resumen y grafico
Heredado xd
Un concepto muy importante de CSS salió a la luz en el minuto 1:39. Si se dan cuenta el margin-bottom del <h2> y el margin-top de <p> se estan "combinando".
Esto es un fenómeno de CSS llamado margin collapsing. Es básicamente cuando los márgenes verticales de elementos adyacentes se combinan.
En este enlace pueden ver algunas reglas que se deben cumplir para que ocurra el margin collapsing
Buen aporte Sumo esta clase de la profe Estefany Aguilar que lo explica muy bien.
Herencia
Herencia es el código CSS que se le va a pasar de un padre a un hijo.
INHERIT: Especifica que el valor que usemos herede el valor del elemento padre.
INITIAL: Este valor da el valor inicial y predefinido por el navegador en uso.
UNSET: Este es la combinación de inherit e initial, este valor se usa cuando una propiedad quiere heredar el valor de su elemento padre si este es disponible, en caso de no ser disponible este valor pondrá el valor de la propiedad en su valor inicial como si usaramos inherit e initial juntos.
A que se refiere con el 75% en font-size?
Hola
Aproximadamente en el minuto 3 lo explica. Todos los navegadores traen por predeterminación estilos, él asigna que del estilo predeterminado solo usará el 75% del tamaño en las fuentes.
Saludos
Significa que use el 75% del tamaño de la letra que ya trae el navegador por defecto, para esa propiedad en el ejemplo en chrome es de 16px, si calculas 16 * 0.75 = 12, es decir es una forma de asignar una proporción para que el navegador luego la calcule como te mostré anteriormente. Espero haberte aclarado, saludos
Alguien sabe como hago que me aparezca "filter" para que me aparezcan los datos?
Una vez abierto el inspector de elementos seleccionas Elements y Computed, como se muestra en la imagen:
Ya sea que lo veas en la pestaña "Computed" o que la habilites en el siguiente botón
Hola alguien saber porque en mi inspector cuando aplico el 75% en la fuente no me sale el tamaño en pixeles solo me sale el porcentaje
Hola, para verlos debes habilitar la opción de mostrar css Computado o en la pestaña Computed, en el devtools, te adjunto una imagen, donde lo marco:
vi el video 3 veces para entenderlo poco a poco vamos avanzado!!
el mi tercera vez para mi XD
Pequeña lectura sobre herencia. https://developer.mozilla.org/es/docs/Web/CSS/inheritance
Muchas gracias por compartir :D
Gracias, buen recurso 🙌. A la próxima te recomiendo hacerlo en la sección de aportes para que más personas que estén tomando el curso lo puedan ver.
