Presentación CSS

2,659 views

Published on

Presentación de CSS para la clase de Programación V de la Corporación Universitaria Autónoma del Cauca.

Andrés Giovanni Lara Collazos
Robert Velasco
Luis Muñoz

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

No Downloads
Views
Total views
2,659
On SlideShare
0
From Embeds
0
Number of Embeds
37
Actions
Shares
0
Downloads
181
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Presentación CSS

  1. 1. css Cascade Style Sheets
  2. 2. Cascade Style Sheets Es la forma como indicamos el diseño, colores, tamaños , etc de un sitio web , separado de la programación y la estructura de este
  3. 3. Cascade Style Sheets CSS El estilo, la ropa, peinado web HTML Estructura, músculos, huesos
  4. 4. Historia
  5. 5. Cascade Style Sheets Cascade Style Sheets 1975 1994 1994 1996 1997 1998 Futuro SGML CHSS y SSP CSS 1 HTML DOOM CSS CSS 2 CSS 3
  6. 6. Capas diseño web
  7. 7. Cascade Style Sheets Contenido HTML e Información Diseño CSS Comportamiento Javascript
  8. 8. Insertar código CSS
  9. 9. Cascade Style Sheets Código directo <style type=&quot; text/css &quot;> /*Código CSS*/ </style> En archivo .css <link rel=&quot; stylesheet &quot; href=&quot; prueba.css &quot;/>
  10. 10. Formato
  11. 11. Cascade Style Sheets Los Elementos son etiquetas únicas que no se repiten
  12. 12. Cascade Style Sheets #elemento_de_prueba Numeral, indica que es un elemento Nombre del elemento
  13. 13. Cascade Style Sheets Código CSS elemento #elemento{ /*Propiedades CSS*/ }
  14. 14. Cascade Style Sheets Código HTML elemento <div id=” nombre_elemento ”> ¡Hola Colombia! </div>
  15. 15. Cascade Style Sheets Las Clases son Elementos con características iguales
  16. 16. Cascade Style Sheets .clase_de_prueba Punto, indica que es una clase Nombre de la clase
  17. 17. Cascade Style Sheets Código CSS clase .clase{ /*Propiedades CSS*/ }
  18. 18. Cascade Style Sheets Código HTML de la clase <div class=” nombre_clase ”> ¡Hola Colombia! </div>
  19. 19. Ejemplo
  20. 20. Cascade Style Sheets HTML <div id=” listado_de_frutas ”> <ul> <li class=” estilo_de_li ”>Guanábana</li> <li class=” estilo_de_li ”>Pera</li> <li class=” estilo_de_li ”>Guayaba</li> <li class=” estilo_de_li ”>Manzana</li> <li class=” estilo_de_li ”>Uva</li> </ul> </div>
  21. 21. Cascade Style Sheets CSS #listado_de_frutas{ background: RED ; } .estilo_de_li { color: #B1B1B1 ; border: 1px solid #000 ; }
  22. 22. Cascade Style Sheets Resultado <ul><li>Guanábana
  23. 23. Pera
  24. 24. Guayaba
  25. 25. Manzana
  26. 26. Uva </li></ul>CSS #listado_de_frutas{ background: RED ; } .estilo_de_li { color: #B1B1B1 ; border: 1px solid #000 ; }
  27. 27. Cascade Style Sheets Elementos globales es la forma de darle estilo a todas las etiquetas con determinado nombre
  28. 28. Cascade Style Sheets elemento_global Va sin punto (.) ó numeral (#) Solo el nombre del elemento global
  29. 29. Cascade Style Sheets CSS li { color: #B1B1B1 ; border: 1px solid #000 ; }
  30. 30. Cascade Style Sheets HTML <div id=” listado_de_frutas ”> <ul> <li>Guanábana</li> <li>Pera</li> <li>Guayaba</li> <li>Manzana</li> <li>Uva</li> </ul> </div>
  31. 31. Cascade Style Sheets La Herencia nos permite que etiquetas que estén dentro de otra tomen características en conjunto
  32. 32. Cascade Style Sheets No todas las propiedades se heredan, por lo general solo las de tipo fuente
  33. 33. Cascade Style Sheets Selectores CSS ejemplo #listado_de_sopas ul li{ background: RED ; } #listado_de_sopas, #listado_de_frutas, #listado_de_ensaladas, #listado_de_jugos { color: #B1B1B1 ; border: 1px solid #000 ; } .clase_1, .clase_2, .clase_3, .clase_4 { color: #B1B1B1 ; border: 1px solid #000 ; }
  34. 35. Propiedades texto
  35. 36. Cascade Style Sheets font-size:12px; Nombre de la propiedad Valor de la propiedad en pixels
  36. 37. Cascade Style Sheets Font-family: Arial, Helvetica; Nombre de la propiedad Listado de fuentes
  37. 38. Cascade Style Sheets <ul><li>Arial, Helvetica, sans-serif.
  38. 39. “ Times New Roman”, Times, serif.
  39. 40. “ Courier New”, Courier, monospace.
  40. 41. Georgia, “Times New Roman”, Times, serif.
  41. 42. Verdana, Arial, Helvetica, sans-serif.
  42. 43. Geneva, Arial, Helvetica, sans-serif. </li></ul>
  43. 44. Cascade Style Sheets color: #000; Nombre de la propiedad Valor de la propiedad hexadecimal
  44. 45. Cascade Style Sheets text-align: center; Nombre de la propiedad Tipo de alineado
  45. 46. Cascade Style Sheets Propiedad Información text-align: center; Alinear al centro text-align: left; Alinear a la izquierda text-align: right; Alinear a la derecha text-align: justify; Justificar text-align: none; Ninguna
  46. 47. Propiedades general
  47. 48. Cascade Style Sheets margin padding Div
  48. 49. Cascade Style Sheets margin Div
  49. 50. Cascade Style Sheets padding Div
  50. 51. Cascade Style Sheets Padding .clase_1{ padding: 3px; } Margin .clase_1{ margin: 3px; }
  51. 52. Cascade Style Sheets border: 4px solid #B1B1B1; Div
  52. 53. Cascade Style Sheets Propiedad Información dotted Linea de puntos dashed Linea discontinua solid Linea continua double Doble linea
  53. 54. Cascade Style Sheets Border .clase_1{ border: 1px solid #B1B1B1; }
  54. 55. Cascade Style Sheets background: #000; #un_div_que_elijamos{ Background: #000; } Div
  55. 56. Cascade Style Sheets body{ background: url(“nyan.jpg”) #000; }
  56. 57. Cascade Style Sheets Propiedad Información no-repeat No repetir repeat-x Repetir en el eje X repeat-y Repetir en el eje Y none Ninguno
  57. 58. Cascade Style Sheets body{ background:url(“orange.png”) repeat-x #6FA8DC; }
  58. 59. Cascade Style Sheets body{ Background: url(“nyan.jpg”) #000; }

×