III. Hojas de estilo en cascada (CSS) 1. Introducción 2. Declaración de CSS 2.1. Propiedades típicas en CSS 2.2. Inserción de CSS en HTML 3. Herencia de propiedades en CSS
4. Declaración avanzada de CSS 4.1. Selectores 4.2. Regla de agrupación 5. Conclusiones
Hojas de estilo en cascada z z z
z
Cascading Style Sheets (CSS) Lenguaje que permite decorar y personalizar documentos estructurados. El objetivo es la separación del contenido de la presentación: documentos independientes de plataforma, vendedor y dispositivo. Simplifican la escritura de páginas web y facilitan el mantenimiento.
Curso 2008/2009
Arquitecturas Distribuidas
3
Hojas de estilo en cascada z Mejora
la eficacia de transmisión:
– Elimina la necesidad de imágenes invisibles o
que sólo contienen letras. – La información de estilo sólo se envía una vez. z Puede
definirse una hoja de estilo para cada medio destino: navegador gráfico, navegador por voz, navegador braille, etc.
Curso 2008/2009
Arquitecturas Distribuidas
4
Declaración de CSS z Un
CSS es un conjunto de reglas (selector + declaraciones) que determinan propiedades: SELECTOR { propiedad_1: valor_1; ...; propiedad_n: valor_n} ¿A qué elementos afecta?
Curso 2008/2009
¿Qué valor tienen las propiedades? Arquitecturas Distribuidas
5
Declaración de CSS z Ejemplo
de CSS simple:
H1 {color: green}
Afecta a los encabezados de primer nivel: H1
Curso 2008/2009
Asigna a la propiedad “color” el valor “verde”
Arquitecturas Distribuidas
6
Declaración de CSS z Otro
ejemplo de CSS simple:
H1 {color: green; font-style: italic}
Afecta a los encabezados de primer nivel: H1
Curso 2008/2009
Asigna a la propiedad “color” el valor “verde”, y al “estilo de fuente” el valor “cursivas”
Arquitecturas Distribuidas
7
Propiedades típicas CSS z
Propiedades: – – – – – – – – –
Fuentes CSS1 Colores Márgenes CSS2 Alineados Sombreados Dirección del texto Pitch de la voz Azimuth etc.
Curso 2008/2009
Æ 50 propiedades Æ 120 propiedades!!
Arquitecturas Distribuidas
8
Inserción de CSS en HTML Interno a un documento Reglas
Indicación del nombre de la hoja de estilo que se usará
Externo a un documento
Curso 2008/2009
Arquitecturas Distribuidas
URL contiene fichero con las reglas 9
Inserción de CSS en HTML Como atributo de cada elemento
texto
Existen diferentes definiciones de estilo en cascada: CSS1, CSS2.
Curso 2008/2009
Arquitecturas Distribuidas
10
Herencia de propiedades en CSS z Se
denominan hojas en “cascada” ya que los elementos hijos heredan por defecto los valores de estilo de los padres. z Un elemento se caracteriza por valores específicos, heredados o por defecto (de mayor a menor preferencia, respectivamente).
Curso 2008/2009
Arquitecturas Distribuidas
11
Herencia de propiedades en CSS Ejemplo CSS Compositor clásico
Johann Sebastian Bach fue un compositor prolífico. Entre sus obras destacan:
- Conciertos de Brandendurgo
- Pasión según San Mateo
- Variaciones de Goldberg
Curso 2008/2009
ESTILO POR DEFECTO Arquitecturas Distribuidas
12
Herencia de propiedades en CSS Ejemplo CSS Compositor clásico
Johann Sebastian Bach fue un compositor prolífico. Entre sus obras destacan:
- Conciertos de Brandendurgo
- Pasión según San Mateo
- Variaciones de Goldberg
Curso 2008/2009
Arquitecturas Distribuidas
13
Herencia de propiedades en CSS Ejemplo: BODY H1 Valor por defecto del color del elemento: negro. Curso 2008/2009
P STRONG
Arquitecturas Distribuidas
UL LI
LI
LI
14
Herencia de propiedades en CSS Ejemplo: BODY H1 Cambiamos el valor al elemento BODY: rojo Curso 2008/2009
P STRONG
Arquitecturas Distribuidas
UL LI
LI
LI
15
Herencia de propiedades en CSS Ejemplo CSS body {color: red} Compositor clásico
Johann Sebastian Bach fue un compositor prolífico. Entre sus obras destacan:
- Conciertos de Brandendurgo
- Pasión según San Mateo
- Variaciones de Goldberg
Curso 2008/2009
CAMBIO EN ESTILO DEL BODY
Arquitecturas Distribuidas
16
Herencia de propiedades en CSS Ejemplo CSS body {color: red} Compositor clásico
Johann Sebastian Bach fue un compositor prolífico. Entre sus obras destacan:
- Conciertos de Brandendurgo
- Pasión según San Mateo
- Variaciones de Goldberg
Curso 2008/2009
¿QUÉ HA SUCEDIDO? Arquitecturas Distribuidas
17
Herencia de propiedades en CSS Ejemplo: BODY H1 La propiedad “color rojo” se HEREDA por todos los hijos. Curso 2008/2009
P STRONG
Arquitecturas Distribuidas
UL LI
LI
LI
18
Herencia de propiedades en CSS Ejemplo: BODY H1 La propiedad color puede ser controlada en cada elemento específico: ULÆverde STRONGÆItálica y negro Curso 2008/2009
P STRONG
Arquitecturas Distribuidas
UL LI
LI
LI
19
Herencia de propiedades en CSS Ejemplo CSS body {color: red} strong {color: black; font-style: italic} ul {color: green} Compositor clásico
Johann Sebastian Bach fue un compositor prolífico. Entre sus obras destacan:
- Conciertos de Brandendurgo
- Pasión según San Mateo
- Variaciones de Goldberg
Curso 2008/2009
CAMBIO EN ESTILO DEL UL y STRONG
Arquitecturas Distribuidas
20
Herencia de propiedades en CSS Ejemplo CSS body {color: red} strong {color: black; font-style: italics} ul {color: green} Compositor clásico
Johann Sebastian Bach fue un compositor prolífico. Entre sus obras destacan:
- Conciertos de Brandendurgo
- Pasión según San Mateo
- Variaciones de Goldberg
Curso 2008/2009
Arquitecturas Distribuidas
21
Herencia de propiedades en CSS Ejemplo: BODY H1 Puesto que UL tiene “hijos”, estos también heredan el color verde
Curso 2008/2009
P STRONG
Arquitecturas Distribuidas
UL LI
LI
LI
22
Herencia de propiedades en CSS Ejemplo CSS ul {color: green} strong {color: black; font-style: italic} body {color: red} PREFERENCIA ESTÁ DETERMINADA Compositor clásico
POR LA ESPECIFICIDAD, NO POR
Johann Sebastian Bach fue un compositor EL ORDEN DE sus prolífico. Entre obras destacan:
DECLARACIÓN.
- Conciertos de Brandendurgo
- Pasión según San Mateo
- Variaciones de Goldberg
Curso 2008/2009
Arquitecturas Distribuidas
23
Herencia de propiedades en CSS Ejemplo CSS ul {color: green} strong {color: black; font-style: italics} body {color: red} Compositor clásico
Johann Sebastian Bach fue un compositor prolífico. Entre sus obras destacan:
- Conciertos de Brandendurgo
- Pasión según San MateoIDÉNTICA!!!
- Variaciones de Goldberg
Curso 2008/2009
Arquitecturas Distribuidas
24
Declaración avanzada de CSS z Selectores: *
Selector universal (cualquier elemento): * {font-family: Arial}
Curso 2008/2009
Arquitecturas Distribuidas
25
Declaración avanzada de CSS z Selectores:
E Identifica cualquier elemento E: LI {font-family: Arial} P {color: black}
Curso 2008/2009
Arquitecturas Distribuidas
26
Declaración avanzada de CSS z Selectores:
E>F Cualquier elemento F que sea hijo de E UL>LI {font-size: 70%} OL>LI {font-size: 115%}
Curso 2008/2009
Arquitecturas Distribuidas
27
Herencia de propiedades en CSS Ejemplo CSS ol>li{font-size: 70%} ul>li{font-size: 115%}
Elemento 1 Lista no ordenada Elemento 2 Lista no ordenada - Elemento 1 Lista no ordenada
- Elemento 2 Lista no ordenada
Curso 2008/2009
LI SE VISUALIZA DIFERENTE SEGÚN QUIEN SEA EL PADRE Arquitecturas Distribuidas
28
Herencia de propiedades en CSS Ejemplo CSS ol>li{font-size: 70%} ul>li{font-size: 115%} Elemento 1 Lista no ordenada Elemento 2 Lista no ordenada - Elemento 1 Lista no ordenada
- Elemento 2 Lista no ordenada
Curso 2008/2009
Arquitecturas Distribuidas
29
Declaración avanzada de CSS z Selectores:
E F Cualquier elemento F descendiente de E H1 EM{color: blue}
Curso 2008/2009
Arquitecturas Distribuidas
30
Declaración avanzada de CSS Ejemplo CSS H1 { color: red } EM { color: red } H1 EM { color: blue } Esta cabecera es muy importante Esta palabra es también importante.
Curso 2008/2009
Arquitecturas Distribuidas
31
Declaración avanzada de CSS Ejemplo CSS H1 { color: red } EM { color: red } H1 EM { color: blue } Esta cabecera es muy importante Esta palabra es también importante.
Curso 2008/2009
Arquitecturas Distribuidas
32
Declaración avanzada de CSS z Selectores:
E+F F inmediatamente después de E H1+H2{color: red}
Curso 2008/2009
Arquitecturas Distribuidas
33
Declaración avanzada de CSS Ejemplo CSS h1 + h2 { color: red } Cabecera principal Cabecera secundaria Otra cabecera principal Parrafo intermedio Cabecera secundaria
Curso 2008/2009
Arquitecturas Distribuidas
34
Declaración avanzada de CSS Ejemplo CSS h1 + h2 { color: red } Cabecera principal Cabecera secundaria Otra cabecera principal
Parrafo intermedio Cabecera secundaria
Curso 2008/2009
Arquitecturas Distribuidas
35
Declaración avanzada de CSS Ejemplo CSS h1 + h2 { color: red } Cabecera principal Cabecera secundaria Otra cabecera principal Parrafo intermedio Cabecera secundaria
Curso 2008/2009
El selector afecta en presencia de un texto intermedio (ya que éste no es un nuevo elemento) Arquitecturas Distribuidas
36
Declaración avanzada de CSS Ejemplo CSS h1 + h2 { color: red } Cabecera principal Cabecera secundaria Otra cabecera principal Parrafo intermedio Cabecera secundaria
Curso 2008/2009
Arquitecturas Distribuidas
37
Hojas de estilo en cascada z Selectores:
E#myid Cualquier elemento E cuyo atributo “id” sea “myid” TABLE#precios {text-align: center}
Curso 2008/2009
Arquitecturas Distribuidas
38
Declaración avanzada de CSS Ejemplo CSS table#precios { text-align: center; font-style: italic }
Curso 2008/2009
Arquitecturas Distribuidas
39
Declaración avanzada de CSS Ejemplo CSS Ejemplo CSS table#precios { h1 + h2 { color: red } text-align: center; font-style: italic } Cabecera principal Cabecera secundaria Otra cabecera principal | 1 | 2 | 3 Parrafo intermedio |
| uno | dos | tres Cabecera secundaria |
Curso 2008/2009
Arquitecturas Distribuidas
40
Declaración avanzada de CSS z
Selectores: REGLA DE AGRUPACIÓN: H1 {color: red} H2 {color: red} H3 {color: red}
Es similar a:
Forma preferida: más clara, y ocupa menos bytes.
H1,H2,H3 {color: red}
Curso 2008/2009
Arquitecturas Distribuidas
41
Conclusión sobre CSS z Permite
de forma sencilla separar el contenido de su formato. – Revise los ejemplos: Observará que el formato
siempre se definió de modo independiente!
Curso 2008/2009
Arquitecturas Distribuidas
42
Conclusión sobre CSS body { padding: 0; margin: 0; font: 0.7em Tahoma, sans-serif; line-height: 1.5em; background: #fff; color: #454545; } a{ color: #E0691A; background: inherit; } a:hover { color: #6C757A; background: inherit; } h1 { font: normal 2.1em Arial, Sans-Serif; letterspacing: -1px; padding: 7px 0 0 8px; margin: 0; } .dark { color: #737373; background: inherit; font-weight: bold; } h1 a, h2 a { text-decoration: none; } h1 a:hover, h2 a:hover { color: #FF6600; background: inherit; } h2 { margin: 0; padding: 0; font: bold 1.7em Arial, Sans-Serif; letter-spacing: -1px; } p {margin: 0 0 5px 0; } ul { margin: 0; padding : 0; list-style : none; }
Curso 2008/2009
Arquitecturas Distribuidas
43
Referencias y bibliografía z
Libros: –
z
“Cascading Style Sheets, designing for the Web”, Hakon Wium Lie, Bert Bos, Addison Wesley.
En Web: – – –
http://www.w3c.org/Style/CSS/ Æ Especificación http://www.w3schools.com/css/default.asp Æ Tutorial http://www.oswd.org/ -> Open Source Web Design: miles de plantillas gratuitas
Curso 2008/2009
Arquitecturas Distribuidas
44