Entrar al aula
×

Gestionar hojas de estilo CSS

Crear desde 0

Como cualquier otro archivo de código podemos crear en DW una Hoja de estilos desde la opción de menú Archivo > Nuevo... y elegir el formato.css en el cuadro de Nuevo documento. Pero posteriormente tendríamos que guardar el archivo y vincularlo a la página en la que estamos trabajando.

Es mucho más cómodo usar las opciones del cuadro de Nuevo estilo:

 
Pulsamos el botón de crear Nuevo estilo en el panel estilos CSS.
... y os aparecerá el cuadro para estipular el Tipo, Selector y Localización para ese nuevo estilo.

En la opción Definir en... podemos elegir entre una hoja de estilos o crear el estilo en el Head de la página (Sólo este documento).

DW está configurado para que todos los nuevos estilos se creen en una Hoja de estilo. Si esa página web ya tiene vinculada una Hoja de estilos te dará esa opción activada.

 
Elegimos la opción Nuevo archivo de hoja de estilos.
 
DW abrirá un cuadro para dar nombre y localización en nuestra carpeta raíz a ese nuevo archivo.css.

De esta forma, al crear un estilo nuevo, nos creamos ya el archivo.css y este se vincula automáticamente a la página en la que estamos trabajando, sin que nosotros hagamos nada mas.

Crear desde Estilos incrustados u otras hojas

Muchos diseñadores, mientras se está en el proceso de pruebas del diseño, suelen crear los estilos incrustados en la cabeza de una página del sitio que sirva de cobaya. Una vez convencidos del conjunto de reglas y listos para que se apliquen al resto de páginas del sitio deben llevar esas reglas de la cabeza a un archivo.css.

Sigue estos pasos para mover unas reglas de estilos de la cabeza de una página (o de otra hoja de estilos que esté actuando en la página) a una nueva hoja de estilos:

 
Seleccionamos en la lista de estilos del Panel Estilos las reglas con las que queremos crear una nueva hoja de estilos externa.
 
Pulsamos sobre ellos con el botón derecho del ratón y elegimos la opción Mover reglas CSS...
 
Aparecerá un cuadro para determinar si las quieres mover a otra hoja de estilos del sitio web a Una nueva Hoja de estilos.
 
Elegimos esta ultima opción y solo faltará dar nombre y localización en nuestra carpeta raíz al nuevo archivo.css 

Vincular las hojas de estilo

Existen dos métodos para que una página web obedezca a las reglas de una hoja de estilo:

Vincular la hoja de estilo a la página.
Mediante la etiqueta <link>
Importar la hoja de estilo en la página.
Mediante la cadena de texto @import

En este apartado vamos a explicar la primera. De hecho, los métodos que hemos aplicado anteriormente, crean la hoja de estilo YA VINCULADA a la página en la que estamos trabajando para que obedezca sus reglas.
En cualquier caso, si queremos vincular una hoja de estilos, que ya esté en nuestra carpeta raíz, a una página, seguiremos estos pasos:

 
Pulsamos el botón de la parte inferior del panel Estilos.
 
En el cuadro que aparece, Examinamos nuestra carpeta raíz para elegir el archivo.css que deseamos y elegimos la opción Vincular.

La opción Media la veremos más adelante...
 
Pulsamos Aceptar, y la Hoja junto con sus reglas estarán accesibles en el panel Estilos CSS.

Este vinculo lo único que supone en el código de la página es una sola etiqueta dentro del HEAD de la página:

<head>
...
<link rel="stylesheet" type="text/css" href="estilos.css" media="screen" />
</head>

LA ETIQUETA <LINK>

Normalmente, la etiqueta <link> incluye cuatro atributos cuando se enlaza un archivo CSS:

  • rel: indica el tipo de relación que tiene el recurso enlazado (en este caso, el archivo CSS) y la página HTML.
    Para los archivos CSS, siempre se utiliza el valor stylesheet
  • type: indica el tipo de recurso enlazado.
    Sus valores están estandarizados y para los archivos CSS su valor siempre es text/css
  • href: indica la URL del archivo CSS que contiene los estilos.
    La URL indicada puede ser relativa o absoluta y puede apuntar a un recurso interno o externo al sitio web.
  • media: indica el medio en el que se van a aplicar los estilos del archivo CSS.
    Más adelante se explican en detalle los medios CSS y su funcionamiento.

Importar Hojas de estilo

Importar en páginas web...

Para importar una hoja de estilos en una página web se siguen los mismos pasos que seguíamos a la hora de Vincular una hoja de estilo... con el botón del panel Estilos.

La diferencia es que en el cuadro elegimos la opción Importar en vez de Vincular":

- ¿Y qué diferencia hay entre la opción de Vincular y la de Importar?

La primera de ellas está en el código que necesita insertar en XHTML de la página:

<head>
...
<style type="text/css">
<!--
@import url("revolta.css");
-->
</style>
</head>

En este caso, para incluir en la página HTML los estilos definidos en archivos CSS externos se utiliza una regla especial de tipo @import. Las reglas de tipo @import siempre preceden a cualquier otra regla CSS dentro de la etiqueta <style>

 

Fig 2. En el panel Estilos CSS, cuando importamos una hoja de estilo esta aparece dependiente de <estilo>, es decir, de la etiqueta <style> incrustada en la cabeza.

Importar en hojas de estilo

Hemos visto que podemos importar las reglas de una hoja de estilos en una página HTML, pero una de sus peculiaridades es que también podemos importar hojas de estilo DENTRO DE OTRAS HOJAS DE ESTILO.

- ¿Qué? ¿Cómo podemos importar una hoja de estilo dentro de otra?

  1. Abrimos el archivo CSS de la hoja de estilos a la que queremos importar otra.
  2. Y pulsaos en el panel Estilos CSS el botón ... y seguimos el mismo proceso que hemos visto en el apartado anterior para importar una hoja a una página.

Lo que ocurrirá es que al comienzo de la hoja de estilo que estamos tratando se insertará la nomenclatura que ya conocemos:

@import url("otra.css");

- ¿Y para qué sirve?

Pongamos como ejemplo esta situación:

 

Fig 3. La página index.html está vinculada a la hoja de estilos estilos.css por un típico <link>.
Esa hoja de estilos tiene importados los estilos de otras dos: form.css y galeria.css.

Teniendo en cuenta la situación explicada en la fig. 3, la página index.html está obedeciendo los estilos de estilos.css form.css galeria.css.

¡Las tres al mismo tiempo! Pero en su cabeza no hay tres etiquetas <link>, hay solo una:

<head>
...
<link rel="stylesheet" type="text/css" href="estilos.css" media="screen" />
</head>

Esta es una técnica muy común cuando se realizan diseños complejos que necesitan de varias hojas de estilo (que no es muy difícil encontrarse en esa situación).

En vez de vincular varias hojas de estilo a una página se vincula solamente la Hoja de estilos PRINCIPAL.... y las demás van importadas dentro de la principal.

@Import vs. Link

- Bien... pero cuando se trata de una página web...

¿Qué opción elegimos: Vincular o Importar?

Por lo general la opción de importar no es aconsejable utilizarla en páginas web:

En resumen: @import está pensado para incluirse dentro de las hojas de estilo. Para enlazar cualquier archivos externos dentro de html existe el <link>.

Para muestra un botón: la misma página http://www.w3.org/ usa esta técnica. Vincula una hoja de estilos que importa otra dentro.