|
||||
|
|
|
|
|
|
|
|||
|
|
|||
|
||||
Home - HTML - Texto en HTML - 1 - 2 - 3 - 4 - 5 - 6 - 7- 8 - 9 - 10 - 11 - 12
Texto en HTML (VIII)
por Luciano Moreno, del departamento de diseño web de BJS Software.
FORMATEO DE TEXTO MEDIANTE HOJAS DE ESTILOS EN CASCADA.-
Hasta hace relativamente poco tiempo las únicas herramientas de las que disponíamos para formatear nuestro texto en HTML eran las estudiadas anteriormente. Con este conjunto de herramientas podíamos conseguir de una forma general obtener el resultado deseado, pero en muchas ocasiones no eran suficientes para nuestros deseos.
Con la aparición y puesta en uso de las Hojas de Estilos en Cascada (CSS) disponemos de una herramienta potente y versatil para trabajar con textos en HTML, hasta el punto que el W3C recomienda constantemente su uso, llegando al extremo de desaconsejar gran parte de las etiquetas estandar de HTMl en favor de las Hojas de Estilos.
Mediante esta técnica, perfectamente implementada en Internet Explorer 4 y superiores y en Nestcape Navigator 6x, y parcialmente en Nestcape Navigator 4x, podemos tener un control casi total sobre el texto de nuestro documento, mediante unas sencillas reglas de construcción y uso, que simplifican notablemente nuestro trabajo.
No es el objetivo de este capítulo un estudio exaustivo del estandar CSS, que ya va por su versión 2, si no el estudio de cómo podemos formatear el texto en HTML, por lo que vamos a ver sólo aquellas partes de CSS que nos facilitan esta tarea.
Uso general de las Hojas de Estilos.-
La misión basica de las Hojas de Estilos es definir bloques o porciones de texto en nuestra página que van a tener unas propiedades de estilo de texto determinadas. Mediante el uso de la sintaxis propia de CSS podemos establecer o fijar cada una de las propiedades de formato que debe tener cada una de estas porciones de texto.
La asignación de un determinado estilo se puede hacer de diversas formas:
parrafo con estilo en línea
<HTML>
<HEAD>
<STYLE TYPE="text/css">
.cabecera{ font-size:15px; font-family:Verdana; font-weight:bold;}
</STYLE>
</HEAD>
<BODY>
<SPAN CLASS="cabecera">Este texto es de la clase cabecera</SPAN>
</BODY>
</HTML>
que nos da:
Este texto es de la clase cabecera
En este código lo primero que hacemos es definir en la cabeza de nuestra página una clase de estilo, dentro de las etiquetas STYLE, que llamamos cabecera, y que indicamos que es una clase mediante la colocación de un punto delante del nombre. Esta clase de estilo la definimos como de texto de tamaño 15 pixels, de fuente tipo Verdana y de peso bold (negrita). Posteriormente, en el cuerpo de la página, asignamos a un bloque SPAN esta clase de estilo, mediante el uso del atributo CLASS, por lo que todo el texto contenido en este bloque se mostrara con las características de estilo de la clase cabecera.
Otra forma de asignar estilos en la cabeza de la página es mediante el uso del atributo ID.
En esta forma, definimos, dentro del HEAD de la página y dentro de las etiquetas STYLE,
un estilo de formato de texto mediante la sintaxis #nombre{atributos de estilo}, y luego en
el BODY, y mediante el atributo ID="nombre", asignamos a un bloque el estilo así definido.
Por ejemplo:
<HTML>
<HEAD>
<STYLE TYPE="text/css">
#cabecera{ font-size:15px; font-family:Verdana; font-weight:bold;}
</STYLE>
</HEAD>
<BODY>
<DIV ID="cabecera">Este texto es de la clase cabecera</DIV>
</BODY>
</HTML>
que nos da:
Este texto es de la clase cabecera
con lo que obtenemos un resultado en todo analogo al obtenido mediante la definición de una clase con CLASS, siendo la única diferencia entre ellas (aunque muy importante) a nivel conceptual: mientras que una clase puede ser usada por todos los bloques que deseemos, un identificador ID sólo puede ser asignado a un único bloque, al que a partir de ese momento podemos referirnos en cualquier momento mediante su nombre identificador. Esto es de especial importancia a la hora del tratamiento del bloque mediante HTML Dinamico o JavaScript.
Una vez establecidas una serie de clases de estilo o de identificadores de bloque podemos sacar estos fuera de la cabeza de la página y llevarlos a un fichero aparte, externo. Entonces, para poder usar en nuestra página los estilos en él definidos debemos vincularlo a la misma, lo que se consigue introduciendo en la cabeza de nuestra página la instrucción:
<LINK REL="stylesheet" TYPE="text/css" HREF="ruta fichero">
Las ventajas que este uso supone son enormes, ya que mediante su uso podemos establecer en un sólo fichero el estilo general que van a tener todas las páginas que formen nuestro sitio web, con tan sólo hacer referencia al fichero externo al comienzo de cada página y asignando luego la clase que deseemos a cada bloque la página. Si posteriormente deseamos cambiar un estilo determinado o parte de él no necesitaremos editar cada una de las páginas de nuestro sitio, si no que bastara con cambiar el estilo deseado en el fichero de estilos externo.
El fichero de estilos externo debe contener tan sólo las definiciones de las clases y de los identificadores, en formato de texto plano, y se deben guardar con la extensión .css.
Por ejemplo, un fichero de estilos externo, llamado estilos1.css, podría ser:
.celda{fon-size:10px;font-family:Helvetica;}
#ejemplo1{margin-left:20pt;color:red;}
Si observamos la sintaxis que hemos usado para vincular un fichero de estilos externo o para definir los estilos en cabeza de página mediante las etiquetas STYLE, vemos que aparecen una serie de atributos hasta ahora desconocidos. Su significado es:
NOTA.- El tema de los ficheros de estilo externos es especialmente delicado en Nestcape Navigator 4x, ya que si establecemos una ruta equivocada o el fichero de estilos asignado no existe normalmente este navegador se queda "colgado" y no acaba de cargar la página web. Ademas, este cuelgue es definitivo, de forma que si hacemos un reload de la página o si cerramos el navegador y lo volvemos a abrir, se volvera a colgar. La única solución pasa por verificar que la ruta o el archivo existen y entonces resetear el ordenador y volver a arracar el navegador para cargar la página.
Unidades en CSS.-
A la hora de trabajar con atributos de estilo vamos a tener que estar usando constantemente unidades de medida. Las unidades pueden ser:
¿Cuando conviene usar un tipo u otro de unidades?.
En general, el uso de unidades relativas esta aconsejado cuando en nuestra página dispongamos de espacio mas que suficiente para presentar los datos, sin miedo a que por ejemplo los datos de una tabla se descoloquen al aumentar el tamaño de la fuente, cuando deseemos crear una página accesible por usuarios con problemas de visión, ya que estos pueden tener configurado el tamaño de las fuentes del navegador grande, etc.
Por el contrario, conviene usar unidades absolutas cuando deseemos tener un control total de la presentación final de nuestra página, ya que con este tipo de unidades nunca nos veremos ante situaciones imprevistas o condicionadas.
En el próximo capítulo vamos a ver los principales atributos de estilo con CSS.
 |
 |
Home - HTML - Texto en HTML - 1 - 2 - 3 - 4 - 5 - 6 - 7- 8 - 9 - 10 - 11 - 12