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

1. css Cascade Style Sheets

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. Cascade Style Sheets CSS El estilo, la ropa, peinado web HTML Estructura, músculos, huesos

4. Historia

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. Capas diseño web

7. Cascade Style Sheets Contenido HTML e Información Diseño CSS Comportamiento Javascript

8. Insertar código CSS

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. Formato

11. Cascade Style Sheets Los Elementos son etiquetas únicas que no se repiten

12. Cascade Style Sheets #elemento_de_prueba Numeral, indica que es un elemento Nombre del elemento

13. Cascade Style Sheets Código CSS elemento #elemento{ /*Propiedades CSS*/ }

14. Cascade Style Sheets Código HTML elemento <div id=” nombre_elemento ”> ¡Hola Colombia! </div>

15. Cascade Style Sheets Las Clases son Elementos con características iguales

16. Cascade Style Sheets .clase_de_prueba Punto, indica que es una clase Nombre de la clase

17. Cascade Style Sheets Código CSS clase .clase{ /*Propiedades CSS*/ }

18. Cascade Style Sheets Código HTML de la clase <div class=” nombre_clase ”> ¡Hola Colombia! </div>

19. Ejemplo

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. Cascade Style Sheets CSS #listado_de_frutas{ background: RED ; } .estilo_de_li { color: #B1B1B1 ; border: 1px solid #000 ; }

23. Pera

24. Guayaba

25. Manzana

26. Uva CSS #listado_de_frutas{ background: RED ; } .estilo_de_li { color: #B1B1B1 ; border: 1px solid #000 ; }

27. Cascade Style Sheets Elementos globales es la forma de darle estilo a todas las etiquetas con determinado nombre

28. Cascade Style Sheets elemento_global Va sin punto (.) ó numeral (#) Solo el nombre del elemento global

29. Cascade Style Sheets CSS li { color: #B1B1B1 ; border: 1px solid #000 ; }

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. Cascade Style Sheets La Herencia nos permite que etiquetas que estén dentro de otra tomen características en conjunto

32. Cascade Style Sheets No todas las propiedades se heredan, por lo general solo las de tipo fuente

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 ; }

35. Propiedades texto

36. Cascade Style Sheets font-size:12px; Nombre de la propiedad Valor de la propiedad en pixels

37. Cascade Style Sheets Font-family: Arial, Helvetica; Nombre de la propiedad Listado de fuentes

39. “ Times New Roman”, Times, serif.

40. “ Courier New”, Courier, monospace.

41. Georgia, “Times New Roman”, Times, serif.

42. Verdana, Arial, Helvetica, sans-serif.

43. Geneva, Arial, Helvetica, sans-serif.

44. Cascade Style Sheets color: #000; Nombre de la propiedad Valor de la propiedad hexadecimal

45. Cascade Style Sheets text-align: center; Nombre de la propiedad Tipo de alineado

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

47. Propiedades general

48. Cascade Style Sheets margin padding Div

49. Cascade Style Sheets margin Div

50. Cascade Style Sheets padding Div

51. Cascade Style Sheets Padding .clase_1{ padding: 3px; } Margin .clase_1{ margin: 3px; }

52. Cascade Style Sheets border: 4px solid #B1B1B1; Div

53. Cascade Style Sheets Propiedad Información dotted Linea de puntos dashed Linea discontinua solid Linea continua double Doble linea

54. Cascade Style Sheets Border .clase_1{ border: 1px solid #B1B1B1; }

55. Cascade Style Sheets background: #000; #un_div_que_elijamos{ Background: #000; } Div

56. Cascade Style Sheets body{ background: url(“nyan.jpg”) #000; }

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

58. Cascade Style Sheets body{ background:url(“orange.png”) repeat-x #6FA8DC; }

59. Cascade Style Sheets body{ Background: url(“nyan.jpg”) #000; }