En este capítulo examinaremos las propiedades más básicas para controlar la apariencia de un documento HTML. Estas propiedades corresponden aproximadamente a lo que que en un procesador de textos tradicional se conoce como formato de caracteres, formato de párrafos y formato de página.

Dividiremos el capítulo en los siguientes apartados:

1. Propiedades relacionadas con la fuente

• Las indicaciones básicas para controlar el formato de los caracteres se localizan en las propiedades relacionadas con las fuentes. Son las siguientes:
  1. font-family
  2. font-size
  3. font-style
  4. font-weight
  5. font-variant
• Estas especificaciones sobre la fuente se pueden aplicar a cualquier porción de texto de un documento HTML: títulos, texto plano, tablas, pies, etc.

La propiedad font-family

• font-family permite seleccionar la fuente de caracteres que utilizará el navegador del usuario remoto para presentar la etiqueta correspondiente.
• las fuentes más habituales son: Arial, Arial Black, Arial Narrow, Courier New, Georgia, Impact, Tahoma, Times New Roman, Verdana, etc.
• Las fuentes se agrupan en familias o tipos. Hay cinco familias genéricas:
  1. Serif (por ejemplo, Times)
  2. Sans-serif (por ejemplo, Helvetica)
  3. Cursive (por ejemplo, Zapf-chancery)
  4. Fantasy (por ejemplo, Western)
  5. Monospace (por ejemplo, Courier)
• La sintaxis para esta propiedad es la ya conocida; por ejemplo: font-family:arial;.
• Si el ordenador remoto no dispusiera de la fuente especificada, utilizaría la que tiene predefinida por defecto.
• Para evitar esa posibilidad, se puedem especificar varias fuentes: si el ordenador remoto no tuviera la primera, probaría con la segunda, etc. Las distintas fuentes se colocan entre comas. Por ejemplo: font-family:tahoma,verdana;.
• Si la fuente especificada tiene espacios en blanco, debe colocarse entre comillas. Por ejemplo: font-family:"times new roman";.

La propiedad font-size

• font-size permite especificar el tamaño de la fuente.
• Hay diversas maneras de indicar los tamaños.¹ La básica es por píxeles.
• También hay una serie de valores predefinidos: xx-small, x-small, small, medium, large, x-large y xx-large.
• La sintaxis es la siguiente: font-size:20px; especifica, por ejemplo, un tamaño de 20 píxeles. (La letra de este documento tiene 15 píxeles.)

La propiedad font-style

• font-style permite especificar el estilo de la fuente.
• Los estilos posibles son tres:
  1. normal
  2. italic, es decir, cursiva.
  3. oblique, es decir, otro formato de cursiva.
• La sintaxis es la conocida. Por ejemplo font-size:italic;.
• No hace falta especificar font-size:normal;, puesto que se asume por defecto.

La propiedad font-weight

• font-weight permite especificar el peso de la fuente. Cuanto mayor sea su valor, más rellenos se verán los caracteres.
• Los valores que puede adoptar esta propiedad son los siguientes:
  1. normal
  2. bold, es decir, negrita.
  3. bolder, es decir, una negrita aún más gruesa.
  4. lighter, es decir, unos caracteres más adelgazados.
  5. Un valor numérico: 100, 200, 300, 400, 500, 600, 700, 800, 900.
• No es fácil distinguir visualmente entre todas estas especificaciones. La distinción básica es, por supuesto, normal/negrita.
• La sintaxis es la habitual. Por ejemplo: font-weight:bold;.

La propiedad font-variant

• font-variant especifica si los caracteres en mayúsculas se muestran en tamaño normal o más pequeñas (algo parecido a las versales).
• Los dos valores que puede adoptar esta propiedad son, por tanto, los siguientes:
  1. normal
  2. small-caps
• La sintaxis es la habitual. Por ejemplo: font-variant:small-caps;.

Aplicación de las propiedades de fuente

• Todas estas propiedades de fuente pueden combinarse en reglas de definición de estilos. Por ejemplo, éstas para los títulos H1 y H2:

inicio

2. Propiedades relacionadas con el texto

• Hay una serie instrucciones de formato de texto asociadas a otras propiedades. La propiedad básica es text, pero hay más. Examinaremos las siguientes:
  1. color
  2. letter-spacing
  3. word-spacing
  4. text-decoration
  5. text-transform
  6. text-align
  7. text-indent
  8. line-height

El color de fuente

• La propiedad de color puede aplicarse a cualquier elemento textual de un documento HTML. (Por ejemplo, en el capítulo anterior la habíamos aplicado a las etiquetas H1 y H2.)
• El color se puede expresar de dos maneras: con valores hexadecimales –lo más habitual– o RGB. En ambos casos se trata de expresar las proporciones de tres colores básicos: rojo, verde y azul.
• Los valores hexadecimales de los tres colores se expresan de la siguiente manera:
  1. Rojo: color:#ff0000;
  2. Verde: color:#00ff00;
  3. Azul: color:#0000ff;
• Los mismos colores, expresados con los valores RGB (red, green, blue), son los siguientes:
  1. Rojo: color:rgb(255,0,0);
  2. Verde: color:rgb(0,255,0);
  3. Azul: color:rgb(0,0,255);
• Todos los colores se expresan mediante combinaciones de estos tres colores básicos. Existen muchos programas que proporcionan los valores de todos los colores que el usuario puede componer. También en internet existen muchas páginas con los Códigos de colores.
• Los colores más básicos o habituales pueden expresarse directamente. Por ejemplo, color:red;.²

Espaciado de caracteres y de palabras

• La propiedad letter-spacing permite controlar el espaciado entre los caracteres.
• El valor del espaciado se puede expresar, como en otras ocasiones, en distintas unidades de medida. Nosotros seguimos utilizando los píxeles.
• También puede explicitarse el valor letter-spacing:normal;.
• La propiedad word-spacing es exactamente igual, pero afecta al espaciado entre las palabras.

La decoración del texto

• text-decoration permite que el texto aparezca subrayado de tres maneras distintas. Por tanto, los valores de la propiedad son cuatro:
  1. Sin subrayado (la opción por defecto): text-decoration:none;³
  2. Subrayado simple: text-decoration:underline
  3. Subrayado superior: text-decoration:overline
  4. Tachado: text-decoration:line-trough

La transformación del texto

• La propiedad text-transform permite transformar las minúsculas y mayúsculas del texto.
• Los atributos de la propiedad son los siguientes:
  1. none: no provoca cambios en el texto
  2. uppercase: presenta en mayúsculas todas las letras del texto
  3. capitalize: presenta en mayúsculas la primera letra de cada palabra
  4. lowercase: presenta en minúsculas todas las letras del texto

El alineamiento del texto

• La propiedad text-align permite alinear el texto de un párrafo.
• Los atributos de la propiedad expresan claramente las cuatro posibles maneras de alinear un párrafo:
  1. Alineado a la izquierda: text-align:left. Es la opción por defecto.
  2. Alineado a la derecha: text-align:right
  3. Centrado: text-align:center
  4. Justificado: text-align:justify

El sangrado del texto

• La propiedad text-indent controla el sangrado de la primera línea de cada párrafo.
• El valor de la sangría se puede medir en píxeles y en valor porcentual.
• El valor puede ser negativo, para realizar la denominada sangría francesa.
• Por ejemplo, la instrucción text-indent:15px; indica que la primera línea del párrafo tiene un sangrado a la derecha de 15 píxeles.

El espaciado interlineal

• La propiedad line-height controla el espaciado interlineal, es decir, la separación vertical entre las líneas de una párrafo.
• Los valores de la propiedad pueden especificarse de la siguiente manera:
  1. Espaciado normal (por defecto): line-height:normal.
  2. Numérico (line-height:10px, por ejemplo).
  3. Porcentual con respecto al tamaño de la letra (line-height:120%, por ejemplo)

inicio

3. Propiedades relacionadas con el fondo

• La propiedad background controla el fondo de una etiqueta HTML.
• Según la etiqueta a la que se aplica, puede afectar a distintas porciones del documento:
  1. Si se aplica a etiquetas como <P>, <H1>, etc., afecta al fondo de los párrafos correspondientes.
  2. Si se aplica a la etiqueta <BODY>, afecta a todo el documento.
• La aplicación más potente corresponde, lógicamente, al fondo de todo el documento. En las líneas siguientes, asumiremos esta aplicación.
• Los ajustes que permite la propiedad background son los siguientes:
  1. background-color
  2. background-image
  3. background-repeat
  4. background-position
  5. background-attachment
• Para asignar un color de fondo a un documento, la sintaxis es la habitual. Por ejemplo: background-color:##EFFBFB;.
• En lugar de utilizar un color plano, a veces es preferible colocar una imagen como tapiz de fondo. Para ello se emplea la propiedad background-image:url(imagen.jpg);, donde (imagen.jpg) expresa el archivo utilizado como fondo (con su correspondiente path, caso de ser necesario).⁴
• Muy probablemente, el tamaño de la imagen utilizada como fondo será inferior al de la pantalla del navegador. En ese caso, se asume por defecto la opción background-repeat:repeat, que repite la imagen hasta rellenar la pantalla. Pero esta propiedad tiene otras posibilidades:
  1. background-repeat:repeat-x: coloca la imagen a lo largo del eje horizontal de la pantalla.
  2. background-repeat:repeat-y: coloca la imagen a lo largo del eje vertical de la pantalla.
  3. background-repeat:no-repeat: coloca la imagen una sola vez, con su tamaño real.
• En el caso de que queramos colocar la imagen de fondo una sola vez, podemos también especificar el lugar de la pantalla donde queremos que se muestre por medio de la propiedad background-position, que dispone de las siguientes posibilidades:
  1. background-position:top left (la opción asumida por defecto).
  2. background-position:top center
  3. background-position:top right
  4. background-position:center left
  5. background-position:center center
  6. background-position:center right
  7. background-position:bottom left
  8. background-position:bottom center
  9. background-position:bottom right
  10. background-position:x-pos y-pos, donde x-pos e y-pos expresan los pixeles de separación de la imagen con respecto a los dos ejes. Por ejemplo, background-position:200px 600px; coloca la imagen de fondo 200 píxeles desde la derecha y 600 píxeles desde arriba.
  11. background-position:x-% y-%, donce se expresa lo mismo que en la opción anterior pero con valores porcentuales.
• Si colocamos una imagen de fondo sin repetición, que ocupa un pequeña porción de la pantalla, podemos hacer que permanezca fijada en su posición inicial, o bien que se desplace al mismo tiempo que el scroll general del documento. Para ello utilizaremos la propiedad background-attachment, con sus dos posibilidades:
  1. background-attachment:fixed, que deja la imagen fija.
  2. background-attachment:scroll, que mueve la imagen junto con el scroll del documento.

inicio

4. Propiedades relacionadas con la caja

• Todos los contenidos de una etiqueta HTML quedan delimitados por una caja, que habitualmente no se ve.
• Esta caja viene definida por tres elementos:
  1. Margen (margin): espacio desde el exterior de la caja hasta el límite de la pantalla.
  2. Borde (border): recuadro de grosor variable que limita el contenido de la etiqueta.
  3. Relleno o acolchado (padding): espacio desde el contenido de la etiqueta hasta su borde.
• Como en el caso del fondo, dependiendo de las etiqueta a las que se aplican estas tres propiedades, pueden afectar a distintas porciones del documento:
  1. Si se aplican a etiquetas como <P>, <H1>, etc., afectan a la caja de los párrafos correspondientes.
  2. Si se aplican a la etiqueta <BODY>, afectan a todo el documento.
• Margin, border y padding son propiedades incluyentes: la segunda incluye a la primera, y la tercera incluye a las dos. Esta relación se muestra en el siguiente gráfico:

Los márgenes

• Podemos ajustar las distancia de un elemento HTML (un párrafo, por ejemplo) con respecto a los elementos contiguos en las cuatro direcciones. O también, por supuesto, de todo el documento con respecto a la ventana.
• Los ajustes posibles, son los siguientes:
  1. margin-left
  2. margin-right
  3. margin-top
  4. margin-botton
• Como siempre, las medidas pueden expresarse de distintas maneras. Nosotros vamos a seguir utilizando los píxeles.
• Una indicación como margin:15px; colocaría esa medida en los cuatro márgenes.
• El siguiente ejemplo muestra un diseño de párrado justificado, con sangría de primera línea y una determinada distancia entre los párrafos:

Los bordes

• En realidad, todo elemento de HTML queda contenido dentro de una caja. (Esta característica de HTML se observa muy bien al utilizar la propiedad background:color.)
• CSS permite controlar las características de esta especie de celda, o lo que es lo mismo, de las líneas que la definen. Sus propiedades básicas son:
  1. El grosor de la línea: border-width. Puede especificarse en píxeles y también con tres valores generales: delgado (thin ), mediano (medium) y grueso (thick).
  2. El estilo de la línea: border-style. Contiene las siguientes especificaciones: none – dotted – dashed – solid – double – groove – ridge – inset – outset.
  3. El color de la línea: border-color, que se especifica de la manera indicada en el capítulo anterior: hexadecimal o RGB.
• CSS permite definir de manera independiente los cuatro bordes del recuadro. Para ello, en lugar de la propiedad general border, hay que utilizar las cuatro específicas: border-left, border-right, border-top y border-bottom.
• Por tanto, las posibles especificaciones de esta propiedad son el resultado de la combinatoria de los cinco bordes (superior, inferior, izquierdo, derecho y general) con las tres especificaciones (width, style y color).
• La sintaxis es la habitual. Veamos el siguiente ejemplo, en el que se define un título con cuatro bordes distintos:

El acolchado

• El acolchado o almohadillado (habitualmente denominado con el término inglés de padding) es el espacio de relleno que hay entre el contenido de una etiqueta y el margen virtual que lo contiene (border).
• Como en el caso anterior, CSS permite controlar independientemente los cuatro lados del acolchado: padding-left, padding-right, padding-top y padding-bottom.
• Los valores se especifican, como siempre, en píxeles.
• Una indicación como padding:5px 30px; aplica un relleno de 5 píxeles a los espacios superior e inferior, y 30 píxeles a derecha e izquierda.

inicio

Notas

inicio