1. Andrs Giovanni Lara CollazosRobert VelascoLuis Muoz css Cascade Style Sheets

2. cssCascade Style Sheets 3. Es la forma como indicamos el diseo, colores, tamaos, etc deun sitio web, separado dela programacin y la estructura de esteCascade Style Sheets 4. web CSS HTMLEl estilo, la ropa, Estructura, msculos,peinado huesos Cascade Style Sheets 5. Historia 6. HTML DOOMCHSS yCSS CSS 3SSP1975 19961998 1994 19941997FuturoSGML CSS 1CSS 2 Cascade Style Sheets 7. Capas diseoweb 8. ContenidoHTML e Informacin DiseoCSSComportamiento Javascript Cascade Style Sheets 9. Insertar cdigoCSS 10. Cdigo directo En archivo .css Cascade Style Sheets 11. Formato 12. Los Elementos sonetiquetas nicas que no se repitenCascade Style Sheets 13. Nombre del elemento#elemento_de_pruebaNumeral, indica que es un elementoCascade Style Sheets 14. Cdigo CSS elemento#elemento{/*Propiedades CSS*/ }Cascade Style Sheets 15. Cdigo HTML elemento

Hola Colombia!

Cascade Style Sheets 16. Las Clases son Elementoscon caractersticas igualesCascade Style Sheets 17. Nombre de la clase.clase_de_prueba Punto, indica que es una clase Cascade Style Sheets 18. Cdigo CSS clase .clase{/*Propiedades CSS*/ } Cascade Style Sheets 19. Cdigo HTML de la clase

Hola Colombia!

Cascade Style Sheets 20. Ejemplo 21. HTML

• Guanbana
• Pera
• Guayaba
• Manzana
• Uva

Cascade Style Sheets 22. CSS #listado_de_frutas{ background: RED; } .estilo_de_li{ color: #B1B1B1; border: 1px solid #000; } Cascade Style Sheets 23. Resultado CSS Guanbana#listado_de_frutas{ Pera background: RED; Guayaba} Manzana.estilo_de_li{ Uvacolor: #B1B1B1;border: 1px solid #000;} Cascade Style Sheets 24. Elementos globales es la forma de darle estilo a todas las etiquetas con determinado nombreCascade Style Sheets 25. Solo el nombre del elemento globalelemento_global Va sin punto (.) numeral (#)Cascade Style Sheets 26. CSS li{ color: #B1B1B1; border: 1px solid #000; }Cascade Style Sheets 27. HTML

• Guanbana
• Pera
• Guayaba
• Manzana
• Uva

Cascade Style Sheets 28. La Herencia nos permiteque etiquetas que estndentro de otra tomen caractersticas enconjuntoCascade Style Sheets 29. No todas las propiedadesse heredan, por lo generalsolo las de tipo fuenteCascade Style Sheets 30. 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;} Cascade Style Sheets 31. Propiedades texto 32. Valor de la propiedad en pixels font-size:12px;Nombre de la propiedadCascade Style Sheets 33. Listado de fuentes Font-family: Arial, Helvetica;Nombre de la propiedadCascade Style Sheets 34. Arial, Helvetica, sans-serif.Times New Roman, Times, serif.Courier New, Courier, monospace.Georgia, Times New Roman, Times, serif.Verdana, Arial, Helvetica, sans-serif.Geneva, Arial, Helvetica, sans-serif. Cascade Style Sheets 35. Valor de la propiedad hexadecimal color: #000;Nombre de la propiedadCascade Style Sheets 36. Tipo de alineado text-align: center;Nombre de la propiedadCascade Style Sheets 37. PropiedadInformacintext-align: center;Alinear al centro text-align: left; Alinear a la izquierdatext-align: right; Alinear a la derechatext-align: justify; Justificartext-align: none;NingunaCascade Style Sheets 38. Propiedadesgeneral 39. margin padding Div Cascade Style Sheets 40. margin Div Cascade Style Sheets 41. padding DivCascade Style Sheets 42. Padding .clase_1{padding: 3px; }Margin .clase_1{margin: 3px; } Cascade Style Sheets 43. border: 4px solid #B1B1B1;DivCascade Style Sheets 44. Propiedad Informacindotted Linea de puntosdashed Linea discontinua solidLinea continuadoubleDoble lineaCascade Style Sheets 45. Border .clase_1{border: 1px solid #B1B1B1; } Cascade Style Sheets 46. background: #000;Div#un_div_que_elijamos{Background: #000;} Cascade Style Sheets 47. body{background: url(nyan.jpg) #000;}Cascade Style Sheets 48. Propiedad Informacin no-repeat No repetir repeat-xRepetir en el eje X repeat-yRepetir en el eje Y none NingunoCascade Style Sheets 49. body{background:url(orange.png) repeat-x #6FA8DC;}Cascade Style Sheets 50. Gracias! Cascade Style Sheets