Your SlideShare is downloading. ×
0
Presentación CSS
Presentación CSS
Presentación CSS
Presentación CSS
Presentación CSS
Presentación CSS
Presentación CSS
Presentación CSS
Presentación CSS
Presentación CSS
Presentación CSS
Presentación CSS
Presentación CSS
Presentación CSS
Presentación CSS
Presentación CSS
Presentación CSS
Presentación CSS
Presentación CSS
Presentación CSS
Presentación CSS
Presentación CSS
Presentación CSS
Presentación CSS
Presentación CSS
Presentación CSS
Presentación CSS
Presentación CSS
Presentación CSS
Presentación CSS
Presentación CSS
Presentación CSS
Presentación CSS
Presentación CSS
Presentación CSS
Presentación CSS
Presentación CSS
Presentación CSS
Presentación CSS
Presentación CSS
Presentación CSS
Presentación CSS
Presentación CSS
Presentación CSS
Presentación CSS
Presentación CSS
Presentación CSS
Presentación CSS
Presentación CSS
Presentación CSS
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Presentación CSS

1,212

Published on

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

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
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,212
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
62
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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 ; }
  • 22. Cascade Style Sheets Resultado 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 ; }
  • 34.  
  • 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
  • 38. Cascade Style Sheets
    • Arial, Helvetica, sans-serif.
    • 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; }

×