Nuevo estilo (Cuadro de diálogo), Diseño

Actualización: noviembre 2007

La categoría Diseño de los cuadros de diálogo Nuevo estilo y Modificar estilo permite definir las reglas de estilo de hoja de estilos en cascada (CSS) para el diseño de elementos de la interfaz de usuario en una página web. Puede aplicar estas reglas de estilo directamente a elementos HTML o agregarlas a la página actual o a una hoja de estilos externa.

Para definir una regla de estilo de diseño de CSS para elementos de la interfaz de usuario de la página actual

1. Abra la página en la vista Diseño o la vista Código.

2. Opcionalmente, seleccione el texto o los elementos HTML a los que aplicar el estilo.

3. En el menú Formato, haga clic en Nuevo estilo.

   Aparece el cuadro de diálogo Nuevo estilo.

4. En el panel Categoría, seleccione Diseño.

   Las selecciones de estilo de diseño se muestran en el panel derecho.

Cuando aplique estilos al texto seleccionado en la vista Diseño, los atributos de estilo se insertarán en el marcado HTML de la página. Cambie a la vista Código para revisar los nuevos atributos de estilo.

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

1. Abra una hoja de estilos externa existente.

2. Coloque el cursor entre las llaves de la regla de estilo que se va a modificar.

3. En el menú Estilos, haga clic en Generar estilo.

   Aparece el cuadro de diálogo Modificar estilo.

   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 cursor entre las llaves situadas detrás del selector de una regla de estilo.

4. En el panel izquierdo, haga clic en Diseño.

   Las selecciones de estilo de diseño aparecen en el panel derecho.

Puede aplicar una clase de estilo CSS a un elemento de la página web o al elemento body en sí estableciendo la propiedad class del elemento en el nombre del selector de clase.

• Cómo: Usar la ventana Propiedades de CSS

• Tutorial: Crear y modificar un archivo CSS

• Tutorial: Trabajar con un archivo CSS existente

• Tutorial: Edición HTML básica en Visual Web Developer

En las tablas siguientes se indican las opciones disponibles bajo la categoría Diseño de los cuadros de diálogo Nuevo estilo y Modificar estilo.

Opción de Diseño

• visibility
  Si un elemento está visible u oculto. Los valores son los siguientes:

  • collapse   Cuando se utiliza con elementos de tabla, este valor oculta una fila o una columna. En los demás elementos, este valor indica lo mismo que hidden.

  • hidden   Hace que el elemento sea invisible.

  • visible   Hace que el elemento sea visible.

  • inherit   El elemento hereda su propiedad de visibilidad de un elemento primario.

• display
  Cómo se muestra un elemento. Los valores son los siguientes:

  • block   El elemento se mostrará en el nivel de bloque, con saltos de línea antes y después.

  • inline   El elemento se mostrará insertado, sin saltos de línea antes ni después.

  • inline-box   El elemento se mostrará insertado como un cuadro sin saltos de línea antes ni después del cuadro.

  • inline-table   El elemento se mostrará insertado como una tabla, sin saltos de línea antes ni después de la tabla.

  • list-item   El elemento se mostrará como un elemento de una lista.

  • none   El elemento estará oculto.

  • run-in   El elemento se mostrará en el nivel de bloque o insertado, según el contexto.

  • table   El elemento se mostrará como un bloque de tabla, con un salto de línea antes y después de la tabla.

  • table-caption   El elemento se mostrará como un título de tabla.

  • table-cell   El elemento se mostrará como una celda de tabla.

  • table-column   El elemento se mostrará como una columna de tabla.

  • table-column-group   El elemento se mostrará como un grupo de columnas de tabla. Este grupo puede contener una o varias columnas.

  • table-footer-group   El elemento se mostrará como un grupo de pies de tabla. Este grupo puede contener uno o varios pies.

  • table-header-group   El elemento se mostrará como un grupo de encabezados de tabla. Este grupo puede contener uno o varios encabezados.

  • table-row   El elemento se mostrará como una fila de tabla.

  • table-row-group   El elemento se mostrará como un grupo de filas de tabla. Este grupo puede contener una o varias filas.

  • inherit   El elemento hereda su propiedad de visualización de un elemento primario.

• float
  Si un elemento va a flotar a la izquierda o la derecha, permitiendo que el texto se ajuste alrededor de él o se mostrará insertado. Esta propiedad se utiliza habitualmente con imágenes, pero también se aplica a bloques de texto. Los valores son los siguientes:

  • left   El elemento flota a la izquierda, dentro del elemento primario.

  • none   El elemento se muestra insertado en la posición donde aparece en el texto.

  • right   El elemento flota a la derecha, dentro del elemento primario.

  • inherit   El elemento hereda el valor de su propiedad float de un elemento primario.

• borrar
  Los lados de un elemento que no permiten elementos flotantes. Los valores son los siguientes:

  • both   El elemento no permite elementos flotantes en los lados derecho ni izquierdo.

  • left   El elemento desplaza hacia abajo un elemento flotante situado en su lado izquierdo.

  • none   El elemento permite elementos flotantes en todos los lados.

  • right   El elemento desplaza hacia abajo un elemento flotante situado en su lado derecho.

  • inherit   El elemento hereda su propiedad clear de un elemento primario.

• cursor
  El tipo de cursor que se va a mostrar. Los valores son los siguientes:

  • auto (valor predeterminado)   El explorador establece el cursor.

  • crosshair   El cursor se representa en forma de cruz.

  • default   El cursor predeterminado (habitualmente una flecha).

  • e-resize   El cursor utilizado para dar un nuevo tamaño a un elemento hacia la derecha (este).

  • help   El cursor que indica que existe ayuda disponible (habitualmente un signo de interrogación).

  • move   El cursor que indica que un objeto se puede mover.

  • n-resize   El cursor utilizado para dar nuevo tamaño a un elemento hacia arriba (norte).

  • ne-resize   El cursor utilizado para dar nuevo tamaño a un elemento hacia arriba y la derecha (nordeste).

  • nw-resize   El cursor utiliza para dar nuevo tamaño a un elemento hacia arriba y la izquierda (noroeste).

  • pointer   El cursor se representa como un puntero (habitualmente una mano).

  • progress   El cursor que indica que el programa está en curso.

  • s-resize   El cursor utilizado para dar nuevo tamaño a un elemento hacia abajo (sur).

  • se-resize   El cursor utilizado para dar nuevo tamaño a un elemento hacia abajo y la derecha (sudeste).

  • sw-resize   El cursor utilizado para dar nuevo tamaño a un elemento hacia abajo y la izquierda (suroeste).

  • text   El cursor utilizado para texto.

  • w-resize   El cursor utiliza para dar nuevo tamaño a un elemento hacia la izquierda (oeste).

  • wait   El cursor que indica que el programa está ocupado (habitualmente un reloj de arena).

  • inherit   El elemento hereda su propiedad cursor de un elemento primario.

• desbordamiento
  Qué sucede cuando el contenido de un elemento desborda su área. Los valores son los siguientes:

  • auto   Sólo se muestran barras de desplazamiento si se recorta el contenido.

  • hidden   El contenido se recorta para adaptarse al elemento y no se muestra ninguna barra de desplazamiento.

  • scroll   El contenido se recorta para adaptarse al elemento y se muestra una barra de desplazamiento.

  • visible (valor predeterminado) El contenido se muestra aunque esté situado fuera del elemento.

  • inherit   El elemento hereda su propiedad overflow de un elemento primario.

• clip
  Las dimensiones rectangulares de un elemento. Si el elemento es mayor que el área definida, se recortará para adaptarse al área. Para especificar las dimensiones, utilice los cuadros top, right, bottom y left.

• top
  El borde superior del rectángulo de recorte. Si especifica un valor, puede seleccionar las unidades en la lista.

• right
  El borde derecho del rectángulo de recorte. Si especifica un valor, puede seleccionar las unidades en la lista.

• bottom
  El borde inferior del rectángulo de recorte. Si especifica un valor, puede seleccionar las unidades en la lista.

• left
  El borde izquierdo del rectángulo de recorte. Si especifica un valor, puede seleccionar las unidades en la lista.

Otros elementos de la interfaz de usuario

• Selector
  (Sólo cuadro de diálogo Nuevo estilo) Permite escribir un nombre de clase o hacer clic en un elemento HTML al que se aplica el estilo. Los nombres de clase deben comenzar con un punto (.). También puede seleccionar (estilo en línea), lo que hace que el estilo se inserte en el texto o elementos HTML seleccionados.

• Definir en
  (Sólo cuadro de diálogo Nuevo estilo) Permite especificar dónde se escribe la definición de la regla de estilo. Los valores son los siguientes:

  • Página actual   La regla de estilo se escribe en un elemento style de la página actual.

  • Nueva hoja de estilos   Se agrega una nueva hoja de estilos CSS al proyecto y la regla se escribe en ella.

  • Hoja de estilos existente   Se agrega la regla de estilo a la hoja de estilos CSS especificada mediante la lista Dirección URL.

• Dirección URL
  (Sólo cuadro de diálogo Nuevo estilo) Permite seleccionar una hoja de estilos CSS. Esta opción está habilitada sólo cuando Definir en está establecido en Hoja de estilos existente.

• Aplicar nuevo estilo a la selección del documento
  (Sólo cuadro de diálogo Nuevo estilo) Especifica que el estilo se aplica al texto, clase o elemento HTML seleccionado.

• Vista previa
  Muestra un ejemplo de cómo aparecerá la regla de estilo al aplicarla.

• Descripción
  Muestra la definición CSS de la regla de estilo.

Vea también

Conceptos

Información general sobre el trabajo con CSS