Unidad 3. Aspecto de la página. Estilos básicos (III)


3.2. Formato del texto

Hemos visto los fundamentos de los estilos CSS, ahora vamos a entrar en más detalle viendo las posibilidades que ofrecen. Empezaremos con el formato del texto y las propiedades que se le pueden aplicar: color, fuente, tamaño, inclinación, grosor, decoración y mayúsculas/minúsculas.

Color

El color se expresa con la propiedad color. El valor que puede tomar esta propiedad se puede expresar de varias formas:

  1. Un número hexadecimal. Por ejemplo color: #0000FF;,o color: 0x800080;.
  2. Tres números entre 0 y 255. Por ejemplo color: rgb(0, 0, 255);.
  3. Tres números entre 0 y 100. Por ejemplo color: rgb(10%, 20%, 75%);.
  4. Un nombre. Algunos colores se pueden expresar con su nombre en inglés. Por ejemplo color: green; o color: DarkGreen;.

Como todo esto es un poco lioso, hay herramientas que facilitan el trabajo con los colores, por ejemplo, ColorPic es un pequeño programa gratuito que puedes descargarte en esta dirección: http://www.iconico.com/colorpic/. Los mejores editores gráficos también incorporan herramientas en este sentido, más adelante veremos como trabajar con colores con el editor Kompozer.

Si todavía no lo has hecho, es conveniente que veas este tema básico sobre colores Básico. Puedes encontrar más información sobre los colores en el Curso de Illustrator.

En el tema 8 volveremos a hablar sobre colores, ampliando algunas cuestiones relativas a la elección de los colores más apropiados.

Fuente

Podemos elegir la fuente (o tipo de letra) a través del atributo font-family. Podemos indicar cualquier fuente que queramos, teniendo en cuenta que si incluye espacios, debe de ir entre comillas dobles. Por ejemplo font-family: arial; o font-family: "Times New Roman";.

Pero hemos de tener en cuenta que puede que quien vea la página no tenga instalada la fuente que queramos. Para evitar esto, existen cinco fuentes genéricas que sí se mostrarán en cualquier equipo: serif, sans-serif,cursive,fantasy, monospace. Esto no quiere decir que sólo debamos de utilizar estas cinco. El valor de font-family pueden ser varias fuentes, separadas por comas. El navegador elegirá, comenzando por la derecha, la primera disponible, por lo que es conveniente terminar por una genérica.
Por ejemplo, font-family:Georgia, "Times New Roman", Times, serif;.

Igual que ocurría con el color, los editores gráficos ofrecen la posibilidad de elegir diferentes fuentes y previsualizar su forma, más adelante veremos como hacerlo con Kompozer.

Tamaño

El tamaño se regula a través de la propiedad font-size. Podemos utilizar cualquiera de las unidades de tamaño, pero lo más frecuente es utilizar px (pixels), o porcentajes % o em, estas dos últimas son tamaños relativos al tamaño de la fuente del elemento que está por encima. 100% o 1em, sería el mismo tamaño, mientras que 200% o 2em sería el doble y 50% o 0.5em sería la mitad.

Si utilizamos valores relativos, facilitamos que se pueda cambiar de tamaño todo el texto de la página de forma más coherente. Así los discapacitados visuales podrán utilizar el comando para cambiar el tamaño de texto que tienen los navegadores. http://usalo.es/152/botones-para-cambiar-el-tamano-de-letra/

Inclinación

Podemos poner una fuente en cursiva utilizando la propiedad font-style. Puede tomar uno de los siguientes valores:

  • normal. Coloca el estilo de forma normal, sin inclinación.
  • oblique. Inclina el texto.
  • italic. Además de inclinarlo, susituye la fuente por su versión en itálica si está disponible. Aunque la mayoría de los navegadores no lo hacen.

Grosor

Podemos aumentar el grosor de la fuente, lo que equivaldría a ponerla en negrita, utilizando font-weight. Puede tomar los siguientes valores:

  • normal. El texto no se muestra en negrita.
  • bold. El texto se muestra en negrita.

Nota. En teoría se pueden expresar distintas intensidades de negrita, pero los navegadores no las muestran.

Decoración

Con la propiedad text-decoration podemos hacer que el texto muestre, por ejemplo, los distintos tipos de subrayado, con los siguientes valores:

  • none, el texto se muestra sin ningún tipo de decoración.
  • underline, el texto aparece subrayado.
  • overline, el texto aparece sobrerrayado.
  • line-through, el texto aparece tachado.
  • blink, el texto parpadea. (No funciona en Internet Explorer, en Firefox 3, si).

Enero-2010
Pág. 3.3

Atrás  Inicio  Adelante





.