CSS-2.1: Formatos

COLOR DE PRIMER PLANO {color : x}

CSS21
Para especificar el color de primer plano. El texto y los bordes se consideran primer plano. Los valores de x pueden ser:
  • Un color. El valor inicial depende de la configuración de usuario en el navegador.
  • inherit (SE HEREDA)
Se aplica a todos los elementos.

Ejemplo {color}

En el ejemplo siguiente cambiamos el color de un texto a rojo.
Texto en color <span style="color:red;">[ROJO]</span>
Resultado:
Texto en color [ROJO]
Ver también colores.

COMILLAS {quotes : x}

CSS21
Para especificar el tipo de comillas que se usarán en las citas en línea <q>. También se usa con la propiedad {content}, donde sus valores open-quote y close-quote provocan la apertura y cierre de comillas.
Los valores de x son:
  • Una o más parejas de dos valores de cadena. Se destina los valores de cada pareja al entrecomillado en cada uno de los niveles. Para la propiedad {content}, sus valores open-quote y close-quote tomarán de aquí el carácter de comillas a utilizar en cada nivel.
  • none tal que los valores open-quote y close-quote de la propiedad {content} no tienen efecto.
  • inherit (SE HEREDA)
El valor inicial depende del navegador. Se aplica a todos los elementos

Ejemplo {quotes}: citas con comillas

En este ejemplo presentamos el elemento para citas en línea <q> configurando los tipos de comillas a presentar. El código con estilo interno de la propiedad {quotes} se ha incluido en el elemento párrafo pues luego se heredará a las citas incluídas en ese párrafo. Hemos abreviado el texto innecesario que se verá en el resultado.
<p>
    Este párrafo contiene citas en línea 
    <q style="color:red;">cita nivel 1 <q>cita nivel 2</q> fin cita 1</q>
    en dos niveles sin ninguna configuración...
</p>                  
<p style="quotes:'&laquo;' '&raquo;' '&lsaquo;' '&rsaquo;';">
    Este párrafo contiene citas en línea 
    <q style="color:red;">cita nivel 1 <q>cita nivel 2</q> fin cita 1</q>
    en dos niveles...con comillas de ángulo dobles y simples...  
</p>                
<p style="quotes:'[' ']' '(' ')';">
    Este párrafo contiene citas en línea 
    <q style="color:red;">cita nivel 1 <q>cita nivel 2</q> fin cita 1</q>
    en dos niveles...con corchetes y paréntesis.  
</p>
<p style="quotes:'\22' '\22' '\27' '\27';">
    Este párrafo contiene citas en línea
    <q style="color:red;">cita nivel 1 <q>cita nivel 2</q> fin cita 1</q>
    en dos niveles...comillas dobles y simples...
</p>
Resultado:

Este párrafo contiene citas en línea cita nivel 1 cita nivel 2 fin cita 1 en dos niveles sin ninguna configuración, por lo que aparecen encerradas entre comillas que serán dispuestas de forma predeterminada por el navegador.

Este párrafo contiene citas en línea cita nivel 1 cita nivel 2 fin cita 1 en dos niveles. Se ha configurado con comillas de ángulo dobles y simples («, », ‹, ›), que funciona en los tres navegadores citados de igual forma. Usando estilo local o interno podemos representar estas comillas con sus códigos XHTML pues no son directamente accesibles desde el teclado: '&laquo;' '&raquo;' '&lsaquo;' '&rsaquo;' .

Este párrafo contiene citas en línea cita nivel 1 cita nivel 2 fin cita 1 en dos niveles. Se ha configurando con corchetes y paréntesis directamente desde el teclado: '[' ']' '(' ')'

Este párrafo contiene citas en línea cita nivel 1 cita nivel 2 fin cita 1 en dos niveles. Se ha configurando con (", ", ', '), comillas dobles y simples ASCII, pero usando los códigos UNICODE: '\22' '\22' '\27' '\27'

Las comillas generadas en estos casos depende del navegador. En las pruebas del primer ejemplo hemos podido detectar los siguientes resultados copiando la imagen directamente tal como aparece en pantalla con ese navegador para el caso de citas con las comillas por defecto:

NavegadorImagen de pantalla
Internet Explorer 8Explorer
Firefox 3.5Firefox
Opera 10.5Opera
Safari 4.0Safari
 

Ejemplo {quotes}: salto de línea

En este ejemplo probamos como incluir un salto de línea antes y después de cada cita <q>. Para ello usamos el carácter escapado "\A" que indica en CSS un retorno de carro. Puede ver más detalles sobre esto en valores de cadenas. Observe que es necesario incluir la propiedad white-space: pre para que el navegador acepte el salto de línea.
<p style="quotes: '\A['']\A' '\A(' ')\A';">
    Párrafo con citas saltadas 
    <q style="color: red; white-space: pre;">cita nivel 1 <q>cita nivel 2</q> fin cita 1</q> 
    y continúa el párrafo.
</p>
Resultado:

Párrafo con citas saltadas cita nivel 1 cita nivel 2 fin cita 1 y continúa el párrafo.

Hemos comprobado que se realiza según lo esperado en Explorer y Firefox, pero no así en Opera y Safari.

Ejemplo {quotes}: Tipos de comillas

Presentamos una tabla con las comillas de mayor uso. La columna entidad son las palabras clave que sirven para referenciar esos carácteres en el código de XHTML. Los valores de la columna decimal se corresponden con el número de carácter en decimal en la lista ISO 10646, mientra que en la siguiente columna hexadecimal se representan esos mismos valores en hexadecimal que pueden ser usados en estilos como el del ejemplo anterior para configurar las comillas.
descripciónmuestraentidaddecimalhexadecimal
Apóstrofe en ASCII'cita'&apos; &apos;&#39; &#39;0027 0027
Comillas dobles en ASCII"cita"&quot; &quot;&#34; &#34;0022 0022
Comillas angulares simples‹cita›&lsaquo; &rsaquo;&#8249; &#8250;2039 203A
Comillas angulares dobles«cita»&laquo; &raquo;&#171; &#187;00AB 00BB
Comillas simples‘cita’&lsquo; &rsquo;&#8216; &#8217;2018 2019
Comillas dobles de apertura“cita”&ldquo; &rdquo;&#8220; &#8221;201C 201D
Toda esta información se encuentra en las entidades de carácteres, especificadas en los DTD siguientes:
  • Especificación del DTD-LAT1 (DTD Entidades de carácteres Latín 1 para XHTML)
  • Especificación del DTD-SPECIAL (DTD Entidades de carácteres especiales para XHTML)
  • Especificación del DTD-SYMBOL (DTD Entidades de carácteres de símbolos griegos y matemáticos para XHTML)
Sobre codificación de caracteres en diferentes idiomas consultar %Charset y especialmente sobre este tema la parte de referencia a caracteres y codificación de caracteres en CSS. Ver también el ejemplo con el uso de selector de pseudoclase E:lang(){} que contiene la página de ejemplo lang.html que muestra este detalle con el uso del elemento y atributo <q cite>. En la propiedad {content} podemos generar, de otra forma, contenido para entrecomillado.

CONTADORES {counter-s : x}

CSS21
Puesta a cero {counter-reset} Incremento {counter-increment}
Se puede crear una numeración generada de elementos con este atributo, donde "s" da lugar a {counter-reset} y {counter-increment}, una para la puesta a cero del contador y otra para su incremento. Se usa conjuntamente con los valores de counter(), counters() de la propiedad {content}.

Puesta a cero de contador {counter-reset : x}

CSS21 Para poner a cero el contador. Los valores de x pueden ser:
  • Una o más parejas de los dos siguientes valores:
    • Un identificador de contador, obligatorio.
    • Un valor de número, opcional para indicar el primer valor inicial del contador, que por defecto es 0.
  • none (VALOR INICIAL)
  • inherit (NO SE HEREDA)
Se aplica a tdos los elementos.

Ejemplo {counte-reset}

En este ejemplo disponemos encabezados <h2> que enumeramos mediante el contador que denominamos contador-partes. En cada parte incluiremos encabezados <h4> para los temas enumerados con el contador contador-temas. Pero queremos que al inicio de cada parte se reinice el contador de temas. Para ello disponemos un <span> vacío con el único objeto de incluirlo en la clase a-cero aplicando esta propiedad {counter-reset}. Con ello conseguimos que el primer párrafo de cada parte se reinicie a cero. El primer párrafo de todo el documento es reiniciado de forma automática. El código de la página con estilo interno es el siguiente:
...
    <style type="text/css">
        h2:before {content: "PARTE " counter(contador-partes) ": "; }
        h2 {counter-increment: contador-partes; }
        h4.tema:before {content: "Tema " counter(contador-temas) ": "; }
        span.a-cero {counter-reset: contador-temas; }
        h4 {counter-increment: contador-temas; }
    </style>
</head>
<body>
    <h2>Teoría básica</h2>
    <h4 class="tema">Título del tema</h4>
        <p>Contenido del tema</p>
...  
    <h2>Ejemplos resueltos</h2>
    <span class="a-cero" /><h4 class="tema">Título del tema</h4>
        <p>Contenido del tema</p>       
    <h4 class="tema">Título del tema</h4>
         <p>Contenido del tema</p>  
...
Resultado:
El resultado se encuentra en la página Counter-reset.html.

Incremento de contador {counter-increment : x}

CSS21 Para incrementar el contador. Los valores de x pueden ser:
  • Una o más parejas de los dos siguientes valores:
    • Un identificador de contador, obligatorio.
    • Un valor de número, opcional para indicar el incremento del contador, que por defecto es 1.
  • none (VALOR INICIAL)
  • inherit (NO SE HEREDA)
Se aplica a tdos los elementos.

Ejemplo {counter-increment}

En este ejemplo expondremos como enumerar los encabezados de un texto. Supongamos que un texto se divide en partes, temas y apartados, para lo cual le disponemos encabezados h2, h3, h4 respectivamente. A cada sección se le adjudica un contador. Con los encabezados de nivel superior se incrementa el propio contador y se reinician los contadores de nivel inferior. Veáse como el primer encabezado reinicia la lista de contadores contador-tema y contador-apartado separados por un espacio. De esta forma en el cuerpo del documento sólo tenemos que incluir encabezados sin necesidad de enumararlos.
...
    <style type="text/css">
            h2:before {content: "PARTE " counter(contador-parte) " "; color: green; } 
            h2 {counter-increment: contador-parte; counter-reset: contador-tema contador-apartado; }
            h3:before {content: "TEMA " counter(contador-parte) "." counter(contador-tema) " "; 
                color: blue; }
            h3 {counter-increment: contador-tema; counter-reset: contador-apartado; }
            h4:before {content: "Apartado " counter(contador-parte) "." counter(contador-tema) "." 
                counter(contador-apartado) " "; color: red; }
            h4 {counter-increment: contador-apartado; }
    </style>
</head>
<body>
    <h2>Título de la parte</h2>
        <h3>Título del tema</h3>
            <h4>Título del apartado</h4>
                <p>Texto del apartado</p>
             <h4>Título del apartado</h4>
                <p>Texto del apartado</p> 
        <h3>Título del tema</h3>
...
    <h2>Título de la parte</h2>
...
Resultado:
Counter-increment.html.
Lugares donde expone sobre el contenido generado y pueden encontrarse otros ejemplos: {counter}, {list-style}, E:before{},E:after{}, contadores. Sobre codificaciones, referencias y otros detalles de caracteres consultar %Charset, referencia a caracteres y codificación de caracteres en CSS.

CONTENIDO GENERADO {content : x}

CSS21
Esta propiedad se usa con los selectores por pseudo-elemento para contenido generado E:before{},E:after{}. Los valores de x pueden ser:
  • Alguno de los siguientes (uno o más de uno):
    • Un valor de cadena para el contenido del texto a generar.
    • Un valor de url(URL) que señala un recurso externo.
    • Un valor de contador .
    • La función attr(y), que nos devolverá el valor del atributo "y" del sujeto del selector, es decir, del elemento final en XHTML que equivale el selector.
    • open-quote para reemplazar el contenido de apertura de comillas de la propiedad {quotes}.
    • close-quote para reemplazar el contenido de cierre de comillas de la propiedad {quotes}.
    • no-open-quote, insertando una cadena vacía en la apertura de comillas y disminuyendo el anidamiento de comillas.
    • no-close-quote, insertando una cadena vacía en el cierre de comillas y disminuyendo el anidamiento de comillas.
  • normal (VALOR INICIAL). Con este valor se cambia a none cuando se usan con los pseudo-elementos de contenido generado E:before{},E:after{}
  • none de tal forma que los pseudo-elementos anteriores no son generados.
  • inherit (NO SE HEREDA)
Los valores normal, none sólo aparecen en CSS21. Se aplica a los pseudo-elementos E:before{}, E:after{}. Se puede controlar que el contenido generado pueda ser ubicado en bloque o línea con los valores block, inline de la propiedad {display}.

Ejemplo {content}

En el ejemplo siguiente ofrecemos todas las alternativas de valores para esta propiedad. El estilo interno es el siguiente:
...                
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
...              
<style type="text/css">              
	/*CADENAS*/
	div.cadenas h3:before {content: "Capítulo "; }
	/*EXTERNO*/
	div.externo h3:before {content: url(icon.ico); display: inline;}
	/*CONTADOR*/
	div.contador h3 {counter-increment: enumera-parrafos; }
	div.contador h3:before {content: counter(enumera-parrafos) ")  "; } 
	/*COMILLAS*/
	div.comillas {quotes: "\00AB" "\00BB" "\2039" "\203A"; }
	div.comillas em:before {content: open-quote; }
	div.comillas em:after {content: close-quote; }
	/*ATRIBUTO*/
	div.atributos p#parrafo-24:before {content: "[" attr(id) "]  "; }
	div.atributos img.img1:after {content: "\A " attr(title); white-space: pre; }
	div.atributos div.bloque-imagen:after {content: "\A " attr(title); 
		white-space: pre; border: 0;}
</style>
...
Resultado:
El resultado con detalles comentados de cada muestra se encuentra en Content.html .
Lugares donde se genera contenido y pueden encontrarse otros ejemplos directa o indirectamente relacionados con esta propiedad: {quotes}, <q>, {counter}, {list-style}, E:before{},E:after{}, contadores. Sobre codificaciones, referencias y otros detalles de caracteres consultar %Charset, referencia a caracteres y codificación de caracteres en CSS.

CURSOR {cursor : x}

CSS21
Para especificar especificar la forma del cursor. Los valores de x pueden ser
  • Un cursor de entre los disponibles
    • auto (VALOR INICIAL) determinado por el navegador.
    • crosshair, una cruz.
    • default, dependiente del sistema, normalmente como una flecha.
    • pointer, un puntero que indica un enlace.
    • move, para mover algo.
    • x-resize, donde x puede ser n,s,e,w,ne,nw,se,sw. Para movimiento de bordes en las ocho direcciones.
    • text, texto que puede seleccionarse.
    • wait, espera mediante un reloj de arena.
    • help, para ayudas con una interrogación.
    • progress, un indicador de progreso de un proceso.
  • Un cursor externo url(URL),. Este valor debe terminar en una o más comas, cuyo objeto es poder incluir una lista de cursores externos. El navegador deberá seguir la lista hasta que encuentre el primero que pueda manejar. Al final y según la especificacion, puede ponerse uno de la lista anterior.
  • inherit (SE HEREDA).
Se aplica a todos los elementos.

Ejemplo {cursor}: tipos de cursores

Ejemplos de los cursores disponibles.
<span style="cursor:crosshair;">[crosshair]</span>
<span style="cursor:default;">[default]</span>
<span style="cursor:pointer;">[pointer]</span>
<span style="cursor:move;">[move]</span>
<span style="cursor:n-resize;">[n-resize]</span>
<span style="cursor:s-resize;">[s-resize]</span>
<span style="cursor:e-resize;">[e-resize]</span>
<span style="cursor:w-resize;">[w-resize]</span>
<span style="cursor:ne-resize;">[ne-resize]</span>
<span style="cursor:se-resize;">[se-resize]</span>
<span style="cursor:nw-resize;">[nwresize]</span>
<span style="cursor:sw-resize;">[sw-resize]</span>
<span style="cursor:text;">[text]</span>
<span style="cursor:wait;">[wait]</span>
<span style="cursor:help;">[help]</span>
<span style="cursor:progress;">[progress]</span>
Resultado:
[crosshair] [default] [pointer] [move] [n-resize] [s-resize] [e-resize] [w-resize] [ne-resize] [se-resize] [nwresize] [sw-resize] [text] [wait] [help] [progress]

Ejemplo {cursor}: rutas para cursores

También se puede especificar una ruta para mostrar un cursor. En este caso hemos tomado un cursor disponible en Windows XP llamado "stopwtch.ani" que muestra un reloj que mueve las manecillas. A continuación (separado por coma) hemos incluido esta imagen imagen cursor. Por último hemos señalado un cursor help de entre los tipos anteriores. El resultado fue que Explorer si pudo manejar el cursor animado. Firefox y Safari no lo hicieron, pero si mostraron el siguiente cursor "gif". Por último, Opera no pudo mostrar estos, por lo que mostró el cursor help.
<span style="cursor:url(ejemplos/css-propiedades/stopwtch.ani), 
url(ejemplos/css-propiedades/img_1.gif), help;">[Cursor animado]</span>
Resultado:
[Cursor animado, gif o help]

DIRECCIONALIDAD DEL TEXTO {direction : x}

CSS21 HTML401
Especifica la direccionalidad del texto, no de los carácteres. Por ejemplo, en español el texto se lee desde la parte izquierda del papel hacia la derecha, mientras que en hebreo se hace en la forma contraria. Esta propiedad especifica desde que borde del papel comienza el texto. El valor de x puede ser uno de los siguientes:
  • ltr, de izquierda a derecha (VALOR INICIAL)
  • rtl, de derecha a izquierda
  • inherit (SE HEREDA)
Se aplica a todos los elementos. También sirve para especificar además la dirección de la composición de las columnas de una tabla, así como para la dirección del desbordamiento horizontal (ver {overflow}) y la posición de la última línea incompleta en el caso de justificación de texto (valor justify de la propiedad {text-align}).

Ejemplo {direction}

Aquí exponemos los 6 primeros carácteres en hebreo según los códigos de UNICODE, que van desde el 1488 al 1493. Se han escrito en orden izquierda-derecha, como en español:
<div style="font-size:2em;">
    &#1488; &#1489; &#1490; &#1491; &#1492; &#1493; 
</div>
por lo que esperaríamos que el navegador los presentara en ese orden:
א ב ג ד ה ו
pues no se ha especificado ningún atributo ni propiedad sobre alguna forma de direccionalidad del texto o de los carácteres. Sin embargo se presentan de forma predeterminada así:
א ב ג ד ה ו
con orden de aparición de los caracteres invertido, es decir del 1493 al 1488, pues el navegador reconoce el tipo de carácteres y los representa en la dirección adecuada. La especificación UNICODE asigna direccionalidad a los caracteres y define un algoritmo para determinar la direccionalidad correcta del texto, lo cual deberán aplicar los navegadores.

Puede ver más detalles sobre esto en HTML401, donde existe el atributo <E dir> cuyo efecto es el mismo que la propiedad {direction} que estamos tratando.

Sólo faltaría que los alinease a la derecha de la pantalla, lo que se consigue con el atributo {direction} con su valor rtl. Por defecto los elementos se inician con el valor ltr de izquierda a derecha. Si un texto se va a presentar en un idioma como el hebreo entonces se suele declarar la dirección rtl en el elemento <html> para que afecte también al elemento <title> o título de la página. En este ejemplo presentamos un texto en español con inserciones ocasionales en hebreo y al revés.

...
<div style="direction: ltr; font:2em 'Times New Roman'; border: solid 1px; ">
    Texto en español seguido de hebreo 
    <q>
    &#1488; &#1489; &#1490; &#1491; &#1492; &#1493;  
    </q> 
    y finalizado en español.
</div>     
...
<div style="direction: rtl; font:2em 'Times New Roman'; border: solid 1px; ">
    &#1488; &#1489; &#1490; 
    <q>cita en español</q> 
    &#1491; &#1492; &#1493; 
</div>
Resultado:
Este primer bloque división se configura ltr (izquierda-derecha) pues está previsto para albergar texto en español, aunque ocasionalmente puede contener citas en idioma hebreo. Veáse como se alinea a la izquierda aunque el texto en hebreo tiene los caracteres en el orden correcto (invertido respecto a como se almacenaron).
Texto en español seguido de hebreo א ב ג ד ה ו y finalizado en español.
Este segundo bloque división se configura rtl (derecha-izquierda) pues está previsto para albergar texto en hebreo, aunque ocasionalmente puede contener citas en idioma español. En este caso el texto en hebreo se alinea a la derecha, rodeando al texto en español que mantiene su orden correcto de caracteres.
א ב ג cita en español ד ה ו
Ver también {unicode-bidi} para desactivar el algoritmo automático de direccionalidad mixta. Ver <E dir> para aplicar direccionalidad a texto con elementos HTML. Los valores rtl, ltr afectan a la alineación del texto, tal como se muestra en {text-align}. Sobre codificaciones, referencias y otros detalles de caracteres consultar %Charset, referencia a caracteres y codificación de caracteres en CSS.

DIRECCIONALIDAD MIXTA DEL TEXTO {unicode-bidi}

CSS21 HTML401

La propiedad de la direccionalidad del texto de izquierda a derecha o de derecha a izquierda, en el sentido desde que borde del papel se comienza a leer, se especifica con la propiedad {direction}. Pero la direccionalidad de los caracteres se resuelve aplicando un algoritmo sobre los códigos UNICODE, pues estos nos dicen que dirección llevan. Como vimos en el ejemplo expuesto en {direction}, si se escribe en hebreo una serie de caracteres que se leen de derecha a izquierda estos serán almacenados en la dirección izquierda a derecha (es decir, como se almacenan los caracteres en español). Entonces sin especificar nada sobre la direccionalidad, el navegador invierte de forma automática el orden de los caracteres en la cadena para presentarlos correctamente en la dirección derecha a izquierda.

Sin embargo pueden existir casos como el expuesto en el ejemplo siguiente por los cuáles sea necesario actuar sobre la direccionalidad de los caracteres. Para esto se aplica {unicode-bidi}, que viene a significar bidireccionalidad o direccionalidad mixta del texto cuando se usa UNICODE.

En definitiva, esta propiedad viene a ser una forma de desactivar el algoritmo automático de bidireccionalidad que poseen los navegadores. De hecho existe también el elemento en XHTML <bdo> para el mismo efecto sin usar estilo.

El valor x puede ser uno entre los siguientes

  • normal (VALOR INICIAL)
  • embed
  • bidi-override
Se aplica a todos los elementos, aunque deben observarse los detalles de la especificación CSS.

Ejemplo {unicode-bidi}

En el siguiente ejemplo se muestra seis caracteres en hebreo. Luego se inserta en medio un elemento en línea <span> con números "123456". El código es el siguiente, mostrándose en el resultado los comentarios:
...
<div style="font: 2em 'Times New Roman'; border: solid 1px;">
    &#1488; &#1489; &#1490; &#1491; &#1492; &#1493;
</div>   
...
<div style="font: 2em 'Times New Roman'; border: solid 1px; ">
    &#1488; &#1489; &#1490; 
    <span>123456</span> 
    &#1491; &#1492; &#1493; 
</div>     
...
<div style="font: 2em 'Times New Roman'; border: solid 1px; ">
    &#1488; &#1489; &#1490; 
    <span style="direction: rtl; unicode-bidi: embed; ">
        123456 
    </span> 
    &#1491; &#1492; &#1493; 
</div>     
...
<div style="font: 2em 'Times New Roman'; border: solid 1px; ">
    &#1488; &#1489; &#1490; 
    <span style="direction: rtl; unicode-bidi: bidi-override; ">
        123456 
    </span> 
    &#1491; &#1492; &#1493; 
</div>
Resultado:
En este ejemplo tenemos una división con una cadena de caracteres en el idioma hebreo
א ב ג ד ה ו
que se presenta de forma correcta de forma automática por el navegador, es decir, invertiendo el orden de sus caracteres. Si ahora queremos incluir un span con un número como "123456" en su interior como
א ב ג 123456 ד ה ו
sucede que los números no se invierten. Aquí está implicito los valores ltr y normal para la direccionalidad y la mixta. Pero si queremos corregir la dirección de los números hemos de anular la aplicación del algoritmo automático con un valor distinto de normal en {unicode-bidi}. Por ejemplo, con rtl, embed para los números se consigue el mismo efecto que aplicando el algoritmo automático:
א ב ג 123456 ד ה ו
Pero con rtl, bidi-override lo que hace es invertirlos:
א ב ג 123456 ד ה ו

En Firefox, Opera y Safari hemos visto un funcionamiento correcto de {unicode-bidi} según lo hemos explicado, pero no así en Explorer que, aunque invierte los números, los desplaza al inicio de la frase sin motivo aparente.

Ver también <bdo> para anular el algoritmo automático de direccionalidad mixta (o bidireccionalidad) del texto con elementos HTML. Sobre codificaciones, referencias y otros detalles de caracteres consultar %Charset, referencia a caracteres y codificación de caracteres en CSS.

ESPACIADO ENTRE LETRAS {letter-spacing : x}

CSS21
Para especificar el espacio entre letras, donde x puede ser:
  • normal según la fuente actual (VALOR INICIAL)
  • Una medida, donde los valores también pueden ser negativos.
  • inherit (SE HEREDA)
Se aplica a todos los elementos.

Ejemplo {letter-spacing}

En el ejemplo siguiente exponemos un párrafo sin especificar ningún espaciado (se predetermina el valor normal), otro con espaciado absoluto de 10 píxeles, el siguiente con espaciado de 1em equivalente a una altura del tipo de letra y, finalmente un párrafo con espaciado negativo de -1px, donde se suprime el espacio y podrían llegar a superponerse las letras.
<p>NORMAL</p>
<p style="letter-spacing:10px;">ABSOLUTO 10px</p>
<p style="letter-spacing:1em;">RELATIVO 1em</p>
<p style="letter-spacing:-2px";>NEGATIVO -2px</p>
Resultado:

NORMAL

ABSOLUTO 10px

RELATIVO 1em

NEGATIVO -2px

Ver también espaciado entre palabras en {word-spacing}

ESPACIADO ENTRE PALABRAS {word-spacing : x}

CSS21
Para especificar el espacio entre palabras, donde x puede ser:
  • normal según la fuente actual (VALOR INICIAL)
  • Una medida, donde los valores también pueden ser negativos.
  • inherit (SE HEREDA)
Se aplica a todos los elementos.

Ejemplo {word-spacing}

En el ejemplo siguiente exponemos un párrafo sin especificar ningún espaciado (se predetermina el valor normal), otro con espaciado absoluto de 20 píxeles, el siguiente con espaciado de 1em equivalente a una altura del tipo de letra y, finalmente un párrafo con espaciado negativo de -5px, donde se suprime el espacio y podrían llegar a superponerse las palabras.
<p>
    Párrafo sin especificar espaciado entre palabras 
    (valor predeterminado <em>normal</em>)
</p>
<p style="word-spacing:20px;">
    Párrafo con espaciado de 20px entre palabras
</p>
<p style="word-spacing:1em;">
    Párrafo con espaciado 1em (1 altura de letra) entre palabras
</p>
<p style="word-spacing:-5px";>
    Párrafo con espaciado -5px entre palabras
</p>
Resultado:

Párrafo sin especificar espaciado entre palabras (valor predeterminado normal)

Párrafo con espaciado de 20px entre palabras

Párrafo con espaciado 1em (1 altura de letra) entre palabras

Párrafo con espaciado -5px entre palabras

Ver también espaciado entre letras en {letter-spacing}

ESPACIOS {white-space : x}

CSS21
Para especificar cómo deben tratarse los espacios en blanco. Los valores de x son:
  • normal (VALOR INICIAL), se ignoran convirtiéndos en un único espacio cualquier secuencia de espacios, retornos de carro y tabuladores.
  • pre, opuesto al anterior, considerándose todos los espacios tal y como fueron confeccionados en el código.
  • nowrap, comportándose como normal, pero si el ancho de la ventana es menor que el del texto entonces NO produce un salto de línea
  • pre-wrap, considera todos los espacios en contenido generado, incluso los retornos de carro "\A" incluidos en las las cadenas de la propiedad {content}
  • pre-line, ignorándose espacios en contenido generado.
  • inherit (SE HEREDA)
Se aplica a todos los elementos. Se consideran espacios en blanco en este contexto y presentando el código Unicode en paréntesis los siguientes:
  • Espacio simple (32)
  • Tabulador (9)
  • Salto de línea (10)
  • Retorno de carro (13)
  • Avance de hoja (12)
Nosotros denominamos "retorno de carro" a la combinación de los códigos 10 y 13. Otros tipos de espacios incluidos en Unicode como espacio eme (8195) o espacio ideográfico (12288) no se consideran como espacios en blanco al objeto del manejo de esta propiedad.

Ejemplo {white-space}, valores normal, pre, nowrap

En este ejemplo probamos los valores normal, pre, nowrap para una misma secuencia de texto con varios espacios, tabuladores y retornos de carro. En el resultado se comentan los detalles.
<p style="white-space:normal; color: red; ">Retorno de carro [
], varios tabuladores [			], o espacios seguidos [        ].</p>
<p style="white-space:pre; color: red;">Retorno de carro [
], varios tabuladores [			], o espacios seguidos [        ].</p>
<p style="white-space:nowrap; color: red;">Retorno de carro [
], varios tabuladores [			], o espacios seguidos [        ].</p>
Resultado:
Con normal no se preservan los espacios originales. Además si el ancho de la ventana es menor que el del texto, se produce un salto de línea.

Retorno de carro [ ], varios tabuladores [ ], o espacios seguidos [ ].

Con pre se preservan todos los espacios originales:

Retorno de carro [ ], varios tabuladores [ ], o espacios seguidos [ ].

Con nowrap NO se preservan los espacios comportándose como normal, pero si el ancho de la ventana es menor que el del texto entonces NO produce un salto de línea como si lo hacía el valor normal.

Retorno de carro [ ], varios tabuladores [ ], o espacios seguidos [ ].

Ejemplo {white-space}, valores pre-wrap y pre-line

En este ejemplo probamos los valores pre-wrap y pre-line para contenidos generados con E:before{},E:after{}.
Resultado:
Ver resultado en white-space.html
Ver también el elemento preformateado <pre>, retornos de carro <br>

ESTILO DE LISTA {list-style-s : x}

CSS21
General {list-style} Tipo {list-style-type} Imagen {list-style-image} Posición {list-style-position}
Se puede especificar el estilo de una lista sin usar los atributos XHTML transicionales de los elementos ol, ul, dl, configurando con estilos el tipo de viñeta o bien usar una imagen personalizada. También se puede establecer su posición mediante los valores de type, image, position o bien sin especificar nada tal que configuramos todo el estilo de una vez.

Estilo general de lista {list-style : x}

CSS21 Para establecer de forma general los valores de tipo, imagen y posición, donde x es uno entre los valores siguientes:Los valores iniciales se indican en las respectivas propiedades. Se aplica a elementos de lista y resto de elemento dotados de la propiedad {display} con valor list-item.

Ejemplo {list-style}

En este ejemplo configuramos de una vez el estilo de una lista no ordenada. La imagen sustituye al tipo de viñeta cuadrada, pero también la declaramos por si la imagen no puede cargarse. El navegador reserva espacio para una imagen de 15x15 píxeles, aunque la usada tiene 16x16.
<ul style="list-style:square url(ejemplos/lista/img_1.jpg) outside;">
<li>Primera entrada</li>
<li>Segunda entrada</li>
</ul>
Resultado:
  • Primera entrada
  • Segunda entrada

Tipo de viñeta {list-style-type : x}

CSS21 Para especificar el tipo de lista a utilizar, siendo x uno valor entre los siguientes:
  • Una viñeta entre las siguientes:
    • disc (VALOR INICIAL) un círculo relleno
    • circle un círculo
    • square un cuadrado
  • Un número entre los siguientes
    • decimal, lista numerada (1, 2, 3, ...) siempre empezando en 1
    • decimal-leading-zero, rellenado con ceros (01, 02, 03,..., 98, 99)
    • lower-roman, en números romanos, minúsculas (i, ii, iii, iv, ...)
    • upper-roman, en números romanos, mayúsculas (I, II, III, IV,...)
    • georgian, numeración Georgiana (an, ban, gan, ...)
    • armenian, numeración Armenia
  • Una lista alfabética entre las siguientes:
    • lower-latin y lower-alpha, minúsculas (a, b, c, ..., z)
    • upper-latin y upper-alpha, mayúsculas (A, B, C, ..., Z)
    • lower-greek, griegas (α, β, γ, ...)
  • none ningún tipo de lista. Si se usa una imagen y no puede ser mostrada, entonces se cambia el tipo a este valor.
  • inherit (SE HEREDA)
Se aplica a elementos de lista y resto de elemento dotados de la propiedad {display} con valor list-item.

Ejemplo {list-style-type}

En el siguiente ejemplo aplicamos algunos valores de tipos de viñetas a las entradas <li> de una lista ordenada.
<ol>
<li style="list-style-type:disc; ">Tipo <em>disc</em>: boliche</li>
<li style="list-style-type:circle; ">Tipo <em>circle</em>: círculo</li>
<li style="list-style-type:square; ">Tipo <em>square</em>: cuadrado</li>
<li style="list-style-type:decimal; ">Tipo <em>decimal</em>: 
entrada número 4</li>
<li style="list-style-type:lower-roman; ">Tipo <em>lower-roman</em>: 
entrada número 5 romano</li>
<li style="list-style-type:lower-alpha; ">Tipo <em>lower-alpha</em>: 
sexta letra del alfabeto, minúscula</li>
<li style="list-style-type:upper-alpha; ">Tipo <em>upper-alpha</em>: 
séptima letra del alfabeto, mayúscula</li>
<li style="list-style-type:lower-greek; ">Tipo <em>lower-greek</em>: 
octava letra del alfabeto griego</li>
</ol>
Resultado:
  1. Tipo disc: boliche
  2. Tipo circle: círculo
  3. Tipo square: cuadrado
  4. Tipo decimal: entrada número 4
  5. Tipo lower-roman: entrada número 5 romano
  6. Tipo lower-alpha: sexta letra del alfabeto, minúscula
  7. Tipo upper-alpha: séptima letra del alfabeto, mayúscula
  8. Tipo lower-greek: octava letra del alfabeto griego

Ejemplo {list-style-type}: Lista anidada

La mejor forma de configurar listas anidadas con múltiples niveles es usado estilo externo o interno como el que se muestra en el código a continuación. Se observa que definimos el estilo para una lista anidada de cuatro niveles. Como las fuentes se heredan de un nivel a otro, hay que reconfigurarla en cada nivel.
<style>
ol li {list-style-type:upper-roman; font-weight:bold; }
ol ol li {list-style-type:upper-alpha; font-weight:normal; font-style:italic; }
ol ol ol li {list-style-type:decimal; font-weight:normal; font-style:normal; }
ol ol ol ol li {list-style-type:lower-alpha; font-size:75%; }
</style>
Resultado:
Puede ver el resultado en Lista-anidada.html .

Ejemplo {list-style-type}: Menú desplegable con listas

Un uso de las listas es para crear menús que se despliegan cuando se pasa el cursor, por lo que hay que realizarlo conjuntamente con los selectores de pseudoclases por vinculo E:link{},E:visited{} y dinámicas E:hover{},E:active{},E:focus{}. El código de la página y del estilo se encuentra comentado en las páginas de resultado.
Resultado:
Ver resultado de un menú desplegable superior en Menú superior y otro ejemplo de menú desplegable lateral en Menú lateral.
Ver también el atributo XHTML transicional para aplicar tipo de viñeta a listas ordenadas <ol type> o a listas no ordenadas <ul type>. Otros ejemplos de menús para realizar el "layout" o enmaquetado de páginas pueden verse en el uso de la propiedad {position} para crear marcos de página, con el siguiente resultado. También puede verse en el ejemplo sobre el uso del evento onload para crear un menú lateral con scripts, con el siguiente resultado.

Imagen de viñeta {list-style-image : x}

CSS21 Para establecer una imagen como tipo de viñeta. El valor de x puede ser uno de los siguientes:
  • Un valor de url(URL)
  • none (VALOR INICIAL)
  • inherit (SE HEREDA)
Se aplica a elementos de lista y resto de elemento dotados de la propiedad {display} con valor list-item. La imagen anula a cualquier declaración de {list-style-type}.

Ejemplo {list-style-image}

En el siguiente ejemplo aplicamos una imagen personalizada a todas las viñetas de una lista.
<ol style="list-style-image:url(ejemplos/lista/img_2.gif); ">
<li>Entrada primera</li>
<li>Entrada segunda</li>
</ol>
Resultado:
  1. Entrada primera
  2. Entrada segunda

Posición de la viñeta {list-style-position : x}

CSS21 Para establecer la posición de viñeta. El valor de x puede ser uno de los siguientes:
  • inside, la viñeta está dentro de la caja de entrada de lista.
  • outside (VALOR INICIAL), la viñeta está por fuera en este caso.
  • inherit (SE HEREDA)
Se aplica a elementos de lista y resto de elemento dotados de la propiedad {display} con valor list-item.

Ejemplo {list-style-position}

En el siguiente ejemplo aplicamos los valores inside, outside.
<div style="border: green solid 1px; ">
    <ol>
        <li style="list-style-position:outside; border: blue solid 1px; ">
            Entrada primera con posición <em>outside</em>, observándose que la viñeta 
            está por fuera de la caja que ocupa el elemento de lista.
        </li>
        <li style="list-style-position:inside; border: blue solid 1px; ">
            Entrada segunda con posición <em>inside</em>, observándose que la viñeta 
            está por dentro de la caja que ocupa el elemento de lista.
        </li>
    </ol>
</div>
Resultado:
  1. Entrada primera con posición outside, observándose que la viñeta está por fuera de la caja que ocupa el elemento de lista.
  2. Entrada segunda con posición inside, observándose que la viñeta está por dentro de la caja que ocupa el elemento de lista.

FONDO {background-s : x}

CSS21
General {background} Desplazamiento {background-attachment} Color {background-color} Imagen {background-image} Mosaico {background-repeat} Posición {background-position}
Esta propiedad nos pemite establecer el fondo de cualquier elemento. El fondo es el área del contenido más el relleno definido con {padding}. Ver dimensionado) para más detalles. El área de los márgenes definido con {margin} es siempre transparente y no se le puede dotar de color. Las propiedades del fondo no se heredan, pero el fondo de una caja puede verse a través de un color con valor transparent en una caja hija.

Fondo general {background : x}

CSS21 Para cambiar el fondo de una sóla vez siendo x un valor entre los siguientes:
  • De 1 a 5 valores separados por espacios para definir el color, imagen, mosáico, desplazamiento y posición:El valor inicial se indica en cada una de las propiedades.
  • inherit (NO SE HEREDA)
Se aplica a todos los elementos.

Ejemplo {background}

En el ejemplo siguiente hemos incorporado esta pequeña imagen img_1.gif de fondo al elemento bloque en línea, dotándole de color verde claro que aparece en el fondo. Si la imagen ocupa todo el espacio entonces aparecerá en los lugares donde la imagen es transparente como en este caso, o bien cuando la imagen no pueda mostrarse por algún motivo. En cuanto al mosaico se le ha puesto que repita la imagen como un mosaico. Se ha triplicado el tamaño y color de la fuente (con el color de primer plano) para ver correctamente este ejemplo.
<span style="background:lime url(ejemplos/css-propiedades/img_1.gif) repeat; 
font-size:3em; color:blue;">FONDO CON IMAGEN</span>
Resultado:
FONDO CON IMAGEN

Desplazamiento del fondo {background-attachment : x}

CSS21 Para especificar si el fondo tiene que desplazarse, donde x puede tomar uno de los valores:
  • scroll (VALOR INICIAL), desplázandose la imagen con el documento.
  • fixed, la imagen se queda fija.
  • inherit (NO SE HEREDA)
Se aplica a todos los elementos.

Ejemplo {background-attachment}

En el siguiente ejemplo se inserta una imagen de fondo (repetida verticalmente) en dos párrafos dotados de borde para saber cuáles son sus límites. En ambos se establece esta propiedad a fixed y scroll respectivamente. Con el primer valor vemos que a medida que desplazamos la página tanto horizontal como verticalmente también se desplaza la imagen, es decir, la imagen está fija en el fondo y lo que se desplaza es la página. Con el segundo valor se desplaza la imagen al mismo tiempo que la página.
<p style="background-attachment:fixed; 
background-image: url(ejemplos/css-propiedades/img_3.jpg); 
background-repeat:repeat-y; 
line-height:10; border:green solid thin; color:yellow  ">
    background-attachment con valor fixed
</p> 
<p style="background-attachment:scroll; 
background-image: url(ejemplos/css-propiedades/img_3.jpg); 
background-repeat:repeat-y; 
line-height:10; border:green solid thin; color:yellow  ">
    background-attachment con valor scroll
</p>
Resultado:

FIXED

SCROLL

Color del fondo {background-color : x}

CSS21 Aplicar color al fondo, donde x puede ser un valor de los siguientes:
  • Un color
  • transparent (VALOR INICIAL)
  • inherit (NO SE HEREDA)
Se aplica a todos los elementos.

Ejemplo {background-color}

Ejemplo del uso de esta propiedad.
<p style="background-color:aqua; color:navy;">
Párrafo con fondo de color azul claro, donde insertamos un 
bloque en línea de color 
<span style="background-color:yellow;">[amarillo]</span> 
y luego otro bloque en línea de color 
<span style = "background-color: transparent;">[transparente]</span> 
observándose que este último transparenta el color del elemento padre.
</p>
Resultado:

Párrafo con fondo de color azul claro, donde insertamos un bloque en línea de color [amarillo] y luego otro bloque en línea de color [transparente] observándose que este último transparenta el color del elemento padre.

Imagen del fondo {background-image : x}

CSS21 Aplica una imagen al fondo, con x un valor de los siguientes:
  • Un valor de url(URL)
  • none (VALOR INICIAL)
  • inherit (NO SE HEREDA)
Se aplica a todos los elementos. Si se incluye un color de fondo, la imagen se dibuja encima y si ésta contiene partes transparentes se verá el color de fondo y también cuando la imagen no pueda mostrarse.

Ejemplo {background-image}

Ejemplo de una imagen insertada como fondo en un bloque en línea.
<span style="background-image: url(ejemplos/css-propiedades/img_4.jpg); 
background-repeat: no-repeat; background-position: center bottom; font-size:3.5em; 
color: navy;">bloque en línea</span>
Resultado:
bloque en línea

Mosaico {background-repeat : x}

CSS21 Para repetir la imagen formando un mosaico en todo el área del fondo (contenido y relleno). El valor de x pueden ser uno de los siguientes:
  • repeat (VALOR INICIAL), se repite en todo el área
  • repeat-x se repite sólo en dirección horizontal
  • repeat-y se repite sólo en dirección vertical
  • no-repeat no se repite
  • inherit (NO SE HEREDA)
Se aplica a todos los elementos.

Ejemplo {background-repeat}

En el ejemplo siguiente creamos cuatro bloques en línea dotándoles de una imagen que repetimos en mosaico vertical y horizontalmente, sólo horizontalmente, sólo verticalmente y, por último, sin repetir.
<p style="font-size:2em;">		
    <span style="background-image: url(ejemplos/css-propiedades/img_2.jpg); 
    background-repeat: repeat; 
    color:navy; border:solid thin;">repeat</span>
    <span style="background-image: url(ejemplos/css-propiedades/img_2.jpg); 
    background-repeat: repeat-x; 
    color:navy; border:solid thin;">repeat-x</span>
    <span style="background-image: url(ejemplos/css-propiedades/img_2.jpg); 
    background-repeat: repeat-y; 
    color:navy; border:solid thin;">repeat-y</span>
    <span style="background-image: url(ejemplos/css-propiedades/img_2.jpg); 
    background-repeat: no-repeat; 
    color:navy; border:solid thin;">no-repeat</span>
</p>
Resultado:

repeat repeat-x repeat-y no-repeat

Ejemplo {background-repeat}: Fondo mosáico

En el siguiente ejemplo mostramos como usando la imagen img_1.gif de tan sólo 1 KB y poniéndola en forma de mosaico (de forma predeterminada) en el elemento <body>, podemos dotar a nuestra página de un fondo decorativo.
...
<body style="background-image: url(img_1.gif);">
<p style="font: 3em Palatino; color:blue;">En esta página se ha aplicado 
al cuerpo &lt;body&gt; la imagen de fondo de 32x32 píxeles 
<a href="img_1.gif"><img src="img_1.gif" alt="img_1.gif" /></a> 
que se repite en mosaico. Esta imagen de sólo 1 KB nos permite ponerle un fondo 
decorativo a nuestras páginas.</p>
</body>
...
Resultado:
Ver el resultado en Fondo-mosaico.html

Posición del fondo {background-position : x}

CSS21 Nos permite posicionar la imagen de fondo tomando como referencia el vértice superior izquierdo. El valor de x puede ser uno entre los siguientes:
  • 1 valor obligatorio seguido de otro opcional, separados por espacio, que posicionan en un lugar específico horizontal y vertical, valores que pueden ser
    • Un valor HORIZONTAL obligatorio entre los siguientes
      • Una medida de longitud o porcentaje.
      • left
      • center
      • right
    • Un valor VERTICAL opcional entre los siguientes
      • Una medida de longitud o porcentaje.
      • top
      • center
      • bottom
  • inherit (NO SE HEREDA)
El VALOR INICIAL es 0% 0%. Se aplica a todos los elementos. Los porcentajes se refieren al propio contenedor. Cuando se da un único valor este se aplica a la posición horizontal estableciéndose la posición vertical al 50%.

Ejemplo {background-position}

En el ejemplo siguiente mostramos varios posicionamientos.
<span style="background-image: url(ejemplos/css-propiedades/img_2.jpg); 
background-repeat: no-repeat; background-position: 5px 25px; 
border:solid thin; ">5px 25px</span>

<span style="background-image: url(ejemplos/css-propiedades/img_2.jpg); 
background-repeat: no-repeat; background-position: 20% 50%; 
border:solid thin; ">20% 50%</span>

<span style="background-image: url(ejemplos/css-propiedades/img_2.jpg); 
background-repeat: no-repeat; background-position: right 20%; 
border:solid thin;">right 20%</span>  

<span style="background-image: url(ejemplos/css-propiedades/img_2.jpg); 
background-repeat: no-repeat; background-position: center center; 
border:solid thin; ">center center</span>

<span style="background-image: url(ejemplos/css-propiedades/img_2.jpg); 
background-repeat: no-repeat; background-position: right bottom; 
border:solid thin;  ">right bottom</span>

<span style="background-image: url(ejemplos/css-propiedades/img_2.jpg); 
background-repeat: no-repeat; background-position: 100%; 
border:solid thin; ">100%</span>
Resultado:

5px 25px 20% 50% right 20%

center center right bottom 100%

FUENTES {font-s : x}

CSS21
General {font} Familia {font-family} Tamaño {font-size} Itálica {font-style} Negrita {font-weight} Versales {font-variant}
Con esta propiedad configuramos el estilo de las fuentes, donde -s representa una subpropiedad font, font-family, font-size, font-style, font-variant, font-weight para configuar el tipo de letra, el tamaño, itálica, versales y negrita respectivamente. La x es el valor que se le dará. Si se omite el valor -s tenemos la opción de configurar de una sóla vez todos los atributos de una fuente.

Fuente general {font : x}

CSS21 Para especificar de forma general todos los detalles de una fuente. Debe contener de forma obligatoria la familia y el tamaño. El valor x puede ser por tanto uno entre los siguientes:
  • Configuración con propiedades específicas. Se compone de dos valores obligatorios, tamaño y familia más uno, dos o tres valores opcionales para itálica, negrita y versales:
    • Un valor OBLIGATORIO de tamaño de la fuente especificado en {font-size}. Opcionalmente puede seguir al tamaño una barra invertida "\" y un valor de altura de linea de texto según se especifica en {line-height}.
    • Un valor OBLIGATORIO de familia de la fuente tal como se especifica en {font-family}.
    • Hasta 3 valores opcionales, donde cada uno de ellos corresponderá a:
  • Aplicando las fuentes del sistema con un valor a elegir entre los siguientes:
    • caption, fuente de los títulos
    • icon, fuentes para rotular iconos
    • menu, fuentes de menús
    • message-box, fuentes de cuadros de mensaje
    • small-caption, fuentes de controles pequeños
    • status-bar, fuentes de la barra de estado de las ventanas
  • inherit (SE HEREDA)
Se aplica a todos los elementos. Los VALORES INICIALES se especifican en las propiedades.

Ejemplo {font}

Ejemplo de configuración de fuente de una sóla vez:
Ejemplo de fuente itálica, negrita, versales, tamaño 20, Arial Narrow: 
<span style="font: italic bold small-caps 20px 'Arial Narrow';"
>Ejemplo</span>
Resultado:
Ejemplo de fuente itálica, negrita, versales, tamaño 20, Arial Narrow: Ejemplo

Ejemplo {font}: fuentes por defecto

Ejemplo de fuente Prestige o en su defecto de la familia genérica monospace, de tamaño 20px donde además modificamos la altura de la línea de texto.
<p style="font: 20px 'Prestige', monospace ; border: blue solid 1px; ">
Ejemplo de una párrafo de texto <br />
con fuente de 20 px, <br />
sin declarar altura de línea.
</p>               
<p style="font: 20px/0.8em 'Prestige', monospace ; border: blue solid 1px; ">
En este párrafo en cambio declaramos <br />
una altura de línea a 1em <br />
usando el mismo tamaño de fuente.
</p>
Resultado:

Ejemplo de una párrafo de texto
con fuente de 20 px,
sin declarar altura de línea.

En este párrafo en cambio declaramos
una altura de línea a 1em
usando el mismo tamaño de fuente.

Ejemplo {font}: fuentes del sistema

Ejemplo donde exponemos las fuentes del sistema.
<span style="font: caption; ">[Caption]</span>
<span style="font: icon; ">[Icon]</span>    
<span style="font: menu; ">[Menu]</span>
<span style="font: message-box; ">[Message-box]</span>
<span style="font: small-caption; ">[Small-caption]</span>    
<span style="font: status-bar; ">[Status-bar]</span>
Resultado:
[Caption] [Icon] [Menu] [Message-box] [Small-caption] [Status-bar]

Familia de fuente {font-family : x}

CSS21 Para especificar el tipo de fuente de letra. El valor x será uno de entre los siguientes:
  • Una o más familias de fuentes separadas por comas, especificando en cada familia uno de estos dos valores:
    • El nombre de la familia. Si este nombre contiene espacios en blanco entonces debe entrocomillarse. Por ejemplo 'Arial Narrow' o "Arial Narrow".
    • La familia genérica. Estas son un agrupamiento de familias similares que ayudan a seleccionar una fuente próxima cuando otra pueda no existir. Las familias genéricas disponibles son:
      • serif. Fuentes de espaciado proporcional con remates, formas acampanadas, trazos finales u otros ornamentos. Algunas de ellas dentro de las fuentes latinas son: Times New Roman, Bodoni, Garamond, Minion Web, ITC Stone Serif, MS Georgia, Bistream Cyberbit.
      • sans-serif. Fuentes de espaciado proporcional, pero que no tiene los ornamentos de la serif. En las fuentes latinas encontramos MS Trebuchet, ITC Avant Garde Gothic, MS Arial, MS Verdana, Univers, Futura, ITC Stone Sans, Gill Sans, Akzidenz Grotesk, Helvetica.
      • cursive. Con características cursivas marcadas, signos parcial o completamente conectados que se asemeja a una escritura manual. En las fuentes latinas encontramos Caflish Script, Adobe Poetica, Savito, Ex Ponto, Snell Roundhand, Zapf-Chancery.
      • fantasy. Fuentes de tipo decorativa. Ejempos como Alpha Geometrique, Critter, Cottonwood, FB Reactor, Studz.
      • monospace. Todos los signos ocupan un espacio horizontal igual, similar al de una máquina de escribir manual. En las fuentes latinas tenemos ejemplos de Courier, MS Courier New, Prestige, Everson Mono.
  • inherit (SE HEREDA)
Se aplica a todos los elementos. El valor inicial dependen de la configuración de cada navegador.

Ejemplo {font-family}

En el ejemplo siguiente usamos la fuente "Arial Narrow", observándose que es conveniente encerrar entre comillas simples cuando el nombre de la fuente se compone con varias palabras (en general puede usarse siempre las comillas simples para esto).
Ejemplo de fuente <span style="font-family:'Arial Narrow';>
Arial Narrow</span>
Resultado:
Ejemplo de fuente Arial Narrow

Ejemplo {font-family}: fuente predeterminada

En el ejemplo siguiente usamos una fuente ficticia para observar como actúa el navegador cuando no la encuentra, mostrándose en la fuente declarada en el elemento ascendente más cercano. Si no se hubiera declarado en ninguno se usará la fuente predeterminada del navegador (normalmente Times New Roman).
Ejemplo de fuente ficticia <span style="font-family:'zz99zz';">
Fuente zz99zz</span>, que no muestra ninguna diferencia con respecto a la del 
elemento donde está incluida.
Resultado:
Ejemplo de fuente ficticia Fuente zz99zz, que no muestra ninguna diferencia con respecto a la del elemento donde está incluida.

Ejemplo {font-family}: fuentes alternativas

Pero también podemos declarar fuentes alternativas por si el navegador no encuentra la especificada. Para ello formamos una lista de fuentes separadas por comas.
Ejemplo de fuente ficticia <span style="font-family:'zz99zz','Arial Black', 
sans-serif;">
Fuente zz99zz</span> con alternativa Arial Black...
Resultado:
Ejemplo de fuente ficticia Fuente zz99zz con alternativa Arial Black. Aún así incluimos la familia genérica sans-serif por si hubiera problemas al mostrar las anteriores.

Ejemplo {font-family}: familias genéricas

En este ejemplo exponemos una muestra de cada familia genérica. Si el navegador no puede mostrar la fuente si mostrará al menos una familia de la genérica. Por ello podrán observarse diferencias entre varios navegadores con algunas fuentes.
<span style="font-family:'Times New Roman', serif; ">serif 'Times New Roman'</span>,
<span style="font-family:'MS Trebuchet', sans-serif; ">sans-serif 'MS Trebuchet'</span>,
<span style="font-family:'Caflish Script', cursive; ">cursive 'Caflish Script'</span>,
<span style="font-family:'Alpha Geometrique', fantasy; ">
    fantasy 'Alpha Geometrique'</span>,   
<span style="font-family:'Courier', monospace; ">monospace 'Courier'<span>.
Resultado:
serif 'Times New Roman', sans-serif 'MS Trebuchet', cursive 'Caflish Script', fantasy 'Alpha Geometrique', monospace 'Courier'.

Tamaño de fuente {font-size : x}

CSS21 Para especificar el tamaño de la fuente. El valor de x puede ser uno de los siguientes:
  • Un tamaño absoluto a elegir de entre los siguientes
    • xx-small
    • x-small
    • small
    • medium (VALOR INICIAL)
    • large
    • x-large
    • xx-large
  • Un tamaño relativo a elegir de entre los siguientes
    • larger, aumenta el tamaño
    • smaller, reduce el tamaño
  • Una medida. Los porcentajes se refieren al tamaño de la fuente del elemento padre.
  • inherit (SE HEREDA)
Se aplica a todos los elementos

Ejemplo {font-size}

En el ejemplo siguiente se indica el tamaño de forma absoluta en px (píxeles). No se ha de separar el número del sufijo px.
Ejemplo de fuente <span style="font-size:24px;">Tamaño 24 píxeles</span>
Resultado:
Ejemplo de fuente Tamaño 24 píxeles

Ejemplo {font-size}: tamaños relativos

En el ejemplo siguiente se indica el tamaño de forma relativa al elemento padre. Con 2em declaramos que la fuente debe ser el doble que la del elemento padre.
Ejemplo de fuente <span style="font-size:2em;">Tamaño 2em</span> 
del elemento padre
Resultado:
Ejemplo de fuente Tamaño 2em del elemento padre

Ejemplo {font-size}: tamaños relativos en porcentajes

En el ejemplo siguiente se indica el tamaño de forma relativa al elemento padre pero declarándolo en forma de porcentaje
Ejemplo de fuente <span style="font-size:200%;">Tamaño 200%</span> 
del elemento padre
Resultado:
Ejemplo de fuente Tamaño 200% del elemento padre

Ejemplo {font-size}: tamaños relativos con palabras clave

En el ejemplo siguiente se indica el tamaño de forma relativa usando palabras clave:
Ejemplo de fuente de tamaños <span style="font-size:larger;">[larger]</span> 
o <span style="font-size:smaller;">[smaller]</span> que con respecto al 
elemento padre
Resultado:
Ejemplo de fuente de tamaños [larger] o [smaller] que con respecto al elemento padre

Ejemplo {font-size}: tamaños absolutos con palabras clave

En el ejemplo siguiente usamos unas palabras clave para declarar el tamaño absoluto.
Ejemplo de tamaños usando palabras clave: 
<span style="font-size:xx-small;">[xx-small]</span>
<span style="font-size:x-small;">[x-small]</span>
<span style="font-size:small;">[small]</span>
<span style="font-size:medium;">[medium]</span>
<span style="font-size:large;">[large]</span>
<span style="font-size:x-large;">[x-large]</span>
<span style="font-size:xx-large;">[xx-large]</span>
Resultado:
Ejemplo de tamaños usando palabras clave: [xx-small] [x-small] [small] [medium] [large] [x-large] [xx-large]
Otra forma de establecer el tamaño de la letra es declarando la altura de la línea con {line-height}. También puede actuar sobre el tamaño con <big>, <small>.

Fuente itálica {font-style : x}

CSS21 Especifica si la fuente es de tipo itálica (redondeada), donde x puede ser uno de los siguientes valores:
  • normal sin efecto de itálica (VALOR INICIAL).
  • italic o cursiva, si no estuviera disponible se muestra la oblicua.
  • oblique que se genera inclinando una letra normal. Si no estuviera disponible se muestra la itálica.
  • inherit (SE HEREDA)
Se aplica a todos los elementos.

Ejemplo {font-style}

Ejemplo de fuente que no dispone de cursiva diferenciada, limitándose simplemente a inclinar la fuente normal, por lo que la oblicua y la cursiva son iguales a la oblicua:
<p style="font-family:'Courier New';">Courier New
<span style="font-style:oblique;">[en oblicua]</span>
<span style="font-style:italic;">[en cursiva]</span>
<span style="font-style:normal;">[o normal]</span>
</p>
Resultado:

Courier New [en oblicua] [en cursiva] [o normal]

Ejemplo {font-style}: cursivas y oblicuas

Sin embargo otras fuentes como por ejemplo Times New Roman, que presenta algunas letras en itálica como a f l u v distintas con respecto a las normales a f l u v, en cuyo caso y aunque oblicua y cursiva son iguales, se usa la cursiva:
<p style="font-family:'Times New Roman';">Times New Roman
<span style="font-style:oblique;">[en oblicua afluv]</span>
<span style="font-style:italic;">[en cursiva afluv]</span>
<span style="font-style:normal;">[o normal afluv]</span>
</p>
Resultado:

Times New Roman [en oblicua afluv] [en cursiva afluv] [o normal afluv]

También puede actuar en formatos itálica con <i>, <em>.

Fuente negrita {font-weight : x}

CSS21 Para especificar el peso de la fuente, conocido como fuente en negrita, donde x es un valor entre los siguientes:
  • normal, sin efecto negrita (VALOR INICIAL). Peso 400 en la escala.
  • bold, peso 700.
  • bolder, peso mayor que el heredado. Si sobrepasa el límite de la escala se le asigna 900.
  • lighter, peso menor que el heredado. Se limita inferiormente en 100.
  • Cualquiera de los números en la siguiente escala: 100, 200, 300, 400, 500, 600, 700, 800, 900. Esta serie es cerrada, es decir, sólo se puede elegir una de estas nueve cifras que expresan el peso de la fuente.
  • inherit (SE HEREDA)
Se aplica a todos los elementos.

Ejemplo {font-weight}

Ejemplo de fuentes en negrita:
Fuentes en negrita: 
<span style="font-weight:bold;">[BOLD]</span> 
<span style="font-weight:bolder";">[BOLDER]</span> 
<span style="font-weight:lighter;">[LIGHTER]</span> 
<span style="font-weight:100;">[NEGRITA 100]</span> 
<span style="font-weight:900;">[NEGRITA 900]</span>
Resultado:
Fuentes en negrita: [BOLD] [BOLDER] [LIGHTER] [NEGRITA 100] [NEGRITA 900]
También puede actuar modificando el peso de la fuente con <b>, <strong>.

Fuente versales {font-variant : x}

CSS21 Para declarar aquellas fuentes que tienen diversas variantes o "cajas tipográficas", como las fuentes versales, donde las minúsculas se pueden presentar con una máyuscula de menor alto. El valor x puede ser uno de los siguientes:
  • normal, sin efecto versales (VALOR INICIAL)
  • small-caps, efecto versales
  • inherit (SE HEREDA)
Se aplica a todos los elementos.

Ejemplo {font-variant}

Ejemplo de versales:
Fuentes en versales: <span style="font-variant:small-caps;">[Versales]</span>
Resultado:
Fuentes en versales: [Versales]
Ver también color para el texto en la propiedad {color} de primer plano.

TEXTO {text-s : x}

CSS21
Alinear {text-align} Decorar {text-decoration} Sangrar {text-indent} Formatear {text-transform}
Para especificar algunas características del texto como alineación, subrayados, sangrados y maýusculas-minúsculas. En CSS2 se definía la propiedad {text-shadow} que producía efectos de sombras al texto. Sin embargo esta propiedad fue eliminada en la siguiente versión CSS21, por lo que no se incluye aquí.

Alinear texto {text-align : x}

CSS21 Para alinear el texto, donde x puede ser uno de los siguientes valores:
  • left
  • right
  • center
  • justify
  • inherit (SE HEREDA)

El VALOR INICIAL depende del valor del atributo {direction} y sus valores ltr y rtl para dirección del texto izquierda-derecha y derecha-izquierda respectivamente. En el primer caso el VALOR INICIAL será left y en el segundo será right.

Se aplica a elementos en nivel de bloque, celdas de tabla y a elementos con la propiedad {display} igual a inline-block.

Ejemplo {text-align}

En los siguientes ejemplos se expone el código y se comentan los detalles en el resultado sobre los distintos tipos de alineación del texto.
<div style="text-align:left; border: solid 1px;">
    Párrafo alineado a la izquierda:...
</div>
<div style="text-align:center; border: solid 1px;">
    Párrafo centrado:...
</div>
<div style="text-align:right; border: solid 1px;">
    Párrafo alineado a la derecha:...
    </i>
</div>
<div style="text-align:justify; border: solid 1px;">
    Párrafo justificado:...
</div>
<div style="border: solid 1px;">
    Dentro de esta división ...
    <p style="direction: rtl; unicode-bidi: bidi-override;">
    Este párrafo se ha escrito <br />
    con inversión del texto <br />
    con saltos de línea.</p>
</div>
<div style="border: solid 1px;">
    La alineación por defecto ...
    <p style="direction: rtl; unicode-bidi: bidi-override; text-align: left; ">
    Este párrafo se ha escrito <br />
    con inversión del texto <br />
    y con saltos de línea.</p>                   
</div>
Resultado:
Párrafo alineado a la izquierda: Este enfoque presenta varias complicaciones, ...
Párrafo centrado: Este enfoque presenta varias complicaciones, ...
Párrafo alineado a la derecha: Este enfoque presenta varias complicaciones, ...
Párrafo justificado: Este enfoque presenta varias complicaciones, como los fallos de comunicación temporales que pueden hacer que un sitio parezca no disponible, haciendo que no se lleve a cabo la operación de escritura, pero cuando el enlace se restaura, el sitio no sabe que tiene que llevar a cabo operaciones de reintegración para ponerse al día con las operaciones de escritura perdidas.
Dentro de esta división incluímos un párrafo con saltos de línea donde hemos desactivado el algoritmo de direccionalidad del texto, mostrándose con los carácteres invertidos en la dirección especificada rtl derecha a izquierda:

Este párrafo se ha escrito
con inversión del texto
y con saltos de línea.

La alineación por defecto anterior era a la derecha, pues se había especificado la dirección rtl, pero podemos modificar la alineación a la izquierda:

Este párrafo se ha escrito
con inversión del texto
y con saltos de línea.

Decorar texto {text-decoration : x}

CSS21 Para decorar el texto con líneas, donde x toma uno de los valores siguientes:
  • none (VALOR INICIAL)
  • De 1 a 4 de los valores siguientes separados por espacios
    • underline para subrayado
    • overline para superrayado
    • line-through para tachado
    • blink para intermitente
  • inherit (NO SE HEREDA)
Se aplica a todos los elementos. El valor intermitente puede no mostrarse en algunos navegadores.

Ejemplo {text-decoration}

Ejemplo de muestras de decoración de texto.
<p>
<span style="text-decoration:underline;">underline</span>
<span style="text-decoration:overline;">overline</span>
<span style="text-decoration:line-through;">line-through</span>
<span style="text-decoration:blink;">blink</span>
</p>
<div> En este párrafo a continuación mostramos todos los valores de una vez:
    <p style="text-decoration:underline overline line-through blink;"> 
    Texto subrayado, superrayado, tachado e intermitente</p>   
</div>
Resultado:

Texto subrayado con underline Texto superrayado con overline Texto tachado con line-through Texto intermitente con blink

En este párrafo a continuación mostramos todos los valores de una vez:

Texto subrayado, superrayado, tachado e intermitente

El texto intermitente se manifiesta en Firefox y Opera, pero no hemos detectado que se ejecute en Explorer y Safari.

Sangrar texto {text-indent : x}

CSS21 Para aplicar sangrías a la primera línea de un párrafo. El valor de x puede ser uno de los siguientes:
  • Una medida o porcentaje, en este caso referido al ancho del bloque contenedor.
  • inherit (SE HEREDA)
Se aplica a elementos de bloque, celdas de tablas y elementos declarados como inline-block en la propiedad {display}.

Ejemplo {text-indent}

<p style="border:solid 1px;">Ejemplo de párrafo sin 
sangría.</p>
<p style="text-indent: 40px; border:solid 1px;">Ejemplo de párrafo 
con sangría de 40 px.</p>
<p style="text-indent: 6em; border:solid 1px;">Ejemplo de párrafo 
con sangría de 6em, seis veces la altura de la letra.</p>
<p style="text-indent: 7%; border:solid 1px;">Ejemplo de párrafo 
con sangría de 7% del ancho del bloque.</p>
<p style="text-indent: -25px;border:solid 1px;">Ejemplo de párrafo 
con sangría de -25px, sobrepasando el margen hacia la izquierda.</p>
<div style="text-indent: 5em; border:solid 1px;">
<p style="border: dotted 1px;">Un párrafo hijo de una división 
que hereda el valor de la sangría del padre establecida en 5em.</p>
<p style="text-indent: 0; style="border: dotted 1px;"">Un segundo 
párrafo hijo también de la división al que forzamos un valor 0 para 
anular la sangría heredada de su padre.</p>
</div>
Resultado:

Ejemplo de párrafo sin sangría.

Ejemplo de párrafo con sangría de 40 px.

Ejemplo de párrafo con sangría de 6em, seis veces la altura de la letra.

Ejemplo de párrafo con sangría de 7% del ancho del bloque.

Ejemplo de párrafo con sangría de -25px, sobrepasando el margen hacia la izquierda.

Un párrafo hijo de una división que hereda el valor de la sangría del padre establecida en 5em.

Un segundo párrafo hijo también de la división al que forzamos un valor 0 para anular la sangría heredada de su padre.

Formatear texto {text-transform : x}

CSS21 Para establecer formatos mayúsculas y minúsculas, siendo x uno de los siguientes valores:
  • capitalize, que pone en mayúsculas la primera letra de cada palabra
  • uppercase, que convierte todo en mayúsculas
  • lowercase, que convierte todo en minúsculas
  • none, sin efecto (VALOR INICIAL)
  • inherit (SE HEREDA)
Se aplica a todos los elementos.

Ejemplo {text-transform}

En el siguiente ejemplo podemos ver un párrafo con letras capitales en cada palabra, es decir, mayúsculas en cada palabra (para títulos de proyectos por ejemplo), el siguiente convierte todo a mayúsculas, el último a minúsculas.
<p style="text-transform:capitalize">Párrafo con text-transform: <em>capitalize</em>.</p>
<p style="text-transform:uppercase">Párrafo con text-transform: <em>uppercase</em>.</p>
<p style="text-transform:lowercase">Párrafo con text-transform: <em>lowercase</em>.</p>
Resultado:

Párrafo con text-transform: capitalize.

Párrafo con text-transform: uppercase.

Párrafo con text-transform: lowercase.

Ver también fuente en versales en {font-variant}.