La edición electrónica

Las etiquetas que proporcionan estilo

Para crear hojas de estilo dentro de los documentos utilizaremos diferentes etiquetas:

<STYLE> .. </STYLE>: es la etiqueta principal que se inserta en la cabecera del documento HTML, entre las etiquetas <HEAD> y </HEAD>. Llevará TYPE como atributo necesario para un perfecto funcionamiento, encargado de indicar al navegador qué tipo de sintaxis se utilizará para definir la hoja de estilo. Los valores posibles para definir en este atributo son:

»» "text/css", para indicar que se tratará de los contenidos propios de una hoja de estilo.

»» "text/javascript", para indicar que las directivas se regirán con Javascript.

De esta forma tenemos: <STYLE TYPE="text/css"> formato de estilo </STYLE>

La etiqueta <STYLE> tiene que cerrarse (</STYLE>), ya que el navegador considera todo lo que se escribe después de la primera etiqueta como parte de una hoja de estilo. En caso de que queramos ocultar el código de la hoja de estilo para navegadores que no permitan su visualización, será necesario utilizar los parámetros de ocultación de código. Por ejemplo:

<STYLE TYPE="text/css">

</STYLE

Para definir las diferentes características o apariencia de una etiqueta en una hoja de estilo, se emplea el nombre de la etiqueta que debe verse afectada por el estilo, seguida de los símbolos "{" y "}". Estos símbolos contendrán los atributos del estilo concreto que se indiquen:

<STYLE TYPE="text/css">

Elemento afectado {definición de atributos que hay que aplicar}

</STYLE

Por ejemplo:

<STYLE TYPE="text/css">

H3 {color:red; font-style:bold; text-align:right;}

</STYLE>

Este estilo se definirá para todas aquellas partes del documento que remarquemos con la etiqueta <H3> (Header 3). Su resultado sería éste:

Header 3 en rojo, alineado a la derecha

Verdaderamente funciona, y además puede ser muy práctico, pero ¿cómo podemos escribir las propiedades de un estilo? ¿Cuáles son los valores de las diferentes propiedades? La segunda pregunta tendrá respuesta más adelante. Primero nos centraremos en definir cómo se tienen que escribir las diferentes propiedades de forma correcta:

La sintaxis que hay que seguir será siempre la misma y en la misma disposición:

elemento afectado por el estilo { propiedad:valor ; propiedad: valor; (todas las posibles que hay que aplicar)}

Como vemos, tenemos el nombre de la propiedad siempre en minúsculas, seguida de los dos puntos (:) y el valor del atributo, y cerramos la propiedad con punto y coma (;). Para separar diferentes propiedades, lo haremos dejando un espacio o bien pasándolas a otra línea. Siguiendo el ejemplo anterior, la disposición última sería:

H3 {color:red;
font-style:bold;
text-align:right;}

<SPAN> ... </SPAN>: esta etiqueta se utiliza para marcar determinados bloques de texto afectados por un estilo concreto. El efecto del estilo sólo tendrá valor en todo el contenido que haya entre las dos etiquetas. Esta etiqueta por sí sola no hace nada y no tendrá operatividad, y por ello debe ir acompañada de unos atributos que no le son exclusivos, como por ejemplo:

»» class="...", con valor que se asignará con un nombre de clase (el que se cree en la etiqueta <STYLE> principal).

»» id="...", el valor será una palabra que identifique el nombre de un estilo.

»» style="...", el valor lo asignaremos con diferentes atributos en formato CSS.

Ejemplos de ello:

Crearemos un estilo determinado para la clase "salto de párrafo" <P>, con el atributo color naranja para aquella parte de texto que seleccionemos. Así, cuando hagamos un salto de párrafo e invoquemos la class naranja, el texto marcado entre las etiquetas <SPAN> y </SPAN aparecerá de este color. Después, el texto continuará en color estándar (negro). Veámoslo :

<STYLE TYPE="text/css">
.naranja {color:#FF8040; font-style:italic;}
</STYLE
</HEAD
<BODY>

texto sin validez; texto sin validez; texto sin validez; texto sin validez; texto sin validez; texto sin validez; texto sin validez; texto sin validez; texto sin validez; texto sin validez.

<SPAN class="naranja">Este texto aparece de color naranja, ¿verdad? ¡Fantástico!</SPAN>

Este otro vuelve a ser negro, ya no actúa la etiqueta <SPAN>. Se nota.

Resultado cuando indicamos la class "naranja" dentro del texto:

texto sin validez; texto sin validez; texto sin validez; texto sin validez; texto sin validez; texto sin validez; texto sin validez; texto sin validez; texto sin validez; texto sin validez.

Este texto aparece de color naranja, ¿verdad? ¡Fantástico!

Este otro vuelve a ser negro, ya no actúa la etiqueta <SPAN>. Se nota.

Con el atributo "id" definiremos estilos propios que no se apliquen a todos los estilos de cierto tipo o a partes de documentos definidos. Para hacer esto, personalizaremos un estilo y lo invocaremos en aquella parte del texto que nos interese, mediante el atributo "id". Siguiendo el ejemplo anterior podemos tener:

<STYLE TYPE="text/css">
#miestilo {color:green; font-style:italic;}
</STYLE
</HEAD
<BODY>

texto sin validez; texto sin validez; texto sin validez; texto sin validez; texto sin validez; texto sin validez; texto sin validez; texto sin validez; texto sin validez; texto sin validez. <SPAN id="miestilo"> Este texto aparece de color verde, ¿verdad? ¡Fantástico! </SPAN>. Este otro vuelve a ser negro, ya no actúa la etiqueta <SPAN>. Se nota.

Resultado cuando indicamos el atributo id marcado con la parrilla (#) "#miestilo" dentro del texto:

texto sin validez; texto sin validez; texto sin validez; texto sin validez; texto sin validez; texto sin validez; texto sin validez; texto sin validez; texto sin validez; texto sin validez. <SPAN> id="miestilo">Este texto aparece de color verde, ¿verdad? ¡Fantástico!</SPAN>. Este otro vuelve a ser negro, ya no actúa la etiqueta <SPAN>. Se nota.

Si utilizamos directamente una directiva de estilo dentro de la etiqueta <SPAN>, el resultado es que aplicaremos también directamente el estilo a aquella parte seleccionada. No es la forma más "ortodoxa" de hacerlo, es mejor definir los estilos en la cabecera a que estén repartidos a lo largo del documento. Pensad que cualquier modificación de estilo tendrá que ir a buscarse a donde hayamos aplicado un estilo. Por ejemplo:

</HEAD
<BODY>

texto sin validez; texto sin validez; texto sin validez; texto sin validez; texto sin validez; texto sin validez; texto sin validez; texto sin validez; texto sin validez; texto sin validez. <SPAN> style="color:red; font-style:italic;">Este texto aparece de color rojo, ¿verdad? ¡Fantástico!</SPAN>. Este otro vuelve a ser negro; ya no actúa la etiqueta <SPAN>. Se nota.

Resultado cuando indicamos los atributos de estilo directamente dentro del texto:

texto sin validez; texto sin validez; texto sin validez; texto sin validez; texto sin validez; texto sin validez; texto sin validez; texto sin validez; texto sin validez; texto sin validez. Este texto aparece de color rojo, ¿verdad? ¡Fantástico! Este otro vuelve a ser negro, ya no actúa la etiqueta <SPAN>. Se nota.

<DIV>...</DIV>: esta etiqueta no es nueva. Las directrices de HTML 4.0 ya la contemplan para otros usos. Puede utilizarse como alternativa a <SPAN> con las mismas condiciones que acabamos de indicar. La única diferencia estriba en que provocará automáticamente un salto de línea al acabar de definir un estilo en el texto seleccionado.