1. CSS
Instrucciones que debe seguir un navegador para
presentar la información
taller_media
viernes 26 de agosto de 2011
2. Separar al máximo la forma
(presentación) y el fondo (datos)
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
3. contenido
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
4. maquetación
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
5. SINTAXIS
COMO ESCRIBIMOS AQUELLO QUE QUEREMOS VISUALIZAR
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
6. css ordena la visualización del contenido
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
7. css ordena la visualización del contenido
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
8. velocidad de carga
El código web de calidad se optimiza para que los
elementos propios del diseño (fondos, estilos de texto,
modalidades de presentación de elementos...) sea ligero,
esto es, con pocas instrucciones se consiga el efecto
visual deseado, y se reutilice múltiples veces.
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
9. tipos de selectores
etiquetas: nativas de HTML
identidad: posicionamiento, un elemento
clase: múltiples elementos
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
10. Selector: Etiqueta
¿Dónde?
body
{
background-color:#FFFFFF;
}
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
11. documento
body
{
background-color:#FFFFFF;
}
etiqueta
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
12. Selector: Identificador individual
¿Dónde?
#encabezado
{
background-color:#666666;
}
1
vez por documento
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
13. documento
body
{
background-color:#666;
}
id
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
14. Selector: Identificador común
¿Dónde?
.datos
{
background-color:#00FFCC;
}
+1
vez por documento
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
15. documento
body
{
background-color:#00FFCC;
}
class
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
16. reglas básicas
para trabajar con CSS
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
17. JERARQUÍA
autor - usuario - navegador
<h1>Hola</h1>
reglas básicas
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
18. JERARQUÍA Hola
autor - usuario - navegador
<h1>Hola</h1>
reglas básicas
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
19. JERARQUÍA Hola
autor - usuario - navegador
<h1>Hola</h1> HTML
h1
CSS
{
color:red;
}
reglas básicas
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
20. JERARQUÍA Hola
autor - usuario - navegador
<h1>Hola</h1> HTML
h1
CSS
{
color:red;
}
reglas básicas
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
21. ESPECÍFICO
GENÉRICO
<body>
<h1>Hola</h1>
HTML
<p>Contenido</p>
</body>
reglas básicas
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
22. ESPECÍFICO
GENÉRICO Hola
Contenido
<body>
<h1>Hola</h1>
HTML
<p>Contenido</p>
</body>
reglas básicas
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
23. ESPECÍFICO
GENÉRICO Hola
Contenido
<body>
<h1>Hola</h1>
HTML
<p>Contenido</p>
</body>
body
CSS
{
color:red;
}
reglas básicas
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
24. ESPECÍFICO
GENÉRICO Hola
Contenido
<body>
<h1>Hola</h1>
HTML
<p>Contenido</p>
</body>
body
{
color:red;
}
CSS
p
{
color:blue;
}
reglas básicas
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
25. ESPECÍFICO
GENÉRICO Hola
Contenido
<body>
<h1>Hola</h1>
HTML
<p>Contenido</p>
</body>
body
{
color:red;
}
CSS
p
{
color:blue;
}
reglas básicas
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
26. SINTAXIS
EXTRICTA Hola
Contenido
<body>
<h1>Hola</h1>
HTML
<p>Contenido</p>
</body>
BODY
{
}
color:red;
CSS
reglas básicas
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
27. SINTAXIS
EXTRICTA Hola
Contenido
<body>
<h1>Hola</h1>
HTML
<p>Contenido</p>
</body>
BODY
{
}
color:red;
CSS
reglas básicas
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
28. CONTENEDORES
DIV
La etiqueta <div> o división de bloque es un elemento de
html utilizado para definir secciones de un documento.
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
29. contenedores
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
30. CONTENEDORES
DIV
Una etiqueta <div> define un bloque donde incluiremos
información dentro de nuestro documento. A este bloque
definido con la etiqueta <div> le asignaremos por medio
del CSS, las propiedades de posición, tamaño, color, etc
etc.
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
31. <body>
<div>
etiquetas de definición de un contenedor dentro de un
documento html
</div>
</body>
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
32. imaginemos los divs
como cajas
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
33. En una pagina web standard, se
visualizan normalmente 4 cajas
imaginarias:
- Contenedor principal
- Cabezal
- Cuerpo
- Pie
estructura
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
34. veamos algo mas
gráfico
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
35. Tenemos el cuerpo de la
página, y dentro de ella
metemos cajas y las
ubicamos como queremos y
donde queremos.
estructura
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
36. } menu
} banner
} cuerpo
footer
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
37. <body>
<div id="contenedor">
<div id="menu">
</div>
<div id="banner">
</div>
<div id="cuerpo">
</div>
<div id="footer">
</div>
</div>
</body>
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
38. si pasamos esto a
CSS
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
39. #menu {
height: 52px;
width: 968px;
background-color: #00F;
}
#slices {
height: 359px;
width: 968px;
background-color: #FF0;
}
#cuerpo {
height: 700px;
background-color: #C60;
}
#contenedor {
width: 968px;
}
#footer {
height: 50px;
width: 968px;
background-color: #C09;
}
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
40. 2 atributos básicos
float
clear
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
41. float
La propiedad float permite sacar a un elemento del flujo
del documento, y posicionarlo a la izquierda o derecha
de otros elementos adyacentes. Admite tres valores, right,
left y none.
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
42. FLOAT 1
<div id=“caja1”>1 </div> 2
3
<div id=“caja2”>2 </div> HTML
<div id=“caja3”>3 </div>
#caja1
{
border-color:red
float:left; CSS
}
reglas básicas
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
43. FLOAT 1 2
<div id=“caja1”>1 </div> 1 3
<div id=“caja2”>2 </div> HTML
<div id=“caja3”>3 </div>
#caja1
{
border-color:red
float:left; CSS
}
reglas básicas
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
44. FLOAT 1 2
<div id=“caja1”>1 </div> 1 3
<div id=“caja2”>2 </div> HTML
<div id=“caja3”>3 </div>
#caja1
{
border-color:red
float:left;
CSS
}
#caja2
{
border-color:blue
float:left;
width:25px;
}
reglas básicas
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
45. FLOAT 1 2 3
<div id=“caja1”>1 </div>
<div id=“caja2”>2 </div> HTML
<div id=“caja3”>3 </div>
#caja1
{
border-color:red
float:left;
CSS
}
#caja2
{
border-color:blue
float:left;
width:25px;
}
reglas básicas
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011