Hojas de estilos en cascada con Dreamweaver

Transcripción

1 Hojas de estilos en cascada con Dreamweaver Las hojas de estilos en cascada (CSS) son un conjunto de reglas de formato que controlan el aspecto del contenido de una página Web. Los estilos CSS aportan gran flexibilidad y control al aspecto exacto que se busca en una página, desde la posición precisa de elementos hasta el diseño de fuentes y estilos concretos. Los estilos CSS permiten definir muchas propiedades que no se pueden controlar utilizando sólo HTML. Por ejemplo, puede asignar viñetas de lista personalizadas y especificar distintos tamaños y unidades de fuente (píxeles, puntos, etc.). Si utiliza estilos CSS y define el tamaño de fuente en píxeles, conseguirá un tratamiento más coherente del diseño y el aspecto de la página en múltiples navegadores. Además del formato del texto, puede controlar el formato y la posición de elementos de nivel de bloque (block-level) de una página Web. Por ejemplo, puede ajustar márgenes, bordes, texto flotante sobre texto fijo, etc. Una regla de estilo CSS consta de dos partes: el selector y la declaración. El selector es el nombre del estilo (TR o P, por ejemplo) y la declaración define qué elementos forman el estilo. La declaración, a su vez, consta de dos partes: la propiedad (por ejemplo, font-family) y el valor (por ejemplo, Helvetica). La expresión en cascada hace referencia a la posibilidad de aplicar varias hojas de estilos a una misma página Web. Por ejemplo, puede crear una hoja de estilos que aplique color y otra que aplique los márgenes. Puede aplicar las dos a la misma página y crear así el diseño que desea. Una de las grandes ventajas de los estilos CSS reside en que cuentan con una capacidad simple de actualización; cuando actualiza un estilo CSS, el formato de todos los documentos que usan ese estilo se actualiza automáticamente. En Dreamweaver, se utiliza el panel Estilos CSS para crear, ver y adjuntar atributos de estilo a los documentos. Puede definir los siguientes tipos de hojas de estilos CSS en Dreamweaver: Los estilos CSS personalizados, también llamados estilos de clase, le permiten configurar atributos de estilo a cualquier rango o bloque de texto. Los estilos de etiquetas HTML redefinen el formato de una determinada etiqueta, como h1. Cuando se crea o cambia un estilo CSS para la etiqueta h1, todo el texto formateado con dicha etiqueta se actualiza inmediatamente. Los estilos del selector CSS redefinen el formato de una determinada combinación de etiquetas (por ejemplo, td h2 se aplica cada vez que aparece un encabezado h2 dentro de una celda de tabla) o de todas las etiquetas que contienen un atributo id específico (por ejemplo, #miestilo se aplica a todas las etiquetas que contienen el par atributo-valor ID= miestilo ). Las hojas de estilos CSS residen en el área head del documento. Los estilos CSS pueden definir los atributos de formato de etiquetas HTML o rangos de texto identificados mediante un atributo class. Dreamweaver MX reconoce los estilos definidos en documentos existentes siempre que se ajusten a las directrices de los estilos CSS. Sugerencia: Para mostrar la guía de referencia CSS de O Reilly incluida con Dreamweaver, haga clic en el botón Referencia de la barra de herramientas y elija O Reilly CSS Reference en el menú desplegable. La aplicación manual de formato HTML prevalece sobre el formato aplicado con estilos CSS (o HTML). Para que los estilos CSS controlen el formato de un párrafo, deberá quitar todos los estilos HTML y el formato HTML manual. La mayoría de los atributos de estilo que aplique se pueden ver en la ventana de documento. Algunos de los atributos de estilo CSS se reproducen de forma distinta en Microsoft Internet Explorer 4.0 y Netscape Navigator 4.0, y otros no son compatibles actualmente con ningún navegador.

2 Mientras trabaja en el panel Estilos CSS, puede usar la función de Dreamweaver Hoja de estilos de tiempo de diseño. Esta función le permite ocultar o mostrar los atributos de hoja de estilos mientras diseña una página con Dreamweaver (para poder ver, por ejemplo, un documento con una hoja de estilos diseñada para Navigator o para Internet Explorer). Utilización del panel Estilos CSS El panel Estilos CSS se utiliza para crear, ver las propiedades y aplicar los estilos CSS a los elementos de un documento. Para abrir el panel Estilos CSS, lleve a cabo una de estas operaciones: Elija Ventana > Estilos CSS. Pulse Mayús+F11. Los botones de opción Aplicar estilos y Editar estilos situados en la parte superior del panel Estilos CSS le permiten seleccionar distintas vistas de los estilos CSS asociados al documento actual. La vista Aplicar estilos se utiliza para seleccionar un estilo de clase y aplicarlo a un elemento del documento. Esta vista sólo muestra los estilos personalizados (de clase). Los estilos HTML redefinidos y los estilos del selector no se muestran en este panel. Como están asociados a una etiqueta HTML, sus atributos de estilo se aplican automáticamente a cualquier etiqueta del documento afectada por el estilo definido. Por ejemplo, si define atributos de estilo para la etiqueta table, la tabla de su documento se actualizará automáticamente con las definiciones de estilo que haya seleccionado. La vista Editar estilos le permite visualizar la definición de los estilos asociados al documento actual. Esta vista muestra la definición de los estilos CSS personalizados (de clase), las etiquetas HTML redefinidas y los estilos CSS del selector. También puede utilizar la vista Editar estilos para visualizar las Hojas de estilos de tiempo de diseño que ha aplicado al documento. Al crear o adjuntar hojas de estilos CSS, el nombre y los atributos del estilo aparecerán en la vista Editar estilos del panel Estilos CSS. Esta vista muestra una lista de los selectores definidos en todas las etiquetas de estilo y hojas de estilos importadas o vinculadas externamente. Aplicar estilos le permite visualizar los estilos aplicados en el documento actual, así como los estilos disponibles en una hoja de estilos externa adjunta. Cuando se crea un estilo personalizado (clase), aparece en el panel Estilos CSS y en el submenú Texto > Estilos CSS. Los botones que se muestran a continuación se encuentran en la parte inferior del panel Estilos CSS: Adjuntar hoja de estilos abre el cuadro de diálogo Vincular hoja de estilos externa. Seleccione una hoja de estilos externa para adjuntar o para importar al documento actual. Nuevo estilo CSS abre el cuadro de diálogo Nuevo estilo CSS. Puede utilizar el cuadro de diálogo Nuevo estilo CSS para seleccionar el tipo de estilo que va a crear, por ejemplo, para crear un estilo de clase, redefinir una etiqueta HTML o definir un selector CSS. Editar hoja de estilos abre el cuadro de diálogo Editar hoja de estilos. Edite los estilos en el documento actual o en una hoja de estilos externa. Eliminar estilo CSS elimina el estilo seleccionado del panel Estilos CSS, así como el formato de cualquier elemento al que se haya aplicado dicho estilo.

3 Nota: Haga clic con el botón derecho en el panel Estilos CSS para abrir un menú contextual de opciones de trabajo con comandos de la hoja de estilos CSS. Creación de un nuevo estilo CSS Cree un estilo CSS para automatizar la aplicación de formato a etiquetas HTML o a rangos de texto identificados mediante un atributo class. Para crear un estilo CSS nuevo: 1. Sitúe el punto de inserción en el documento y lleve a cabo una de las siguientes operaciones para abrir el cuadro de diálogo Nuevo estilo CSS. o En el panel Estilos CSS, haga clic en el botón Nuevo estilo CSS (+) situado en la parte inferior derecha del panel. o Si es necesario, en el inspector de propiedades, haga clic en el botón Alternar modos CSS/HTML para cambiar al Modo CSS y, a continuación, en el menú emergente Estilo CSS, seleccione Nuevo estilo CSS. o Elija Texto > Estilos CSS > Nuevo estilo CSS. Aparecerá el cuadro de diálogo Nuevo estilo CSS. 2. Defina el tipo de estilo CSS que desea crear: o Para crear un estilo personalizado que se pueda aplicar como atributo clase a un rango o un bloque de texto, seleccione Crear estilo person. (clase) y escriba el nombre del estilo en el campo Nombre. Nota: Los nombres de estilos personalizados (clase) deben comenzar por un punto y pueden contener cualquier combinación alfanumérica. Por ejemplo,.miencabezado1. Si no introduce el punto inicial, Dreamweaver lo hará de forma automática. o Para redefinir el formato predeterminado de una etiqueta HTML específica, seleccione Redefinir etiqueta HTML. En el campo Etiqueta, introduzca una etiqueta HTML o elija una en el menú emergente. o Para redefinir el formato predeterminado de una combinación concreta de etiquetas que contengan un código específico de atributo Id, seleccione Usar selector CSS. En el campo Selector, introduzca una o más etiquetas HTML o elíjalas en el menú emergente. Los selectores disponibles en el menú emergente son a:activos (a:active), a:activable (a:hover), a:vínculo (a:link) y a:visitado (a:visited). 3. Seleccione la ubicación donde se definirá el estilo: o Para crear una hoja de estilos externa, elija Nuevo archivo de hoja de estilos. o Para incrustar el estilo en el documento actual, seleccione Sólo este documento. 4. Haga clic en Aceptar. Aparecerá el cuadro de diálogo Definición de estilos. 5. Elija las opciones de estilo que desea establecer para el estilo CSS nuevo. 6. Cuando termine de configurar los atributos de estilo, haga clic en Aceptar.

4 Definición de propiedades de tipo CSS Utilice la categoría Tipo del cuadro de diálogo Definición de estilos CSS para definir la configuración básica de la fuente y del tipo de un estilo CSS. Para definir la configuración del tipo para un estilo CSS: 1. Abra el panel Estilos CSS (Mayús + F11), si aún no está abierto. 2. Abra el cuadro de diálogo Definición de estilos CSS llevando a cabo una de estas operaciones: 3. En el cuadro de diálogo que aparece a continuación, seleccione Tipo y configure los atributos de estilo que desee. Fuente establece la familia de fuentes (o serie de familias) del estilo. Los navegadores muestran el texto utilizando la primera fuente de la serie que esté instalada en el sistema del usuario. Para obtener compatibilidad con Internet Explorer 3.0, indique en primer lugar una fuente de Windows. Ambos navegadores reconocen el atributo Fuente. Tamaño define el tamaño del texto. Puede elegir un tamaño específico seleccionando el número y la unidad de medida, o bien puede elegir un tamaño relativo. El uso de píxeles como unidad evita que los navegadores distorsionen el texto. Ambos navegadores reconocen el atributo Tamaño. Estilo especifica Normal, Cursiva u Oblicuo como estilo de la fuente. El valor predeterminado es Normal. Ambos navegadores reconocen el atributo Estilo. Alto de línea establece el alto de la línea en la que se coloca el texto. Esta configuración suele denominarse leading. Seleccione Normal para hacer que el alto de línea del tamaño de la fuente se calcule de manera automática, o bien introduzca un valor exacto y seleccione una unidad de medida. Ambos navegadores reconocen el atributo Alto de línea. Decoración añade subrayado, sobreimpresión o tachado al texto o hace que el texto parpadee. El valor predeterminado para texto normal es Ninguno. El valor predeterminado para vínculos es Subrayado. Si establece el vínculo como ninguno, puede eliminar el subrayado de los vínculos definiendo una clase especial. Ambos navegadores reconocen el atributo Decoración. Grosor aplica una cantidad específica o relativa de negrita a la fuente. Normal es equivalente a 400; Negrita, a 700. Ambos navegadores reconocen el atributo Grosor. Variante establece la variante de versales en el texto. Dreamweaver no muestra este atributo en la ventana de documento. El atributo Variante es compatible con Internet Explorer, pero no con Netscape Navigator. May/Min convierte en mayúscula la primera letra de cada palabra de la selección o convierte todo en mayúsculas o minúsculas. Ambos navegadores reconocen el atributo May/Min. Color establece el color del texto. Ambos navegadores reconocen el atributo Color.

5 Definición de propiedades de fondo de estilos CSS Utilice la categoría Fondo del cuadro de diálogo Definición de estilos CSS para definir la configuración del fondo de un estilo CSS. Puede aplicar propiedades de fondo a cualquier elemento de una página Web. Por ejemplo, crear un estilo que añada color de fondo o una imagen de fondo a cualquier elemento de la página, detrás del texto, de una tabla, de la página, etc. También puede especificar la posición de una imagen de fondo. Para definir la configuración de Fondo: 1. Abra el panel Estilos CSS (Mayús+F11), si aún no está abierto. 2. Abra el cuadro de diálogo Definición de estilos CSS llevando a cabo una de estas operaciones: 3. En el cuadro de diálogo que aparece a continuación, seleccione Fondo y configure los atributos de estilo que desee. Color de fondo establece el color de fondo del elemento. Ambos navegadores reconocen el atributo Color de fondo. Imagen de fondo establece la imagen de fondo para el elemento. Ambos navegadores reconocen el atributo Imagen de fondo. Repetir determina si la imagen de fondo se repite y de qué forma lo hace. Ambos navegadores reconocen el atributo Repetir. No repetir muestra la imagen una vez al principio del elemento. Repetir forma un mosaico con la imagen en sentido horizontal y vertical detrás del elemento. Repetir x y Repetir y muestran, respectivamente, una banda horizontal y vertical de imágenes. Las imágenes se recortan para que quepan dentro de los límites del elemento. Nota: Utilice esta propiedad para redefinir la etiqueta body y establecer una imagen de fondo que no forma un mosaico ni se repite. Anexo determina si la imagen de fondo está fija en su posición original o se desplaza con el contenido. Observe que algunos navegadores pueden considerar la opción Fijo como Desplazar. Internet Explorer reconoce este atributo, a diferencia de Netscape Navigator. Posición horizontal y Posición vertical especifican la posición inicial de la imagen de fondo en relación con el elemento. Pueden emplearse para alinear una imagen de fondo en el centro de la página, tanto vertical como horizontalmente. Si la propiedad del archivo adjunto es Fijo, la posición será relativa a la ventana de documento, no al elemento. Internet Explorer reconoce este atributo, a diferencia de Netscape Navigator.

6 Definición de propiedades de bloque de estilos CSS Utilice la categoría Bloque del cuadro de diálogo Definición de estilos CSS para definir el espaciado y el alineamiento de las etiquetas y los atributos. Para definir la configuración de Bloque: 1. Abra el panel Estilos CSS (Mayús+F11), si aún no está abierto. 2. Abra el cuadro de diálogo Definición de estilos CSS llevando a cabo una de estas operaciones: 3. En el cuadro de diálogo que aparece a continuación, seleccione Bloque y configure los atributos de estilo que desee. Espac. palabras establece el espacio adicional entre las palabras. Para establecer un valor concreto, elija valor en el menú emergente e introduzca un valor numérico. En el menú emergente situado a la derecha, elija una unidad de medida (por ejemplo, píx, puntos, etc.). Nota: Puede especificar valores negativos, pero su visualización dependerá del navegador. Dreamweaver no muestra este atributo en la ventana de documento. Espaciado entre letras aumenta o disminuye el espacio entre letras o caracteres. Para disminuir el espacio entre caracteres, establezca un valor negativo, por ejemplo (-4). La configuración del espacio entre letras anula la justificación del texto. Internet Explorer 4 y posterior y Netscape Navigator 6 reconocen el atributo Espaciado entre letras. Alineamiento vertical especifica el alineamiento vertical del elemento al que se aplica. Dreamweaver sólo muestra este atributo en la ventana de documento cuando se aplica a la etiqueta <img>. Alineamiento de texto establece cómo se alineará el texto dentro del elemento. Ambos navegadores reconocen el atributo Alineamiento de texto. Sangría de texto especifica la cantidad de sangría que se aplica a la primera línea de texto. Se puede emplear un valor negativo para crear una sangría negativa, pero su visualización dependerá del navegador. Dreamweaver sólo muestra este atributo en la ventana de documento cuando la etiqueta se aplica a elementos de nivel de bloque. Ambos navegadores reconocen el atributo Sangría de texto. Espacio en blanco determina qué cantidad de espacio en blanco se gestiona dentro del elemento. Dispone de tres opciones: Normal contrae el espacio en blanco; Pre lo gestiona como si el texto se encontrara entre etiquetas pre (es decir, se respeta todo el espacio en blanco, incluidos los espacios, tabulaciones y retornos); sin ajuste especifica que el texto sólo se ajusta cuando se encuentra una etiqueta br. Dreamweaver no muestra este atributo en la ventana de documento. Netscape Navigator e Internet Explorer 5.5 reconocen el atributo Espacio en blanco. Mostrar especifica si un elemento se muestra y, si es así, cómo lo hace. Ninguno desactiva el elemento al que se ha asignado.

7 Definición de propiedades de cuadro de estilos CSS Utilice la categoría Cuadro del cuadro de diálogo Definición de estilos CSS para definir la configuración de los atributos y etiquetas que controlan la ubicación de los elementos en la página. Puede aplicar la configuración en los distintos lados de un elemento al establecer el relleno y los márgenes o utilizar marcar Igual para todo para aplicar la misma configuración a todos los lados del elemento. Para definir la ubicación de los elementos en la página: 1. Abra el panel Estilos CSS (Mayús + F11), si aún no está abierto. 2. Abra el cuadro de diálogo Definición de estilos CSS llevando a cabo una de estas operaciones: 3. En el cuadro de diálogo que aparece a continuación, seleccione Cuadro y configure los atributos de estilo que desee. Ancho y Alto establecen el ancho y alto del elemento. Flotar determina qué lado de otros elementos, como texto, capas o tablas, flotará alrededor de un elemento. Otros elementos se ajustan alrededor del elemento flotante de la forma habitual. Ambos navegadores reconocen el atributo Flotar. Borrar define los lados que no permiten capas. Si aparece una capa en el lado libre, el elemento con esta configuración pasará a situarse debajo de él. Ambos navegadores reconocen el atributo Borrar. Relleno especifica la cantidad de espacio entre el contenido de un elemento y su borde (o el margen si no hay ningún borde). Anule la selección de la opción Igual para todo para establecer el relleno de los distintos lados del elemento. Igual para todo establece los mismos atributos de relleno en la parte superior (Sup.), inferior (Inf.), derecha (Dcha.) e izquierda (Izda.) del elemento al que se aplica. Margen especifica la cantidad de espacio entre el borde de un elemento (o el relleno si no hay borde) y otro elemento. Dreamweaver sólo muestra este atributo en la ventana de documento cuando se aplica a elementos de nivel de bloque (párrafos, encabezados, listas, etc.). Anule la selección de la opción Igual para todo para establecer el margen de los distintos lados del elemento. Igual para todo establece los mismos atributos de margen en la parte superior (Sup.), inferior (Inf.), derecha (Dcha.) e izquierda (Izda.) del elemento al que se aplica.

8 Definición de propiedades de borde de estilos CSS Utilice la categoría Borde del cuadro de diálogo Definición de estilos CSS para definir la configuración de los bordes que rodean a los elementos (ancho, color o estilo). Para establecer el estilo de borde de un elemento: 1. Abra el panel Estilos CSS (Mayús+F11), si aún no está abierto. 2. Abra el cuadro de diálogo Definición de estilos CSS llevando a cabo una de estas operaciones: 3. En el cuadro de diálogo que aparece a continuación, seleccione Borde y configure los atributos de estilo que desee. Estilo establece el aspecto del estilo del borde. El aspecto del estilo puede variar en función del navegador. Dreamweaver muestra todos los estilos como sólidos en la ventana de documento. Ambos navegadores reconocen el atributo Estilo. Anule la selección de la opción Igual para todo para establecer el estilo del borde de los distintos lados del elemento. Igual para todo establece los mismos atributos de estilo de borde en la parte superior (Sup.), inferior (Inf.), derecha (Dcha.) e izquierda (Izda.) del elemento al que se aplica. Ancho especifica el grosor del borde del elemento. Ambos navegadores reconocen el atributo Ancho. Anule la selección de la opción Igual para todo para establecer el ancho del borde de los distintos lados del elemento. Igual para todo establece el mismo ancho de borde en la parte superior (Sup.), inferior (Inf.), derecha (Dcha.) e izquierda (Izda.) del elemento al que se aplica. Color establece el color del borde. Puede especificar colores distintos para cada lado, pero su visualización dependerá del navegador. Anule la selección de la opción Igual para todo para establecer el color del borde de los distintos lados del elemento. Igual para todo establece el mismo color de borde en la parte superior, inferior, derecha e izquierda del elemento al que se aplica.

9 Definición de propiedades de lista de estilos CSS Utilice la categoría Lista del cuadro de diálogo Definición de estilos CSS para definir la configuración de la lista para las etiquetas de lista, por ejemplo, tamaño y tipo de viñetas. Para definir un estilo de lista: 1. Abra el panel Estilos CSS (Mayús + F11), si aún no está abierto. 2. Abra el cuadro de diálogo Definición de estilos CSS llevando a cabo una de estas operaciones: 3. En el cuadro de diálogo que aparece a continuación, seleccione Lista y configure los atributos de estilo que desee. Tipo establece la apariencia de viñetas o números. Ambos navegadores reconocen el atributo Tipo. Imagen de viñeta permite especificar una imagen personalizada para viñetas. Haga clic en Examinar para buscar una imagen o escriba la ruta de la imagen. Posición determina si el elemento de texto de la lista se ajusta a una sangría (exterior) o si el texto se ajusta al margen izquierdo (interior).

10 Definición de propiedades de posición de estilos CSS Los atributos de estilo de Posición cambian la etiqueta o el bloque de texto seleccionado a una nueva capa utilizando la etiqueta predeterminada para definir capas, de acuerdo con la configuración de preferencias de Capa. Para establecer la posición de los atributos de capa: 1. Abra el panel Estilos CSS (Mayús + F11), si aún no está abierto. 2. Abra el cuadro de diálogo Definición de estilos CSS llevando a cabo una de estas operaciones: 3. En el cuadro de diálogo que aparece a continuación, seleccione Posición y configure los atributos de estilo que desee. Tipo determina cómo deberá colocar el navegador la capa. Ofrece las opciones siguientes: Absoluta coloca la capa utilizando las coordenadas introducidas en los cuadros Colocación en relación con la esquina superior izquierda de la página. Relativa coloca la capa utilizando las coordenadas introducidas en los cuadros Colocación en relación con la posición del objeto en el flujo de texto del documento. Esta opción no se muestra en la ventana de documento. Estática coloca la capa en su ubicación en el flujo de texto. Visibilidad determina el estado inicial de visualización de la capa. Si no especifica una propiedad de visibilidad, la mayoría de los navegadores heredarán el valor del padre de forma predeterminada. Seleccione una de las siguientes opciones de visibilidad: Heredada usa la propiedad de visibilidad de la capa padre. Si la capa no tiene padre, será visible. Visible muestra el contenido de la capa, independientemente del valor de la capa padre. Oculto no muestra el contenido de la capa, independientemente del valor de la capa padre. Índice Z determina el orden de apilamiento de la capa. Las capas con los números más altos aparecerán por encima de las capas con los números más bajos. Los valores pueden ser positivos o negativos. (Es más fácil cambiar el orden de apilamiento de las capas utilizando el panel Capas). Desbordamiento (para capas CSS, solamente) determina lo que ocurre si el contenido de una capa excede de su tamaño. Estas propiedades controlan cómo se gestiona esta ampliación de la siguiente manera: Visible aumenta el tamaño de la capa para que todo su contenido sea visible. La capa se expande hacia abajo y hacia la derecha. Oculto mantiene el tamaño de la capa y recorta cualquier contenido que no quepa. No hay barras de desplazamiento. Desplazar añade barras de desplazamiento a la capa independientemente de que el contenido exceda o no del tamaño de la capa. La inclusión específica de barras de desplazamiento evita la

11 confusión que provoca la aparición y desaparición de las barras de desplazamiento en un entorno dinámico. Esta opción no se muestra en la ventana de documento y sólo funciona en aquellos navegadores que admiten barras de desplazamiento. Compatible con Internet Explorer y Netscape Navigator 6. Auto presenta las barras de desplazamiento solamente cuando el contenido de la capa excede de sus límites. Esta opción no se muestra en la ventana de documento. Colocación especifica la ubicación y el tamaño de la capa. La forma que tiene el navegador de interpretar la ubicación dependerá de la configuración de Tipo. Si el contenido de la capa excede del tamaño especificado, los valores de tamaño se anularán. El píxel es la unidad predeterminada de ubicación y tamaño. También puede especificar las unidades siguientes para capas CSS: pc (picas), pt (puntos), in (pulgadas), mm (milímetros), cm (centímetros), (ems), (exs) o % (porcentaje del valor padre). Las abreviaturas deben seguir al valor sin espacio de separación: por ejemplo, 3mm. Recorte define la parte de la capa que será visible. Si especifica una región de recorte, podrá acceder a ella con un lenguaje de scripts como JavaScript y manipular las propiedades para crear efectos especiales como barridos. Estos barridos se pueden configurar utilizando líneas de tiempo y el comportamiento Cambiar propiedad. Definición de propiedades de extensiones de estilos CSS Los atributos de estilo de Extensiones incluyen filtros, saltos de página y opciones de cursor. Los navegadores no reconocen casi ninguno (Internet Explorer 4.0 y posterior, sí lo hace). Para especificar los atributos de extensión: 1. Abra el panel Estilos CSS (Mayús + F11), si aún no está abierto. 2. Abra el cuadro de diálogo Definición de estilos CSS llevando a cabo una de estas operaciones: 3. En el cuadro de diálogo que aparece a continuación, seleccione Extensiones y configure los atributos de estilo que desee. Salto de página efectúa un salto de página al imprimir antes o después del objeto controlado por el estilo. Seleccione la opción que desea establecer en el menú emergente. Esta opción es incompatible con todos los navegadores 4.0, pero es posible que la reconozcan las versiones futuras de estos programas. Cursor cambia la imagen del puntero cuando éste se encuentra sobre el objeto controlado por el estilo. Seleccione la opción que desea establecer en el menú emergente. Internet Explorer 4.0 y versiones posteriores y Netscape Navigator 6 reconocen este atributo. Filtro aplica efectos especiales al objeto controlado por el estilo, incluidas las opciones borroso e inversión. Elija un efecto en el menú emergente.