Presentación CSS

7,017 views 50 slides Mar 04, 2012
Slide 1
Slide 1 of 50
Slide 1
1
Slide 2
2
Slide 3
3
Slide 4
4
Slide 5
5
Slide 6
6
Slide 7
7
Slide 8
8
Slide 9
9
Slide 10
10
Slide 11
11
Slide 12
12
Slide 13
13
Slide 14
14
Slide 15
15
Slide 16
16
Slide 17
17
Slide 18
18
Slide 19
19
Slide 20
20
Slide 21
21
Slide 22
22
Slide 23
23
Slide 24
24
Slide 25
25
Slide 26
26
Slide 27
27
Slide 28
28
Slide 29
29
Slide 30
30
Slide 31
31
Slide 32
32
Slide 33
33
Slide 34
34
Slide 35
35
Slide 36
36
Slide 37
37
Slide 38
38
Slide 39
39
Slide 40
40
Slide 41
41
Slide 42
42
Slide 43
43
Slide 44
44
Slide 45
45
Slide 46
46
Slide 47
47
Slide 48
48
Slide 49
49
Slide 50
50

About This Presentation

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


Slide Content

css
Cascade Style Sheets

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

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

Historia

Cascade Style SheetsCascade Style Sheets
SGML
1975
19941994
CHSS y
SSP
CSS 1
1996
HTML
DOOM
CSS
1997
CSS 2
1998
Futuro
CSS 3

Capas diseño
web

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

Insertar código
CSS

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

Formato

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

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

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

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

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

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

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

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

Ejemplo

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>

Cascade Style Sheets
CSS
#listado_de_frutas{
background: RED;
}
.estilo_de_li{
color: #B1B1B1;
border: 1px solid #000;
}

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

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

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

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

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>

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

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

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

Propiedades
texto

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

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

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.

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

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

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

Propiedades
general

Cascade Style Sheets
Div
margin
padding

Cascade Style Sheets
Div
margin

Cascade Style Sheets
Div
padding

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

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

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

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

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

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

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

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

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