CSS: hojas de estilo en cascada

Luis Fernando Llana Dıaz

Departamento de Sistemas Informaticos y ComputacionUniversidad Complutense de Madrid

7 de mayo de 2007

Luis Fernando Llana Dıaz Departamento de Sistemas Informaticos y ComputacionUniversidad Complutense de Madrid

CSS: hojas de estilo en cascada

Visualizacion de una pagina I

1 Analizar el HTML y crear un arbol que repesenta eldocumento (document tree).

body

html

head

stylemeta divdiv div

ul

lilili

p ul

li lili

p p

Luis Fernando Llana Dıaz Departamento de Sistemas Informaticos y ComputacionUniversidad Complutense de Madrid

CSS: hojas de estilo en cascada

Visualizacion de una pagina II

2 Identificar el medio en el que va a representar la pagina:braille, embossed, handheld, print, projection, screen, speech,tty, tv.

3 Descargar las hojas de esilo asociadas al documento y almedio.

4 Anotar en cada nodo del arbol con cada propiedad disponiblesegun las hojas de estilo, si el medio es screen se aplica elvisual formatting model.

5 Generar una estructura de formato, es parecido al arbolanterior pero puede aparecer y desaparecer informacion:

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 Informaticos y ComputacionUniversidad Complutense de Madrid

CSS: hojas de estilo en cascada

Visualizacion de una pagina III

6 Transferir la estructura de formato al medio concreto (impimirlos resultados, mostrarlos en la ventana de un navegadorgrafico, pronunciar el texto, etc.).

Luis Fernando Llana Dıaz Departamento de Sistemas Informaticos y ComputacionUniversidad Complutense de Madrid

CSS: hojas de estilo en cascada

CSS: Cascade Style Sheets

HTML estructura logica del documento.

CSS presentacion (estilo) del documento.

Luis Fernando Llana Dıaz Departamento de Sistemas Informaticos y ComputacionUniversidad Complutense de Madrid

CSS: hojas de estilo en cascada

Principios del diseno CSS I

1 Compatibilidad, hacia adelante y hacia atras.

2 Complemento a los documentos estructurados. Documentosuniformes. Es facil cambiar la apariencia de un documento sinalterar el HTML.

3 Independecia del fabricante, plataforma y dispositivo.

4 Mantenibilidad. Si el jefe dice que los comentarios deben ir enrojo, basta cambiar una lınea

5 Mejora del rendimiento de la red.

6 Flexibilidad. Se pueden especificar informacion de estilo en elnavegador (user agent), del usuario, las que aparecen eldocumento.

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

8 Accesibilidad.

Luis Fernando Llana Dıaz Departamento de Sistemas Informaticos y ComputacionUniversidad Complutense de Madrid

CSS: hojas de estilo en cascada

Principios del diseno CSS II

Se puede controlar la apariencia del texto, no son necesarioslos “botones graficos”.

Hace innecesario el uso de trucos para la maquetacion: marcos,imagenes invisibles, o tablas.

El modificador !important permite al usuario definir susnecesidades.

El valor inherit mejora la generalidad de la cascada ypermite una mejor y mas consitente ajuste.

Se soporta medios como braille, embossed y tty.

Luis Fernando Llana Dıaz Departamento de Sistemas Informaticos y ComputacionUniversidad Complutense de Madrid

CSS: hojas de estilo en cascada

1body{

2margin :0;

3padding :0;

4font -family:sans -serif;

5}

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

7background -color :#99 FF33

8}

9div.lateral {

10padding -top:2em;

11}

12div.lateral p {

13margin -left:1em;

14text -indent :0

15}

16div.lateral a, div.lateral p, div.lateral div.iconos{

17font -size:xx -small;

18}

19div.lateral ul li a {

20margin -top :0.5em;

21padding :0.5em;

22display:block;

23background -color:yellow;

24border: 2pt outset #FFCC00;

25}

26div.lateral ul li a:hover{

27background -color:red;

28border: 2pt outset #CC0000;

29}

Luis Fernando Llana Dıaz Departamento de Sistemas Informaticos y ComputacionUniversidad Complutense de Madrid

CSS: hojas de estilo en cascada

1<head>

2<meta http -equiv="Content -Type" content="text/html; charset=iso -8859 -15">

3<link rel="stylesheet" type="text/css" href="estilo2.css" media="screen">

4<title >Prueba 3</title >

5</head>

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

2/* cosas que entiende IE6 */

3@import url("estilo.css");

45/* cosas que entienden los navegadores buenos , pero no IE6 ,

6oculta el mensaje sin CSS */

7@import url("completo.css") screen;

8</style >

1<p style="text -align:center">Texto centrado </p>

Luis Fernando Llana Dıaz Departamento de Sistemas Informaticos y ComputacionUniversidad Complutense de Madrid

CSS: hojas de estilo en cascada

all

braille Dispositivos braille tactiles.

embossed Para impresoras braille.

handheld Pantalla pequena, poco ancho de banda.

print Para ser impreso, con paginas.

projection

screen Pantallas de ordenador a color.

speech

tty Terminales con tipo de letra de ancho ficho ycapacidades limitadas.

tv Television, baja resolucion con color.

Luis Fernando Llana Dıaz Departamento de Sistemas Informaticos y ComputacionUniversidad Complutense de Madrid

CSS: hojas de estilo en cascada

continuous/paged visual/audio/speech/tactile grid/bitmap interactive/staticbraille continuous tactile grid both

embossed paged tactile grid statichandheld both visual, audio, speech both both

print paged visual bitmap staticprojection paged visual bitmap interactive

screen continuous visual, audio bitmap bothspeech continuous speech N/A both

tty continuous visual grid bothtv both visual, audio bitmap both

Luis Fernando Llana Dıaz Departamento de Sistemas Informaticos y ComputacionUniversidad Complutense de Madrid

CSS: hojas de estilo en cascada

La cascada I

Los agentes de usuario (navegadores) deben asignar laspropiedades 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 Informaticos y ComputacionUniversidad Complutense de Madrid

CSS: hojas de estilo en cascada

Preferencia en la cascada

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

Las reglas del autor tienen mas peso que las del usuario

Las del usuario mas que la del agente de usuario.

La preferencia se puede invertir con la directiva !important.

Luis Fernando Llana Dıaz Departamento de Sistemas Informaticos y ComputacionUniversidad Complutense de Madrid

CSS: hojas de estilo en cascada

El orden de la cascada

1 Encontrar todas la reglas que se pueden aplicar a undeterminado elemento.

2 Ordenar por orden de importancia (creciente):

1 reglas del agente de usuario2 reglas normales del usuario3 reglas normales del autor4 reglas importantes del autor5 reglas importantes del usuario

3 Ordenar por concrecion de la regla. Las mas especıficas tienemayor peso.

4 Si tras todo hay dos con el mismo peso, la que aparece mastarde (en el fichero) tiene prioridad.

Luis Fernando Llana Dıaz Departamento de Sistemas Informaticos y ComputacionUniversidad 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). Typeselectors

3 E F Matches any F element that is a descendant of an Eelement. 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 simularcon JavaScript

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

Luis Fernando Llana Dıaz Departamento de Sistemas Informaticos y ComputacionUniversidad Complutense de Madrid

CSS: hojas de estilo en cascada

Selectores CSS II

6 E:first-child Matches element E when E is the first childof its parent. ¡¡¡¡IE6 no lo entiende!!!

7 E:link, E:visited Matches element E if E is the sourceanchor 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 useractions. The dynamic pseudo-classes ¡¡¡¡en IE6 solo funcionacon etiquetas <a>...</a>!!!! se tiene que simular conJavaScript

Luis Fernando Llana Dıaz Departamento de Sistemas Informaticos y ComputacionUniversidad Complutense de Madrid

CSS: hojas de estilo en cascada

Modelo de caja I

Luis Fernando Llana Dıaz Departamento de Sistemas Informaticos y ComputacionUniversidad Complutense de Madrid

CSS: hojas de estilo en cascada

Modelo de caja II

1ul {

2background: yellow;

3margin: 12px 12px 12px 12px;

4padding: 3px 3px 3px 3px;

5}

6li {

7color: white;

8background: blue;

9margin: 12px 12px 12px 12px;

10padding: 12px 0px 12px 12px;

11list -style: none

12}

13li.withborder {

14border -style: dashed;

15border -width: medium;

16border -color: lime;

17}

Luis Fernando Llana Dıaz Departamento de Sistemas Informaticos y ComputacionUniversidad 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 Informaticos y ComputacionUniversidad Complutense de Madrid

CSS: hojas de estilo en cascada

Modelo de caja IV

padding del color del fondo de la caja, no colapsapadding, padding-top, padding-right,padding-bottom, padding-left

margin transparente (de color de la caja contenedora),colapsa.margin, margin-top, margin-right,margin-bottom, margin-left

Luis Fernando Llana Dıaz Departamento de Sistemas Informaticos y ComputacionUniversidad Complutense de Madrid

CSS: hojas de estilo en cascada

Modelo de caja V

Tamanos:

longitudes la unidad es obligatoria (salvo si es 0):

absolutas (a evitar), puntos pt, milımetros mm,centımetros cm.relativas a la fuente actual em, a la resoluciondel dispositivo px.

porcentaje %, relativo a la caja contenerdora.

Luis Fernando Llana Dıaz Departamento de Sistemas Informaticos y ComputacionUniversidad Complutense de Madrid

CSS: hojas de estilo en cascada

Modelo de caja VI

Global: border.Anchura del borde: thin, medium, thick, o longitud explıcita.border-top-width, border-right-width,border-bottom-width, border-left-width, y border-width.Estilo del borde: none, hidden, dotted, dashed, solid, double,groove, ridge, inset, outset.border-top-style, border-right-style,border-bottom-style, border-left-style, y border-style.Color del borde: border-top-color, border-right-color,border-bottom-color, border-left-color, y border-color.

Luis Fernando Llana Dıaz Departamento de Sistemas Informaticos y ComputacionUniversidad Complutense de Madrid

CSS: hojas de estilo en cascada

Luis Fernando Llana Dıaz Departamento de Sistemas Informaticos y ComputacionUniversidad Complutense de Madrid

CSS: hojas de estilo en cascada

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

display valores block, inline, none, ....

position Propiedades relacionadas top, right, bottom, andleft:

static posicionado normal, no tiene efecto.relative Se posiciona de forma relativa con la

posicion normal, reserva el hueco conrespecto al posicionamiento normal

absolute Se posisiciona de forma absoluta, conrespecto al antecesor que no seastatic. No reserva hueco con respectoal posicionamiento normal.

fixed Igual que absolute, pero no se muevecon el scrolling. AVISO NO lo entiendeIE6.

Luis Fernando Llana Dıaz Departamento de Sistemas Informaticos y ComputacionUniversidad Complutense de Madrid

CSS: hojas de estilo en cascada

1div#superior {

2position:absolute;

3left :0; top :0;

4height :17 %; width :100 %;

5}

6div#izquierda {

7position:absolute;

8left :0; top:17 %;

9height :83 %; width :15 %;

10margin :0;

11}

12div#centro {

13position:absolute;

14top:17 %; left:15 %;

15width :70 %;

16}

17div#derecha {

18position:absolute;

19left:85 %; top:17 %;

20width :15 %; height :83 %;

21}

Luis Fernando Llana Dıaz Departamento de Sistemas Informaticos y ComputacionUniversidad Complutense de Madrid

CSS: hojas de estilo en cascada

Anchuras y alturas

width

height

Se aplican a cajas de bloque.Valores: <length> | <percentage> | auto | inheritSe aplican al contenido, al tamano total hay que anadir el paddingy el margin.

Luis Fernando Llana Dıaz Departamento de Sistemas Informaticos y ComputacionUniversidad Complutense de Madrid

CSS: hojas de estilo en cascada

Posicionamiento flotante: Float

1<!DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.0// EN">

2<HTML>

3<HEAD>

4<TITLE >Float example </TITLE >

5<STYLE type="text/css">

6IMG { float: left }

7BODY , P, IMG { margin: 2em }

8</STYLE >

9</HEAD>

10<BODY>

11<P><IMG src=img.png alt="This image will illustrate floats">

12Some sample text that has no other ...

13</BODY>

14</HTML>

Luis Fernando Llana Dıaz Departamento de Sistemas Informaticos y ComputacionUniversidad Complutense de Madrid

CSS: hojas de estilo en cascada

Posicionamiento flotante: Float

Valores: codigoauxleft, right, none

1<BODY>

2<P>Some sample text

3<IMG src=img.png">

4that has no other ...

5</BODY >

1p { clear: left }

Luis Fernando Llana Dıaz Departamento de Sistemas Informaticos y ComputacionUniversidad Complutense de Madrid

CSS: hojas de estilo en cascada

Efectos visuales

overflow : visible, hidden, scroll, auto

clip : recorte, se puede especificar una forma.

visibility visible, hidden

z-index : indica la capa en la que se coloca, se puede ponerencima (numero mayor), o debajo (numero maspequeno).

Luis Fernando Llana Dıaz Departamento de Sistemas Informaticos y ComputacionUniversidad Complutense de Madrid

CSS: hojas de estilo en cascada

Fuentes

font-family Debe incluir una de las siguientes: serif,sans-serif, cursive, fantasy, monospace.

1body { font -family: "New Century Schoolbook", serif }

font-style normal, italic, oblique

font-variant normal, small-caps

font-weight normal, bold, bolder, lighter

font-size Porcentaje (con respecto al padre), en puntos yxx-small, x-small, small, medium, large,x-large, xx-large,

Luis Fernando Llana Dıaz Departamento de Sistemas Informaticos y ComputacionUniversidad Complutense de Madrid

CSS: hojas de estilo en cascada

Colores

1em { color: #f00 } /* #rgb */

2em { color: #ff0000 } /* #rrggbb */

3em { color: rgb (255,0 ,0) }

4em { color: rgb(100 %, 0 %, 0 %) }

Luis Fernando Llana Dıaz Departamento de Sistemas Informaticos y ComputacionUniversidad Complutense de Madrid

CSS: hojas de estilo en cascada

Listas

list-style-type valores disc, circle, square, decimal,decimal-leading-zero, lower-roman,upper-roman, lower-latin, upper-latin.

list-style-image

1ul { list -style -image: url("http ://png.com/ellipse.png") }

list-style-position valores inside, outside.

Luis Fernando Llana Dıaz Departamento de Sistemas Informaticos y ComputacionUniversidad Complutense de Madrid

CSS: hojas de estilo en cascada