CSS práctico

Permiten modificaciones en la presentaci�n de las cadenas de texto mediante la propiedad "text-transform", la cual puede tomar alguno de los siguientes valores:

  • uppercase. Todo el texto se transformar� a may�sculas.

  • lowercase. Todo el texto se transformar� a min�sculas.

  • capitalize. Convierta a may�scula la primera letra de cada palabra.

  • none. No se realizar� ninguna transformaci�n sobre el texto.

<html>
  <head>
    <title>Propiedades del texto</title>
    <style>
      p { font-size: 200%; font-weight: bold;}
    </style>
  </head>

  <body>
    <p style="text-transform: uppercase;">
      Prueba de transformaci�n
    </p>
    <p style="text-transform: lowercase;">
      Prueba de transformaci�n
    </p>
    <p style="text-transform: capitalize;">
      Prueba de transformaci�n
    </p>
  </body>
</html>
Figura 17. Transformaciones del texto

.�Decoraci�n del texto

A�ade a las cadenas de texto cierto formato mediante el uso de la propiedad "text-decoration", la cual puede tomar uno de los siguientes valores:

  • underline. Subraya el texo asociado.

  • overline. Dibuja un l�nea sobre el texto asociado. Es como un subrayado, pero sobre la parte superior del texto.

  • line-through. Tacha el texto asociado dibujando una l�nea sobre el mismo.

  • blink. Hace que el texto asociado parpadee.

  • none. No aplica ning�n elemento decorativo al texto.

<html>
  <head>
    <title>Propiedades del texto</title>
    <style>
      p { font-size: 200%; font-weight: bold;}
    </style>
  </head>

  <body>
    <p style="text-decoration: underline;">
      Prueba de decoraci�n del texto
    </p>
    <p style="text-decoration: overline;">
      Prueba de decoraci�n del texto
    </p>
    <p style="text-decoration: line-through;">
      Prueba de decoraci�n del texto
    </p>
    <p style="text-decoration: blink;">
      Prueba de decoraci�n del texto (este est� parpadeando :)
    </p>
  </body>
</html>
Figura 18. Decoración del texto

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP