El navegador utiliza algunos valores predeterminados predefinidos para la mayoría de las propiedades de CSS. Estos valores predeterminados pueden variar según el navegador y también la versión del navegador que se utiliza. Estos valores predeterminados se proporcionan para garantizar la uniformidad en todas las páginas web. Pero en algunos casos, estos valores predeterminados dan como resultado que la página web realice una acción inesperada, por lo que eliminar estos valores predeterminados es un método viable.
En la mayoría de los casos, el restablecimiento se puede realizar mediante algunos métodos de restablecimiento predefinidos. Hay muchos otros métodos de reinicio. Pero el problema con esos métodos de reinicio es que se usan para eliminar todo el estilo presente en una página web (eliminar todos los valores predeterminados del navegador para todos los elementos y sus propiedades), pero si queremos eliminar solo el estilo predeterminado o algún estilo específico para un elemento, entonces el valor no se estableceViene muy bien.
Declaración del problema: la mayoría de los casos, los botones predeterminados proporcionados por los navegadores web son muy suaves y no están estilizados. Para hacerlo más estilizado y para que encaje en el tema de la página web, podría estilizarse manualmente usando CSS. Pero los estilos manuales no se pueden aplicar hasta que se eliminen los estilos predeterminados. Por lo tanto, aplicamos el siguiente código para eliminar los estilos predeterminados presentes en un botón.
Ejemplo 1: aquí verá cómo usar la propiedad no establecida por HTML y CSS. Este ejemplo elimina solo el estilo de navegador predeterminado.
html
<!DOCTYPE html>
<html>
<head>
<title>
How to reset/remove CSS
styles for element ?
</title>
<style>
body {
display: grid;
min-height: 100vh;
}
.gfg {
all: unset;
}
.geeks {
color: green;
font-size: 3rem;
}
</style>
</head>
<body>
<center>
<div class="geeks">
<button class="gfg">
GeeksforGeeks
</button>
</div>
<p>
Here the GeeksforGeeks button is
attached with the unset property
</p>
<br>
<button class="GFG">
A Online Computer Secience Portal
</button>
</center>
</body>
</html>
Producción:
Ejemplo 2: aquí verá cómo activar la propiedad no establecida mediante HTML, CSS y jQuery.
html
<!DOCTYPE html>
<html>
<head>
<title>
How to reset/remove CSS
styles for element ?
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<style>
.geeks {
all:unset;
}
div {
color: Green;
font-size: 44px;
}
</style>
</head>
<body>
<center>
<div id="myid">
GeeksforGeeks
</div><br>
<button id="gfg">
Click me to Unset CSS
</button>
<script>
$('#gfg').click(function() {
$('#myid').addClass('geeks');
});
</script>
</center>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Publicación traducida automáticamente
Artículo escrito por DannanaManoj y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA