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. Andrés Giovanni Lara Collazos
Robert Velasco
Luis Muñoz
css
Cascade Style Sheets

2. css
Cascade Style Sheets

3. 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
Cascade Style Sheets

4. web
CSS HTML
El estilo, la ropa, Estructura, músculos,
peinado huesos
Cascade Style Sheets

5. Historia

6. HTML
DOOM
CHSS y
CSS CSS 3
SSP
1975 1996 1998
1994 1994 1997 Futuro
SGML CSS 1 CSS 2
Cascade Style Sheets

7. Capas diseño
web

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

9. Insertar código
CSS

10. Código directo
<style type="text/css">
/*Código CSS*/
</style>
En archivo .css
<link rel="stylesheet" href="prueba.css"/>
Cascade Style Sheets

11. Formato

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

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

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

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

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

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

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

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

20. Ejemplo

21. 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>
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
Guanábana #listado_de_frutas{
Pera background: RED;
Guayaba }
Manzana .estilo_de_li{
Uva color: #B1B1B1;
border: 1px solid #000;
}
Cascade Style Sheets

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

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

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

27. 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>
Cascade Style Sheets

28. La Herencia nos permite
que etiquetas que estén
dentro de otra tomen
características en
conjunto
Cascade Style Sheets

29. No todas las propiedades
se heredan, por lo general
solo las de tipo fuente
Cascade 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

32. Propiedades
texto

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

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

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

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

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

38. 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
Cascade Style Sheets

39. Propiedades
general

40. margin
padding
Div
Cascade Style Sheets

41. margin
Div
Cascade Style Sheets

42. padding
Div
Cascade Style Sheets

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

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

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

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

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

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

49. Propiedad Información
no-repeat No repetir
repeat-x Repetir en el eje X
repeat-y Repetir en el eje Y
none Ninguno
Cascade Style Sheets

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

51. ¡Gracias!
Cascade Style Sheets