Ir directamente al contenido de esta página
id y classdirectionfontfont-familyfont-sizefont-stylefont-variantfont-weightletter-spacingline-heighttext-aligntext-decorationtext-indenttext-transformunicode-bidivertical-alignwhite-spaceword-spacingdirectionltr: La dirección de lectura del bloque de texto es de izquierda a derecha.rtl: La dirección de lectura del bloque de texto es de derecha a izquierda.inherit: El elemento hereda el valor del elemento padre para esta propiedad.ltr.direction indica la dirección de lectura del bloque texto del elemento, pero no la dirección de sus caracteres; controla cuestiones como la situación de la puntuación y el espacio en blanco de una línea corta en el caso de un texto justificado. Por ello, en el ejemplo de abajo hay que prestar atención a estos detalles para no confundir su valor rtl con una simple alineación a la derecha.Ver ejemplos de los valores de direction.
font [propiedad de conjunto]font-family, font-size, font-style, font-variant, font-weight y line-height.
font: bold small-caps 1em/1.5 "Trebuchet MS","Lucida Grande",Verdana,sans-serif;
font tiene la particularidad de que además de los valores de las propiedades específicas, cuenta con un conjunto de valores exclusivos. Se trata de una serie de palabras clave seleccionan el cuerpo, familia, peso y color de la fuente de algunos de los elementos de la interfaz del sistema operativo. Estos valores son:caption: Es la fuente que emplea el sistema operativo para marcar controles, como botones.icon: Es la fuente empleada como etiqueta para iconos.menu: La fuente usaba en los menús, como por ejemplo los desplegables.message-box: La fuente usada en los cuadros de diálogo.small-caption: La fuente usada como etiqueta para controles pequeños.status-bar: La fuente utilizada en las barras de estatus de las ventanas.Ver ejemplos de los valores de font.
font-family"Times New Roman", y respetando mayúsculas y minúsculas de su nombre— o un tipo genérico. Se pueden añadir todas las fuentes que se desee, por orden de preferencia y separadas por comas. Para que la CSS valide, la última elección debe ser un tipo genérico de los cinco disponibles: serif, con serifa, o remates decorativos en los extremos de los trazos; sans-serif, sin serifa, o «de palo seco»; monospace, monoespaciada, es decir, con un ancho de caja igual para todo caracter; cursive, a imitación de la escritura a mano; fantasy, diseños que no encajan en las clases anteriores, por lo general iconos, símbolos, o tipos ornamentales.inherit: El elemento hereda el valor del elemento padre para esta propiedad.| Windows | Macintosh | Linux/UNIX | |
|---|---|---|---|
| serif | Book Antiqua, Bookman Old Style, Garamond | New York Palatino, Times | Bitstream Vera Serif, New Century Schoolbook, Times, Utopia |
| sans-serif | Arial narrow, Century Gothic, Lucida Sans Unicode, Tahoma | Charcoal, Chicago, Geneva, Helvetica, Lucida Grande | Bitstream Vera Sans, Helvetica, Lucida |
| monospace | Courier, Lucida Console | Courier, Monaco | Bitstream Vera Mono, Courier |
Ver ejemplos de los valores de font-family.
font-sizexx-small: : Es un tamaño de fuente más pequeño establecido por el navegador.x-small: Es un tamaño de fuente establecido por el navegador que es bastante más pequeño que el tamaño por defecto de la fuente.small: Es un tamaño de fuente establecido por el navegador que es un poco más pequeño que el tamaño por defecto de la fuente.medium: El tamaño por defecto de la fuente de un navegador. En los navegadores actuales por defecto suele ser 16 píxeles.large: Es un tamaño de fuente establecido por el navegador que suele ser el resultado de multiplicar el tamaño medium por un factor, por lo general 1.5.x-large: Es un tamaño de fuente establecido por el navegador que suele ser el resultado de multiplicar el tamaño large por un factor, por lo general 1.5.xx-large: Es un tamaño de fuente establecido por el navegador que suele ser el resultado de multiplicar el tamaño x-large por un factor, por lo general 1.5.smaller: Indica que el tamaño de la fuente es de un tamaño anterior al establecido con las palabras clave anteriores en el elemento padre.larger: Indica que el tamaño de la fuente es de un tamaño posterior al establecido con las palabras clave anteriores en el elemento padreinherit: El elemento hereda el valor del elemento padre para esta propiedad.medium.xx-small a xx-large son en realidad valores absolutos, puesto que independientemente de lo establecido en la hoja de estilo, se calculan siempre con respecto al tamaño por defecto de la fuente en el navegador. Así, si la fuente por defecto tiene un tamaño de 16 píxeles, medium asignará ese tamaño al texto del elemento, aun en el caso de que el elemento padre del mismo tenga en la hoja de estilo un font-size de 12 píxeles.smaller y larger, se trata de unidades relativas, e indican un nivel inferior o superior en la lista de palabras claves de valores absolutos. Así, si el tamaño de fuente de un elemento se especifica como small, un hijo al que se asigne larger presentará el tamaño equivalente a medium.Ver ejemplos de los valores de font-size.
font-stylenormal: Es el aspecto inicial recto de la fuente.italic: Selecciona una variedad de la fuente diseñada específicamente como cursiva, si ésta existe en la familia de fuente.oblique: Los caracteres de la fuente se presentan inclinados, pero no es una auténtica cursiva tipográfica, sino el resultado de cálculos llevados a cabo por el navegador para deformar el tipo recto.inherit: El elemento hereda el valor del elemento padre para esta propiedad.normal.
Ver ejemplos de los valores de font-style.
font-variantnormal: Las mayúsculas y minúsculas del texto se mantienen tal y como aparecen en el código.small-caps: Las mayúsculas del texto se presentan como mayúsculas, pero las minúsculas se presentan como versalitas.inherit: El elemento hereda el valor del elemento padre para esta propiedad.normal.Ver ejemplos de los valores de font-variant.
font-weightnormal: Es el peso inicial de la fuente.bold: Indica que el texto debe presentar un peso mayor; es lo que solemos llamar negrita.100-900: Indica diferentes grosores —siempre múltiplos de 100— para una fuente en concreto. El valor equivalente a normal suele ser 400, y el bold 700.bolder: Indica que el texto debe presentar un grosor equivalente al siguiente grado de la escala de valores numerados que el del elemento padre.lighter: Indica que el texto debe presentar un grosor equivalente al anterior grado de la escala de valores numerados que el del elemento padre.inherit: El elemento hereda el valor del elemento padre para esta propiedad.normal.100 y 900 dependerán de los creados por el diseñador de la fuente. En general, son pocas las fuentes para las que se han diseñado tipos de nueve grosores diferentes, por lo que la especificación indica como se asignan los valores (inglés):100 al 900.400.500.700.500, se asigna al mismo tipo que ya tenga asignado 400; los valores de 600, 700, 800 o 900 no asignados se asimilan al tipo siguiente de mayor peso si existe, o al peso anterior en caso contrario; los valores de 100, 200 o 300 no asignados se asimilan al tipo de menor peso anterior si existe, o al siguiente mayor en caso contrario.Ver ejemplos de los valores de font-weight.
letter-spacingnormal.Ver ejemplos de los valores de letter-spacing.
line-heightnormal: El valor por defecto especificado en el agente de usuario. La especificación dice que debería ser uno razonable, entre 1 y 1.2 veces el tamaño de fuente.inherit: El elemento hereda el valor del elemento padre para esta propiedad.normal.line-height se divide entre dos para repartirse equitativamente sobre y debajo de una línea. Así, line-height:10px crearía un espacio de separación de 5 píxeles encima y debajo de los caracteres.Ver ejemplos de los valores de line-height.
text-alignleft: Alinea un bloque de texto a la izquierda.right: Alinea un bloque de texto a la derecha.center: Centra un bloque de texto.justify: Justifica un bloque de texto.inherit: El elemento hereda el valor del elemento padre para esta propiedad.left, aunque depende también de la propiedad direction: si se ha especificado ltr, y no se ha especificado la alineación, ésta será left; si en el mismo caso se ha especificado rtl, será right.Ver ejemplos de los valores de text-align.
text-decorationnone: Especifica que el texto no debe presentar decoración alguna.underline: Especifica que el texto debe aparecer subrayado.overline: Especifica que el texto debe presentarse bajo una línea.line-through: Especifica que el texto debe presentar una línea que lo cruce sobre su eje horizontal, como tachándolo.blink: El texto debe parpadear. Sí, aunque el elemento se ha depreciado, y en una demostración de buen gusto muchos navegadores modernos ya no lo soportan, existe como propiedad de estilo (inglés).inherit: El elemento hereda el valor del elemento padre para esta propiedad.none.Ver ejemplos de los valores de text-decoration.
text-indent0.Ver ejemplos de los valores de text-indent.
text-transformnone: El texto presenta las mayúsculas y minúsculas originales.capitalize: La inicial de cada palabra del bloque de texto aparece en mayúscula.lowercase: Todas las letras se representan como minúsculas.uppercase: Todas las letras se representan como mayúsculas.inherit: El elemento hereda el valor del elemento padre para esta propiedad.none.Ver ejemplos de los valores de text-transform.
unicode-bidinormal: El elemento no crea un nivel adicional de anidamiento con respecto a la dirección intrínseca del texto del elemento padre.embed: El elemento crea un nivel adicional de anidamiento con respecto a la dirección intrínseca del texto del elemento padre.bidi-override: Indica que la dirección del texto debe ser la especificada en la propiedad direction, independientemente de la dirección intrínseca que esté especificando el algoritmo de bidireccionalidad.inherit: El elemento hereda el valor del elemento padre para esta propiedad.normal.Como en el caso de direction, no resulta fácil apreciar las diferencias entre los diversos valores de la propiedad. En el caso de unicode-bidi es aún más difícil, puesto que hace referencia a cómo se debe aplicar el algoritmo BiDi I18N, pero no tiene efecto alguno sobre el texto a menos que en el estilo se defina adicionalmente para el elemento la propiedad direction. Es por ello por lo que no presento aquí ejemplo de esta propiedad.
vertical-alignbaseline: Alinea la línea de base del elemento con la línea de base del elemento padre.sub: Alinea la línea de base del elemento con la posición apropiada para un subíndice.super: Alinea la línea de base del elemento con la posición apropiada para un superíndice.text-bottom: Alinea la arista inferior de la caja del elemento con la arista inferior de la caja del elemento padre.text-top: Alinea la arista superior de la caja del elemento con la arista superior de la caja del elemento padre.middle: Alinea el punto medio de la altura de la caja del elemento con la línea de base del elemento padre a la que se suma la mitad de su altura de x2.bottom: En el contexto de un elemento en línea con diversos descendientes con diversas alineaciones verticales, alinea verticalmente la arista inferior de la caja del elemento al que se aplique esta propiedad con la arista inferior del elemento situado más abajo.top: En el contexto de un elemento en línea con diversos descendientes con diversas alineaciones verticales, alinea verticalmente la arista superior de la caja del elemento al que se aplique esta propiedad con la arista superior del elemento situado más arriba.inherit: El elemento hereda el valor del elemento padre para esta propiedad.baseline.baseline, top, middle y bottom.Ver ejemplos de los valores de vertical-align.
Como creo que es al principio cuesta comprender las diferencias de los valores representados por las palabras clave de esta propiedad, añado ejemplos planos que tal vez clarifiquen un poco más.
white-spacenormal: Al representar el texto, los espacios en blanco presentes en el código se colapsan en uno, y los saltos de línea se ignoran; las líneas se establecen según los límites de la caja que contenga el texto.pre: Al representar el texto, los espacios en blanco se conservan, y los saltos de línea coinciden con los presentes en el código.nowrap: Los espacios en blanco se colapsan, los saltos de línea se ignoran, pero además no se crean saltos de línea al alcanzar el límite de la caja, es decir, todo el texto del elemento aparece en una sola línea.pre-wrap: Los espacios en blanco se preservan, se mantienen los saltos de línea presentes en el código y además se crean saltos de línea nuevos para ajustar el texto a su caja.pre-line: Los espacios en blanco se colapsan, aunque se mantienen los saltos de línea presentes en el código y se crean otros nuevos para ajustar el texto a su caja.inherit: El elemento hereda el valor del elemento padre para esta propiedad.normal.pre de XHTML, white-space no presenta por defecto el texto en una fuente monoespaciada.Ver ejemplos de los valores de white-space.
word-spacingnormal.Ver ejemplos de los valores de word-spacing.
line-height:0.85. 
