En este artículo, aprenderemos sobre la propiedad «! importante» y su uso en CSS. Esta propiedad se usa para anular la propiedad de estilo específica sobre la misma propiedad de estilo especificando !important al final del estilo.
!propiedad importante:
La propiedad !important en CSS se usa para proporcionar más peso (importancia) que la propiedad normal. En CSS, !important significa que “esto es importante”, ignora todas las reglas posteriores y aplica !important rule y la palabra clave !important debe colocarse al final de la línea, inmediatamente antes del punto y coma.
- En el uso normal, una regla definida en una hoja de estilo externa se anula por un estilo definido en el encabezado del documento, que a su vez, se anula por un estilo en línea dentro del propio elemento (suponiendo la misma especificidad de los selectores).
- Esta propiedad se utiliza para especificar un estilo particular como estilo clave al que se aplica.
- Si se especifica un estilo con la propiedad !important, ese estilo en particular se aplicará al elemento, no cualquier otro estilo con el mismo nombre.
- Si se agrega la propiedad !important a cualquier estilo, ese estilo aplicado tiene mayor prioridad.
Sintaxis:
element-name {
style-name : stylings !important;
}
Ejemplo 1: Cambia el fondo usando la propiedad importante.
HTML
<!DOCTYPE html>
<html>
<head>
<title>GeeksforGeeks</title>
<style>
body {
background-color: green !important;
background-color: red;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<p>Use of !important property</p>
</body>
</html>
Aquí, hemos utilizado la propiedad !important en el fondo verde, por lo que su prioridad se considera de mayor prioridad.
Producción:
Ejemplo 2: cambie el color del texto usando la propiedad importante.
HTML
<html>
<head>
<title>GeeksforGeeks</title>
<style>
h1 {
color: green !important;
color: black;
}
#text{
color: yellow;
}
</style>
</head>
<body>
<h1 id="text">GeeksforGeeks</h1>
<p>Use of !important property</p>
</body>
</html>
Aquí, hemos utilizado la propiedad !important en el color de texto verde en el estilo de la etiqueta h1 y también hemos cambiado el color del texto a amarillo con la ayuda de la propiedad id, pero la prioridad de importante se considera de mayor prioridad y cambia la color del texto negro a verde no a amarillo.
Producción:
Publicación traducida automáticamente
Artículo escrito por anuragsingh1022 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA