HTMLpointHTMLpoint HTMLpoint.com


 Efectos en texto y enlaces



Las propiedades relativas a las fuentes no se refieren al tipo de carácter (que ya analizamos en la sección "Atributos de estilo para el texto") sino a su aspecto y a algunos puntos relacionados con la colocación.

Atributo letter-spacing
Letter-spacing establece la distancia entre las letras dentro de un documento. Los valores se expresan en em. Se trata de una unidad de medida equivalente al tamaño de la letra m. Se usa también con animales

<DIV STYLE="font-family:arial; letter-spacing:1em">
HTMLpoint es el sitio italiano de web publishing más visitado y con mayor autoridad. Decenas de tutorial, centenares de Javascript, de applet Java, de demo para Dynamic HTML.
</DIV>


Muestra el ejemplo práctico


Atributo text-transform
QuEste atributo permite manipular las minúsculas y mayúsculas del texto gracias a tres palabras clave:

  • uppercase: aplica las mayúsculas a todas las letras del elemento:

    <DIV STYLE="font-family:arial; text-transform:uppercase">
    HTMLpoint es el sitio italiano de web publishing más visitado y con mayor autoridad. Decenas de tutorial, centenares de Javascript, de applet Java, de demo para Dynamic HTML.
    </DIV>


  • capitalize: aplica la mayúscula sólo a la primera letra de cada palabra:

    <DIV STYLE="font-family:arial; text-transform:capitalize">
    HTMLpoint es el sitio italiano de web publishing más visitado y con mayor autoridad. Decenas de tutorial, centenares de Javascript, de applet Java, de demo para Dynamic HTML.
    </DIV>


  • lowercase: aplica las minúsculas a todas las letras del elemento:

    <DIV STYLE="font-family:arial; text-transform:lowercase">
    HTMLpoint es el sitio italiano de web publishing más visitado y con mayor autoridad. Decenas de tutorial, centenares de Javascript, de applet Java, de demo para Dynamic HTML.
    </DIV>


    Muestra el ejemplo práctico


    Atributo text-align
    La función de este atributo es visualizar el texto en cuatro posiciones: left (izquierda), center (centrado), right (derecha) e justify (justificado).

    <DIV STYLE="font-family:arial; text-align: right">
    HTMLpoint es el sitio italiano de web publishing más visitado y con mayor autoridad. Decenas de tutorial, centenares de Javascript, de applet Java, de demo para Dynamic HTML.
    </DIV>


    Muestra el ejemplo práctico


    Atributo text-indent
    Este atributo define la cantidad de espacio (expresada en valores absolutos em o en pulgadas) que se deja inmediatamente antes de la primera palabra.

    <DIV STYLE="font-family:arial; text-indent: 5em">
    HTMLpoint es el sitio italiano de web publishing más visitado y con mayor autoridad. Decenas de tutorial, centenares de Javascript, de applet Java, de demo para Dynamic HTML.
    </DIV>


    Muestra el ejemplo práctico


    Atributo line-height
    El atributo line-height define la distancia vertical entre las varias líneas de texto. Los valores se expresan en porcentajes o en unidades absolutas em. Dichos valores son directamente proporcionales al tamaño del texto (font-size). Por ello, en el ejemplo que sigue, estando el valor absoluto line-height impostado en 2 y el texto en 14px, la distancia será 28px (14px * 2em).

    <DIV STYLE="font-family:arial; font-size:14px; width:400px; line-height: 2em">
    HTMLpoint es el sitio italiano de web publishing más visitado y con mayor autoridad. Decenas de tutorial, centenares de Javascript, de applet Java, de demo para Dynamic HTML.
    </DIV>


    Muestra el ejemplo práctico


    Atributo list-style
    La propiedad list-style permite sustituir los puntos lista estándar de HTML con imágenes en formato GIF. Es posible aplicar tales puntos o toda la lista o sólo a una parte de la lista.

    <style type="text/css">
    UL { list-style-image:URL(punto.gif) }
    </style>


    Muestra el ejemplo práctico


    Enlace sin subrayado
    Desde siempre los navegadores muestran los enlaces textuales con un subrayado (underline) que señala su función. Internet Explorer ofrece la posibilidad de eliminar dicho subrayado actuando en las propiedades del navegador. Con las hojas de estilo los elaboradores pueden eliminar totalmente el subrayado mediante un simple código que se insertará entre las marcas BODY del documento:

    <style type="text/css">
    A:link, A:visited { text-decoration: none }
    </style>


    Muestra el ejemplo práctico


    Enlace subrayado sólo cuando pasa el ratón
    El ejemplo que hemos visto antes puede elaborarse de nuevo para hacer más atractiva la página. En los enlaces que no llevan subrayado éste aparecerá sólo cuando el ratón pasa por encima gracias a la propiedad A:hover.

    <style type="text/css">
    A:link, A:visited { text-decoration: none }
    A:hover { text-decoration: underline }
    </style>


    Muestra el ejemplo práctico


    Con referencia al último ejemplo es posible impostar la CSS para obtener el efecto contrario: los enlaces están subrayados por defecto pero el subrayado desaparece cuando el ratón pasa por encima:

    <style type="text/css">
    A:link, A:visited { text-decoration: underline }
    A:hover { text-decoration: none }
    </style>


    Muestra el ejemplo práctico


    Enlace que cambia de color cuando pasa el ratón
    Explotando todavía más la propiedad A:hover, es posible crear un efecto mediante el cual los enlaces tengan un color por defecto que cambiará cuando el ratón pase por encima. El color se puede impostar como palabra clave (red, green, blue, etc.) o como trío hexadecimal.

    <style type="text/css">
    A:hover { color: red }
    </style>


    Muestra el ejemplo práctico


    Enlace que cambia color de fondo cuando pasa el ratón/FONT>
    Otra vez la propiedad A:hover que, de acuerdo con la propiedad de definición del background genera un efecto muy interesante: cuando el cursor del ratón pasa por encima del enlace, éste se activa con un color de texto y de fondo impostados.

    <style type="text/css">
    A:hover { color: white; background:blue }
    </style>


    Muestra el ejemplo práctico


    Enlace que cambia el tamaño del texto cuando el ratón lo activa
    Último ejemplo de A:hover. Esta vez el texto se agranda cuando el ratón pasa por encima.

    <style type="text/css">
    A:link { font-size: 15px }
    A:visited { font-size: 15px }
    A:hover { font-size: 16px }
    </style>


    Muestra el ejemplo práctico


    Las hojas de estilo consideredas hasta ahora son incorporadas, ya que están colocadas entre las marcas HEAD del documento y se refieren a todos los elementos de la página.
    Exigencias particulares pueden requerir que se activen estos efectos sólo por lo que se refiere a algunos enlaces. Si por ejemplo los enlaces se quieren subrayar excepto por lo que se refiere a un único elemento de la página, se usan las hojas de estilo en línea de esta manera:

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

    Una buena norma es la de igualar los efectos en los enlaces para todos los documentos del sitio, adoptando un método que permite un automatismo en este sentido. La solución ideal son las Hojas de estilo externas, dentro de las cuales se insertan los atributos de estilo.


  •   Vuelve a principio de página