HTMLpointHTMLpoint HTMLpoint.com


 Atributos de estilo para el texto



No es casualidad que en los ejemplos que acompañan este artículo hayamos utilizado el atributo BODY. Las hojas de estilo, de hecho, reconocen este atributo como valor por defecto de todo el documento. Es un poco lo que sucede con la marca <BODY> en HTML clásico: cuanto se inserta dentro BODY se asignará a todo el documento.
En los ejemplos hemos usado hojas de estilo incorporadas, las cuales pueden recopilarse sin problemas en un archivo externo según lo visto en el capítulo "hojas de estilo externas".

Atributo font-family
Elenca la familio de fuentes para el estilo de una página o partes de ésta. Consideremos, por ejemplo, que queremos aplicar una fuente tipo "arial" a todo el documento. Lo que sigue es el modo correcto de impostar el estilo:

<STYLE>
BODY { font-family:arial }
</STYLE>


Es posible establecer distintos órdenes de preferencia de modo que ante la falta de una fuente el navegador aplique la sucesiva. Para ello, las familias de fuentes deben estar separadas por comas.
Por nombre de familia entendemos uno de los caracteres como Arial, courier new, times new roman, impact y tanto otros (para las fuentes, ver FONT.it). Las fuentes cuyos nombres constan de más de un término van entre comillas:

<STYLE>
BODY { font-family:arial, "courier new", impact }
</STYLE>


Una última alternativa es la de servirse de un nombre genérico de fuente. Con este término denominamos grupos de fuentes que, aun sin ser idénticas, poseen poseen características que las unen. De esta manera, el navegador buscará la fuente disponible en el ordenador del navegante, según las indicaciones del nombre genérico:

<STYLE>
BODY { font-family:serif }
</STYLE>


Las hojas de estilo reconocen 5 categorías de fuentes genéricas:
  • Serif El término se traduce por "gracias" y es aconsejable para largas secciones de texto. Dos casos típicos de fuente serif son times new roman o garamond

    <STYLE>
    BODY { font-family:serif }
    </STYLE>


  • Sans Serif Sin gracias. Típicos los tipos arial y helvetica

    <STYLE>
    BODY { font-family:"sans serif" }
    </STYLE>


  • Cursivas Tipos en cursiva que imitan la caligrafía.

    <STYLE>
    BODY { font-family:cursive }
    </STYLE>


  • Fantasy Caracteres decorativos como, por ejemplo, comic sans

    <STYLE>
    BODY { font-family:fanct }
    </STYLE>


  • Monospace Estas fuentes tienen como característica la de ocupar un espacio idéntico. Los otros caracteres, sin embargo, ocupan un espacio por letra proporcional a la misma. Una clásica fuente es courier.

    <STYLE>
    BODY { font-family:monospace }
    </STYLE>




Atributo font-size
Este atributo establece las dimensiones del texto. Mientras HTML estándar prevé tan sólo 7 niveles predefinidos para la dimensión del texto (de font size=1 a font size=7), las hojas de estilo permiten un control mucho más preciso y elástico, sin limitaciones.

Es posible impostar el estilo según 5 unidades de medida:
  • Puntos: esta unidad de medida se abrevia pt. Cada punto representa 1/72 de pulgada. Los puntos se refieren exclusivamente al espacio vertical ocupado en pantalla, mientras que la anchura aumenta en proporción al aumento de la altura.

    <STYLE>
    BODY { font-size:12pt }
    </STYLE>


  • Píxel: se trata de puntos presentes en la pantalla, que varían según la resolución consentida por el monitor e impostada por el usuario. Se hace referencia a los píxel en muchos ejemplos Javascript y en todas las resoluciones vídeo aconsejadas (generalmente 800x600)

    <STYLE>
    BODY { font-size:12px }
    </STYLE>


  • Pulgadas: clásica unidad anglosajona de medida.

    <STYLE>
    BODY { font-size:1in }
    </STYLE>


  • Centímetros: unidad de medida común a muchos países occidentales pero poco usada en el campo de la gráfica web.

    <STYLE>
    BODY { font-size:3cm }
    </STYLE>


  • Porcentaje: unidad de medida variable sin valores predeterminados. El valor porcentual se refiere al tamaño por defecto impostado en el navegador. Así, en un navegador que visualiza por defecto fuentes de 14 píxel, un valor del 200% corresponde a 28 píxel. Dicha medida puede variar de usuario a usuario.

    <STYLE>
    BODY { font-size:200% }
    </STYLE>


    La medición porcentual forma parte de un sistema de proporciones relativas, es decir depende de la medida actual del navegador. Existen otros valores que pueden sustituir al de porcentaje antes citado.

    <STYLE>
    BODY { font-size:smaller }
    </STYLE>


    define la fuente de tamaño inmediatamente inferior al establecido por defecto.

    <STYLE>
    BODY { font-size:larger }
    </STYLE>


    el opuesto del anterior: define la fuente de tamaño inmediatamente superior al establecido por defecto.

    <STYLE>
    BODY { font-size:2em }
    </STYLE>


    La medida de referencia es siempre la adoptada por defecto, es decir lo que cambia es el valor de referencia establecido en proporción 1:x.
Atributo font-style
Este atributo indica el estilo para la fuente. Es posible impostar distintos valores:

<STYLE>
BODY { font-style:normal }
</STYLE>


Normalno visualiza ningún estilo particular y toma el establecido por defecto por el navegador. Es posible usar "roman" en lugar de "normal"

<STYLE>
BODY { font-style:italic }
</STYLE>


El típico texto en cursiva que tan bien conocemos por el HTML clásico y por todos los editores de texto.

<STYLE>
BODY { font-size:oblique }
</STYLE>


Este atributo funciona aparentemente como "italic", pero se diferencia por inclinar hacia la derecha la fuente normal y no precisa cargar otro carácter como en el caso de italic.

Atributo font-variant
Este atributo es similar a font-size, pero se diferencia por asignar un estilo todo en mayúsculas. Si no está disponible en la máquina cliente la versión en mayúsculas grandes de las fuentes, el estilo usará las mayúsculas adaptando las medidas. Los valores que hay que asignar son "normal" y "small-caps"

<STYLE>
BODY { font-variant: small-caps }
</STYLE>


Atributo font-weight
El atributo font-weight establece el espesor de fuentes como BOLD para HTML clásico. Es posible asignar a este atributo 7 valores diferentes:

<STYLE>
BODY { font-weight: extra-light }
</STYLE>


<STYLE>
BODY { font-weight: demi-light }
</STYLE>


<STYLE>
BODY { font-weight: light }
</STYLE>


<STYLE>
BODY { font-weight: medium }
</STYLE>


<STYLE>
BODY { font-weight: extra-bold }
</STYLE>


<STYLE>
BODY { font-weight: demi-bold }
</STYLE>


<STYLE>
BODY { font-weight: bold }
</STYLE>


Atributo text-decoration
Este atributo permite adornar el texto con subrayados y otros efectos. Puede asumir distintos valores (none, underline, italic y line-height):

<STYLE>
BODY { text-decoration: none }
</STYLE>


<STYLE>
BODY { text-decoration: underline }
</STYLE>


<STYLE>
BODY { text-decoration: italic }
</STYLE>


<STYLE>
BODY { text-decoration: line-height }
</STYLE>


Otro efecto en voga últimamente (usado también en las páginas de HTMLpoint) es el que elimina los subrayados de los enlaces. Para ello, es necesario impostar el siguiente código para las fuentes incorporadas:

<STYLE>
A { text-decoration: none }
</STYLE>


y el siguiente para las hojas de estilo en línea:

<A HREF="http://www.htmlpoint.com" STYLE="text-decoration: none">HTMLpoint</A>

Siguiendo este ejemplo, se podrán impostar las hojas de estilo incorporadas de modo que el subrayado aparezca sólo cuando el ratón roza el enlace:

<STYLE>
A:link, A:visited { text-decoration: none }
A:hover { text-decoration: underline }
</STYLE>


De esta manera, cuando el enlace está inactivo no está subrayado, mientras que cuando el ratón toca el enlace se activa el subrayado.
Este ejemplo funciona perfectamente con Internet Explorer, mientras que con Netscape quita el subrayado al texto pero no reconoce A:hover.
Para más ejemplos e información sobre el tema, os aconsejamos visitar la sección efectos en texto y enlaces

  Vuelve a principio de página