8.1 Introducción a los estilos.

Un estilo es un conjunto de atributos con sus valores de una cierta etiqueta.

Los estilos se pueden escribir en tres sistios diferentes:

Dentro de la etiqueta. Se escriben así los estilos particulares de una única ocurerncia de esa etiqueta.
En el encabezamiento del documento (head) mediante una etiqueta <style>. Permite crear estilos en una etiqueta, estilo que afectará a todas las ocurrencias de la etiqueta dentro del documento.

Se pueden declarar estilos para mas de una etiqueta dentro del encabezamiento.
En último lugar se puede crear un fichero de texto donde se guardan los estilos de todas las etiquetas, fichero que se guarda en el servidor y que se llama desde la página o documento mediante una etiqueta puesta lynk dentro del encabezamiento.

Esto permite mantener de forma separada las hojas de estilo de las hojas de documento. Cambiando un estilo en una hoja de estilos cambiará el aspecto de todos los documentos que hacen referencia a esa hoja.

Si una etiqueta está afectada por mas de uno de los tres tipos anteriores de estilo el navegador utiliza para presentar la informació en pantalla el estilo mas cercano a la etiqueta, es decir, en primer lugar utiliza el estilo escrito dentro de la etiqueta y los otros dos los ignorará si los tiene. En segundo lugar utilizará el estilo del head si no hay estilo dentro de la etiqueta y en tercer lugar, si no tiene ni estilo de etiqueta ni en el head, utilizará el de una hoja de estilos.

Si un estilo entra en contradícción con algun atributo escrito directamente se ejecutará el de la hoja de estilos.

Los estilos funcionan bien a partir de las versiones Netscape 6 y Explorer 5.

8.2 Los estilos dentro de las etiquetas.

En un documento cualquiera y dentro de un tag cualquiera podemas dar fomato a la salida mediante la información incluida en un estilo.

Un estilo dentro de una etiqueta se pone mediante el atributo STYLE que es común a buena parte de todas esas etiquetas.

Como vemos en el listado hay dos etiquetas correspondientes a encabezamiento h2. En la segunda hemos incluido un atributo STYLE que modifica las propiedades del h2.

Las propiedades son de tres características muy diferentes, una para espaciado de letras, otra para color del fondo y una tercera para formato del recuadro del párrafo.

Como el atributo STYLE está en el segundo h2 solo afectará a ese párrafo.

Estilo dentro de una etiqueta <h2>

Código HTML

Resultado en pantalla

<html>
<head>
    <title>Prueba estilo h2</title>
</head>

<body>
    Párrafo normal
    <h2>Parrafo con h2 sin estilo</h2>
    <h2
        style = "background-color:rgb(200,200,200);
                 letter-spacing: 6px;
                 border: 5px dotted rgb(128,128,0);
                "
     >
     Párrafo con h2 y un estilo incluido
     </h2>
</body>
</html>

Párrafo normal

Parrafo con h2 sin estilo

Párrafo con h2 y un estilo incluido

8.3 Los estilos en los encabezados.

En un encabezado podemos poner una etiqueta STYLE dentro de la cual podremos agrupar los estilos de varias etiquetas.

En el ejemplo siguiente vemos que hay definidos los estilos para dos etiquetas, el encabezado mayor y la línea horizontal.

Tal y como están definidos vemos que todas las apariciones de estas dos etiquetas dentro del cuerpo del documento funcionaran como están definidas en este encabezamiento:

Estilo de etiquetas en los encabezados

Código HTML

Resultado en pantalla

<html>
<head>
    <title>Prueba de style</title>
    <STYLE>
    <!--
        H1 {
            font-family: Times New Roman;
            background-color: Teal;
            letter-spacing: 3px;
           }

        HR{
            color : Red;
            height: 30px;
          }
    -->
    </STYLE>
</head>

<body>

<h1>Encabezado con estilo</h1>
Una linea horizontal
<hr>
Otra linea horizontal
<hr>

</body>
</html>

Encabezado con estilo

Una linea horizontal

Otra linea horizontal

8.4 Las clases para identificar estilos.

Dentro de la etiqueta STYLE del encabezado del documento podemos definir clases de estilos. Tenemos que poner un nombre a la clase en el momento de definir el estilo. En el ejemplo vemos que hay una clase de línea horizontal llamada ROJA ya que en su declaración hemos puesto HR.ROJA

Para usar una de estas clases tenemos que poner el atributo class en las etiquetas dentro del cuerpo del documento.

Podemos tener varias clases para la misma etiqueta como en caso de la etiqueta HR que hemos definido las clases Roja y Verde.

Estilo de etiquetas en los encabezados

Código HTML

Resultado en pantalla

<html>
<head>
    <title>Prueba de style</title>
    <STYLE>
    <!--
        HR.Roja{
            color : Red;
            height: 20px;
          }
        HR.Verde{
            color : Green;
            height: 10px;
          }
    -->
    </STYLE>
</head>

<body>

Una linea horizontal con la identificación de clase ROJA
<hr class="Roja">
Una linea horizontal con la identificación de clase VERDE
<hr class="Verde">
Una linea horizontal sin identificación de clase 
<hr>

</body>
</html>

Una linea horizontal con la identificación de clase ROJA

Una linea horizontal con la identificación de clase VERDE

Una linea horizontal sin identificación de clase

8.5 Las hojas de estilos externas al documento.

Los etilos de los encabezados se pueden guardar en ficheros independientes.

Después solo hay que llamarlos desde cualquier documento mediante una etiqueta LINK escrita dentro del encabezado.

Estos ficheros de estilos se llaman hojas de estilos. Tiene la ventaja de que así no hay que repetir el código de los estilos dentro de cada documento y que mantiene el estilo uniforme dentro de las diferentes páginas de una misma web.

Estos apuntes están hechos con la siguiente hoja de estilos: jsapunts.css

Mira en la tabla siguiente la forma de incluir esa hoja de estilos dentro del encabezado.

Llamar a una hoja de estilos

<head>
   <title>HTML-Ejercio 8.</title>
   <link rel="stylesheet" type="text/css" href="jsapunts.css">
</head>

8.6 Algunos apuntes finales.

Las hojas de estilos se rigen por las especificaciones CSS2 que publica el W3C, al igual que las de HTML.

Podéis encontrar toda la documentación en inglés en W3C.

También existe una dirección muy interesante que tine toda la documentación en castellano que es la página de Carlos Benavidez.

Unos apuntes de CSS en Catalán.

Otra cosa interesante: Existen editores de texto especializados en CSS y que facilitan mucho la edición de las hojas de estilos.

8.7 Ejercicios.

Escribe una página con dos etiquetas H1. Pon un estilo de letra distinto en cada una de esas etiquetas mediante estilos inculidos dentro las etiquetas.
Modifica el ejercicio anterior para poner los estilos en el encabezamiento.
Carga la hoja de estilos jsapunts.css y estudia los estilos que tiene incluidos. Grabate éste fichero en el directorio en el que estás trabajando.
Crea un documento en la que utizas la hoja de estilos anterior y usando como mínimo cinco clases distintas en tu documento.
Instala en tu ordenador el programa Top Style que es un editor de hojas de estilos.
Crea una hoja de estilos como la enlazada aqui con el programa Top Style.
Utiliza esa hoja para crear tu propio documento web.