Herencia y propiedad all
Comprenda las reglas de herencia de CSS y utilice la propiedad all para restablecer estilos heredados.
Herencia y propiedad all es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué es la herencia?
Algunas propiedades CSS transmiten automáticamente su valor calculado a los elementos secundarios. Esto es la herencia. Le evita escribir la misma regla para cada elemento de un componente.
Propiedades heredadas
Normalmente se heredan las propiedades tipográficas y de texto:
font-family,font-size,font-weight,font-stylecolorline-heightletter-spacingtext-alignvisibility- Propiedades personalizadas de CSS
Propiedades no heredadas
Normalmente NO se heredan las propiedades del modelo de caja y de diseño:
margin,padding,borderwidth,heightbackgrounddisplay,positionbox-shadow,transform
Palabra clave inherit
Fuerce explícitamente la herencia con la palabra clave inherit, lo que resulta útil para elementos de formulario que no heredan la fuente de forma predeterminada:
<div style="font-family: Georgia, serif; font-size: 20px; color: darkred;">
<input type="text" placeholder="Inherits font/color" />
<button>Button inherits too</button>
<textarea>Inherits</textarea>
<select><option>Option A</option></select>
</div>Palabra clave initial
La palabra clave initial restablece una propiedad a su valor inicial predeterminado del navegador, tal como lo define la especificación CSS, ignorando la herencia y los estilos del agente de usuario.
<div style="font-size: 30px; color: tomato;">
<p>Normal text inherits large tomato-colored style from its parent.</p>
<p class="reset-text">This text resets to browser defaults (initial) — medium size, black color.</p>
</div>Palabra clave unset
unset depende del contexto:
- Para las propiedades heredadas: actúa como
inherit - Para las propiedades no heredadas: actúa como
initial
En la práctica, «restablece» una propiedad a su estado natural.
<div style="color: tomato;">
<p style="margin: 40px;">Normal paragraph — keeps its large margin, inherits tomato color.</p>
<p class="clear-styles" style="margin: 40px;">Unset paragraph — color unset (still inherits tomato), margin unset (resets to 0).</p>
</div>Palabra clave revert
revert vuelve al valor de la hoja de estilos del agente de usuario del navegador, restaurando lo que el navegador mostraría de forma predeterminada, sin estilos del autor. Resulta útil para widgets de terceros incrustados.
<div style="color: tomato; font-family: Georgia, serif;">
Ancestor style is tomato serif text.
<div class="widget">This widget uses "all: revert" to fall back to the browser's user-agent defaults, undoing author styles.</div>
</div>La propiedad all
La propiedad all es una abreviatura que aplica una palabra clave a todas las propiedades CSS simultáneamente, excepto direction y unicode-bidi.
<div style="color: tomato; font-family: Georgia, serif; padding: 12px; background: #eee;">
<div class="isolated-widget">all: initial — resets everything to spec defaults</div>
<div class="scoped-component">all: revert — resets to browser UA defaults</div>
</div>Uso práctico de all: initial
Utilice all: initial cuando necesite crear un componente completamente aislado que no se vea afectado por los estilos globales o heredados del elemento padre:
<div style="color: tomato; font-family: Georgia, serif; font-size: 28px;">
Page context — large serif tomato text
<div class="email-template-preview">Email preview — isolated with all: initial, then restyled with Arial 14px.</div>
</div>Patrón all: unset
Elimine los estilos de botón del navegador para crear botones personalizados sin tener que conocer todas las propiedades relevantes:
<button class="custom-btn">Custom button styled from scratch using all: unset</button>
<button>Default browser button for comparison</button>Herencia y propiedades personalizadas
Las propiedades personalizadas de CSS se heredan de forma predeterminada. Esto es lo que las hace tan potentes: una variable definida en :root está disponible en todas partes. Utilice @property { inherits: false } para hacer que una propiedad personalizada no se herede.
Comprobación rápida
¿Qué palabra clave restablece una propiedad al valor predeterminado del agente de usuario del navegador en lugar del valor inicial de la especificación CSS?
Resumen
Las propiedades heredadas transmiten sus valores a los descendientes; las propiedades no heredadas no lo hacen. Las palabras clave inherit, initial, unset y revert proporcionan un control explícito. La propiedad all restablece todas las propiedades de una vez, lo que resulta muy útil para componentes aislados y elementos de formulario personalizados.
Preguntas frecuentes
¿La lección «Herencia y propiedad all» es gratis?
Sí — el texto completo de «Herencia y propiedad all» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de CSS Academy, actualiza a CoddyKit PRO. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Herencia y propiedad all»?
Comprenda las reglas de herencia de CSS y utilice la propiedad all para restablecer estilos heredados. Practicas CSS Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar CSS Academy?
No se requiere experiencia previa. CSS Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Herencia y propiedad all»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de CSS Academy?
Sí. Cada lección de CSS Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Cálculo de especificidad: estilo inline, ID, clase y elemento
- La cascada: origen y orden
- !important: cuándo usarlo y por qué no
- Herencia y propiedad all