Busque [Great Move to the World] en WeChat y compartiré con usted las tendencias de la industria front-end, las rutas de aprendizaje, etc. lo antes posible. Se ha incluido este artículo GitHub github.com/qq449245884 ... y hay sitios de prueba completos, materiales y mi serie de artículos para entrevistas con fabricantes de primera línea.
Ven y experimenta la versión Plus de ChatGpt gratis, pagamos la dirección de experiencia: chat.waixingyun.cn Puedes unirte al grupo técnico en la parte inferior del sitio web para encontrar errores juntos, y se ha lanzado la nueva versión del artefacto de dibujo cube.waixingyun.cn/home
CSS (hojas de estilo en cascada) es una poderosa herramienta para diseñar y formatear documentos web. En esta guía completa, exploraremos cuatro palabras clave especiales: inherit, y .initialunsetrevert
Heredar: pasar valores de elementos padres
inheritLa palabra clave se usa para indicar explícitamente que un elemento hereda el valor de una propiedad CSS de su elemento principal. Cuando el atributo se establece en inherit, el elemento tomará el mismo valor que su elemento principal. Este comportamiento es especialmente útil cuando desea un estilo coherente en todo el documento o cuando desea que elementos específicos hereden ciertos estilos de sus elementos principales.
Por ejemplo, considere un escenario en el que tiene un elemento con un color de texto asignado <div>. De forma predeterminada, la propiedad de color de texto ( color) se hereda, lo que significa que los elementos secundarios tendrán el mismo color de texto que el elemento principal. Sin embargo, puede usar inheritla palabra clave para aplicar explícitamente este comportamiento, incluso si no se especifica explícitamente en el CSS del elemento principal.
div {
color: black; /* Text color of the parent div */
}
a {
color: inherit; /* 从父div继承文本颜色 */
}
En algunos casos inherit, puede ser una buena idea utilizar para establecer el tamaño o el color de la fuente, pero tenga en cuenta que no todas las propiedades se heredan de forma predeterminada. inheritConocer la diferencia entre propiedades heredadas y no heredadas es fundamental para usar palabras clave de manera efectiva .
Inicial: restablecer a los valores predeterminados
initialpalabra clave utilizada para restablecer una propiedad CSS a su valor inicial como se especifica en la especificación CSS. Cada propiedad CSS tiene un valor inicial definido por la especificación W3C como valor predeterminado. Al usar initial, puede anular cualquier estilo anterior y restablecer las propiedades a su estado inicial.
El valor inicial definido en la especificación puede variar. Algunos valores iniciales tienen sentido intuitivo, mientras que otros pueden parecer arbitrarios. Por ejemplo, float: noney background-color: transparent son ejemplos de valores iniciales que cumplen expectativas comunes. Sin embargo, display: inlinpropiedades como e pueden parecer contrarias a la intuición, pero estos valores iniciales se eligieron por razones históricas o por la necesidad de establecer un punto de partida.
button {
color: initial; /* 将颜色属性重置为初始值 */
}
Tenga en cuenta que initiallas palabras clave solo restablecen el valor aplicado a una propiedad específica y no afectarán a otras propiedades o valores heredados. Además, tenga en cuenta que los valores iniciales definidos en la especificación pueden no ser siempre consistentes con el comportamiento deseado.
Desarmado: reinicio completo
unsetLas palabras clave son una herramienta poderosa para restablecer las propiedades de CSS en todos los ámbitos. Combina la funcionalidad de inheritlas initialpalabras clave y para proporcionar opciones de reinicio más flexibles.
Para propiedades no heredadas, unsetfunciona como initialla palabra clave. Restablece la propiedad a su valor inicial como se define en la especificación CSS. Esto asegura que la propiedad comience de nuevo sin ningún efecto de estilo anterior.
div {
margin: unset; /* Resets the margin property to its initial value */
}
Sin embargo, para las propiedades heredadas, unsetel comportamiento es diferente. No restablece la propiedad a su valor inicial, pero restaura el comportamiento natural de la propiedad, incluida la herencia del valor del elemento principal.
p {
color: unset; /* Allows the color property to inherit from its parent */
}
unsetLa palabra clave es especialmente útil cuando desea restablecer una propiedad en general, ya sea heredada o no.
Revertir: volver al estilo del navegador
revertLas palabras clave son el miembro más nuevo de la familia de palabras clave CSS. Similar a unset, le permite restablecer las propiedades de CSS. Sin embargo, revertse tiene en cuenta la naturaleza en cascada de las hojas de estilo y se respetan los estilos predeterminados del navegador.
Cuando se aplica a una propiedad, revertcancela cualquier estilo anterior y restaura la propiedad al valor definido por la hoja de estilo predeterminada del navegador. Esencialmente, devuelve la propiedad a su estado original según lo determine el navegador.
h1 {
font-size: revert; /* Reverts the font-size property to the browser's default */
}
En el ejemplo anterior, font-sizeel atributo del elemento <h1>se establece en revert, lo que hace que tome el tamaño de fuente definido en la hoja de estilo predeterminada del navegador. Esto garantiza la coherencia con el estilo general de la página y respeta las preferencias del usuario.
Resumir
En esta guía completa, hemos explorado las palabras clave especiales de CSS inherit, y . Estas palabras clave brindan un control valioso sobre las propiedades de CSS, lo que le permite propagar valores de los elementos principales, restablecer las propiedades a su estado inicial o predeterminado y manipular los estilos en cascada.initialunsetrevert
comunicar
Si tiene sueños y productos secos, busque [Daqian World] en WeChat para prestar atención a esta sabiduría de lavado de platos que todavía está lavando platos temprano en la mañana.
Se ha incluido este artículo GitHub github.com/qq449245884 ... y hay sitios de prueba completos, materiales y mi serie de artículos para entrevistas con fabricantes de primera línea.