Bordes, Generador de estilos (Cuadro de diálogo)

Artículo
10/07/2008

Actualización: noviembre 2007

La página Bordes del cuadro de diálogo Generador de estilos permite definir atributos de estilo CSS (hoja de estilos en cascada) que determinan el borde y los márgenes del área alrededor de un elemento HTML. Puede aplicar directamente estos atributos a elementos HTML o agregarlos a reglas de estilo CSS.

Para aplicar los atributos de bordes 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 Bordes en el panel izquierdo del cuadro de diálogo Generador de estilos.

En el panel derecho, aparecerá el cuadro de diálogo Bordes, Generador de estilos.

Al aplicar formato a elementos seleccionados en la vistaDiseño, los atributos de estilo CSS se insertan en línea en el código de marcado HTML de la página. Pase a la vista HTML para revisar los nuevos atributos de estilo CSS insertados.

Para agregar atributos de bordes a un estilo CSS definido 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 al estilo deseado.
Haga clic en Generar estilo en el menú Estilos para abrir el cuadro de diálogo Generador de estilos.
Haga clic en Bordes en el panel izquierdo del cuadro de diálogo Generador de estilos.

En el panel derecho, aparecerá el cuadro de diálogo Bordes, 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.

Se puede aplicar una clase de estilo CSS definida en una hoja de estilos externa a la mayoría de los elementos del elemento <BODY> de una página Web mediante la asignación del selector de estilo CSS como propiedad CLASS del elemento.

Las opciones disponibles en la página Márgenes del cuadro de diálogo Generador de estilos son:

Tareas

Elementos de interfaz de usuario

Márgenes

Permite establecer atributos que controlan la distancia entre la superficie rectangular que rodea a un elemento y otros elementos. Especifique valores en uno o varios campos (Superior, Inferior, Izquierdo o Right) y, a continuación, seleccione una opción de unidad: px (valor predeterminado), pt, pc, mm, cm, in, em, ex o %. Por ejemplo, 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:

MARGIN-TOP: 50px; margin-bottom:50px

Nota:
Los valores de margen pueden ser positivos o negativos.

Relleno

Establece atributos que controlan la cantidad de espacio existente entre un elemento y su margen o entre un elemento y su borde (si el objeto tiene un borde). 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 %. Por ejemplo, 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:

PADDING-TOP: 50px; PADDING-BOTTOM:50px

Nota:
Los valores de relleno deben ser positivos.

Bordes

Los siguientes atributos permiten controlar el borde del área rectangular que rodea a un elemento.

Seleccionar el borde que se va a cambiar
Establece el borde al que se va a dar formato. Puede seleccionar Todos, Superior, Inferior, Izquierdo o Derecho. No se agregará el código al estilo hasta que seleccione un estilo de borde.
Estilo
Establece el estilo que se va a aplicar al borde especificado. Puede seleccionar <Sin establecer>, Ninguno, Línea sólida, Línea doble, Surco, Rugoso, Bajorrelieve o Altorrelieve. Por ejemplo, si selecciona Superior como borde seleccionado y Línea sólida como estilo, se agregará la siguiente línea de código:

BORDER-TOP-STYLE:solid
Ancho
Establece el ancho del borde especificado. Puede seleccionar <Sin establecer> (ninguna opción elegida), Fino, Medio, Grueso o Personalizado. Si selecciona Personalizado, se muestran varios campos adyacentes donde puede especificar un número y seleccionar una opción de unidad: px (valor predeterminado), pt, pc, mm, cm, in, em, ex o %. Por ejemplo, si selecciona Superior como borde seleccionado, Línea sólida como estilo y Personalizado como ancho, escribe 50 en el campo y después acepta la opción de unidad predeterminada, se agregará la siguiente línea de código:

BORDER-TOP:50px solid
Color
Permite establecer el color del texto mostrado con el estilo. Seleccione un color en la lista desplegable o elija el botón de puntos suspensivos (...) para abrir el cuadro de diálogo Selector de color y seleccionar colores adicionales. Por ejemplo, si selecciona Superior como borde seleccionado, Línea sólida como estilo y Azul como color, se agregará la siguiente línea de código:

BORDER-TOP:blue solid