CSS - ¿Cómo agregar estilos a mi página?

20,505 views

Published on

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

Ejemplos de las distintas maneras de agregar el CSS al HTML que estoy editando.

Published in: Technology
3 Comments
5 Likes
Statistics
Notes
No Downloads
Views
Total views
20,505
On SlideShare
0
From Embeds
0
Number of Embeds
185
Actions
Shares
0
Downloads
149
Comments
3
Likes
5
Embeds 0
No embeds

No notes for slide

CSS - ¿Cómo agregar estilos a mi página?

  1. 1. CSS <ul><li>Aplicando estilos al documento </li></ul>Harold Maduro
  2. 2. ¿Cómo lo agrego al HTML? <ul><li>Style Element </li></ul><ul><li>Link Tag </li></ul><ul><li>@import Directive </li></ul><ul><li>Inline styles </li></ul>
  3. 3. Style Element Una de las formas de agregar CSS a su documento es utilizando el elemento de HTML style. El mismo debe llevar siempre el atributo type con su valor text/css. También podemos aplicarle al elemento style el atributo de media, si queremos especificar que los estilos son para pantalla, print, handheld, etc.
  4. 4. Style Element <ul><li><style type=”text/css”> </li></ul><ul><li>p { color: red; } </li></ul><ul><li></style> </li></ul>
  5. 5. Style Element <ul><li><style type=”text/css” media=”screen”> </li></ul><ul><li>p { color: red; } </li></ul><ul><li></style> </li></ul>
  6. 6. Link Tag Llamando a un archivo CSS externo al HTML.A estos archivos que son externos al HTML, se les llama external style sheets. Para poder llamarlos exitosamente, el elemento link debe estar dentro del elemento head al comienzo del documento.
  7. 7. Link Tag <ul><li><link rel=”stylesheet” type=”text/css” href=”estilos.css” /> </li></ul>
  8. 8. Link Tag <ul><li><link rel=”stylesheet” type=”text/css” href=”estilos.css” media=”screen” /> </li></ul>Media
  9. 9. Link Tag Media <ul><li>all </li></ul><ul><li>aural </li></ul><ul><li>braille </li></ul><ul><li>embossed </li></ul><ul><li>handheld </li></ul><ul><li>print </li></ul><ul><li>screen </li></ul><ul><li>tty </li></ul><ul><li>tv </li></ul>
  10. 10. Link Tag Alternate Style Sheets <link rel=”stylesheet” type=”text/css” href=”estilos.css” media=”screen” /> <link rel=”stylesheet” type=”text/css” href=”printer.css” media=”print” /> <link rel=”stylesheet” type=”text/css” href=”cell.css” media=”handheld” />
  11. 11. Link Tag Alternate Style Sheets <link rel=”stylesheet” type=”text/css” href=”estilos.css” media=”screen” title=”Normal” /> <link rel=”stylesheet” type=”text/css” href=”grande.css” media=”screen” title=”Texto Grande” /> <link rel=”stylesheet” type=”text/css” href=”chico.css” media=”screen” title=”Texto Chico” />
  12. 12. @import Directive <ul><li><style type=”text/css”> </li></ul><ul><li>@import url(estilos.css); </li></ul><ul><li></style> </li></ul>* Netscape 4.0 ignora este directive El import debe ir dentro de un tag style para que funcione. Por ejemplo:
  13. 13. Inline Styles <ul><li><p style=”color: green;”> </li></ul><ul><li>HULK SMASH ! </li></ul><ul><li></p> </li></ul>Por último, podemos agregar estilos inline, atado a un elemento en el mismo HTML.
  14. 14. Anatomía de una regla (rule set)
  15. 15. Anatomía de una regla Un rule set es un enunciado que le indica al browser cómo desplegar un elemento determinado dentro del HTML.
  16. 16. ¿Qué es un rule set? Una regla (rule set) está compuesta por un selector, seguido de un “declaration block”.
  17. 17. Anatomía de una Regla <ul><li>p { color: green; background: black; } </li></ul>Selector Declaration Declaration Property Value Declaration Block
  18. 18. Selector Un selector selecciona los elementos dentro de la página HTML que son afectados por el rule set. Incluye todo lo que viene antes de los brackets {.
  19. 19. Declaration block El declaration block es un contenedor que incluye todo lo que está dentro de los brackets {} (incluyéndolos). Los espacios en blanco dentro del declaration block son ignorados y se pueden utilizar para darle el formato visual a la regla que les sea más cómoda.
  20. 20. Declaration block a { color: red; font-family: verdana; } a { color: red; font-family: verdana; }
  21. 21. Declaration El declaration le indica al browser cómo desplegar un elemento determinado en la página, luego de ser seleccionado. Está compuesto de una propiedad y un valor, separados por dos puntos “:”.
  22. 22. Comentarios
  23. 23. Comentarios Se pueden insertar comentarios en el CSS para explicar el código. Al igual que los comentarios en HTML, son ignorados por los browsers.
  24. 24. Comentarios <ul><li>p { color: blue; } /* so sad... */ </li></ul>Pueden ir después de una declaración
  25. 25. Comentarios <ul><li>/* </li></ul><ul><li>Por favor confirmar el color corporativo </li></ul><ul><li>del banco </li></ul><ul><li>*/ </li></ul><ul><li>p { color: blue; } </li></ul>Los comentarios son multilinea:
  26. 26. Comentarios <ul><li>/* p { color: blue; } */ </li></ul><ul><li>p { </li></ul><ul><li>font-family: verdana; </li></ul><ul><li>/* color: blue; */ </li></ul><ul><li>} </li></ul>Se pueden utilizar para comentar ciertas reglas que no queremos utilizar en el momento.
  27. 27. Bibliografía CSS: The Definitive Guide Amazon: http://tinyurl.com/5hs7jf Eric Meyer
  28. 28. Bibliografía CSS 2.1 Specification http://www.w3.org/TR/CSS21/ World Wide Web Consortium

×