Presentación, Generador de estilos (Cuadro de diálogo)

Artículo
10/07/2008

Actualización: noviembre 2007

La página Presentación del cuadro de diálogo Generador de estilos permite definir atributos de presentación CSS (hoja de estilos en cascada). Los atributos de diseño de página determinan cómo se colocarán los elementos en el flujo de la secuencia HTML. Puede aplicar estos atributos directamente a elementos HTML o agregarlos a reglas de estilo CSS.

Para aplicar los atributos de presentación directamente a los elementos HTML de la página

Abra el documento HTML en la vista Diseño del diseñador HTML y use la ventana Esquema del documento para seleccionar el elemento al que desee aplicar formato.
Haga clic en Estilo en el menú Formato para abrir el cuadro de diálogo Generador de estilos.
Haga clic en Presentación en el panel izquierdo del cuadro de diálogo Generador de estilos.

En el panel derecho, aparecerá el cuadro de diálogo Presentación, Generador de estilos.

Cuando aplique estilos a elementos seleccionados en la vista Diseño, los atributos de estilo CSS se insertarán en línea en el código de marcado HTML de los elementos seleccionados. Cambie a la vista HTML para revisar los nuevos atributos de estilo insertados.

Para agregar atributos de presentación a una regla de estilo CSS definida en una hoja de estilos externa

Abra una hoja de estilos externa existente y sitúe el punto de inserción entre las llaves ({ }) situadas detrás del selector correspondiente a la regla de estilo deseada.
Haga clic en Generar estilo en el menú Estilos para abrir el cuadro de diálogo Generador de estilos.
Haga clic en Presentación en el panel izquierdo del cuadro de diálogo Generador de estilos.

En el panel derecho, aparecerá el cuadro de diálogo Presentación, Generador de estilos.

Nota:
El menú Estilos aparecerá cuando abra una hoja de estilos CSS externa para editarla. La opción Generar estilo del menú Estilos estará disponible cuando coloque el punto de inserción entre las llaves situadas detrás del selector de una regla de estilo.

Una clase de estilos CSS definida en una hoja de estilos externa puede aplicarse a un elemento del elemento <BODY> de una página Web (en este caso, incluyendo el propio elemento <BODY>) mediante la asignación del selector de estilo CSS como propiedad CLASS del elemento.

Las opciones disponibles en la página Presentación del cuadro de diálogo Generador de estilos son:

Tareas

Elementos de interfaz de usuario

Control de flujo

Este conjunto de atributos permite controlar el flujo de elementos en el documento HTML. Las zonas de vista previa contiguas a los selectores de Control de flujo se actualizarán a medida que se seleccionen opciones. Los siguientes atributos pueden afectar a la apariencia y al rendimiento de las páginas cuando se muestren en los exploradores.

Visibilidad
Establece el valor Oculto (invisible) o Visible para la propiedad Visibilidad. Puede seleccionar <Sin establecer> (ninguna opción elegida), Oculto o Visible. Por ejemplo, si elige Oculto, se insertará el siguiente marcado CSS:

VISIBILITY:hidden

Nota:

Si el atributo es <Sin establecer>, no se agregará código al estilo.

Nota:
Si el atributo es <Sin establecer>, no se agregará código al estilo.

Mostrar
Establece los valores de un atributo DISPLAY para un elemento. Se puede especificar si se muestra un elemento y si un elemento mostrado aparece como un elemento de bloque o dentro del flujo lineal. Puede seleccionar <Sin establecer> (ninguna opción elegida), No mostrar, Como elemento de bloque o Como elemento en línea. Un elemento de tipo bloque suele iniciar una línea nueva y no puede ser mayor que el contenedor primario. Por ejemplo, un elemento con estilo <H1> que esté dentro de un elemento <BODY> no puede ser mayor que el elemento <BODY> que lo contiene. Normalmente, un elemento en línea no inicia una línea nueva y se le asigna un tamaño en función del alto y el ancho de su contenido. Por ejemplo, si elige Como elemento de bloque, se insertará el siguiente código de marcado CSS:

DISPLAY:block

Nota:
Si el valor del atributo es <Sin establecer>, no se agregará código al estilo.

Nota:
Las propiedades Visibility y Display están relacionadas, pero no son iguales. Si oculta un elemento de una página, no se reducirá el tiempo necesario para que un explorador muestre la página. Sin embargo, el explorador omite el elemento que no aparece. En consecuencia, un explorador tardará menos en mostrar una página con elementos que no aparecen que una página con esos mismos elementos ocultos. Además, cuando ajuste líneas en torno a un elemento oculto, parecerá que las líneas se ajustan en torno a un espacio vacío. Tenga en cuenta estas dependencias al seleccionar las propiedades de diseño.

Las propiedades Visibility y Display están relacionadas, pero no son iguales. Si oculta un elemento de una página, no se reducirá el tiempo necesario para que un explorador muestre la página. Sin embargo, el explorador omite el elemento que no aparece. En consecuencia, un explorador tardará menos en mostrar una página con elementos que no aparecen que una página con esos mismos elementos ocultos. Además, cuando ajuste líneas en torno a un elemento oculto, parecerá que las líneas se ajustan en torno a un espacio vacío. Tenga en cuenta estas dependencias al seleccionar las propiedades de diseño.

Permitir flujo de texto
Permite establecer atributos que determinan cómo fluirá el texto en torno a un elemento. Puede seleccionar <Sin establecer> (ninguna opción elegida), No permitir texto en los lados, A la derecha o A la izquierda. Por ejemplo, si elige A la derecha, se insertará el siguiente código de marcado CSS:

FLOAT:left

Nota:

Si el atributo es <Sin establecer>, no se agregará código al estilo.
Permitir objetos flotantes
Permite establecer atributos que controlan en qué parte de la página se permite que floten objetos. Puede seleccionar <Sin establecer> (ninguna opción elegida), En cualquier lado (los objetos pueden flotar en los lados izquierdo y derecho de la página), Sólo a la derecha (los objetos sólo pueden flotar en el lado derecho de la página), Sólo a la izquierda (los objetos sólo pueden flotar en el lado izquierdo de la página) o No permitir (la página no admite objetos flotantes). Por ejemplo, si elige Sólo a la derecha, se insertará el siguiente código de marcado CSS:

CLEAR:left

Nota:

Si el atributo es <Sin establecer>, no se agregará código al estilo.

Nota:
Si el atributo es <Sin establecer>, no se agregará código al estilo.

Nota:
Si el atributo es <Sin establecer>, no se agregará código al estilo.

Contenido

Desbordamiento
Permite establecer atributos que controlan el comportamiento de los elementos cuando su contenido excede el alto y el ancho definidos. Puede seleccionar <Sin establecer> (ninguna opción elegida), Utilizar barras de desplazamiento si se necesita (las barras de desplazamiento aparecen si el contenido sobrepasa el tamaño de elemento definido), Utilizar siempre barras de desplazamiento (las barras de desplazamiento siempre aparecen), El contenido no está recortado (el elemento se expande para adaptarse al contenido) o El contenido está recortado (no aparece el contenido que sobrepase el tamaño del elemento). Por ejemplo, si elige El contenido no está recortado, se insertará el siguiente código de marcado CSS:

OVERFLOW:visible

Nota:

Si el valor del atributo es <Sin establecer>, no se agregará código al estilo.

Recortar

Permite establecer atributos que controlan qué parte rectangular de un elemento se va a mostrar. Por ejemplo, puede mostrar solamente la esquina superior derecha de un elemento. Especifique valores en uno o varios campos (Superior, Inferior, Izquierdo o Derecho) y, a continuación, seleccione una opción de unidad: px (valor predeterminado), pt, pc, mm, cm, in, em, ex o %.

Sólo se pueden recortar los elementos colocados en una posición absoluta. Los valores que especifique estarán relacionados con el contorno de un elemento. Por ejemplo, si establece un valor de recorte Top de 40px, la parte del elemento que esté entre 0px (parte superior del elemento) y 40px no será visible. De manera similar, si especifica 50 en los campos Superior e Inferior y, a continuación, acepta la opción de unidad predeterminada, se insertará el siguiente código de marcado CSS:

CLIP: rect(50px auto 50px auto)

Nota:
Si asigna valores a menos de cuatro campos de recorte, se asignará a los demás campos el valor auto y no se recortarán los contornos no asignados.

Imprimir saltos de página

Los siguientes atributos permiten controlar cuándo se utilizan saltos de página en los elementos que usan el estilo.

Antes
Puede seleccionar <Sin establecer> (ninguna opción elegida), Automático o Forzar un salto de página. Por ejemplo, si elige Forzar un salto de página, se insertará el siguiente código de marcado CSS:

PAGE-BREAK-BEFORE:always
Después
Puede seleccionar <Sin establecer> (ninguna opción elegida), Automático o Forzar un salto de página. Por ejemplo, si elige Forzar un salto de página, se insertará el siguiente código de marcado CSS:

PAGE-BREAK-AFTER:always