Titulo Largo Artículo 1.7. Diseño y creación de sedes web con CSS Titulo Corto Artículo 1.7 Autor David Maniega Palabras clave Descripcion Objetivos Contenidos Actividades Evaluacion

Introducción

En la unidad sobre creación de páginas web con estándares, xhtml y css, ya comentamos la importancia de separar el contenido (semántica) del formato visual (estilo) que éste ha de tener cuando se presenta a través de un agente de usuario como pueda ser un nevagador web, una pda o cualquier otro dispositivo. Esta importancia radica en la capacidad de poder actuar de forma independiente del dispositivo y poder así presentarlo de forma adecuada para cada una de las necesidades. Por ejemplo, si separamos la estructura del fomato de nuestros contenidos podremos crear un estilo específico para la impresora.

¿Quién no se ha encontrado en más de una ocasión con que al imprimir una página web parte de los contenidos han quedado fuera del área de impresión? Esto es muy habitual cuando los márgenes establecidos en la propia página no se pueden adecuar a los del formato de impresión de forma automática. Una manera simple de solucionar esto es mantener dos estilos diferentes asociados al mismo contenido, uno para su presentación por pantalla y otro para su impresión directa en papel, donde podemos eliminar algunos elementos no necesarios y optimizar los resultados dando mayor importancia a los contenidos.

Veamos un ejemplo de un artículo de un periódico, donde lo que nos interesa principalmente cuando imprimimos una noticia es precisamente el propio contenido y no su estética por pantalla, ya que cumplen funciones diferentes.

Figura 1. Captura de un artículo desde el navegador

Figura 2. Pantalla optimizada para impresión

¿Qué son las hojas de estilo CSS?

Las hojas de estilo, conocidas como CSS ( Cascading Style Sheet ), son un conjunto de instrucciones, llamadas reglas, que definen la apariencia de diferentes elementos de un documento XHTML. En otras palabras, son plantillas que permiten cambiar el formato de presentación de cualquier etiqueta de XHTML. Por ejemplo, con ellas podemos definir el tamaño de una fuente determinada o el color y el estilo asignados a un párrafo de texto concreto o global. Esto se hace posible gracias a la definición de propiedades de estilo y su aplicación dentro de los documentos.

En definitiva, las hojas de estilo proporcionan un mayor control sobre la apariencia física de una página web, y facilitan la tarea de creación y diseño de contenidos en web permitiéndonos crear estructuras completas, ya sea en una sola página o en un sitio web global.

Elementos básicos de las hojas de estilo

Como hemos indicado las hojas de estilo son una serie de reglas que sirven para aplicar estilo a las diferentes etiquetas del lenguaje XHTML, pero hemos de saber de qué elementos están formadas para poder extraer su máximo potencial.

Las reglas de estilo están formadas por tres elementos clave:

- Selector : le dice al agente de usuario (navegador) la etiqueta o parte del documento que se verá afectada por sus reglas. Las reglas de estilo van encerradas entre llaves { }.

- Propiedad : es el elemento encargado de especificar qué aspecto va a definir o modificarse. Para separar el nombre de la propiedad y el valor se han de incluir siempre los dos puntos :.

- Valor : es el contenido de la propiedad para darle significado. Para marcar la finalización del valor de la popiedad hay que poner siempre punto y coma ;.

Un aspecto importante que debemos recordar es que la suma de propiedad + valor forma lo que se llama una declaración de estilo . En el siguiente gráfico lo veremos con mayor claridad.

Nota importante: es fácil trasladar la manera de hacer de xhtml a las hojas de estilo, de forma que como estamos acostumbrados a poner comillas en las cadenas atributo="valor", normalmente al inicio tendemos a poner esta misma definición en las hojas de estilo, con lo que simplemente no tendrán el efecto esperado porque el sistema no lo comprenderá.

Por ejemplo:

<p align="right">.....</p> para xhtml (es un atributo)

p { text-align="right"; } INCORRECTO para CSS (es una propiedad)

p { text-align: right; } CORRECTO para CSS (es una propiedad)

Con esto queremos hacer énfasis en que nunca tendremos en nuestra hoja de estilo ni un igual = ni comillas dobles "" . Únicamente existe una excepción sobre el uso de comillas, y es cuando determinamos una familia de fuente cuyo nombre está compuesto por dos o más palabras, pero eso ya lo veremos más adelante cuando hablemos de las fuentes.

¿Cómo aplicar hojas de estilo?

Tenemos tres maneras diferentes de incluir propiedades de estilo dentro de nuestros documentos:

1. Dentro de una etiqueta XHTML mediante el atributo "style", es lo que se llama estilo en línea. <h1 style="font-size:2em;">Título</h1>

2. En la cabecera de cada documento XHTML, donde se definen todos los estilos de la página. Para ello utilizaremos la etiqueta <style> todos los estilos </style>. A este método se le conoce como estilo interno . Este método, aunque es igualmente válido, es menos efectivo si en un momento dado se requiere el cambio de algún valor dentro de un atributo concreto y que esté repetido en diversos documentos, ya que de esta forma deberemos aplicar los cambios uno por uno, igual que en el caso anterior. <style type="text/css">body { background-color:#ccdd00; } h1 { font-face:arial, verdana,sans-serif; font-size: 2em; } </style>

3. En un fichero de estilos externo que vincularemos desde todas nuestras páginas dentro de la cabecera (<head></head>) de los mismos. Este fichero es en texto plano igual que los documentos xhtml y tiene por extensión para su reconocimiento .css. Este método se conoce como estilo externo y nos permite vincular dentro de cada documento uno o más ficheros CSS. Es el sistema más utilizado y que mayor flexibilidad aporta a la hora de poder hacer cambios globales de estilo. Por ejemplo, si se desea en algún momento cambiar un atributo que es aplicado a varios documentos, no hará falta editar cada documento para modificar aquella característica concreta, sino que realizando las modificaciones en la hoja de estilo los cambios se efectúan automáticamente en todos los documentos afectados por nuestra hoja de estilo, pensemos por un momento en un sitio web con más de 200 páginas en el que se quiera cambiar el color corporativo porque la marca ha evolucionado..., si hay que editar esas 200 páginas tenemos mucho trabajo que hacer, con el consecuente riesgo de equivocarnos en alguna definición. <head> ........ <link rel="stylesheet" type="text/css" href="mi_fichero_de_estilo.css" /> </head>

Perfecto, y ¿cómo puedo formar las declaraciones de estilo?

Dentro del código XHTML que se utiliza para la creación de documentos digitales encontramos diferentes etiquetas y atributos propios del lenguaje. Mediante las hojas de estilo se puede proporcionar un estilo concreto y predefinido para cada etiqueta, pudiendo de esta forma ahorrar tiempo en la escritura de etiquetas al omitir los atributos de estilo que residirán en la definición CSS, siendo además aplicado de forma automática cada vez que se utilice esa etiqueta dentro del documento.

Este método de estilo sirve para determinar estilos por defecto para las etiquetas propias de xhtml. Por ejemplo, si para designar los títulos de cada página se va a utilizar la etiqueta <h1> y su correspondiente </h1>, se pueden definir una serie de valores que se apliquen al estilo de dicha etiqueta.

Si el código para hacer que los títulos sean de color azul, subrayado y con el aspecto concreto de h1 (encabezamiento - negrilla y de tamaño superior al estándar), se debería aplicar a cada título de cada documento la siguiente secuencia de etiquetas:

<h1><font color="blue"><u>Título del documento</u></font></h1>

Como vemos hemos utilizado la desfasada etiqueta FONT para incluir el color y la desaconsejada U para subrayarlo. Con una definición de hoja de estilo para la etiqueta h1 se simplifica el proceso y se vuelve estándar al separar el significado de la etiqueta pura de xhtml de su apariencia física de la siguiente forma:

h1 { color:blue; text-decoration:underline; }

De esta forma, cuando en el documento se incluya la etiqueta <h1> para especificar un encabezamiento, ya se aplicarán automáticamente los atributos de estilo predefinidos sin tener que incorporar ninguna otra etiqueta anexa.

Como hemos podido ver, las especificaciones de CSS permiten crear en una hoja de estilo varios estilos distintos para diferentes elementos, pero a veces nos conviene para esos mismos elementos asignar diferentes propiedades de estilo. Eso lo podremos hacer mediante el uso de lo que se conoce como clases y selectores id o identificadores.

El uso de las clases (class)

Una clase la podemos definir como una de las maneras posibles de agrupar una serie de propiedades para posteriormente aplicarlas a un elemento específico o a varios con el fin de modificar su aspecto. Las clases nos permiten "romper" la herencia dada por un elemento padre o las propiedades asignadas de forma genérica para una etiqueta xhtml definida anteriormente en la misma hoja de estilo.

Por ejemplo, si hemos definido una serie de propiedades para los elementos table, tr y td (una tabla) de forma genérica para todas las tablas que tengamos en nuestras páginas pero necesitamos en un momento determinado modificar el aspecto de una celda concreta, esto lo deberemos hacer asignándole una clase de estilo específico para ella.

Para definir las clases en nuestra hoja de estilo tendremos que utilizar el siguiente formato:

punto + nombre de la clase { propiedades }

.nombre_de_clase { propiedades }

De esta forma hemos definido una clase con unas propiedades específicas que no entrará en juego hasta que sea llamada desde alguna etiqueta xhtml de nuestros documentos. Para establecer esta llamada desde la página web debemos utilizar el atributo class="nombre_de_la_clase" .

Veamos un ejemplo de asignación en nuestra CSS:

td { font-family:Arial; font-size:10pt; }

td.azul { font-family:Arial; font-size:8pt; background-color:blue; }

Como podemos ver, todas las celdas de las tablas del documento por defecto tendrán una tipografía Arial 10 puntos, pero si en algún momento se desea aplicar un estilo diferente, como pueda ser una celda azul y con un tamaño de letra de 8 puntos, es donde entraría en acción la clase .azul asociada a la etiqueta td.

Para definir dentro del documento la clase específica se debe hacer con la siguiente sintaxis: <td class="azul">

Es importante tener en cuenta un par de aspectos clave a la hora de designar clases a nuestras etiquetas o elementos. No podemos invocar a dos clases diferentes en una misma etiqueta ya que es una acción ilegal:

<p class="verde" class="azul">...</p>

El segundo aspecto que debemos tener en cuenta, es que podemos crear una clase asociada al uso por parte de una etiqueta concreta o bien dejarla "libre" (sin asociación directa) para que pueda ser aplicable a todas las etiquetas que queramos. Veamos un ejemplo de esto:

.verde { font-color:green; font-weight:bold; } // Esta clase está libre, esperando a ser utilizada para cualquier elemento de la página.

p.verde { font-color:green; font-weight:bold; } // Esta clase sólamente puede ser utilizada para el elemento p y no otro.

El uso de los selectores ID

Los selectores ID funcionan de forma muy similar a las clases de estilo, de hecho la única cuestión que los diferencia es a nivel formal, ya que los selectores ID están pensados para agrupar propiedades que se referirán a los elementos pero de forma exclusiva y única . Esto quiere decir que sólamente podremos tener en nuestros documentos una única llamada a un selector ID determinado, de forma que no pueden ser reutilizados dentro de un mismo documento como podemos hacer con las clases.

Los selectores ID nos permiten identificar elementos únicos en la página, por ejemplo, para designar un menú de navegación, una caja de contenidos, un pie de página, etc., de forma que cumplan con las necesidades específicas para cada uno de estos elementos de forma no repetida en la página o documento.

Para definir los selectores ID en nuestra hoja de estilo tendremos que utilizar el siguiente formato:

almohadilla + nombre del selector { propiedades }

#nombre_del_selector { propiedades }

De igual manera que sucede con las clases, los selectores ID no entran en juego hasta que sea llamado desde alguna etiqueta xhtml de nuestros documentos. Para establecer esta llamada desde la página web debemos utilizar el atributo id="nombre_del_selector" .

Veamos un ejemplo de asignación en nuestra CSS:

#menu { font-family:Arial; font-size:0.9em; background-color: #ffccdd; }

En nuestro documento sólo podremos tener presente una llamada a este selector de la siguiente forma:

<div id="menu">.....</div>

Poniendo un poco de orden

A la hora de crear nuestras hojas de estilo conviene observar una serie de recomendaciones clave para ordenar las diferentes declaraciones de estilo. De esta forma mantendremos la coherencia formal y funcional de nuestra hoja de estilos y será mucho más fácil identificar cada uno de sus componentes para poder actuar sobre ellos en cualquier momento.

La recomendación es especificar los estilos bajo la siguiente ordenación:

1. Las etiquetas de xhtml : definimos primero los estilos que afectarán a las etiquetas de forma genéricas, es decir, para todas las etiquetas que utilicemos en nuestras páginas. No se suelen especificar estilos para todas ya que no siempre vamos a modificar la representación de todas las etiquetas. Siempre deberemos contar eso sí, con especificaciones para las etiquetas body, h1, y a , por ser estas generales en todas nuestras páginas, pero podemos incluir definiciones para todas las que queramos claro, siempre teniendo en cuenta que tendrán efectos globales.

2. Identificadores , teniendo presente que sólo podrán estar presentes una única vez en cada página, son exclusivos y no repetibles en la misma página.

3. Clases , que como serán por lo general bastantes más que los identificadores o etiquetas es conveniente disponerlos en orden alfabético o agrupados por su función.

A la hora de definir los diferentes elementos que formarán parte de nuestra hoja de estilos, conviene tener presente que lo ideal es asignar nombres a los identificadores y a las clases lo más claros posible para poder tener un modelo mental de su representación. Pensemos que mientras estemos haciendo nuestras páginas es fácil recordar esos nombres y su función pero pasado un cierto tiempo eso ya no es tan evidente, y no es cuestión de tener una guía de uso del significado de cada propiedad de estilo.

Estos nombres pueden ser alfanuméricos pero no pueden ser sólo números, deben ir en minúscula, preferiblemente sin acentos y no pueden tener espacios si son nombres compuestos, por lo que se recomienda utilizar el guión bajo para unir dos palabras, por ejemplo: .vinculo_cabecera {} .

En nuestro código de estilos podemos, al igual que en xhtml, incluir líneas de comentario para especificar notas al código generado. Para ello utilizaremos la siguiente sintaxis:

/* esto es un comentario */

¿Qué quiere decir cascading ?

Si miramos lo que significan las siglas CSS veremos que el primer concepto nos habla de cascading , que está íntimamente relacionado con la herencia . De esta forma, y simplificándolo mucho, diremos que los elementos descendiente (hijos) heredan las propiedades de los ascendentes (padres), manteniendo el orden de jerarquía de las etiquetas del lenguaje xhtml. Siendo así tenemos a body como etiqueta padre ya que es la que engloba al resto de etiquetas que proporcionan estructura al documento, posteriormente las etiquetas de bloque (p, div,h(n)...) y posteriormente las etiquetas de elementos en línea (em,strong,span,a...).

Por ejemplo, si establecemos unas reglas para la etiqueta o elemento ul , sus hijos li también arrastrarán las mismas reglas por defecto. De todas formas podemos variar este comportamiento en cualquier momento si especificamos reglas específicas para los hijos.

El concepto de herencia sin embargo no se aplica a la manera en que se integran e interpretan las propiedades de estilo desntro de una página. Así, y por orden de cascada, primero se interpretarán las reglas de una hoja de estilo externa vinculada a la página, posteriormente las reglas definidad en la cabecera del documento y por último las reglas en línea, de forma que si en este último estadio existe una definición de propiedad para un elemento que también está definido en un elemento superior, tendrá mayor importancia la declarada en última instancia en el estilo en línea.

El elemento pseudoclase

Dentro del lenguaje xhtml podemo encontrarnos con etiquetas que tienen asociadas una serie de características intrísecas para su representación y estado. Es lo que tenemos definido para la etiqueta o elemento a (enlaces). Estas pseudoclases definen para los enlaces una serie de estados sobre los que podremos aplicar unas propiedades de estilo, estos son y por este orden para que se puedan aplicar correctamente:

- a:link , estado de reposo del enlace- a:visited , estado en que el enlace ya ha sido visitado- a:hover , estado de salto o variabilidad cuando situamos el ratón sobre el enlace- a:active , estado momentáneo en que un enlace está siendo pinchado para activarse

A cada una de estas pseudoclases les podemos aplicar una serie de reglas de estilo totalmente diferentes para lograr los efectos que las diferencien, por ejemplo:

a:link {color: #ff6600; text-decoration: underline;} a:visited {color: #00ff00; text-decoration: underline; background-color: #ddeedd;} a:hover {color: #cc00dd; text-decoration: none;} a:active {color: #0000cc; text-decoration: underline;}

Estas reglas se aplicarán "en cascada" a todos los enlaces que tengamos en nuestras páginas, pero como a veces puede ser necesario especificar un estilo diferente para otra tipología de enlaces, por ejemplo para crear un menú con listas, podemos utilizar clases dentro de una nueva definición que afecte solamente a los enlaces de dicho menú. Para poder hacer esto hemos de seguir la fórmula: a.nombre_de_clase:pseudoclase { }

a.menu:link {color: #000000; text-decoration: none; background-color: #ffcccc; }

a.menu:visited {color: #000000; text-decoration: none; background-color: #ffcccc; }

a.menu:hover {color: #ffffff; text-decoration: none; background-color: #ddcc66;; }

a.menu:active {color: #000000; text-decoration: none; background-color: #ffcccc; }

Conociendo las propiedades

Una vez que sabemos cómo se forman las propiedades de estilo y cómo podemos afectar a las etiquetas xhtml echemos un vistazo rápido a las principales propiedades de estilo. En la presente unidad vamos a tratar alguna de ellas, pero si se desea conocer a fondo todas las propiedades se debe consultar la especificación del estándar propuesto por el W3C. De todas formas muchos editores incluyen ayudas para crear ficheros de estilo, como es el caso de Nvu, o en su defecto aplicaciones específicas para este cometido mucho más potentes y extensas como pueda ser el caso de TopStyle, con lo que no es necesario memorizar todas las propiedades, sino saber qué posibles valores podemos aplicar.

Propiedades de bloque

Como hemos comentado anteriormente existen una serie de elementos que son considerados por el estándar de xhtml como elementos de bloque. Estos elementos, que tienen la peculiaridad de tener al final de su representación un salto de línea como <p>, <h(n)>, <div>, <hr />, <ul> o <ol> (estos últimos denominados también elementos de lista), están rodeados por un modelo de caja a su alrededor que los encierra, con lo que tienen una serie de propiedades específicas como son:

- margin : márgenes que rodean externamente el bloque- padding : margen interno entre el contenido de este bloque y su perímetro interno- border : perfil que se encuentra entre margin y padding

Estos elementos además tienen una anchura y altura concretas y una alineación que podemos especificar desde las propiedades de estilo. Veamos a través de un cuadro explicativo las propiedades posibles:

Propiedad margin-left margin-right margin-top margin-bottom margin

padding-left padding-right padding-top padding-bottom padding

border-left-width border-right-width border-top-width border-bottom-width border-width

border-style

Valores longitud porcentaje auto

longitud porcentaje

longitudnone solid double inset outset groove ridge

Propiedad border-color width float clearValores none , color longitud

p orcentaje auto

left right none

none left right

both

Para designar las propiedades de margin y padding debemos utilizar alguna fórmula de medida, ya sea esta absoluta, relativa. Para ambos casos existen una serie de medidas que deberemos conocer ya que también se aplicarán a otra propiedades como son las tipografías. Se pueden incluir igualmente medidas de tipo porcentual % que se considera una magnitud de tipo relativo ya que dependerá de diversos factores, como las medidas de la pantalla o los elementos padre si se definen bajo estas mismas características.

Medidas absolutas:

- pt : puntos, unidades más conocidas por su uso en procesadores de texto.- px : píxel, unidad mínima equivalente a un punto.- pc : picas.- in : pulgadas.- mm : milímetros.- cm : centímetros.

Medidas relativas:

- em : unidad relativa que se corresponde con la referencia de la altura de la letra M mayúscula.

- ex : unidad relativa que se corresponde con la referencia de la mitad de la altura de la letra M mayúscula.

Propiedades de color

La propiedad de color hace referencia al color llamado de foreground , es decir, el color de primer plano que está por encima de color de fondo. Básicamente lo podemos asignar al color del texto.

Su definición es la siguiente:

elemento { color:definición del color; }

Por ejemplo:

p { color: red; }

Los colores pueden ser definidos de tres formas diferentes, por su nombre en inglés, hasta un total de 84 colores (red, yellow, green, black...), en su formato hexadecimal #RRGGBB, donde se forman por tres cadenas de pares de valores correspondientes a las gradaciones de los colores Red / Green / Blue, y por último bajo la función rgb(R,G,B), que son los valores decimales de los colores Red, Green y Blue.

Color Blender Esta excelente herramienta nos ayuda a buscar las combinaciones de color adecuadas entre diferentes gamas cromáticas. Nos proporciona los códigos hexadecimales para incluirlos en nuestra hoja de estilos.

Color Scheme Generator

Otra herramienta enfocada a la selección de gamas de colores. Podemos controlar desde la saturación al contraste, todo ello para poder encontrar los colores relacionados adecuados para nuestras páginas.

Propiedades de fondo

El fondo tiene asociadas dos propiedades, background-color (para especificar un color de fondo, no sólo a la página, sino a cualquier elemento, y background-image (para especificar ua imagen de fondo).

Por ejemplo:

body { background-color: #FFFFFF; background-image: url('nombre de la imagen'); }

Fijémonos que en la notación de la imagen interviene el valor url(), que incluye la referencia a la ruta donde tenemos alojada nuestra imagen de fondo, como si fuera equivalente al atributo src del elemento img. Algunos autores desaconsejan el uso de las comillas simples dentro del valor url ya que puede provocar interferencias de interpretación con ciertos navegadores.

Pero el valor de inclusión de una imagen de fondo incluye además otra serie de atributos que hacen que se utilice el método abreviado para designar en una sola propiedad el color y los valores asociados a la imagen separando las propiedades por espacios, es así:

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

Veamos estos parámetros:

- color : definimos nuestro color de fondo como hemos visto.

- imagen : indicamos qué imagen pondremos de fondo: url('fondo.gif').

- repeat : con este valor establecemos si queremos que la imagen se repita o no tanto horizontalmente como verticalmente en toda la página. Si no queremos que se repita especificaremos no-repeat, si queremos que sólo se repita en sentido horizontal especificaremos repeat-x, mientras que si queremos que sólo sea verticalemente especificaremos repeat-y.

- attachment : con este atributo especificamos si la imagen de fondo se quedará fija o si bien se desplazará cuando hagamos scroll (opción por defecto). Si queremos que la imagen se quede fija en el fondo pondremos fixed.

- position : nos sirve para indicar la posición de la imagen de fondo. Tiene utilidad generalmente si nuestra imagen no se va a repetir constantemente. Podemos posicionarla tanto vertical como horizontalmente en base al modelo de coordenadas (x-y). Por defecto la imagen se posiciona en la parte superior izquierda de la página. Podemos variar ese posicionamiento tanto a través de valores exactos (píxeles 100px,50px) o bien "top,bottom,left,right,center", como porcentuales (40%,50%).

Por ejemplo:

body { background: #cccccc url(fondo.gif) repeat-x fixed bottom; }

6.4. Propiedades de fuente

Como es lógico pensar también podemos actuar sobre las propiedades de las fuentes de nuestras páginas, pero hemos de ser cautelosos con esto si quieremos incluir una familia tipográfica que no sea habitual porque no todos los ordenadores vienen por defecto con el mismo juego de tipografías preinstaladas, lo que puede hacer variar mucho el aspecto de nuestras páginas si las realizamos en base a una tipografía muy especial.

Lo más recomendable es el uso de fuentes consideradas estándar en todos los ordenadores, distinguiendo eso sí las agrupaciones de las familias tipográficas. En este sentido, debemos tener presente que las familias conocidas como Serif son más adecuadas para medios impresos ya que son más fáciles de leer que por pantalla, por ejemplo CG Times, Times New Roman, Georgia, etc, mientras que las fuentes de las familias Sans-Serif son más idóneas para su lectura por pantalla, como son Arial, Verdana, Tahoma, etc.

Una gran ventaja que tenemos a la hora de determinar nuestras fuentes, es que no sólo podemos especificar una sola, sino que podemos establecer varias, separadas por comas, de forma que si un ordenador no dispone de la primera fuente asignada intentará presentar el contenido en base a la segunda, y así sucesivamente.

En este sentido es importante determinar siempre como fuente última la familia genérica a la cual pertenece ese juego de tipografías que especifiquemos, por ejemplo:

font-family: arial,verdana,tahoma,sans.serif;

font-family: "CG Times", "Times New Roman", Georgia, serif;

Como podemos ver en el segundo juego de definiciones de tipografías, las que se definen por nombres compuestos han de ir entrecomilladas, esto es obligatorio para poder definir correctamente el nombre de una familia tipográfica compuesta.

La propiedad font es la fórmula reducida para poder especificar las diferentes propiedades de fuente y se corresponde con:

- font-style : estilo de fuente, normal (por defecto), bold (negrilla) e italic (cursiva).

- font-variant : para especificar letras versales, small-caps o normal (por defecto).

- font-weight : para esecificar si estará en negrilla (bold) o no (normal) por defecto. Existen otros valores por defecto en unidades relativas como son bolder | lighter. También se pueden especificar valores numéricos del 100 al 900, donde 100 es un valor ligero y 900 el más pesado.

- font-size : tamaño de la letra. En valores absolutos, relativos o porcentuales. Dentro de los valores absolutos también hay unos determinados de forma genérica como son: xx-small | x-small | small | medium | large | x-large | xx-large.

- font-family : familia tipográfica.

De esta forma, si queremos especificar en una sola designación de estilo las propiedades de la fuente lo podremos hacer de la siguiente forma dejando un espacio entre cada propiedad y por este orden:

font: style | variant | weight | size | family

pudiendo omitir aquella propiedad que no nos interese pero manteniendo en cualquier caso el orden preestablecido, por ejemplo:

font: bold 1em arial, verdana, sans-serif;

Propiedades de texto

También podemos incidir directamente sobre el formato como el texto es presentado a través de diferentes opciones que pasamos a revisar:

- text-decoration : con esta propiedad podemos modificar la decoración o adornos del texto que por defecto es none (sin adornos). Así tenemos: underline (subrayado), overline (línea superior) y line-through (tachado).

- text-indent : sirve para indentar o sangrar un párrafo en su primera línea. Se define una medida de longitud comovalor de indentación.

- text-align : alineamiento del texto. Sus valores posibles son: left (por defecto) | right | center | justify.

- text-transform : lo especificamos para transformar el texto en capitales (letra inicial de cada palabra en capital), mayúsculas o minúsculas independientemente de como esté escrito el texto en la página. Sus valores son: lowercase | uppercase | capitalize.

- line-height : especifica la distancia de interlineado de cada línea de un párrafo, su valor es una medida de longitud. Si queremos modificar el espaciado de las letras (poco recomendable para evitar problemas de legibilidad), podemos utilizar la propiedad letter-spacing cuyo valor es también una medida de longitud.

Por ejemplo:

a:hover { text-decoration: underline; }

p.center { text-align: center; }

p { text-indent: 25px; line-height: 17px; }

Propiedades de listas

Las listas también disponen de unas propiedades específicas que nos ayudan a controlar sus atributos y formatos. Es importante referenciar que las listas son elementos de bloque pero que en cualquier momento podemos transformar en un elemento en línea a través de la propiedad display que ahora veremos, de forma que cada entrada <li> de sitúe en posición horizontal y no vertical como es su definición por defecto. Este efecto resulta extremadamente útil para poder realizar un menú de navegación horizontal sin tener que recurrir a otras medidas que a buen seguro serán poco inteligibles si se desactiba la carga de la hoja de estilos.

- display : propiedad que nos permite variar el elemento de bloque (block, por defecto) a en línea (inline), pero incluye la propiedad list-item para notar su definición a nivel de lista (valor heredado) y none (no mostrará el elemento por pantalla).

- list-style-type : define el elemento decorativo o de ordenación de los valores de la lista. Sus valores son: disc | circle | square | decimal | upper-roman | lower-roman | upper-alpha | lower-alpha.

El editor de CSS de Nvu, CaScadeS

El editor Nvu incluye un editor de hojas de estilo denominado CaScadeS que sirve para definir tanto hojas de estilo internas como externas en base a unas propiedades básicas.

Para iniciar el editor debemos ir al menú Herramientas y seleccionar la opción Editor CSS , de forma que nos aparecerá la siguiente ventana emergente:

El editor nos presenta por defecto el modo de visualización avanzado aunque incluye una opción para principiantes, donde únicamente definimos reglas para los selectores de clase o de etiqueta que deseemos. No permite añadir selectores de tipo ID. Pero recordemos que nuestra hoja de estilo al ser un fichero en formato de texto plano la podemos generar desde el Bloc de notas mismo.

Lo primero que deberemos hacer es crear una hoja de estilo. CaScadeS permite crear una hoja de estilo interna o externa. Nosotros vamos a crearla interna para comenzar a trabajar y generar un primer fichero de estilo. Posteriormente y una vez grabada la podremos importar desde el editor para completarla si fuera necesario.

1. Lo primero que haremos es pinchar sobre el botón <style> 2. En el campo "Lista de medios" pondremos all para poderla aplicar a todos los tipos de

agente de usuario. También pondremos un título a nuestra hoja y pincharemos sobre el botón Crear hoja de estilo .

A partir de este momento lo que necesitamos es ir creando las diferentes reglas de estilo en base a las necesidades de nuestro documento xhtml. Para crear nuevas reglas haremos lo siguiente:

1. Pincharemos sobre el botón Regla del panel izquierdo.2. En la derecha veremos que se nos muestran las opciones posibles para crear reglas.

- estilo con nombre: nos permite crear una clase- estilo aplicado a todos los elementos del tipo: estilos para las etiquetas de xhtml- estilo aplicado a todos los elementos coincidentes con este selector: nos permite crear

selectores de tipo ID (poniendo #nombre_selector), o bien estilos asociados como clase a una etiqueta xhtml (poniendo la etiqueta.nombre_de_clase).

1. Ponemos el nombre de la regla 2. Pinchamos sobre el botón Crear regla de estilo , automáticamente aparecerá en el panel

izquierdo.

Para definir las reglas únicamente tendremos que ir explorando las diferentes pestañas con las opciones de estilo para: Texto, Fondo, Bordes, Caja, Listas, Aural. De esta forma iremos incorporando para cada regla las propiedades de estilo que den formato visual a nuestros elementos de la página.

Si queremos ver las definiciones de una regla previamente creada, seleccionamos la regla del panel de la izquierda y nos posicionamos en la pestaña general para verlas pero sin poderlas modificar desde esta opción.

Una vez creadas las propiedades de estilo, podemos cerrar la ventana del editor de CSS y si accedemos a ver el código de nuestra página desde la pastilla inferior "<> Codigo fuente", veremos cómo tenemos en la cabecera de nuestra páginas las reglas de estilo que hemos creado.

Acto seguido lo más importante será poder grabar estos estilos en una hoja externa para poder

vincularla al resto de páginas una vez hemos obtenido los estilos que deseamos. Para ello abrimos de nuevo el editor CaScadeS y desde la primera pantalla veremos que en panel de la izquierda aparece nuestra hoja de estilo, pinchamos sobre ella y veremos en el panel de la derecha las características generales de la hoja de estilo y el número de reglas que incluye.

Pinchamos sobre el botón Exportar hoja de estilo y cambiar a la versión exportada y nos muestra una ventana flotante donde debemos especificar la ruta donde vamos a almacenar nuestra hoja de estilo, así como especificar el nombre del fichero. Es muy importante poner la extensión de fichero .css .

Ejercicio

Para poder practicar las propiedades de estilo vamos a hacer un sencillo ejercicio para ir teniendo un poco de práctica. Si habéis realizado los ejercicios de la unidad 1.3 incluid una hoja de estilo que defina reglas para diferentes elementos de vuestras páginas "inicio.html" y "curso.html". Debe haber un mínimo de 10 reglas, de las cuales como mínimo 5 deben ser de tipo clase.

En el caso de no haber realizado las prácticas de la unidad 1.3, cread dos páginas web, una llamada "inicio.html" y otra "curso.html" que deberán tener un vínculo entre ellas para poder saltar de una a otra, y en el contenido seguid los requisitos anteriormente expuestos.

Validador del código CSS del W3C Es muy importante que siempre validemos nuestros ficheros de estilo de la misma forma que hacemos con las páginas web con las etiquetas de la estructura de las páginas, de esta forma sabremos si hacemos bien las cosas y

Bibliografía

- Skuer, un buscador específico de código CSS ( http://skuer.com/ )- Introducción a CSS ( http://librosweb.es/css/index.html )- Livingston, Dan & Micah Brown. Essential CSS & DHTML for web professionals. Upper

Saddle River (N.J.) : Prentice Hall PTR, cop. 1999- Manual de CSS ( http://www.manualdecss.com/ )- Guía de hojas de estilo en cascada ( http://www.htmlhelp.com/es/reference/css/ )- DesarrolloWeb.com: CSS, hojas de estilo ( http://www.desarrolloweb.com/manuales/2/ )