PDF de programación - 5. CSS

Análisis y Diseño de Sistemas de
I f
Información para Internet

ió

I

5 CSS
5. CSS

Luís Rodríguez Baena ([email protected])

Universidad Pontificia de Salamanca (campus Madrid)
Facultad de Informática

Introducción a CSS

CSS (CascadeStyle Sheets) es un estándar del W3C que define las
reglas para la presentación del contenido de un documento html o
reglas para la presentación del contenido de un documento html o
xhtml.
● Permite definir el aspecto de un elemento o un grupo de elementos dentro de un

documento.

Ventajas:
Ventajas:

modificarlo.

q

Desventajas:

● Simplifica el código de las páginas web.
● Optimiza el rendimiento de los navegadores.
● Permite dar una apariencia homogénea a un sitio web al aplicar los mismos

estilos a todas sus páginas
estilos a todas sus páginas.

● Amplía las posibilidades de presentación de HTML al permitir mucho más control.
● Permite presentar el mismo contenido de diferentes formas sin tener que

● Permite que los usuarios con necesidades especiales creen sus propias hojas de

p p

p

j

estilo para ver el contenido según sus preferencias.

● No todos los navegadores soportan por igual todas las características de CSS.

Universidad Pontificia de Salamanca (Campus Madrid)

Luis Rodríguez Baena, Facultad de Informática, 2008

2

Introducción a CSS (II)

El estándar CSS.

como CSS nivel 1.

● En 1996, el W3C aprueba la primera versión del estándar, conocida

ó

á

● En mayo de 1998, se aprueba la segunda versión CSS nivel 2.

Las especificaciones están recogidas en www.w3.org/TR/1998/REC
Las especificaciones están recogidas en www.w3.org/TR/1998/REC-
CSS2-19980512/.

o Existe una traducción al español en

www.sidar.org/recur/desdi/traduc/es/css/cover.html.

● La recomendación actual del W3C es CSS nivel 2, revisión 1.

Presenta pocos cambios frente a la versión anterior.

o Corrige algunas erratas de la especificación, elimina propiedades no

implementadas por los navegadores, elimina propiedades no incluidas en
CSS 3, etc.

Las especificaciones están recogidas en www w3 org/TR/CSS21/
Las especificaciones están recogidas en www.w3.org/TR/CSS21/.

o Existe una traducción al español en www.w3.org/Style/css21-

updates/css2.1_spa.pdf.

● Actualmente está bajo desarrollo CSS nivel 3.

Universidad Pontificia de Salamanca (Campus Madrid)

Luis Rodríguez Baena, Facultad de Informática, 2008

3

Introducción a CSS
Modo de funcionamiento

Cuando una aplicación de usuario procesa un documento

p

p

fuente:
● Analiza el documento y crea su estructura.
● Identifica el tipo de medios (pantalla, impresora, sonido) al que
p

(p

p

q

)

va dirigido.

,

,

● Recupera todas las hojas de estilo asociadas al documento que

estén especificadas al tipo de medio.

● Toma nota de cada elemento de la estructura, asignando un

valor individual a cada propiedad según el tipo de medio.
Estos valores se asignan según los mecanismos de cascada y

herencia
herencia.

● A partir de la estructura del documento genera una estructura

de formato.

● Transfiere la estructura del formato al medio al que está dirigido.
● Transfiere la estructura del formato al medio al que está dirigido.

Universidad Pontificia de Salamanca (Campus Madrid)

Luis Rodríguez Baena, Facultad de Informática, 2008

4

Introducción a CSS
Añadir estilos a un documento

Existen tres formas de añadir estilos a un documento:

● Estilos en línea.

cada elemento.

El atributo style de todos elementos html permite añadir estilos particulares a

Se aplica al elemento que contiene el atributo.
No es recomendable su utilización.

o No separa la presentación del contenido.
o Dificulta la modificación de la presentación.

● Hojas de estilo incrustadas.

j
Se incluyen en el elemento head, mediante la etiqueta style.

o Se utiliza con el atributo type con el valor "text/css".

Se aplica a todos los elementos del documento.

● Hojas de estilo externas.
Hojas de estilo externas.

Las definiciones de los estilos se almacenan en un archivo de texto

independiente.

Se aplica a todos los documentos que enlacen con el archivo mediante…

<link href="nombre_archivo" rel="stylesheet" type="text/css" />

Universidad Pontificia de Salamanca (Campus Madrid)

Luis Rodríguez Baena, Facultad de Informática, 2008

5

Introducción a CSS
Añadir estilos a un documento

Enlace con una hoja de

estilos externa

Hoja de estilos incrustada

Estilos en línea

Universidad Pontificia de Salamanca (Campus Madrid)

Luis Rodríguez Baena, Facultad de Informática, 2008

6

Sintaxis

Tanto las hojas de estilo externas, como las hojas de estilo incrustadas están

formadas por una serie de declaraciones
formadas por una serie de declaraciones.
● Estos estamentos pueden ser de dos clases:

Reglas.
Reglas arroba.

Reglas:

Atributo

Selector
h1 { background-color :red ;

Valor del atributo

color:white;
}
}

● Están formadas por:

Un selector.
Una o varias parejas formadas por:

o Un atributo.
o Valor del atributo.

El atributo y su valor están separados por dos puntos (:).
Cada pareja está separada por punto y coma (;).
Todas las parejas están encerradas entre llaves.

Universidad Pontificia de Salamanca (Campus Madrid)

Luis Rodríguez Baena, Facultad de Informática, 2008

7

Sintaxis (II)

Reglas arroba.

l

i

C

á t

● Comienzan por el carácter arroba (@).
b (@)
● A continuación aparece un identificador.
● Pueden llevar un conjunto de declaraciones.
● Permiten dar información adicional al navegador.
● Ejemplos:

Ej

l

@import "otrahoja.css"

Añade en el lugar que aparece la hoja de estilos otrahoja.css.

@media print{
}

* {font-size: xx-large;}

Incorpora estilos especiales cuando el medio de salida es la impresora.

C
Comentarios.

t

i

● Tanto las hojas de estilo incrustadas como las hojas de estilo en línea puede

incluir comentarios.

Los comentarios se hacen al modo de C:

o /* comentario */
o / comentario /

Universidad Pontificia de Salamanca (Campus Madrid)

Luis Rodríguez Baena, Facultad de Informática, 2008

8

Cascada

Cascada.

● El estilo de un elemento puede repetirse tanto en una hoja de

estilo externa, una hoja incrustada o en un estilo en línea.

● Además mediante la regla arroba @import permite importar
● Además, mediante la regla arroba @import, permite importar

estilos desde otras hojas de estilo.
@import "hoja_de_estilo.css";
@import url("hoja de estilo.css");
@import url( hoja_de_estilo.css );
Estas declaraciones deberían ir antes que cualquier otra regla en la

hoja de estilo.

● En todas estas definiciones se ha establecido un orden de
● En todas estas definiciones se ha establecido un orden de

prioridades en la cascada para determinar el estilo del elemento.

Universidad Pontificia de Salamanca (Campus Madrid)

Luis Rodríguez Baena, Facultad de Informática, 2008

9

Cascada (II)

El orden de la cascada.

● Una hoja de estilo puede tener tres orígenes.

í

El autor, a través de la definición de estilos.
El usuario.

p

o También puede especificar su propia hoja de estilo.
o Esto es especialmente útil para aquellas personas con necesidades
El navegador, que también tiene una hoja de estilo por omisión.

especiales.

p p

p

j

í

i

● Estos tres orígenes tienen un orden de cascada que determina las

características de presentación de un elemento, aunque éste
aparezca en varios lugares.

é
● Algunas reglas pueden tener la declaración !important.

ió d

Una regla declarada como !important, tendrá más prioridad que una

p

d

g

p

l

,

q

regla normal.

p {font-size: 2em !important}

Esta declaración permite a los usuarios con necesidades especiales

hacer que prevalezcan sus estilos frente a los estilos del autor.

Universidad Pontificia de Salamanca (Campus Madrid)

Luis Rodríguez Baena, Facultad de Informática, 2008

10

Cascada (III)

Las aplicaciones de usuario deben aplicar la siguiente orden de

disposición
disposición.
● Encontrar todas las declaraciones que se aplican a la propiedad de un elemento

concreto para el tipo de medio al que está dirigido.

● Clasificar por la importancia y origen las distintas declaraciones. De menos a más

prioridad:
prioridad:

1. Hojas de estilo del navegador.
2. Hojas de estilo normales del usuario.
3. Hojas de estilo normales del autor.
4. Hojas de estilo importantes del autor.
5
5. Hojas de estilo importantes del usuario.
i

H j

d l

til

d

i

t

t

● Clasificar por lo específico del selector: los más específicos sustituyen a los más

generales.

● Si dos reglas tienen el mismo nivel de importancia, origen y especificad, la última

en ser especificada será la de máxima prioridad.

p

p

Las hojas de estilo importadas se consideran que están antes de cualquier otra regla.
En los estilos generados por el autor, la máxima prioridad estará en el último declarado,

es decir los estilos en línea.

o A continuación las hojas de estilo incrustadas y las hojas de estilo externas.

Universidad Pontificia de Salamanca (Campus Madrid)

Luis Rodríguez Baena, Facultad de Informática, 2008

11

Herencia

Herencia.

● Algunos valores son heredados por los elementos hijo de un

elemento.

Por ejemplo, en el código…

elemento p.

● Hay que tener en cuenta que:

<p>Este es un <em>trozo</em> de c&oacute;digo</p>
o … el contenido del elemento em heredará las características asignadas al

No se heredan todas las propiedades. Cada una define si se hereda o
A todos los elementos se les puede aplicar el valor inherit en

no.

cualquier propiedad.

o Este valor se utiliza para conseguir que un elemento