2.1 Propiedades de tipografía
En esta página empezaremos a dar las definiciónes de las propiedades CSS, y los valores que éstas pueden tomar. Empezamos por las propiedades que modifican el texto, y dentro de éstas las propiedades de tipografía.
Se denominan propiedades de tipografía aquellas que afectan al texto en sí mismo, es decir a la forma de las letras y las palabras. Se diferencian de las propiedades de texto en que éstas últimas afectan a la estructura y la posición del mismo, es decir al estilo de un trozo de texto.
Propiedad color
La propiedad color afecta al color del texto y su definición
es la siguiente:
| color | Color de texto |
|---|---|
| Valores | <color> | inherit |
| Descripción | Establece el color de letra utilizado para el texto |
| Valor inicial | Depende del navegador (normalmente el negro) |
| se aplica a | Todos los elementos |
Los valores de los colores pueden definirse de varias maneras, las cuales hemos explicado en la página 1.4 Colores y medidas de este manual. Consulta esta página para ver las maneras que tenemos de definir los valores de los colores.
El valor inherit significa heredado y quiere decir que se aplica el
mismo valor que el elemento que lo contiene (llamado también elemento padre), este valor es común a
muchas propiedades CSS.
El valor inicial depende del navegador, no obstante en los principales navegadores es el negro. (black)
Veamos el código de una página en la que cambiamos los colores del texto:
<html> <head> <title>Texto en varios colores</title> </head> <body> <p style="color: blue">Este es el primer párrafo, y su color es el blue, porque he utilizado la propiedad CSS color: blue</p> <p style="color: red">Este es el segundo párrafo, y su color es el red</p> <p style="color: #c07aad">Este este es el tercer párrafo, y su color es el #c07aad</p> <p>Este cuarto párrafo tiene varios colores, <span style="color: orange">entre ellos está el orange,<span><span style="color: olive">el color olive</span> <span style="color: #8a00c6">y el color #8a00c6</span>. </body> </html>
La página anterior la verás en el navegador de la siguiente manera:
Observa que en esta página hemos introducido el código CSS directamete en cada etiqueta mediante el atributo style, tal como se explicó en el la página 1.3 de este manual, sección "Incluir CSS en Etiquetas".
Propiedades font
Las propiedades font son una serie de propiedades que afectan a la letra,
y comienzan todas por la palabra font: Veamos cuáles son:
Propiedad font-family
Esta propiedad afecta a la tipografía del texto y su definición es:
| font-family | Tipo de letra |
|---|---|
| Valores | (( <nombre_familia> | <familia_generica> ) (,<nombre_familia> | <familia_generica>)* ) | inherit |
| Descripción | Establece el tipo de letra o "fuente" utilizado para el texto |
| Valor inicial | Depende del navegador |
| se aplica a | Todos los elementos |
El tipo de letra del texto se puede indicar de dos formas diferentes:
- Mediante el nombre del tipo de letra, como por ejemplo "Arial", "Verdana", "Garamond", etc.
- Mediante el nombre genérico de una familia tipográfica: los nombres genéricos no se refieren a ningun tipo de letra o fuente en concreto, sino que hacen referencia al estilo del tipo de letra. Las familias genéricas definidas son:
-
- serif: tipo de letra similar a Times New Roman.
- sans-serif: tipo Arial.
- cursive: tipo Comic Sans.
- fantasy: tipo Impact.
- monospace: tipo Courier New.
Los navegadores utilizan los tipos de letra instalados en el ordenador del
propio usuario. De esta forma, si indicamos en la propiedad font-family un tipo
de letra raro o rebuscado, casi ningún usuario dispondrá de ese tipo de letra.
Para evitar el problema de que el usuario no tenga instalado el tipo de letra,
CSS permite indicar en la propiedad font-family más de un tipo de letra. El
navegador probará en primer lugar con el primer tipo de letra indicado.
Si el usuario la tiene instalada, el texto se muestra con ese tipo de letra. Si no
es así probará con el segundo, después con el tercero, y si no tuviera ninguno
mostraría el tipo de letra que usa el navegador por defecto.
El valor de font-family suele definirse como una lista de tipos de letra
alternativos separados por comas. El último valor de la lista suele ser el nombre
de la familia tipográfica genérica que más se parece al tipo de letra que se quiere
utilizar. Ejemplos:
font-family: Arial, Helvetica, sans-serif;
font-family: "Times New Roman", Times, serif;
Cuando el nombre de la fuente (tipo de letra) tiene más de una palabra debemos escribirla entre comillas para no dar lugar a confusiones.
Propiedad font-size
Esta propiedad afecta al tamaño del texto y su definición es:
| font-size | Tamaño de letra |
|---|---|
| Valores | <tamaño_absoluto> | <tamaño_relativo> | <medida> | <porcentaje> | inherit |
| Descripción | Establece el tamaño de letra utilizado para el texto |
| Valor inicial | medium |
| se aplica a | Todos los elementos |
los valores de tamaño absoluto pueden ser de menor a mayor las siguientes
palabras clave: xx-small, x-small, small, medium, large, x-large, xx-large.
los valores de tamaño relativo emplean las palabras clave
larger, smaller (más_grande , más_pequeño) y toman como referencia el valor
del elemento que lo contiene (elemento padre).
Los valores de medidas emplean una serie de unidades de medida que pueden ser de varios tipos. Puedes consultar todas las unidades de medida que hay en CSS en la página 1.4 Colores y medidas de este manual. Las más utlizadas son los pixeles (px) y el em (1em = tamaño por defecto en el navegador ). Las medidas deben escribirse siempre seguidas del indicador de su unidad, y sin espacios entre el número y el indicador: ejemplo:
font-size: 12px;
por último el porcentaje es una unidad de medida relativa: indica el tanto por
ciento respecto al tamaño de letra del elemento que lo contiene (elemento padre),
considerando que el elemento que lo contiene es siempre el 100%; así por
ejemplo font-size: 120%; será un tipo de letra un 20% más grande que
el del elemento que lo contiene.
Propiedad font-weight
Esta propiedad afecta al grosor de la letra (negrita) y su definición es:
| font-weight | Grosor de letra |
|---|---|
| Valores | normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit |
| Descripción | Establece la anchura de la letra utilizada para el texto |
| Valor inicial | normal |
| se aplica a | Todos los elementos |
Los valores que normalmente se utilizan son normal (el valor por defecto) y bold para los textos en negrita. El valor normal equivale al valor numérico 400 y el valor bold al valor numérico 700.
Propiedad font-style
Esta propiedad afecta al estilo de la letra (cursiva) y su definición es:
| font-style | Estilo de letra |
|---|---|
| Valores | normal | italic | oblique | inherit |
| Descripción | Establece el estilo de la letra utilizada para el texto (cursiva) |
| Valor inicial | normal |
| se aplica a | Todos los elementos |
Normalmente la propiedad font-style se emplea para mostrar un texto en cursiva mediante el valor italic. El valor oblique muestra también un texto en cursiva, con algunos tipos de letra el texto se muestra un poco más inclinado.
Propiedad font-variant
Esta propiedad afecta también al estilo de la letra, pudiendo dar un tipo de letra de mayúsculas pequeñas (tipo versales) y su definición es:
| font-variant | Estilo alternativo de letra |
|---|---|
| Valores | normal | small-caps | inherit |
| Descripción | Establece el estilo alternativo de la letra utilizada para el texto (versal) |
| Valor inicial | normal |
| se aplica a | Todos los elementos |
La propiedad font-variant es poco utilizada, ya que sólo permite mostrar el texto con letra versal (mayúsculas pequeñas).
Veamos ahora el código de una página en la que hemos aplicado algunas de las propiedades anteriores para cambiar los distintos tipos de títulos:
<html>
<head>
<title>Color y estilo del texto</title>
<style type="text/css">
h1 { color: red; font-family: arial; font-size: 2em; font-weight: bold; }
h2 { color: blue; font-family: cursive; font-size: 1.5em; font-style: italic; }
h3 { color: green; font-family: fantasy; font-size: 15px; font-weight: normal; }
h4 { color: maroon; font-family: monospace; font-size: 15pt; font-weight: normal; }
h5 { color: purple; font-family: serif; font-size: 1.5pc; font-style: italic; }
h6 { color: olive; font-family: verdana; font-size: 1em; font-variant: small-caps; }
</style>
</head>
<body>
<h1>Texto color rojo, tipo arial, tamaño 2em, grosor negrita</h1>
<h2>Texto color azul, tipo cursive, tamaño 1.5em, estilo italica</h2>
<h3>Texto color verde, tipo fantasy, tamaño 15px, grosor normal</h3>
<h4>Texto color marrón, tipo monospace, tamaño 15pt, grosor normal</h4>
<h5>Texto color purpura, tipo serif, tamaño 1.5pc, estilo italica</h5>
<h6>Texto color oliva, tipo verdana, tamaño 1em, letra versal</h6>
</body>
</html>
Observa cómo en esta página el código CSS está puesto en la cabecera, dentro de una etiqueta de estilo, al contrario que en la anterior, donde colocabamos el código directamente en las etiquetas HTML.
Esta página la veremos en el navegador como en el siguiente enlace:
Propiedad font - tipo "shorthand"
Cuando tenemos un grupo de propiedades afines, que empiezan todas por la misma palabra, como es el caso de las propiedades "font-...", podemos, normalmente agruparlas bajo una única propiedad que las engloba. Esto es lo que se llama una propiedad de tipo "shorthand".
Podemos por tanto aplicar las propiedades vistas anteriormente (excepto la propiedad color) a un mismo elemento mediante la propiedad font, que es su propiedad de tipo shorthand.
La definición de la propiedad font es la siguiente:
| font | Tipo de letra |
|---|---|
| Valores | ( ( <font-style> || <font-variant> || <font-weight> )? <font-size> ( / <line-height> )? <font-family> ) | caption | icon | menu | message-box | small-caption | status-bar | inherit |
| Descripción | Permite indicar todas las propiedades de la tipografía de un texto |
| Valor inicial | - |
| se aplica a | Todos los elementos |
Las propiedades deben indicarse en el siguiente orden:
- Primero, y de forma opcional se indicarán el
font-weight,font-styleyfont-varianten cualquier orden. - A continuación, y obligatoriamente, el valor de
font size. Puede ir seguido opcionalmente de una barra inclinada y el valor deline-height. Esta es una propiedad que veremos en la siguiente página. - Por último se indica obligatoriamente el valor o valores de
font-family.
Veamos algunos ejemplos:
font: italic bold 1.2em/1em helvetica, arial, sans-serif;
font: 12px "Times new roman",serif;
font: small-caps 20px/22px "Century Gothic","Trebuchet MS",Arial,sans-serif;
La propiedad font también permite indicar el tipo de letra a
utilizar mediante una serie de palabras clave: caption, icon, menu,
message-box, small-caption, status-bar.
Estas palabras muestran el mismo tipo de letra que usa el sistema operativo para sus distintas funciones. Ejemplo: iconos (icon); barras de estado (status-bar) menus (menu) etc. Esta forma de definir el tipo de letra no suele ser la habitual, ya que el tipo de letra resultante puede ser distinto en cada navegador.
Por último veamos cómo quedaría el código CSS de la página de ejemplo anterior, mediante la etiqueta "font" tipo shorthand:
<style type="text/css">
h1 { color: red; font: bold 2em arial; }
h2 { color: blue; font: italic 1.5em cursive; }
h3 { color: green; font: normal 15px fantasy; }
h4 { color: maroon; font: normal 15pt monospace; }
h5 { color: purple; font: italic 1.5pc serif; }
h6 { color: olive; font: small-caps 1em verdana; }
</style>
Si sustituyes el primer código por el segundo, verás que el resultado es casi el mismo, sin embargo si que hay una pequeña diferencia, y es el valor de la propiedad font-weight. En el primer código, si no se indica esta propiedad, el valor por defecto es "negrita", ya que lo toma de las etiquetas html, las cuales tienen este valor por defecto, mientras que en el segundo, si no se indica nada, la propiedad font le imprime como valor por defecto "normal".
