CSS

890 views
857 views

Published on

Introducción a CSS

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

  • Be the first to like this

No Downloads
Views
Total views
890
On SlideShare
0
From Embeds
0
Number of Embeds
36
Actions
Shares
0
Downloads
40
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

CSS

  1. 2. CSS (Cascading Style Sheets) <ul><li>Lenguaje usado para definir la presentación de un documento estructurado (HTML, XHTML) </li></ul><ul><li>Desarrollado por el W3C </li></ul><ul><li>La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un documento de su presentación </li></ul><ul><li>Extensión .css </li></ul>
  2. 3. Sintaxis <ul><li>selector { </li></ul><ul><li>propiedad: valor ; </li></ul><ul><li>} </li></ul>
  3. 4. Donde escribir CSS <ul><li>1. Dentro de la etiqueta: </li></ul><ul><ul><li><p style=&quot;color:#009900&quot;> Este párrafo es de color verde.</p> </li></ul></ul>
  4. 5. Donde escribir CSS <ul><li>2. Dentro del documento </li></ul><ul><ul><ul><li><head> </li></ul></ul></ul><ul><ul><ul><li><STYLE type=&quot;text/css&quot;> </li></ul></ul></ul><ul><ul><ul><li>p { </li></ul></ul></ul><ul><ul><ul><li>color:#009900; </li></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul><ul><ul><ul><li></STYLE> </li></ul></ul></ul><ul><ul><ul><li></head> </li></ul></ul></ul>
  5. 6. Donde escribir CSS <ul><li>3. Hoja de estilos (.css) </li></ul><ul><ul><ul><li>Llamada desde el HTML: </li></ul></ul></ul><ul><ul><ul><li><head> </li></ul></ul></ul><ul><ul><ul><li><link rel=&quot;STYLESHEET&quot; type=&quot;text/css&quot; href=&quot;estilos.css&quot;> </li></ul></ul></ul><ul><ul><ul><li></head> </li></ul></ul></ul>
  6. 7. Selectores <ul><li>1. Universal </li></ul><ul><ul><li>*{ } </li></ul></ul><ul><li>2. De Tipo: </li></ul><ul><ul><li>body{ } </li></ul></ul><ul><ul><li>p{ } </li></ul></ul><ul><ul><li>h1{ } </li></ul></ul><ul><ul><li>ul{ } </li></ul></ul><ul><ul><li>table{ } </li></ul></ul><ul><ul><li>... </li></ul></ul>
  7. 8. Selectores <ul><li>3. De Clase: </li></ul><ul><ul><li>.p_rojo{ </li></ul></ul><ul><ul><li>color:#990000; </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><li>Llamada desde el HTML: </li></ul><ul><ul><li><p class=&quot;p_rojo&quot;>Este párrafo es rojo</p> </li></ul></ul>
  8. 9. Selectores <ul><li>4. DE Pseudo-clase: </li></ul><ul><ul><li>Enlaces normales </li></ul></ul><ul><ul><ul><li>a:link { } </li></ul></ul></ul><ul><ul><li>Enlaces visitados </li></ul></ul><ul><ul><ul><li>a:visited { } </li></ul></ul></ul><ul><ul><li>Enlaces activos </li></ul></ul><ul><ul><ul><li>a:active { } </li></ul></ul></ul><ul><ul><li>Enlaces hover </li></ul></ul><ul><ul><ul><li>a:hover { } </li></ul></ul></ul>
  9. 10. Selectores <ul><li>5. De Identificador: </li></ul><ul><ul><li>#p_unico{ </li></ul></ul><ul><ul><li>color:#990000; </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><li>Llamada desde el HTML: </li></ul><ul><ul><li><p id=&quot;p_unico&quot;>El formato de este párrafo es único</p> </li></ul></ul>
  10. 11. Propiedades <ul><li>http://www.ateneupopular.com/blogs/chuleta-css-conceptos-basicos/ </li></ul>
  11. 12. Valores <ul><li>Números enteros </li></ul><ul><li>Decimales </li></ul><ul><li>Hexadecimales (rojo = #f00) </li></ul><ul><li>Palabras protegidas: rojo, aqua, bold, solid… </li></ul><ul><li>Medidas: </li></ul><ul><ul><li>Unidades absolutas </li></ul></ul><ul><ul><li>Unidades relativas </li></ul></ul>
  12. 13. Unidades absolutas <ul><li>in , pulgadas (1 pulgada son 2.54 centímetros) </li></ul><ul><li>cm , centímetros </li></ul><ul><li>mm , milímetros </li></ul><ul><li>pt , puntos (1 punto equivale a 1 pulgada/72, es decir, unos 0.35 milímetros) </li></ul><ul><li>pc , picas (1 pica equivale a 12 puntos, es decir, unos 4.23 milímetros) </li></ul>
  13. 14. Unidades relativas <ul><li>em , relativa respecto del tamaño de letra previamente definida, o 16px por omisión. </li></ul><ul><li>ex , relativa respecto de la altura de la letra x (&quot;equis minúscula&quot;) del tipo de letra que se esté utilizando </li></ul><ul><li>px , (píxel) relativa respecto de la pantalla del usuario </li></ul><ul><li>% , (porcentaje) el valor de porcentaje es relativo al tamaño del elemento </li></ul>
  14. 15. Etiquetas <span> y <div> <ul><li>span , se utiliza para separar un trozo de texto y darle formato. </li></ul><ul><li>div , permite crear bloques en un documento. </li></ul>
  15. 16. El modelo de cajas

×