CSS <ul><li>Selectors: detalles finales </li></ul><ul><li>The Cascade </li></ul><ul><li>Multiple style sheets </li></ul>Ha...
Selectors: detalles finales
¿ IDs o Classes ? <ul><li>¿La regla se utiliza repetidas veces dentro del documento? </li></ul><ul><li>Los Classes se pued...
Combinando classes <ul><li>Se pueden utilizar múltiples classes para aplicarle estilo nuevo a un elemento HTML; pero sólo ...
Combinando classes .nota.alerta { color: red; } <p class=”nota alerta”> ATENCION </p>
IDs tienen mayor specificity que las classes <ul><li>Hay muchas ocasiones en que dos declaraciones entran en conflicto ent...
IDs tienen mayor specificity que las classes <ul><li>p.robot { font-weight: bold; } </li></ul><ul><li>p#mazinger { font-we...
The Cascade First look
 
Cascade <ul><li>Hasta el documento HTML más sencillo pueden tener tres o más hojas de estilos: </li></ul><ul><li>La hoja d...
Cascade <ul><li>El orden en que se van cargando las hojas de estilo y cómo van tomando precedencia las reglas especificada...
Browser Style Sheets <ul><li>Todos los browsers le aplican una hoja de estilo predeterminada a las páginas web.  </li></ul...
User Style Sheets <ul><li>Los browsers permiten a los usuarios crear sus propias hojas de estilo.  </li></ul><ul><li>Estas...
User Style Sheets <ul><li>Entre las hojas de estilo de usuario y las del autor (las que creamos nosotros), toman precedenc...
User Style Sheets <ul><li>Tomen en cuenta que el usuario puede especificar en su hoja de estilo un color de texto y backgr...
User Style Sheets <ul><li>En el caso de que un usuario utilice un !important rule en su user style sheet; esta regla toma ...
Author Style Sheets <ul><li>El autor es la persona que desarrolla sitios web - ¡Nosotros! </li></ul><ul><li>Son los estilo...
Author Style Sheets <ul><li>author style sheets > user style sheets > browser style sheets </li></ul>
Múltiples author style sheets
Múltiples author style sheets <ul><li>Como han visto en varios proyectos, podemos crear diferentes archivos de CSS para un...
Múltiples author style sheets <ul><li>Esto nos sirve en estos casos: </li></ul><ul><li>Uno para pantalla, otro para print,...
Múltiples author style sheets <ul><li>Podemos darle el uso que más nos convenga; estamos sólo limitados por nuestra propia...
Bibliografía CSS: The Definitive Guide Amazon:  http://tinyurl.com/5hs7jf Eric Meyer
Upcoming SlideShare
Loading in...5
×

CSS 3 Selectors - Detalles Finales

1,214

Published on

Curso de Estándares Web - Día #4

Escogiendo entre usar IDs o Classes
Combinando Classes
The Cascade
Multiple style sheets

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,214
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
26
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

CSS 3 Selectors - Detalles Finales

  1. 1. CSS <ul><li>Selectors: detalles finales </li></ul><ul><li>The Cascade </li></ul><ul><li>Multiple style sheets </li></ul>Harold Maduro
  2. 2. Selectors: detalles finales
  3. 3. ¿ IDs o Classes ? <ul><li>¿La regla se utiliza repetidas veces dentro del documento? </li></ul><ul><li>Los Classes se pueden utilizar tantas veces querramos dentro de un documento </li></ul><ul><li>Los IDs sólo se pueden utilizar una sóla vez dentro del documento </li></ul>
  4. 4. Combinando classes <ul><li>Se pueden utilizar múltiples classes para aplicarle estilo nuevo a un elemento HTML; pero sólo se puede utilizar un sólo ID para aplicarle estilo a un elemento. </li></ul><ul><li>No le podemos asignar más de un ID a un mismo elemento </li></ul>
  5. 5. Combinando classes .nota.alerta { color: red; } <p class=”nota alerta”> ATENCION </p>
  6. 6. IDs tienen mayor specificity que las classes <ul><li>Hay muchas ocasiones en que dos declaraciones entran en conflicto entre ellas. Estos conflictos se resuelven con las reglas de la cascada que veremos más adelante. </li></ul><ul><li>Adelantando un poco, si hay una regla aplicada por una clase y otra aplicada por un ID; y ambas están apuntando al mismo elemento HTML, va a ganar la regla que utiliza el ID. </li></ul>
  7. 7. IDs tienen mayor specificity que las classes <ul><li>p.robot { font-weight: bold; } </li></ul><ul><li>p#mazinger { font-weight: bolder; } </li></ul>En este ejemplo, ganaría la segunda regla.
  8. 8. The Cascade First look
  9. 10. Cascade <ul><li>Hasta el documento HTML más sencillo pueden tener tres o más hojas de estilos: </li></ul><ul><li>La hoja de estilo predeterminada del browser </li></ul><ul><li>Una hoja de estilo establecida por el usuario en su browser </li></ul><ul><li>La hoja de estilo del sitio web creada por el autor </li></ul>
  10. 11. Cascade <ul><li>El orden en que se van cargando las hojas de estilo y cómo van tomando precedencia las reglas especificadas por los creadores del browser, el usuario, y finalmente, el autor de la página web, se llama Cascada. </li></ul>
  11. 12. Browser Style Sheets <ul><li>Todos los browsers le aplican una hoja de estilo predeterminada a las páginas web. </li></ul><ul><li>Estas hojas pueden ser diferentes dependiendo del browser; pero en general todos le asignan el color negro al texto de la página, y color azul a los enlaces. </li></ul><ul><li>Se les conoce como default browser style sheets. </li></ul>
  12. 13. User Style Sheets <ul><li>Los browsers permiten a los usuarios crear sus propias hojas de estilo. </li></ul><ul><li>Estas hojas de estilo van a tomar precedencia sobre las hojas de estilo default del browser sólamente para el usuario que utiliza la computadora (no afecta a otros usuarios). </li></ul>Un usuario o user es cualquier persona que vea o visite tu sitio web.
  13. 14. User Style Sheets <ul><li>Entre las hojas de estilo de usuario y las del autor (las que creamos nosotros), toman precedencia las del autor. </li></ul>
  14. 15. User Style Sheets <ul><li>Tomen en cuenta que el usuario puede especificar en su hoja de estilo un color de texto y background para los elementos HTML y BODY. </li></ul><ul><li>Si nosotros no especificamos en nuestro CSS color y background para esos elementos, el browser toma los especificados por el usuario y podemos acabar con una página muy fea, o poco usable (letras blancas sobre fondo blanco). </li></ul>
  15. 16. User Style Sheets <ul><li>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. </li></ul><ul><li>Esto permite a usuarios con necesidades especiales utilizar el web correctamente (daltónicos, personas con visión reducida, etc) sin que las reglas que ellos especifiquen sean desechadas por los estilos que especifican los diseñadores web (authors). </li></ul>
  16. 17. Author Style Sheets <ul><li>El autor es la persona que desarrolla sitios web - ¡Nosotros! </li></ul><ul><li>Son los estilos más importantes y toman precedencia sobre los otros tipos de style sheets. </li></ul>
  17. 18. Author Style Sheets <ul><li>author style sheets > user style sheets > browser style sheets </li></ul>
  18. 19. Múltiples author style sheets
  19. 20. Múltiples author style sheets <ul><li>Como han visto en varios proyectos, podemos crear diferentes archivos de CSS para un mismo sitio web. </li></ul>
  20. 21. Múltiples author style sheets <ul><li>Esto nos sirve en estos casos: </li></ul><ul><li>Uno para pantalla, otro para print, otro para celulares, etc. </li></ul><ul><li>Nos permite separar el diagramado de la página (columnas, layout) en un archivo, y las reglas de tipografía y color en otro(s). </li></ul><ul><li>Nos permite crear diferentes archivos CSS para distintas secciones del sitio (Home, Acerca, Productos, etc). </li></ul><ul><li>Nos permite utilizar frameworks para crear el diagramado de la página en un archivo, y las reglas especiales para aplicar el diseño del cliente (theme), en otro archivo. </li></ul>
  21. 22. Múltiples author style sheets <ul><li>Podemos darle el uso que más nos convenga; estamos sólo limitados por nuestra propia creatividad al momento de resolver problemas. </li></ul>
  22. 23. Bibliografía CSS: The Definitive Guide Amazon: http://tinyurl.com/5hs7jf Eric Meyer
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×