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
Hojas de estilo en cascada
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
Hojas de estilo en cascada
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.
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
n de CSS
Declaraci
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?
¿Qué valor tienen
las propiedades?
Curso 2008/2009
Arquitecturas Distribuidas
5
Declaracióón de CSS
n de CSS
Declaraci
Ejemplo de CSS simple:
H1 {color: green}
Afecta a los encabezados
de primer nivel: H1
Asigna a la
propiedad “color”
el valor “verde”
Curso 2008/2009
Arquitecturas Distribuidas
6
Declaracióón de CSS
n de CSS
Declaraci
Otro ejemplo de CSS simple:
H1 {color: green; font-style: italic}
Afecta a los encabezados
de primer nivel: H1
Asigna a la propiedad
“color” el valor “verde”,
y al “estilo de fuente” el
valor “cursivas”
Curso 2008/2009
Arquitecturas Distribuidas
7
Propiedades tíípicas CSS
picas CSS
Propiedades t
CSS1 50 propiedades
CSS2 120 propiedades!!
Propiedades:
– Fuentes
– Colores
– Márgenes
– Alineados
– Sombreados
– Dirección del texto
– Pitch de la voz
– Azimuth
– etc.
Curso 2008/2009
Arquitecturas Distribuidas
8
Insercióón de CSS en HTML
n de CSS en HTML
Inserci
Interno a un documento
<STYLE type="text/css">
Reglas
</STYLE>
Externo a un documento
Indicación del nombre
de la hoja de estilo que
se usará
<LINK rel="stylesheet" href=URL type="text/css">
Curso 2008/2009
Arquitecturas Distribuidas
URL contiene fichero
con las reglas
9
Insercióón de CSS en HTML
n de CSS en HTML
Inserci
Como atributo de cada elemento
<P style="font-size: 20pt"> texto </P>
Existen diferentes definiciones de estilo en
cascada: CSS1, CSS2.
Curso 2008/2009
Arquitecturas Distribuidas
10
Herencia de propiedades en CSS
Herencia de propiedades en CSS
Se denominan hojas en “cascada” ya que los
elementos hijos heredan por defecto los
valores de estilo de los padres.
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
Herencia de propiedades en CSS
<html>
<title>Ejemplo CSS</title>
<body>
<h1> Compositor clásico </h1>
<p> Johann Sebastian Bach fue un compositor
<strong> prolífico. </strong> Entre sus
obras destacan: </p>
<ul>
<li> Conciertos de Brandendurgo
<li> Pasión según San Mateo
<li> Variaciones de Goldberg
</ul>
</body>
</html>
ESTILO POR DEFECTO
Curso 2008/2009
Arquitecturas Distribuidas
12
Herencia de propiedades en CSS
Herencia de propiedades en CSS
<html>
<title>Ejemplo CSS</title>
<body>
<h1> Compositor clásico </h1>
<p> Johann Sebastian Bach fue un compositor
<strong> prolífico. </strong> Entre sus
obras destacan: </p>
<ul>
<li> Conciertos de Brandendurgo
<li> Pasión según San Mateo
<li> Variaciones de Goldberg
</ul>
</body>
</html>
Curso 2008/2009
Arquitecturas Distribuidas
13
Herencia de propiedades en CSS
Herencia de propiedades en CSS
Ejemplo:
H1
Valor por defecto
del color del
elemento: negro.
BODY
P
UL
STRONG
LI
LI
LI
Curso 2008/2009
Arquitecturas Distribuidas
14
Herencia de propiedades en CSS
Herencia de propiedades en CSS
Ejemplo:
H1
BODY
P
UL
Cambiamos el valor
al elemento BODY:
rojo
STRONG
LI
LI
LI
Curso 2008/2009
Arquitecturas Distribuidas
15
Herencia de propiedades en CSS
Herencia de propiedades en CSS
<html>
<title>Ejemplo CSS</title>
<style>body {color: red}
</style>
<body>
<h1> Compositor clásico </h1>
<p> Johann Sebastian Bach fue un compositor
<strong> prolífico. </strong> Entre sus
obras destacan: </p>
<ul>
<li> Conciertos de Brandendurgo
<li> Pasión según San Mateo
<li> Variaciones de Goldberg
</ul>
</body>
</html>
CAMBIO EN ESTILO
DEL BODY
16
Curso 2008/2009
Arquitecturas Distribuidas
Herencia de propiedades en CSS
Herencia de propiedades en CSS
<html>
<title>Ejemplo CSS</title>
<style>body {color: red}
</style>
<body>
<h1> Compositor clásico </h1>
<p> Johann Sebastian Bach fue un compositor
<strong> prolífico. </strong> Entre sus
obras destacan: </p>
<ul>
<li> Conciertos de Brandendurgo
<li> Pasión según San Mateo
<li> Variaciones de Goldberg
</ul>
</body>
</html>
Curso 2008/2009
Arquitecturas Distribuidas
¿QUÉ HA SUCEDIDO?
17
Herencia de propiedades en CSS
Herencia de propiedades en CSS
Ejemplo:
H1
BODY
P
UL
La propiedad “color
rojo” se HEREDA
por todos los hijos.
STRONG
LI
LI
LI
Curso 2008/2009
Arquitecturas Distribuidas
18
Herencia de propiedades en CSS
Herencia de propiedades en CSS
Ejemplo:
H1
La propiedad color
puede ser controlada en
cada elemento
específico: ULverde
STRONGItálica y negro
BODY
P
UL
STRONG
LI
LI
LI
Curso 2008/2009
Arquitecturas Distribuidas
19
Herencia de propiedades en CSS
Herencia de propiedades en CSS
<html>
<title>Ejemplo CSS</title>
<style>body {color: red}
strong {color: black; font-style: italic}
ul {color: green}
</style>
<body>
<h1> Compositor clásico </h1>
<p> Johann Sebastian Bach fue un compositor
<strong> prolífico. </strong> Entre sus
obras destacan: </p>
<ul>
<li> Conciertos de Brandendurgo
<li> Pasión según San Mateo
<li> Variaciones de Goldberg
</ul>
</body>
</html>
CAMBIO EN ESTILO
DEL UL y STRONG
20
Curso 2008/2009
Arquitecturas Distribuidas
Herencia de propiedades en CSS
Herencia de propiedades en CSS
<html>
<title>Ejemplo CSS</title>
<style>body {color: red}
strong {color: black; font-style: italics}
ul {color: green}
</style>
<body>
<h1> Compositor clásico </h1>
<p> Johann Sebastian Bach fue un compositor
<strong> prolífico. </strong> Entre sus
obras destacan: </p>
<ul>
<li> Conciertos de Brandendurgo
<li> Pasión según San Mateo
<li> Variaciones de Goldberg
</ul>
</body>
</html>
Arquitecturas Distribuidas
Curso 2008/2009
21
Herencia de propiedades en CSS
Herencia de propiedades en CSS
Ejemplo:
H1
BODY
P
UL
Puesto que UL tiene
“hijos”, estos también
heredan el color verde
STRONG
LI
LI
LI
Curso 2008/2009
Arquitecturas Distribuidas
22
Herencia de propiedades en CSS
Herencia de propiedades en CSS
<html>
<title>Ejemplo CSS</title>
<style>ul {color: green}
strong {color: black; font-style: italic}
body {color: red}
</style>
PREFERENCIA ESTÁ
<body>
DETERMINADA POR LA
<h1> Compositor clásico </h1>
ESPECIFICIDAD, NO POR
<p> Johann Sebastian Bach fue un compositor
EL ORDEN DE
<strong> prolífico. </strong> Entre sus
obras destacan: </p>
DECLARACIÓN.
<ul>
<li> Conciertos de Brandendurgo
<li> Pasión según San Mateo
<li> Variaciones de Goldberg
</ul>
</body>
</html>
Arquitecturas Distribuidas
Curso 2008/2009
23
Herencia de propiedades en CSS
Herencia de propiedades en CSS
<html>
<title>Ejemplo CSS</title>
<style>ul {color: green}
strong {color: black; font-style: italics}
body {color: red}
</style>
<body>
<h1> Compositor clásico </h1>
<p> Johann Sebastian Bach fue un compositor
<strong> prolífico. </strong> Entre sus
obras destacan: </p>
<ul>
<li> Conciertos de Brandendurgo
<li> Pasión según San Mateo
<li> Variaciones de Goldberg
</ul>
</body>
</html>
IDÉNTICA!!!
Curso 2008/2009
Arquitecturas Distribuidas
24
Declaracióón avanzada de CSS
n avanzada de CSS
Declaraci
Selectores:
* Selector universal (cualquier elemento):
* {font-family: Arial}
Curso 2008/2009
Arquitecturas Distribuidas
25
Declaracióón avanzada de CSS
n avanzada de CSS
Declaraci
Selectores:
E Identifica cualquier elemento E:
LI {font-family: Arial}
P {color: black}
Curso 2008/2009
Arquitecturas Distribuidas
26
Declaracióón avanzada de CSS
n avanzada de CSS
Declaraci
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
Herencia de propiedades en CSS
<html>
<title>Ejemplo CSS</title>
<style>ol>li{font-size: 70%}
ul>li{font-size: 115%}
</style>
<body><ol>
</ol>
<ul>
</ul>
</body>
</html>
<li> Elemento 1 Lista no ordenada
<li> Elemento 2 Lista no ordenada
<li> Elemento 1 Lista no ordenada
<li> Elemento 2 Lista no ordenada
LI SE VISUALIZA DIFERENTE
SEGÚN QUIEN SEA EL PADRE
Curso 2008/2009
Arquitecturas Distribuidas
28
Herencia de propiedades en CSS
Herencia de propiedades en CSS
<html>
<title>Ejemplo CSS</title>
<style>ol>li{font-size: 70%}
ul>li{font-size: 115%}
</style>
<body><ol>
</ol>
<ul>
</ul>
</body>
</html>
<li> Elemento 1 Lista no ordenada
<li> Elemento 2 Lista no ordenada
<li> Elemento 1 Lista no ordenada
<li> Elemento 2 Lista no ordenada
Curso 2008/2009
Arquitecturas Distribuidas
29
Declaracióón avanzada de CSS
n avanzada de CSS
Declaraci
Selectores:
E F Cualquier elemento F descen
Crear cuenta
Comentarios de: III. Hojas de estilo en cascada (CSS) (0)
No hay comentarios