Introducción a CSS Parte - 1

3,014 views

Published on

Presentación para mis alumnos de Diseño del Instituto Profesional Los Leones (Santiago - Chile) sobre los estilos CSS (parte 1)

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
3,014
On SlideShare
0
From Embeds
0
Number of Embeds
2,280
Actions
Shares
0
Downloads
21
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Introducción a CSS Parte - 1

  1. 1. CSS - 1 Profesor Jorge Llantén B. Diseñador Gráfico Publicitario www.j2.cl /wwwj2cl @jorgellanten jorgellantenb /jorgellanten /jorgellanten jueves, 12 de septiembre de 13
  2. 2. HTML jueves, 12 de septiembre de 13
  3. 3. HTML Contenido (estructura) jueves, 12 de septiembre de 13
  4. 4. HTML CSS Contenido (estructura) jueves, 12 de septiembre de 13
  5. 5. HTML CSS Contenido (estructura) Diseño (presentación) jueves, 12 de septiembre de 13
  6. 6. HTML CSS JavaScript Contenido (estructura) Diseño (presentación) jueves, 12 de septiembre de 13
  7. 7. HTML CSS JavaScript Contenido (estructura) Diseño (presentación) Interactividad (comportamiento) jueves, 12 de septiembre de 13
  8. 8. HTML + CSS jueves, 12 de septiembre de 13
  9. 9. HTML = CONTENIDO “QUÉ” CSS = PRESENTACIÓN “CÓMO” jueves, 12 de septiembre de 13
  10. 10. HTML = CONTENIDO “HOOOLA, LES QUIERO DECIR QUE BLA BLA BLA” CSS = PRESENTACIÓN “OK, ESO VA CON TEXTO ROJO Y 2 PX DE MARGEN” jueves, 12 de septiembre de 13
  11. 11. HTML DICE: “ESO ES UN TÍTULO 1” “AHÍ TIENE QUE IR UNA IMAGEN” “ESO ES UN PÁRRAFO” “ESO ES UN LISTADO” jueves, 12 de septiembre de 13
  12. 12. HTML DICE: “ESO ES UN TÍTULO 1” “AHÍ TIENE QUE IR UNA IMAGEN” “ESO ES UN PÁRRAFO” “ESO ES UN LISTADO” <h1> <img> <p> <ul> jueves, 12 de septiembre de 13
  13. 13. CSS DICE: “ESO VA CON ARIAL” “ESTA PARTE VA EN NEGRITA Y BORDE ROJO” “ESE LINK VA SUBRAYADO” “ESA CAJA VA A LA IZQUIERDA” jueves, 12 de septiembre de 13
  14. 14. CSS DICE: font-family: arial; font-weight: bold; border: 1px solid red; text-decoration: underline; float: left; jueves, 12 de septiembre de 13
  15. 15. Formas de agregar estilos CSS jueves, 12 de septiembre de 13
  16. 16. Formas de agregar estilos CSS Inline: Dentro de la misma etiqueta HTML jueves, 12 de septiembre de 13
  17. 17. <p style="font-family: Arial, Helvetica, sans-serif; font-size: 14px;color: #F00">este es un párrafo</p> Formas de agregar estilos CSS Inline: Dentro de la misma etiqueta HTML jueves, 12 de septiembre de 13
  18. 18. <p style="font-family: Arial, Helvetica, sans-serif; font-size: 14px;color: #F00">este es un párrafo</p> Formas de agregar estilos CSS Inline: Dentro de la misma etiqueta HTML este es un párrafo jueves, 12 de septiembre de 13
  19. 19. Formas de agregar estilos CSS jueves, 12 de septiembre de 13
  20. 20. Formas de agregar estilos CSS Dentro del <head> jueves, 12 de septiembre de 13
  21. 21. Formas de agregar estilos CSS Dentro del <head> <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Documento sin título</title> <style type="text/css"> p { font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #F00; } </style> </head> <body> <p>este es un párrafo</p> </body> </html> jueves, 12 de septiembre de 13
  22. 22. Formas de agregar estilos CSS jueves, 12 de septiembre de 13
  23. 23. Formas de agregar estilos CSS Llamándo a un archivo CSS con los estilos jueves, 12 de septiembre de 13
  24. 24. <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Documento sin título</title> <link href="estilos.css" rel="stylesheet" type="text/css"> </head> <body> <p>este es un párrafo</p> </body> </html> Formas de agregar estilos CSS Llamándo a un archivo CSS con los estilos jueves, 12 de septiembre de 13
  25. 25. CSS HTML HTML HTML HTML Forma más óptima de trabajar estilos CSS jueves, 12 de septiembre de 13

×