Este artículo explica cómo utilizar hojas de estilos en cascada (CSS) para dar formato al texto de una página en Dreamweaver. Puede utilizar CSS para formatear y colocar el texto de maneras que HTML no puede, lo que le brinda más flexibilidad y control sobre la apariencia de su página.
Comprender CSS
Las hojas de estilos en cascada (CSS) son un conjunto de reglas de formato que controlan la apariencia del contenido de una página web. Cuando utiliza CSS para dar formato a una página, el contenido y la presentación se mantienen separados. El contenido de la página (código HTML) está en su propio archivo HTML, mientras que las reglas CSS que definen la representación del código están en otro archivo (una hoja de estilos externa) u otra parte del documento HTML (normalmente una sección). El uso de CSS le brinda una gran flexibilidad y un mayor control sobre la apariencia de su página, desde el posicionamiento preciso del diseño hasta fuentes y estilos específicos.
CSS le permite controlar muchas propiedades que no puede controlar utilizando HTML únicamente. Por ejemplo, puede especificar diferentes tamaños de fuente y unidades (píxeles, puntos, etc.) para el texto seleccionado. Al utilizar CSS para establecer el tamaño de fuente en píxeles, también puede garantizar un enfoque más coherente para el diseño y la apariencia de la página en varios navegadores.
Las reglas de formato CSS constan de dos partes: selectores y declaraciones. Los selectores son términos que identifican elementos formateados (como P, H1, nombre de clase o ID), mientras que las declaraciones se utilizan para definir elementos de estilo. En el siguiente ejemplo, H1 es el selector y todo lo que está entre llaves ({}) es una declaración:
Aquí está el contenido citado:
H1 {
font-size:16 pixels;
font-family:Helvetica
font -weight:bold
}
Una declaración consta de dos partes: propiedades (como font-family) y valores (como Helvetica). El ejemplo anterior crea un estilo para la etiqueta H1: el texto de todas las etiquetas H1 vinculadas a este estilo tendrá un tamaño de 16 píxeles y utilizará fuente Helvética y negrita.
El término "cascada" se refiere a la capacidad de aplicar múltiples estilos al mismo elemento o página web. Por ejemplo, puede crear una regla CSS para aplicar color, otra regla para aplicar márgenes y luego aplicar ambas al mismo texto en una página. Los estilos definidos "caen en cascada" sobre los elementos de su página web, creando en última instancia el diseño que desea.
La principal ventaja de CSS es que es fácil de actualizar; siempre que se actualice una regla CSS, el formato de todos los documentos que utilicen el estilo definido se actualizará automáticamente al nuevo estilo.
Los siguientes tipos de reglas se pueden definir 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. Todos los estilos de clase comienzan con un punto (.). Por ejemplo, puede crear un estilo de clase llamado .red, establecer la propiedad de color de la regla en rojo y luego aplicar el estilo a una parte del texto del párrafo con estilo.
Las reglas de etiquetas HTML redefinen el formato de etiquetas específicas (como p o h1). Cuando crea o cambia una regla CSS para una etiqueta h1, todo el texto formateado con la etiqueta h1 se actualiza inmediatamente.
Las reglas del selector CSS (estilos avanzados) redefinen el formato de combinaciones específicas de elementos u otras formas de selector permitidas por 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 atributo/valor id="myStyle").
Crear una nueva hoja de estilo
Primero, creará una hoja de estilos externa que contenga reglas CSS que definan los estilos de texto de los párrafos. Cuando crea estilos en una hoja de estilos externa, puede controlar la apariencia de varias páginas web simultáneamente desde una ubicación central sin tener que configurar estilos para cada página web individualmente.
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 externo independiente (no un archivo HTML). El archivo .css está vinculado a una o más páginas del sitio web mediante enlaces en la sección principal del documento.
Una hoja de estilos CSS interna (o incrustada) es una serie de reglas CSS contenidas en la etiqueta de estilo en la sección principal de un documento HTML. Por ejemplo, el siguiente ejemplo define el tamaño de fuente para todo el texto de un documento que tiene etiquetas de párrafo configuradas:
:<head>
<estilo>
pags{
tamaño de fuente: 80px
}
</estilo>
</head>：
Los estilos en línea se definen dentro de instancias de etiquetas específicas dentro del documento HTML. Por ejemplo,
"p estilo="tamaño de fuente: 9px""
Define el tamaño de fuente solo para párrafos formateados con etiquetas que contienen estilos en línea.
Dreamweaver representa la mayoría de las propiedades de estilo que aplica y las muestra 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.
Seleccione "Archivo">"Nuevo".
En el cuadro de diálogo Nuevo documento, seleccione Página base en la columna Categoría, seleccione CSS en la columna Página base y luego haga clic en Crear.
Aparecerá una hoja de estilo en blanco en la ventana del documento. Los botones de vista Diseño y vista Código se han desactivado. Las hojas de estilo CSS son archivos de texto sin formato y su contenido no se utilizará para visualizarlo en un navegador.
Guarde ("Archivo">"Guardar") esta página como cafe_townsend.css.
Cuando guarde su hoja de estilo, asegúrese de guardarla en la carpeta cafe_townsend (la carpeta raíz de su sitio web).
Escriba el siguiente código en la hoja de estilo:
p{
familia de fuentes: Verdana, sans-serif;
tamaño de fuente: 11px;
color: #000000;
altura de línea: 18px;
relleno: 3px;
}
A medida que escribe el código, Dreamweaver utiliza sugerencias de código para sugerir opciones que le ayudarán a completar la entrada. Cuando vea el código que desea que Dreamweaver complete por usted, presione Entrar (Windows) o Retorno (Macintosh).
No olvide agregar un punto y coma después del valor del atributo al final de cada línea.
El código completo se parecerá al siguiente ejemplo:
Para mostrar la guía, elija Ayuda > Referencias y luego elija Referencia CSS de O'Reilly en el menú emergente en el panel Referencias. Guarde la hoja de estilo.
Hoja de estilo adjunta
Cuando adjunta una hoja de estilo a una página web, las reglas definidas en la hoja de estilo se aplican a los elementos correspondientes de la página. Por ejemplo, cuando adjunta la hoja de estilo cafe_townsend.css a la página index.html, todo el texto del párrafo (texto formateado con etiquetas en código HTML) se formatea de acuerdo con las reglas CSS que usted define.
En la ventana Documentos, abra el archivo index.html de Cafe Townsend. (Si el archivo ya está abierto, haga clic en su pestaña).
Seleccione el primer texto que pegó en la página en Tutorial: Agregar contenido a la página.
Mire en el inspector de propiedades y asegúrese de que el párrafo esté formateado con etiquetas de párrafo.
Si el menú emergente Formato en el inspector de propiedades dice Párrafo, el párrafo se ha formateado usando la etiqueta de párrafo. Si el menú emergente Formato en el inspector de propiedades dice Ninguno o algo más, seleccione Párrafo para formatear el párrafo.
Repita el paso 3 para el segundo párrafo.
En el panel Estilos CSS (Ventana > Estilos CSS), haga clic en el botón Adjuntar hoja de estilo en la esquina inferior derecha del panel.
En el cuadro de diálogo Adjuntar hoja de estilo externa, haga clic en Examinar y busque el archivo cafe_townsend.css creado en la sección anterior.
Haga clic en Aceptar.
El texto de la ventana de documento tendrá formato según las reglas CSS de la hoja de estilos externa.
Explora el panel de estilos CSS
El panel Estilos CSS le permite realizar un seguimiento de las reglas y propiedades de CSS que afectan al elemento de página seleccionado actualmente o a todo el documento, y modificar las propiedades de CSS sin abrir una hoja de estilos externa.
Asegúrese de que la página index.html esté abierta en la ventana del documento.
En el panel Estilos CSS (Ventana > Estilos CSS), haga clic en Todo en la parte superior del panel y luego verifique sus reglas CSS.
En el modo "Todos", el panel CSS le muestra todas las reglas CSS que se aplican al documento actual, ya sea que estén en una hoja de estilos externa o en el propio documento. Deberías ver dos categorías principales en el panel Todas las reglas: una categoría de etiquetas y una categoría cafe_townsend.css.
Si la categoría de etiqueta no está expandida, haga clic en el signo más (+) para expandir la categoría.
Haga clic en la regla del cuerpo.
La propiedad color de fondo con un valor de #000000 aparece en el panel inferior Propiedades.
Tenga en cuenta que es posible que necesite contraer otros paneles, como el panel Archivo, para ver el panel Estilos CSS completo, y también puede cambiar la longitud del panel Estilos CSS arrastrando el borde entre los paneles.
El color de fondo de la página se establece en Tutorial: creación de un diseño de página basado en tablas mediante el cuadro de diálogo Modificar propiedades de página. Cuando configura las propiedades de la página de esta manera, Dreamweaver escribe un estilo CSS integrado en el documento.
Haga clic en el signo más (+) para expandir la categoría cafe_townsend.css.
Haga clic en regla.
Todas las propiedades y valores definidos en la hoja de estilo externa para la regla p aparecerán en el panel Propiedades a continuación.
En la ventana del documento, haga clic una vez en cualquier lugar de los dos párrafos que acaba de formatear.
En el panel Estilos CSS, haga clic en Actual en la parte superior del panel y luego inspeccione sus estilos CSS. En el modo actual, el panel CSS le muestra un resumen de las propiedades de la selección actual. Las propiedades mostradas corresponden a las propiedades de la regla p en la hoja de estilo externa.
En la siguiente sección, utilizará el panel Estilos CSS para crear una nueva regla. Crear nuevas reglas usando el panel Estilos CSS es mucho más fácil que escribir las reglas manualmente, como cuando creaste originalmente una hoja de estilos externa.
Crear nuevas reglas CSS
En esta sección, utilizará el panel Estilos CSS para crear una regla CSS o un estilo de clase personalizado. Los estilos de clase le permiten establecer las propiedades de estilo de cualquier rango o bloque de texto y se pueden aplicar a cualquier etiqueta HTML. Para obtener más información sobre los diferentes tipos de reglas CSS, consulte Comprensión de CSS.
En el panel Estilos CSS, haga clic en Nueva regla CSS en la esquina inferior derecha del panel.
En el cuadro de diálogo Nueva regla CSS, seleccione Clase en la opción Tipo de selector. Esta opción debe estar seleccionada de forma predeterminada.
Ingrese .bold en el cuadro de texto Nombre.
Asegúrese de escribir un punto (.) antes de la palabra "negrita". Todos los estilos de clase deben comenzar con un punto.
En el menú emergente "Definir en", seleccione cafe_townsend.css. Este archivo debe estar seleccionado de forma predeterminada.
Haga clic en Aceptar.
Aparece el cuadro de diálogo Definición de regla CSS, que indica que está creando un estilo de clase llamado .bold en el archivo cafe_townsend.css.
En el cuadro de diálogo "Definición de regla CSS", haga lo siguiente:
En el cuadro de texto "Fuente", ingrese Verdana, sans-serif.
En el cuadro de texto Tamaño, ingrese 11 y seleccione Píxeles en el menú emergente inmediatamente a la derecha.
En el cuadro de texto Alto de fila, ingrese 18 y seleccione Píxeles en el menú emergente inmediatamente a la derecha.
Elija Negrita en el menú emergente Peso.
En el cuadro de texto Color, ingrese #990000.
Sugerencia Para obtener más información sobre las propiedades CSS, consulte la Guía de referencia de O'Reilly incluida con Dreamweaver. Para mostrar la guía, elija Ayuda > Referencias y luego elija Referencia CSS de O'Reilly en el menú emergente en el panel Referencias.
Haga clic en Aceptar.
Haga clic en el botón Todo en la parte superior del panel Estilos CSS.
Si la categoría cafe_townsend.css no está expandida, haga clic en el botón más (+) junto a la categoría.
Puede ver que Dreamweaver ha agregado el estilo de clase .bold a la lista de reglas definidas en la hoja de estilos externa. Si hace clic en una regla .bold en el panel Todas las reglas, las propiedades de la regla aparecen en el panel Propiedades. Las nuevas reglas también aparecen en el menú emergente Estilo del inspector de propiedades.
Aplicar estilo de clase al texto
Ahora ha creado una regla de clase y la ha aplicado al texto de un párrafo.
En la ventana Documento, seleccione las primeras cuatro palabras del texto en el primer párrafo: El chef visionario del Café Townsend.
En el inspector de propiedades (Ventana > Propiedades), elija negrita en el menú emergente Estilo.
Se aplicará un estilo "negrita" a su texto.
Repita el paso 2 para aplicar el estilo "negrita" a las primeras cuatro palabras del segundo párrafo.
Guarde la página.
Formatee el texto de la barra de navegación
A continuación, usará CSS para aplicar estilos al texto del enlace de la barra de navegación. Muchas páginas web utilizan imágenes rectangulares coloreadas con texto incrustado para crear barras de navegación. Sin embargo, si usa CSS, todo lo que necesita configurar es el texto del enlace y algo de formato. Al usar la propiedad display: block y establecer el ancho del bloque, puede crear efectivamente un rectángulo sin usar una imagen adicional.
Cree una nueva regla para la navegación
Abra el archivo cafe_townsend.css si aún no está abierto, o haga clic en su pestaña para mostrar el archivo.
Defina una nueva regla escribiendo el siguiente código después del estilo de clase .bold en el archivo:
.navigation {
}
Esta es una regla vacía.
El código del archivo debería parecerse al siguiente ejemplo:
Guarde el archivo cafe_townsend.css.
A continuación, utilizará el panel Estilos CSS para agregar propiedades a la regla.
Si el archivo index.html no está abierto, ábralo.
En el panel Estilos CSS, asegúrese de que el modo Todo esté seleccionado, seleccione la nueva regla de navegación y haga clic en Editar estilos en la esquina inferior derecha del panel.
En el cuadro de diálogo "Definición de regla CSS", haga lo siguiente:
En el cuadro de texto "Fuente", ingrese Verdana, sans-serif.
Seleccione 16 en el menú emergente Tamaño, luego seleccione Píxeles en el menú emergente inmediatamente a la derecha.
Seleccione Normal en el menú emergente Estilo.
Seleccione Ninguno de la lista Modificación.
Elija Negrita en el menú emergente Peso.
En el cuadro de texto Color, ingrese #FFFFFF.
Para mostrar la guía, elija Ayuda > Referencias y luego elija Referencia CSS de O'Reilly en el menú emergente en el panel Referencias.
Haga clic en Aceptar.
Ahora usará el panel Estilos CSS para agregar más propiedades a la regla .navigation.
En el panel Estilos CSS, asegúrese de que la regla .navigation esté seleccionada y luego haga clic en Mostrar vista de lista.
La vista de lista hace que el panel Propiedades muestre todas las propiedades disponibles en orden alfabético (a diferencia de la vista Establecer propiedades, que solo muestra las propiedades que se han configurado).
Haga clic en la columna a la derecha de la propiedad color de fondo.
Para ver el contenido completo de una propiedad, coloque el puntero del mouse sobre la propiedad.
Ingrese el valor hexadecimal #993300 y presione Entrar (Windows) o Retorno (Macintosh).
Consejo Para ver el impacto de su trabajo en una hoja de estilo externa, mantenga abierto el archivo cafe_townsend.css en la ventana de documento mientras trabaja. Cuando realiza selecciones en el panel Estilos CSS, también verá que Dreamweaver escribe código CSS en la hoja de estilos.
Busque la propiedad de visualización (es posible que deba desplazarse hacia abajo), haga clic una vez en la columna de la derecha y seleccione bloquear en el menú emergente.
Busque la propiedad de relleno, haga clic una vez en la columna de la derecha, ingrese un valor de 8px y presione Entrar (Windows) o Retorno (Macintosh).
Busque la propiedad de ancho, haga clic una vez en la columna de la derecha, ingrese 140 en el primer cuadro de texto, seleccione Píxeles en el menú emergente y presione Entrar (Windows) o Retorno (Macintosh).
Haga clic en Mostrar propiedades de configuración para mostrar solo las propiedades que estableció en el panel Propiedades.
Haga clic en el archivo cafe_townsend.css para mostrarlo. Verá que Dreamweaver ha agregado todas las propiedades que especificó al archivo.
Guarde y cierre el archivo cafe_townsend.css.
Ahora ha creado una regla que da formato al texto de la barra de navegación. A continuación, aplicará la regla a los enlaces seleccionados.
Aplicar reglas
Con la página index.html abierta en la ventana del documento, haga clic en la palabra Cocina para colocar el punto de inserción en algún lugar de la palabra.
En el selector de etiquetas, haga clic en la etiqueta situada más a la derecha.
Esta operación seleccionará todo el texto para la etiqueta o enlace especificado.
En el inspector de propiedades (Ventana > Propiedades), seleccione Navegación en el menú emergente Estilo.
En la ventana de documento, la apariencia del texto Cocina ha cambiado por completo. El texto ahora tiene el formato de un botón de barra de navegación según las propiedades que definiste para la regla .navigation en la sección anterior.
Repita los pasos del 1 al 3 para cada enlace de la barra de navegación.
Debes asignar un estilo de clase de navegación a cada etiqueta o enlace, por lo que es importante seleccionar cada enlace individualmente usando el selector de etiquetas y luego asignar un estilo de clase a cada enlace uno por uno.
Si tiene problemas para formatear el texto del enlace, asegúrese de que haya espacios (no retornos de carro) entre cada (o grupo de) palabras enlazadas. También asegúrese de que el espacio entre los dos enlaces no esté vinculado. Si los espacios están vinculados, seleccione cuidadosamente los espacios vinculados, borre el cuadro de texto Vincular en el inspector de propiedades y presione Entrar (Windows) o Retorno (Macintosh).
Cuando haya terminado de formatear todas las palabras en la barra de navegación, guarde la página y obtenga una vista previa de su trabajo en un navegador (Archivo > Vista previa en el navegador).
Puede hacer clic en el enlace para asegurarse de que funciona.
Agregar efecto de mouseover
Ahora agregará un efecto de desplazamiento que hace que el color de fondo de la barra de navegación cambie cada vez que el puntero del mouse pasa sobre un enlace. Para agregar un efecto de mouseover, agregue una nueva regla que contenga la pseudoclase :hover.
Acerca de... Acerca de:hover Pseudoclases Las pseudoclases son una forma de afectar ciertos elementos en un documento HTML, no basándose en el código HTML del documento en sí, sino en otras condiciones externas aplicadas por el navegador web. Las pseudoclases pueden ser dinámicas, lo que significa que a medida que el usuario interactúa con el documento, los elementos de la página pueden ganar o perder pseudoclases.
La pseudoclase :hover afecta los cambios en un elemento de página formateado cuando el usuario pasa el puntero del mouse sobre el elemento. Por ejemplo, cuando agrega la pseudoclase :hover a un estilo de clase .navigation (.navigation:hover) para crear una nueva regla, todos los elementos de texto formateados con la regla .navigation cambiarán según las propiedades de .navigation: regla de desplazamiento.
Abra el archivo cafe_townsend.css.
Seleccione toda la regla de navegación.
Copiar texto ("Editar">"Copiar").
Haga clic una vez al final de la regla y luego presione Entrar (Windows) o Retorno (Macintosh) unas cuantas veces más para crear espacio.
Pega ("Editar" > "Pegar") el texto copiado en el espacio que acabas de crear.
Agregue la pseudoclase :hover al selector .navigation pegado de la siguiente manera:
En la nueva regla .navigation:hover, reemplace el color de fondo actual (#993300) con #D03D03.
Guarde y cierre el archivo.
Abra el archivo index.html en la ventana Documento y obtenga una vista previa de la página en un navegador (Archivo > Vista previa en el navegador).
Cuando coloca el puntero del mouse sobre cualquier enlace, puede ver el nuevo efecto de mouseover.