PC Cuadernos 33. CSS, Un juego de niñoswww.tecnodescargaspc.com.pdf

Contacto< /h2 >

6. Elimin a el texto de la sección de texto. Más tarde incluiremos aquí un formulario de contacto. Mantendremos la dirección del elemento address. 7. Guard a la página y ábrela en el navega dor.

•

-

Listos. Este es el aspecto de la segunda página en el navegador: -A ?'* I I

¿UHt ‘

raotocv ' irríc* Hsr:»SOftí nt*’V*íí
r *¡wai  ¿¡jj r

f*

:^,T €í. i*»*-*»*»» - *«**» « I r  al

* k

*•'

Al aplicar form ato con CSS, la página web se divide en distintas secciones con div. El texto de las páginas web normalmente se "sobrevuela" con la mirada. Debemos ofre cer al lector sitios en los que desca nsar la vista: títulos, párrafos cortos, resaltados y listas. Utiliza títulos (de h l a h6 ) y selecciona el ni vel de título sin tener en cuenta el tamaño de fuente. Los párrafos de texto normales se incluyen en un elemento  p y el texto se puede resaltar utilizando strong y em. Los navegadores tienen una hoja de estilos integrada que más tarde se puede sustituir por los estilos que crearemos nosotros mis mos. Las listas son un medio importante para or ganizar el texto:

-

|

-

Q 'r'" 

contenido

littiE b o x e s Diseño de pági na web con CSS. Fundamentes.

♦ Contarlo

• •

Contacto

•

♦ ¡oírle

 Aquí v a un farmuhurio d»  oontacto. Little Boxes ■Calle cuadre. 12 - 0123 4 B oxiand Tel: 01234 50-890

Fax: 01234 567S9*

• •

Fig. 23: Página de contacto con W3C Core Style Traditional.

Las listas no ordenadas (con viñetas) se componen de ul y li Las listas ordenadas (numeraciones) se componen de ol y li En las listas anidad as, el elem ento li se cierra después de la lista anidada. Las listas de definiciones se compon en de di, dt y dd. Una navegación suele ser una lista no ordenada con hipervínculos, cuyo as pecto se determinada mediante CSS.

Los hipervínculos se crean con el elemento a. Los atributos siempre se colocan en el tag de inicio de un elemento. Las páginas web no contienen gráficos in crustados, sino únicamente la ruta de acceso a los mismos. En caso necesario, es posible forzar un salto de línea con
. Para las direcciones se utiliza el elemento address, con dos d y dos s.

Los elemen tos HTM L más importantes • • • • •

Para citas se pueden utilizar, entre otros, los elementos blockcjuote y cite. span es a los elementos inline lo que di v es a los elementos de bloque. Los caracteres especiales se llaman entities y siguen el esquema &abreviatura; Las tablas se utilizan para representar datos de tablas. Es posible verificar la gramática HTML en http://validator.w3.org

•

Con Core Style de W3C se pueden probar las posibilidades de CSS sin tener que saber nada de CSS.

27

28

Descubrir CSS: fuentes, colores e hipervínculos

Descubrir CSS: fuentes, colores e hipervínculos En este capítulo que se presentan las Cascading Style Sheets, y se muestra cómo se pueden definir fuentes y colo res y dar formato a los hipervínculos.

•

Después el formato de las distancias y de los propios cuadros (utilizando el llamado m o delo de cajas). Y para terminar, el posicionamiento de los cuadros en la página y la creación de dise ños d e varias columnas.

•

CSS (Cascading Style Sheets) es un lenguaje crea do especialmente para dar formato a los eleme n tos HTML.

Una hoja de estilos es un conjunto de patrones de formato ¿Qué son exactamen te las Cascading Style Sheets? Basta con echar un vistazo a los distintos ele mentos para tener una mejor visión de conjunto: •

U n style es un  patrón de form at o,  una instruc ción de formato almacenada. • Una sheet es una hoja de papel, una recopila ción. Una stylesheet £s una recopilación d e instrucciones de formato para elementos HTML.

La primera stylesheet propia En este apartado, crearemos una hoja de estilos vacía, escribiremos un com entario en ella y la vincularemo s con las páginas de ejemplo index.html v contacto.html.

Creación de la stylesheet e inclusión de un comentario CSS En primer lugar, crea un archivo vacío en el que más tarde guardaremos las reglas CSS (= styles).

Tarea: crear una stylesheet y un comentario CSS 1. Crea un archivo vado con tu editor prefe rido. 2. Guarda el archivo con el nom bre littleboxes.css , en la misma carpeta que los ar chivos HTML. 3. Inserta el siguiente com entario CSS en la primera línea del archivo:

¿Y cascading? Según el diccionario, una " casca da " es, entre otras cosas, una "caíd a d esde cierta altura del agua de un río u otra corriente". Esta definición es correcta pero no dice mucho. Es d i fícil aclarar el significado de cascading en este mom ento, por lo que lo dejaré para más adelante (a partir de la pág. 60).

/* Stylesheet para los ejercicios de

CSS y las cajas HTML en la página web CSS da formato a los cuadros rectangulares que se crean con HTML. Las po sibilid ades de formato de CSS se pu eden dividir en tres áreas: 1. Fuentes y colores: formato del contenido de los cuadros. 2. Distancias y bordes: formato de los propios cuadros. 3. Layout: modificar la posición de los cuadros en la página web. Siguiendo este orden analizaremos CSS en las próximas páginas: •

En prim er lugar, el formato de fuentes y co lores en los cuadros.

Little Boxes */

4. Gu arda el archivo. El nom bre de archivo debe respetar las reglas habituales para nom bres de archivos de páginas web (sin espacios, sin caracteres espe dales y en minú sculas) y como extensión se recomienda *.css. Ade más, el archivo debe estar realmente vacío. CSS es un lenguaje propio y los tags HTM L o es tructura básica HTM L no tienen cabida en él. A diferencia de HTM L, los comentarios de CSS se escriben entre  / *  y */ (barra asterisco - aste risco barra). Si tu teclado tiene un teclado numé rico, es muy sencillo: •

La barra /corresponde al símbolo de divi sión.

Descubrir CSS: fuentes, colores e hipervínculos •

El asterisco * correspo nde al signo de mu lti plicación, justo a su derecha.

Al igual que en H TML , los com entarios no se de ben anidar. Dentro de un comentario no se debe escribir ningún otro comentario.

29

Definición de colores de fondo y de fuente El primer paso será definir los colores de fondo y de fuente para body y  el "contenedor"
El vínculo entre HTML y CSS: link 

id=" wrapp er">.

En el último capítulo hemos vinculado los ar chivos de ejemplo con una hoja de estilos del W3C. Si ahora creamos nuestra propia hoja de estilos, sólo tenemos que modificar la ruta de ac ceso al archivo en el elemento link para que el formato de las páginas se base en nuestra stylesheet.

Color de fondo y de fuente para body  y

Tarea: vincular la página web con la hoja de es tilos (aún vacía) 1. Abre los dos archivos HTM L index.html y contacto.html. 2. Mod ifica el códig o fuente de las do s pági nas HTML como sigue: 3. Guarda las dos página s y ábrelas en un navegador.

Ahora ya no se aplicarán los formatos de la hoja de estilos del W3C. Este es el significado de los tres atributos del elemento link: • • •

href i ndica (com o siemp re) la ruta de acceso al archivo. reí   es la abreviatura de "relation" (relación). rel="stylesheet" significa "este archivo es una hoja de estilos para mí". type le indica al navegado r que littleboxes.css es un archivo de texto de CSS: "Tipo archivo de texto, más concretamente Cascading Style Sheet."

El elemento link se cierra con un tag final inte grado: espacio en blanco y signo m ayor que. Los estilos g uardados en littleboxes.css se aplican a todos los archivos HT ML relacionados con la hoja de estilos, independ ientemente de si son cien o mil.

üwrapper  Los /* comentarios */ de los ejemplos sólo tie nen un propósito informativo y no es necesario copiarlos.

Tarea: definir un color de fondo y de fuente pa ra body  1. Escribe las siguientes líneas deba jo del comentario: body { color: white; /* Color de fuente */ background-color: #8c8c8c; /* Color de fondo */

} #wr apper { color: black; background-color: white;

2. Gua rda la hoja de estilos y abre las dos páginas (no la hoja de estilos) en un nave gador. Si funciona correctamente, la página de inicio y de contacto tendrán más o menos e ste aspecto: *o..uufhvt<* ***.•*l&'-et

1*0

 jgjr

Ar¡{23

* 0 ü-

ü

icnwiÉfa

i tt le b n X E S

I

body en gris

icóo de paaoas w eb cea CSS f i¡od3a«3«Oi

* coses

•wrapper en blanco

Inicio Las peanas web t&n. compuen&i de cuadrtrt rectaegobres que se pueda» colocar uno* juccc a ocg í o ¡uperpoorr eutr d¿o£ Todo Jo que cea reckasdc un buev. ta kb Sco o embaí cosa* Los aaanrei po-r.* mués# mi d cna ño desde ta rreaoou de Lu |

Fig. 24: body en gris , tkurapper en blanco

torn  la }¡¿g:*«j w*b

30

Descubrir CSS: fuentes, colores e hipervínculos

El texto está mu y cerca del borde y por lo de más, la página no es especialmente digna de admiración, pero es un comienzo.

Tarea: definir un color de fondo para el eneabezado

Quizás habrás observado que el color de fuente que hemo s definido para body  con la propiedad color   no se utiliza en la página, porque todo el texto se encuentra dentro de #wrapper.

1. Añ ade la siguiente regla CSS al final de la stylesheet:

Es recomendable adquirir la costumbre de d efi nir el color de fuente y de fondo juntos, para que no se den com binaciones desafortunadas como " fuente blanca sobre fondo blanco ".

,

/* Selector anidado: sólo el gráfico en el encabezado */ #enca bez ado img { back grou nd-c olo r: white;

}

2. Gu arda la hoja de estilos y abre ambas pá ginas en el navegador.

Nombres de colores

Las indicaciones de colores hexadecimales como #8c8c8c  ya nos resultan familiares de HTML, p ero en CSS po demos utilizar nom  bres en inglés para determinados colores, co mo zvhite o black.  Más sobre la definición de colores a partir de la pág. 40.

Color de fondo y de fuente para el encabezado La sección del encabezado de las dos páginas también debe tener un color de fondo, y como ya hemos visto aprovecharemos para definir también el color de fuente.

Tarea: definir un color de fondo para el enca bezado 1. Aña de la siguiente regla CSS al final de la hoja de estilos: #enca bez ado { color: black;

Este es el aspecto que tendrá ahora el encabeza do de la página de inicio:

ittiE b o x e s >dr pagos web con CSS. FuadMméata*

Fig. 25: Encabezado y logotipo con c olor de fondo

Tipo y tamaño de fuente: font family  y font-size Las páginas web están formadas por cuadros encajados unos dentro de otros, y en CSS se les aplica el principio de herencia: •

Todos los cuadros dentro del cuadro body heredarán el formato ap licado a body.

Por eso, body  es perfecto para establecer el for mato básico de la fuente, ya que los demás ele mentos lo heredarán.

}

Tarea: definición de tipografía para toda la pá gina web

2. Gu arda la hoja de estilos y abre las páginas en el navegador.

1. M odifica la regla CSS para body  como si gue:

back grou nd-c olo r: #f3c600;

El gráfico del logotipo es un archivo GIF trans parente que se ha optimizado para un fondo blanco, por lo que al usar un fondo oscuro se muestra una ligera aureola clara alrededor de las letras del logotipo. Podemos volver a asignar un fondo blanco a la imagen mediante CSS, y para ello utilizaremos lo que se conoce como selector anidado, que so lamente afectará al gráfico del encabezado (más sobre selectores anidados a partir de la pág. 36).

bo dv { color: black; bac kgr oun d- co lor : #8c8c8c;

fon tf ami ly: Verdana, Arial, & Helvética, sansserif; fontsize: small; /* Tamaño de fuente */

2. Guarda la stylesheet y abre ambas páginas en un navegador. En ambas páginas se ha modificado el formato de la fuente, prácticamen te para todos los ele mentos HTML. Veamos aquí en detalle las nue vas propiedades:

Descubrir CSS: fuentes, colores e hipervínculos •  fo nt- fa m ily define el tipo de fuen te. Puesto que, como autor de la hoja de estilos, no sabemo s de qué fuentes dispone el nave gador del usuario, es preferible definir va rias posibilidades separadas por comas. •  fo nt- si ze determina el tamaño de fuente. En Internet existe un interminable debate sobre el mejor método para de finir el tama ño de fuente, pero para emp ezar small es un buen fundamento. Volveremos a hablar de la herencia de propieda des CSS a partir de la pág. 60.

Tamaño de fuente de los títulos Todos los elementos han adqu irido un tamaño de fuente a excepción de los títulos. Los navegad o res creen que los títulos deben ser más grandes que el texto normal, y puesto que todavía no hemos definido nada para el título, todavía se aplica el formato de la hoja de estilos integrada en el navegador. Las siguientes reglas definen el tamaño de fuen te para los títulos de primer y segundo nivel.

Tarea: modificar el tamaño de fuente de los tí tulos 1. Añ ade las siguientes líneas al final de la stylesheet: hi { font-size: 150%; } h2 { font-size: 130%;

}

2. Gua rda la hoja de estilos y abre las dos páginas en un navegador. El 150% para h l todavía no tiene ningún efecto visible, porque el texto es un gráfico, pero en el caso de h2 podem os ver el cambio d irectamente. Adem ás, la indicación porcentual nos permite mantener la relación de tamaños entre texto y tí tulos cuando camb iemos el tamaño de fuente de body.

31

Una regla CSS (inglés: style o css rule) está for mada por los siguientes elementos: •

•

•

•

Se lec tor (selector)

El selector se coloca antes del par de llaves y determina (selecciona) a qué cuadros de la página se aplicará el formato. Declaración (declaration) Entre el par de llaves se encuentran una o varias declaraciones. Éstas describen el for mato de los elementos a los que afecta el se lector. Toda declaración está formada por tina pareja propiedad:valor y termina con un punto y coma. Propiedad (property) La pro piedad (color, tipo de fuente, etc.) del elemento se coloca antes de los dos puntos. Los espacios en blanco antes y después de los dos puntos son opcionales. Valor (valué) El valor que debe adquirir la propiedad se define después de los dos puntos. Después se añade un punto y coma para finalizar la declaración.

Los términos style, estilo, regla CSS , instrucción de  fo rm ato y patró n de fo rm ato  suelen utilizarse indis tintamen te como sinónimos. A lgunos autores también lo llaman " regla de estilo".

Formato de la dirección Al final de la página w eb hem os incluido una dirección (ficticia) en tre los tags

y

. La mayoría de navegadores repre sentan este elemento en cursiva, pero con la ayuda de CSS no tiene por qué ser así.

— Tarea: definir la fuente para el elemento address

1. Escribe la siguiente regla CSS al final de la hoja de estilos: addres s { text-align: center; /* centrar */ font-size: 80%;

Style: estructura de una regla CSS CSS es un lenguaje, y todos los lenguajes utili zan un léxico y una gramática. Despu és de haber visto un par de ejemplos, ya podem os determi nar la estructura esquemática de una regla CSS y el vocabulario básico: Selector { Pr op ieda d: valor; Propiedad: valor;

}

 / *   más pequeño */

font-style: normal; /* fuente cP normal, no cursiva */ letter-spacing: 2px; /* Distancia entre las letras */ line-height: l.Sem; /* Distancia entre las líneas */

} 2. Guard a la hoja de estilos y abre amba s pá ginas en el navegador.

32

Descubrir CSS: fuentes, colores e hipervínculos

Ahora e l texto de address aparece centrado, es al go más pequeño que el resto de la página (80%), ya no está en cursiva, la distancia entre letras se ha ampliado en 2 píxeles y la distancia entre lí neas se ha aum entado a una vez y media el ta maño de la fuente. ! L l t tl e

Baxes

 ________ T s l i

Q V2

cuadro. 12 • 0 1 2 3 4   Boxland 5 6 7 9 ^ 0   « F ax ? 0 1 2 3 4 5 & ? 8 3 l

• Calle

34

Fig. 26: address con formato

Aplicar cursiva y negrita al texto requiere cierto entrenamiento: • •

La cursiva se obtiene con  font-style: italic; La negrita se obtiene p.ej. con font-zveight: bold; (véase la pág. 69)

Formato de los hipervínculos Aplicar formato a los hipervínculos con CSS es un tema muy apreciado. Aquí veremos una bre ve introducción.

Hipervínculos: el elemento HTML a Los hipervínculos se definen en el código fuente con el elemento a. C SS permite asignar un nuevo formato a los hipervínculos, eliminando por ejemplo el subrayado característico.

Vínculos visitados y no visitados Los vínculos pueden cambiar de aspecto en fun ción de su estado: los vínculos no visitados sue len represen tarse en azul, y los visitado s en lila. Para los distintos estados de un vínculo, CSS uti liza las llamad as pseu do clases, que se añaden de trás del nombre d e elemento a con dos puntos. En la tabla siguiente se indican los dos estados más impo rtantes y los selectores CSS correspon dientes: Selector CSS

Hípervínculo... ...a una página no visitada ...a una página visitada

 

a:link  a: visited 

Tabla  3; Hipervínculos visitados y no visitados y los selectores CSS correspondientes

Debem os recordar que no puede h aber ningún espacio en blanco en el selector entre el nomb re de elemento a, los dos puntos y el nombre de la pseudoclase. Aquí un ejemplo:

Tarea: modificar el color de los vínculos visita dos y no visitados 1. Añad e las siguientes reglas CSS al final de la hoja de estilos: a:l ink { color: #d90000;} arvi sited { color: #cc6666;

Tarea: eliminar el subrayado de todos los hipervmculos 1. Aña de la siguiente regla CSS al final de littleboxesxss :

}

2. Guarda la hoja de estilos y abre ambas pá ginas en el navegador.

2. Guard a la styleshe et y abre las páginas en el navegador.

Los vínculos no visitados se representarán en ro  jo os curo y los visitados serán algo m ás claros. Cuando se modifican los colores de los hiper vínculos es necesario mantener la diferenciación entre vínculos visitados y no visitados -a menos que nuestra intención sea la contraria.

Esta regla elimina el subrayado de los vínculos de las dos páginas web.

Hacer que los hipervínculos visitados vuel van a ser no visitados

A muchos diseñadores les encanta este truco, pe ro siempre es necesario asegurarse de que los hipervínculos se puedan reconocer como tales.

Cuand o comp ruebes las páginas, tarde o temprano todos los vínculos e starán visitados. Para que vuelvan a ser no visitados, deberás eliminar el historial del navegador.

a { text-decor ation: none; } /* Eliminar subrayado*/ }

En Firefox se puede utilizar la extensión Web Developer   (pág. 86): en el menú  M iscellan eous encontrarás el submenú Visited Links.

33

Descubrir CSS: fuentes, colores e hipervínculos Cuando el puntero está encima: a:hover  y  y cía. CSS tiene todavía otras tres tres pseud oclases para hipervínculos:

m

ú 

£ •

W~rz

Selector CSS

Hipervínculo...

...cuando el puntero del ratón está a : h o v e r   encima ...saltando mediante la tecla [Tab]   aifocus ...en el que se hace clic

a : active

Fig. 27: Página d e inicio con un vínculo activo

Las dos primeras pseud oclases se parecen parecen bas tante, mientras que la tercera se encarga de algo muy distinto:

Con  fo  f o c u s y ;active, active , los vínculos suelen adquirir un contorno punteado en el navegador que no es muy elegante. Para eliminarlo, basta con aña dir la declaración outline: norte; al norte; al selector a en la ho ja de estilos. Este sería el aspecto d e la regla CSS de a:

•

a {text-decoration: none; outline: none;)

Tabla 4: Otros estados de los vínculos y los selectores CSS corres  pondien  pon dientes tes

  mod ifica ifica el vínculo mientras el punte :hover  mod ro del ratón se encuentra encima. •  fo c u s  corresponde al vínculo cuand o éste se selecciona selecciona med iante el teclado. • :active es :active es un vínculo en el momen to en que se hace clic en él con el ratón. En la práctica esto significa que :hover  y  y  fo  f o c u s suelen d eclararse eclararse juntos, juntos, puesto que en cierto cierto sentido  fo c u s  es el equivalente para teclado de :hover. Para ello, sólo tenemos que separar los dos selec tores med iante una coma antes del bloque de declaración (más detalles sobre la agrupación de selectores a partir de la pág. 36).

Tarea: definir pseudoclases para hipervínculos 1. Com pleta la la hoja de estilos con con las siguien  tes reglas CSS: a:hover, a:hover, a:focus { text-decoration: underl und erline ine ;

}

a:active a:ac tive { color: white; backgrou ndcolor: #d90000; }

2. Guarda la hoja de estilos estilos y abre ambas pá ginas en el navegador. Con estas reglas, :hover  y  y  fo c u s  restituyen el sub rayado típico de los vínculos, mientras que fuente '.active modifica '.active modifica el color de fondo y de la fuente en el m omen to de hacer clic, lo lo que le confiere una apariencia similar a la de un botón presio nado.

Aunque este truco truco no funciona en todos los na vegadores, no tiene efectos secundarios negati vos.

El orden de las pseudoclases en la hoja de estilos sí es importante Cuand o se definen pseudo clases en una stylesstylesheet, es necesario respetar el orden correcto: 1. 2. 3. 4.

a:fínk aroisited  y a fo a:hover  y  f o c u s  (no importa el orden) a:active

Información detallada sobre pseudoclases

Encontrarás más información sobre las pseu doclases en: http://www.webestilo.com/css/css08.phtml

Ocultar el skip-link Puesto que el skip-link está está pensad o principal mente como ayuda a la lectura de la página, po demos ocultarlo con ayuda de CSS. En la página 20 hem os asignado al vínculo el atribut atributoo class-" skiplink". En CSS, cuando el atributo atributo class aparece class  aparece en el elemento HTML, necesitamos un punto delante del nombre de la clase: .skiplink significa .skiplink significa el ele m ento con el atributo class-"skiplink'" ( in class-"skiplink'"  ( más in formación a partir de la pág. 38).

34

Descu brir CSS: fuentes, colores e hipervínculos

1. Añad e la siguiente regla CSS al final final de la hoja de estilos: .ski pli nk { display: none;

}

2. Gua rda la hoja de estilos y abre ambas pá ginas en el navegador. navegador. Con esta regla, la propiedad display (mostrar en pantalla) de todos los skip-links adquiere el va lor none. En pocas palabras: "no mostrar".

Estilos en tres sitios distintos

3. Directamente en un elemento HTML: el atributo style=,,...,f  El tercer método consiste en escribir las reglas CSS directamente en el tag inicial de un elemen to HTM L. Este método también se suele llamar llamar declaraciones C SS están están inline-style, porque las declaraciones incluidas directamente en el elemento HTML:

  

Código 4: Vincular una hoja de estilos con link Vinculación de hojas externas

A partir de la la pág. 56 veremos cómo podemos crear una versión para imprimir mediante CSS con link. Además, @irnport es una alterna tiva a link. Lo veremos a partir de la pág. 82.

2. En el head  de   de la página: el elemento   > 

Código 5: El elemento H TML style en el head de una página web

Las reglas C SS del bloque style  solamente se aplican a esa página web concreta.

Las tres posibilidades de un archivo externo, en el header HTML y en un elemen to siguen una  jera  je rarq rqu u ía, ía , de form fo rm a qu e el na v eg ad o r siem si em pre pr e sabe qué regla d ebe aplicar. El principio es el si guiente: "Cuanto más cercano al texto al que se aplica el formato, más importante es": •

La s r eg eg la la s C SS SS e n e l elemento HTML  tienen prioridad por encima de las del head  de una página. • L a s r e g l a s C SS SS en en el el head  tienen prioridad por encima de las definidas en un archivo externo. Esta jerarquía permite lograr una presentación homogénea para todo el sitio web mediante el uso de un archivo CSS y definir las desviaciones de la misma en el head er e incluso en el tag ini cial de determinados elementos HTM L. Cuando se integra CSS en páginas web, se recomienda respetar la siguiente forma de proceder: • •

Escr Escrib ibee tant tantoo como como te te sea posible posible en un un a r chivo CSS externo. Limita al má ximo el uso de los estilos en el código fuente HTML. La jerarquía de los estilos forma parte de la cascada

El almacen amien to de los estilos en tres sitios sitios diferentes forma parte de la cascada  que ayuda al navegador cuando éste se topa con proble mas de ambigüedad, y de ahí proviene el el nombre Cascading Style Sheets.  Más informa ción sobre la cascada completa en la pág. 60.

Descubrir CSS: fuentes, colores e hipervínculos hipervínculos

Recordatorio

•

Repasemos nuevamente los puntos más impor tantes que hemos visto en este capítulo: capítulo: • •

Una hoja de estilos o stylesheet es una reco reco pilación de patrones de formato. Las Las posib posibil ilid idades ades de forma formatto de de CSS se puede n dividir en 3 grupos: -

• •

Fuentes y colores: colores : formato del contenido de los cuadros. Distancias Distancias y bordes: bordes : formato de los pro pios cuadros. Layout: Layout : modificar la posición de los cuadros en la página web.

E l e l e m en en t o link vincula un archivo HTM L link  vincula un con una hoja de estilos. No ciones impo rtantes sobre la sintaxis de

•

-

U n selector  selecciona   selecciona a qué parte de una página web se aplicará el formato. U nnaa declaración es declaración es una instrucción de formato y se compone de una  pr op ied ie d ad y un valor  para   para la propiedad.

  para el color de fuente color  para  para el color de fondo background-color  para  fon  fo n t-fa t- fam m ily il y  para el tipo de fuente  fo n t- s iz e  para el tamaño de fuente

a Itext-decoration: none;l elimina none;l  elimina el subrayado de los vínculos Para el formato de los los distintos estado s de los vínculos existen varias ps varias  psei eitd td ocla oc lase sess en CSS:

•

•

adink y adink  y a:visited a:hov a:hover er y afocus a:act a:active ive

Para guard ar los estilos tenem os tres opcio nes: -

CSS:

-

L a s p r o p i e d ad ad es es CSS más utilizadas para dar formato a eleme ntos son: -

•

35

Un archi archivo vo CSS extemo En el head entre head  entre  en el head de la página Para termin ar, las del tag de inicio de un elemento de la página

63

El navegador y CSS: cascada y herencia Imaginemos las siguientes líneas de código HTM L en la página de inicio:

Código 30: Una instrucción de estilo en un elemento HTML de la  página

La regla CSS de la línea 2 del ejemplo se encuen tra directam ente en el tag de inicio del selector, por lo que no pued e acercarse más al elemento al que debe dar formato. En este caso, la lista ul tendría un margin inferior de 20px, no importa lo que digan las otras hojas de estilos precedentes. Fin de la cascada. El navegador repite esta cascada por cada pro piedad de cada elemento de la estructura del documento. Si deseas más información sobre la cascada, te recomiendo la fuente oficial, el W3C: http://www.w3.orQ/TR/CSS21/ cascade. html#casc ade

Herencia (inheritance) Si al terminar la cascada el navegador no ha en contrado nada para una propiedad, entra en  ju ego la he rencia. Aunque no recuerdes m uc ho de las leyes de M endel de la clase de biología, es necesario que analicemos la herencia en el marco de las CSS.

La herencia mejora la claridad de una hoja de estilos En la página de inicio ya hemos aplicado el principio de la herencia, por ejemplo en la decla ración del tipo y el tamaño de fuente. Una de las primeras reglas de la hoja de estilos de las pági na de ejemplo es esta -ligeram ente abreviada: body { font-family: Verdana, Arial, Helvética, sans-serif;

} Código  32: Todos los descendientes de body heredan el tipo de fu en  te

Estas declaraciones no sólo se aplican a body, si no a todos sus descendientes. Puesto que en principio todos los elemen tos de una p ágina son descendientes de body, la fuente se aplicará a to dos los elementos de la página, a menos q ue se haya definido otra cosa en el marco de la casca da. Sin el principio de herencia, deberíamos m en cionar todos los elementos uno a uno y la misma declaración podría tener este aspecto: body, hl, h2, p, ul, li, a, strong, em, address { font-family: Verdana, Arial,

&

} Código 32: Sin herencia, es necesario mencionar explícitamente to dos los selectores

Resulta mucho más com plicado que la versión anterior. El uso apropiado de la herencia contri buye a la claridad de la hoja de estilos.

Algunas propiedades no se heredan Sin embargo, algunas propiedades no se here dan. Es el caso, por ejemplo, de todas las pro piedades del mod elo de cajas como zvidth, back  ground, pad ding, bo rd er  y margin. ¿Por qué? • •

Imagina un documento en el que se hubiera definido una línea de borde roja de 2 píxeles de anchura para body. Ah ora imagina la mism a má quina si todos los descendientes heredasen la propiedad border : deberíamos declarar para todos los elementos exp lícitamente border: none a fin de que no tuvieran tam bién un borde rojo.

Valor por defecto (initial valué) Si después de la cascada y la herencia sigue sin habe r un valor para una determinada propie dad, el navegador toma el valor por defecto fija do en la especificación CSS. F n ll P r o p e rt y T ab le

Encon trarás información sobre la herencia de propiedades en cua lquier referencia sobre CSS o en el W 3C, en una tabla poco atractiva pero muy útil llamada Full Property Table. http://www.w3.orQ/TR/CSS21/propidx.html

64

El navegador y CSS: casc ada y herencia

Recordatorio

-

•

-

•

Cuando un navegador recibe el código de una página w eb, crea en primer lugar la es tructura arbórea del documento ("Docu men t Object M od el"), que representa la jerarquía de los elementos HTML. Para la búsq ueda de las instrucciones de formato de cada elemen to, el navegador se basa en tres conceptos: -

•

•

Cascada ("cascade") Herencia ("inheritance") Valor por defecto ("initial valué")

La cascad a da nom bre a las Cascading Style Sheets  y se comp one de los siguientes nive les:

•

Nivel 1: encuentra todas las declaracio nes de un elemento Nivel 2: ordena en función del origen y la importancia Nivel 3: ordena según la especificidad del selector Nivel 4: ordena según el orden de apa rición

Si una propied ad CSS sigue sin valor des pués de la cascada, el navegador com prueba si puede encontrar algún valor a través de la herencia de los elementos padre. Las pro piedades del modelo de cajas (y algunas otras) no se heredan. Si una prop iedad sigue sin valor despu és de la cascada y la herencia, se toma el valor por defecto de la especificación CSS.

65

Flujo y posicionamiento

Flujo y posicionamiento En este capítulo comprobaremos que los cuadros de las pá  g in as w eb si guen un flu jo natur al. A d em ás , veremos cómo  pod em os m anip ula r dic ho f lu jo y colo car el em ento s fijo s o  fl ota n te s.

Existen tres posibilidades de colocar las cajas en una página web: 1. Flujo normal: abarca los elemen tos de blo que e inline, que ya conocem os, así como los cuadros con un posicionam iento relati vo. 2. Posicionamiento absoluto: los elementos con posicionamiento absoluto quedan ex cluidos del flujo y no e xisten para los de más elementos de la página. Se trata de elementos que utilizan  position:absolu te  y  po sit ion:fix ed. 3. Float: los elementos flot an tes en la jerga de CSS son elemen tos intermedios. Primero la caja se coloca de forma normal, después se extrae del flujo y flota tanto como sea posi ble hacia la derecha o la izquierda. En este capítulo veremos los fundam entos del posicionamiento y có mo aplicarlos. Pero antes hablaremos del estado normal de una página web, el docum ent flozv.

Let it flow: el flujo normal de los cuadros Como primera aproximación, empezaremos por estudiar el compo rtamiento natural de las cajas cuando éstas no están sometidas a ninguna otra fuerza excepcional.

Tres cajas en el flujo Observa el siguiente código HTM L y CSS: HTML

CSS

Box l

Box 2

Box 3

body { color: black; background-color: gray; padding: 0;

}

margin:0;

div { background-color: white; padding: 1Opx; border: Ipx solid black; margin: 5px;

}

Tabla 76: Tres cajas en el flu jo del d ocumento

Puesto que div es un elemento de bloque, las cuatro cajas se encuentran una debajo de otra, aunque su contenido sea muy pequeño.

La página es un río tranquilo Norm almente, los elementos de una página si guen el llamado document flow , el "flujo del do cumento". Todos los elementos HTML nadan en dicho flujo. Es el estado natural de una página web, y es a los diseñadores lo que la gravedad para los arquitectos. En realidad es sencillo: •

Un elemento se coloca tan alto y tan a la iz quierda como sea posible. • Al añadir otros elem entos, se colocan a su derecha hasta que no hay m ás espacio. • Cua ndo no hay más espa cio a la derecha , saltan una línea abajo y vuelven a empezar por la izquierda. Pantha Rei. Todo fluye. El flujo hace que las pá ginas web sean tan flexibles como el periódico del que hablábamos en la pág. 5. Com o diseña dor web, d eberás comprender   el flujo e intentar adaptarte a él, en lugar de pelearte con él.

Fig. 49: Los elementos d e bloque son tan anchos como sea posible y se colocan uno encima de otro

Por naturaleza, un elemen to de bloque impone su anchura: adopta siempre toda la anchura dis ponible del elemento padre, en este caso de body.

Tres cajas reducidas en el flujo A continuación, los tres hermanos div se reducen a un 20% con la propiedad width. Todo lo demás es igual. 3 por 20 son 60. ¿Pero significa eso que las cajas se encuentran una junto a otra?

66

Flujo y posicionamiento

di v { width: 20%; bac kgr oun d- col or : white; padding: lOpx; border: lpx solid black; margin: 5px;

} Código  33: Reducción de los divs a un 20% de la anchura

Las cajas reducidas tam bién están apiladas en vertical. D iv es un elemento d e bloque, y los elemen tos de bloque tienen un salto de línea in tegrado. Aunq ue ividth reduce el tamaño de la caja, el salto de línea se mantiene. »i«|e D an s

Flcrw Width 2Q&



body color: black; background-color: gray; padding: 0; margin:0;

B o x l

Box 2

Box 3

}

div { background-color: white; padding: l O p x ; border: lpx solid black; margin: 5px;

Mo/íHa l'tf d ia

}

# o t r o

{

p o s i t io n : top :

r e l a t iv a ,

2 5p x;

r i g h t :

2 5p x ;

b a c k g r o u n d - c o l o r :

#f3có00;

} Tabla 17: Posicionamiento relativo

Este es el resultado: Fig. 50: Las cajas cortas también se apilan en vertical.

t inte ércft.v5

fU tK tíi 

£fl‘a r   

pcaitÍou:rrta!rv>> Mó nita i trofoa Ve*

WfttrU:

¡jcrcaéc'tt

H t r rv M n c u

 

Avu^,i

Este comportam iento normal de los cuadros en el flujo en CSS también se denomina  po sition:static. El posicionamiento que permite el flu  jo natural de los elem ento s se co noce co m o static. Así es la vida.

Posicionamiento relativo: flujo desplazado El posicionamiento relativo con position:relative consigue do s cosas: • •

Desplaza la caja fuera de su posición normal en el flujo. Marca la posición original del elem ento co mo protegida.

Los demás elementos del documento se compor tan como si el elemen to todavía se encontrase en su sitio original dentro del flujo normal. El código HTM L y  CSS para este ejem plo varía ligeramente:

Fig. 51: Posicionamiento relativo en acción

Observa q ue las cajas 2 y 3 no han cambiado . El posicionamiento relativo preserva el espacio ori ginal del elemento, y los elemen tos siguientes no pasan a ocuparlo. Un elem ento posicionado obtiene sus coordena das de las propiedades top, right, bottom y left, que se calculan con respecto a la posición origi nal en el flujo: • •

top:25px coloca la caja hacia abajo. Se añaden 25 píxeles desde arriba a la posición normal de la caja. right:25px desplaza la caja hada la izquierda, de forma que en parte desaparece. Se inser tan 25 píxeles a la derecha de la posición original.

67

Flujo y posicionamiento Todos los datos son relativos a la posición origi nal e indican dónde se inserta el valor, y no la dirección en la que debe desplazarse la caja. En realidad es lógico, pero a primera vista  po sitiomréíative puede parecer complicado.

La posición exacta se indica mediante top, right, bottom o left, pero los valores de estas cuatro propiedades ya no d ependen de la posición ori ginal en el flujo: 1. El posicionamiento absoluto de un elemen to hace referencia al siguiente elemento contenedor (containing block), posicionado con relative, absolute o fixed. 2. En el supuesto de que no haya ningún ele mento contenedor (muy habitual en la práctica), el posicionamiento se efectúa en función del elemento más alto en la estruc tura del documento, es decir no body, sino html.

Posicionamiento absoluto: fuera de flujo A diferencia del posicionamiento relativo, el ab  soluto saca el elemento fuera del flujo. El elemen to se "ele va " y todos los demás elementos de la página se comportan como si ya no estuviera allí. El HTM L de este ejemplo es el mismo, sólo cam bia una palabra del código CSS: HTML

CSS

Inicio

U n{««xas»wro cdc-^ussuade m ttmirtim tvtoufcsMrcsf   jtmts tmrft, i*ng rtVa r, vnB*« ázrao  a juponíoiw tctr aScs radc ii <&¡a cas nOonOa Fig. 54: El párrafo tiene posicionamiento absoluto, relativo a #encabezado

Esta solución ofrece algunas ventajas con respec to a la primera: •

El punto de referencia del párrafo es #enca bezado, y más co ncretamente el borde exter no del pa dding (" the pad ding ed ge")  superior y derecho. • Si, por ejemplo, la página deja de estar cen trada, no tendrá ninguna repercusión. El pá rrafo nunca abandon ará la sección de enca bezado. Recuerda: el posicionamiento absoluto se vuelve relativamente flexible gracias a este truco.

Flujo y posicionamiento Estilo de fuente para e! eslogan del encabezado Antes de que sigamos con los elementos fijos, haremos una pequeña pausa. Queremos que la letra d el párrafo sea negrita, y que la palabra "Fundamentos" se resalte en rojo. ¿Todavía re cuerdas el span de la introducción a HTM L?

Tarea: resaltar el eslogan en negrita y la pala bra “fundamentos” en rojo 1. Mo difica la hoja de estilos littleboxes.css como sigue: #encabezado p { pos iti on:abso lute ; top: lOpx ; right: lOpx; font-weight: bold; /* Negrita */ padding: 5px 0 5px 0; margin-bottom: 0;

} #enc abezado p span { color: # d90000; /* Color de fuente */

} 2. Gua rda la hoja de estilos y obser va las pá ginas web en el navegador. Si no recuerdas muy bien el span, repasa el có digo HTML:

Dis eño de páginas w eb con C SS . Fundamentos.

Código 34: El uso de span puede ser muy útil

El selector #encabezado p span solam ente selec ciona la palabra "Fundamentos". De este modo podem os aplicar formato a determinadas partes del texto con la ayuda de span.

Los elementos con posicionamiento absoluto es tán colocados relativos a un punto de referencia del documento, por lo que se desplazan con el resto del contenido. Por el contrario, en los elem entos fijos: •

E l e le me nto co nte ne do r (containing block) de los elementos fijos es siempre la ventana del navegador (el viezvport).

Puesto que la ventana del navegado r en sí mis ma tampoco se desplaza, los elementos fijos se mantienen en su sitio,  posi tio nfi xed  es ideal para secciones de navegación y hace prácticamente innecesario el uso de marcos (frarnes), actual mente caídos en desuso. Por desgracia, Internet Explorer hasta la versión 6 ignora por completo po sition ifixed , algo que puede tener consecuencias drásticas para lograr el diseño deseado. Veamos un ejemplo. Crea el siguiente código HTML, en el que el elemento div  se mantiene fijo mediante CSS:

 

Cuadro fijo

 

Párra fo 1. Lo rem ips um dolor sit amet, consectetuer adipiscing elit. Morbi rhoncus volutpat n is l. Praesent ele mentu m odio ac nibh. Duis at quam nec dolor consequat blandit. Sed libero. Vivamus faucibus purus non purus. Suspen disse id ante ut nulla facilisis porta.

Párrafo 2. Nullam vulputate hendrerit nunc. N ullam dapibus blandit o rc i. Nunc met us. Sed sed ante. Cras interdum, erat at pharetra sodales, elit ligula nonu mmy nisi, sit amet auctor purus leo vel urna. Pellentesque ac augue sit amet ipsum nonummy sodales. Sed libero augue, ultricies et, tristique ut, posuere commoao, ligula. Integer aliquet. Doñee varius lectus.

Código 35: Un poco de HT ML con el elem ento div que fijaremo s

Y aquí el correspondiente código CSS:

Como una estatua: posicionamiento fijo El posicionamiento fijo con  po sition :fixed  se com porta casi como po $ition:absolute, pero con una leve d iferencia: •

Un elemento fijo no se desplaza.

69

p { mar qin-left: 25%; } #fijo {

 position: fixed; top: lCpx; left: lOpx; bac kgr oun d-c olo r: #f3c600; width: 15%; padding: lOpx; border: Ipx solid black;

i Código 36: El CSS para fija r el elemento div

70

Flujo y posicionamiento

Con este código obtenem os la ilustración a con tinuación, primero en Firefox, despu és en In ter net Explorer V.6: Archivo Ebnar

Jftí

rt$tor«i

«jtr cu oH ev ia m ie ^ jaj

A,yda

Sí  O «odalcs Sed libero augue. ukriáes et, trisbque a . posucrc c o o m o d o k e u ia I n t e c a a Sq u H D o n r c va r io s l e et n s D a s

Cuadro fijo

fioddum

t

phaietra sodaies. efe hgula cocar any

mu.

sk  aznet auccor ptru s

leo >d urna PeSeotesqoe oc angoe sí ame! ipsum noaummv w i n i r s S e d fe v ro -T O P oe i ^ n i c i rs í í i r ra i n n e a t x i a i e r e

- poótfon'.Tfrttd Mu rosuft I ntcfiiot Etpk w >*t SAa cr

ver

F*i oK at

Ayuaí

O

O á á d . / fj ■Xjar'jfv-i n Cuadro fijo

Para ilustrar el funcionamiento de fl oat, integra remos en la página de inicio una imagen de un globo. Puedes utilizar cualquier otra imagen pa ra este ejemplo, o simplemente el archivo ballon.jpg del suplemento del cuaderno. -------------------------

Tarea: integrar una imagen en la página de ini cio

Fig. 55: positionfixed en F irefox ... I itlW*

Uno de los usos clásicos de fl oat es el posiciona miento de gráficos en un flujo de texto.

Dejar que el texto fluya junto a las imágenes

2

Pin ate Lotcm ipsom dolor sjt amet, consectetaer adiptsdQg efe Mocfc» tboocus votatpat a si Praes eoi demeon xn odk» se nibli Dais at quara « c dslor cooseqaa f hhgkfe Se d libero Vivamos íandb ui pu ra non pu ra Suspé ndas e id ante ut ñufla facifcü pon a No lam vuipatate hendrerk cune NxAsm dBp bas blandir crci N unc metus. Sed sed arte Cía s ntrrdom. rra: at

 ArtJ vo

To floa t significa fl otar y una caja flotante hace tres movimientos: se eleva y sale del flujo nor mal, flota como un globo dentro del elemento contenedor y se desplaza hacia la izquierda o la derecha en función de cómo sopla el viento.

 €> -Jv: f l l-

1. De scarg a la foto ballon.jpg y  guárdala en la misma carpeta que la página index.html. 2. Abre la página de inicio index.html y modi fica el código fuente:

1 L ar ra ipsum dolor s x at oa ,   consectetua adpiscro efe Mor tu fhoacu s v’o iutpat ntsl PraesenT r l a n c i n a n o d io a c  n b b Duxs w quaro nec dolor coosequat blanda Sed íb ero Vivamos fiiucibos pams non pura Suspendiste id aníe a nula fac£s» porta Nu&am '• Tdpotatí bendrerí nunc. N db m dapibus blandí otci Nuce metus Sed sed ante. Cras nrc ria n, eral al pharetra vodolcs, efe aguia oocmaxTr txsi.  sk  atnel anclo* penis leo vd unía P d b s t e s q u e s e msgoc ut emet q>«um nonunmv codales. Se d Sbero aucue. ukrioes el tnshque ut. posuere cooanodo . bgula Ictegei

HMwe« Fig. 56: ...yen Internet Explorer 6

Com o se puede apreciar, Internet Explorer igno ra completamente  posit io nfixed y los elementos HTM L fluyen normalme nte. Por suerte parece que la situación ha mejorado en Explorer 7. En cualquier caso, esto dificulta el uso de  pos i tionfixed.

Inicio

 />
Las páginas están compuestas de

,

3. Guard a la página web y ábrela en el nave  gador. La imagen ya está ahí, aunque no resulta espe cialmente atractiva:

Float: cuadros flotantes Además de los posicionamientos que ya hemos visto, también existe la propiedad flo at. A dife rencia de relative, absolute y fixe d , float no es un valor de la propiedad  position  sino una propie dad CSS en toda regla. Fig. 57: El globo ya se muestra, aunque todavía no flota

71

Flujo y posicionamiento Para que la imagen flote, deberemos incluir la declaración float:ri ght directamente en el elemen to img: r, -

té 

hacia la derecha

1. Ab re la página index.html y modifica el có digo fuente como sigue:

Inicio

<9

& <9

2. Gu arda la página web y ábrela en el nave gador. Aunque el resultado todavía no es fantástico, el texto fluye junto a la imagen. La imagen sigue los tres movimientos típicos de float: sale del flu  jo, se co lo ca en cima de la caja co ntened ora  p y después lo más a la derecha posible. Puesto que la imagen se encuentra dentro de  p, no flota más arriba que el límite superior del párrafo.

D K ^ í l o t e paginas

con CS S. f-NwfAnteMn-v

!f*»Bt:CWIOCM Inicio ü'3r> rct 'í'jítV ii fle iMesOrr-t   iw.«anoul«>»a au* K ;*c4e*> c©tocar

f jñ íc a c » »e c ^ w . T o v r

O¿eO¿»£Oi
•*{  «0 « T«íc - te

i

u

c<é3f
1. Abre la pág ina de inicio index.html y modi fica el código fuente como sigue:

web están compu esta s...

Lü £50*-.i5

Tarea: crear una separación entre la imagen y el texto

Inicio

style="f lo at :ri ght ;" />Las página s

littie b o x e s

Atención: soZo eZ texto rodea a la imagen, tecfc grou nd , pa dd in g, border  y margin del párrafo están debajo. Es decir, para d efinir un espacio entre el texto y la imagen, lo más sencillo es asignárselo a la imagen, y no al párrafo.

fstíe/yJe «s jp truco un crafeo j

os jt

a

fmgt*»

•*'¡Ojos«1HTNtBKOOfty^M

&


style="fl oat:rig ht ; marg in-l eft:15px;"

 />
Las páginas web están compuestas...

2. Guard a la págin a web y ábrela en el nave gador.

Hacer flotar clases CSS a izquierda y derecha Para probar las propiedades CSS es perfecta mente correcto integrarlas directamente m edian te el atributo style en el código HTML, pero si queremos reutilizarlas es mejor definir una clase en la hoja de estilos para las imágenes que floten a la izquierda y a la derecha. Como nombres po dríamos utilizar .imgizda e .imgdcha. Después bastaría con asignar las clases a las imágenes de la página en función del efecto de seado: si la image n debe flotar a la izquierda, le asignaremos en el HTML class=" imgizda", y para que flote a la derecha, class-" imgdcha".

• Ai fu^ coni KTVt

—«Jim fai «jgtas

_ 

Fig. 55: E/ globo flo ta

• •

El texto del párrafo envuelve el gráfico. background, pa ddin g, border  y margin del pá rrafo no fluyen alrededor del gráfico, sino que se colocan debajo.

En la siguiente tarea también aprovecharemos para definir un borde para la imagen con la ayuda de pad din g y border.

72

Flujo y posicionamiento ¿Margen externo duplicado en Internet Ex plorer?

1. Abre la hoja de estilos littleboxes.css. 2. Define debajo de #areatexto  las siguientes dos clases: .imgizda { float:left; padding: 3px; /* Distancia entre imagen y borde

<9

Adiós a la flotación: clear 

* / 

border: 5px soli d #ccc; /* El

&

borde de la imagen */ mar gin -ri ght : lOpx; /* Dista ncia

<9

entre borde y texto */ margin-bottom: lOpx; /* Distancia


hacia abajo*/

En la ilustración anterior se puede observar que no sólo el primer párrafo rodea la imagen, sino también todos los siguientes. Si no deseamos es te efecto, es necesario hacer que la imagen deje de flotar. La propiedad clear   obliga a una caja a empezar debajo de un elemento flotante, clear   puede tener los valores left, right o both:

} .iragdcha { float:right;

• • •

pa dd in g: 3p x; border: 5px solid #ccc; margin-bottom: lOpx; margin-left: lOpx;

} 3. Gu arda la hoja de estilos. 4. M odifica el código de la página index.html para la imagen:
Cuando u n elemento flotante tiene un margin horizontal, Internet Explorer lo duplica. Este "bug de doble margen flotante" se puede arreglar fácilmente asignando al elemento flo tante la declarac ión display: inline.

<9

height="100" class="imgdcha" /> ...

5. Guarda la página web y ábrela en el nave gador. Este es el nuevo aspecto de la página con la ima gen flotante a la derecha:

clear.left  termina un fl oatd eft clear:right  termina un float: right clear.both  termina un fl oat: righ t  y un float def t

Si no queremos que el segundo párrafo de texto de la página de inicio se coloqu e junto a la ima gen, la solución es bien sencilla:

Float  termina y el margin superior del párrafo "limp iado " se rellena de forma que el texto em pieza justo debajo del globo.

Float y clear Float suele implicar la intervención de clear. Sin clear   el estado fl ota nte  se aplica a todos los elementos siguientes. En el caso de los dise ños de varias columnas, clear   puede ser muy importante.

Recordatorio Repasemos los puntos principales de este capí tulo: Fig. 59: El globo flota y se muestra correctam ente

•

Los elemen tos HTM L de una página web si guen el docnment flow,  el flujo natural del documento: — Un elemento empieza lo más arriba y más a la izquierda posible.

Flujo y posicionam iento -

• •

•

•

•

Los demás elementos se colocan a su derecha hasta que no hay más espacio. Cuando no queda espacio, los siguien tes elementos saltan una línea y vuelven a empezar a la izquierda.

Los eleme ntos de bloq ue ocupan una línea completa, independientemente de su anchu ra. La prop iedad CSS  position pued e tener tres valores: relative, absolut e y fixed . Las coorde nadas exactas para el posicionamiento se in dican con top , right, bottom y left. El posicionamiento relativo coloca el ele mento de forma relativa con respecto a su posición original en el fl ow . La posición ori ginal se mantiene protegida. El posicionam iento absoluto extrae el ele mento del flujo. Los valores de top, rightf bot tom y left hacen re ferencia al elemento raíz o al elemento contenedor m ás cercano que también esté posicionado. Los elemen tos fijos se mantienen en su posi ción y no se desplazan con el resto del con tenido. Internet Explorer 6 no comprende

73

 position: fi xed y deja que los elemen tos fijos fluyan. • Float significa " flotar" y es una propiedad en sí misma, cuyos valores posibles son left y right. Los elementos flotantes flotan por en cima de la página y realizan tres movimien tos: •

Se extraen del flujo del documento. Flotan dentro del elemento padre tan arriba como sea posible. Se colocan a la derecha o a la izquierda dentro del elemento padre.

Las secciones de contenido de todos los elementos posteriores rodean al elemento flotante, mientras que  padd in g, border  y mar  gin se desplazan debajo. • Las clases CSS para que los elementos floten a la derecha o a la izquierda son prácticas. • Para terminar el estado de flotación, se apli ca a un elemento siguiente la propiedad clear, que acepta los valores /e/f, right o both.

74

Diseños de varias columnas con CSS

Diseños de varias columnas con CSS En este capítulo verem os cómo se pueden crear diseños de varias columnas sin tablas y qué posibilidades existen a tal efecto.

En CSS casi siempre hay varias formas de alcan zar el objetivo deseado, y esto es especialmente cierto en el caso de los diseños de varias colum nas. En tus paseos por Internet encontrarás mu chos ejemplos de diseños basados en CSS que se basan en aproximaciones totalmente diferentes, y al principio esta variedad puede ser más des concertan te que útil. Desgraciadamente no existe una receta universal , porque todas las posibilidades tienen ventajas e inconvenientes. Mientras el mundo de Internet espera el santo grial del diseño con CSS, pode mos salir del paso con las opciones imperfectas a nuestro alcance, basadas en dos principios esen ciales: •  pos ition:a bs elute  y margin •  fl o at  en distintas variantes

Con  position.absolute  po sition :abs olute  se basa en la idea de asigna r a un div  un gran margin  y colocar otro div  dentro de dicho margin con ayuda del posicionamiento absoluto. Veamos un ejemplo sencillo:

La anchura del margen se puede indicar perfec tamente en píxeles, porcentaje o em . Añadir una tercera columna es fácil: basta con asignar otro margen exterior a la derecha de üareatexto, en el que se colocará una tercera sección con po sicio namiento absoluto. El posicionamien to absoluto es estable, fácil de comprender y solamente presenta dos inconve nientes: 1. Si el diseño debe tener un encabezad o que abarque todas las columnas, resulta difícil determinar el punto de partida superior (top)  para # navegación. Una posible solución sería definir una altura fija para el encab e zado. 2. No es posible dejar que una línea de pie abarque toda al anchura de la página deba  jo de las co lumna s, po rq ue los elem en tos con posición absoluta no se pueden limpiar  (clear), al contrario que los elementos  flo tan tes. Si la columna de navegación es más lar ga que el área de texto, ésta fluirá encima  de la línea de pie. La siguiente imagen ilustra estos dos problem as potenciales: r á n c a b e z á d o ( h o * gh t 8 0 p x J

width 70%; margm-Jeft 30%.

p 0 9 f l »o n f l b s á k j í s .

snavegoaon { posrtion absoluto  top 0. leH 0, width 30%.

1ftoreatexto { width 70%, margm-lefl 30%, }

51 vatoc de top está determinado por ol

1

hetQ?>í de^encabezado Si smavegaocn es

másusrgoque  se

coíoch

o

r. ~ m a rg ln -IJt: I ¿ %

w idth: 7 0 %

Fig. 60: Ejemplo sencillo de un diseño de 2 columnas con " posi tion.absolute "

En este ejemplo, tenemos dos secciones div #areatexto y  #navegación: • •

üareatexto tiene un gran margen izquierdo #navegación  se coloca dentro del margen

-

Fig. 61: Dos desventajas de position:absolute

Los dos inconvenientes no siempre son proble máticos. Si en el diseño deseado no molesta que el encabezado tenga una altura fija y si la línea de pie no tiene que abarcar toda la anchura, sino que puede co locarse en la parte inferior de #areatexto , por ejemplo, el posicionamiento absoluto no presenta ningún inconveniente.

75

Diseños de varias columnas con CSS A pesar de ello, estos dos problemas han logrado que cada vez más d iseñadores echen mano de  float. En los siguientes sitios web puedes ver algunos ejemplos de posicionamiento clásico que se han convertido en clásicos del diseño web: •

Las Box Lessons de Ow en Briggs (alias "Little Boxes") http://www.thenoodleincident.com/tutorials/ box lesson/boxes.html

•

El Layout Reservoir de Blue Robot http://www.biuerobot.com/web/lavouts/

Float I: 2 columnas con float  y margin Float no sólo permite hacer que floten las imáge nes, sino secciones div completas. A continua ción crearemos un diseño sencillo de dos colum  nas con una navegación vertical en el lado iz quierdo de la página. El proceso consta de seis pasos: 1. Flotación de la navega ción. 2. Atribución de un gran ma rgen izquierdo al área de texto. 3. Preparación de la lista no ordenada. 4. Formato de los víncu los de la lista. 5. Resaltado del pun to de naveg ación actual. 6. Color de fondo para la naveg ación ("Faux Column"). Cuando se utilice float, siempre se debe de clarar la anchura con width

Los elementos posicionados con fl o at siempre deben tener una anchura declarada con width. Sin indicación de la anchura, el comporta miento del na vegador es impredecible. En el ejemplo de la imagen flotante del capí tulo anterior esto no era im portante, p orque el gráfico tiene de todas form as una anchura fija. Por el contrario, las secciones div flotantes exigen una indicación de la anchura.

De spué s se asigna a #areatexto un margen izquierdo. Puesto que el margin izquierdo del área de texto se coloca debajo de la navegación flotante, parece como si ambas secciones estuvieran una jun to a otra. •

Tarea: hacer flotar el área de navegación a la izquierda 1. Elimina todas las declaraciones existentes (propiedades y valores) relativas a # nave  gaci ón. Los selectores se pueden m antener, puesto que los utilizaremos enseguida. 2.. Añade las propiedades y valores resalta dos en negrita: #nav egac ion {

float: left;  width: 130px;  paddingleft: lOpx;  paddingtop: 20px;

> #navegacion ul {

} ^na veg aci ón li {

liststyle: none;

} #navegacion a {

} #navegacion arhover, #inicio #navi01 a, #pagcontacto #navi02 a

{ } 3. Gua rda la hoja de estilos y abre las páginas en el navegador. No está nada mal. La na vegación ya está coloca da en vertical en el margen izquierdo, pero el área de texto la rodea en lugar de m ostrarse en una columna separada. is¡¡ ¿ L_» _

•

En p rim er lugar, #navegación  se coloca a la izquierda con fl o at :left.

l i a pAqenac «»ii

Ü B . famtefWeQtwi

Inicio

Paso 1: flotación del área de navegación Para crear las dos column as recurriremos a un pequeño truco, parecido al que hemos visto en el posicionamiento absoluto:

. . __ __

'little b o x e s

u*s o w * *  -«fc « tm compt.-ct-ij. •)« -...xtsfrv* «x-tM>OMÍ«Tw oos

•í

I r a t e e » ? uno» , in tn » avvt a m-wparw «nt* ewco> un gr»*c c • > aratai tow*

r Mo io que * «

Fig. 62: El contenido envuelve la navegación

76

Diseños de varias columnas con CSS ___ 

Paso 2: asignar un gran margen al área de texto

v / / 

m sM 

En el siguiente paso, asignaremos al área de tex to un gran margen exterior izquierdo, y acolcha remos ligeramen te el encabezado.

.....

<*.v. r '■?' .*

" ¿u

x

1. Com pleta las reglas CSS para ul y li en el área de navegación: #nav ega cion ul {

color: black;  width: 80px;  paddingleft: lOpx;

1. Asign a un margin izquierdo al área de tex to:

 marginle ft: 0;

}

#areatexto {

#na veg acion li {

padding-top: 20px ;

list-style: none;

padding-right: lOpx; padding-bottom: 2 Opx;

 borderleft: lpx solid #d90000;  borderbottom: lpx solid #d90000;

pa ddin g-le ft: 20px;

 margin: 0;

 ma rg in lef t: 130px;

}

} 2. Am plía el pa dd in g-bo ttom  del encabezado de 0 a lOpx:

 /+   Línea de borde encima del elemento de lista "Inicio" */

#navegacion #navi01 {  bordertop: lpx soli d #d90000;

#encab ezado {

} 2. Guarda la hoja de estilos y abre las páginas en el navegador.

position: relative; color: #000; bac kgr oun d-c olo r: #f3c600; padding: lOpx 2Opx lOpx 2 Opx;

} 3. Gua rda la hoja de estilos y abre las páginas en el navegador. La página se verá así: ► Oñ -A o « W » » s KM)

UtttB b D X E S

C « ¡ w . l . sw n i o '

L¿8 W íírlK W«e e«tv . eca-OCuettas ó* que  saa

La única novedad es ünavegacion ttnaviOl. Este selector nos permite seleccionar el primer punto de navegación y darle una línea de borde supe rior, para q ue la lista de nave gación no qued e abierta por arriba: . VUttta *.mrt - *Mfcv | y-  f  -------

r  xxiczautí -nntnensu

I 4- •

Inicio :a 16

En las dos primeras reglas, hemos definido una anchura fija y un par de márgenes y líneas de borde.

ccíoca r unos juwo

'adundo es

» ¡ > v t s s   suc»rptmr

 üjf.i

ji -

u n y a Vio t

«Vi

*ta * 

c«k

' udu

uÜ s*gui«nCM pasos ntuasrrar. *t cacninc do «la la cre aodn d e las

1,*

ET K

1

 

_____  __  _________ 

Little b n X E B

*

-

Q

£ ■

■ da p i n i n a » ».«b uw C S S .

tw

a»>ktaitavi

I H

• aíi eavuna hti*

• BMtaQMft “'TW tt f MftVMM. * Tlhiot

iTor'Oitto

 ___________________________ __________ 

Empezaremos preparando las propiedades del modelo de cajas para la lista no ordenada y sus componentes.

Inicio i ac paginas n*£ ostan --ixnpuesiai tía cuadros r«cUnovt ,>» se ( CMCCa r U T4 » 3 CtTO* o c-^s^pcr-el e o L e*us ToJC lo o>» <•>

Fig. 63: El contenido se encuentra junto a la navegación

Paso3: dar formato a los elementos de la lista de la navegación

■

I

■

ir- .«I ln- í. 1 , < * \  _»V6. o

am ?- » c
L2~ pssoe ai carena de&dé crée oso de ¡as -e>si r«ata
•

Fig. 64: Navegación con lista formatea da

Paso 4: formato de los vínculos de la navegación El siguiente paso consiste en dar formato a los vínculos.

"^ísL

77

Diseños de varias columnas con CSS tAtktoC i-6 at ftr  

.

1. Com pleta las reglas CSS de los vínculos como sigue:

Itittle

o

&

í 

* / 

text-decoration:

0*s«Ao<}ep¿9teaswebcoeCSS.»

box ES LH

display: block; /* toda la superficie

t-yjCi 

Inicio

#navegacion a { es "clickable"

áf

riltti-il  Í» (l« ní

tí'ív:

S*

r+etMnrpA**** cut

oo.cU2  ■CCI3C9 •s-ocncB«cv truc»,tílgrsftrc avBsccacas. te*

laanros ti 

vW» í»

Sí

none; F/g. 65: Navegación con lista formateada

color: black; padd ing : 4p x; border-left: 3px solid white; /*

&

invisible */

} 2. Guard a la hoja de estilos y abre las páginas en el navegador. En la primera declaración, los vínculos se con vierten en elemento de bloque, de modo q ue el vínculo se vuelve tan ancho como el contenedor li y el usuario podrá hacer clic en todo el punto de navegación.

Paso 6: “Faux colum n” - Color de fondo para la navegación Quizás habrás observado que la columna de na vegación en realidad no es una columna, puesto que la altura de la sección de navegación corres ponde a su contenido. Si asignamos un color de fondo a #navegación, el efecto salta a la vista: ! * ** •

'■hlllB

1. Com pleta las reglas CSS de los hiperv íncu los de la navegación como sigue: #navegacion a:hover, #inicio #navi01 a, #pagcontacto #navi02 a

{ color: black? background-color: white; border-left: 3px solid #d90000;

} 2. Guarda la hoja de estilos y abre las páginas en el navegador. Estas declaraciones no son nada complicadas. El truco radica en que el borde invisible de 3 píxe les que hemos definido antes se sustituye aquí por una línea de color de la misma anchura. Lis tos. La navegación está casi terminada.

M c m n iH t a

C

'ICr—-

§

 b D X E S cck<¿r -jet* 5 o i - j í t í V f t w « n» ~i*3o sí te s « «e -rtueo o a* tiveo. tí» :c«w

Paso 5: resaltar el punto de navegación actual

Tarea: barra de navegación vertical - punto de navegación actual

ga iw nii

3 «9

Para completarlo, un pequeño pa dd in g y una lí nea de borde izquierda de 3 píxeles invisible.

Por último, nos ocuparemos de los efectos rollover y del resaltado del punto de navegación ac tual.

s s B .t »

 tea !^ ¡u ir < íi o e «a m *r ít »jr » «t n r r ¿ de es » * ¡n a c a s se ¡es CS5> c k» i i * « w » : i. -t ra r. = tí =

•rwíttK“«t«wpmsm»

Fig.  66: ¿Una columna? Parece que no...

Para d ejarlo claro: •

La única forma segura de colorear toda la columna hasta el pie es utilizar una imagen de fondo. • Asign aremo s dicha imagen a un elemento que llegue hasta el pie, por ejemplo thorap per. Dan Cederholm bautizó esta técnica como "faux colum n" ("column a falsa"). Para la siguiente ta rea necesitarás una imagen de color que tenga la misma anchura que el área de navegación: 130 x 5 píxeles en este caso serían unas dimensiones adecuadas. Si lo deseas, puede s utilizar el gráfico navi_bg_solid.jpg que se incluye en el suplemento del cuaderno, o también puedes crear una ima gen propia. Para que el pie de la página no ad quiera color, deberemos asignarle explícitamente blanco como color de fondo.

78

Diseños de varias columnas con CSS —

de navegación vertical - fondo de

la derecha co n flo at :right.  Como recordatorio, veamos un a vez más la estructura HTML:

background-color: white;

...

...

...

...

background-image: urKnavi_bg_sol id.jpg) ;

Código 38: Las secciones div del ejemplo

back gro und -re pea t: repeat-y;

El código CSS básico para un diseño a dos co lumnas con elementos flotantes opuestos sería el siguiente:

1. Com pleta la regla de tkvrapper: #wrap per { color: black;

background-position: top left; width: 720px; min-width: 600px; margin: lOpx auto;

} 2. Vue lve a hacer que el fondo sea blanco: bac kgro und -co lor : white;

}

padding: 20px;

#areate xto { float: right; width: 520 px ; back gro und -co lor : #eee;

lOpx;

border-top: lpx solid #5c743d; margin-top:

}

#encabezad o { back gro und -co lor : #f3c600;

#pie {

padding-top:

#wrap per { width: 720px; margin: auto;

2 0px;

} 3. Guard a la hoja de estilos y abre las páginas en el navegador. El diseño a dos columnas basad o en fl oat y mar  gin ya está listo.

} #na vega cion { float: left; width: 180px; back gro und -co lor : #d9d9d9;

} #pie { clear:both;

} Código 39: Areatexto float.rig ht y navegación float:left OK e f t o d a p t j m e ' S w e b c o a C S S . l : *n * l. % rv ;> i To v

Con algo de CSS adicional para la decoración, el diseño tendrá más o m enos este aspecto:

Inicio r.* b 6£C3r>CWO'J®*?*? rijjK btyi rccfe oyxjbw e-' Vjtt LOS «otr Tí*4o  1.0  rt.vxivn cok-car ur*» /jn io a ctib s o to (* * ¡*ri» '&3#r4t< ijr m x».  >jngráfica c »rt>3S eo»<».

90

LW

P9SO«

x-aiot bastabságw

a roorine desde ia

Uummidai

cíóo Sí ’ís

• Ai funoona K'ML •

HTML ynpofbyitst

Fig. 67: El diseño a dos columnas terminado con float y margin

Float II: 2 columnas con floats opuestos A continuación, me gustaría presentar breve mente otro m étodo para crear diseños basados en float: los floats opuestos ("Opposing floats"). La ventaja de este sistema es que constituyen una base m uy flexible y se pueden transformar fácilmente en diseños con más de dos columnas.

Dos columnas con float:left y float:right En primer lugar, crearemos un diseño de dos co lumnas con dos secciones flotantes opuestas: una flotará a la izquierda con float:le ft  y la otra a

0 .

Llttle Boxes - Encabezado m ~c£r e$aóoo i  SeeJdr.

i

Areatexto tfcefo íovd b de 2 «

<«e4eetkfe•Qeor»&t

afpfltrto {

ftwí neia. XTdñL

«í¡íe{drarbo»-}

Fig. 68: Dos columnas con float:left y floatrigh t

Entre las dos columnas se crea un espacio virtual de 20px. Para desp lazar la navegación ha cia la derecha, solamente es necesario invertir las de claraciones float :lef t y float :rig ht.

Diseños de varias columnas con CSS Orden flexible en HTML: el área de texto antes de la navegación Una de las ventajas de los floats opuestos es que podem os invertir fácilmente en el código HTML el orden de üareatexto y #navegación sin que ello afecte al d iseño:

...

 

Primero el

   

.. .después lad* navegación.  

 

...

 

...

   

...

 

...

...

Código 41: Divs adicionales para un diseño de 3 columnas

En el diseño de 2 colum nas, el área de texto tenía una anchura de 520 px, que ahora podemos re partir como nos parezca entre las dos nuevas secciones. Un ejemplo: #con teni dopr in { float: left; width: 350px;

Fig. 69: Diseño de 3 columnas con float:left y float:right

Diseños flexibles Hasta ahora hemos indicado todas las anchuras en píxeles porque el hecho de diseñar con CSS con medidas fijas en píxeles es más fácilmente comp rensible al principio. Sin embargo, uno de los inconvenientes de los diseños basad os en píxeles es su falta de flexibi lidad, por lo que enseguida presentaré dos al ternativas: • •

En los diseños líquidos ("liquid layouts") la anchura se indica en porcentaje En los diseños elásticos ("elastic layouts") la anchura se indica en em

Este tema va más allá del alcance de este cua derno, por lo que solamente lo veremos muy por encima, pero puedes utilizarlo como punto de partida para tus propios experimentos. Líquidos, elásticos, frustrados Solamente recomiendo probar los diseños lí quidos y elásticos cuando se hayan adquirido conocimientos sólidos de los diseños en píxeles, o si se tiene una gran capacidad de sobre pone rse a la frustración. El resultado de estos diseños no siempre es lo que uno espera.

80

Diseños de varias columnas con CSS

Diseños líquidos con porcentajes En los diseños líquidos, la anchura de las seccio nes div se expresa en porcentaje, por lo que se adaptan a las dimensiones de la ventana del na vegador. Si asignamos a üwrapper   una anchura del 85% en lugar de 720px, este div siempre ten drá una anchura correspondiente al 85% de la ventana, independientemente de su tamaño. La ventaja es que en resoluciones de pantalla grandes se aprovecha mejor la superficie de pan talla disponible. Sin embargo, esta ventaja tam bién puede ser un inconveniente, ya que las ven tanas de navegador muy anchas (o muy estre chas) dificultan la lectura del texto. En el siguiente ejemplo, cambiamos el formato del anterior diseño de tres columnas por porcen tajes: #wrapper { width: 85%; } /* Nav egación y área de texto = 98%, con 2% de columna entre ambos * /  #navegacion { fl oa t:left ;

El 85% para #wrapper es el resultado de prue bas, errores y el análisis del código fuente de otras páginas. El área de navegación y el área de texto se dividen a razón de aproximadamente 1 a 3, sacrificando un 1% en cada caso para una columna virtual entre la navegación y el texto. En cifras, eso significa: • 24% para la sección de navegación • 74% para el área de texto Ten en cuenta que las indicaciones en porcentaje en el cálculo de las dos columnas ücontenidoprin y #contenidosec en la zona de texto hacen referen cia a la anchura de üareatexto, y no a üwrapper. Con los valores indicados de 32% y 65%, la co lumna ücontenidosec es visualmente tan ancha como el área de navegación.

Diseños elásticos con em Los diseños elásticos resultan aún más difíciles de comprender inicialmente, porque se basan en el tamaño de fuente que se utiliza. Incluso los usuarios experimentados pueden tener proble mas.

 width: 24%;

}

}

Para no perderse en un mar de cálculos, vale la pena recurrir a un pequeño truco que Richard Rutter descubrió en un artículo que vale la pena leer ( h ttp://zvmv.clagnut.com/blog/348/  ).

 width: 65%;

El truco consiste en definir el tamaño de fuente de body en 62,5%:

#areatexto { float: right;

 width: 74%; #contenidoprin { float: left; background-color: #d9d9d9;

•

}

 width: 32%;

} Código 43: CSS adicional para 3 columnas

Este será el aspecto del diseño en el navegador: tfrrxsvti 

V

-

&

« y wai mw luyas

«i* Ourxfi*O I na.'* m

Q

o í-* irat   ase atrSws ótí  5?*»

Little Boxes

-

-•» . © • •

o

B

Encabezado

C o n t e n i d o p r in c i p a l

SiíSJMSwdMTl ' «Etarnsfii.

l o Kt&ean  * rr—rarfripragysév m m b M » s e « t a r a * » *x  srr q tt  «cape ti 71% 1# n c h n 4e

 )

 ¿* tq rt r 

•CCSMttfcfSK

•

 Somekñ.

:

-•

* * w » *€*«* -UKT--V

> tefe CongiOB

•

> £fj£}

fias» K * .%■«

)

dHT&A ) Tt'WMQBfe

Fig. 70: La base de un diseño liquido

« Q

}

Después de aplicar este cambio es necesario am pliar el tamaño de fuente de otros elementos, pe ro de esta forma se sim plifica en gran med ida la creación de diseños basados en em. El razona miento subyacente es el siguiente:

#contenidosec { float: right;

' } 

body { font-size: 62.5%;

1

le m  corresponde al tamaño de fuente están dar. • En casi todos los navegadores, el tamaño de fuente estándar es de 16px. • Con núm eros redond os com o 10 es más fácil hacer cálculos. • 10 es a 16 lo qu e 62,5 es a 100. La quintaesencia de este juego matemático es ex tremadamente práctica: •

Para convertir un diseño basado en píxeles en un diseño basado en em, solamente de bemos dividir todas las indicaciones por 10 y sustituir px  por em.

Diseños de varias columnas con CSS En esta tabla se ilustra más claram ente: Diseño en píxeles

Diseño en em

#wrapper { width: 720px; margin: auto: } #areatexto { float: right: width: 520px: } #contenidoprin { float: left; width: 350px; } #contenidosec { float: right; width: 150px;

#wrapper { width: 72em; margin: auto; } #areatexto { float: right; width: 52em; } #contenidoprin { float: left; width: 35em; } #contenidosec { float: right; width: 15em; \ ; #navegacion { float: left; width: 18em;

\ / #navegacion { float: left: width: 180px; }

}

Tabla 19: A la izquierda el diseño basado en píxeles, a la derecha la correspondencia en em

Aunque parezca impresionante, este método también presenta inconvenientes: •

En el caso de elemen tos anidado s, em  dismi nuye progresivamente. Ello puede traducir se en más de una sorpresa para los diseña dores web. • Cua ndo se utiliza un tamaño de fuente grande, un diseño elástico puede crecer más allá del 100% y ob ligar al usuario a desp la zarse horizontalmente por la página. Este último problema se podría resolver indi cando una anchura máxima de 100% (max-width: 100%), pero no todos los navegadores compren den la orden. ¿Adivinas cornetamente cuál?...

Recordatorio Para terminar, repasemos los puntos más impor tantes de este capítulo: •

Los diseño s CSS de varias colum nas se ba san principalmente en dos técnicas: -

Utilizando un tamaño de fuente normal no se aprecia la diferencia en tre diseño fijo y elástico: • • •

•

i»*— 1«**>

■**— 

Dtt lr Boxes - En cabrad o

Fig. 72: El diseño es elástico. El tamaño de la columna aumenta con el tamaño de la fuente.

•

 flo at y margin  fl oat: left y fl oat: rig ht  (elementos flotan tes opuestos)

Hay dos tipos de diseños flexibles: -

En la siguiente ilustración se p uede apreciar la ventaja de un diseño basado en em: si amplia mos el tamaño de la fuente, la anchura de las co lumnas crece de forma dinámica.

 po sition :abs olute y margin float en distintas variantes

Los diseños con position:absolute no pueden tener una línea de pie que abarque todas las columnas. Los diseños con anchuras fijas son más fáci les de crear para el p rincipiante, pero restan a la página parte de la flexibilidad. Dos méto dos de diseño con flo at son: -

Fig. 71: Un diseño basado en em con tamaño de fue nte normal

81

Diseños líquidos ("liquid") con anchu ras en porcentaje Diseños elásticos ("elastic") con anchu ras en em

Naturalmente, también es posible mezclar todas las variantes.

82

Patchwork: parches en CSS

Patchwork: parches en CSS El mundo de CSS es un paraíso, contrariamente al de los navegadores. En los últimos año s, los navegadores se vieron obligados a aprender lentamente CSS. De ahí que, cuanto más antiguo sea un navegador, me nor será su capacidad C SS y mayor su propen sión a los errores. De todas formas, puede que sea una buena noticia, porque significa que en algún mom ento este capítulo necesario sobre remiendos terminará desapareciendo.

Parches y hacks Sin parches, en los últimos años el diseño con CSS habría sido prácticamente im posible en mu chos casos, y por eso en algunos libros sobre el tema la sección dedicada a los parches es incluso más extensa que la descripción de algunos con ceptos tan importantes como la cascada.

Antes de aplicar parches, com probar  Aunq ue todavía no es posible renunciar comple tamen te a los parches, cabe esperar que con la desaparición de los navegadores antiguos a lar go plazo desaparezca la necesidad de usarlos. Utiliza navegado res conformes a los estándares como Firefox u Opera para probar tus páginas y excluir posibles errores. Puedes consultar la siguiente página (en inglés) para comprobar si un determinado navegador tiene problemas con determinadas propiedades o selectores CSS: •

http://www.westciv.com/style  master/academy/ browser support/index.html

Estilos especiales para determinados navegadores Si un navegad or exige un tratamiento especial para representar correctamente CSS, existen dos posibilidades: 1. Incluir los parches en la propia hoja de esti los, directamente en las reglas afectadas. 2. Incluir los parches en una hoja de estilos separada que solamente se aplicará a de terminados navegadores.

La segunda variante presenta la ventaja de que el CSS original correcto es más fácil de leer y re sulta más sencillo gestionar los parches. Descu briremos algunos ejemplos más adelante con @imp ort y los Conditional Comments. Otros parches con nom bres tan fantásticos como hack de la estrella, Tantek's Box Model Hack, Box  M odel H ac k simplificado y Box Model H ack sim pl ifi  cado ampliado se integran directamente en el CSS y dificultan la lectura de las instrucciones de formato. Algunos au tores de CSS parecen trabajar si guiendo el lema "cuan tos más parches, más ex perto". En realidad es lo contrario: sólo deberías usar parches cuando no haya más remedio. En las siguientes páginas encontrarás más informa ción: • • • •

http://www.disenorama.com/tutoriales/ comentarioscondicionalesparaie http://www.communitvmx.com/content/ article.cfm?cid=E0989953B6F20B41/ http://www.positioniseverythinq.net/ http://www.csslab.cl/cateqorv/hacks/

@import - ocultar estilos a los navegadores antiguos @import supone una alternativa a link para vin cular HTM L y CSS y presenta la ventaja de que los navegad ores antiguos como Netscape 4 no compren den esta orden, por lo que no llegan a ver las reglas CSS que les resultan tan difíciles de digerir. Un ejemplo:

Código 44: V incular una hoja de estilos con @import

Para limitar el CSS a un d eterminado m edio uti lizando @import, deberem os escribir después del comando (no funciona en IE6 e inferior):

83

Patchwork: parches en CSS

 < I [endif]> 

Código 46: Conditional Ccmment - sólo para Internet Explorer 

Para enviar una hoja de estilos únicamente a In ternet Explorer V5.0 y V5.5, pue des u tilizar el si guiente comentario.  <1 [if lt IE 6]> 

 < 1 [endif3> 

Código 47: Conditional Comment - sólo para IE5.X 

Las letras It de la con dición //‘significan 'Tess than" (menor que). Toda la condición se traduce como "Si la versión del navegador IE es inferior a 6". Otros operadores condicionales posibles en los Conditional Comments son gt ("mayor que "), Ite ("menor o igual que"), gte  ("m ayor o igual que").

Probar el funcionamiento de los Conditional Comments El siguiente código permite com probar fácilmen te si los Conditional Comments funcionan o si hemos cometido algún error al escribir el código. Abre la página de ejemplo index.html y escribe las siguientes líneas entre y , d e bajo de :   

}

 < J [endif]> 

Código 48: Unfon do amarillo sólo para IE 6

Si todo funciona, la página debería tener un as pecto normal en Firefox, pero en Internet Explo rer 6 debería presentar un fondo amarillo.

84

Patchwork: parches en CSS

Vincular las hojas de estilos para IE después de las demás hojas de estilos Ten en cuenta qu e la hoja de estilos para IE5 se debe vincular después de las otras hojas de estilos. De lo contrario se podrían eliminar al gunos elementos relativos a la cascada, y todo el esfuerz o resultaría inútil.

Conditional Comments en acción En el siguiente ejemplo, Internet Explorer 5.x ob tendrá una hoja de es tilos propia.

La hoja de estilos: tamaño de fuente y centrado para IE5.X Como ejemplo del uso de los Conditional Com ments, utilizaremos dos instrucciones de forma to que causan problem as a Internet Exp lorer 5.x: •

En prim er luga r  fon t-size: sm all, que hemos definido para body en la página 30. • En segund o lugar el centrado de la página con margiivauto que hemos visto en la pági na 46. Internet Explorer 5.x interpreta el valor símil como médium. En consecuencia, para corregir el tamaño de fuente es necesario transmitirle el va lor x-small, que será interpretado como un nivel mayor. De modo que volverá a ser small.  Vamos allá con los parches.

Tarea: corregir el tamaño de fuente para IE 5.x 1. Crea una nueva hoja de estilos con la si guiente regla CSS: bo dy { font-size: x-small;

} 2. Guarda la hoja de estilos com o ie5.css en la misma carpeta de los demás archivos. Y ahora nos ocuparemos del problema de cómo centrar las páginas. Recordemos brevemente la regla CSS simplificada de las páginas de ejemplo del cuaderno: #wrapper ( width: 72 Opx; margin: auto;

} Código 49: Centrado d e #wrapper 

IE 5.x no comprende el centrado con margin: au to. Sin embargo, la solución es simple, porque por suerte interpreta incorrectamente la propie dad text-align: cen ter   y no sólo centra su conteni do sino todo el cuaderno. La siguiente línea de código para IE 5.x nos permite centrar thvrapper: •

body { text-align: center;

}

Sin embargo, para que el texto dentro de #wrapper no q uede también centrado, deberemos completarlo con una segunda regla: •

#wrapper { text-align: left; } — — --- — : -----------------

Tarea: centrado de la página para IE 5.x

1. Com pleta en la hoja de estilos ieS.css las lí neas siguientes: bo dy { font-size: x-small; text-align: center;

} #wra pper { text-align:

left; }

2. Guard a nuev ame nte la hoja de estilos.

En las páginas web: vincular una hoja de estilos sólo para IE 5.x A continuación, insertaremos un Conditional Com ment en ambas páginas web para que In ternet Explorer 5.x reciba la hoja de estilos ie5.css.

Tarea: integrar Conditional Comments en el documento HTML 1. Ab re las páginas index.html y contacto.html y añade los comentarios resaltados en negri ta:

 < i [if lt IE 6]>     <1 [endif]-->

2. Guard a todos los archivos y abre las pági nas en IE5 (si está instalado). La condición iflt IE 6 significa "Si la versión del navegado r es inferior a 6", que es lo mismo que decir V5 y V5.5.

Patchwork: parches en CSS El otro modelo de cajas de IE 5.x En el capítulo sobre el m odelo de cajas, en la pág. 44 descub rimos que el cálculo de la anchura total de una caja no es nada intuitivo: •

En el mundo real, el relleno y la anchura del marco se incluyen  en la indicación de la an chura d e una caja. • En las cajas CSS , el relleno (padding) y la an chura del marco (border-zvidth) se añaden a la indicación de la anchura (zvidth). Para calcular la anchura total, Internet Explorer 5.x toma como modelo las cajas del mundo real, por lo que se equivoca. Internet Explorer 6 calcu la las cajas correctame nte, siempre que esté fun  cionando en modo estándar. Dicho de otro modo: si en una caja se definen tanto zvidth como valores horizontales para  pad  ding  o border , IE5.X e IE6 en modo quirks repre sentan la caja demasiado pequeña. Un ejemplo: p#e jemplo { wi dt h:40Opx ; padding:lOpx; border:solid lOpx #333;

} Código 50: Ejemplo CSS para el cálculo de la anchura de una caja

•

•

Si se calcula correctamen te, este párrafo tie ne una anchura de 440px: 400px zvidth  más lOpx de  pa dd ing-left, pa dding-right, border-left y border-right. Si se calcula erróneam ente, el párrafo sola mente mide 400px: Los 400px del zvidth incluyen  pa dding  y bor der.  E s decir, para el contenido solame nte nos quedan 360px.

No cuesta imaginar que estos cálculos erróneos pueden tener consecuencias drásticas en el dise

85

ño med iante CSS. Siempre que indiquemos un doctype  correcto para nuestras páginas web, IE6 trabajará en modo estándar, por lo que sólo de bemos preocu pamo s por IE5. De algún modo tenemos que indicarle a IE5 que calcule la an chura de la caja de otra forma. La solución: Conditional Comments. En una hoja de estilos especial (p.ej. la que hemos creado antes ie5.css)f  que solamente se enviará a Internet Explorer 5.x con ayuda de Conditional Comments, definiremos la anchura de la caja en 440px: • p#ejemplo { width: 44Opx; } Las indicaciones de  pa dd in g  y border  se mantie nen sin cam bios conform e a la cascada, y por fin las aguas vuelven a su cauce.

Recordatorio Hagam os un repaso de los puntos más impor tantes de este capítulo: •

Existen num erosos tipos de parches, filtros y hacks para navegadores, aunque es aconse  jabl e m oderar su uso al m ínim o im prescin  dible. • @import permite o cultar hojas de estilos a los navegadores antiguos. • Los Conditional Comm ents permiten definir estilos exclusivos para Internet E xplorer y lograr así que muestre las páginas correcta men te a pesar de los errores CSS. • Internet Explorer V5.x y V6 en el llamado modo quirks interpretan incorrectamente el modelo de cajas.

86

Herramientas importantes

Herramientas importantes En este capítulo conoceremos una serie de Jterramientas importantes, concretamente programas útiles, sitios zveb de ayuda y algunos libros.

5^CSS* ¿J fo rm s^ g&Jmages* Qí Informa#

Para terminar el cuaderno me gustaría ofrecer algún último consejo sobre navegadores, edito res, sitios web y libros.

Disafcie Stytes

►

Display £SS fiy Msdia Type

►

^

CSS

C trl+ Mayú s.+C

VtewSryte Information Ctrl+Ma*/ús + Y Add Us*r Style Sheet...

Navegadores Toda página web se visualiza a través de un na  vegador, y bajo Windows el equipamiento mí nimo para los desabolladores web es la última versión del sigu iente triunvirato: • Inte rnet Exp lorer • Mo zilla Firefox • Opera Firefox y Opera funcionan conforme a los están dares, e IE7 promete incorporar muchas mejoras. Para Mac debemos incluir en la lista Safari, y pa ra Linux, Konqtieror.

CS5

Ctrl+Mayús. +£

Use Border Box Model

Fig.73: Web Developer Toolbar 

Así, por ejemplo, por cualquier página web que estemos viendo en Firefox, podem os visualizar y editar   las instrucciones CSS qu e utiliza la misma en la barra lateral. El navegador m ostrará los cam bios en tiempo real en la ventana del navegado r, lo que permite comprender fácilmente el efecto de los coman dos CSS:

Un navegado r de sólo texto como Lynx también puede resultar útil para valorar la accesibilidad de una página web: los motores de búsqueda só lo pueden leer las páginas como navegadores de sólo texto. Lo que no vea Lynx, probablemente tampoco lo verá el robot de Google. Lynx Viewer En Internet es posible encontrar una emula ción de Lynx para probar tus páginas en la di rección siguiente: http://www.delorie.com/web/lvnxview.html

Extensiones: Web Developer  para Firefox Web Developer   es una recopilación de herramien tas útiles y, para m uchos d iseñadores w eb, es la extensión de Firefoz más importante. Web Developer permite hacer muchísimas cosas: analizar páginas web, comprobar la accesibili dad, mostrar y editar el código CSS de cualquier página, ocultar imágenes, medir objetos con pre cisión del orden de píxeles y mucho más.

Fig. 74: Edición en vivo de CSS con Web Developer Extensión

Web Developer Extensión es una herramienta verdaderamente útil para la verificación y análi sis. Recomiendo a cualquiera que se tome el tiempo de familiarizarse con esta extensión; en poco tiempo te estarás preguntando cóm o podí as vivir sin ella. Chris Pederick ofrece la descarga del programa y de la documentación: •

Descarga: http://chrispederick.com/work/webdeveloper/

•

Documentación: http://chrispederick.com/work/webdeveloper/ documentation/

87

Herramientas importantes Incluso existe una versión traducida al español y al catalán del programa, aunque la documenta ción sólo está dispo nible en inglés.

En TopStyle Pro es posible visualizar simultá neamente una página en Internet Explorer (arri ba) y M ozilla Firefox (abajo):

Internet Explorer Developer Toolbar

Microsoft también ofrece una Internet Explorer  Develop er Toolbar, aunque sólo está disponible en inglés y no es comparable al original de Chris Pederick.

Mc
Si te interesa, visita la dirección http://www.microsoft.com/downloads/ e introduce como criterio de búsqueda "Internet Explorer Developer Toolbar". .. ■ ■ ■ ■ ■ v ...;.y .... «w V.

Editor de código *£ «XHTML1 0

-

■

jj|H

 _

__ 

Fig. 76: TopStyle Pro muestra la vista previa de la página simul táneamente en IE y Firefox

i3i¡7 1

B f t t n t w t e c i A t t tt b tr t fr x i  P  * m »c

  ¿i.— 

Lo único qu e criticaría de TopStyle es que no in tegra una función de administración de proyec tos ni de carga por FTP/SFTP.

& lropecíOf nspectgrf

Si te interesa, puedes descargar una versión de prueba de 20 días de TopStyle en la siguiente d i rección: http://www.newsqator.com/NGOLProduct.aspx ? ProdlD=TopStvle

arrouth

Existía una versión gratuita llamada TopStyle Li te, aunque ya no se puede encontrar en el site desde que New sgator adquirió la empresa de Nick Bradbury.

backgrcvxj background-attdcbrnení background-coíor BDefwerMcrf ^ backgjoundHmage backgfound-pcabon backgfound-repeaf B border "-¥Ms 3 bofdei-bottom  JÍ® ac e borderbottomcolor B t v en ís botdeí-bottom-síyte

b«d« fcpsce

/

o nc lic k *    . . J U I . C . I ,

oc-ssj

;

Sample Text #CSS1

A '$■

• E 4 # M S 4 # N S8 # 0 8

Fig. 75: TupStyle Pro en acción

Hace unos años, Nick Bradbury creó HomeSite, uno de los mejores editores de código HTML que posteriormente fue absorbido por Macrome dia Dreamweaver.

Si todavía encuentras alguna versión de TopSty le Lite para descargar (busca en Goog le p.ej. "TopStyle L ite Dozvnload"), la versión Lite será más que suficiente para estudiar este manual. Alternativas a TopStyle

Puedes encontrar una lista muy exhaustiva de editores CSS (también para otros sistemas operativos) en la web del W3C: http://www.w3.Org/Style/CSS/#editors

Con TopStyle Pro, ha creado un editor de CSS que también permite editar HTML cóm odamen te. Algunos de sus puntos destacados:

Sitios útiles

• •

Los siguientes sitios web sobre CSS merecen como mínimo una vista, aunque esta lista no pretende ser exhaustiva y existen muchos más.

• •

HT ML  jv CSS en un editor Comprobación de sintaxis CSS y del nave gador Búsqued a y sustitución de colores CSS Integración con el validado r del W3C

Sitios generales sobre CSS Adem ás de mi propio sitio web ( h ttp://infotekten.de ) en alemán, puedo recomen dar los siguientes sitios relacionados con CSS:

94

índice de palabras clave

índice de palabras clave limportant, 39, 62 @import, 82 a (elemento HTML), 19, 32 address (elemento HTML), 22 Árbol genealógico del documento, 60 background, 48 background attachment, 49 background-color, 29, 30 background-image, 48 background-position, 49 background-repeat, 48 blockquote (elemento HTML), 22 body (elemento HTML), 11

border, 43, 46 bottom (posicionamiento), 66,67 br (elemento HTML), 21 Cascada, 60 Especificidad (specificity), 38 Los niveles de la cascada, 61  Vin cul ación d e estilos, 34  Y herencia , 61

Centrar Página web, 46 Texto, 31 Character Entities (HTML), 22 cite (elemen to HTML), 22 class Como atributo, 38 ,71 Com o selector, 71 Como selector (.), 38 Diferencia con respecto a id, 38 Ejemplo práctico, 71 Nombres para clases, 38

clear (y float), 72 Código fuente (es la página), 5 collapsing margins, 43 color, 29, 30, 69 Conditional C omments (IE), 83 Crear formulario de contacto, 57 Crear versión para imprimir, 56 CSS

Cascada, 34 ,60 Clases (class), 71 Core Styles del W3C ,25 Crear comentarios, 28 Definir medio, 56 Definir medio de salida, 82

Editores, 87 estructura de una regla CSS (style), 31 Guardar en el head (