Herencia

Iván Arcos

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.

umoari

Voy a modificar el CSS de la abue para que me hereden los terrenos

abue{
	terrenos;
}
yo{
	terrenos: inherit;

Síganme para más trucazos c:

Andrés Gallego

Mis notas juntando también la de los compañeros 😄

Héctor Alonso Padilla Ramírez

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:

inherit Hereda el valor de la propiedad del elemento padre.
initial Establece el valor que tenía la propiedad inicialmente.
unset Combinación de las dos anteriores: Hereda el valor de la propiedad del elemento padre, y en caso de no existir, su valor inicial.
El siguiente ejemplo para forzar la herencia en una propiedad que no la aplica por defecto:

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

Ixchel Garcia

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!

Yair Lira

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

RetaxMaster

Profe Platzi

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

Cesar Lozano Rodriguez

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%):

<html> font-size 16px
<h1> font-size 32px (2em)
<p> font-size inherited (16px)

una vez seteado el <html> font-size = 75%:

<html> font-size 12px
<h1> font-size 24px
<p> font-size inherited (12px)

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

<h1> font-size 12px

y es que parece ser que aca no toma el 75% sino mas bien directamente el valor en pixeles del <html>

Joel Dominguez Merino

Se pueden aplicar estos 3 valores a las propiedades en css.

Si quieres leer mas aqui les dejo este Link

juan osuna

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

Harrinson Quintero

Mas información sobre el tema de herencia en el siguiente link:
1. Cascada y Herencia
2. Herencia_MDN Web Docs

María Del Pilar Chávez Gutiérrez

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.

Ernesto Angulo Jiménez

Un concepto muy importante de CSS salió a la luz en el minuto 1:39. Si se dan cuenta el margin-bottom del <h1> 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

Henry Alexander Velásquez Rosas

Resumen y grafico

h1 recibe por el navegador un tamaño especifico
h1 está dentro del html pero no está tomando el 75%
de tamaño de fuente que le indicamos a todo nuestro
html solo está tomando el tipo de fuente, así que
usamos inherit en h1 para que herede esa propiedad 😅

David Aragó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

Armando Machacca

vi el video 3 veces para entenderlo poco a poco vamos avanzado!!

enriquerabelltalamantes

Herencia
En CSS existe el concepto de la herencia en el cual podemos sacar información de los “padres” para copiarla o hacer algo con ella. En este caso los padres pueden ser las etiquetas contenedoras que contienen a nuestros elementos

Pablo Aquino

Herencia, es código css que el elemento padre heredará al hijo.
Inherit, Indica que heredará los estilos de su elemento padre
Initial, Indica que obtendrá los valores predeterminados del navegador.
upset, combinación de inherit + initial, intentará heredar los estilos de su elemento padre, si no esta disponible obtendrá los valores predeterminados.

Por defecto el navegador tiene un font-size:16px

Manuel Hermoso

@degranda estoy muy contento de tomar este curso. Ahora comienzo a entender CSS y ya no tendré que hacer experimentos hasta lograr lo que quiero. Me dio cuenta de que es un tema de tener una buena base.

Carlos Ramos

hace 10 meses

Clase 26 - Herencia

¿Qué es la herencia en CSS?

Es el código CSS que se le pasa de un elemento padre a un elemento hijo.

¿De dónde hereda un elemento <p> su propiedad font-size?

Del elemento padre más cercano que tenga.

¿El elemento <html> puede dar en herencia a otros elementos estilos que le pongamos a él?

Sí.

¿Para qué nos sirve la propiedad font-family?

Para cambiar la fuente del elemento.

¿Cuál es el tamaño de fuente que tiene definido el elemento <html>?

16px.

¿Por qué un elemento <h1> no hereda el font-family del elemento <html>?

Porque el navegador está sobreescribiendo los estilos de este elemento con sus propios estilos.

¿Para qué nos sirve el valor inherit en una propiedad de CSS?

Este valor fuerza que el elemento herede dicha propiedad de su elemento padre más cercano.

Ricardo Alfonso Chavez Vilcapoma

hace 9 meses

TIP: Si se trabaja con rem (recomendable en fonts), aplicar en el body la propiedad font-size: 62.5%, para que 1rem valga 10px y se haga un poco más fácil el control de tamaño.

Fabian Flores

Notas de la clase

Andrés Bregant

Y nunca lo olviden, amiguitos: tanto la palabra “título” como la palabra “párrafo”, llevan tilde. 😉

Enrique Quiroz

https://flukeout.github.io/

Recomiendo este juego, excelente para practicar selectores

Lucia Aldana Castillo

html {
font-size: 75%;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}

h1 {
font-size: inherit;
}

David Limon

hace 6 meses

hrenatogiron

Karen Andrea Gomez Gutierrez

Herencia

Yasmil Gonzalez

la herencia es la capacidad de los padres de heredar estilos a los hijos de un contenedor

José M. Veintimilla

Herencia

Es el código CSS que pasa de un padre a un hijo. Por defecto html viene con estilos como el tipo de fuente y el tamaño.

html {
    font-size: 75%;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

html por defecto usa 16px como tamaño de fuente. Al pedirle el 75% la pondrá en 12px. Además cambiamos el tipo de fuente. Sin embargo, observamos que solo se aplican a la etiqueta p. Aunque h1 cambió el tipo de fuente, no lo hizo el tamaño. Esto porque no lo está heredando ya que el navegador no toma el tipo de fuente como padre.

h1 {
    font-size: inherit;
}

Aquí aplicamos la propiedad herencia al h1. Lo que hará será tomar el tamaño de fuente de su padre más cercano. Como ni main o body tienen tamaño de fuente definido (en ese orden), lo tomará de la etiqueta html, que sí tiene.

Hay ciertos estilos que nuestra etiquetas van a heredar de sus contenedoras, por lo que es importante decidir cuando esto nos conviene o no.

Luis Angel Cruz Ruiz

Propiedades Heredadas VS Propiedades No Heredadas

Las propiedades heredadas obtienen la propiedad de su padre y no del elemento raíz. Mientras que las propiedades no heredadas siempre tendrán el valor de raíz. En otras palabras el valor por defecto de una propiedad heredada es inherit mientras que en una no heredada es initial.

Tomas Salina

La herencia en CSS es un mecanismo en el cual determinadas propiedades de un elemento padre se transmiten a sus hijos. … Por ejemplo, los márgenes no se heredan porque es poco probable que un elemento hijo necesite los mismos márgenes que su padre. Es por eso que entra en juego el valor inherit.

Anfernee Valera

Herencia es el mecanismo en el que algunas propiedades CSS se heredan desde los elementos padres a los elementos hijos, modificando el valor que tienen por defecto. Por ejemplo:
CSS

html {
  color: red;
}

HTML

<body>
    <main>
      <h1>Soy un titulo</h1>
      <p>Soy un parrafo</p>
    </main>```


La propiedad color aplicada es heredada, por esto todos los elementos hijos de la raíz html tendrán un color rojo. Ahora, existen distintas propiedades las cuales manipulan el comportamiento de la herencia: 
•	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.

•	Unset. 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.

Javier Alejandro Flores Gomez

Clase 26 - Herencia

Nos menciona que El navegador tiene como font size 16px por predeterminado, lo que significa que todo contenido vendrá así por defecto

lo que esta heredando el html es el tipo de fuente

al utilizar font size inherit hacemos que herede de su padre el valor del size

la herencia es básicamente tomar características de las clases padres y así poderlas utilizar en otras posteriormente

Edgar López Laynez

elemento
{
	atributo: inherit;
}

Lo que hacemos es indicar que se herede el estilo DEL ATRIBUTO QUE ESTAMOS INDICANDO del elemento padre, si el elemento padre no tiene definido un estilo al atributo que estamos buscando. Este irá a buscar este estilo en los elementos superiores de la etiqueta padre hasta encontrar uno. Ya si no se encontró este estilo en los elementos superiores, se le definira un estilo por defecto al atributo que estabamos buscando herredar.

Eugenio Enrique Altamirano Calderón

Hasta ahora muy satisfecho con este curso, tenía confusión con muchos conceptos del CSS, @degranda debería estar en los demás cursos de la carrera arquitectura frontend.

Bryan Alexander Portillo Sánchez

No entendía la herencia hasta este vídeo, muy bien explicado!

Andres Lanza Gaye

hace 3 meses

Tres conceptos muy importantes en CSS, cascada, herencia y especificidad.

Leidy Vaneza Vicente Ccorimanya

Abidan Triguero Calle

RESUMEN CLASE 26:
HERENCIA

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Herencia</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <main>
        <h1>Soy un titulo</h1>
        <p>Soy un parrafo</p>
    </main>
</body>
</html>

CSS

html {
    font-size: 75%;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

h1 {
    font-size: inherit;
}

Juan David Vanegas Roldán

Ante la pésima explicación de esta clase “es el código que se la pasa de un padre a un hijo” ¿y quién carajos es el padre y quién el hijo? (después de todos los términos que enseñan, no son capaces de usar el término preciso) pues tuve que recurrir a Google para entender esto bien: La herencia ayuda a evitar reglas CSS duplicadas, aplicando automáticamente CSS a todos los descendientes de un elemento.

Elías Yoel Romero Sánchez

Algunos ejercicios sobre herencia
https://francescricart.com/ejercicio-css-sobre-forzar-y-romper-la-propiedad-de-herencia/

Any Omaña

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Herencia</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <main>
        <h1>Manchis está loco</h1>
        <p>Y está chiquito</p>
    </main>
</body>
</html>

html{
    font-size: 75%;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
h1{
    font-size: inherit;
}

Juan Carlos Leandro Diaz Zegarra

Considero que el curso seria mas eficiente si reciclaras el HTML y te enfocaras en CSS, puedes aprovechar eso para que cada clase conecte con la anterior y al aprender lo nuevo se relacione con lo anterior, es mi recomendacion para este modulo del curso, esta muy bien explicado eso no lo discuto.

Josue Granados

Hay propiedades que se heredan y otras que no.
.
color, background, _font-family _son solo algunas que si se pueden heredar.
.
padding, margin, border son propiedades que no se heredan automaticamente a menos de que forcemos la herencia con el keyword inherit.
.
En este artículo hay una lista de cuáles atributos son heredables.

Pablo Cruz

Por acá os dejo una página donde viene una lista de las etiquetas de las cuales si aplican HERENCIA y cuáles no. https://www.w3.org/TR/css-2010/#properties

Yamil B. Prado

Herencia: Es el código CSS que se le pasa a un padre a un hijo

Sandro Guillen Bertys

Herencia.
Es el código que se le va a pasar de un padre a un hijo.

Jeisson Espinosa

Información resumida de esta clase
#EstudiantesDePlatzi

La herencia es el código de CSS que se le va a pasar de un padre a un hijo, es decir, si tengo una etiqueta 2 dentro de una etiqueta 1, significa que etiqueta 2 es hijo de etiqueta 1. Yo puedo aplicar un estilo a la etiqueta 1 y hacer que este estilo lo herede la etiqueta 2
Esto lo logro dentro de CSS utilizando la línea inherit para especificar que debe heredar

Jesus Velasco

Aqui dejo mi resumen de la clase 🤗️ espero y les sea de utilidad

Cuando damos algunas propiedades a un elemento padre estas en algunos casos (no en todos) se heredarán a las propiedades de los elementos hijo, a esto se le conoce como herencia en css y es muy importante conocerlo para poder tener control de los estilos de nuestro sitio. CSS nos permite tener un mayor control de esta herencia y nos ofrece 3 opciones para manejarla, la primera opción es inherit que le indica a la propiedad del elemento hijo que tome la propiedad del elemento padre más cercano, el valor initial que fuerza a que tome el valor valor por defecto que el navegador tiene definido y por último la etiqueta unset que es una mezcla entre la etiqueta inherit y initial, le dice a la propiedad del elemento que tome el valor del elemento padre más cercano y si no lo encuentra, a diferencia de lo que haría inherit qué es pasarse al próximo elemento padre y asi hasa encontrar un valor en un elemento padre que tenga establecida esa propiedad, unset se va directo a tomar el valor por default del navegador.

Olincer Tadeus Garcia Cruz

INFORMACION ADICIONAL

Gianluca Reyes Cisneros

INFORMACCION SOBRE EL TEMA: https://webdesign.tutsplus.com/es/tutorials/understanding-css-inheritance-inherit-initial-unset-and-revert-keywords--cms-34233

Abigail Perez

Karlos Angel Obregon Flores

fuente: https://developer.mozilla.org/es/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance

Herencia
La herencia también debe entenderse en este contexto: algunos valores de las propiedades CSS que se han establecido para los elementos padre los heredan los elementos hijo, pero otros no.

Por ejemplo, si para un elemento se establece el color (color) y el tipo de letra (font-family), cada elemento que se encuentre dentro de él también se mostrará de ese color y con ese tipo de letra, a menos que les se haya aplicado un color y un tipo de letra diferentes directamente.

Algunas propiedades no se heredan. Por ejemplo, si para un elemento se establece un ancho width del 50%, sus descendientes no tendrán un 50% de ancho con respecto al de sus padres. Si este fuera el caso, ¡sería muy frustrante usar CSS!

Naldo Duran

👌

Alejandro Parra

Resumen del Capitulo en Notion
https://cutt.ly/9lgUe2r

Israel Lopez Lujan

el valor que me permite heredar caracteísticas es inherit

William Schnaider Torres Bermon

Algo importante a tener en cuenta son los controles de herencia.

William Gonzalez Betancourt

Aclaración: el parrafo tiene 16 px de font-size no por que html tenga 16px, si no por que 16 px también es el valor por defecto de parrafo, por lo tanto el titulo <h1> tiene por defecto el tamaño de 32 px. Lo que vemos en la clase es que por defecto al colocarle que html tenga como tamaño el 75%, hace que por defecto las etiquetas hijos hereden la misma REGLA y no el mismo tamaño, disminuyendo en un 75% su tamaño de cada etiqueta proporcionalmente, y lo que hace la propiedad “inherit” es que herede el mismo Tamaño y no las mismas reglas.

Samuel de los Santos

Herencia: es una caracteristica que le permine a una etiqueta contenido heredar (inherit) los atibutos de su etiqueta contenedora mas sercana.
En este caso la etiqueta <p> heredo el tamaño y fuente de <h1> la cual a su vez heredo su tamaño y fuente de <html> por lo tanto al cambiar el tamaño o fuente de html cambia automaticamente el resto.

user_deleted_1572741

🤔 La herencia en CSS permite transferir propiedades de un elemento padre hacia sus hijos.

Juan Isaac Salazar Meza

La unica etiqueta que no me entra es la del meta con viewport, ese si de plano ando batallando para memorizarmelo, pero ahi va ah va

Yair Lira

Aqui encontrarás que estilos si se heredan
https://www.w3.org/TR/CSS22/propidx.html
Además de sus valores

Levi Nuñez

Muy buena explicacion, ya con esto consolido mi conocimiento sobre HTML y CSS

Juan Felipe Angarita Lopez

Fuentes Específicas:
Puedes especificar fuentes específicas por nombre. Asegúrate de proporcionar una lista de fuentes alternativas en caso de que la primera no esté disponible:

body {
font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;
}

Juan Felipe Angarita Lopez

Fuentes Genéricas:
Puedes utilizar fuentes genéricas que son categorías amplias de fuentes. Algunos ejemplos son:

css
body {
font-family: serif; /* Fuentes con serifs, como Times New Roman */
}

h1 {
font-family: sans-serif; /* Fuentes sin serifs, como Arial o Helvetica */
}

p {
font-family: monospace; /* Fuentes de espaciado fijo, como Courier New */
}

Juan Felipe Angarita Lopez

La propiedad font-family en CSS se utiliza para especificar la fuente o fuentes de texto que se deben aplicar a un elemento. Puedes proporcionar una lista de fuentes preferidas, y el navegador utilizará la primera fuente disponible en esa lista. Si ninguna de las fuentes especificadas está disponible, el navegador utilizará la fuente predeterminada del sistema.

Juan Felipe Angarita Lopez

La herencia en CSS se refiere a la capacidad de los elementos secundarios de heredar propiedades y valores de estilo de sus elementos padres. Esto significa que si aplicas un estilo a un elemento padre, esos estilos pueden propagarse a los elementos hijos, a menos que se anule explícitamente.

Algunas propiedades de estilo se heredan de forma predeterminada, mientras que otras no. Aquí hay algunas propiedades comunes que se heredan de padres a hijos:

Texto:

font-family
font-size
font-weight
font-style
color
Caja:

line-height
text-align
color (solo si no se ha establecido en el hijo)
Enlaces:

text-decoration
color

Jorge Romero

hace 2 meses

¿por que el comportamiento de CSS es ditinto dependiendo de la ubicacion del archivo style.css? es deciryo cree una carpera CSS y dentro de esta coloque el archivo style.css, fuera de la carpera CSS cree mi archivo index.html, cuando me refiero al comportamiento distinto es que la herencia no la aplica.

Juan David Santamaria Gomez

hace 3 meses

el entendienmiento del funcionamiento de herencia

Jonathan David Olivos

hace 4 meses

Cascade, specificity, and inheritance

Eric López

hace 4 meses

Muchisimas Gracias por las clases profe…

Alexander Ocampo

hace 6 meses

Muy interesante para heredar estilos y ahorrar tiempo.

Luz Stella Ojeda Ballesteros

hace 7 meses

La herencia en CSS es un mecanismo que permite que los elementos hijos hereden ciertas propiedades de los elementos padres. En otras palabras, si se establece un estilo en un elemento padre, los elementos hijos pueden heredar ese estilo sin necesidad de establecerlo explícitamente en cada elemento hijo.

Por ejemplo, si se establece un color de fuente en el elemento padre, todos los elementos hijos heredarán ese color de fuente a menos que se anule explícitamente en un elemento hijo. Lo mismo se aplica a otras propiedades, como tamaño de fuente, fondo, margen, relleno, etc.

La herencia en CSS puede ser muy útil para simplificar el código y evitar tener que escribir estilos redundantes. Sin embargo, no todas las propiedades se heredan automáticamente, y algunas propiedades pueden heredarse de manera impredecible en diferentes navegadores. Por lo tanto, es importante comprender qué propiedades se heredan y cómo afectan a los elementos hijos en su sitio web.

Ximena Juarez

hace 7 meses

Juan Camilo Salazar Hernandez

hace 7 meses

html{
font-size: 75%;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}

/inherit heredar el tamaño de letra mas cercano/
h1{

font-size: inherit;

}

Carlos Ramírez Pacheco

hace 9 meses

html(h1)

Jonathan Fernando Ramirez Valencia

hace 9 meses

Marco Antonio Alducin Garcia

hace 10 meses

Ahora le daré un buen uso al inherit. Aunque no se si el concepto de herencia quiero pensar que el declarar a un padre algo y que esto le afecte a los hijos que declare dentro de este.

Felipoch

La herencia en CSS es el mecanismo mediante el cual determinadas propiedades de un elemento padre se transmiten a sus hijos.

No todas las propiedades CSS son heredadas, porque algunas de ellas no tendría sentido que lo fueran. Por ejemplo, los márgenes no se heredan porque es poco probable que un elemento hijo necesite los mismos márgenes que su padre.

Fuente

Carlos Alfonso Romero Muñoz

Por lo tanto, si yo hago cambios en la etiqueta html que es la que contiene todo, esas propiedades las va a heredar a todos sus hijos. (Por ejemplo el tipo de fuente).

Carlos Alfonso Romero Muñoz

HERENCIA, como el código es en cascada y se lee de arriba a abajo, son hijos los elementos que se encuentran dentro de otro, por ejemplo head es hijo de la etiqueta html. Así como main es hijo de body que a su vez es hijo de html

Juan David Vanegas Roldán

Es decir que putas quedarse con explicar que la herencia es el código que le pasa el padre al hijo. No pueden usar los términos de programación y explicar las cosas bien con definiciones serias?

Es decir, es el código que le pasa un contenedor a otro o un selector a otro o una clase a sus clases subsiguientes?

Al final, sin entender un cu*** de esta clase, me fui a Google y ahí sí explican bien.

Juan Felipe Angarita Lopez

https://www.youtube.com/watch?v=Uz1u3rGWxzw

Juan Felipe Angarita Lopez

https://www.youtube.com/watch?v=7UD0VniqJX0
https://www.youtube.com/watch?v=64rlSyBsiTU

Juan Felipe Angarita Lopez

https://mosaic.uoc.edu/ac/le/es/m6/ud2/index.html#:~:text=La herencia en CSS es,también tendrán los ojos azules.

Juan Felipe Angarita Lopez

https://disenowebakus.net/herencia-en-css.php

Nicolas Betancur Pavas

me gustaría haber visto como es el uso del sidebar , con html y css

magahr

pues menos mal que existe esto = *{, porque para mi lo del padding… me parecio medio confuso…!!!

Eduardo Peña Ramos

Es interesante ver que en el Inspector web podemos ver la jerarquía. Y que html está hasta arriba.

Camilo Manrique

En esta clase aprendemos como pasar la herencia ( estilos) que tienen los elementos padres a sus hijos. quedo muy claro gracias a la explicacion del profesor y por los aportes de @ivan arcos.

Anggi Vanesa Pallares Solis

CSS inherit Herencia

Jorge Luis Rueda Marin

Es tema de la herencia se debe también tener en cuenta que la anchura, los márgenes, los bordes y el relleno no se heredan

Juan Carlos Ortiz Romero

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.

Juan Carlos Ortiz Romero

html {
  font-size: 75%;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

h1 {
  font-size: inherit;
}

Francisco Salcedo

En la columna de la izquierda aparece el tamaño de la fuente de Html, h1, p al 100%, en segunda columna aparece el tamaño de la fuente al 75% sin heredar de las mismas etiquetas, y en la tercer columna aparece aparece la etiqueta H1 ya aplicando font-size: inherit

Leobardo Licona Soto

Herencia

La etiqueta HTML hereda los estilos font-family a sus elementos hijo mientras no exista especificidad.

html {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 12px;
}

Con inherit le decimos al elemento hijo que herede propiedades de su elemento padre.

h1 {
    font-size: inherit;
}

Eber Eliud Rodriguez Alvarado

Jonathan David Olivos