En este artículo, vamos a aprender cómo podemos anular los estilos en línea con CSS externo . En general, usamos CSS en línea para anular todos los demás estilos. En algunas circunstancias, tenemos que hacer lo contrario. Tenemos que anular el CSS en línea que proviene de fuentes extranjeras y no se puede eliminar.
Enfoque: para anular el CSS en línea, se usa la palabra clave !important . Esto hace que la propiedad CSS preceda a todas las demás propiedades CSS para ese elemento.
Palabra clave utilizada:
- !importante: esta palabra clave se puede usar con una propiedad CSS en CSS en línea, interno o externo . Esto especifica que la propiedad con la que se usa tendrá la prioridad más alta para ese elemento.
El siguiente ejemplo demuestra el enfoque anterior.
Ejemplo 1: El siguiente código demuestra cómo el CSS externo cambia el color del encabezado usando la palabra clave !important .
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title> How to override inline styles with external CSS </title> </head> <body> <h1 style="color:green; margin:2rem;"> GeeksforGeeks </h1> <h3 style="margin:2.2rem;margin-top:-2rem;"> How can I override inline styles with external CSS </h3> <div style="border: 10px solid red; width: 10rem; height: 10rem; margin: 2rem; align-content: center; display: flex;justify-content: center;"> GeeksforGeeks </div> </body> </html>
style.css: este es el CSS externo utilizado en el código HTML anterior.
CSS
h3 {
color: brown !important;
}
div {
border-color: green !important;
width: 20rem !important;
}
Producción:
Ejemplo 2: el siguiente código demuestra cómo podemos anular la visualización , el ancho y la altura de los elementos div proporcionados en el CSS en línea con el CSS externo.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style1.css"> <title> How to override inline styles with external CSS </title> </head> <body> <h1 style="color:green;margin:2rem;"> GeeksforGeeks </h1> <h3 style="margin:2.2rem;margin-top:-2rem;"> How can I override inline styles with external CSS </h3> <div class="container" style="display:block"> <div style="border:10px solid red; width:10rem; height:10rem; margin:2rem; align-content:center; display:flex; justify-content:center;"> GeeksforGeeks </div> <div style="border:10px solid red; width:10rem; height:10rem; margin:2rem; align-content:center; display:flex; justify-content:center;"> GeeksforGeeks </div> </div> </body> </html>
style1.css: este es el CSS externo utilizado en el código HTML anterior.
CSS
/* Write CSS Here */
h3 {
color: brown !important;
}
.container {
display: flex !important;
}
div {
font-family: 'Lucida Sans', 'Lucida Sans Regular',
'Lucida Grande', 'Lucida Sans Unicode',
Geneva, Verdana, sans-serif;
border-color: green !important;
width: 18rem !important;
height: 7rem !important;
}
Producción:
Publicación traducida automáticamente
Artículo escrito por priyanshuchatterjee01 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA