Propiedades de fonte e texto

As follas de estilo nos permiten total control sobre o formato do texto nas páxinas web. Vexamos as propiedades CSS 2 relacionadas có texto:

font-family

Especifica a fonte (ou lista de fontes). Exemplos:

h1 {font-family: Arial; }
#cabeceira {font-family: Courier, monoespace; }
p.nova {font-family: "Trebuchet MS", Verdana, sans-serif; }

Hai que darse conta que o tipo de letra elixido debe estar instalado no equipo cliente. Polo que, se intentamos escoller un tipo de letra "raro", é interesante acudir ao seguinte recurso en liña de Microsoft, onde podemos atopar as fontes que se instalan por defecto có Windows, cós programas de Microsoft,... Ademáis de enlaces os tipos de letra que ten un equipo por defecto se ten instalado un Macintosh OS X, sistema UNI,...

font-size

Este atributo configura o tamaño do texto.

Mentres que o HTML estándar prevé tan só 7 niveles predefinidos para o tamaño do texto, as follas de estilo CSS permiten un control moito mais preciso e elástico, sen limitacións.

• Pulgadas: A súa abreviatura é in, clásica unidade de medida, en web case non se emprega.

body { font-size:15in; }

• Centímetros: A súa abreviatura é cm, unidade de medida común en moitos países occidentais pero pouco na web.

body { font-size:10cm; }

• Píxel: A súa abreviatura é px, trátase dos puntos da pantalla do ordenador, e hai que ter en conta que varían segundo a resolución do monitor configurada polo usuario.

body { font-size:15px; }

• Puntos: A súa abreviatura é pt. Cada punto representa 1/72 de pulgada mais ou menos. Os puntos refírese ó espazo vertical ocupado en pantalla, mentres que a anchura aumenta en proporción ó aumento da altura.

body { font-size:15pt; }

• Porcentaxe: A súa abreviatura é %, unidade de medida variable sen valores predeterminados. O valor porcentual refírese ao tamaño por defecto aplicado no navegador.

Así, nun navegador que visualiza por defecto fontes de 14 píxeles, un valor do 200% corresponde a 28 píxeles. Dita medida pode variar de usuario a usuario, dependendo da resolución do navegador.

body { font-size:200%; }

A medición porcentual forma parte dun sistema de proporcións relativas, é dicir, que depende do tamaño configurado no navegador.

Comentar que tamén existen outros valores que poden substituír ao de porcentaxe: smaller, larger.

• em: Unidade de medida relativa que equivale ao porcentaxe da letra que por defecto mostraría o navegador, é dicir, 1em é igual ao tamaño da letra por defecto. Nos navegadores este tamaño é de 16px, polo que temos que 1em = 16px.

h1 {font-size:2.5em}
p {font-size:0.875em}

A mellor solución de traballo será configurar un tamaño por defecto en tanto por cento, e para cada elemento da páxina configurar o tamaño en em.

body {font-size:100%; }
h1 {font-size:2.5em; }
p {font-size:0.875em; }

font-weight

Este atributo font-weight establece o espesor ou intensidade das fontes, como <b> para o HTML clásico. É posible asignar ata 7 valores diferentes: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800 ou 900

font-style

Este atributo indica o estilo para a fonte. É posible asignar tres valores distintos:

• normal : Normal non visualiza ningún estilo particular e toma o estilo definido por defecto no navegador. É posible usar "Roman" en lugar de normal.

<style>
body { font-style:normal }
</style>

• italic : O típico texto en cursiva que xa coñecemos do HTML clásico (<i>).

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

• oblique : Este atributo funciona aparentemente como "italic".

<style>
body { font-size:oblique }
</style>

font-variant

Este atributo é similar a font-size, pero diferénciase por asignar un estilo todo en maiúsculas se se lle da o valor small-caps. Se non está dispoñible na máquina cliente a versión en maiúsculas grandes das fontes, o estilo empregará as maiúsculas adaptando as medidas. Os valores posibles que se poden asignar son normal e small-caps, para o valor "normal" o texto non aparecerá en maiúsculas, aparecerá "normal".

<style>
body { font-variant: small-caps; }
</style>

font

A propiedade font, permítenos establecer tódolos atributos do tipo de letra nunha soa declaración. Así esta propiedade engloba as seguintes: font-style, font-variant, font-weight, font-size/line-height, font-family, caption, icon, menu, message-box, small-caption e status-bar. As súa sintaxe será así:

font: [<font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family>

Se se omite o tamaño, font-size, ou o tipo de letra, font-family, ou se intercambia a súa posición, a declaración da propiedade font é incorrecta e se ignora o seu valor:

Vexamos varios exemplos:

p { font: 12px arial; }
p { font: italic small-caps bold 12px arial; }
p { font: oblique small-caps 900 12px/14px arial; }
p { font: menu; }
p { font: 80% sans-serif; }
p { font: x-large/110% "new century schoolbook", serif; }
p { font: bold italic large Palatino, serif; }
p { font: normal small-caps 120%/120% fantasy; }

text-decoration

Este atributo permite adorna-lo texto con subliñados e outros efectos. Pode asumir distintos valores (none, underline, overline, line-through, blink e inherit):

   body { text-decoration: none; }
   body { text-decoration: underline; }
   body { text-decoration: line-through; }
   body { text-decoration: blink; }

Outro efecto de moda últimamente, é o de eliminar os subraiados nos enlaces. Para elo, é necesario emprega-lo seguinte código:

   a { text-decoration: none; }

En base o exemplo anterior, pódese programar que o subliñado soamente apareza cando pasamo-lo rato por riba do enlace:

   a:link, a:visited { text-decoration: none; }
   a:hover, a:active { text-decoration: underline; }

Deste xeito, cando o hiperenlace está inactivo non aparecerá subliñado, mentres que cando o rato toca o enlace o subliñado será activado.

text-transform

Esta propiedade controla as letras nun elemento.

p { text-transform: uppercase; }

Valores posibles da propiedade text-transform:

• none : Por defecto. Define texto normal, con maiúsculas e minúsculas.
• capitalize : Cada palabra no texto comezará con maiúsculas.
• uppercase : Tódalas palabras do texto aparecerán en maiúsculas.
• lowercase : Tódalas palabras do texto aparecerán en minúsculas.

line-height

Esta propiedade establece a distancia entre liñas.

p { line-height: 1.4; }
p { line-height: 14pt; } 
p { line-height: 140%; }

Valores posibles:

• normal : Valor por defecto. Establece a distancia normal entre as liñas.
• number : Este número será o factor de multiplicación respecto ao tamaño font-size, dando como resultado a distancia entre liñas.
• length : Establece unha distancia fixa entre as liñas.
• % : Establece unha distancia proporcional (%) respecto a font-size.

text-indent

Esta propiedade identa a primeira liña de texto nun elemento.

Exemplo:

   p { text-indent: 20px; }
   p { text-indent: -12px; }

Valores posibles:

• length : Define unha identación fixa. O valor por defecto é 0.
• % : Define a identación en porcentaxe % respecto ó ancho do elemento pai.

text-align

Esta propieda estable a alineación do texto:

p { text-align: center; }

Valores posibles:

• left : Fai alineación do texto á esquerda.
• right : Fai alineación do texto á dereita.
• center : Centra o texto.
• justify : Alineación por ambos lados.

letter-spacing

Esta propiedade incrementa ou decrementa o espaciado entre caracteres.

   p { letter-spacing: 12px; }
   p { letter-spacing: -0.5px; }

Posibles valores:

• normal : O valor por defecto.
• length : Define un espaciado fixo entre caracteres.

white-space

Esta propiedade permítenos establecer como se xestiona os espacios en blanco nun elemento.

p { white-space: normal; }

Posibles valores:

• normal : Por defecto. Os espacios en branco adicionais son ignorados polo navegador.
• pre : Os espacios en branco adicionais son utilizados. Equivale ao emprego da marca pre no html.
• nowrap : Non se produce axuste de liña automática. Esto quere dicir que o texto permanecerá na mesma liña ata que atopemos unha marca <br />.

direction

Esta propiedade establece en que dirección se escribe o texto.

div { direction: rtl; }

Posibles valores:

• ltr : Por defecto. O texto escríbese de esquerda a dereita.
• rtl : O texto será escrito de dereita a esquerda.

--Manuel Vieites e -- Rafael Veiga feb 2008