Comunidad de diseño web y desarrollo en internet

Colores, fondos y fuentes

Eh, yo he visto esto antes. No. . . lo he jugado antes. No. . . ¡lo he diseñado antes!
Post sobre "Piratas del Caribe" Ron Gilbert, desarrollador de videojuegos

Para empezar a meter mano al CSS, conviene conocer algunas propiedades sencillas. ¡Empezamos!

El color de primer plano

La propiedad color hace referencia al foreground color, es decir, al color que está por encima del fondo. Hablando en plata, viene a ser el color del texto. Si queremos que nuestra página tenga las letras de gris oscuro, lo conseguimos con esto:

body { color : #666; }

Muy fácil, ¿no? Que pase el siguiente.

El fondo

Podemos modificar el fondo de un elemento con la propiedad background, que tiene la siguiente sintaxis:

background : color | image | repeat | attachment | position ;

El primer parámetro corresponde al color de fondo, los siguientes son relativos a la imagen de fondo:

  • image: aquí indicamos la ruta a la imagen que pondremos. Por ejemplo, url(fondo.gif).
  • repeat: con esto establecemos si queremos que la imagen se repita o no, tanto horizontal como verticalmente. Con repeat se repite siempre en ambos sentidos (valor por defecto), mientras que con no-repeat no se repite nunca. Con repeat-x se repite sólo en horizontal, y con repeat-y sólo en vertical.
  • attachment: sirve para indicar si el fondo se queda fijo en el sitio o se desplaza con scroll. Es un poco difícil de explicar, así que lo mejor es que lo probéis vosotros mismos: con scroll (valor por defecto) el fondo se desplaza, y con fixed se queda siempre en el mismo sitio.
  • position: indica la posición del fondo. Indicamos tanto la posicion desde la izquierda como desde arriba (ya sea en píxeles, porcentajes, o incluso palabras).

    En este caso, si podemos usar palabras, es preferible que lo hagamos. Disponemos de top (arriba), bottom (abajo), left (izquierda) y right (derecha).

    Los valores por defecto son 0 % 0 %, que sitúan al fondo en la esquina superior izquierda. Si lo quisiéramos en las coordenadas 20,30 (tomando como el origen a la esquina superior izquierda), escribiríamos 20px 30px. Si queremos el fondo centrado, pues 50 % 50 %.

Podemos omitir alguna propiedad si queremos. Además, podemos establecer los valores de forma individual, usando las propiedades background-color, background-repeat, etc.

Veamos algunos ejemplos para poner fondo a nuestra página:

/* sólo color de fondo */
body { background : #fff; }

/* color de fondo e imagen en mosaico */
body { background : #fff url(fondo.gif); }

/* imagen fija , centrada y sin repetir */
/* a modo de marca de agua */
body {
    background-color: #fff;
    background-image: url(fondo.gif);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

Hemos explicado de forma bastante detallada cómo funciona la propiedad background, pero no te malacostumbres. Ahora iremos mucho más deprisa, y seguramente te toque buscar más información por tu cuenta.

¿Recuerdas ese librito majo de 359 páginas?

Fuente

Hay varias propiedades que nos permiten jugar con el aspecto del texto. Podemos englobar todas bajo font, pero primero veremos algunas subpropiedades.

Antes de nada, debemos considerar que no todos los ordenadores tienen las mismas fuentes instaladas. Es decir, que mi wonderfulosa fuente llamada chachi.ttf no tiene por qué tenerla mi vecino. Es más, lo normal es que no la tenga. ¿Entonces qué hacemos? Usar sólo fuentes "estándar", que tengan la mayoría de ordenadores. Además, podemos especificar varias, de forma que si no se tiene la primera, se muestre la segunda, si no se tiene la segunda, pues la tercera, etc.

La Ley de Murphy, como en cualquier otro aspecto de la vida, es aplicable al diseño web también.

A lo que íbamos. La propiedad que sirve para cambiar la fuente es font-family. Como acabamos de ver, podemos indicar varias fuentes, por orden de preferencia. Si el nombre de una fuente tiene espacios en blanco, hay que ponerla entre comillas. Por ejemplo:

Haz esto y muere. La irrupción de la Comic Sans por doquier sólo es comparable a la aparición de Jar Jar Binks en Star Wars.

font-family: "Comic Sans MS", Arial, sans-serif;

EL tamaño de la fuente lo controlamos con font-size. Podemos indicar medidas en píxeles (px) o en puntos (pt).

Mentira cochina. Podemos (y mucha gente opina que debemos) usar medidas relativas, pero el tema de la herencia es muy importante en estos casos y... Dejémoslo en que no es newbie-friendly.

Para alinear el texto tenemos a text-align, que puede tomar los valores right (derecha), left (izquierda), center (centrado) o justify (justificado).

A mucha gente le gusta montar Guerras Sagradas acerca de la conveniencia o no de usar texto justificado. Todavía no se han puesto de acuerdo, así que probablemente es un asunto de gustos.

Es muy normal tener una clase así:

.centrar { text-align: center; }

Si queremos indentar los párrafos, pues usamos text-indent:

p { text-indent : 2em; }

¿Qué significa em? Es una unidad relativa. Lo más fácil es trabajar con píxeles o porcentajes, pero en algunos casos conviene utilizar otras unidades. 1 em equivale al tamaño de la fuente.

Bueno, exactamente equivale a la anchura de la letra "M" mayúscula.

Así, si por herencia o por cualquier otra cosa el texto se muestra en un tamaño de fuente diferente, la proporción de indentado sería siempre la misma. Si pusiéramos 20px, siempre sería esa, aunque el tamaño de la fuente fuera de 20 o de 32 píxeles.

También podemos cambiar la decoración del texto mediante text-decoration. Puede tomar diversos valores, como none (sin adornos), underline (subrayado), overline (subrayado superior) o line-through (tachado).

¡Cuidado! Los humanos tenemos la estúpida manía de pensar que cualquier texto subrayado es un enlace.

Si queremos que nuestros links no tengan subrayado, pondremos:

a { text-decoration : none; }

Podemos transformar las mayúsculas y minúsculas con la propiedad text-transform. Si ponemos lowercase, todo se mostrará en minúsculas; con uppercase, en mayúsculas; y con capitalize pondremos una letra capital al principio de cada palabra.

En cuanto al espaciado, para la distancia entre palabras usamos word-spacing; para el de las letras, letter-spacing; y para el interlineado, line-height.

Un ejemplo con todo esto, para la etiqueta <strong>:

strong {
    color: #000;
    letter-spacing: 0.25 em;
    text-trasform: uppercase;
}

¿Demasiada información? Sí, pero ten en cuenta que no hay que memorizar todo esto. Ni de coña. Lo importante es saber que existe una propiedad que hace tal cosa, no cómo se llama ni qué parámetros tiene. Para eso ya están las guías de referencia rápida y los editores de CSS.

 

Información adicional

Contenido publicado bajo licencia Creative Commons. Belén Albeza (BenKo)

Si tienes alguna pregunta de este ejemplo; puedes hacerla aqui en los foros.