Recursos de Dreamweaver CS4

Reglas CSS

Una regla de formato CSS consta de dos partes: el selector y la declaración (o, en la mayoría de los casos, un bloque de declaraciones). El selector es un término (por ejemplo p, h1,un nombre de clase o un identificador) que identifica el elemento con formato; el bloque de declaraciones define cuáles son las propiedades de estilo. En el siguiente ejemplo, h1 es el selector y el código comprendido entre las llaves ({}) es el bloque de declaraciones:

h1 { 
font-size: 16 pixels; 
font-family: Helvetica; 
font-weight:bold; 
}

Cada declaración consta de dos partes: la propiedad (por ejemplo, font-family) y el valor (por ejemplo, Helvetica). En la regla CSS anterior, se ha creado un estilo concreto para las etiquetas h1: el texto de todas las etiquetas h1 vinculadas a este estilo tendrá un tamaño de 16 píxeles, fuente Helvetica y negrita.

El estilo (que procede de una regla o un conjunto de reglas) reside en un lugar independiente del texto al que aplica formato (normalmente en una hoja de estilos externa o en la sección head de un documento HTML). Por consiguiente, una regla para las etiquetas h1 puede aplicarse a muchas etiquetas a la vez (y, en el caso de las hojas de estilos externas, la regla puede aplicarse a muchas etiquetas a la vez de distintas páginas). De este modo, CSS proporciona una capacidad de actualización extremadamente sencilla. Al actualizar una regla CSS en un lugar, el formato de todos los elementos que usan ese estilo definido se actualiza automáticamente con el nuevo estilo.

Ver gráfico a tamaño completo

En Dreamweaver, pueden definirse los siguientes tipos de estilos:

Los estilos de clase permiten aplicar propiedades a cualquier elemento o elementos de la página.
Los estilos de etiquetas HTML redefinen el formato de una determinada etiqueta, como por ejemplo h1. Cuando se crea o cambia un estilo CSS para la etiqueta h1, todo el texto formateado con la etiqueta h1 se actualiza inmediatamente.
Los estilos avanzados redefinen el formato de una determinada combinación de elementos o de otros selectores permitidos por el CSS (por ejemplo, el selector td h2 se aplica siempre que aparece un encabezado h2 dentro de la celda de una tabla). Los estilos avanzados también redefinen el formato de las etiquetas que contienen un atributo id específico (por ejemplo, los estilos definidos por #miEstilo se aplican a todas las etiquetas que contienen el par atributo-valor id="miEstilo").

Las reglas CSS pueden residir en las ubicaciones siguientes:

Hojas de estilos CSS externas: Conjuntos de reglas CSS almacenados en un archivo CSS (.css) independiente externo (no un archivo HTML). Este archivo se asocia a una o varias páginas de un sitio Web mediante un vínculo o una regla @import situada en la sección head de un documento.
Hojas de estilos CSS internas (o incrustadas): Conjuntos de reglas CSS incluidos en una etiqueta style de la sección head de un documento HTML.
Estilos en línea: Se definen dentro de instancias específicas de etiquetas en un documento HTML. (No se recomienda el uso de estilos en línea.)

Dreamweaver reconoce los estilos definidos en documentos existentes siempre que se ajusten a las directrices de los estilos CSS. Dreamweaver también representa la mayoría de los estilos aplicados directamente en la vista Diseño. (Sin embargo, la mejor manera de consultar el formato real de la página en un momento dado es usar la opción de vista previa y consultarlo en una ventana del navegador.) Algunos estilos CSS se representan de forma distinta en Microsoft Internet Explorer, Netscape, Opera y Apple Safari u otros navegadores, mientras que otros no son compatibles actualmente con ningún navegador.

Para mostrar la guía de referencia CSS de O’Reilly incluida con Dreamweaver, seleccione Ayuda > Referencia y luego O’Reilly CSS Reference en el menú emergente del panel Referencia.