• Like
CSS 4 - Structure, Specificity, Inheritance & The Cascade
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

CSS 4 - Structure, Specificity, Inheritance & The Cascade

  • 1,717 views
Published

Curso de Estándares Web - Día #5 …

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 / peso

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • Enhorabuena, amigo. Mil gracias!
    Are you sure you want to
    Your message goes here
  • Hola Roque, activé la descarga de la presentación, es un PDF.

    Saludos
    Are you sure you want to
    Your message goes here
  • Hola Harold Maduro, excelente material, gracias. Quisiera poder descarlo para imprimirlo y leerlo mas comodamente. Cómo puedo hacerlo??
    Are you sure you want to
    Your message goes here
  • Hola Paulo, gracias por el fave!
    Are you sure you want to
    Your message goes here
  • Thanks, brussell46 for the fave!
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
1,717
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
29
Comments
5
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide





































































Transcript

  • 1. CSS Structure, Specificity, Inheritance & The Cascade Harold Maduro
  • 2. ¿ 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
  • 3. Specificity Harold Maduro
  • 4. 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
  • 5. Specificity Este puntaje está separado en cuatro grupos de puntos, cada uno separdo por comas. Por ejemplo: 0,0,0,1 Harold Maduro
  • 6. Specificity p { color: red; } Harold Maduro
  • 7. Specificity p { color: red; } div p { color: green; } Harold Maduro
  • 8. Specificity p { color: red; } div p { color: green; } div#content p { color: blue; } Harold Maduro
  • 9. Specificity p { color: red; } 0,0,0,1 div p { color: green; } 0,0,0,2 div#content p { color: blue; } 0,1,0,2 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. Harold Maduro
  • 10. Specificity p { color: red; } 0,0,0,1 div p { color: green; } 0,0,0,2 div#content p { color: blue; } 0,1,0,2 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. Harold Maduro
  • 11. Specificity p { color: red; } 0,0,0,1 div p { color: green; } 0,0,0,2 div#content p { color: blue; } 0,1,0,2 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. Harold Maduro
  • 12. Specificity p { color: red; } 0,0,0,1 div p { color: green } 0,0,0,2 .nota { color: red; } 0,0,1,0 p.alerta { color: red; } 0,0,1,1 #header { color: blue; } 0,1,0,0 div#content p { color: blue; } 0,1,0,2 Harold Maduro
  • 13. Specificity Las reglas agregadas inline, también tienen un valor de specificity; mayor a los otros. <p style=”color: blue;”> Azul azul 1,0,0,0 </p> Harold Maduro
  • 14. Specificity Lo 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
  • 15. Specificity Para 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
  • 16. Importance Harold Maduro
  • 17. Reglas Importantes !important 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 quot;important rulesquot; 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. Harold Maduro
  • 18. Reglas Importantes !important p.alerta { color: red !important; background: white; } Harold Maduro
  • 19. Reglas Importantes !important p.alerta { color: red !important; background: white; } !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
  • 20. Reglas Importantes !important 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. Harold Maduro
  • 21. Reglas Importantes p.alerta { color: red !important; <p class=”alerta”> } ¡Soy una alerta! p { color: blue; } </p> .alerta { color: yellow; } html body .alerta { color: silver; } Harold Maduro
  • 22. Reglas Importantes !important Las reglas importantes, sin importar dónde fueron agregadas, tienen un peso mayor que los estilos aplicados inline en el HTML. Harold Maduro
  • 23. Universal selector p.alerta { <p class=”alerta” style=”color: blue;”> color: red !important; ¡Soy una alerta! } </p> Harold Maduro
  • 24. Reglas Importantes !important 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). Harold Maduro
  • 25. Inheritance Harold Maduro
  • 26. Inheritance Los 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
  • 27. 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
  • 28. Inheritance <p> ¡Soy una alerta! p { color: red; } <em>WAO</em> Atender rápido. </p> Harold Maduro
  • 29. Inheritance Las propiedades nunca son propagadas hacia arriba; un elemento nunca le pasa sus propiedades a sus ancestros. Harold Maduro
  • 30. Inheritance Algunas propiedades no son heredadas. Ejemplo de ellas son border, margin, padding, background. Harold Maduro
  • 31. Inheritance La 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
  • 32. The Cascade Harold Maduro
  • 33. The Cascade CSS 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
  • 34. 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
  • 35. 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
  • 36. 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
  • 37. 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
  • 38. 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
  • 39. Ordenado por Peso y Origen En 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
  • 40. 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
  • 41. 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
  • 42. 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
  • 43. Bibliografía CSS: The Definitive Guide Eric Meyer Amazon: http://tinyurl.com/5hs7jf Harold Maduro
  • 44. Bibliografía CSS 2.1 Specification World Wide Web Consortium http://www.w3.org/TR/CSS21/