1
Semana 5
Ing. Edson Raúl Lazo Alvarez Ing. Edson Raúl Lazo Alvarez INFORMÁTICA II
INFORMÁTICA II
2
Ing. Edson Raúl Lazo Alvarez Ing. Edson Raúl Lazo Alvarez INFORMÁTICA II
INFORMÁTICA II
Contexto Al construir un documento HTML se tenía que definir cada una de las propiedades en las diferentes etiquetas para mejorar su apariencia. DISEÑO
Texto
HTML
<font face="Arial" size=“66" color=“red"> Texto </font>
3 Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
Contexto Si se quería aplicar la misma apariencia a varios elementos, había que repetir las instrucciones!
TEXTO 1
TEXTO 1
TEXTO 2
TEXTO 2
<font face="Arial” size=“18" color=“red"> Texto 1 </font> ,,, ,,, <font face="Arial” size=“18" color=“red"> Texto 2 </font>
4 Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
Contexto Aún peor, si se quería aplicar la misma apariencia a varios elementos en varias páginas, las instrucciones se repiten cada vez más. El desarrollador veía tedioso este proceso, pues no había forma alguna de evitar tantas repeticiones.
TEXTO 1
(
<font face="Arial” size=“18" color=“red"> Texto 1 </font>
TEXTO 1
n )
5 Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
Contexto Para organizar el contenido se debía recurrir únicamente a las tablas. No había forma de poner un objeto sobre otro, Para que los vínculos se vieran agradables, había que recurrir a imágenes. Muchos de los efectos se tenían que realizar con Javascript,
Etc.
6 Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
Contexto Así las cosas, se pensó en una estrategia que permitiera independizar la parte visual del contenido propio del documento HTML. 7 Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
8
Ing. Edson Raúl Lazo Alvarez Ing. Edson Raúl Lazo Alvarez INFORMÁTICA II
INFORMÁTICA II
CSS Siglas de Cascade Style Sheets, que quiere decir “Hojas de Estilos en Cascada”. Se trata de una especificación sobre los estilos físicos aplicables a un documento HTML. Trata de dar la separación definitiva de la lógica (estructura) y la presentación del documento HTML.
9 Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
Estilo
10 Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
Estilos 1 El estilo físico no se preocupa de la estructura del documento, sino por la apariencia final: párrafos con un cierto tipo de letra, tablas con un determinado color de fondo, entre otros.
2 El estilo lógico, en cambio, se refiere específicamente a la estructura del documento..
3 CSS se ocupa de adaptar el estilo físico al estilo lógico.
11 Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
¿Porqué usar CSS?
Por que es más limpio tener por separado el contenido (HTML) de la presentación (CSS).
Por que para cambiar el formato de un elemento HTML específico, solo se tendría que definir en la hoja de estilos una única vez y no tantas veces como dicho elemento aparezca.
Por que el HTML es muy limitado para lograr una maquetación atractiva de las páginas web (posicionamiento lineal).
12 Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
¿Porqué usar CSS?
13
Por que permite mantener una cierta consistencia entre todas las páginas.
Por que permite una carga más rápida de las páginas.
Por que es más accesible que HTML.
Por que es un estándar y los estándares son el camino para que se pueda ver internet de la misma manera.
Por que se trata de definir las características en cascada.
Por que se pueden definir los estilos utilizando unidades diferentes a los pixeles.
Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
Regla CSS
14 Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
DIV DEMO
15 Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
Style FORMAS DE CREAR CSS
16 Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II
17
Ing. Edson Raúl Lazo Alvarez Ing. Edson Raúl Lazo Alvarez INFORMÁTICA II
INFORMÁTICA II
18 Ing. Edson Raúl Lazo Alvarez
INFORMÁTICA II