inherit, initial, unset, revert en CSS

Cuatro palabras clave que dicen de dónde debe venir un valor en vez de nombrarlo.

.card {
  color: #1f2937;
  border: 1px solid #e5e7eb;
}

.card button {
  /* los botones no heredan color de forma predeterminada */
  color: inherit;
  font: inherit;
}

.reset-box {
  /* display: initial es `inline`, no `block` */
  display: initial;
  border: initial;
}

.native-again {
  all: revert;
}

Cómo funciona

1. inherit toma el valor computado del padre, incluso en propiedades que no se heredan.
2. initial es el valor por defecto de la propiedad, que rara vez es el del navegador.
3. revert vuelve a lo que decía la hoja de estilos propia del navegador.

Palabras clave y builtins usados aquí

• all
• border
• color
• display
• font
• px

El intento, en números

Líneas

20

Caracteres a escribir

290

Tokens

50

Ritmo de tres estrellas

70 tpm

Al ritmo de tres estrellas de 70 tokens por minuto, este intento toma unos 43 segundos.

Escribe este fragmento

Paso 2 de 3 en La cascada; paso 8 de 26 en Selectores y el modelo de caja.

← Anterior Siguiente →