Análisis y Diseño de Sistemas de
I f
Información para Internet
ió
I
2 CSS
2. 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.
Otros medios de salid
salida
Universidad Pontificia de Salamanca (Campus Madrid)
Luis Rodríguez Baena, Facultad de Informática, 2009
2
Introducción a CSS (II)
Ventajas:
● 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.
mismos estilos a todas sus páginas.
● Amplía las posibilidades de presentación de HTML al permitir mucho
más control.
tener que modificarlo
tener que modificarlo.
● Permite presentar el mismo contenido de diferentes formas sin
● Permite que los usuarios con necesidades especiales creen sus
propias hojas de estilo para ver el contenido según sus
preferencias.
D
Desventajas:
t j
● 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, 2009
3
Introducción a CSS (III)
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, 2009
4
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, 2009
5
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, 2009
6
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, 2009
7
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, 2009
8
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 pueden
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, 2009
9
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, 2009
10
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, 2009
11
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, 2009
12
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ódigo</p>
o … el contenido del elemento em heredará las características asignadas al
No se heredan todas las propiedade
Comentarios de: 2. CSS (0)
No hay comentarios