Your SlideShare is downloading. ×
CSS - ¿Cómo agregar estilos a mi página?
CSS - ¿Cómo agregar estilos a mi página?
CSS - ¿Cómo agregar estilos a mi página?
CSS - ¿Cómo agregar estilos a mi página?
CSS - ¿Cómo agregar estilos a mi página?
CSS - ¿Cómo agregar estilos a mi página?
CSS - ¿Cómo agregar estilos a mi página?
CSS - ¿Cómo agregar estilos a mi página?
CSS - ¿Cómo agregar estilos a mi página?
CSS - ¿Cómo agregar estilos a mi página?
CSS - ¿Cómo agregar estilos a mi página?
CSS - ¿Cómo agregar estilos a mi página?
CSS - ¿Cómo agregar estilos a mi página?
CSS - ¿Cómo agregar estilos a mi página?
CSS - ¿Cómo agregar estilos a mi página?
CSS - ¿Cómo agregar estilos a mi página?
CSS - ¿Cómo agregar estilos a mi página?
CSS - ¿Cómo agregar estilos a mi página?
CSS - ¿Cómo agregar estilos a mi página?
CSS - ¿Cómo agregar estilos a mi página?
CSS - ¿Cómo agregar estilos a mi página?
CSS - ¿Cómo agregar estilos a mi página?
CSS - ¿Cómo agregar estilos a mi página?
CSS - ¿Cómo agregar estilos a mi página?
CSS - ¿Cómo agregar estilos a mi página?
CSS - ¿Cómo agregar estilos a mi página?
CSS - ¿Cómo agregar estilos a mi página?
CSS - ¿Cómo agregar estilos a mi página?
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

18,933

Published on

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

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
18,933
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
134
Comments
3
Likes
5
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
    • Aplicando estilos al documento
    Harold Maduro
  • 2. ¿Cómo lo agrego al HTML?
    • Style Element
    • Link Tag
    • @import Directive
    • Inline styles
  • 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. Style Element
    • <style type=”text/css”>
    • p { color: red; }
    • </style>
  • 5. Style Element
    • <style type=”text/css” media=”screen”>
    • p { color: red; }
    • </style>
  • 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. Link Tag
    • <link rel=”stylesheet” type=”text/css” href=”estilos.css” />
  • 8. Link Tag
    • <link rel=”stylesheet” type=”text/css” href=”estilos.css” media=”screen” />
    Media
  • 9. Link Tag Media
    • all
    • aural
    • braille
    • embossed
    • handheld
    • print
    • screen
    • tty
    • tv
  • 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. 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. @import Directive
    • <style type=”text/css”>
    • @import url(estilos.css);
    • </style>
    * Netscape 4.0 ignora este directive El import debe ir dentro de un tag style para que funcione. Por ejemplo:
  • 13. Inline Styles
    • <p style=”color: green;”>
    • HULK SMASH !
    • </p>
    Por último, podemos agregar estilos inline, atado a un elemento en el mismo HTML.
  • 14. Anatomía de una regla (rule set)
  • 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. ¿Qué es un rule set? Una regla (rule set) está compuesta por un selector, seguido de un “declaration block”.
  • 17. Anatomía de una Regla
    • p { color: green; background: black; }
    Selector Declaration Declaration Property Value Declaration Block
  • 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. 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. Declaration block a { color: red; font-family: verdana; } a { color: red; font-family: verdana; }
  • 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. Comentarios
  • 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. Comentarios
    • p { color: blue; } /* so sad... */
    Pueden ir después de una declaración
  • 25. Comentarios
    • /*
    • Por favor confirmar el color corporativo
    • del banco
    • */
    • p { color: blue; }
    Los comentarios son multilinea:
  • 26. Comentarios
    • /* p { color: blue; } */
    • p {
    • font-family: verdana;
    • /* color: blue; */
    • }
    Se pueden utilizar para comentar ciertas reglas que no queremos utilizar en el momento.
  • 27. Bibliografía CSS: The Definitive Guide Amazon: http://tinyurl.com/5hs7jf Eric Meyer
  • 28. Bibliografía CSS 2.1 Specification http://www.w3.org/TR/CSS21/ World Wide Web Consortium

×