Efectuando Enlaces a Hojas de Estilo en Cascada CSS

Una hoja de estilo en cascada es un archivo de texto guardarlo con extensión .css y que esta constituido por una serie de reglas aplicadas a selectores, que son elementos HTML. En la siguiente figura se muestra la estructura de un archivo CSS.

cssrefext-1
Estructura tipica de un archivo de hoja de estilos CSS

Para vincular una hoja de estilo externa con un documento HTML existen las siguientes formas:

  1. Estableciendo un enlace con la etiqueta <link>.
  2. Utilizando la instrucción @import
  3. Utilizando enlace http.

Estableciendo un Enlace con la Etiqueta <link>

La etiqueta link tiene la siguientes sintaxis:

<link rel=”stylesheet” type=”text/css” href=”URL” media=”tipo de medio”>

Esta etiqueta va incluida dentro de las etiquetas <head> y </head>.

Los atributos:

rel indica el tipo de relación (relation) y su valor es stylesheet.

type tiene siempre igual valor text/css.

href es para indicar la dirección y el nombre del archivo CSS. Se recomienda revisar las formas de referenciar archivos.

media se refiere el tipo de medio a donde se aplicara la hoja de estilo. Por defecto se utiliza media=”screen”.

Por ejemplo si tenemos un archivo con nombre miestilo.css

cssrefext-2
Ejemplo de un archivo CSS.

y tenemos un documento HTML como el que se muestra a continuación:

cssrefext-3
Ejemplo de un documento HTML con enlace a una de hoja de estilo CSS utilizando la etiqueta link.

En este documento se esta haciendo un enlace al archivo miestilo.css, el cual se encuentra en la misma carpeta que el documento HTML desde el que se hace el enlace.

Se pueden hacer enlaces a varias hojas de estilo y se aplicara la combinación de ellas.

En la siguiente figura se muestra el archivo CSS: estilo2.css.

cssrefext-5
Ejemplo de un archivo CSS

 

Se puede hacer un enlace a ambos archivos .css y es como se muestra a continuación.

cssrefext-6
Ejemplo de documento HTML con enlace a dos hojas de estilo utilizando la etiqueta link.

Y el resultado es el que se muestra a continuación.

cssrefext-7.png
Página donde se muestran los estilos aportados por las hojas miestilo.css y estilo2.css

En la salida se observa como se mezclan las reglas que están contenidas en ambas hojas de estilo y se aplican al documento. Las reglas para los elementos h1 y h2 se encuentran en mi estilo.css y las reglas para los elementos h3 y h4 se encuentran en el archivo estilo2.css. En ambos archivos se encuentran las reglas para el elemento p.

Cuando existen reglas para el mismo elemento en diferentes archivos, la que se aplica es la ultima que ha sido declarada. En el ejemplo anterior la regla para el elemento p esta repetida en ambos archivos.

miestilo.css

p { color: black; font-size: 25px; }

estilo2.css

p { color: black; font-size: 25px; }

por lo que el elemento p tendrá color negro y tamaño de texto de 25 pixeles. Si cambiásemos en el archivo estilo estilo2.css las reglas para el elemento p. Estas tendrían precedencia por ser el ultimo que se declara.

por ejemplo:

estilo2.css

p { color: red; font-size: 25px; }

produciría una salida donde el texto del elemento p tendría un tamaño de 25 pixeles, pero en color rojo.

 

Utilizando la Instrucción @import

 

Otra forma de vincular una hoja de estilo externa a un documento HTML es utilizando la instrucción @import, la cual tiene la siguiente sintaxis:

@import url(dirección  y nombre del archivo) media1, media2;

donde la dirección URL del archivo .css puede ser del tipo absoluta o relativa.

media se refiere al tipo de medio donde se aplicaran las reglas de estilo. Estos pueden omitirse o colocar uno o mas medios separados por coma. al finalizar la instrucción hay que colocar el punto y coma ( ; ).

La instrucción @import va incluida dentro de las etiquetas <style type=”text/css”> y </style>, las cuales a su vez están dentro del contenedor formado por las etiquetas <head> y </head>.

Es decir @import es una instrucción para llamar una hoja de estilo externa, desde una hoja de estilo de referencia interna (incrustada dentro del documento HTML).

Cuando se utiliza @import siempre debe colocarse de primero, antes de cualquier otra regla CSS, es decir inmediatamente después de la etiqueta de apertura <style type=”text/css”>. También se pueden importar múltiples archivos .css. Al igual que con la etiqueta <link> la regla que tendrá precedencia y se aplicara será la ultima que se cargue para el elemento HTML en cuestión.

En la siguiente figura se muestra la ubicación de las instrucciones @import dentro de los contenedores <head> <style type=”text/css”> </style></head>.

cssrefext-8
Enlace de dos hojas de estilo utilizando @import

La salida que se obtiene es igual a la que se obtendría utilizando la etiqueta <link>.

Es posible combinar los dos tipos de enlace a hojas de estilo de referencia externa .

cssrefext-10.png
Ejemplo de documento HTML donde se utilizan los dos tipos de enlace a hojas de estilo de referencia externa. Con la etiqueta <link> y con la instrucción @import

Lo cual produce la siguiente salida en el navegador.

cssrefext-11
Pagina donde se ha utilizado la combinación de enlaces a hojas de estilo de referencias externa

Otra forma de utilizar la instrucción @import es desde otra hoja de estilo externo. De esta forma una hoja de estilo externo podría centralizar varias hojas de estilo. Esto no podría hacerse con la etiqueta <link>, ya que las hojas de estilo .ccs no aceptan etiquetas HTML.

 

En este caso hay que colocar las instrucciones @import en la parte superior del archivo .css antes de colocar cualquier regla CSS.

cssrefext-12
Ejemplo del uso de enlace de hojas de estilo desde otra hoja de estilo.

El archivo estilo3.css se esta utilizando para centralizar las hojas de estilo externa, miestilo.ccs y estilo2.css, las cuales han sido vinculadas a la hoja de estilo estilo3.css utilizando la instrucción @import url(archivo.css).

cssrefext-13.png
Ejemplo de enlace a una hoja de estilo que esta centralizando otras hojas de estilo, mediante el uso de la instrucción @import

El archivo CSS estilo3.css entonces puede ser vinculado al documento HTML utilizando la etiqueta <link>.

 

Al utilizar esta referencia externa en el documento HTML produce la siguiente salida.

cssrefext-14
Página con uso de archivo estilo3.css
Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s