Your SlideShare is downloading. ×
  • Like
CSS 3 Selectors - Detalles Finales
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

CSS 3 Selectors - Detalles Finales

  • 1,153 views
Published

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

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

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

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

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

Actions

Shares
Downloads
26
Comments
0
Likes
0

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
    • Selectors: detalles finales
    • The Cascade
    • Multiple style sheets
    Harold Maduro
  • 2. Selectors: detalles finales
  • 3. ¿ IDs o Classes ?
    • ¿La regla se utiliza repetidas veces dentro del documento?
    • Los Classes se pueden utilizar tantas veces querramos dentro de un documento
    • Los IDs sólo se pueden utilizar una sóla vez dentro del documento
  • 4. Combinando classes
    • 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.
    • No le podemos asignar más de un ID a un mismo elemento
  • 5. Combinando classes .nota.alerta { color: red; } <p class=”nota alerta”> ATENCION </p>
  • 6. IDs tienen mayor specificity que las classes
    • 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.
    • 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.
  • 7. IDs tienen mayor specificity que las classes
    • p.robot { font-weight: bold; }
    • p#mazinger { font-weight: bolder; }
    En este ejemplo, ganaría la segunda regla.
  • 8. The Cascade First look
  • 9.  
  • 10. Cascade
    • Hasta el documento HTML más sencillo pueden tener tres o más hojas de estilos:
    • La hoja de estilo predeterminada del browser
    • Una hoja de estilo establecida por el usuario en su browser
    • La hoja de estilo del sitio web creada por el autor
  • 11. Cascade
    • 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.
  • 12. Browser Style Sheets
    • Todos los browsers le aplican una hoja de estilo predeterminada a las páginas web.
    • 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.
    • Se les conoce como default browser style sheets.
  • 13. User Style Sheets
    • Los browsers permiten a los usuarios crear sus propias hojas de estilo.
    • 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).
    Un usuario o user es cualquier persona que vea o visite tu sitio web.
  • 14. User Style Sheets
    • Entre las hojas de estilo de usuario y las del autor (las que creamos nosotros), toman precedencia las del autor.
  • 15. User Style Sheets
    • 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.
    • 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).
  • 16. User Style Sheets
    • 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 visión reducida, etc) sin que las reglas que ellos especifiquen sean desechadas por los estilos que especifican los diseñadores web (authors).
  • 17. Author Style Sheets
    • El autor es la persona que desarrolla sitios web - ¡Nosotros!
    • Son los estilos más importantes y toman precedencia sobre los otros tipos de style sheets.
  • 18. Author Style Sheets
    • author style sheets > user style sheets > browser style sheets
  • 19. Múltiples author style sheets
  • 20. Múltiples author style sheets
    • Como han visto en varios proyectos, podemos crear diferentes archivos de CSS para un mismo sitio web.
  • 21. Múltiples author style sheets
    • Esto nos sirve en estos casos:
    • Uno para pantalla, otro para print, otro para celulares, etc.
    • 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).
    • Nos permite crear diferentes archivos CSS para distintas secciones del sitio (Home, Acerca, Productos, etc).
    • 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.
  • 22. Múltiples author style sheets
    • Podemos darle el uso que más nos convenga; estamos sólo limitados por nuestra propia creatividad al momento de resolver problemas.
  • 23. Bibliografía CSS: The Definitive Guide Amazon: http://tinyurl.com/5hs7jf Eric Meyer