Cómo: Usar la barra de herramientas Aplicación de estilo directo

Actualización: noviembre 2007

La barra de herramientas Aplicación de estilo directo permite crear y modificar estilos. Puede usar la barra de herramientas Aplicación de estilo directo con otras herramientas CSS de Visual Studio. Entre ellas se incluyen la ventana Propiedades de CSS, la ventana Administrar estilos y la ventana Aplicar estilos.

Si aplica estilo a un elemento de página que aún no tiene una regla de estilo CSS, puede usar la barra de herramientas Aplicación de estilo directo para generar y aplicar un nuevo estilo. Por ejemplo, podría seleccionar un párrafo y aplicar color al texto con la barra de herramientas Aplicación de estilo directo. En este caso, Visual Studio crea una nueva regla de estilo CSS y la aplica al texto. Si da formato a otra propiedad del mismo párrafo, como la familia de fuentes del párrafo, Visual Studio agrega una nueva declaración de propiedad a la regla de estilo generada.

Trabajar con la barra de herramientas Aplicación de estilo directo

Puede usar la barra de herramientas Aplicación de estilo directo para generar y modificar estilos en modo automático o manual. Si no está familiarizado con la creación de CSS, use el modo automático para que Visual Studio genere automáticamente las reglas de estilo. Si es un autor de CSS experimentado, puede usar el modo manual, que proporciona mayor control sobre la forma en que se escribe una regla de estilo.

En modo manual, puede agregar una nueva declaración de propiedad a un estilo diferente. Esto incluye un nuevo estilo, un estilo generado diferente o un estilo que ha creado. Cuando se utiliza el modo Manual, Visual Studio agregará los elementos a una página web, si es necesario, para asignar el estilo correctamente.

Información general acerca de la barra de herramientas Aplicación de estilo directo

La tabla siguiente enumera los elementos de la barra de herramientas Aplicación de estilo directo.

Nota:
Si trabaja en modo automático, la lista desplegable Regla de destino y el botón Volver a usar estilo existente están deshabilitados.

Elemento	Descripción
	La lista desplegable Aplicación de estilo permite establecer el modo en que se generan y modifican los estilos. Si no está familiarizado con la creación de CSS, use el modo automático. Si es un autor de CSS experimentado, puede usar el modo manual para simplificar el proceso del diseño.
	La lista desplegable Regla de destino afecta a las nuevas propiedades CSS. Puede usarla para ver el nombre del estilo que se va a modificar o el tipo de estilo que se crea para el elemento actual. De forma predeterminada, se establece como destino el estilo con la prioridad más alta. Si no existe ningún estilo, Nueva clase automática se convierte en el valor predeterminado. La lista desplegable Regla de destino proporciona las opciones siguientes. El efecto de cada opción depende de la selección actual. Estilo insertado   Revisa una declaración de propiedad existente o agrega una nueva declaración de propiedad a un estilo insertado existente. Nuevo estilo insertado   Agrega la declaración de propiedad a un estilo insertado recientemente generado y aplica el estilo a la etiqueta de apertura actual. Esta opción sólo está disponible si todavía no existe un estilo insertado en el elemento de página actual. Nuevo Id. automático "nº de id."   Crea un nuevo estilo para un identificador aplicado que no tiene un conjunto de reglas. Esta opción resulta útil si ha creado identificador para los elementos de página que no tienen los estilos y aplica estilos a estos elementos. Nueva clase automática   Crea un nuevo estilo para una clase aplicada que aún no tiene una regla. Nueva clase automática ".rule"   Agrega la declaración de propiedad a un estilo basado en clase generado automáticamente y, a continuación, aplica el estilo a la etiqueta de apertura actual. Esta opción resulta útil si ha creado clases para los elementos de página que no tienen los estilos y aplica estilos a estos elementos. Aplicar nuevo estilo   Crea un nuevo estilo con el cuadro de diálogo Nuevo estilo y opcionalmente aplica el estilo a la selección actual.
	El botónVolver a usar estilo afecta a los cambios realizados en estilos y propiedades existentes. Si el estilo seleccionado no contiene una declaración para la propiedad a la que da formato, pero otro estilo de la selección actual sí la contiene, Volver a usar estilo existente determina qué estilo se modifica. Cuando se selecciona Volver a usar estilo existente, se modifica la propiedad que ya contiene una declaración. Si no se selecciona Volver a usar estilo existente, se modifica la regla de destino.
	El botónMostrar superposición especifica si se muestra una superposición en los elementos a los que se aplica la regla seleccionada. Cuando se selecciona esta opción, el diseñador muestra un cuadro punteado alrededor del contenido que usa el estilo seleccionado en la lista desplegable Regla de destino. La superposición permite ver a qué elementos afectan los cambios que realiza con la barra de herramientas Aplicación de estilo directo. Esto resulta especialmente útil si aplica varias reglas, ya que facilita el acceso a una regla concreta para modificarla.

Usar la barra de herramientas Aplicación de estilo directo con controles ASP.NET

Puede usar la barra de herramientas Aplicación de estilo directo para cambiar estilos en controles de servidor ASP.NET que admiten la aplicación de estilo. Puede usar la barra de herramientas para aplicar estilos a controles de servidor que definen propiedades para estilos insertados y para el atributo CssClass, y que heredan de la clase WebControl. Los controles de usuario no tienen estas propiedades definidas. Por tanto, no puede usar la barra de herramientas con controles de usuario.

Las reglas de estilo basadas en identificadores no se deben usar con controles de servidor. El nombre que se asigna en el marcado o en el código de servidor no es necesariamente el identificador del elemento HTML que se representa. Por tanto, los identificador no constituyen un método confiable para aplicar estilo a los controles de servidor.

Usar la barra de herramientas Aplicación de estilo directo

Puede establecer el modo de la aplicación en la barra de herramientas Aplicación de estilo directo para determinar cómo se crean las reglas de estilo.

Para establecer el modo de aplicación en la barra de herramientas Aplicación de estilo directo

• En la barra de herramientas Aplicación de estilo directo, haga clic en la lista desplegable Aplicación de estilo y, a continuación, haga clic en Automático o Manual.

La barra de herramientas Aplicación de estilo directo constituye un método rápida para crear nuevos estilos o modificar reglas de estilo existentes.

Para crear nuevos estilos con la barra de herramientas Aplicación de estilo directo

1. En la vista Diseño o la vista Código fuente, cambie al modo de aplicación de estilo Manual.

2. Seleccione el contenido al que desea dar formato.

3. En la barra de herramientas Aplicación de estilo directo, haga clic en la lista desplegable Regla de destino y, a continuación, realice una de las siguientes acciones:

   • Para generar un nuevo estilo basado en el formato que aplica y para aplicar el estilo al contenido actual, seleccione Nuevo estilo insertado, Nuevo Id. automático o Nueva clase automática y, a continuación, dé formato al contenido.

   • Para diseñar un nuevo estilo con el cuadro de diálogo Nuevo estilo y, opcionalmente, aplicarlo a la selección actual, elija Aplicar nuevo estilo.

Puede modificar una regla de estilo existente que se aplica a una selección o puede crear una nueva declaración de propiedad para una regla de estilo.

Para modificar estilos existentes con la barra de herramientas Aplicación de estilo directo

1. En la vista Diseño o la vista Código fuente, cambie al modo de aplicación de estilo Manual.

2. Seleccione el contenido al que desea dar formato.

3. En la barra de herramientas Aplicación de estilo directo, en la lista Regla de destino, haga clic en el estilo que desea.

4. Si el estilo seleccionado no contiene una declaración para la propiedad a la que da formato, pero otro estilo en la selección actual sí la contiene, seleccione Volver a usar estilo existente para modificar el estilo existente.

5. Dé formato al contenido.

Vea también

Conceptos

Cómo: Usar las ventanas Aplicar estilos y Administrar estilos

Cómo: Usar la ventana Propiedades de CSS