PDF de programación - CSS: hojas de estilo en cascada

CSS: hojas de estilo en cascada

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y Computación

Universidad Complutense de Madrid

7 de mayo de 2007

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid

CSS: hojas de estilo en cascada

Visualización de una página I

1 Analizar el HTML y crear un árbol que repesenta el

documento (document tree).

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid

CSS: hojas de estilo en cascada

bodyhtmlheadstylemetadivdivdivullililipullililippVisualización de una página II

2 Identificar el medio en el que va a representar la página:

braille, embossed, handheld, print, projection, screen, speech,
tty, tv.

3 Descargar las hojas de esilo asociadas al documento y al

medio.

4 Anotar en cada nodo del árbol con cada propiedad disponible

según las hojas de estilo, si el medio es screen se aplica el
visual formatting model.

5 Generar una estructura de formato, es parecido al árbol
anterior pero puede aparecer y desaparecer información:

Si un elemento tinen el valor none en la propiedad display,
no aprece.
El las listas aparece puede aparecer una imagen bola.

No se modifica el document tree.

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid

CSS: hojas de estilo en cascada

Visualización de una página III

6 Transferir la estructura de formato al medio concreto (impimir

los resultados, mostrarlos en la ventana de un navegador
gráfico, pronunciar el texto, etc.).

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid

CSS: hojas de estilo en cascada

CSS: Cascade Style Sheets

HTML estructura lógica del documento.

CSS presentación (estilo) del documento.

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid

CSS: hojas de estilo en cascada

Principios del diseño CSS I

1 Compatibilidad, hacia adelante y hacia atrás.

2 Complemento a los documentos estructurados. Documentos

uniformes. Es fácil cambiar la apariencia de un documento sin
alterar el HTML.

3 Independecia del fabricante, plataforma y dispositivo.

4 Mantenibilidad. Si el jefe dice que los comentarios deben ir en

rojo, basta cambiar una línea

5 Mejora del rendimiento de la red.

6 Flexibilidad. Se pueden especificar información de estilo en el

navegador (user agent), del usuario, las que aparecen el
documento.

7 Riqueza. La calidad depende de la creatividad del autor.
8 Accesibilidad.

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid

CSS: hojas de estilo en cascada

Principios del diseño CSS II

Se puede controlar la apariencia del texto, no son necesarios
los “botones gráficos”.
Hace innecesario el uso de trucos para la maquetación: marcos,
imágenes invisibles, o tablas.
El modificador !important permite al usuario definir sus
necesidades.
El valor inherit mejora la generalidad de la cascada y
permite una mejor y más consitente ajuste.
Se soporta medios como braille, embossed y tty.

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid

CSS: hojas de estilo en cascada

body {

margin :0;
pad ding :0;
font - family : sans - serif ;

}

body , div # derecha , div # izquierda , h1 , h2 , h3 , h4 , h5 , h6 {

background - color :#99 FF33

}

div . lat eral {

padding - top :2 em ;

}

div . lat eral p {

margin - left :1 em ;
text - indent :0

}

div . lat eral a , div . lat eral p , div . lat eral div . iconos {

font - size : xx - small ;

}

div . lat eral ul li a {

margin - top :0.5 em ;
pad ding :0.5 em ;
dis play : block ;
background - color : yellow ;
border : 2 pt outset # FFCC00 ;

}

div . lat eral ul li a : hover {

background - color : red ;
border : 2 pt outset # CC0000 ;

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid

CSS: hojas de estilo en cascada

< head >

< meta http - equiv = " Content - Type " c onte nt = " text / html ; char set = iso -8859 -15 " >
< link rel = " s t y l e s h e e t " type = " text / css " href = " es tilo 2 . css " media = " screen " >
< title > Prueba 3 </ title >

</ head >

< style type = " text / css " media = " screen " >

/* cosas que e n t i e n d e IE6 */
@im port url ( " estilo . css " );

/* cosas que e n t i e n d e n los n a v e g a d o r e s buenos , pero no IE6 ,

oculta el men saje sin CSS */

@im port url ( " c o m p l e t o . css " ) screen ;

</ style >

<p style = " text - align : center " > Texto c e n t r a d o </ p >

1
2
3
4
5

1
2
3
4
5
6
7
8

1

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid

CSS: hojas de estilo en cascada

all

braille Dispositivos braille táctiles.

embossed Para impresoras braille.

handheld Pantalla pequeña, poco ancho de banda.

print Para ser impreso, con páginas.

projection

screen Pantallas de ordenador a color.

speech

tty Terminales con tipo de letra de ancho ficho y

capacidades limitadas.

tv Televisión, baja resolución con color.

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid

CSS: hojas de estilo en cascada

continuous/paged

visual/audio/speech/tactile

grid/bitmap

interactive/static

braille

embossed
handheld

print

projection

screen
speech

tty
tv

continuous

paged
both
paged
paged

continuous
continuous
continuous

both

tactile
tactile

visual, audio, speech

visual
visual

visual, audio

speech
visual

visual, audio

grid
grid
both

bitmap
bitmap
bitmap

N/A
grid

bitmap

both
static
both
static

interactive

both
both
both
both

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid

CSS: hojas de estilo en cascada

La cascada I

Los agentes de usuario (navegadores) deben asignar las
propiedades de la siguiente forma:

1 Si la cascada calcula un valor le asigna ese.

2 Si la propiedad es inherit, le asigna el valor del nodo padre.

3 En caso contrario le asigna el valor inicial.

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid

CSS: hojas de estilo en cascada

Preferencia en la cascada

Las hojas de estilo pueden tener 3 orígenes: autor, usuario, agente
de usuario.
Las reglas tiene un peso, si dos reglas se contradicen la de mayor
peso tiene preferencia

Las reglas del autor tienen más peso que las del usuario

Las del usuario más que la del agente de usuario.
La preferencia se puede invertir con la directiva !important.

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid

CSS: hojas de estilo en cascada

El orden de la cascada

1 Encontrar todas la reglas que se pueden aplicar a un

determinado elemento.

2 Ordenar por orden de importancia (creciente):

1 reglas del agente de usuario
2 reglas normales del usuario
3 reglas normales del autor
4 reglas importantes del autor
5 reglas importantes del usuario

3 Ordenar por concreción de la regla. Las más específicas tiene

mayor peso.

4 Si tras todo hay dos con el mismo peso, la que aparece más

tarde (en el fichero) tiene prioridad.

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid

CSS: hojas de estilo en cascada

Selectores CSS I

1 * Matches any element. Universal selector
2 E Matches any E element (i.e., an element of type E). Type

selectors

3 E F Matches any F element that is a descendant of an E

element. Descendant selectors

4 E > F Matches any F element that is a child of an element E.
Child selectors . ¡¡¡¡IE6 no lo entiende!!!! se tiene que simular
con JavaScript

5 E#myid Matches any E element with ID equal to ”myid”. ID

selectors

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid

CSS: hojas de estilo en cascada

Selectores CSS II

6 E:first-child Matches element E when E is the first child

of its parent. ¡¡¡¡IE6 no lo entiende!!!

7 E:link, E:visited Matches element E if E is the source
anchor of a hyperlink of which the target is not yet visited
(:link) or already visited (:visited). The link pseudo-classes

8 E:active, E:hover, E:focus Matches E during certain user
actions. The dynamic pseudo-classes ¡¡¡¡en IE6 sólo funciona
con etiquetas <a>...</a>!!!! se tiene que simular con
JavaScript

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid

CSS: hojas de estilo en cascada

Modelo de caja I

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid

CSS: hojas de estilo en cascada

Modelo de caja II

ul {

b a c k g r o u n d : yellow ;
margin : 12 px 12 px 12 px 12 px ;
pad ding : 3 px 3 px 3 px 3 px ;

}
li {

color : white ;
b a c k g r o u n d : blue ;
margin : 12 px 12 px 12 px 12 px ;
pad ding : 12 px 0 px 12 px 12 px ;
list - style : none

}
li . w i t h b o r d e r {

border - style : dashed ;
border - width : medium ;
border - color : lime ;

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid

CSS: hojas de estilo en cascada

Modelo de caja III

http://antares.sip.ucm.es/~luis/accesibilidadWEB05-06/ejemplos/css/ejemploLI.html

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid

CSS: hojas de estilo en cascada

Modelo de caja IV

padding del color del fondo d