Facebookfacebook Twitter Emailmail Imprimirprint
Martes 19 de marzo de 2024
Santoral:
José
Otros:
Semana:
12
Día año:
79/366 (22%)
U.F.:
Sin información
IPC:
Sin información
Dolar:
Sin información
Euro:
Sin información
Bitcoin:
U$ {bitcoin}
mindicador.cl

Como aplican los atributos CSS

Descubra con que órden se interpretan 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>.

Escrito por: Luis Hernán de la Barra, 27/01/2015
Si tiene interés por alguno de éstos servicios u otro similar, por favor llene el formulario de contacto

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