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”, ignore todas las reglas posteriores, aplique la regla !important. La palabra clave !important debe colocarse al final de la línea, inmediatamente antes del punto y coma.
- En otras palabras, agrega importancia a todas las subpropiedades que representa la propiedad abreviada.
- En el uso normal, una regla definida en una hoja de estilo externa que es anulada por un estilo definido en el encabezado del documento, que a su vez, es anulado por un estilo en línea dentro del propio elemento (suponiendo la misma especificidad de los selectores).
- Por lo tanto, se usa para anular los estilos que se declararon previamente en otras fuentes de estilo, para lograr un diseño determinado.
Sintaxis:
element {
color: blue !important;
font-size: 14px !important;
...
}
Ejemplo 1:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
h1 {
color: blue ;
}
h1 {
color:white !important;
}
body {
background-color:green !important;
text-align:center;
background-color:yellow;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>!important property</h2>
<p></p>
</body>
</html>
Producción:
En el ejemplo anterior, el color de fondo del cuerpo es verde en lugar de amarillo porque “!importante” se mantiene después del color de fondo verde dentro de la etiqueta del cuerpo.
Ejemplo 2:
HTML
<!DOCTYPE html>
<html>
<head>
<title>!important property</title>
<style>
.geeks {
color: green !important;
size: 10ex !important;
background-color: lightgray !important;
}
.geeks {
color: red;
size: 100ex;
text-align:justify;
background-color: purple;
}
h1, h2 {
text-align:center;
}
h1 {
color:green;
}
body {
width:65%;
margin-left:15%;
}
#gfg {
color: lightgreen !important;
size: 10ex !important;
text-align:justify !important;
background-color: darkgreen !important;
}
#gfg {
color: orange;
size: 1000ex;
background-color: magenta;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>!important property</h2>
<div class = geeks> A Computer Science portal for geeks.
It contains well written, well thought and well explained
computer science and programming articles and quizzes.
</div>
<div id = gfg>
<p>Computer programming is the process of writing
instructions that get executed by computers. The
instructions, also known as code, are written in
a programming language which the computer can
understand and use to perform a task or solve a
problem.</p>
</div>
</body>
</html>
Producción:
CSS es la base de las páginas web, se utiliza para el desarrollo de páginas web mediante el diseño de sitios web y aplicaciones web. Puede aprender CSS desde cero siguiendo este tutorial de CSS y ejemplos de CSS .
Publicación traducida automáticamente
Artículo escrito por Kanishk_Verma y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA