Comprender las hojas de estilos en cascada
Las hojas de estilos en cascada (CSS) son una serie de reglas de formato que controlan la apariencia del contenido de una página web. Cuando utilice CSS para dar formato a una página, separe el contenido de la presentación. El contenido de la página (es decir, el código HTML) reside en el propio archivo HTML, mientras que las reglas CSS que definen la presentación del código residen en otro archivo (una hoja de estilos externa) o en otra parte del documento HTML ( normalmente el encabezado del archivo). El uso de CSS le brinda una gran flexibilidad y un mayor control sobre la apariencia exacta de su página, desde el posicionamiento preciso del diseño hasta fuentes y estilos específicos.
CSS le permite controlar muchas propiedades que HTML por sí solo no puede controlar. Por ejemplo, puede especificar diferentes tamaños de fuente y unidades (píxeles, tamaños de puntos, etc.) para el texto seleccionado. Al utilizar CSS para establecer tamaños de fuente en píxeles, también garantiza un enfoque más consistente para el diseño y la apariencia de la página en múltiples navegadores.
Además de dar formato al texto, puede utilizar CSS para controlar el formato y la posición de los elementos a nivel de bloque en una página web. Por ejemplo, puede establecer márgenes y bordes para elementos a nivel de bloque, texto flotante alrededor de otro texto y más.
Las reglas de formato CSS constan de dos partes: selectores y declaraciones. Un selector es un término que identifica un elemento de formato (como P, H1, nombre de clase o ID) y la declaración se utiliza para definir el estilo del elemento. En el siguiente ejemplo, H1 es el selector y todo lo que está entre corchetes ({}) es una declaración:
H1 {
tamaño de fuente: 16 píxeles;
familia de fuentes: Helvetica;
peso de fuente: negrita
}
Una declaración consta de dos partes: propiedades (como font-family) y valores (como Helvetica). La regla CSS anterior crea un estilo específico para las etiquetas H1: el texto de todas las etiquetas H1 vinculadas a este estilo tendrá un tamaño de 16 píxeles, fuente Helvética y negrita.
El término cascada se refiere a la capacidad de aplicar múltiples estilos al mismo elemento. Por ejemplo, puede crear una regla CSS para aplicar color, otra regla CSS para aplicar márgenes y luego aplicar ambas al mismo texto en la página. Los estilos definidos "caen en cascada" hasta los elementos de su página web, creando en última instancia el diseño que desea.
La principal ventaja de CSS es que proporciona capacidades de actualización convenientes; cuando actualiza una regla CSS en un lugar, el formato de todos los documentos que utilizan ese estilo definido se actualiza automáticamente al nuevo estilo.
Se pueden definir los siguientes tipos de estilo en Dreamweaver:
Las reglas CSS personalizadas (también llamadas estilos de clase) le permiten aplicar propiedades de estilo a cualquier rango o bloque de texto. (Consulte Aplicar estilos de clase).
Los estilos de etiquetas HTML redefinen el formato de etiquetas específicas (como h1). Cuando crea o cambia el estilo CSS de una etiqueta h1, todo el texto formateado con la etiqueta h1 se actualiza inmediatamente.
Los estilos de selector CSS (estilos avanzados) redefinen el formato para combinaciones específicas de elementos o para otras formas de selector que permite CSS (por ejemplo, aplique el selector td h2 siempre que aparezca un encabezado h2 dentro de una celda de la tabla). Los estilos avanzados también pueden redefinir el formato de las etiquetas que contienen un atributo de identificación específico (por ejemplo, un estilo definido por #myStyle se puede aplicar a todas las etiquetas que contienen el par de valor de atributo id="myStyle").
Las reglas CSS se pueden ubicar en las siguientes ubicaciones:
Una hoja de estilos CSS externa es una serie de reglas CSS almacenadas en un archivo CSS (.css) externo independiente (no un archivo HTML). El documento está vinculado a una o más páginas del sitio web mediante vínculos en la parte del encabezado del archivo del documento.
Una hoja de estilos CSS interna (o incrustada) es una serie de reglas CSS contenidas en la etiqueta de estilo en el encabezado de un documento HTML.
Los estilos en línea se definen dentro de todo el documento HTML en una instancia específica de una etiqueta.
Dreamweaver reconoce estilos definidos en documentos existentes siempre que cumplan con las pautas de estilo CSS.
Sugerencia
Para mostrar la Guía de referencia de CSS de O'Reilly incluida con Dreamweaver, seleccione Ayuda > Referencia y luego seleccione Referencia de CSS de O'Reilly en el menú emergente del panel Referencia.
El formato HTML configurado manualmente anula el formato aplicado a través de CSS. Para que las reglas CSS controlen el formato de los párrafos, se debe eliminar todo el formato HTML configurado manualmente.
Dreamweaver representa la mayoría de las propiedades de estilo que se aplican directamente en la ventana de documento. También puede obtener una vista previa del documento en una ventana del navegador para ver cómo se aplican los estilos. Algunas propiedades de estilo CSS aparecen de forma diferente en Microsoft Internet Explorer, Netscape Navigator, Opera y Apple Safari, y algunas no son compatibles actualmente con ningún navegador.