Presentación CSS

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 SheetsCascade Style Sheets
SGML
1975
19941994
CHSS y
SSP
CSS 1
1996
HTML
DOOM
CSS
1997
CSS 2
1998
Futuro
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="text/css">
/*Código CSS*/
</style>
En archivo .css
<link rel="stylesheet" href="prueba.css"/>

10. Formato

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

12. Cascade Style Sheets
Numeral, indica que es un elemento
#elemento_de_prueba
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
Punto, indica que es una clase
.clase_de_prueba
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
Guanábana
Pera
Guayaba
Manzana
Uva
CSS
#listado_de_frutas{
background: RED;
}
.estilo_de_li{
color: #B1B1B1;
border: 1px solid #000;
}

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

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

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

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

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

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

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

31. Propiedades
texto

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

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

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

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

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

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

38. Propiedades
general

39. Cascade Style Sheets
Div
margin
padding

40. Cascade Style Sheets
Div
margin

41. Cascade Style Sheets
Div
padding

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

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

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

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

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

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

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

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

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