css 4 - structure, specificity, inheritance & the cascade
DESCRIPTION
Curso de Estándares Web - Día #5 Elementos que se toman en cuenta al momento de aplicar una regla a un elemento: * specificity * herencia * importancia * origen / pesoTRANSCRIPT
![Page 1: CSS 4 - Structure, Specificity, Inheritance & The Cascade](https://reader034.vdocuments.site/reader034/viewer/2022051514/54945f42b47959794d8b4acd/html5/thumbnails/1.jpg)
CSSStructure, Specificity, Inheritance & The Cascade
Harold MaduroHarold Maduro
![Page 2: CSS 4 - Structure, Specificity, Inheritance & The Cascade](https://reader034.vdocuments.site/reader034/viewer/2022051514/54945f42b47959794d8b4acd/html5/thumbnails/2.jpg)
¿ Structure ?Para aplicar propiedades a cualquier elemento HTML en el documento, se toma en cuenta la inter relación entre estos mecanismos:
• specificity
• herencia
• importancia
• origen / peso
Harold Maduro
![Page 3: CSS 4 - Structure, Specificity, Inheritance & The Cascade](https://reader034.vdocuments.site/reader034/viewer/2022051514/54945f42b47959794d8b4acd/html5/thumbnails/3.jpg)
Specificity
Harold Maduro
![Page 4: CSS 4 - Structure, Specificity, Inheritance & The Cascade](https://reader034.vdocuments.site/reader034/viewer/2022051514/54945f42b47959794d8b4acd/html5/thumbnails/4.jpg)
Specificity
Para cada regla, el browser (user agent) evalúa el specificity del selector y le asigna un puntaje a cada selector en la regla.
Harold Maduro
![Page 5: CSS 4 - Structure, Specificity, Inheritance & The Cascade](https://reader034.vdocuments.site/reader034/viewer/2022051514/54945f42b47959794d8b4acd/html5/thumbnails/5.jpg)
Specificity
Este puntaje está separado en cuatro grupos de puntos, cada uno separdo por comas. Por ejemplo: 0,0,0,1
Harold Maduro
![Page 6: CSS 4 - Structure, Specificity, Inheritance & The Cascade](https://reader034.vdocuments.site/reader034/viewer/2022051514/54945f42b47959794d8b4acd/html5/thumbnails/6.jpg)
Specificity
p { color: red; }
Harold Maduro
![Page 7: CSS 4 - Structure, Specificity, Inheritance & The Cascade](https://reader034.vdocuments.site/reader034/viewer/2022051514/54945f42b47959794d8b4acd/html5/thumbnails/7.jpg)
Specificity
p { color: red; }
div p { color: green; }
Harold Maduro
![Page 8: CSS 4 - Structure, Specificity, Inheritance & The Cascade](https://reader034.vdocuments.site/reader034/viewer/2022051514/54945f42b47959794d8b4acd/html5/thumbnails/8.jpg)
Specificity
p { color: red; }
div p { color: green; }
div#content p { color: blue; }
Harold Maduro
![Page 9: CSS 4 - Structure, Specificity, Inheritance & The Cascade](https://reader034.vdocuments.site/reader034/viewer/2022051514/54945f42b47959794d8b4acd/html5/thumbnails/9.jpg)
Specificity
Dependiendo de los detalles del selector, cuántos elementos de HTML mencione, o si tiene IDs o Classes presente; se le van asignando puntos a cada grupo.
p { color: red; }
div p { color: green; }
div#content p { color: blue; }
0,0,0,1
0,0,0,2
0,1,0,2
Harold Maduro
![Page 10: CSS 4 - Structure, Specificity, Inheritance & The Cascade](https://reader034.vdocuments.site/reader034/viewer/2022051514/54945f42b47959794d8b4acd/html5/thumbnails/10.jpg)
Specificity
Luego, se gana la regla que tenga un mayor número en el grupo que esté más hacia la izquierda, en esta ocasión, la última regla.
p { color: red; }
div p { color: green; }
div#content p { color: blue; }
0,0,0,1
0,0,0,2
0,1,0,2
Harold Maduro
![Page 11: CSS 4 - Structure, Specificity, Inheritance & The Cascade](https://reader034.vdocuments.site/reader034/viewer/2022051514/54945f42b47959794d8b4acd/html5/thumbnails/11.jpg)
Specificity
Luego, gana la regla que tenga un mayor puntaje en el grupo de números que está más hacia la izquierda; en esta ocasión, la última regla.
p { color: red; }
div p { color: green; }
div#content p { color: blue; }
0,0,0,1
0,0,0,2
0,1,0,2
Harold Maduro
![Page 12: CSS 4 - Structure, Specificity, Inheritance & The Cascade](https://reader034.vdocuments.site/reader034/viewer/2022051514/54945f42b47959794d8b4acd/html5/thumbnails/12.jpg)
Specificity
p { color: red; }
div p { color: green }
.nota { color: red; }
p.alerta { color: red; }
#header { color: blue; }
div#content p { color: blue; }
0,0,0,1
0,0,0,2
0,0,1,0
0,0,1,1
0,1,0,0
0,1,0,2
Harold Maduro
![Page 13: CSS 4 - Structure, Specificity, Inheritance & The Cascade](https://reader034.vdocuments.site/reader034/viewer/2022051514/54945f42b47959794d8b4acd/html5/thumbnails/13.jpg)
Specificity
<p style=”color: blue;”>
Azul azul
</p>
1,0,0,0
Las reglas agregadas inline, también tienen un valor de specificity; mayor a los otros.
Harold Maduro
![Page 14: CSS 4 - Structure, Specificity, Inheritance & The Cascade](https://reader034.vdocuments.site/reader034/viewer/2022051514/54945f42b47959794d8b4acd/html5/thumbnails/14.jpg)
SpecificityLo importante que debemos recordar es:
• Los estilos aplicados inline (dentro del mismo tag de HTML) tienen el mayor puntaje y son tomados en cuenta por encima de cualquier otra regla.
• Cada uno de los items que se especifiquen en el selector, van sumando puntos. Dependiendo del tipo de item, tendrá un puntaje distinto.
• Los IDs tienen un puntaje mayor a todos los otros elementos.
• Los classes tienen puntaje menor a los IDs, pero mayor al resto de los elementos.
• Cada elemento de HTML (P, UL) y pseudo elemento (:hover) que se agregue, suma un puntaje. Aunque sean muchos elementos HTML agregados en la regla, la suma del puntaje de los mismos es siempre menor al puntaje que tengan los IDs o Classes.
• El Universal selector no gana puntaje, tiene puntaje de cero.
Harold Maduro
![Page 15: CSS 4 - Structure, Specificity, Inheritance & The Cascade](https://reader034.vdocuments.site/reader034/viewer/2022051514/54945f42b47959794d8b4acd/html5/thumbnails/15.jpg)
SpecificityPara conocer más al respecto, vea las páginas 60 y 61 del libro:
Cascading Style Sheets, The Definitive Guide
de Eric Meyer.
O visite el CSS 2.1 Spec:
http://www.w3.org/TR/CSS21/cascade.html#specificity
Harold Maduro
![Page 16: CSS 4 - Structure, Specificity, Inheritance & The Cascade](https://reader034.vdocuments.site/reader034/viewer/2022051514/54945f42b47959794d8b4acd/html5/thumbnails/16.jpg)
Importance
Harold Maduro
![Page 17: CSS 4 - Structure, Specificity, Inheritance & The Cascade](https://reader034.vdocuments.site/reader034/viewer/2022051514/54945f42b47959794d8b4acd/html5/thumbnails/17.jpg)
Reglas Importantes
Hay casos en que la regla es tan importante que debe invalidar o sopesar todas las otras reglas; sin importar su specificity.
Estas reglas son llamadas "important rules" y pueden ser marcadas con la frase !important antes de terminar la regla con el punto y coma.
Estas reglas van a tomar precedencia sobre cualquier otra regla para el mismo elemento.
!important
Harold Maduro
![Page 18: CSS 4 - Structure, Specificity, Inheritance & The Cascade](https://reader034.vdocuments.site/reader034/viewer/2022051514/54945f42b47959794d8b4acd/html5/thumbnails/18.jpg)
Reglas Importantes
p.alerta {
color: red !important;
background: white;
}
!important
Harold Maduro
![Page 19: CSS 4 - Structure, Specificity, Inheritance & The Cascade](https://reader034.vdocuments.site/reader034/viewer/2022051514/54945f42b47959794d8b4acd/html5/thumbnails/19.jpg)
Reglas Importantes
p.alerta {
color: red !important;
background: white;
}
!important
!important siempre va al final de la regla, antes del punto y coma.
Si se coloca mal, la regla queda invalida y no se toma en cuenta (no se aplica ninguna de las propiedades que se detallaron)
Harold Maduro
![Page 20: CSS 4 - Structure, Specificity, Inheritance & The Cascade](https://reader034.vdocuments.site/reader034/viewer/2022051514/54945f42b47959794d8b4acd/html5/thumbnails/20.jpg)
Reglas Importantes
En los casos en que exista un conflicto entre reglas que no tengan la etiqueta de importantes y reglas importantes, siempre va a ganar la regla marcada como importante.
!important
Harold Maduro
![Page 21: CSS 4 - Structure, Specificity, Inheritance & The Cascade](https://reader034.vdocuments.site/reader034/viewer/2022051514/54945f42b47959794d8b4acd/html5/thumbnails/21.jpg)
Reglas Importantes
p.alerta {
color: red !important;
}
p { color: blue; }
.alerta { color: yellow; }
html body .alerta { color: silver; }
<p class=”alerta”>
¡Soy una alerta!
</p>
Harold Maduro
![Page 22: CSS 4 - Structure, Specificity, Inheritance & The Cascade](https://reader034.vdocuments.site/reader034/viewer/2022051514/54945f42b47959794d8b4acd/html5/thumbnails/22.jpg)
Reglas Importantes
Las reglas importantes, sin importar dónde fueron agregadas, tienen un peso mayor que los estilos aplicados inline en el HTML.
!important
Harold Maduro
![Page 23: CSS 4 - Structure, Specificity, Inheritance & The Cascade](https://reader034.vdocuments.site/reader034/viewer/2022051514/54945f42b47959794d8b4acd/html5/thumbnails/23.jpg)
Universal selector
p.alerta {
color: red !important;
}
<p class=”alerta” style=”color: blue;”>
¡Soy una alerta!
</p>
Harold Maduro
![Page 24: CSS 4 - Structure, Specificity, Inheritance & The Cascade](https://reader034.vdocuments.site/reader034/viewer/2022051514/54945f42b47959794d8b4acd/html5/thumbnails/24.jpg)
Reglas Importantes
En el caso de que un usuario utilice un !important rule en su user style sheet; esta regla toma precedencia sobre los author style sheets.
Esto permite a usuarios con necesidades especiales utilizar el web correctamente (daltónicos, personas con vista reducida, etc).
!important
Harold Maduro
![Page 25: CSS 4 - Structure, Specificity, Inheritance & The Cascade](https://reader034.vdocuments.site/reader034/viewer/2022051514/54945f42b47959794d8b4acd/html5/thumbnails/25.jpg)
Inheritance
Harold Maduro
![Page 26: CSS 4 - Structure, Specificity, Inheritance & The Cascade](https://reader034.vdocuments.site/reader034/viewer/2022051514/54945f42b47959794d8b4acd/html5/thumbnails/26.jpg)
InheritanceLos documentos HTML en realidad siguen una estructura de árbol, con ancestros, descendientes, padres e hijos; muy parecido a un árbol genealógico.
En una familia de seres humanos, muchas cualidades son pasadas hacia los descendientes desde sus ancestros.
En el document tree, algunas propiedades de CSS son pasadas hacia abajo; desde los elementos ancestros, hacia sus descendientes. Esto se llama herencia o inheritance.
Harold Maduro
![Page 27: CSS 4 - Structure, Specificity, Inheritance & The Cascade](https://reader034.vdocuments.site/reader034/viewer/2022051514/54945f42b47959794d8b4acd/html5/thumbnails/27.jpg)
Inheritance
La herencia fue creada para no tener que especificar reglas de CSS para cada uno de los niveles de elementos en el document tree.
Por ejemplo, al aplicarle un color al texto de un UL, automáticamente se le aplica a todos los textos de los LIs que son descendientes de dicho UL.
Harold Maduro
![Page 28: CSS 4 - Structure, Specificity, Inheritance & The Cascade](https://reader034.vdocuments.site/reader034/viewer/2022051514/54945f42b47959794d8b4acd/html5/thumbnails/28.jpg)
Inheritance
p { color: red; }
<p>
¡Soy una alerta!
<em>WAO</em>
Atender rápido.
</p>
Harold Maduro
![Page 29: CSS 4 - Structure, Specificity, Inheritance & The Cascade](https://reader034.vdocuments.site/reader034/viewer/2022051514/54945f42b47959794d8b4acd/html5/thumbnails/29.jpg)
Inheritance
Las propiedades nunca son propagadas hacia arriba; un elemento nunca le pasa sus propiedades a sus ancestros.
Harold Maduro
![Page 30: CSS 4 - Structure, Specificity, Inheritance & The Cascade](https://reader034.vdocuments.site/reader034/viewer/2022051514/54945f42b47959794d8b4acd/html5/thumbnails/30.jpg)
Inheritance
Algunas propiedades no son heredadas.
Ejemplo de ellas son border, margin, padding, background.
Harold Maduro
![Page 31: CSS 4 - Structure, Specificity, Inheritance & The Cascade](https://reader034.vdocuments.site/reader034/viewer/2022051514/54945f42b47959794d8b4acd/html5/thumbnails/31.jpg)
InheritanceLa herencia no tiene ningún tipo de valor de specificity.
Esto significa, que si un elemento hereda una propiedad de su ancestro; y existe una regla que de alguna forma u otra modifica el comportamiento de este elemento; se aplica la nueva regla (no la heredada).
Esto incluye las reglas que trae el browser por default, como el color azul de los links, por ejemplo.
Harold Maduro
![Page 32: CSS 4 - Structure, Specificity, Inheritance & The Cascade](https://reader034.vdocuments.site/reader034/viewer/2022051514/54945f42b47959794d8b4acd/html5/thumbnails/32.jpg)
The Cascade
Harold Maduro
![Page 33: CSS 4 - Structure, Specificity, Inheritance & The Cascade](https://reader034.vdocuments.site/reader034/viewer/2022051514/54945f42b47959794d8b4acd/html5/thumbnails/33.jpg)
The CascadeCSS contiene una serie de reglas que permite al browser resolver conflictos cuando dos o más reglas son aplicadas al mismo elemento de HTML.
El browser debe considerar la herencia, el specificity y el origen de las declaraciones.
Este proceso de comparación es el que se denominada la cascada.
Harold Maduro
![Page 34: CSS 4 - Structure, Specificity, Inheritance & The Cascade](https://reader034.vdocuments.site/reader034/viewer/2022051514/54945f42b47959794d8b4acd/html5/thumbnails/34.jpg)
The Cascade
Las reglas se ordenan tomando en cuenta estos tres métodos para seleccionar cuál es la regla que se debe aplicar:
• Ordenado por peso y origen
• Ordenado por specificity
• Ordenado por orden de aparición en el style sheet
Harold Maduro
![Page 35: CSS 4 - Structure, Specificity, Inheritance & The Cascade](https://reader034.vdocuments.site/reader034/viewer/2022051514/54945f42b47959794d8b4acd/html5/thumbnails/35.jpg)
Ordenado por Peso y Origen
Cascading significa que los estilos pueden caer (como en una cascada) de un style sheet (hoja de estilo) a otra.
Esto permite utilizar varias hojas de estilo en conjunto para aplicarle estilos a un documento.
Harold Maduro
![Page 36: CSS 4 - Structure, Specificity, Inheritance & The Cascade](https://reader034.vdocuments.site/reader034/viewer/2022051514/54945f42b47959794d8b4acd/html5/thumbnails/36.jpg)
Ordenado por Peso y Origen
Si dos reglas se aplican a un mismo elemento; se escoge primero la regla que esté marcada como !important
Harold Maduro
![Page 37: CSS 4 - Structure, Specificity, Inheritance & The Cascade](https://reader034.vdocuments.site/reader034/viewer/2022051514/54945f42b47959794d8b4acd/html5/thumbnails/37.jpg)
Ordenado por Peso y Origen
Luego, se toma en cuenta el origen de la regla; ya sea el default browser style sheet, el user style sheet o el author style sheet.
author stylesheets > user style sheets > browser stylesheets
Harold Maduro
![Page 38: CSS 4 - Structure, Specificity, Inheritance & The Cascade](https://reader034.vdocuments.site/reader034/viewer/2022051514/54945f42b47959794d8b4acd/html5/thumbnails/38.jpg)
Ordenado por Peso y Origen
Si hay dos reglas que están en conflicto, una en el user style sheet y otra en el author style sheet; y ambas están marcadas como !important; entonces gana la regla del user style sheet.
Recuerden que esto le permite al usuario que tiene discapacidad tener los estilos que le permitan navegar el web apropiadamente.
Harold Maduro
![Page 39: CSS 4 - Structure, Specificity, Inheritance & The Cascade](https://reader034.vdocuments.site/reader034/viewer/2022051514/54945f42b47959794d8b4acd/html5/thumbnails/39.jpg)
Ordenado por Peso y OrigenEn cuanto al peso de la declaración, existen estos 5 niveles de importancia; desde el más importante hacia el menor:
1. User !important declarations
2. Author !important declarations
3. Author normal declarations
4. User normal declarations
5. Browser default style sheets declarations
Cualquier declaración que se haga va a tomar precedencia sobre el punto #5.
Harold Maduro
![Page 40: CSS 4 - Structure, Specificity, Inheritance & The Cascade](https://reader034.vdocuments.site/reader034/viewer/2022051514/54945f42b47959794d8b4acd/html5/thumbnails/40.jpg)
Ordenado por Specificity
Si hay un conflicto de varias reglas que apuntan al mismo elemento de HTML y todas tienen el mismo peso; entonces deben ser ordenadas por specificity, ganando la regla más específica según las especificaciones que ya vimos.
Harold Maduro
![Page 41: CSS 4 - Structure, Specificity, Inheritance & The Cascade](https://reader034.vdocuments.site/reader034/viewer/2022051514/54945f42b47959794d8b4acd/html5/thumbnails/41.jpg)
Ordenado por Orden de Aparición
Si dos reglas que están en conflicto tienen el mismo peso, origen y specificity; gana la que está más abajo en la hoja de estilos.
Harold Maduro
![Page 42: CSS 4 - Structure, Specificity, Inheritance & The Cascade](https://reader034.vdocuments.site/reader034/viewer/2022051514/54945f42b47959794d8b4acd/html5/thumbnails/42.jpg)
Ordenado por Orden de Aparición
h1 { color: red; }
h1 { color: blue; }
Como la segunda regla viene después o más adelante en la hoja de estilos; es la que gana y hace que los textos queden de color azul.
Harold Maduro
![Page 43: CSS 4 - Structure, Specificity, Inheritance & The Cascade](https://reader034.vdocuments.site/reader034/viewer/2022051514/54945f42b47959794d8b4acd/html5/thumbnails/43.jpg)
Bibliografía
CSS: The Definitive Guide
Amazon: http://tinyurl.com/5hs7jf
Eric Meyer
Harold Maduro
![Page 44: CSS 4 - Structure, Specificity, Inheritance & The Cascade](https://reader034.vdocuments.site/reader034/viewer/2022051514/54945f42b47959794d8b4acd/html5/thumbnails/44.jpg)
Bibliografía
CSS 2.1 SpecificationWorld Wide Web Consortium
http://www.w3.org/TR/CSS21/