Vincular una hoja de estilo
|
Para poder incluir las propiedades de una hoja de estilo en un documento, hay que vincularla a él. Un documento puede tener varias hojas de estilo vinculadas.
Para vincular una hoja de estilo a un documento es necesario insertar la etiqueta <link> en el documento, entre las etiquetas <head> y </head>. Esta etiqueta no necesita etiqueta de cierre.
A través del atributo href se especifica la hoja de estilo que se va a vincular al documento.
A través del atributo rel se tiene que especificar que se está vinculando una hoja de estilo, por lo que su valor ha de ser stylesheet.
A través del atributo type se tiene que especificar que el archivo es de texto, con sintaxis CSS, por lo que su valor ha de ser text/css.
Por ejemplo, podríamos vincular una hoja de estilo escribiendo el siguiente código.
|
Como recordarás, para especificar las propiedades de una capa no se utilizan etiquetas normales de HTML. Todas las propiedades se especifican a través del atributo style, y aparecen entre comillas dobles, con un punto y coma detrás de cada una. Para asignar los valores a las propiedades no se utiliza el símbolo = (igual), sino que se utiliza el símbolo : (dos puntos).
Esto es debido a que se está especificando un estilo, pero sin vincular ninguna hoja de estilo a la página.
Para especificar las propiedades dentro de una hoja de estilo, la sintaxis es muy similar.
En primer lugar se pone el nombre del estilo, y entre llaves se especifica la lista de propiedades (en minúsculas) que se corresponden con dicho estilo. Cada una de estas propiedades tiene que tener un punto y coma detrás, y los valores se asignan con el símbolo : (dos puntos).
El nombre del estilo puede ser un nombre inventado por nosotros, o el nombre de una etiqueta HTML. Para poder utilizar un nombre inventado, tiene que estar precedido por un punto, o por el nombre de una etiqueta seguida de un punto.
Por ejemplo, en una hoja de estilo podríamos tener lo siguiente:
Si vinculáramos esta hoja de estilo a un documento, se aplicarían directamente las propiedades especificadas para la etiqueta <body>.
En cambio, no existe ninguna etiqueta <mitexto>, por lo que para aplicar este estilo a algún elemento de la página habría que indicarlo de algún modo.
Para aplicar este estilo a un elemento, habría que insertar el atributo class en su etiqueta.
Por ejemplo, para aplicar ese estilo al siguiente párrafo del documento:
Habría que escribir:
Pero para aplicar el estilo únicamente a una parte del contenido de la etiqueta, como podría ser en este caso una palabra del párrafo, sería necesario incluir la etiqueta <span> (que agrupa bloques, sin producir un cambio de línea). Por ejemplo, para aplicar el estilo únicamente a la palabra estilo, habría que escribir:
|