Ayuda de Dreamweaver sobre hojas de estilo

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.
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.
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.
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.
o
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.
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:
o Añadir un estilo nuevo.
o Haga doble clic en un objeto existente para abrirlo y poder editarlo.
3. En el cuadro de diálogo que aparece a continuación, seleccione Tipo y configure los atributos de
estilo que desee.
Deje en blanco cualquiera de los atributos siguientes si no son importantes para el estilo:
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.
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:
o Añadir un estilo nuevo.
o Haga doble clic en un objeto existente para abrirlo y poder editarlo.
3. En el cuadro de diálogo que aparece a continuación, seleccione Fondo y configure los
atributos de estilo que desee.
Deje en blanco cualquiera de los atributos siguientes si no son importantes para el estilo:
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.
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:
o Añadir un estilo nuevo.
o Haga doble clic en un objeto existente para abrirlo y poder editarlo.
3. En el cuadro de diálogo que aparece a continuación, seleccione Bloque y configure los
atributos de estilo que desee.
Deje en blanco cualquiera de los atributos siguientes si no son importantes para el estilo:
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.
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:
o Añadir un estilo nuevo.
o Haga doble clic en un objeto existente para abrirlo y poder editarlo.
3. En el cuadro de diálogo que aparece a continuación, seleccione Cuadro y configure los
atributos de estilo que desee.
Deje en blanco cualquiera de los atributos siguientes si no son importantes para el estilo:
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.
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:
o Añadir un estilo nuevo.
o Haga doble clic en un objeto existente para abrirlo y poder editarlo.
3. En el cuadro de diálogo que aparece a continuación, seleccione Borde y configure los
atributos de estilo que desee.
Deje en blanco cualquiera de los atributos siguientes si no son importantes para el estilo:
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.
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:
o Añadir un estilo nuevo.
o Haga doble clic en un objeto existente para abrirlo y poder editarlo.
3. En el cuadro de diálogo que aparece a continuación, seleccione Lista y configure los
atributos de estilo que desee.
Deje en blanco cualquiera de los atributos siguientes si no son importantes para el estilo:
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).
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:
o Añadir un estilo nuevo.
o Haga doble clic en un objeto existente para abrirlo y poder editarlo.
3. En el cuadro de diálogo que aparece a continuación, seleccione Posición y configure los atributos de
estilo que desee.
Deje en blanco cualquiera de los atributos siguientes si no son importantes para el estilo:
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
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:
o Añadir un estilo nuevo.
o Haga doble clic en un objeto existente para abrirlo y poder editarlo.
3. En el cuadro de diálogo que aparece a continuación, seleccione Extensiones y configure los atributos
de estilo que desee.
Deje en blanco cualquiera de los atributos siguientes si no son importantes para el estilo:
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.