Propiedades de Texto

espaciado de palabras (word-spacing) y espaciado de letras (letter-spacing)

Las propiedades word-spacing y letter-spacing pueden ser usadas para añadir espacio extra entre palabras o letras.

este es un ejemplo de letter spacing

este es un ejemplo de word spacing

Los valores que admite la propiedad word-spacing son "normal" o unidades de longitud. Los valores pueden ser negativos.

Igualmente, la propiedad letter-spacing admite valor "normal" y expresado en unidades. Tambien pueden ser valores negativos.

'text-decoration'

La propiedad text-decoration se refiere a la decoración de un elemento (aunque si el elemento carece de texto, la propiedad no surte efecto alguno), proporcionando un subrayado ( underline ), sobrerrayado (nos entendemos, overline ), tachado ( line through ), parpadeo ( blink ) o ninguno (none). Este ultimo es el que se usa para quitar el subrayado a los links.

El color requerido para el elemento "decorativo", es decir, el subrayado, es tomado del color del texto. Esta propiedad no es hereditaria, pero los elementos suelen igualar a aquellos de los que dependen (parents), y en este caso la linea permanecerá del mismo color aunque los elementos herederos (child) tengan diferentes valores de color. El ejemplo a continuación muestra como eliminar el subrayado característico de los links:

A:link { text-decoration: none; }

'vertical-align'

Esta propiedad permite controlar la posición vertical de texto o imágenes en relación a su elemento parent. Los posibles valores son:

• top , alinea la parte superior del elemento con el elemento parent mas alto en la línea.
• bottom alinea la parte inferior del elemento con el elemento parent inferior en la línea.
• text-top alinea la parte superior del elemento con la parte superior de las fuentes (letras) del elemento parent.
• text-bottom alinea la parte inferior del elemento con la parte inferior de la letra o fuente del elemento parent.
• baseline coloca en línea el elemento con el elemento parent.
• middle alinea el punto medio del elemento con el punto medio del elemento parent.
• sub coloca al elemento en subscript, y super en superscript.

este texto es normal; esto es sub y esto super . ¿gran cosa, no?

'text-transform'

La propiedad text-transform convierte texto a mayúsculas (valor uppercase), minúsculas (valor lowercase), o solo convierte a mayúscula la primera letra de cada palabra (capitalize). El valor text-transform : none visualiza el texto normalmente, ignorando cualquier otro valor text-transform heredado.
Los valores admitidos son, entonces, "capitalize", "uppercase", "lowercase" y "none" 

Capitalize Mirum Est Notare Quam Littera Gothica, Quam Nunc Putamus Parum Claram, Anteposuerit.

UPPERCASE: EODEM MODO TYPI, QUI NUNC NOBIS VIDENTUR PARUM CLARI, FIANT SOLLEMNES IN FUTURUM.

lowercase: ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.

'text-align'

La propiedad text-align se aplica a texto dentro de un bloque (por ejemplo, texto dentro de las etiquetas P o DIV, que forman un bloque) y determina la alineación del bloque. Los valores son alinear con margen izquierdo, derecho, justificado o centrado (left, right, justify, center). Se recuerda que la alineación es con el margen, no con el borde de la página

'text-indent'

La propiedad text-indent se usa para tabular (indent, sangria de texto) la primera línea dentro de un bloque. Los valores admitidos son unidades de longitud, o porcentaje. Admite valores negativos. Este párrafo tiene este estilo.

'line-height'

La propiedad line-height (que se podía especificar dentro de la propiedad font) señala la distancia vertical entre líneas, medida entre las bases de cada linea. La base de una linea es la señalada por la parte inferior de un tipo de letra "no descendente"; por ejemplo, una "a", y no una "j". Los valores se asignan mediante un número (si indicamos line-height: 2 decimos al navegador que la distancia entre lineas ha de ser el valor font-size multiplicado por 2). Puede tambien señalarse con unidades de longitud; o por porcentaje (referido tambien al valor font-size).

Este es un ejemplo de párrafo con la propiedad line height, que hemos dejado fijada en el valor font-size multiplicado por dos.

No se permite valor line-height negativo.

Espacios

La propiedad white-space permite el control de los espacios dentro del elemento. Esta propiedad toma uno de tres valores:

• normal (contrae múltiples espacios en uno)
• pre (no contrae múltiples espacios)
• nowrap (no permite el ajuste de línea sin una etiqueta 
  )

display

La propiedad display se usa para definir un elemento con uno de cuatro valores:

• block (muestra un salto de línea antes y después del elemento)
• inline (ningún salto de línea antes o después del elemento)
• list-item (igual que block, salvo que se agrega un marcador de ítems de lista)
• none (sin visualización)

A diferencia de la propiedad visibility que veremos al tratar del posicionamiento, y que también permite ocultar elementos html, cuando un elemento tiene la propiedad display con valor none, es como no existiera, no se reseva el espacio que ocupaba.

Normalmente las propiedades display, white-space y list se suelen estudiar bajo el apartado de 'clasificación', aunque para mayor claridad nosotros mostramos las dos primeras dentro de las propiedades de texto, dejando una página aparte para las listas.

Propiedades de las Fuentes

CSS1 define las propiedades 'font-family', 'font-style', 'font-variant', 'font-weight', 'font-size', y 'font'.

La posibilidad de manejar las fuentes es una de las mas apreciadas en las "hojas de estilo"; pero recuerda ...

• Existen diferencias en el modo en que los navegadores interpretan las reglas de estilo. Este es un principio general que tambien, por desgracia, se aplica a las reglas de estilo relativas a las fuentes.
• Existen muchas diferencias entre los valores que admite un tipo de fuente u otro. Por ejemplo: veremos que se pueden especificar hasta nueve valores de negrita o bold , pero muchas fuentes estan diseñadas de tal forma que solo permiten ser visualizadas en dos valores: normal o negrita.
• De nada sirve que especifiquemos una fuente especial, y maravillosa, si el usuario no la tiene instalada en su ordenador.

'font-family'

Valor: a esta propiedad pueden asignarsele como valores una lista jerárquica de tipos de letra específicos o genéricos. Los valores deben ir separados por comas, para indicar que son alternativos:

body { font-family: verdana, helvetica, "sans-serif"; }

Lo usual es especificar como valor primero los tipos de letra de elección del autor y dejar como última alternativa una "familia genérica".

Hay cinco familias genericas de fuentes. Enumeramos los nombres de estas familias, y entre paréntesis un ejemplo de fuente perteneciente a la misma: serif (Times), sans-serif (Arial, Helvetica), cursive (Comic Sans), fantasy (Ransom) y monospace (Courier).

Dentro de cada familia, la elección del tipo específico dependerá de los tipos que el ordenador tenga instalados, pero usando como última elección una 'familia generica' aseguras al menos que el documento se visualizará con una fuente semejante (de la misma familia) que la designada. Ejemplo

Los nombres de fuentes que contengan espacios en blanco deben especificarse entre comillas. 

Si se omiten las comillas, el navegador ignorará los espacios en blanco antes y despues del nombre de fuente, y cualquier número de espacios en blanco "dentro" del nombre de fuente se convertirá en un solo espacio. 
Si la fuente se define in line, deben usarse comillas simples:

 style = "font-family: 'gill sans', arial;"> texto ... 

'font-style'

Este es un texto en italic y sin embargo este otro es oblique

La propiedad 'font-style' permite elegir como valor un tipo de fuente normal , italic o oblique . El valor normal visualiza una letra normal. El valor italic visualiza letra en cursiva . El valor oblique visualiza una fuente aún mas inclinada que la cursiva. La diferencia entre italic y oblique pasará desapercibida en la mayor parte de las fuentes.
Típicas fuentes oblique son "oblique", "slanted" o "incline"; etiquetadas como italic, "italic", "cursive" o "kursiv".

h1, h2, h3 { font-style: italic; }

h1 em { font-style: normal; }

'font-variant'

valores: "normal", o "small-caps". Estas últimas son letras mayúsculas de un tamaño mas pequeño que el normal. Si el tipo de fuente seleccionado no tiene versión smalls-caps, el navegador visualizará el texto en mayúsculas ordinarias. Ejemplo:

h3 { font-variant: small-caps; }

Y ahora un ejemplo: esto debería verse en small-caps y esto EN MAYUSCULAS NORMALES.

'font-weight'

Valores: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900.
El valor 'font-weight' determina el grosor de la fuente. Los valores 100 a 900 indican una secuencia jerárquica, donde cada número indica un grosor secuencialmente mas oscuro como su predecesor. El valor "normal" equivale a 400. 'Bold' equivale a 700.

p { font-weight: normal; } /* 400 */
h1 { font-weight: 700; } /* bold */

Este texto tiene un valor 200

Este es un texto normal;

Este es texto weight 700 o 'bold';

Este tiene un valor 900.

Los anteriores son valores absolutos; junto a ellos tenemos dos valores relativos: 'bolder' y 'lighter' seleccionan grosores de fuente mayores o menores en relación al grosor "heredado" del elemento del que dependen.

No existe certeza sobre el grosor exacto con que un navegador determinado puede visualizar una fuente. Por ejemplo, algunas fuentes solo admiten dos valores (normal y bold).

'font-size'

La propiedad font-size determina el tamaño de la fuente. Los valores pueden especificarse

• de forma absoluta
• de forma relativa
• en porcentaje
• expresando su unidad de medida

de forma absoluta

Al especificar el tamaño de la fuente en valores absolutos, el autor de la página se remite a la tabla de tamaños de fuentes predeterminados en la base de datos del ordenador del usuario. Son valores admisibles xx-small, x-small, small, medium, large, x-large, y xx-large .

Medium es el tamaño de fuente por defecto, y cada uno de los valores absolutos supone un incremento o disminución de tamaño en un valor constante. Este valor constante de aumento o disminución de tamaño, segun la especificación CSS1, es de 1.5; sin embargo, en el standard CSS2 es de 1.2.; algunas familias de fuentes tienen un incremento o disminución de tamaño segun un valor propio; y finalmente los navegadores pueden ofrecer un tratamiento del tamaño distinto del especificado. Pero en cualquier caso, los diferentes valores absolutos siempre respetarán sus proporciones entre ellos. Una fuente x-large será siempre mas grande que una fuente large. Un ejemplo:

xx-large

x-large

large

medium

small

x-small

xx-small

A título de ejemplo, font-size 'x-large' se visualiza con tamaño equivalente a 28 puntos en Communicator (Windows o Macintosh), a 24 puntos en el IE 4 (Windows y Macintosh), y 18 puntos en el IE 3.0 para Windows 95.

de forma relativa

La segunda forma de especificar el tamaño de la fuente es usando valores relativos. Los valores admitidos son smaller o larger, y hacen la fuente mas pequeña o mas grande comparada con el valor que tenía inicialmente. Si la fuente venía definida por un valor absoluto, el empleo de un valor relativo hace que el valor absoluto se incremente o decrezca un grado: si la fuente tenía un tamaño large, dandole un valor relativo smaller pasa a ser el equivalente a medium. Si el valor inicial no está expresado de forma absoluta, la expresión de un valor relativo smaller o larger empequeñece o engradece la letra a criterio del navegador. Ejemplos:

xx-large

smaller

smaller

smaller

smaller

smaller

smaller

larger

larger

larger

larger

larger

larger

larger

El ejemplo comienza con un valor absoluto xx-large; se reduce seis veces asignando sucesivamente el valor relativo smaller (la última linea smaller es teóricamente equivalente a xx-small) y luego se incrementa con el valor relativo larger siete veces, lo que determina que la última orden visualice la letra a un tamaño mas grande que xx-large. ATENCION: se advierte que Netscape Navigator visualizaba en sus anteriores versiones la fuente larger verdaderamente grande ....

En porcentaje

La expresión del tamaño de fuente en porcentaje funciona de forma similar al tamaño relativo. Cada valor en porcentaje visualiza la fuente en un tamaño superior o inferior porcentualmente al valor inicial, de la siguiente forma:

Double Normal Half.

En este caso a la primera palabra hemos asignado un valor porcentual de 200% (doble) que el normal, y a la tercera un valor 50% (mitad). Para el ejemplo, el valor normal se ha definido de forma absoluta como x-large.

En unidades

Finalmente puede designarse el tamaño de la fuente con su valor en unidades: cm, in, pt, px. 

'font'

Valores: font-style, font-variant, font-weight, font-size, line-height, font-family.

La propiedad 'font' permite definir de forma agrupada valores para 'font-style' , 'font-variant' , 'font-weight', 'font-size', 'line-height' y 'font-family' en una sola regla. Es decir, ademas de las ya examinadas propiedades de las fuentes, line-height , que en realidad es una propiedad de texto y alude al espacio entre líneas, es decir, distancia entre la parte superior e inferior de las letras de dos lineas contiguas.
No es necesario especificar valores para todas las propiedades, sino solo para aquellas que se deseen cambiar.
Las propiedades grosor (weight), estilo (style) y variant se pueden especificar en cualquier orden; seguidas por el tamaño (size), seguidas por una barra o slash "/" y la altura de linea (line-height), seguidas por la familia (family).
asi,

p { font: italic bold 12pt/14pt Times, serif; }

especifica párrafos con negrita (bold) e itálica (italic), fuente Times o serif con un tamaño de 12 puntos y una distancia entre líneas (o altura de linea) de 14 puntos.

Float

La propiedad float permite sacar a un elemento del flujo del documento, y posicionarlo a la izquierda o derecha de otros elementos adyacentes. Admite tres valores, right, left y none.

Un valor left significa que el elemento formará un bloque que se situará a la izquierda de los elementos adyacentes. Un valor right significa que el bloque se situará a la derecha.

Un bloque 'flotante' debe tener definida su anchura, implicita o expresamente, ya que de lo contrario será tratado como no flotante

clear

clear se utiliza conjuntamente con float para indicar cuando un elemento flotante permite otros elementos flotantes junto a el.

Sus posible valores son none, left right o both.

• none: el elemento permite otros flotantes a ambos lados
• left: el elemento no permite flotantes a su izquierda
• right: el elemento no permite flotantes a su derecha
• both: el elemento no permite flotantes a ningun lado

Ejemplos: dos divs sin flotar

primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque

segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque

Ejemplos: primer bloque flotante a la derecha

primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque

segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque

Ejemplos: primer bloque flotante a la izquierda

primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque

segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque

Ejemplos: primer bloque flotante a la izquierda, segundo clear:both

primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque

segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque

Ejemplos: tres bloques, los dos primeros flotantes a la derecha

primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque

segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque

tercer bloque tercer bloque tercer bloque tercer bloque tercer bloque tercer bloque tercer bloque tercer bloque tercer bloque tercer bloque tercer bloque tercer bloque tercer bloque tercer bloque tercer bloque tercer bloque tercer bloque tercer bloque tercer bloque tercer bloque tercer bloque

Cuando hay varios elementos flotantes adyacentes (es decir, con el mismo elemento padre) la parte superior de cada caja flotante se alineará a la misma altura si existe espacio. Caso contrario, la última caja será desplazada hacia abajo, hasta el primer lugar donde pueda ser ubicada.

Elementos flotantes

Cualquier elemento puede flotar en la página, no solamente los formadores de bloque. Al asignar la propiedad float a un elemento automáticamente lo estamos convirtiendo en una caja, debiendole asignar una anchura determinada.

Color y background

Estas propiedades describen el color y fondo de un elemento, por ejemplo, el color del texto (color, foreground color) y el color del fondo (background-color).

La propiedad background permite asignar como fondo un color o una imagen. Tambien permite determinar el posicionamiento de la imagen; si ha de repetirse y como; y si se desplazará con el texto en caso de scroll o permanecerá fija.

'color'

Esta propiedad describe el color de un elemento. Hay varias formas de identificar el color: por su nombre, cuando está admitido en el standard; o por su valor RGB:
Todo es rojo:

em { color: red; }
em { color: rgb(255,0,0) }
em { color: #FF0000; }

•   aqua
•   black
•   blue
•   fuchsia
•   gray
•   green
•   lime
•   maroon
•   navy
•   olive
•   purple
•   red
•   silver
•   teal
•   white
•   yellow

El atributo color asigna al texto un color, especificado por su nombre o valor RGB. Se pueden designar los 16 colores arriba representados por su nombre (es la lista básica que todo navegador entenderá, pero hay muchos mas colores que pueden indicarse por su nombre), o especificar cualquier otro con su valor hexadecimal (RGB, red green y blue).

'background-color'

Con CSS y la propiedad background-color podemos controlar el fondo de cualquier elemento HTML, no solamente la propia página o las celdas de una tabla.. Mediante esta propiedad podemos decidir si asignamos un color o una imagen; el modo en que esta ha de repetirse o no; si se desplazará con la página o permanecerá fija.

Podemos especificar un 'color' de fondo para cualquier elemento con background-color : color, o asignar un valor 'transparent'.
Es muy recomendable que si especificas el background para un elemento, especifiques tambien su color, para evitar sorpresas con otros estilos declarados o heredados.

'background-image'

Podemos especificar una imagen de fondo, indicando su direccion por medio de una url, o señalar que no hay ninguna (none). Cuando se especifica una imagen de fondo es también conveniente especificar un color de fondo alternativo.
Ejemplo:

body { background-image: url(/imagenes/fondo.gif) }

Fijate que por defecto salvo contraorden la imagen se repite para ocupar todo el fondo del elemento ... en este caso todo el BODY

'repeat'

Por medio del parámetro background-repeat y sus valores: repeat, repeat-x, repeat-y, no-repeat podemos determinar si la imagen de fondo ha de repetirse (si no ocupa toda la pantalla), y la forma de hacerlo. 
Si se especifica 'repeat', la imagen se repetirá horizontal y verticalmente. Los valores 'repeat-x' y 'repeat-y' hacen que la imagen se repita horizontal o verticalmente, respectivamente, creando una banda de imagenes de un lado a otro.
Con el valor de 'no-repeat', la imagen no se repite.

body { background: red; url(fondo.gif); 
background-repeat:repeat-y; }

'background-attachment'

Valores: scroll, fixed.

Si se especifica una imagen de fondo, el parámetro 'background-attachment' especifica si permanecerá fija o acompañará al contenido si deslizamos la página con la barra de scroll.

body {
background: red url(fondo.gif);
background-repeat: repeat-y;
background-attachment: fixed;
     }

'background-position'

La propiedad background-position controla la ubicación inicial de la imagen, utilizando los valores top, left, right, bottom y center. Tambien admite valores absolutos, y porcentajes
La forma más sencilla de asignar una ubicación de fondo es con palabras clave:

Palabras clave horizontales (left, center, right)
Palabras clave horizontales verticales (top, center, bottom)
También pueden usarse porcentajes y longitudes para asignar la posición de la imagen de fondo. Los porcentajes son relativos al tamaño del elemento.

Al usar porcentajes o longitudes, la posición horizontal se especifica primero, seguida de la posición vertical. Un valor como 20% 65% especifica que la imagen se colocará 20% a la derecha y 65% abajo del elemento. Un valor como 5px 10px especifica que la esquina superior izquierda de la imagen se colocará 5 pixels a la derecha y 10 pixels abajo de la esquina superior izquierda del elemento.

Si solo se da el valor horizontal, la posición vertical será 50%. Se permiten combinaciones de longitudes y porcentajes, ya que son posiciones negativas. Por ejemplo, 10% -2cm está permitido. Sin embargo, porcentajes y longitudes no pueden combinarse con palabras clave.

Las palabras clave son interpretadas como sigue; 

top left = left top = 0% 0% 
top = top center = center top = 50% 0% 
right top = top right = 100% 0% 
left = left center = center left = 0% 50% 
center = center center = 50% 50% 
right = right center = center right = 100% 50% 
bottom left = left bottom = 0% 100% 
bottom = bottom center = center bottom = 50% 100% 
bottom right = right bottom = 100% 100% 

'background'

Valores: background-color, background-image, background-repeat, background-attachment, background-position.

Se trata simplemente, de la posibilidad de especificar todos los valores del background en una sola propiedad, de forma similar a lo que ocurría con 'fonts'. 

Unidades y Medidas

LLevamos un tiempo refiriendonos a medidas en longitud y porcentaje. LLegado es el momento de echar un vistazo mas de cerca.
En ocasiones, como hemos mencionado, el valor de una propiedad se puede expresar por unidades de longitud. Por ejemplo, los valores de font-size y text-indent.
Las unidades de longitud consisten en un número seguido de una unidad de medida (cm, em, in, pt, px). Hay dos tipos de unidades: absolutas y relativas.

Unidades absolutas:

• pulgadas (in). Una pulgada=2.54 cm.
• centímetros (cm).
• milímetros (mm)
• puntos (pt). Un punto=1/72 de pulgada.
• picas (pc). Una pica=12 puntos

Unidades relativas

• em
• ex
• px

La unidad em es igual a la altura (font-size) de la letra del elemento en el que se usa. Por ejemplo si para un párrafo especificamos un indentado de 2em, el largo de la sangría será igual a dos veces el tamaño de la letra de ese párrafo. Cuando empleamos la unidad de medida 'em' para especificar el tamaño de la letra (font-size) entonces el valor de 'em' viene dado por el tamaño de la fuente del elemento padre.

p { font-size:11px;text-indent: 2em; }

Este ejemplo equivale a un indentado de 22 px para el párrafo a que se aplica

div { font-size:15px;}
p { font-size:1.2em;}

En este ejemplo, si el párrafo está contenido en un elemento div, el tamaño de la letra sería un 20% mayor que el especificado para dicho div. O si no estuviera contenido en un div, un 20% mayor que el tamaño de letra del elemento del que descienda (por ejemplo, body).

Recuerda que no hay que dejar espacios en el valor de longitud y la unidad de medida

No es lo mismo expresar las medidas en una unidad u otra. Unidades "absolutas" como pixels, centímetros, puntos, permiten un control exacto de la apariencia de la página, siempre claro está, que esta se visualice en el entorno preciso para el que fue diseñada. Por ejemplo, la unidad 'pixel' tiene un valor diferente dependiendo de la resolución de la pantalla y el tipo de ordenador del usuario. Así, normalmente un sistema operativo Windows mantiene una equivalencia de 96px por pulgada, y un Macintosh 72px por pulgada. Si en lugar de pixels se utiliza la medida de puntos (pt) el tamaño del punto depende de la resolución de la pantalla del usuario.

Esta es la razón por la que se recomienda el uso de unidades de medida 'relativas', y dentro de estas, el uso de 'em'.

En origen la unidad 'em' era el equivalente a la altura (height) de la ´M´mayúscula. En la actualidad, sin embargo, la unidad 'em' alude simplemente al tamaño de la fuente instalada.

Con este tipo de medidas el autor mantiene un control relativo ya que, en relación con el tamaño de fuente por defecto del usuario, puede especificar cuanto mas grande o mas pequeña se ha de visualizar la letra de la página.

Ademas la unidad 'em' puede utilizarse para cualquier propiedad CSS que admita medidas (márgenes, sangrías ...) lo que permite un diseño proporcionado al sistema del usuario.

La unidad ex es igual a la altura de la letra x minúscula (la propiedad 'x-height' de la fuente utilizada.

En muchos tipos de fuentes existe la siguiente proporción: un "em" equivale a 1.5 "ex".

La unidad px es un pixel. La unidad pixel tiene valores distintos en términos de visualización en pantalla, y en términos de impresión.

La unidad pixel no es muy aconsejada, pues los elementos que la utilicen se visualizaran de forma diferente en un monitor dependiendo del tamaño de pantalla y resolución; otras unidades responden mejor a estos diferentes entornos.

Vamos a ver algunas comparaciones.

3em, 2em,1em:: texto normal ::3ex, 2ex,1ex :: texto normal ::20px, 15px,10px

1in, 1cm, 10mm, 12pt, 3pc

Unidades de porcentaje

Un valor de porcentaje se forma por un número y el signo %. No hay espacios en un valor de porcentaje.
Los valores de porcentaje se fijan en relación a otro. Generalmente, el valor de porcentaje es relativo al tamaño de fuente del elemento:

:: texto tamaño normal :: 50% - 100% -200%

Práctica 8 uso de DIV

Realizar esta estructura con ocho divs.

Práctica 7 uso de DIV

Realice el siguiente diseño.

Práctica 6 uso de DIV

Práctica 5 uso de DIV

En este ejemplo, veremos la forma en que se puede realizar una maquetación con DIV’s de una estructura de página bastante sencilla. El ejemplo consiste en una área de encabezando, un panel izquierdo, el área para contenido y un footer. Los elementos que describiremos a detalle, en este artículo serán:

• Centrado horizontal de un elemento DIV
• Estructuras más dinámicas con DIV’s
• Cuidando los anchos y altos

Centrado horizontal de un elemento DIV

Aunque parezca algo extraño, los elementos DIV pueden centrarse utilizando los atributos margin-left: auto; margin-right: auto;. En cierto sentido, es compresible pensar es esta forma, como una forma lógica de centrar los elementos horizontalmente, dado que el valor auto para ambos lo empuja hacia el centro.

Estructuras más dinámicas con DIV’s

Nada extraordinario, ocurre cuando dibujamos los elementos en su forma por defecto. Pero cuando, colocamos al elemento que representa al panel izquierdo y le asignamos float: left, el siguiente elemento, se corre a su lado. Podemos notar en el código que el panel tiene el atributo hacia la izquierda y el contenido hacia la derecha. Esto causa que uno este pegado hacia ese margen para el contenedor, por lo que se restamos el ancho de cualquiera de los dos, podriamos apreciar que queda un espacio vació en el centro.

Cuidando los anchos y altos

Ahora, vemos la parte más delicada de la maquetación. El dibujado de la página puede no verse como se esperaba. Debemos considerar que cuando un elemento sobrepasara el ancho de su contenedor y es flotante, caerá a la linea siguiente. Aunque puede ocurrir que si el elemento tiene una orientación hacia la izquierda y el que sobrepasa el tamaño la tiene hacia la derecha, este último dejará una porción de su contenido por debajo del anterior. Debemos cuidar, sobre todo los anchos totales de los elementos por linea. Recordemos que cuando aplicamos valores a los margenes, el explorador suma el ancho fijo más el margen; igual que con el padding. Para ello, si deberemos hechar mano de una calcularadora, por que cualquier valor adicional, sea de margenes, padding, bordes, etc. aumentara el tamaño fijo del objeto.

Maquetando con DIV’s

La antigua técnica para maquetar una página, se basaba en tablas. Sin duda, en su momento fué una herramienta útil. Sin embargo, a medida que la Web a venido evolucionando, esta misma técnica a sido la culpable de muchos problemas para los webmaster.

• El uso de las tablas está condicionado a la mera tabulación de datos.
• Un diseño con tablas no es flexible, es decir, que no podemos cambiar la distribución de los elementos en la página, a menos que la volvamos a hacer.
• Cada Explorador renderiza de manera distinta cada documento HTML y con estructuras con tablas el cambio es más notorio
• Ocupa más espacio y más ancho de banda.
• Google no indexa de igual manera las páginas con estructuras basadas en tablas.

Ahora, que ya conocemos todas estan desventajas de usar maquetación basada en tablas, podemos darnos cuenta que, comparada con la técnica de maquetación con DIV’s, las tablas son mas bien un estorbo en la optimización de nuestros sitios. Para maquetar correctamente con DIV’s debemos hacer uso extenso de CSS, algo que tal vez no nos guste mucho, pero que reducirá el tiempo de desarrollo considerablemente. Antes de comenzar, debemos:

• Elegir un buen editor HTML
• Tener la guía de XHTML y CSS a mano. Sin ánimo de hacer publicidad, podemos solicitar una copia gratuita a la oficina de la W3C de España
• Tener instalado en nuestro sistema como minimo Internet Explorer 6 y 7 (sí, aunque no lo crean, se puede instalar multiples versiones de Internet Explorer en un computador), Mozilla Firefox y Opera, y si son usuarios de Macintosh; Safari.
• Lapiz y Papel: lo mejor será que el diseño de la página lo hagamos de esta manera. La razón de esto es que de esta manera, tendremos un plano adecuado de los elementos y distribución de los bloques que vamos a trabajar, tratando de optimizar el número de bloques, por que recordemos que entre más compleja es nuestra página, más riesgo enfrentamos de que el explorador la renderice incorrectamente.

Entendiendo la Lógica de la maquetación con DIV’s

Casi todos hemos usado elementos DIV. Sabemos por experiencia que un elemento DIV nos reserva un bloque y que todo lo que vaya después; caerá a la linea siguiente. Pero, al igual que las imagenes, los elementos DIV, pueden configurarse para que dejen el texto y los elementos al lado. Esto lo lograremos con el atributo FLOAT; que usaremos ampliamente para ir adecuando nuestros elementos en la página. Un DIV con FLOAT: LEFT ó RIGHT, se alineará dejando el texto al lado. Podemos ir creando DIV’s sucesivos para que se vayan colocando, uno al lado del otro. Pero, maquetando de esta manera surge un problema y es que el DIV se torna flotante y se sale de su contenedor. Para solucionar esto, el contenedor deberá tener como atributo DISPLAY: TABLE (generalmente). Esto hará que el tamaño del contenedor se adapte a sus elementos.

Además, lo mejor será que trabajemos con anchos fijos y no en porcentaje (aunque, con un conocimiento más amplio, yo lo recomendarí), en pixeles, por que los exploradores trabajan con algunas variaciones en las medidas (en especial Internet Explorer, que "hasta pierde pixeles") el renderizado será más parecido de explorador a explorador.

Una recomendación adicional, sería usar siempre clases CSS para cada sección y bloque, tratando de ir generalizando con los atributos para optimizar la página. Pero si los atributos son pocos ó solamente en esa página se va a trabajar con un elemento con atributos únicos, podría personalizarse colocando los atributos y valores CSS, dentro de una parámetro STYLE, no olvidando utilizar estilos por defecto.

Códigos de colores HTML

Los colores en HTML son construidos usando una combinación de tres colores básicos: rojo, verde y azul. Cada uno de estos colores toma un valor entre 0 y 255 y son representados en notación hexadecimal (00 a FF). De esta forma, un color está compuesto por seis caracteres donde los dos primeros representan el valor para el rojo, los dos segundos representan el valor para el verde y los dos terceros representan el valor para el azul (por ejemplo, el rojo tiene FF para el valor rojo y 00 para el resto: "FF0000").

Al mezclar estos colores se mezclan los colores, de modo que puedes hacer un amarillo mezclando el rojo y el verde (por ejemplo, "FFFF00"), violeta mezclando el rojo y el azul (por ejemplo, "FF00FF") o cyan mezclando verde y azul (por ejemplo, "00FFFF"). Esto funciona exactamente como la paleta de un pintor.

El tono del color también puede ser variado incrementando (por ejemplo, violeta claro "FF66FF") o decrementando (por ejemplo, violeta oscuro "AA00AA") los tres valores proporcionalmente.

Nota: por la naturaleza de esta página, los no videntes pueden encontrar el siguiente mapa de colores escasamente útil.

Mapa de colores