Generador de estilos (Cuadro de diálogo)

  • Artículo

Actualización: noviembre 2007

El cuadro de diálogo Generador de estilos proporciona opciones para definir atributos de estilo para hojas de estilos en cascada (CSS). Un estilo CSS combina atributos individuales de formato y posición en un conjunto de atributos que se pueden aplicar simultáneamente.

El cuadro de diálogo Generador de estilos se divide en dos paneles. En el panel de la izquierda se muestran ocho categorías generales (Fuente, Fondo, Texto, Posición, Presentación, Bordes, Listas y Otros). Cuando selecciona una categoría, en el panel de la derecha se muestran las opciones disponibles para la categoría seleccionada. A medida que se seleccionan opciones de estilo, el Generador de estilos crea definiciones de estilos CSS.

Puede aplicar los atributos de estilo CSS directamente a elementos de código HTML individuales de una página Web determinada o puede agregar atributos de estilo a reglas de estilo CSS almacenadas en hojas de estilos externas. Las hojas de estilos externas pueden utilizarse para definir una apariencia común en muchas páginas Web a la vez.

Para mostrar el cuadro de diálogo Generador de estilos

  1. Haga clic en Formato en el menú principal y, a continuación, haga clic en Estilo.

    Aparecerá el cuadro de diálogo Generador de estilos.

  2. Seleccione una opción en el panel izquierdo para definir atributos de estilos CSS.

Crear estilos CSS en línea en la vista Diseño

Al aplicar un formato a elementos de código HTML seleccionados en la vista Diseño, los atributos de estilo CSS se insertan en línea en el código de marcado del elemento. Cambie a la vista HTML para ver y ajustar los nuevos atributos de estilo insertados.

Para aplicar los atributos de estilos CSS directamente a los elementos HTML de la página

  1. Abra el documento HTML en la vista Diseño del Diseñador HTML.

  2. Abra la ventana Esquema del documento, seleccione el elemento al que desee aplicar formato y, a continuación, haga clic en Estilo en el menú Formato para abrir el cuadro de diálogo Generador de estilos.

  3. Seleccione una opción en el panel izquierdo para definir atributos de estilos CSS.

El título del cuadro de diálogo Generador de estilos incluirá el nombre del elemento seleccionado. Los estilos CSS pueden aplicarse a los elementos dentro del elemento <BODY> del documento HTML.

Marcado de estilos CSS en la vista HTML

Cuando agregue un estilo en línea a un elemento de código HTML en la vista Diseño, se agregará a la etiqueta de apertura código de formato HTML, que podrá ver y editar en la vista HTML, tal como se muestra en el siguiente ejemplo.

<DIV style="font-size:9pt; font-weight:bold; color:darkblue;">CSS Styles</DIV>

Asimismo, puede crear un bloque STYLE dentro del elemento <HEAD> del documento HTML. Por ejemplo:

<STYLE TYPE="text/css">
BODY {background:#FBFBFB; font-family:Verdana, Arial, Helv, Geneva, Helvetica, sans-serif; font-size:9pt;}
A:link {color:blue;text-decoration:none}
A:active {color:red;text-decoration:none}
A:visited {color:blue;text-decoration:none}
.term { font-size:9pt; font-weight:bold; color:darkblue;}
</STYLE>

Estilos CSS en hojas de estilos externas

También puede crear estilos en un documento de hoja de estilos independiente con la extensión .css.

Para crear estilos en un documento de hoja de estilos independiente con la extensión .css

  1. Abra una hoja de estilos externa (documento .css) para editarla, o bien, cree una si no tiene ninguna en la aplicación Web, siguiendo este procedimiento:

    1. Haga clic con el botón secundario del mouse en el sitio Web y, a continuación, haga clic en Agregar nuevo elemento.

    2. En la lista Plantillas instaladas de Visual Studio del cuadro de diálogo Agregar nuevo elemento, seleccione hoja de estilos y, a continuación, haga clic en Agregar para agregar una nueva hoja de estilos al sitio Web.

    3. Haga doble clic en la hoja de estilos para abrirla y editarla.

  2. Haga clic en Agregar regla de estilo en el menú Estilos para insertar una nueva definición de estilo en blanco.

  3. Coloque el punto de inserción entre las llaves ({ }) situadas detrás del selector correspondiente a la regla de estilo, haga clic en Estilos y, a continuación, en Generar estilo para abrir el cuadro de diálogo Generador de estilos y agregar atributos a la definición de estilo.

Nota:

El menú Estilos, que contiene las opciones Agregar regla de estilo y Generar estilo, aparecerá cuando se abra una hoja de estilos CSS 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.

Para que los elementos de código HTML de una página Web puedan disponer de los estilos definidos en una hoja de estilos externa, debe crear un vínculo a una hoja de estilos externa dentro del elemento <HEAD> de la página, tal como se muestra en el ejemplo siguiente.

<LINK REL=stylesheet Type="text/css" HREF="Mystyles.css">

Aplicar definiciones de estilo a elementos por CLASS e ID

Una definición de estilo, para definir un estilo CLASS, debe empezar por un punto, tal como se muestra en el siguiente ejemplo de código.

.term { font-size:9pt; font-weight:bold; color:darkblue;}

Se puede aplicar un estilo CLASS definido a un elemento de la página Web desde la vista Diseño o HTML del Diseñador HTML. En la vista Diseño, puede seleccionar texto o elementos en el editor WYSIWYG, o utilizar la ventana Esquema del documento para seleccionar elementos. Seleccione un estilo en el menú desplegable Estilo de la barra de herramientas Formato; el estilo se aplicará al elemento seleccionado.

En la vista HTML, se puede utilizar la ventana Esquema del documento para seleccionar el elemento; a continuación, abra la ventana Propiedades, vaya a la propiedad CLASS del elemento seleccionado y especifique el selector correspondiente al estilo CSS deseado (sin punto). De este modo, se insertará una propiedad CLASS en el código de formato HTML del elemento. Por ejemplo:

<DIV CLASS="term">World Wide Web</DIV>

Con la definición anterior del estilo "term", las palabras "World Wide Web" se mostrarán con una fuente de 9 puntos, en negrita y de color azul oscuro.

También puede definir estilos únicos para utilizarlos en una única ubicación de una página. El nombre de un estilo único debe empezar por un signo numérico (#), tal como se muestra en el siguiente ejemplo de código.

#bigdeal {font-decoration:underline; font-size:24pt; color:red;}

Para aplicar un estilo único a un elemento de la página Web

  1. Abra la página en la vista HTML del Diseñador HTML.

  2. Utilice la ventana Esquema del documento para seleccionar el elemento y, después, abra la ventana Propiedades.

  3. Como propiedad Id. de este elemento, especifique el selector del estilo deseado.

De este modo, se inserta un atributo ID en el código de marcado del elemento. Por ejemplo:

<P ID="bigdeal">Happy Birthday</P>
  1. Con la definición anterior del estilo "term", las palabras "Happy Birthday" se mostrarán con una fuente de 24 puntos, subrayadas y en color rojo.

Tareas

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

Tutorial: Crear y modificar un archivo CSS

Elementos de interfaz de usuario

Para obtener más información sobre las opciones de

Vea

Fuentes

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

Fondos

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

Texto

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

Posición de los elementos en una página

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

Control de flujo, desbordamiento, recorte e impresión de saltos de página

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

Bordes, márgenes y relleno

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

Listas

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

La interfaz de usuario (UI), las tablas y los efectos visuales

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

Vea también

Conceptos

Información general sobre el trabajo con CSS

Referencia

Selector de color (Cuadro de diálogo)

Selector de fuente (Cuadro de diálogo)