III. Hojas de estilo en cascada (CSS)
Anuncio
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
<STYLE type="text/css">
Reglas
</STYLE>
Indicación del nombre
de la hoja de estilo que
se usará
Externo a un documento
<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
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
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
<html>
<title>Ejemplo CSS</title>
<body>
<h1> Compositor cl&aacute;sico </h1>
<p> Johann Sebastian Bach fue un compositor
<strong> prol&iacute;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
ESTILO POR DEFECTO
Arquitecturas Distribuidas
12
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&iacute;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
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
<html>
<title>Ejemplo CSS</title>
<style>
body {color: red}
</style>
<body>
<h1> Compositor cl&aacute;sico </h1>
<p> Johann Sebastian Bach fue un compositor
<strong> prol&iacute;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
CAMBIO EN ESTILO
DEL BODY
Arquitecturas Distribuidas
16
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&iacute;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
¿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
<html>
<title>Ejemplo CSS</title>
<style>
body {color: red}
strong {color: black; font-style: italic}
ul {color: green}
</style>
<body>
<h1> Compositor cl&aacute;sico </h1>
<p> Johann Sebastian Bach fue un compositor
<strong> prol&iacute;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
CAMBIO EN ESTILO
DEL UL y STRONG
Arquitecturas Distribuidas
20
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&iacute;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
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
<html>
<title>Ejemplo CSS</title>
<style>
ul {color: green}
strong {color: black; font-style: italic}
body {color: red}
</style>
PREFERENCIA ESTÁ
<body>
DETERMINADA
<h1> Compositor cl&aacute;sico </h1>
POR LA
ESPECIFICIDAD, NO POR
<p> Johann Sebastian Bach fue
un
compositor
EL
ORDEN
DE sus
<strong> prol&iacute;fico. </strong> Entre
obras destacan: </p>
DECLARACIÓN.
<ul>
<li> Conciertos de Brandendurgo
<li> Pasión según San Mateo
<li> Variaciones de Goldberg
</ul>
</body>
</html>
Curso
2008/2009
Arquitecturas Distribuidas
23
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&iacute;fico. </strong> Entre sus
obras destacan: </p>
<ul>
<li> Conciertos de Brandendurgo
<li> Pasión según San MateoIDÉNTICA!!!
<li> Variaciones de Goldberg
</ul>
</body>
</html>
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
<html>
<title>Ejemplo CSS</title>
<style>
ol>li{font-size: 70%}
ul>li{font-size: 115%}
</style>
<body>
<ol>
<li> Elemento 1 Lista no ordenada
<li> Elemento 2 Lista no ordenada
</ol>
<ul>
<li> Elemento 1 Lista no ordenada
<li> Elemento 2 Lista no ordenada
</ul>
</body>
</html>
Curso 2008/2009
LI SE VISUALIZA DIFERENTE
SEGÚN QUIEN SEA EL PADRE
Arquitecturas Distribuidas
28
Herencia de propiedades en CSS
<html>
<title>Ejemplo CSS</title>
<style>
ol>li{font-size: 70%}
ul>li{font-size: 115%}
</style>
<body>
<ol>
<li> Elemento 1 Lista no ordenada
<li> Elemento 2 Lista no ordenada
</ol>
<ul>
<li> Elemento 1 Lista no ordenada
<li> Elemento 2 Lista no ordenada
</ul>
</body>
</html>
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
<html>
<title>Ejemplo CSS</title>
<style>
H1 { color: red }
EM { color: red }
H1 EM { color: blue }
</style>
<body>
<h1>Esta <span class="myclass">cabecera
es <em>muy</em> importante</span></h1>
Esta <em>palabra</em> es tambi&eacute;n
importante.
</body>
</html>
Curso 2008/2009
Arquitecturas Distribuidas
31
Declaración avanzada de CSS
<html>
<title>Ejemplo CSS</title>
<style>
H1 { color: red }
EM { color: red }
H1 EM { color: blue }
</style>
<body>
<h1>Esta <span class="myclass">cabecera
es <em>muy</em> importante</span></h1>
Esta <em>palabra</em> es tambi&eacute;n
importante.
</body>
</html>
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
<html>
<title>Ejemplo CSS</title>
<style>
h1 + h2 { color: red }
</style>
<body>
<h1> Cabecera principal </h1>
<h2> Cabecera secundaria </h2>
<h1> Otra cabecera principal </h1>
<p> Parrafo intermedio
<h2> Cabecera secundaria </h2>
</body>
</html>
Curso 2008/2009
Arquitecturas Distribuidas
34
Declaración avanzada de CSS
<html>
<title>Ejemplo CSS</title>
<style>
h1 + h2 { color: red }
</style>
<body>
<h1> Cabecera principal </h1>
<h2> Cabecera secundaria </h2>
<h1> Otra cabecera principal </h1>
<p> Parrafo intermedio
<h2> Cabecera secundaria </h2>
</body>
</html>
Curso 2008/2009
Arquitecturas Distribuidas
35
Declaración avanzada de CSS
<html>
<title>Ejemplo CSS</title>
<style>
h1 + h2 { color: red }
</style>
<body>
<h1> Cabecera principal </h1>
<h2> Cabecera secundaria </h2>
<h1> Otra cabecera principal </h1>
Parrafo intermedio
<h2> Cabecera secundaria </h2>
</body>
</html>
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
<html>
<title>Ejemplo CSS</title>
<style>
h1 + h2 { color: red }
</style>
<body>
<h1> Cabecera principal </h1>
<h2> Cabecera secundaria </h2>
<h1> Otra cabecera principal </h1>
Parrafo intermedio
<h2> Cabecera secundaria </h2>
</body>
</html>
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
<html>
<title>Ejemplo CSS</title>
<style>
table#precios {
text-align: center;
font-style: italic
}
</style>
<body>
<table id="precios">
<tr><td>1<td>2<td>3
<tr><td>uno<td>dos<td>tres
</table>
<table>
<tr><td>1<td>2<td>3
<tr><td>uno<td>dos<td>tres
</table>
</body>
</html>
Curso 2008/2009
Arquitecturas Distribuidas
39
Declaración avanzada de CSS
<html>
<html>
<title>Ejemplo CSS</title>
<title>Ejemplo CSS</title>
<style>
<style>
table#precios {
h1 + h2
{ color: red
}
text-align:
center;
</style>
font-style: italic
}
<body>
</style>
<h1> Cabecera principal </h1>
<body><h2> Cabecera secundaria </h2>
<table id="precios">
<h1> Otra
cabecera principal </h1>
<tr><td>1<td>2<td>3
<p> Parrafo
intermedio
<tr><td>uno<td>dos<td>tres
<h2>
Cabecera secundaria </h2>
</table>
</body>
<table>
</html>
<tr><td>1<td>2<td>3
<tr><td>uno<td>dos<td>tres
</table>
</body>
</html>
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
