Día del idioma español
Como aplican los atributos CSS
Introducción
En ocaciones luchamos por aplicar atributos mediante CSS que finalmente no aplican como esperamos. Ésto ocurre por que existen ciertas reglas que priorizan el uso de un atributo frente a otro, las que analizaremos a continuación
Descripción
Las propiedades CSS en general se aplican en el órden en que son definidas, pero aquellos atributos definidos sobre un elemento (como <p>), sobre una clase o sobre un identificador (como #encabezado) tienen prioridades diferentes por lo que unos tienen preferencia sobre otros.
Pasemos a analizar cada uno de los niveles y el órden en que se aplican, con ello si se encuentra un atributo en un nivel superior, sobreescribe los definidos con anterioridad:
Elementos
Los primeros atributos en aplicar corresponden a los elementos base de HTML, como:
body { font-family: sans-serif; }
p { color: blue; }
Clase
En segundo lugar se aplican los atributos sobre clase:
.centrado { text-align: center; }
.rojo { color: red; }
ID
En el siguiente nivel se aplican los atributos sobre los id:
#marco1 { border: blue solid 2px; }
#mibox {
color: yellow;
background-color: black;
width: 200px;
height: 32px;
}
Atributo style
En éste nivel se aplican los atributos especificados directamente sobre el elemento por medio del atributo style directamente en HTML y los asignados mediante javascript para el elemento:
<p style="color: #ffaa33;">Aplicando color para el párrafo</p>
Modificador !important
Por medio del modificador !important al definir una propiedad css, se aumenta su prioridad, logrando que aplique dicho atributo por sobre los otros.
.rojo { color: red !important; }
Ejemplo
Tomaremos el siguiente ejemplo y veremos cómo se despliega
<style>
.rojo { color: red !important; }
#mibox {
color: yellow;
background-color: black;
width: 200px;
height: 32px;
}
#mibox p {
padding: 6px;
}
</style>
<div id="mibox">
<p class="rojo" style="background-color: #aaa;>
Texto de ejemplo
</p>
</div>
Texto de ejemplo
Podemos ver que con la clase ".rojo" se sobreescribe el color "yellow" dado en #mibox, así mismo el fondo es cambiado a gris por el style definido en el elemento <div>.
Generado por Sistema y almacenado en cache
Wyzer Luis Hernán de la Barra |
|
Teléfono: | +56995451689 |
WhatsApp: | +56995451689 |
E-Mail: | info@wyzer.cl |
Web: | www.wyzer.cl |