Facebook Twitter Google Digg Reddit Email Imprimir
Martes 16 de octubre de 2018
Santoral:
Eduvigis
Otros:
Día Mundial de la Alimentación
Día del Profesor
Semana:
42
Día año:
289/365 (79%)
U.F.:
27389.73
IPC:
0,3
Dolar:
683,7
Euro:
791,5
Bitcoin:
U$ 6447.3769322344
mindicador.cl
Time4VPS.EU - VPS hosting in Europe

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

Generado por Sistema y almacenado en cache

Wyzer
Luis Hernán de la Barra
E-Mail:ldelabar@wyzer.cl
Web:www.wyzer.cl