En este artículo, conoceremos el orden de precedencia de los atributos de estilo en HTML. El tipo de estilo que se considera más importante que el otro se conoce como precedencia de estilo. El orden de precedencia del atributo de estilo maneja su salida web. Básicamente, se ejecuta de arriba a abajo en HTML, pero la regla de estilo más cercana a la etiqueta o al elemento se ejecuta finalmente .
Sintaxis:
<tag style="property:value;">
Orden de precedencia:
- Estilos en línea
- Estilos internos (incrustados)
- Estilos externos
Nota: El orden de precedencia de los estilos en línea es mayor que los atributos de estilo internos y externos, lo que significa que el orden de precedencia disminuye de arriba hacia abajo.
Ejemplo 1: Pongamos un código CSS y HTML como ejemplo.
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">
<!-- Title of the site -->
<title>Precedence of style in HTML</title>
<!-- linking the css file (external style attributes)-->
<link href="main.css" type="text/css" rel="stylesheet" />
<!-- below is internal style attributes -->
<style type="text/css">
p {
background-color: yellow;
font-size: x-large;
}
</style>
</head>
<body>
<h1>Welcome to GFG learning</h1>
<!-- we are using style at p tag -->
<p style="background-color: lightgreen;">
<b> Welcome to geeksforgeeks </b></p>
<p><b> Data structure & algorithm</b></p>
<p><b> Web development</b></p>
<p><b> Competitive programming</b></p>
</body>
</html>
main.css: Declaramos un atributo de estilo externo en el siguiente archivo CSS.
principal.css
p{
background-color: cyan;
}Publicación traducida automáticamente
Artículo escrito por GeeksforGeeks y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA