Articles
Introducción a CSS
Herencia en CSS

Herencia en CSS

Este artículo explica la herencia en CSS.

Puede comprobar las propiedades representativas heredadas y no heredadas.

YouTube Video

HTML para vista previa

css-inheritance.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>CSS Inheritance</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-inheritance.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS Inheritance</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header><h2>CSS Inheritance</h2></header>
19        <article>
20            <h3>Example of Inheritance</h3>
21            <section>
22                <p>
23                    Example of P Element.<br>
24                    <span>Example of Span Element</span>
25                </p>
26            </section>
27            <div>
28                Example of Div Element
29            </div>
30            <ul>
31                <li>List Item 1</li>
32                <li>List Item 2</li>
33                <li>List Item 3</li>
34            </ul>
35        </article>
36        <article>
37            <h3>all</h3>
38            <section>
39                <h4>Initial</h4>
40                <div class="all-initial">This is an initial element</div>
41            </section>
42            <section>
43                <h4>Inherit</h4>
44                <div class="parent-inherit">
45                    <div class="all-inherit">This is an inherited element</div>
46                </div>
47            </section>
48            <section>
49                <h4>Unset All</h4>
50                <div class="parent-unset">
51                    <div class="all-unset">This is an unset element</div>
52                </div>
53            </section>
54            <section>
55                <h4>all and !important</h4>
56                <div class="important-style">
57                    <div class="all-with-important">
58                        This is an initial element with !important
59                    </div>
60                </div>
61            </section>
62        </article>
63    </main>
64</body>
65</html>

Herencia en CSS

En CSS, algunas propiedades se heredan automáticamente de elementos padre a elementos hijo. Este es un mecanismo útil porque una vez que estableces una propiedad específica, los elementos hijo también tendrán el mismo estilo, eliminando la necesidad de configurarlo repetidamente. Sin embargo, no todas las propiedades se heredan; algunas propiedades se heredan mientras que otras no. Por ejemplo, color y font-family se heredan, pero las propiedades del modelo de caja como margin y padding no se heredan.

Propiedades Heredadas

Las propiedades heredables son principalmente aquellas relacionadas con el texto y las fuentes.

Propiedades comúnmente heredadas

  1. color: Color del Texto
1body {
2    color: black;
3}
  • En este caso, todos los elementos hijo dentro de body tendrán color de texto negro.
  1. font-family: Familia de Fuentes
1body {
2    font-family: "Times New Roman", cursive;
3}
  • Todos los elementos hijo usan la fuente Arial.
  1. font-size: Tamaño del Texto
1body {
2    font-size: 16px;
3}
  • Todo el texto dentro de body será de 16px por defecto.
  1. line-height: Espaciado entre líneas
1p {
2    line-height: 1.5;
3}
  • El texto dentro de un elemento <p> se mostrará con un interlineado de 1.5 veces, afectando también a sus elementos hijo.
  1. text-align: Alineación del Texto
1div {
2    text-align: center;
3}
  • El texto y los elementos en línea dentro de un elemento div se muestran centrados.
  1. visibility: Visibilidad del Elemento
1div {
2    visibility: hidden;
3}
  • visibility es una propiedad que controla la visibilidad de un elemento. Cuando se establece en oculto, el elemento se vuelve invisible.
  • En este caso, los elementos hijo dentro del div también estarán ocultos.
  1. list-style: Estilo de lista (marcadores de lista para <ul> y <ol>)
1ul {
2    list-style: square;
3}
  • En este caso, los elementos de lista dentro de la etiqueta ul se mostrarán con marcadores cuadrados.

Ejemplo:

Propiedades No Heredadas

Las propiedades relacionadas con el diseño y el modelo de caja generalmente no se heredan. Estas propiedades necesitan establecerse individualmente para cada elemento.

Propiedades Comunes No Heredadas

  1. margin, padding: Márgenes exteriores e interiores de un elemento
1div {
2    margin: 10px;
3    padding: 20px;
4}
  • Incluso si establece márgenes externos o internos para un elemento div, esto no afecta a sus elementos secundarios.
  1. border: Borde del elemento
1div {
2    border: 1px solid black;
3}
  • Incluso si se establece un borde en un elemento padre, esto no afecta a los elementos secundarios.
  1. width, height: Ancho y alto del elemento
1div {
2    width: 100px;
3    height: 50px;
4}
  • El ancho y la altura de un elemento padre no afectan automáticamente a los elementos secundarios.
  1. background: Estilo de fondo
1body {
2    background-color: lightblue;
3}
  • El color de fondo establecido en el body no afecta directamente a los elementos secundarios. Sin embargo, si un elemento secundario tiene un fondo transparente, el color de fondo del elemento padre puede ser visible a través de él.

Ejemplo:

Control de Herencia

La herencia puede ser controlada usando las palabras clave inherit, initial o unset.

  • Si desea habilitar la herencia: Puede forzar explícitamente la herencia utilizando la palabra clave inherit.
1div {
2    color: inherit;  /* Inherit the color from its parent element */
3}
  • Si no desea herencia: Puede restablecer la propiedad a su valor inicial utilizando las palabras clave initial o unset.
1p {
2    color: initial;  /* Reset the color to its initial/default value */
3}

Ejemplo:

La propiedad all

La propiedad all es una propiedad que puede restablecer casi todas las propiedades CSS, incluidas las que pueden heredarse, para un elemento especificado al mismo tiempo. Específicamente, puedes usar las siguientes tres palabras clave para establecer las propiedades de un elemento:.

  • initial: Restablece todas las propiedades a sus valores iniciales.
  • inherit: Hereda todas las propiedades del elemento padre.
  • unset: Hereda la propiedad si es heredable, de lo contrario la restablece a su valor inicial.

all es muy útil cuando desea restablecer o configurar múltiples propiedades en conjunto, en lugar de configurar solo propiedades específicas individualmente.

Ejemplo de restablecimiento a valores iniciales 

1.all-initial {
2    all: initial;
3    background-color: lightskyblue;
4}

  • Cuando desee restablecer todos los estilos previamente configurados para un elemento específico y devolverlo a su estado inicial, utilice all: initial de esta manera.

  • En este ejemplo, todas las propiedades del elemento <div> con la clase .all-initial se restablecen a los valores iniciales predeterminados del navegador.

Ejemplo de Herencia 

 1.parent-inherit {
 2    color: blue;
 3    font-size: 20px;
 4    border: 1px solid blue;
 5}
 6
 7.all-inherit {
 8    all: inherit;
 9    background-color: lightskyblue;
10}
  • Usar all: inherit hace que todas las propiedades se hereden del elemento padre.
  • En este ejemplo, los elementos con la clase .all-inherit heredan todas las propiedades, como color y font-size, del elemento padre.

Ejemplo de Determinación del Valor Inicial o Herencia Basada en Condiciones 

 1.parent-unset {
 2    color: blue;
 3}
 4
 5.all-unset {
 6    font-weight: bold;
 7}
 8
 9.all-unset {
10    all: unset;
11}
  • Usar all: unset hace que las propiedades se hereden si pueden serlo; de lo contrario, se restablecen a sus valores iniciales.
  • En este caso, color se hereda, mientras que font-weight se restablece a su valor inicial, típicamente normal.

Relación con la Especificidad (Prioridad) 

1.all-with-important {
2    color: red !important;
3    background-color: lightskyblue;
4}
5
6.all-with-important {
7    all: initial;
8}

  • La propiedad all es un mecanismo de reinicio poderoso, pero está afectada por la especificidad CSS. Si un elemento específico tiene especificaciones de estilo fuertes, la propiedad all puede no ser capaz de anular esos estilos. Por ejemplo, las propiedades especificadas con !important no pueden verse afectadas.

  • En este ejemplo, incluso si intenta restablecer el estilo con all: initial, la propiedad color no se restablecerá debido a la especificación color: red !important.

Elementos de nivel de bloque y elementos en línea

Elementos de nivel de bloque

  • Ejemplo: <div>, <p>, <h1> 〜 <h6>, <ul>, <li>, <section>
  • Características:
    • Siempre aparecen en una nueva línea y se expanden para llenar todo el ancho de su elemento padre.
    • El ancho (width) y la altura (height) se pueden configurar libremente.
    • Los márgenes (margin) y el relleno (padding) se pueden configurar en todas las direcciones y afectarán a todos los lados.
1div {
2    width: 80%;  /* Set the width to 80% of its parent element's width */
3    padding: 20px;  /* Add a padding of 20 pixels on all sides */
4    margin: 10px 0; /* Add a margin of 10 pixels top and bottom, 0 pixels left and right */
5}

Elementos en línea

  • Ejemplo: <span>, <a>, <strong>, <em>, <img>, <label>
  • Características:
    • Aparecen junto a otros elementos en línea en la misma línea.
    • El ancho (width) y la altura (height) no se pueden configurar directamente (a menos que se aplique display: block).
    • Configurar márgenes (margin) o relleno (padding) verticalmente tiene un efecto limitado (los márgenes y el relleno horizontales son efectivos).
1a {
2    padding: 5px;  /* Padding for inline elements */
3    margin-right: 10px;  /* Set margin to the right */
4    color: blue;
5}

Diferencias entre los elementos de nivel de bloque y los elementos en línea

  • Configuraciones de ancho y altura:

    • Elementos de nivel bloque: Se pueden configurar el ancho y la altura.
    • Elementos en línea: Generalmente, no se pueden configurar el ancho y la altura.

  • Márgenes y Relleno:

    • Elementos de nivel bloque: El margen y el relleno se aplican a todos los lados.
    • Elementos en línea: El margen y el relleno en la parte superior e inferior son ineficaces o tienen un efecto limitado.

  • Método de Disposición:

    • Elementos de nivel bloque: Colocados automáticamente en una nueva línea.
    • Elementos en línea: Alineados en la misma línea con otros elementos en línea.

Como puede ver, existen diferencias en cómo se aplican los estilos CSS a los elementos de bloque y a los elementos en línea. En los elementos de bloque, las propiedades CSS relacionadas con el diseño, como el ancho, la altura, el margen y el relleno, se aplican tal como se especifican. Por otro lado, para los elementos en línea, configurar propiedades de CSS relacionadas con el diseño como el ancho, la altura, el margen o el relleno puede no aplicarse o aplicarse de manera limitada.

Gestión de CSS para elementos de nivel de bloque y en línea 

1span {
2    display: block;  /* Display the span element as a block-level element */
3    width: 100px;
4    height: 50px;
5}

Sin embargo, configurando la propiedad display como block o inline-block, puedes ajustar los estilos como el ancho y la altura para los elementos en línea como si fueran elementos de bloque.

Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.

YouTube Video

Conceptos básicos de CSSDetalles de los selectores de atributos en CSS