CSS01 JoseLuis

DISEO DE PGINAS WEB CON CONTENIDOS MULTIMEDIA
Hojas de estilo en cascada
Primera parte: generalidades

Por: Jose Luis Bernier Villamor
Coordinador del Equipo Web de la ETSIIT
ETSIIT GRANADA
Ceuta 9 - 13 Julio 2007 1

DISEO DE PGINAS WEB CON CONTENIDOS MULTIMEDIA
Introduccin
Ubicacin del cdigo CSS
Concepto de cascada
Concepto de herencia
Definicin de estilos para etiquetas
Definicin de estilos para clases
Definicin de estilos para pseudo-clases
Definicin de estilos para pseudo-elementos
Conclusiones

INTRODUCCIN

INTRODUCCIN

INTRODUCCIN
Todas las pginas mostradas

tienen el mismo cdigo HTML.
Por defecto, el navegador

mostrara sto
Esa apariencia se puede

mejorar mediante 'hojas de
estilo'.
Otros muchos diseos de esta

misma pgina se encuentran en
http://www.csszengarden.com/

INTRODUCCIN
HTML no fue creado para disear la apariencia de las pginas web.
HTML est pensado para indicar la estructura semntica de los

documentos que se muestran en la web.
Por ejemplo, en HTML:

<h1>Introduccin</h1>
<h1> indica que 'Introduccin' es el ttulo principal de la pgina,

pero no el cmo hay que mostrarlo (ni tamao, ni color, ni
alineacin, etc).
La persona que dise el navegador decidi el efecto visual que
tendra <h1> sobre el texto.

INTRODUCCIN
Para mejorar la apariencia de las pginas se usaron distintas vas:
Extensiones propietarias del HTML (soluciones propias de

Netscape y de Microsoft)
Conversin de texto en imgenes de texto para hacerle
mantener el mismo aspecto en cualquier navegador.
Imgenes para controlar los espacios en blanco y otros
efectos.
Tablas para controlar el diseo global de la pgina.
Programas o scripts en lugar del marcado HTML...
Estas tcnicas aumentan considerablemente la complejidad de las

pginas web, tienen escasa flexibilidad y problemas de
compatibilidad.

INTRODUCCIN: HOJAS DE ESTILO
Finalmente, el W3C decidi que el camino ms adecuado para

controlar la apariencia de las etiquetas HTML era mediante el uso de
hojas de estilo.
En una pgina web:
Con etiquetas HTML se define la estructura del documento

(su semntica).
Con definiciones de estilos se describe la apariencia (el

formato de presentacin).

INTRODUCCIN: HOJAS DE ESTILO
Las hojas de estilo en cascada (CSS, Cascading Style Sheets) definen

el efecto visual que tendrn las distintas etiquetas HTML.
Actualmente est en proceso de aprobacin la tercera especificacin

de CSS (CSS3).
No todos los navegadores pueden manejar hojas de estilo:

CSS1 es totalmente soportado por IE6 (y superiores), Firefox y
Opera.
CSS2 es parcialmente soportado por los navegadores modernos.
En este curso describiremos CSS1 y parte de CSS2.

UBICACIN DEL CDIGO CSS
Opcin 1:
En la propia etiqueta, usando el atributo style
<p style="font-family: Arial; font-size:12px;">

Este texto se ve en Arial de 12 pixeles de tamao
</p>
Ceuta 9 - 13 Julio 2007 10

El atributo style se puede aplicar en cada etiqueta HTML.
Desventajas:
Si varias partes de la pgina usan el mismo cdigo, hay que

repetirlo en todas las etiquetas correspondientes.
Dificultad para modificar los estilos.
Mezcla de cdigo HTML y cdigo CSS
Ceuta 9 - 13 Julio 2007 11

Opcin 2:
En la seccin head dentro de una etiqueta style
<head>
<style type="text/css">
h1 {color: #00ff00}
h2 {color: #dda0dd}
p {color: rgb(0,0,255)}
</style>
</head>
Ceuta 9 - 13 Julio 2007 12

Es frecuente encerrar el cdigo entre comentarios por compatibilidad

con los navegadores ms antiguos.
<head>

</style>
</head>
Ceuta 9 - 13 Julio 2007 13

Ventajas:
El estilo afecta a todas las etiquetas del mismo tipo.

Mayor flexibilidad para modificar el estilo de las etiquetas.
Desventajas:
Mezcla de cdigo HTML y cdigo CSS en el mismo documento

El estilo es exclusivo de ese documento.
Ceuta 9 - 13 Julio 2007 14

Opcin 3:
En un fichero externo, independiente del documento HTML
En la cabecera del documento .html se debe indicar la inclusin

del fichero que contiene la definicin de estilos:
<head>
<link rel="stylesheet" type="text/css"
href="hoja.css">
</head>
Ceuta 9 - 13 Julio 2007 15

Alternativamente, puede usarse la siguiente sintaxis:
<head>
<style type=text/css>
@import url("hoja_estilo.css")
</style>
</head>
En cualquier caso, el fichero externo es un fichero de texto que

nicamente contiene las definiciones de estilos.
Ceuta 9 - 13 Julio 2007 16

Ventajas de usar fichero externo:
Aislamiento de HTML y CSS
Distintos documentos .html pueden compartir los mismos estilos
Modificando el fichero de estilos, se modifica el formato de la

pgina, sin tener que modificar el cdigo de la misma (como en
CSS Zen Garden)
Ceuta 9 - 13 Julio 2007 17

CONCEPTO DE CASCADA
Los estilos pueden definirse en varios sitios:
En la propia etiqueta con el atributo style
En la seccin head mediante la etiqueta style
En un fichero externo que se incluya desde la seccin head
Por defecto, cada navegador tiene ya predefinido un estilo
Si aparecen conflictos: qu estilo se usar?
Ceuta 9 - 13 Julio 2007 18

CONCEPTO DE CASCADA
Si hay solapamiento se aplican los estilos en el siguiente orden (en

cascada):
1. El estilo por defecto

2. El estilo definido en un fichero externo
3. El estilo definido en la seccin head mediante la etiqueta style
4. El estilo definido propia etiqueta con el atributo style
Es decir, siempre tendr ms prioridad el que ms cerca se

encuentre la definicin de estilos de la etiqueta a la que
afecta.
Ceuta 9 - 13 Julio 2007 19

CONCEPTO DE HERENCIA
Se puede considerar una relacin padre-hijo para las etiquetas

HTML:
<body>
<p>
Aqu, p es hijo de body.
<b>Y b desciende de p</b>
</p>
</body>
Si se define un estilo para <body>, ste sera heredado por <p> y a

su vez por <b>.
Si se define un estilo para <p>, lo hereda <b>.
Ceuta 9 - 13 Julio 2007 20

<html>
<head>
body {color: blue; text-decoration: underline}
</style>
</head>
<body>
<h1>This is header 1</h1>
<p>This is a paragraph</p>
</body>
</html>
<h1>, <h2>, <p> han heredado los estilos definidos para <body>
Ceuta 9 - 13 Julio 2007 21

<html>
<head>
body {color: blue; text-decoration: underline}
p {color: red}
</style>
</head>
<body>
<p>This is a paragraph</p>
</body>
</html>
En este caso, <p> ha heredado slo algunas propiedades

Las propiedades no especificadas se heredan de los padres.
Ceuta 9 - 13 Julio 2007 22
DEFINICIN DE ESTILOS PARA ETIQUETAS
Se puede especificar el estilo de una etiqueta HTML indicando el valor

deseado para sus propiedades:
p {font-family: "sans serif"}

p {color: red}
p {text-align: center}
h1 {color: green}
Agrupamiento de propiedades:
p {font-family: "sans serif"; color: red; text-align: center}
Ceuta 9 - 13 Julio 2007 23

<html>
<head>
h1 {color: green}
p {font-family: "sans serif"; color: red; text-align: center}
</style>
</head>
<body>
<h1>Prueba de estilos</h1>
<p>Esto es una prueba</p>
</body>
</html>
Ceuta 9 - 13 Julio 2007 24

Agrupamiento de etiquetas:
h1 {color: red}
h2 {color: red}
h3 {color: red}
h4 {color: green}
h5 {color: green}
p {color: red}
Si usan los mismos valores de propiedades, las definiciones de estilos

de distintas etiquetas pueden agruparse:
h1, h2, h3, p {color: red}
h4, h5 {color: green}
Ceuta 9 - 13 Julio 2007 25

Ejercicio 1
Realice una pgina web que use las etiquetas <h1>, <h2>, <p>, <i> y
<b>, y defina distintas combinaciones de estilos para ellas usando las
siguientes propiedades:
color: podr ser red, blue, black, yellow, green

text-align: center, right, left
text-decoration: underline, overline, line-through, none
font-size: xx-small, x-small, small, medium, large, x-large, xx-large
font-style: normal, italic, oblique
Pruebe a usar un fichero externo para guardar las definiciones de estilos e

inclyalo desde otras pginas que haya realizado previamente.
Ceuta 9 - 13 Julio 2007 26

Definicin dependiente del contexto

strong {color: green; font-size:16px}
h1 {color: black; font-size: 20px}
h1 strong {color: red}
p strong {color: brown; text-decoration:underline}
En el ejemplo se han definido distintos estilos para <strong>, que se

aplicarn segn sea hijo de un elemento <h1>, de <p> u otros.
Ceuta 9 - 13 Julio 2007 27

Definicin dependiente de atributos:

table {background-color: yellow}
td[colspan] {color: yellow; background-color: blue}
td[colspan="3"] {font-style:italic}
En este caso, si una celda se expande mediante colspan, se aplicar un

estilo distinto, adems si colspan=3 el estilo vuelve a variar.
Ceuta 9 - 13 Julio 2007 28

DEFINICIN DE ESTILOS MEDIANTE CLASES
Las definiciones de estilos anteriores:

Son dependientes de las etiquetas para las que estn definidos
Una misma etiqueta siempre tendr el mismo estilo
Hay veces en que interesa crear estilos independientes de las etiquetas,

que se puedan aplicar sobre distintas etiquetas y que adems
permitan aplicar estilos diversos a una misma etiqueta.
Para ello se usan las definiciones de clases de estilos:

Se define una clase genrica de estilo, no vinculada a ninguna
etiqueta concreta.
La clase se puede aplicar sobre cualquier etiqueta
Ceuta 9 - 13 Julio 2007 29

Las clases se definen como:

.estilo1 {color: green; font-size: small}
.estilo2 {color: black; font-size: large;
text-decoration: overline}
.estilo3 {font-style: italic;
background-color: yellow}
Para usar un estilo concreto en una etiqueta se usa el atributo class

<p class=estilo1>ste es el estilo 1</p>
<p class=estilo2>Y stos son el 2 y
<strong class=estilo3>el 3</strong></p>
Ceuta 9 - 13 Julio 2007 30

Las definiciones de clases puede combinarse con la de etiquetas:

p.estilo1 {color: green; font-size: small}
a.estilo1 {color: blue; text-decoration: line-through}
b.estilo1 {color: blue; background-color: yellow;
text-decoration: underline}
estilo1 difiere segn se aplique a un elemento <p>, a un elemento <a>

o sobre <b>
Ceuta 9 - 13 Julio 2007 31

Ejercicio 2
Realice una pgina web que use la etiqueta <p> con 3 estilos distintos
definidos mediante clases, aplique esas mismas clases sobre 3 enlaces
distintos.
Disee una tabla con 4 filas y 4 columnas en la cual las celdas de las filas
1 y 3 tengan el color de fondo gris, y las de las filas 2 y 4 lo tengan de
color naranja. Defina los estilos td.par y td.impar para ello.
Particularice los estilos para el caso en que se expandan columnas, de
forma que el color de fondo sea distinto al que le correspondera.
El color de fondo se fija mediante la propiedad background-color.
Ceuta 9 - 13 Julio 2007 32

ESTILOS PARA PSEUDO-CLASES
Algunas etiquetas, como <a>, admiten unos modificadores sobre los

que se pueden definir estilos distintos que se aplicarn
automticamente:
link: estilo para enlaces an no visitados
visited: estilo para enlaces ya visitados
active: estilo cuando se pulsa sobre un enlace
hover: estilo para cuando pasamos el ratn sobre el enlace
Para definir los estilos de las pseudo-clases:

a {text-decoration:none; color:blue}
a:hover {text-decoration:underline}
a:active {color:green}
El enlace se ver azul, pero cuando pasemos sobre l se subrayar y si
lo pulsamos se volver verde.
Ceuta 9 - 13 Julio 2007 33
ESTILOS PARA PSEUDO-ELEMENTOS
Son elementos que dependen del contexto y a los que se les puede
especificar un estilo determinado.
first-letter: estilo para el primer carcter del elemento
first-line: estilo para la primera lnea de un elemento
Para definir los estilos de los pseudo-elementos:

h3:first-letter {font-size: xx-large; color: red}
p:first-line {font-variant: small-caps}
p:first-letter {font-size: xx-large;
color: blue;
font-family:"Coronet"}
Ceuta 9 - 13 Julio 2007 34

Ejercicio 3
Realice una pgina web que muestre un enlace. Defina un color distinto
para cada pseudo-clase de la etiqueta <a> y compruebe el efecto
conseguido.
Defina estilos particulares para los pseudo-elementos :first-letter y :first-

line de un prrafo. Puede usar las propiedades font-size, font-style, color,
background-color, etc.
Ceuta 9 - 13 Julio 2007 35

CONCLUSIONES
Mediante CSS se pueden modificar las propiedades de formato

asociadas a las etiquetas de HTML
La definicin de estilos puede hacerse:

En las propias etiquetas a travs del atributo style
En la seccin head mediante una etiqueta style
En un fichero externo que se incluya en el documento .html mediante la
etiqueta link o la instruccin @import
Los estilos pueden definirse para:

Etiquetas concretas
Clases que se aplicarn a diversas etiquetas mediante el atributo class
Pseudo-clases: link, visited, active y hover
Pseudo-elementos: first-letter y first-line
Ceuta 9 - 13 Julio 2007 36

CSS01 JoseLuis

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CSS01 JoseLuis

Uploaded by

Copyright:

Available Formats

DISEO DE PGINAS WEB CON CONTENIDOS MULTIMEDIA

Hojas de estilo en cascada

Primera parte: generalidades

Ceuta 9 - 13 Julio 2007 1

Ceuta 9 - 13 Julio 2007 2

Ceuta 9 - 13 Julio 2007 3

Ceuta 9 - 13 Julio 2007 4

Todas las pginas mostradas

Por defecto, el navegador

Esa apariencia se puede

Otros muchos diseos de esta

Ceuta 9 - 13 Julio 2007 5

HTML no fue creado para disear la apariencia de las pginas web.

HTML est pensado para indicar la estructura semntica de los

Por ejemplo, en HTML:

<h1> indica que 'Introduccin' es el ttulo principal de la pgina,

Ceuta 9 - 13 Julio 2007 6

Para mejorar la apariencia de las pginas se usaron distintas vas:

Extensiones propietarias del HTML (soluciones propias de

Estas tcnicas aumentan considerablemente la complejidad de las

Ceuta 9 - 13 Julio 2007 7

Finalmente, el W3C decidi que el camino ms adecuado para

En una pgina web:

Con etiquetas HTML se define la estructura del documento

Con definiciones de estilos se describe la apariencia (el

Ceuta 9 - 13 Julio 2007 8

Las hojas de estilo en cascada (CSS, Cascading Style Sheets) definen

Actualmente est en proceso de aprobacin la tercera especificacin

No todos los navegadores pueden manejar hojas de estilo:

En este curso describiremos CSS1 y parte de CSS2.

Ceuta 9 - 13 Julio 2007 9

<p style="font-family: Arial; font-size:12px;">

Ceuta 9 - 13 Julio 2007 10

El atributo style se puede aplicar en cada etiqueta HTML.

Si varias partes de la pgina usan el mismo cdigo, hay que

Dificultad para modificar los estilos.

Mezcla de cdigo HTML y cdigo CSS

Ceuta 9 - 13 Julio 2007 11

Ceuta 9 - 13 Julio 2007 12

Es frecuente encerrar el cdigo entre comentarios por compatibilidad

Ceuta 9 - 13 Julio 2007 13

El estilo afecta a todas las etiquetas del mismo tipo.

Mezcla de cdigo HTML y cdigo CSS en el mismo documento

Ceuta 9 - 13 Julio 2007 14

En la cabecera del documento .html se debe indicar la inclusin

Ceuta 9 - 13 Julio 2007 15

Alternativamente, puede usarse la siguiente sintaxis:

En cualquier caso, el fichero externo es un fichero de texto que

Ceuta 9 - 13 Julio 2007 16

Ventajas de usar fichero externo:

Aislamiento de HTML y CSS

Distintos documentos .html pueden compartir los mismos estilos

Modificando el fichero de estilos, se modifica el formato de la

Ceuta 9 - 13 Julio 2007 17

Los estilos pueden definirse en varios sitios:

En la propia etiqueta con el atributo style

En la seccin head mediante la etiqueta style

En un fichero externo que se incluya desde la seccin head

Por defecto, cada navegador tiene ya predefinido un estilo

Si aparecen conflictos: qu estilo se usar?

Ceuta 9 - 13 Julio 2007 18

Si hay solapamiento se aplican los estilos en el siguiente orden (en

1. El estilo por defecto