Información general sobre el trabajo con CSS .

NET Framework 4
Las hojas de estilos en cascada (CSS) contienen reglas de estilo que se aplican a los elementos de una página web.Estos estilos definen la forma en que se van a mostrar los elementos y su posición en la página.Visual Studio 2010 proporciona herramientas que se pueden usar con las hojas CSS. Este tema contiene: y Escenarios y Características de las herramientas de CSS y Información general y Ejemplos de código y Referencia de clases y Lo nuevo

Escenarios
En Visual Studio 2010, mientras utiliza el diseñador para crear y modificar páginas web, puede escribir reglas de estilo insertadas en el código, contenidas en una página web o contenidas en una hoja de estilos externa.Puede ver el relleno y los márgenes aplicados a los elementos de la página utilizando las ayudas visuales.También puede colocar los elementos con las herramientas de posición.

Características de las herramientas de CSS
Visual Studio 2010 ofrece un conjunto de herramientas para crear, aplicar y administrar estilos y hojas de estilos en cascada (CSS).Entre estas herramientas se incluyen las siguientes:

y

y

y

y

y

La ventana Aplicar estilos permite crear, modificar y aplicar estilos.También puede vincular o quitar una CSS externa.La ventana identifica los tipos de estilo y muestra si el estilo se utiliza en la página web actual y si se está usando en la selección actual.Para obtener más información, vea Cómo: Usar las ventanas Aplicar estilos y Administrar estilos. La ventana Administrar estilos proporciona muchas de las características de la ventana Aplicar estilos.Sin embargo, puede utilizar la ventana Administrar estilos para mover los estilos de una hoja de estilos interna (un elemento style de una página) a una hoja de estilos externa o viceversa.También puede utilizarla para mover los estilos dentro de una hoja de estilos.Para obtener más información, vea Cómo: Usar las ventanas Aplicar estilos y Administrar estilos. La ventana Propiedades de CSS muestra los estilos utilizados por la selección actual en una página web.También muestra el orden de prioridad de los estilos.Además, la ventana ofrece una lista completa de todas las propiedades de CSS.Esto permite agregar propiedades a un estilo existente, modificar las propiedades ya establecidas y crear nuevos estilos inline.Para obtener más información, vea Cómo: Usar la ventana Propiedades de CSS. La barra de herramientas Aplicación de estilo directo permite aplicar o quitar estilos basados en clase o en identificador, y crear y aplicar nuevos estilos.Proporciona más control sobre los estilos generados mediante Visual Studio.Para obtener más información, vea Cómo: Usar la barra de herramientas Aplicación de estilo directo. El selector de etiquetas permite seleccionar las etiquetas HTML mientras se está trabajando en una página web.La barra del selector de etiquetas se encuentra en la parte inferior de la ventana de edición.Cuando se coloca el cursor en cualquier parte de una página, la barra rápida del selector de etiquetas muestra la etiqueta HTML subyacente de ese área.También puede utilizar la tecla ESC para desplazarse hacia arriba en la jerarquía HTML para seleccionar etiquetas que están anidadas dentro de otras etiquetas.Para obtener más información, vea Navegación de etiquetas en el Editor HTML de Visual Web Developer.

Información general
En lugar de asignar los atributos de formato individualmente a cada elemento de una página, se pueden crear reglas de estilo.Estas reglas aplican valores de propiedad (normalmente, reglas de formato) cuando un explorador web encuentra cualquier instancia de un elemento, o de un elemento que tiene un identificador o clase de estilo concretos. Para trabajar con estilos CSS, debe comprender cómo se crea un estilo y cómo se aplica.Esta sección contiene información de la especificación CSS de W3C sobre estilos CSS y sobre las herramientas de Visual Studio 2010 que facilitan el trabajo con estilos CSS.

Definir reglas de estilo CSS
Cada regla de estilo CSS (también denominada estilo) tiene dos partes principales: un selector (por ejemplo, h1) y una declaración (por ejemplo, color:blue).La declaración consta de una propiedad (color) y su valor (blue).La sintaxis de una regla de estilo es la siguiente:

Selector { property : value ; property2 : value2}
Por ejemplo, la siguiente regla de estilo CSS especifica que el texto de todos los elementos h1 debe estar centrado y tener un color de fuente azul.

h1 {text-align:center; color:blue;}

Utilizar diferentes tipos de estilos
Puede definir una regla de estilo que se aplica a un elemento, a un elemento que tiene una clase asignada o a un elemento según su identificadorUn estilo se define mediante un conjunto de reglas, compuesta por un selector, seguido por un bloque de declaraciones de propiedad que aparecen entre una llave izquierda ({) y una llave derecha (}).Cada tipo de estilo se distingue de los otros tipos de estilo por su selector.Un selector basado en una clase está precedido por un punto (.).Un selector basado en un identificador está precedido por una almohadilla (#).El selector de un estilo basado en un elemento sólo está compuesto por el nombre del elemento HTML, como h1. Estilos basados en elementos Los estilos basados en elementos definen las propiedades que se desea aplicar a todas las instancias de un elemento HTML determinado.(Los estilos basados en clases pueden invalidarse con estilos basados en elementos o con estilos basados en identificadores para las instancias individuales de un elemento.) Por ejemplo, es posible que desee crear un margen de 25 píxeles alrededor de todos los párrafos (contenido que está en elementos p ).Para ello, se crea un estilo basado en elementos que utiliza el elemento p como selector y que contiene las declaraciones de las propiedades del margen.En el ejemplo siguiente se muestra esta regla de estilo basada en elementos.

p { margin-left: 25px; margin-right: 25px }
Estilos basados en clases Los estilos basados en clases definen las propiedades que se desea aplicar a un subconjunto de un tipo de elemento determinado (por ejemplo, a algunos de los elementos p).También se pueden aplicar a tipos diferentes de elementos, como a algunos elementos p y a algunos elementos span.En el ejemplo siguiente se muestra una regla de estilo basada en clases.El nombre introduction es el selector del estilo (el nombre de la clase).

.introduction {font-size: small; color: white}
En el ejemplo siguiente se muestra cómo especificar una clase para una etiqueta <p>:

<p class="introduction">

Nota
En Microsoft Visual Studio 2010, los nombres de clase en el marcado no se validan comparándolos con las clases que se definen en un archivo .css.Esto es porque los nombres de clase se pueden utilizar como descriptores semánticos, como un microformato, en código ECMAScript o para marcar un estilo que aún no se haya definido. Estilos basados en identificadores Los estilos basados en identificadores definen las propiedades que se desea aplicar a elementos concretos identificados por su atributo de identificadorLos estilos basados en identificadores se suelen utilizar para aplicar un estilo a un único elemento HTML en una página web.En el ejemplo siguiente se muestra un estilo basado en identificadoresEl nombre footer especifica el identificador al que se aplica este estilo.

#footer {background-color: #CCCCCC; margin: 15px}
En el ejemplo siguiente se muestra cómo especificar un identificador para una etiqueta <p>:

<p id="footer">

Escribir estilos CSS
Se puede escribir reglas de estilo CSS en varios lugares, incluidos los siguientes: y Inline con el marcado HTML. y En un elemento style de una página web. y En una hoja de estilos externa (archivo .css) que se vincula o se importa en la página web. En general, las reglas que se aplican al sitio web entero se escriben en una hoja de estilos externa.Las reglas de estilo que se aplican sólo a una página se escriben en el elemento style de la página.Las reglas de estilo que se aplican a un único elemento de la página se escriben como estilo inline.Muchos diseñadores y programadores encuentran que escribir reglas de estilo en una o varias hojas de estilos externas facilita el mantenimiento de los estilos. Crear estilos inline Una regla del estilo inline se define en la etiqueta de apertura de un elemento mediante el atributo de estilo.Utilice un estilo inline si desea definir las propiedades de un único elemento de una página web y no desea volver a usar ese estilo. En el ejemplo siguiente se muestra un estilo inline.

<p style="font-weight: bold; font-style: italic; color: #FF0000">
Crear estilos CSS internos (específicos de la página) Las reglas de estilo CSS se pueden definir en un elemento style dentro del elemento head de una página web.En ese caso, las reglas de estilo se aplican sólo a los elementos de esa página. En el ejemplo de código siguiente se muestra cómo definir y aplicar una regla de estilo CSS a todos los elementos h1 de una página web.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>HTML 4.0 CSS Element Style Example</title> <style type="text/css"> h1{text-align:center; color:blue;} </head> <body> <h1>This text is centered and blue</h1> </body> </html>

</style>

En esta página web, todo el texto que aparezca entre las etiquetas <h1> y </h1> estará centrado y será de color azul.No es necesario volver a asignar estos atributos de estilo para cada elemento h1 del documento.Si desea cambiar el color (o cualquier propiedad) de todo el texto en los elementos h1, puede modificar una regla de estilo. Crear hojas de estilos en cascada externas Una hoja de estilos externa es un archivo de texto con una extensión de nombre de archivo .css que contiene sólo reglas de estilo.Puede vincular una hoja de estilos a una página web utilizando un elemento link, como se muestra en el ejemplo siguiente.

<link rel="stylesheet" type="text/css" href="myStyles.css" />
Este elemento link aplica las reglas de estilo de la hoja de estilos externa myStyles.css a la página actual. Las reglas de estilo incluidas en una hoja de estilos externa se escriben de la misma manera que en un elemento style.Sin embargo, no se escriben entre etiquetas <style> y </style>.En el ejemplo siguiente se muestra el contenido completo de un archivo .css sencillo.

h1 { text-align:center; color:blue; } .head2 { font-size:14pt; text-align:center; color:blue; font-weight:bold; font-style:italic; }
Puede vincular una hoja de estilos externa a varias páginas HTML para aplicar los estilos a todo el sitio web.Las hojas de estilos separan las reglas de formato del contenido.De esta manera resulta más fácil administrar las reglas de estilo.

Introducción a la prioridad de las reglas de estilo CSS
Las reglas de estilo CSS se aplican "en cascada" porque siguen un orden de prioridad.Las reglas de estilo globales se aplican primero a los elementos HTML y las reglas de estilo locales las invalidan.Por ejemplo, un estilo definido en un elemento style de

una página web invalida un estilo definido en una hoja de estilos externa.De forma similar, un estilo inline definido en un elemento HTML de la página invalida cualquier estilo definido para el mismo elemento en cualquier otra parte. Las reglas de estilo globales individuales que no son invalidadas por las reglas de estilo CSS locales seguirán aplicándose a los elementos incluso después de que se hayan aplicado los estilos locales.En el ejemplo de la sección anterior, los estilos CSS locales que controlan el texto del elemento h1 reemplazan algunas de las reglas de estilo globales del explorador web para el texto h1 (centrar el texto h1 y ponerlo en color azul).Sin embargo, no cambian todos los estilos disponibles, como las características de la fuente.Se aplican las reglas de estilo globales y locales, en ese orden.El resultado es que todo el texto h1 de esta página se muestra en una fuente mayor con formato negrita, centrado y azul.

Referencia de clase
No se aplica ninguna clase a las herramientas de CSS.

Lo nuevo
Visual Studio 2008 presenta una edición de CSS enriquecida con diversas herramientas nuevas para que resulte más fácil que nunca trabajar con hojas de estilos en cascada (CSS).Gran parte del trabajo de preparación del diseño y de aplicación de estilos a los contenidos se puede realizar en la vista Diseño con la ventana Propiedades de CSS, las ventanas Aplicar estilos y Administrar estilos y la herramienta Aplicación de estilo directo. También puede cambiar la posición, el relleno y los márgenes en la vista Diseño con las herramientas de diseño visuales WYSIWYG.

Tutorial: Crear y modificar un archivo CSS .NET Framework 4
En este tutorial se presentan las características de hojas de estilos en cascada (CSS) de Visual Studio 2008. Le servirá de guía para crear un diseño de página de tres columnas, que ilustra las técnicas básicas de creación de una nueva página web y una nueva hoja de estilos. En este tutorial se muestran las tareas siguientes: y Crear un sitio Web de sistema de archivos. y Personalizar el sitio web utilizando las características orientadas a CSS. y Crear un diseño de página de tres columnas mediante CSS.

y

Requisitos previos
Para realizar el tutorial, necesita lo siguiente: y Visual Studio 2008 o Visual Web Developer 2008 Express.Para obtener información sobre las descargas, visite el sitio web Centro para desarrolladores de .NET Framework. y Versión 3.5 de .NET Framework

Crear un sitio Web
En esta parte del tutorial puede crear un sitio web y agregarle una nueva página.En la sección siguiente, puede agregar un archivo CSS y, a continuación, ejecutar la página en un explorador web. Si ya ha creado un sitio web (por ejemplo, según los pasos descritos en el tema Tutorial: Crear una página Web básica en Visual Web Developer), puede usar dicho sitio web y pasar a la sección "Agregar y aplicar estilos a los elementos de la página", más adelante en este tutorial. De lo contrario, cree un sitio Web nuevo siguiendo estos pasos.

Para crear un nuevo sitio Web del sistema de archivos
1. 2. 3. En Visual Web Developer, en el menú Archivo, haga clic en Nuevositio Web. En el cuadro Nuevo sitio Web en Plantillas instaladas de Visual Studio, haga clic en Sitio Web ASP.NET. En el cuadro Ubicación, haga clic en Sistema de archivos y escriba el nombre de la carpeta en la que desea guardar las páginas de su sitio web. Por ejemplo, escriba el siguiente nombre de carpeta: C:\CSSWebSite En la lista Lenguaje, haga clic en Visual Basic o Visual C# y, a continuación, haga clic en Aceptar.

4.

puede establecer el lenguaje de programación para cada página de forma individual. nunc vitae rhoncus imperdiet. Agregue el código siguiente detrás de la etiqueta <form>: <div id="pagecontainer"> <div id="banner"> <h1>AdventureWorks Styling Page</h1> <h2>Making CSS Styling Easier in Design View</h2> <div id="search">Find:<input id="searchbox" type="text" /> <input id="searchbutton" type="button" value="Go" /> </div> </div> <div id="leftsidebar" class="column"> <h3>Matters of the Web</h3> <p> Lorem ipsum dolor sit amet. Agregar y aplicar estilos a los elementos de la página Para que se pueda centrar en las herramientas de formato y estilo en lugar de en la creación de elementos para aplicar estilos. El contenido principal de la página se encuentra en la última sección de texto. ullamcorper sit amet. consectetuer adipiscing elit. diam. 5. Puede copiar y pegar estos elementos en una página.Sed enim lorem. secciones de barra lateral izquierda y derecha. Agregar elementos de página En el procedimiento siguiente.Curabitur quis nibh sit amet nunc malesuada rutrum.Curabitur in sem. consectetuer adipiscing elit. Visual Web Developer crea la carpeta y una página nueva denominada Default. Abra la página Default. copiará elementos de página con los que podrá trabajar utilizando las herramientas de CSS. Para agregar elementos de página a la página predeterminada 1.Sed enim lorem.aspx. 2. ut luctus ipsum . en esta sección se proporciona un conjunto de elementos de página. nonummy sed.</p> </div> <div id="maincontent" class="column"> <h2>Matters of the Web</h2> <p> Pellentesque mattis tincidunt ipsum. Los elementos de página constan de una pancarta que contiene texto y un cuadro de búsqueda.Sed a justo. En algunos casos. El código incluye secciones realizadas con elementos div que incluyen una pancarta. 3. un pie de página y tres secciones de texto. sin embargo. los elementos contienen clases CSS que puede usar para aplicar estilo a elementos concretos de una página. ullamcorper sit amet. Nota Puede utilizar cualquier página que esté disponible en el sitio web.Vivamus adipiscing vulputate lacus.Curabitur quis nibh sit amet nunc malesuada rutrum. eros turpis accumsan risus. una sección de contenido principal y un pie de página. Estos elementos simples contienen texto con el que puede trabajar e identificadores de elemento. diam.aspx o cambie a ella. fringilla eget. fringilla eget.Donec tempus. nonummy sed.Nota El lenguaje de programación que elija será el valor predeterminado para el sitio Web.Vivamus adipiscing vulputate lacus.Sed a justo. Cambie a la vista Código fuente.</p> </div> <div id="rightsidebar" class="column"> <h3>Matters of the Web</h3> <p> Lorem ipsum dolor sit amet.Curabitur in sem.

convallis vel. haga clic en h1 para que pueda crear un estilo que se aplique a todos los elementos h1.Esto indica que la regla de estilo se crea en un elemento style de la página actual. En el cuadro tamaño de fuente. justo. consequat ac. risus. puede aplicar estilos a los elementos de página y ver inmediatamente los resultados. sodales vel.Por último. leo.Donec in mi nec odio tincidunt luctus. Cambie a la vista Diseño para ver el formato predeterminado.Pellentesque leo felis. puede aplicar un estilo a elementos individuales de una página de varias maneras. La opción Aplicación de estilo directo está establecida de forma predeterminada en Manual. convallis venenatis. Establecerá también el tamaño del área de la pancarta y agregará un color de fondo. lobortis non. que se escriben como el atributo style de un elemento individual. En la vista Diseño. Puede escribir reglas de estilo en un elemento style del elemento head HTML de la página. En la lista familia de fuentes. gravida non. 5. tristique id. Estas reglas de estilo se pueden aplicar a los elementos de la página actual .En este ejemplo. 4. escriba o seleccione versales. Puede utilizar estilos insertados. Aparecerá el cuadro de diálogo Nuevo estilo. elementum vehicula.Curabitur nibh neque. En el cuadro variante de fuente. lacus. tempor eu. dapibus eget. mauris. 6.Fusce porttitor cursus eros.Praesent placerat nibh vel metus viverra tincidunt. puede escribir las reglas de estilo en un archivo CSS externo. Dar formato a una pancarta de página El primer elemento al que dará formato es la sección de pancarta. utilizará la barra de herramientas Aplicación de estilo directo para cambiar el estilo y la posición del encabezado. interdum eget.lacus a felis. 2.</p> <p>Fusce magna urna. haga clic en Aplicar nuevo estilo.Aenean eros massa. scelerisque nec. En la lista Selector. Observe que la selección tiene un cuadro azul alrededor y una ficha que indica que el elemento h1 se ha seleccionado. escribirá la información de formato y estilo en la sección del elemento style de la página y como estilos insertados. Observe que la lista Definir en está establecida en Página actual. consectetuer adipiscing elit 2007. . Estas reglas de estilo sólo se pueden aplicar a ese elemento. Aplicar estilos en la vista Diseño En la vista Diseño. por lo que aplicará manualmente el estilo. sagittis vel. Para dar formato al texto de la pancarta 1. quam pede tempus magna.</p> </div> <div id="footer"> <p> Lorem ipsum dolor sit amet. Aenean convallis euismod nulla.In at massa. puede mover la información de CSS a una hoja de estilos externa para utilizar otras características de Visual Studio 2008. en la lista Regla de destino. 3. En este tutorial. que incluye elementos delimitados por la etiqueta <div ID="banner">. las reglas de estilo se pueden aplicar a cualquier página del sitio web.</p> </div> </div> 4. mauris cursus molestie convallis. magna. convallis id. En ese caso.Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.Vivamus nisl ante. Después. Guarde la página.Suspendisse potenti. seleccione una fuente gruesa como Impacto. sodales vehicula. No tiene que escribir la CSS y cambiar a la página para ver si se ha aplicado el estilo deseado. haga clic en el texto de título en la sección de pancarta "AdventureWorks Styling Page".Maecenas libero odio.Ut sed eros sit amet neque malesuada malesuada.Donec euismod.Suspendisse rutrum dui sed urna. interdum eget. En la vista Diseño. escriba o seleccione muy grande. adipiscing nec. En la barra de herramientas Aplicación de estilo. mollis dapibus quam est et magna. 5. auctor vitae.

en el selector rápido de etiquetas se muestra la etiqueta HTML subyacente de esa área. ésta es la configuración predeterminada). . que se encuentra dentro del elemento head. si arrastra el ancho de la pancarta hasta 785 píxeles.Puede utilizar el selector rápido de etiquetas. el contenido de la etiqueta se resalta en la vista Diseño y aparece una flecha en la etiqueta. haga clic en el elemento h1 para seleccionarlo y.Observe que la primera vez que presiona la tecla ESC. 9. Observe que al arrastrar. 5. Cambiar el tamaño de la etiqueta y la posición de su contenido Puede cambiar el tamaño y la posición de la pancarta y de su contenido en la vista Diseño utilizando la barra de herramientas Aplicación de estilo directo. puede utilizar la combinación de teclas CTRL + FLECHA IZQUIERDA para reducir el ancho a 780 píxeles. Para cambiar el tamaño de la pancarta 1. precedida por una etiqueta tr para la fila de la tabla y una etiqueta table para la tabla. la etiqueta td aparece en la barra del selector rápido de etiquetas.7.Por ejemplo. Establezca la familia de fuentes en Comic Sans MS y el tamaño de fuente en pequeño. Seleccionar elementos de la página En Visual Studio 2008. si el punto de inserción está en una celda de la tabla. que se encuentra en la sección inferior del panel de la vista Diseño. 3. d. abrir el cuadro de diálogo Editor rápido de etiquetas o abrir el cuadro de diálogo Propiedades de un elemento. la etiqueta muestra div#banner. Arrastre el controlador de cambio de tamaño en la esquina inferior derecha para cambiar el tamaño del elemento div de la pancarta. Para ver la regla de estilo que ha creado.Por ejemplo. vaya a la vista Dividida y desplácese al elemento style. b.Cuando el elemento está seleccionado.(Puesto que no establecimos estas opciones. 4.Puede hacer clic en esta flecha para seleccionar una etiqueta y su contenido. Al presionar de nuevo la tecla ESC. a continuación.Estos valores se muestran también en la barra de estado. utilice la tecla ESC para seleccionar el elemento div de la pancarta. Haga clic en el texto h1 ("AdventureWorks Styling Page") para seleccionarlo y. Siga este procedimiento para aplicar estilo al elemento h2 de la pancarta de forma similar: a.Las etiquetas que contienen la etiqueta actual aparecen a la izquierda de la etiqueta en la barra del selector rápido de etiquetas. Cambie a la vista Diseño. 8. que es la misma ubicación en la que se escribieron las reglas de estilo anteriores. el elemento h1 está anidado dentro del elemento div de la pancarta. cambie a la vista Código fuente y desplácese al elemento style. Cambie el tamaño del elemento hasta que tenga aproximadamente 780 píxeles de ancho y 100 píxeles de alto. Establezca el valor Selector del cuadro Nuevo estilo en h2. Para ver la regla de estilo que ha creado. Nota Puede utilizar la tecla CTRL y las teclas de dirección para cambiar el valor de los elementos de tamaño que ya se han definido. a continuación.Por ejemplo. que es el elemento div de la pancarta. c. Puede ver que se ha creado un regla de estilo para el elemento div de la pancarta (mediante el selector #banner). Haga clic en Aceptar. Seleccione el elemento h2.Las reglas de estilo se escriben en la página actual. Abra el cuadro de diálogo Nuevo estilo como en el paso 2. 2. hay varias formas de seleccionar elementos de la página. el elemento h1 se resalta y se muestra el relleno y los márgenes. seleccionar sólo el contenido de la etiqueta. presione la tecla ESC dos veces para seleccionar el elemento que lo contiene. la información sobre herramientas muestra los valores de alto y ancho. modificar o quitar la etiqueta.Cuando se coloca el punto de inserción en cualquier parte de una página.Para seleccionar el elemento div completo. Al mover el puntero sobre una etiqueta en el selector rápido de etiquetas. También puede utilizar la tecla ESC para subir los elementos por la jerarquía. Puede ver que la regla de estilo CSS se ha creado para el elemento h1. se selecciona todo el elemento div. situada en la sección inferior de la ventana de la vista Diseño.

Arrastre hasta que los dos elementos queden centrados (aproximadamente 30 píxeles). En el cuadro Párrafo. haga clic en Color de fondo. 2. También puede aplicar reglas de estilo que centren el texto de los encabezados. en la lista desplegable Alineación. Seleccione el elemento div de la pancarta. coloque el puntero del mouse sobre el borde del elemento div hasta que en la información sobre herramientas se muestre el valor de relleno actual. Nota Para ver los elementos correctamente colocados en la vista Diseño. Se muestra el selector de color. En primer lugar. 5. seleccione el elemento div de la barra lateral izquierda.(Para ello. a continuación. a continuación. establecerá el tamaño y la posición de las barras laterales izquierda y derecha y. Arrastre el borde de relleno hasta que esté contiguo al borde superior del elemento div. En el menú Formato.Cuando cambie el tamaño de las columnas de la barra lateral. 2. puede utilizar otra característica de Visual Studio 2008. Como el elemento h1 tiene la misma longitud que el elemento div de la pancarta. 7. Observe que dos líneas azules se extienden desde la selección. 6. Arrastre el elemento div de búsqueda por su ficha (el texto indica div#search) hasta una posición que esté dentro de la pancarta pero a la derecha de los elementos de texto. creará un diseño de tres columnas mediante la regla de estilo Float. Seleccione un color para la pancarta y. puede arrastrar el lado derecho del elemento div en lugar de arrastrar la esquina del elemento div. asegúrese de que el elemento div de la pancarta está seleccionado (div#banner debe seguir seleccionado en el navegador de etiquetas). sólo deseará establecer el valor de ancho. Para completar la pancarta. 6. debe colocar el elemento div de búsqueda y sus elementos en la pancarta. En el menú Formato. es posible que tenga que ocultar la Barra de herramientas. seleccione Absoluta. seleccione Centrar y. En el menú Formato. 3. En la vista Diseño.También puede utilizar estas mismas herramientas para crear su diseño de página. 4.column#leftsidebar en el navegador de etiquetas). a continuación. defina valores de relleno. puede colocar el texto dentro del elemento h1 para centrarlo en el área de la pancarta. seleccione el elemento div de la pancarta. 8. que indican un valor de posición superior e izquierdo. Para cambiar el tamaño y la posición de los elementos div de la barra lateral izquierda y derecha 1. . como en el ejemplo anterior. haga clic en Aceptar. haga clic en Establecer posición y. puede ajustar el relleno en la sección de contenido principal para crear un diseño flexible de tres columnas. Crear un diseño flexible de tres columnas Puede utilizar Visual Web Developer para crear reglas de estilo dando formato a los elementos de página en la vista Diseño. Para colocar el elemento div de búsqueda dentro de la pancarta 1. Manteniendo presionada la tecla MAYÚS. tendrá más espacio para mostrar la posición de los elementos de la página. 5. 4.Para establecer sólo el ancho del elemento div. haga clic en Párrafo.Para ello. a continuación. Seleccione el elemento h2 y. Se muestra el cuadro de diálogo Párrafo. haga clic en Aceptar. En este tutorial. 8. a continuación.En la vista Diseño. En vista Diseño.De esta forma. y no el de alto. Suelte el elemento div de búsqueda cuando esté colocado en el lugar que desee. 7. Crear las columnas de la barra lateral Puede cambiar el tamaño de las columnas laterales en el diseño de página del mismo modo que cambió el tamaño de la pancarta. puede seleccionar div. para que el texto abarque la longitud de la columna si es necesario. 3. Para colocar los elementos de encabezado dentro de la pancarta En la vista Diseño. seleccione el elemento div de búsqueda (div#search).Para ello. 1. repita los pasos 2 y 3. la cuadrícula de posición.

8. 4. arrastre el margen derecho del elemento div del contenido principal para establecerlo en 260 píxeles. En el Explorador de soluciones. Crear la columna central Para crear la columna central. puede establecer márgenes y relleno para mover el contenido fuera de las columnas derecha e izquierda. Aparecerá el cuadro de diálogo Posición. seleccione el elemento div del pie de página. seleccione Hoja de estilos. En el cuadro de texto Ancho.NET. 6. Para crear una hoja de estilos y asociarla a una página 1. 2. haga clic en el botón de borde izquierdo. 4. 7. a continuación.Para evitar que esto suceda. haga clic en Posición. seleccione Izquierda y. En el menú Formato. seleccione Bordes y sombreado. 2. escriba Layout. haga clic en Aceptar. el valor de alto se muestra entre paréntesis. puede definir la regla de estilo Clear. Para ajustar el elemento div de pie de página 1. Con el elemento div del contenido principal seleccionado. 3. a continuación.De esa forma. 5.Arrastre el margen izquierdo hasta un valor de 210 píxeles.NET. 5. En el cuadro Selector. haga clic en Agregar nuevo elemento. Arrastre el borde derecho del elemento div de la barra lateral izquierda para cambiar el tamaño del elemento hasta que tenga un ancho aproximado de 200 píxeles. debe colocar la hoja en la carpeta correcta. 5. haga clic en Agregar. En la lista Estilo. En la lista Categoría. vea Temas y máscaras de ASP. En Estilo de ajuste. seleccione Personalizado. 6. lo que indica que no se va a definir. En el cuadro Nombre. 6. seleccione el elemento div del contenido principal. seleccione ambos. 4.2. Se muestra el cuadro de diálogo Bordes y sombreado. a continuación. Haga clic en Aceptar. Crear y utilizar una hoja de estilos Una forma eficaz de trabajar con CSS es incluir reglas de estilo en una hoja de estilos. a continuación. Observe que al arrastrar. en el menú Formato. En la lista clear. En Plantillas instaladas de Visual Studio. En Estilo de ajuste. 3. haga clic en Posición. haga clic con el botón secundario del mouse en el nombre del sitio web y. En el menú Formato. escriba o seleccione #footer. En la vista Diseño. Para crear una hoja de estilos se utilizan las mismas técnicas que para crear una nueva página. En Relleno. 7. En Configuración. para que adopten un aspecto similar.Primero creará un borde izquierdo y.Para obtener más información sobre los temas y CSS. seleccione Sólido y en Vista previa. En la vista Diseño. utilizará relleno para mover el contenido fuera del borde. haga clic en Derecha y luego en Aceptar. escriba 10px. .Para utilizar una hoja de estilos con un tema. Con la tecla CTRL presionada. todas las páginas podrán hacer referencia a los estilos.css y. También puede utilizar las hojas de estilos en cascada con los temas de ASP. el pie de página podría ajustarse y aparecer en el borde de una de las columnas. Seleccione el elemento div de la barra lateral derecha y arrastre su borde derecho hasta que tenga un ancho aproximado de 250 píxeles. haga clic en Diseño. haga clic en Nuevo estilo. Para aplicar estilo a la columna central 1. escriba 1px. 3. En el menú Formato. Ajustar el pie de página Si los usuarios cambian el tamaño de la página o si la página se muestra en un monitor de gran formato. Aparecerá el cuadro de diálogo Nuevo estilo. Haga clic en Aceptar. 2. 3. 8. en el cuadro Izquierda.

NET. Configurar la información de estilo mediante programación para los elementos HTML.(De forma predeterminada. 2. 4. 6.También es posible que desee explorar las maneras siguientes de controlar la apariencia de las páginas Web: y y y Trabajar con una hoja de estilos existente. . 8. 7. haga clic en Administrar estilos. vea Tutorial: Trabajar con un archivo CSS existente. a continuación. Para mover reglas de estilo utilizando el panel Administrar estilo En la ficha Página actual de la ventana Administrar estilos.aspx de la vista Código fuente y en la página Layout.css y. Puede asignar una hoja de estilos a una página de varias formas.Se abre el editor con una nueva hoja de estilos que contiene una regla de estilo body vacía. sino prácticamente cualquier propiedad de un control ASP. 5. Abra la página Default.css de la ventana Administrar estilos. Mover reglas de estilo de una página a una hoja de estilos Puede utilizar el panel Administrar estilos para mover estilos de una página a otra o para ver cómo las reglas de estilo se aplican a una página.(Puede seleccionarlos utilizando MAYÚS+CLIC).La forma más simple consiste en arrastrar el archivo del Explorador de soluciones al elemento de encabezado de la página en la vista Código fuente.Puede mover estas reglas de estilo a la nueva hoja de estilos que ha creado.aspx. Pasos siguientes En este tutorial se han descrito las técnicas básicas para trabajar con estilos CSS mediante la interfaz de usuario de Visual Studio 2008. Haga clic en Adjuntar hoja de estilos. Crear temas y máscaras que permiten no sólo especificar estilos CSS.css en la ventana Administrar estilos.Para obtener más información.NET.Puede confirmar esta operación en la página Default. esta ventana está acoplada). Arrastre los estilos seleccionados hasta la ficha Layout. Seleccione el archivo Layout.aspx o cambie a ella. y cambie a la vista Diseño.Para obtener más información.Para obtener información detallada.css. vea Temas y máscaras de ASP. También puede cambiar el orden de los estilos en la hoja de estilos mediante la ventana Administrar estilo. Hasta ahora. 1.css del editor.aspx y se mueven al archivo Layout. Se abre la ventana Administrar estilos. Las reglas de estilo se quitan de la página Default. Aparecerá el cuadro de diálogo Seleccionar hoja de estilos. haga clic en Aceptar. vea Cómo: Establecer las propiedades de un control de servidor HTML mediante programación. Se crea una nueva ficha denominada Layout.Por ejemplo. En el menú Vista. seleccione todos los estilos. puede arrastrar la regla de estilo de búsqueda para que aparezca justo debajo de la regla de estilo de la pancarta. las reglas de estilo que ha creado en este tutorial se han guardado en el elemento style de la página Default.

Para obtener información de la descarga. En Plantillas instaladas de Visual Studio. a continuación. más adelante en este tutorial. Se muestra el cuadro de diálogo Nuevo sitio Web.El código incluye secciones realizadas con elementos div que incluyen una pancarta. 3. haga clic en Sitio Web ASP. En este tutorial se muestran las tareas siguientes: y Crear un sitio Web de sistema de archivos. puede usar ese sitio web e ir directamente al apartado "Agregar elementos HTML y un archivo CSS". Visual Web Developer crea la carpeta y una página nueva denominada Default. 2.En algunos casos.Estos elementos simples contienen texto con el que puede trabajar e identificadores de elemento. 4. 5. Agregar elementos HTML y un archivo CSS Para que se pueda centrar en las herramientas de formato y estilo en lugar de hacerlo en la creación de elementos para crear estilos.Le guía a través de la creación y modificación de un diseño de página de dos columnas.NET Framework versión 3.Tutorial: Trabajar con un archivo CSS existente. En el cuadro Ubicación.También muestra las técnicas básicas de creación de una nueva página web y una nueva hoja de estilos en cascada. siguiendo los pasos del tema Tutorial: Crear una página Web básica en Visual Web Developer). Abra Visual Web Developer. y Crear un sitio Web En esta parte del tutorial va a crear un sitio web y a agregarle una nueva página.5. secciones de barra lateral izquierda y derecha. Por ejemplo. escriba el siguiente nombre de carpeta: C:\CSSWebSite En la lista Lenguaje. sólo la usará para mostrar las características de posición. los elementos contienen clases CSS que puede usar para aplicar estilo a elementos concretos de una página.Puede copiar y pegar estos elementos en una página. pero también puede establecer el lenguaje de programación de cada página de forma individual. y . Si ya ha creado un sitio web en Visual Web Developer (por ejemplo. haga clic en Nuevositio Web.NET. y Crear un diseño de página de dos columnas con CSS. y Una imagen que pueda agregar a la página web. una sección de contenido principal y un pie de página. y Utilizar características orientadas a CSS de Visual Web Developer. escriba el nombre de la carpeta en la que desea guardar las páginas del sitio web. en esta sección se proporciona un conjunto de elementos. Nota Este tutorial muestra características adicionales de Visual Studio 2008 que no se trataron en Tutorial: Crear y modificar un archivo CSS. 6. Haga clic en Aceptar. vea el sitio web de Microsoft Visual Studio Express Editions. El lenguaje de programación que seleccione será el lenguaje predeterminado del sitio web.NET Framework 4 Este tutorial introduce las características de hojas de estilos en cascada (CSS) de Visual Studio 2008. cree un sitio Web nuevo siguiendo estos pasos.De lo contrario. Para crear un nuevo sitio Web del sistema de archivos 1. seleccione Sistema de archivos y. En el menú Archivo. haga clic en Visual Basic o en Visual C#.aspx. Requisitos previos Necesita los componentes siguientes para completar este tutorial: y Visual Studio 2008 o Microsoft Visual Web Developer Express. Agregar elementos HTML .La imagen real no es importante.

Donec tempus. Ut sed eros sit amet neque malesuada malesuada. un pie de página y tres secciones de texto. nunc vitae rhoncus imperdiet. convallis venenatis. adipiscing nec. Sed enim lorem.aspx en vista Código fuente. magna. justo.</p> </div> <div id="rightsidebar" class="column"> <h3>Matters of the Web</h3> <p> Lorem ipsum dolor sit amet. auctor vitae. interdum eget. convallis id. consectetuer adipiscing elit 2007. elementum vehicula. mollis dapibus quam est et magna. consectetuer adipiscing elit. nonummy sed. Vivamus adipiscing vulputate lacus.La página consta de una pancarta con texto y un cuadro de búsqueda. Praesent placerat nibh vel metus viverra tincidunt. In at massa. consequat ac. Sed a justo. Donec in mi nec odio tincidunt luctus. Curabitur in sem. quam pede tempus magna. mauris. gravida non. lacus. Para agregar elementos HTML a la página 1. ullamcorper sit amet. diam. Aenean convallis euismod nulla. risus. Maecenas libero odio. Sed enim lorem. fringilla eget. Donec euismod.</p> <asp:Image ID="Image1" runat="server"/> <p>Fusce magna urna. sodales vel. Aenean eros massa. ullamcorper sit amet.El contenido principal de la página se encuentra en la última sección de texto.</p> </div> <div id="maincontent" class="column"> <h2>Matters of the Web</h2> <p> Pellentesque mattis tincidunt ipsum.En esta sección se agrega el contenido con el que se va a trabajar. Curabitur nibh neque. nonummy sed. Pellentesque leo felis. diam. 2. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p> </div> </div> . Curabitur in sem. dapibus eget. scelerisque nec. sodales vehicula. Abra la página Default. Fusce porttitor cursus eros. mauris cursus molestie convallis. tempor eu. leo. Curabitur quis nibh sit amet nunc malesuada rutrum. ut luctus ipsum lacus a felis. eros turpis accumsan risus. interdum eget.</p> </div> <div id="footer"> <p> Lorem ipsum dolor sit amet. consectetuer adipiscing elit. tristique id. lobortis non. Agregue el código siguiente después del elemento <form>: <div id="pagecontainer"> <div id="banner"> <h1>AdventureWorks Styling Page</h1> <h2>Making CSS Styling Easier in Design View</h2> <div id="search">Find:<input id="searchbox" type="text" /> <input id="searchbutton" type="button" value="Go" /> </div> </div> <div id="leftsidebar" class="column"> <h3>Matters of the Web</h3> <p> Lorem ipsum dolor sit amet. convallis vel. Suspendisse rutrum dui sed urna. sagittis vel. Sed a justo. Suspendisse potenti. fringilla eget. Curabitur quis nibh sit amet nunc malesuada rutrum. Vivamus adipiscing vulputate lacus. Vivamus nisl ante.

font-size: small. font-size: x-large. padding-top: 18px. a continuación. 2. background-color: #DD6B26. } #leftsidebar { width: 188px. padding-left: 13px. padding-right: 13px. Quite la regla de estilo body y. color: #930626. haga clic con el botón secundario del mouse en el nombre del sitio web y. En el Explorador de soluciones. top: 115px. a continuación. font-weight: bold. } #rightsidebar { width: 238px. margin-left: 203px. position: absolute. 4. En el cuadro Nombre.3. Guarde la página. } h1 { font-family: "Lucida Calligraphy". } #maincontent { border-left: 1px solid #DD6B26. float: right. 4. #pagecontainer { width: 800px.css) que da formato y aplica estilo a los elementos que agregó a la página en la última sección.La hoja de estilos usa reglas de estilo basadas en id. } #search { width: 254px. padding-left: 6px. Para agregar un archivo CSS 1. escriba Layout. haga clic en Agregar. left: 545px. En Plantillas instaladas de Visual Studio. Aparecerá el cuadro de diálogo Agregar nuevo elemento. El editor abre una nueva hoja de estilos que contiene una regla de estilo body. float: left. haga clic en Agregar nuevo elemento.css y. padding-right: 10px. y en clase. Agregar un archivo CSS En esta sección agrega una hoja de estilos en cascada (archivo . } #banner { height: 126px. } #footer { text-align: center. font-family: "Lucida Sans". a continuación. margin-right: 260px. 3. Cambie a la vista Diseño para ver el formato predeterminado. pegue las reglas siguientes en el archivo. background-color: #DD6B26. haga clic en Hoja de estilos. .

Abra o cambie a la página Default. haga clic en Administrar estilos.css a la página actual. En el Explorador de soluciones. text-align: center. Cambie a la vista Diseño. haga clic con el botón secundario en el estilo #rightsidebar y. A continuación. Quitar la columna derecha y cambiar el estilo Para cambiar el diseño de página a un diseño de dos columnas. 4. Guarde el archivo. Elimine el elemento div que comienza con <div id="rightsidebar" class="column">.aspx. la ventana está acoplada. 3. font-size: large. height: 42px. 2. 7. Haga clic en Aceptar. Aparece la ventana Administrar estilos. } p { font-family: "Palatino Linotype". color: #307630.css. lo que indica que ya no se usa en la página y se puede quitar. 9.La página cambia para reflejar los estilos definidos en el archivo . haga clic con el botón secundario en el estilo #maincontent y. Guarde el archivo.css que ha creado colóquelo en la página. padding: 0. Guarde el archivo. haga clic en Modificar estilo. 8. En margen. puede usar la ventana Administrar estilos para cambiar las reglas de estilo de la hoja. 12. 11. margin: 0. En Categoría. text-align: center. 14. Cambie a la vista Diseño. font-size: medium. Cambie a la vista Código fuente. 6. Nota El icono del estilo #rightsidebar no tiene un círculo alrededor. 6. A continuación quitará los estilos aplicados al diseño original. arrastre el archivo . a continuación. 10. margin-bottom: 0px. margin-bottom: 0px. De esta forma vincula el archivo . Ahora cuenta con un diseño de dos columnas. modificará la página de diseño original de tres columnas a un diseño de dos columnas. En este tutorial. puede quitar el código que crea la columna derecha. 5. Aparece el cuadro de diálogo Modificar estilo. a continuación. font-variant: small-caps. . } 5. haga clic en Estilos CSSy.) En la ventana Administrar estilos. Agregar reglas de estilo a la hoja de estilos Al trabajar con una hoja de estilos CSS existente. cambie el valor del cuadro derecho a 0. 13. font-weight: bold. En la ventana Administrar estilos. En el menú Formato. haga clic en Cuadro. puede cambiar el estilo de los otros elementos para crear el diseño de dos columnas. haga clic en Eliminar. Para quitar el código de la columna derecha y dar formato 1. } h2 { font-family: "Lucida Sans". a continuación.(De forma predeterminada.color: #930626.

floatleft { float: left. border: 1px solid #DD6B26. debe asignarla a un control Image.Agregar una imagen Antes de establecer el estilo de una imagen.Para obtener más información. a continuación. } . haga clic con el botón secundario en el estilo CSS y seleccione Aplicar estilo. 5. .aspx o cambie a ella. 1. 2. vea Temas y máscaras de ASP. En la ventana Propiedades. Abra la página Default. En la ventana Administrar estilos. vea Tutorial: Crear y modificar un archivo CSS. } .Para obtener más información. seleccione Agregar elemento existente. } 3.aspx o cambie a ella. img { margin: 0px. 3. sino prácticamente cualquier propiedad de un control ASP. aplique el estilo CSS floatright o floatleft al control Image. 4. Pasos siguientes Este tutorial muestra las técnicas básicas para trabajar con estilos CSS mediante la interfaz de usuario de Visual Studio 2008. para ello. vea Cómo: Establecer las propiedades de un control de servidor HTML mediante programación. margin-right: 10px. Cambie a la vista Diseño y seleccione el control Image. El estilo CSS seleccionado se asigna al estilo img. 2. y Crear temas y máscaras que permiten no sólo especificar estilos CSS.css o cambie a él. Agregar reglas de estilo para dar formato a la imagen Para mejorar el flujo de la imagen con respecto al texto. Para agregar una imagen al proyecto En el Explorador de soluciones. Abra el archivo Layout. Ahora que la imagen se ha agregado a su d. Para agregar imágenes al diseño 1. Agregue el código siguiente a la hoja de estilos. float:right. Abra la página Default.floatright { margin-left: 10px. lo que aleja el texto de la imagen. debe agregar la imagen al proyecto y establecer su propiedad ImageUrl. haga clic con el botón secundario en el nombre del sitio web y. Aparecerá el cuadro de diálogo Agregar elemento existente. 2. establezca la propiedad ImageUrl del control Image en la dirección URL del archivo de imagen recientemente agregado. Cambie a la vista Diseño y seleccione el control Image.Para obtener más información.NET.También es posible que desee explorar las maneras siguientes de controlar la apariencia de las páginas web: y Trabajar con una nueva hoja de estilos. puede establecer la imagen como flotante en el borde derecho o izquierdo de la columna principal y agregar relleno. y Configurar la información de estilo mediante programación para los elementos HTML. Seleccione un archivo de imagen y haga clic en Agregar. Para asignar una imagen al control Image 1. padding: 5px.NET.

aplicar esa apariencia de manera coherente a las páginas de una aplicación Web. por ejemplo.NET. un tema contendrá máscaras.(Las máscaras predeterminadas coinciden exactamente atendiendo al tipo de control. Hojas de estilos en cascada Un tema también puede incluir una hoja de estilos en cascada (archivo . Por ejemplo.NET Framework 4 Un tema es un conjunto de valores de propiedad que permiten definir la apariencia de las páginas y de los controles y. Hay dos tipos de máscaras de control.Cuando coloca un archivo . Los temas se definen en directorios especiales en un sitio Web o un servidor web. se pueden configurar diferentes máscaras para distintas instancias del mismo control en una aplicación. Por ejemplo. La hoja de estilos se define utilizando la extensión de nombre de archivo . se pueden incluir los gráficos utilizados con el fin de representar los botones para expandir y contraer. a continuación. y Una máscara con nombre es una máscara de controles con un conjunto de propiedades SkinID. Una máscara de control es predeterminada si no tiene un atributo SkinID. los archivos de recursos del tema están en la misma carpeta que los archivos de máscara de dicho tema. pero sólo contiene las propiedades que se desee establecer como parte del tema.skin se crean en la carpeta Theme. Un archivo . Gráficos del tema y otros recursos Los temas también pueden incluir gráficos y otros recursos.css en la carpeta de temas. máscaras predeterminadas y máscaras con nombre: y Una máscara predeterminada se aplica automáticamente a todos los controles del mismo tipo cuando un tema se aplica a una página.La configuración de las máscaras de control se parece al propio marcado del control. Como mínimo.En su lugar. Las máscaras con nombre no se aplican automáticamente a todos los controles según el tipo.skin y contiene los valores de propiedades para los controles individuales como Button. de modo que una máscara de control Button se aplica a todos los controles Button pero no a los controles LinkButton ni a los derivados del objeto Button). Al crear máscaras con nombre.css). una máscara con nombre se aplica explícitamente a un control estableciendo la propiedad SkinID del control. si se crea una máscara predeterminada para un control Calendar. Máscaras Un archivo de máscara tiene la extensión de nombre de archivo . en una subcarpeta de la carpeta de temas. lo siguiente es una máscara de control Button: <asp:button runat="server" BackColor="lightblue" ForeColor="black" /> Los archivos . Label.css en la carpeta de tema. la hoja de estilos se aplica automáticamente como parte del tema. como archivos de script o archivos de sonido. TextBox o Calendar.Temas y máscaras de ASP. la parte de un tema de página podría incluir una máscara para un control TreeView. Normalmente. Es posible definir un archivo de máscaras independiente para cada control o definir todas las máscaras para un tema en un archivo único. en toda una aplicación Web o en todas las aplicaciones Web de un servidor. hojas de estilos en cascada (CSS). Como parte del tema. imágenes y otros recursos. Para hacer . Esta información general contiene las siguientes secciones: y Máscaras de temas y control y Ámbito de los temas y Prioridad en la configuración de temas y Propiedades que se pueden definir mediante temas y Temas frente a Hojas de estilos en cascada y Consideraciones de seguridad y Temas relacionados y Referencia Máscaras de temas y control Los temas están formados por un conjunto de elementos: máscaras. pero pueden estar en cualquier parte de la aplicación Web. Por ejemplo. la máscara de control se aplicará a todos los controles Calendar de las páginas en las que se utilice el tema.skin puede contener una o más máscaras de control para uno o más tipos de control.

Se podría aplicar un tema como tema de la hoja de estilos si se desea poder establecer las propiedades de controles individuales en la página mientras se sigue aplicando un tema para lograr una apariencia de conjunto.En el siguiente ejemplo de código se muestra un tema de página típico que define dos temas denominados BlueTheme y PinkTheme.Cualquier sitio Web del servidor y cualquier página de cualquier sitio Web pueden hacer referencia a un tema global. Una vez definido un tema. archivos de gráficos y otros recursos creados como una subcarpeta de la carpeta \App_Themes en su sitio Web. la aplicación Web encontrará automáticamente las imágenes. la configuración de las hojas de estilos y gráficos. Asimismo.En este caso. si coloca los recursos de un tema en una subcarpeta de la aplicación. Temas de página Un tema de página corresponde a una carpeta de temas con máscaras de control. Si utiliza la sintaxis de la tilde (~) para hacer referencia a los archivos de recursos. es posible aplicar un tema como tema de la hoja de estilos estableciendo la propiedad StyleSheetTheme de la página.Sin embargo.skin BlueTheme. el tema se aplicará a todas las páginas de las aplicaciones web en el servidor.Esta estrategia hace posible que el tema pueda crear una apariencia coherente a lo largo de las páginas.ext" /> También puede almacenar sus archivos de recursos fuera de la carpeta de temas. puede utilizar rutas de acceso como ~/Subcarpeta/nombreArchivo. MyWebSite App_Themes BlueTheme Controls.Cada tema constituye una subcarpeta diferente con respecto a la carpeta \App_Themes. Si el elemento <pages> se define en el archivo Machine.referencia a un archivo de recursos en una subcarpeta de la carpeta de temas.Los temas globales permiten definir una apariencia de conjunto para un dominio cuando se mantienen varios sitios Web en el mismo servidor. los valores de control en el tema y la página se combinan para formar la configuración final para el control. los temas globales se almacenan en una carpeta denominada Themes que es global al servidor web. esto permite aplicar un tema a una página que se creó en una versión anterior de ASP.skin PinkTheme.Si la configuración del control se define tanto en el control como en el tema. incluso si los controles de las páginas ya tuvieran valores de propiedades individuales.config.css Temas globales Un tema global es un tema que puede aplicar a todos los sitios Web en un servidor.ext para hacer referencia a los archivos de recursos. <asp:Image runat="server" ImageUrl="~/AppSubfolder/filename. . Si establece la propiedad de una página Theme. Prioridad en la configuración de temas Se puede especificar la prioridad que tiene la configuración del tema sobre la configuración regional del control especificando cómo se aplica el tema.Éste es el modelo utilizado en las hojas de estilos en cascada. Por ejemplo. la configuración de la página local tiene prioridad sobre aquellos definidos en el tema cuando la configuración se define en ambos lugares. hojas de estilos. se puede colocar en páginas individuales utilizando el atributo Theme o StyleSheetTheme de la directiva @ Page. utilice una ruta de acceso como la que se muestra en esta máscara de control Image: asp:Image runat="server" ImageUrl="ThemeSubfolder/filename. como en el siguiente ejemplo. o se puede aplicar a todas las páginas de una aplicación configurando el elemento <pages> en el archivo de configuración de la aplicación.ext" /> Ámbito de los temas Puede definir temas para una aplicación Web única o como temas globales que pueden utilizar todas las aplicaciones en un servidor web.Por ejemplo.NET.css PinkTheme Controls. Los temas globales se parecen a los de página en que ambos tipos incluyen valores de propiedades. la configuración del control del tema reemplaza cualquier configuración de la página en el control.

No puede aplicar varios temas a una página. y No utilice temas de un origen que no sea de confianza.Los usuarios malintencionados podrían utilizar esta información para usar temas que el programador no conoce y. Las propiedades que especifican explícitamente el comportamiento de los controles en lugar de su apariencia no aceptan valores de tema. Tenga en cuenta que no puede utilizar generadores de expresiones. a menos que aplique explícitamente el tema mediante la propiedad StyleSheetTheme. De manera similar. cualquier valor de propiedad definido en un tema al que se haga referencia en la propiedad Theme de una página reemplazará los valores de las propiedades establecidos mediante declaración. el diseño de plantilla de un control GridView. y Modificar la validación. y Divulgar información confidencial. . no se puede configurar la propiedad CommandName de un control Button mediante un tema. Por ejemplo.Sin embargo. no se puede utilizar un tema para configurar la propiedad AllowPaging o DataSource de un control GridView. divulgar información confidencial. etcétera. y Sólo se puede aplicar un tema a cada página. los temas se diferencian de las hojas de estilos en los siguientes puntos: y Los temas pueden definir muchas propiedades de un control o de una página. Propiedades que se pueden definir mediante temas Como regla general.Examine todos los temas que no provengan de su organización por si contienen código malintencionado antes de utilizarlos en su sitio Web. Temas frente a Hojas de estilos en cascada Los temas son similares a las hojas de estilos en cascada en cuanto a que tanto los temas como las hojas de estilos definen una serie de atributos comunes que se pueden aplicar a cualquier página. y Los temas pueden incluir gráficos. los temas permiten especificar los gráficos de un control TreeView. y Las formas de mitigar estas amenazas comunes son las siguientes: y Proteja los directorios de temas globales y de aplicación con una configuración de control de acceso apropiada. De forma predeterminada. en temas o máscaras. y Los temas no se colocan en cascada de la misma manera que las hojas de estilos. y no sólo las propiedades de un estilo.Se pueden utilizar temas malintencionados para: y Modificar el comportamiento de un control de forma que no se comporte según lo previsto.Los elementos de temas globales no pueden reemplazarse parcialmente por elementos de temas de nivel de aplicación. y Insertar script de cliente. que generan expresiones de código para asignarlas a una página en tiempo de compilación.Sólo se pueden establecer esas propiedades que tienen un atributo ThemeableAttribute establecidas como true en la clase de control. Consideraciones de seguridad Los temas pueden causar problemas de seguridad cuando se utilizan en el sitio Web. los elementos de tema de nivel de aplicación no reemplazarán los elementos del tema global.Por ejemplo. se pueden usar los temas para definir las propiedades relacionadas con la apariencia de una página o de un control o el contenido estático.Sólo los usuarios de confianza deben poder escribir archivos en los directorios de temas. consulte la sección anterior Prioridad en la configuración de temas. lo que puede suponer un riesgo de scripting entre sitios. de ese modo. a diferencia de las hojas de estilos que sí se pueden aplicar varias. y No exponga el nombre del tema en los datos de una consulta.Si crea un tema de nivel de aplicación con el mismo nombre que un tema global. Para obtener más información.

NET) en el archivo de configuración de la aplicación.skin y. Repita los pasos 2 y 3 para cada archivo de máscara de controles que desee crear. hojas de estilos para el aspecto de las páginas y máscaras de control para definir el aspecto de los controles de servidor. haga clic en Agregar nuevo elemento. Haga clic en Tema. haga clic con el botón secundario en el nombre del sitio Web para el que desea crear un tema de página y.skin por control.Por ejemplo. podría agregar un control Calendar a una página y establecer su encabezado de días. escriba un nombre para el archivo .A continuación. Agregue archivos a la carpeta para incorporar las máscaras de controles. a continuación. Los temas se pueden aplicar mediante el uso de los atributos Theme o StyleSheetTheme de la directiva @ Page. haga clic en Agregar carpeta ASP. Si la carpeta App_Themes no existe. Visual Web Developer crea una nueva carpeta para el tema como carpeta secundaria de la carpeta App_Themes.NET. Nota Sólo podrá definir una máscara predeterminada por control.skin o Calendar. Los temas se componen de varios archivos de base.skin. pero incluyendo únicamente las propiedades que vaya a establecer para el tema. por ejemplo. Escriba un nombre para la nueva carpeta. .skin.skin como se necesiten. En el Explorador de soluciones. En el ejemplo de código siguiente se muestra una máscara de control predeterminada para un control Button en la que se define el color y la fuente de todos los controles Button del tema: 4.A continuación. el nombre del tema es FirstTheme. de fecha seleccionada y otras propiedades. pero debe quitar el atributo ID. 3. En el cuadro Nombre. a continuación.Cómo: Definir temas de páginas ASP.Visual Web Developer sólo representará visualmente los temas aplicados mediante el atributo StyleSheetTheme.No obstante. agregue una definición normal de control (con sintaxis declarativa). 4. En el cuadro de diálogo Agregar nuevo elemento. En el Explorador de soluciones. haga clic en Agregar. Nota Una forma sencilla de crear una máscara de controles consiste en agregar el control a una página y configurarlo hasta conseguir el aspecto deseado.También puede crear temas en el nivel del equipo que se pueden utilizar en varias aplicaciones del servidor. Para agregar un archivo de máscara y una máscara a un tema de página 1. 2. como Button. a continuación. En el archivo .La definición del control debe incluir el atributo runat="server" y no debe incluir el atributo ID="". 2. La convención que se suele seguir es crear un archivo . <asp:Button runat="server" BackColor="Red" ForeColor="White" Font-Name="Arial" Font-Size="9px" /> Esta máscara de controles Button no contiene un atributo skinID. Visual Web Developer la crea. haga clic con el botón secundario en el nombre del tema y. El nombre de esta carpeta es también el nombre del tema de la página. se pueden crear tantos archivos . Para crear un tema de página 1. hojas de estilos e imágenes que compondrán el tema.El contenido de un tema es el mismo si el tema se define como un tema de página o como un tema global. si crea una carpeta denominada \App_Themes\FirstTheme.Podrá utilizar el atributo SkinID de la declaración de control de la máscara para crear máscaras con nombre para el mismo tipo de control. 5. 3. haga clic en Archivo de máscara. o estableciendo el elemento Elemento pages (Esquema de configuración de ASP. así como de otras imágenes y archivos. puede copiar la definición del control de la página en un archivo de máscara.Por ejemplo. puede definir temas de página y aplicarlos a una o varias páginas de la aplicación.NET Framework 4 En Visual Web Developer.NET.Se aplicará a todos los controles Button de la aplicación con el tema que no especifiquen el atributo skinID.

Si está probando el tema en un sitio Web remoto o en un sitio Web de FTP.Puede resultarle más fácil definir y probar el tema como tema de página y. 3. hojas de estilos e imágenes que compondrán el tema global. haga clic en Agregar.Por ejemplo. si crea una carpeta denominada \Themes\FirstTheme. Agregue archivos a la carpeta para incorporar las máscaras de controles.css y.NET. Visual Web Developer ejecuta las páginas en IIS para realizar las pruebas. después. como es para los temas de página. copiarlo en la carpeta de los temas globales del servidor web. 4. Nota Al definir un tema global.NETClientFiles\Themes Nota El nombre de la carpeta para los temas globales es Themes. haga clic en Agregar nuevo elemento. Si el sitio Web es un sitio Web de sistema de archivos que está probando con el servidor de desarrollo de ASP. En el Explorador de soluciones. vea Cómo: Aplicar temas de ASP. 2. abra una ventana de comandos y ejecute aspnet_regiis -c para instalar el tema en el servidor donde e ejecuta IIS. 3. En el cuadro Nombre. a continuación. Cree una carpeta Themes con la ruta de acceso siguiente. 2.NET. ASP. El nombre de la subcarpeta es el nombre del tema.NET agrega al elemento de encabezado de la página una referencia a la hoja de estilos.Para agregar un archivo de hoja de estilos en cascada al tema de la página 1.NET. el nombre del tema es FirstTheme.La ubicación en la que se crea una carpeta para los temas globales depende de si se ejecuta el sitio Web con Internet Information Services (IIS) o si se prueba con el servidor de desarrollo de ASP. Cuando el tema se aplica a una página. Si está probando el sitio Web utilizando un sitio Web local de IIS.NET\Framework\version\ASP. no App_Themes. escriba un nombre para el archivo .Para otros tipos de sitios Web. Cree una subcarpeta de la carpeta Themes para que contenga los archivos de temas globales. Copiar %windows%\Microsoft. 5. debe crear manualmente una carpeta de temas en la siguiente ruta de acceso.Para obtener más información. Para crear un tema global 1. Nota Si está trabajando con un sitio Web del sistema de archivos. En el cuadro de diálogo Agregar nuevo elemento. IISRootWeb\aspnet_client\system_web\version\Themes . a continuación.NET Crear temas globales Un tema global se aplica a todos los sitios Web de un servidor. de manera predeterminada Visual Web Developer ejecuta el sitio Web para realizar las pruebas iniciando el servidor de desarrollo de ASP. no puede agregarle directamente archivos de máscara y de hoja de estilos utilizando Visual Web Developer. haga clic con el botón secundario en el nombre del tema y. el tema está listo para realizar las pruebas. haga clic en Hoja de estilos.

web> <pages styleSheetTheme="Themename" /> </system.Por ejemplo.Como alternativa.config se aplican a todas las páginas Web ASP. la prioridad recae en el tema de página.config sigue las convenciones normales de jerarquía. a no ser que reemplace un tema para una página individual.config de la aplicación.config o bien crear un elemento <location> en el archivo Web. De manera predeterminada. ya sea éste global o de página.NET Framework 4 Puede aplicar los temas a una página. vea Configurar archivos y subdirectorios específicos. un sitio Web.Cómo: Aplicar temas de ASP. 2.Al establecer un tema en el nivel del sito Web los estilos y máscaras se aplican a todas las páginas y controles del sitio.La configuración del tema en el archivo Web. Para establecer un tema como tema de la hoja de estilos de forma que se subordine a la configuración local del control. Para aplicar un tema a una página individual y Establezca el atributo Theme o StyleSheetTheme de la directiva @ Page en el nombre del tema que se va a utilizar.web> <pages theme="ThemeName" /> </system. también se puede establecer un tema como tema de la hoja de estilos.config raíz para especificar una carpeta. los estilos y máscaras se aplican a esa página y a todos sus controles. En el archivo Web. como se muestra en el siguiente ejemplo: <configuration> <system. establezca en su lugar el atributo styleSheetTheme: <configuration> <system. como se muestra en el siguiente ejemplo: <%@ Page Theme="ThemeName" %> <%@ Page StyleSheetTheme="ThemeName" %> . los temas reemplazan la configuración local del control. Para aplicar un tema a un sitio Web 1. para aplicar un tema únicamente a un subconjunto de páginas. o globalmente.NET de esa aplicación.NET.web> </configuration> Nota Cuando un tema de aplicación tiene el mismo nombre que otro global. Para obtener información detallada. establezca el elemento <pages> en el nombre del tema.Al establecer un tema en el nivel de la página. de forma que dicho tema se aplique sólo a la configuración del control que no esté específicamente establecida en el mismo.web> </configuration> Los temas que se establecen en el archivo Web. puede colocar estas páginas en una carpeta con su propio archivo Web.

como en este ejemplo: <asp:Calendar id="Calendar1" runat="server" EnableTheming="false" /> Tras ello.Para obtener información detallada.NET Framework 4 Puede configurar una página o un control para omitir los temas. En el ejemplo siguiente se muestra cómo establecer el tema de una página basándose condicionalmente en un valor pasado en la cadena de consulta. sin embargo.Cómo: Deshabilitar temas de ASP. De forma predeterminada. con sus estilos y máscaras correspondientes. establezca la propiedad Theme de la página. como en este ejemplo: <%@ Page EnableTheming="false" %> Para deshabilitar temas en un control y Establezca la propiedad EnableTheming del control en false.Puede hacerse creando una máscara con nombre (entrada en un archivo .NET mediante programación Nota Los temas a los que se hace referencia a continuación no se incluyen en ASP.Para crear un tema personalizado.skin que tiene establecida la propiedad SkinID) y aplicándola a continuación mediante el identificador a controles individuales. como se muestra en el ejemplo siguiente: <asp:Calendar runat="server" ID="DatePicker" SkinID="SmallCalendar" /> Si el tema de la página no incluyera ninguna máscara de controles coincidente con la propiedad SkinID.En algunos casos. el tema se utiliza para establecer propiedades que no tienen ninguna configuración regional pero la configuración regional explícita es prioritaria.NET Framework 4 Aparte de especificar las preferencias de máscaras y temas en las declaraciones de página y los archivos de configuración. vea Cómo: Definir temas de páginas ASP.NET. sólo se aplicará a la página que lo declara.Puede establecer mediante programación temas de páginas y temas de hojas de estilos. Cómo: Aplicar temas de ASP. Conviene deshabilitar este comportamiento cuando no se desee que un tema reemplace el aspecto predefinido de una página o control.NET. el procedimiento para aplicar cada tipo de tema es diferente. Para aplicar mediante programación un tema de una página y En un controlador para el método PreInit de la página. Aplicar máscaras a los controles Las máscaras definidas en el tema se aplicarán en todas las instancias de controles de la aplicación o en las páginas a las que se aplique el tema. los temas reemplazan la configuración regional del aspecto de páginas y controles. Para aplicar una máscara con nombre a un control y Establezca la propiedad SkinID del control. el tema. vea Cómo: Aplicar temas de ASP. Nota Puede dar prioridad a la configuración de controles en la página actual aplicando un tema como un tema de la hoja de estilos. puede aplicar temas mediante programación. .NET. Para deshabilitar temas en una página y Establezca el atributo EnableTheming de la directiva @ Page en false.En ese caso. es posible que desee aplicar un conjunto concreto de propiedades a un control individual.NET. . el control utilizará la máscara predeterminada para ese tipo de control.

.

Los temas se componen de varios elementos: máscaras de control de servidor.NET que permita al usuario seleccionar un tema para la página.aspx. escriba el nombre de la carpeta dónde desea conservar las páginas de su sitio Web. Haga clic con el botón secundario del mouse en la nueva carpeta Theme1 y haga clic en Cambiar nombre. En el Explorador de soluciones. y Crear una página de ASP. a continuación.APLICAR IVAN Tutorial: Crear temas seleccionables por el usuario. siguiendo los pasos que se describen en Tutorial: Crear una página Web básica en Visual Web Developer). incluido el cambio de estilo de los elementos de la página maestra. 2. "Crear una página maestra".NET con una página maestra aplicada que utilice un tema. los principios mostrados se aplican a temas más complejos que incluyan gráficos. cree un sitio y una página Web nuevos siguiendo estos pasos. 6. 5.NET Framework 4 En este tutorial se muestra cómo crear una página ASP. En Plantillas instaladas de Visual Studio. En la lista Lenguaje. 2. Puede aplicar una apariencia similar a todas las páginas de una aplicación Web. En este ejemplo. y Ejecutar una página para mostrar temas diferentes aplicados a la página. .Escriba Azul y presione ENTRAR. puede utilizar ese sitio Web y pasar a la sección siguiente. En el cuadro de diálogo Agregar nuevo elemento. haga clic con el botón secundario del mouse en el nombre del proyecto del sitio Web. haga clic en Sitio Web de ASP. y . en Microsoft Visual Web Developer.NET. y Crear un control de servidor de lista desplegable que aplique un nuevo tema a una página. Entre las tareas ilustradas en este tutorial se incluyen las siguientes: y Crear un tema. haga clic en Nuevositio Web. 3.skin al archivo.NET y. escriba el nombre de carpeta C:\WebSites. esquemas de diseño diferentes en el archivo CSS y máscaras de control de servidor más complejas. Aunque en este ejemplo se utiliza una sola máscara de control y un archivo de hoja de estilos en cascada (CSS) básico. se utiliza una máscara y una hoja de estilos para crear un tema. Haga clic con el botón secundario del mouse en la nueva carpeta denominada Azul y. haga clic en Agregar carpeta ASP. Para crear un tema 1. Por ejemplo. incluido un archivo CSS y una máscara de control de servidor. En el menú Archivo. a continuación. 3.NET Framework. haga clic en el lenguaje de programación con el que prefiera trabajar.Haga clic en Agregar. haga clic en Tema. 4. Los temas se definen en directorios especiales del proyecto de sitio Web. En el cuadro Ubicación. Visual Web Developer crea la carpeta y una nueva página denominada Default. y Crear una página maestra de ASP. Requisitos previos Para completar este tutorial. 4. Crear un Tema Un tema es una colección de valores de propiedades que permiten definir la apariencia de páginas y controles. Aparece el cuadro de diálogo Nuevo sitio Web. seleccione Archivo de máscara y asigne el nombre default. Crear un sitio Web Si ya ha creado un sitio Web en Visual Web Developer (por ejemplo. archivos CSS y otros recursos. Abra Visual Web Developer. haga clic en Agregar nuevo elemento. Se crea automáticamente la carpeta App_Themes y se agrega una nueva carpeta de temas denominada Theme1. De lo contrario.NET que utilice un tema. Haga clic en Aceptar. necesitará: y Visual Web Developer (Visual Studio). Para crear un sitio Web del sistema de archivos 1.

Para crear la página maestra 1.En breve modificará estos archivos.En la parte superior de la página hay una declaración @ Master en lugar de la declaración @ Page que normalmente se encuentra en la parte superior de las páginas ASP.Puede contener cualquier combinación de texto estático y controles. haga clic en el lenguaje de programación con el que prefiera trabajar. haga clic en Agregar nuevo elemento. varias reglas horizontales y un marcador de posición de contenido de la página maestra como el diseño de la página Home. Crear una página maestra Para mostrar lo fácil que puede ser aplicar un tema a una página maestra y a una página que utilice dicha página maestra. 6. cree una página maestra simple para utilizarla con la página Default. seleccione el texto situado entre los dos elementos form y pegue el contenido siguiente en el área seleccionada. se utiliza una tabla que contiene un título. Diseñar la página maestra La página maestra define los elementos que constituyen la página. a continuación. 2.aspx del proyecto web.5.Asigne el nombre default. En este tutorial. que define el área de la página maestra donde se combinará el contenido reemplazable de las páginas de contenido en tiempo de ejecución. haga clic con el botón secundario del mouse en el nombre del sitio Web y. a continuación. como ocurre en el diseño predeterminado de la página maestra. En el Explorador de soluciones. haga clic en Página maestra.master seleccionado en la vista Código fuente. pero primero debe crear una página que contenga un control y algún código HTML que se pueda aplicar al tema. escriba Master1. Desactive la casilla Colocar el código en un archivo independiente y.Haga clic en Agregar. En Plantillas instaladas de Visual Studio. Para crear una tabla para la página maestra y Con el archivo Master1. seleccione Hoja de estilos.aspx. vuelva a hacer clic con el botón secundario del mouse en la nueva carpeta denominada Azul y.NET.css a la hoja de estilos. 3.master. En el Explorador de soluciones.El cuerpo de la página contiene un control asp:contentplaceholder con el valor de la propiedad ID establecido en ContentPlaceHolder1. haga clic en Agregar. Se creará el primer tema con un archivo CSS y un archivo de máscara de control de servidor vacíos.En el tutorial. La nueva página maestra se abre en la vista Código fuente. 5. trabajará después más con el marcador de posición de contenido. 4. a continuación. En el cuadro Nombre.Tenga en cuenta que este código coloca el marcador de posición de contenido en una tabla en lugar de entre los elementos div. haga clic en AgregarNuevo elemento. En la lista Lenguaje.Una página maestra también contiene uno o más marcadores de posición de contenido que indican dónde aparecerá el contenido dinámico cuando se muestren las páginas. . En el cuadro de diálogo Agregar nuevo elemento.

.NET que se asocia a la página maestra. 3. Para agregar contenido a la página de inicio 1. body o form.Utilizará la lista desplegable para seleccionar el tema que se aplica a la página. Active la casilla Seleccionar la página maestra y. un encabezado 2 y un párrafo.Tenga en cuenta que puede agregar también el control a la página en la vista Diseño. En la lista Lenguaje. como html. haga clic en el lenguaje de programación con el que prefiera trabajar.NET. haga clic en Web Forms. Aparece el cuadro de diálogo Seleccionar la página maestra. Haga clic en Master1. 6. En Plantillas instaladas de Visual Studio. un elemento de párrafo y una lista desplegable. Para crear la página de contenido 1.También se agrega un control de lista desplegable. escriba Página principal. haga clic en Agregar. 5. debe contener un atributo MasterPageFile en la directiva @ Page.master y en Aceptar.En la página de contenido.La página de contenido es una página especializada de ASP.La página contiene una directiva @ Page que asocia la página actual a la página maestra seleccionada con el atributo MasterPageFile. Agregar contenido a la página de contenido Una página de contenido no tiene los elementos usuales que constituyen una página ASP. En el cuadro Nombre.aspx. tal como se muestra en el ejemplo de código siguiente. Se crea un nuevo archivo denominado Home. a continuación. seleccione Agregar nuevo elemento.Crear una página de contenido La página maestra proporciona la plantilla para el contenido.Como la página va a utilizar una página maestra.La página utilizará el marcador de posición de contenido de la página maestra y tendrá un título. un elemento de encabezado 2.En el ejemplo siguiente se crean tres elementos HTML: un encabezado 1. Pegue el siguiente código entre las etiquetas asp:Content de apertura y cierre correspondientes al marcador de posición con la propiedad ID establecida en ContentPlaceHolder1.NET que incluye sólo el contenido que se va a combinar con la página maestra. puede agregar una elemento de encabezado 1.El ejemplo siguiente y las etiquetas script deben agregarse a la página de contenido en la línea situada detrás de la . Agregue una sección de script que ejecute el código que carga el tema cuando se selecciona de la lista desplegable.El contenido de la página maestra se define creando una página ASP. haga clic con el botón secundario del mouse en el nombre del sitio Web y. agregará el texto y los controles que desee mostrar cuando los usuarios soliciten la página. a continuación. 4. así como el marcador de posición de contenido. 2. En el Explorador de soluciones. un subtítulo y una lista desplegable.En su lugar. el contenido que se desea mostrar en la página maestra se agrega reemplazando las áreas de marcador de posición creadas en dicha página.En este ejemplo. La página de contenido utilizará la página maestra que ha creado y los temas que creará a continuación. si lo prefiere 2.

El paso siguiente del tutorial consiste en crear varios temas que puede utilizar para mostrar cómo se aplica un tema diferente. h1 { font-size: large. 2. Agregue el código siguiente a la lista desplegable para designar los colores de la página cuando se seleccione el tema Azul. aplique estilo a los elementos encabezado 1 y encabezado 2 en la página de contenido.skin de la carpeta Azul en la vista Código fuente.El formulario de solicitud de página contiene una matriz de valores. font-size: x-large. agregue un color de fondo a la tabla con el código siguiente.title { font-size: 1em. text-align: center. Para modificar el tema Azul 1. font-weight: bolder. color: Navy. font-family: verdana. agregue el código siguiente para dar formato al título de tabla de la página maestra.Como sabe qué elementos constituyen la página predeterminada y la página maestra que utiliza. Modificar el tema Azul El tema Azul contiene una hoja de estilos vacía y una máscara vacía. Después. Abra el archivo Default. cuando se carga la página.directiva @ Page.Primero. ahora puede modificar los archivos de temas para agregar color a los elementos de la página.Este valor se asigna al tema de la página y. y el valor en el índice 4 es el valor seleccionado de la lista desplegable. td. Abra el archivo Default.header { background-color: Blue. } 4. } 5. <asp:dropdownlist runat="server" ForeColor="white" BackColor="Blue" /> 3. table. se aplica el nuevo tema. A continuación.skin de la carpeta de temas Azul en la vista Código fuente. color: Navy. } h2 . El tema se carga durante el evento PreInit del ciclo de vida de la página.

. } hr { border: 0. presione CTRL+F5 para ejecutarla. height: 2px. text-align: left. a continuación. Crear temas adicionales El tema Azul está bien. modificar los colores utilizados en el tema para reflejar los nuevos colores del tema. aplique estilo a la regla horizontal y al elemento de párrafo. 2.La directiva de página debe tener un aspecto similar al del ejemplo siguiente.{ font-family: Verdana.aspx con el diseño de la página Master1.aspx. margin-top: 30.Puede copiar los archivos de hoja de estilos y máscara en nuevos directorios de temas y. pero el propósito de este tutorial es proporcionar al usuario de la página varias opciones para un tema.aspx. Rojo y Verde. Abra Home. aplica el tema Azul y muestra la página resultante en el explorador.Observe que el tema Azul se ha aplicado a los elementos HTML y a la lista desplegable.master en una sola página y. Para probar la página y Mientras ve la página Home. Para asociar una página a un tema 1.aspx en la vista Código fuente. Finalmente.NET. } Asociar los temas a la página Para poder ver el tema aplicado a la página Home. border-top: 2px solid Aqua. necesita agregar un atributo a la directiva @ Page que indique que la página utiliza un tema. Probar la página Puede probar la página ejecutándola tal como haría con cualquier página ASP. } 6. así como al título y al fondo definidos en el archivo principal.NET combina el contenido de la página Home.En el procedimiento siguiente se crean dos nuevos temas. p { font-family: Verdana. ASP. color: Aqua. a continuación. color: Navy. font-size: medium. Agregue el atributo StylesheetTheme a la directiva @ Page y establézcalo en un valor similar al del tema Azul. font-size: small.

5. Modifique la hoja de estilos para que cada tema refleje el nombre del tema. color: Green. el archivo de máscara del tema Rojo debe tener un aspecto como el del ejemplo siguiente. 3. color: Teal. color: Green. Haga clic con el botón secundario del mouse en la carpeta Rojo y. color: Teal. haga clic en Tema. haga clic con el botón secundario del mouse en la carpeta Verde y haga clic en Pegar para colocar copias de los archivos Default. } h2 { font-family: Verdana.NET y. } . font-size: small. 4. text-align: center. margin-top: 30.Por ejemplo. a continuación.Tenga en cuenta que deseará utilizar varios tonos de verde para que los distintos elementos HTML y el texto contrasten con el fondo.Con el título de la carpeta Theme1 seleccionado. Abra la carpeta Azul y seleccione los archivos Default. p { font-family: Verdana. font-family: verdana. haga clic con el botón secundario del mouse en la carpeta App_Themes. pero asigne a la nueva carpeta de temas el nombre Verde. escriba Rojo y presione ENTRAR. a continuación. haga clic en Pegar. } table. } td. } h1 { font-size: large. 2. font-size: medium. <asp:dropdownlist runat="server" ForeColor="white" BackColor="Red" /> 6.Para crear temas adicionales 1. En el Explorador de soluciones. haga clic en Copiar. height: 2px. font-weight: bolder. font-size: x-large.A continuación.title { font-size: 1em. } hr { border: 0. border-top: 2px solid Teal.css en la carpeta Verde.skin y Default.header { background-color: Lime. haga clic en Agregar carpeta ASP.Haga clic con el botón secundario del mouse en los dos archivos seleccionados y. Modifique el atributo de color en el archivo de máscara de forma que refleje el color del tema.La hoja de estilos del tema Verde podría tener un aspecto similar al del ejemplo siguiente. a continuación.css.skin y Default. text-align: left. Repita el paso 1.

Observe que la hoja de estilos se aplica a los elementos HTML de la página y la máscara se aplica al control de lista desplegable.master) que tiene un diseño predefinido que puede incluir texto estático.NET permiten crear un diseño coherente para las páginas de la aplicación. puede crear páginas de contenido individuales que incluyan el contenido que desea mostrar. el diseño y el comportamiento estándar que desea que tengan todas las páginas (o un grupo de páginas) de la aplicación en una sola página maestra.NET con la extensión .NET. presione CTRL+F5.Para obtener información detallada. Pasos siguientes Para obtener más información sobre el uso de páginas maestras. Páginas principales ASP.NET Framework 4 Las páginas maestras de ASP. la propia página maestra y una o varias páginas de contenido.Puede definir el aspecto.A continuación.Cuando los usuarios solicitan las páginas de contenido. elementos HTML y controles de servidor. vea Tutorial: Crear y usar páginas maestras ASP. Cambie a la página Home.La página maestra se identifica mediante una directiva @ Master especial que reemplaza la directiva @ Page utilizada en las páginas .aspx y. Páginas maestras Una página maestra es un archivo de ASP. Esta información general contiene las siguientes secciones: y Cómo funcionan las páginas maestras y Ventajas de las páginas maestras y Comportamiento en tiempo de ejecución de las páginas maestras y Rutas de acceso de la página maestra y la página de contenido y Páginas maestras y temas y Ámbito de las páginas maestras y Temas relacionados y Referencia Cómo funcionan las páginas maestras Las páginas maestras se componen en realidad de dos partes.El aspecto de la directiva es el siguiente: .NET anidadas. Para seleccionar diferentes temas 1.aspx normales. las combinan con la página maestra con el fin de generar una salida que combine el diseño de la página maestra con el de la página de contenido.master (por ejemplo.Probar la selección de temas La lista desplegable se puede utilizar ahora para seleccionar entre los tres temas de la página. a continuación. MySite. Seleccione Verde o Rojo en la lista desplegable. 2. Nota También se pueden anidar páginas maestras.NET en Visual Web Developer. vea Páginas maestras ASP.

opcionalmente.Tras definir los controles ContentPlaceHolder.Puede utilizar cualquier elemento HTML y ASP. head y form.aspx y.Estos controles PlaceHolder definen las regiones que incluirán contenido reemplazable. la página maestra también incluye todos los elementos HTML de nivel superior de una página.A su vez. un elemento img para el logotipo de la compañía.Además de la directiva @ Master. que son páginas ASP. la página maestra también incluye uno o varios controles ContentPlaceHolder.Por ejemplo. en una página maestra podría utilizar una tabla HTML para el diseño. . texto estático para el aviso de copyright y controles de servidor para crear la navegación estándar en el sitio. Marcadores de posición de contenido reemplazables Además del texto estático y los controles que aparecerán en todas las páginas. una página maestra tendría el siguiente aspecto: Páginas de contenido Para definir el contenido de los controles PlaceHolder de la página maestra. cree páginas de contenido individuales. archivos de código subyacente) que están enlazadas a una página maestra concreta.Por ejemplo. como html. una página de contenido podría tener la siguiente directiva @ Page.El enlace se establece en la directiva @ Page de la página de contenido al incluir un atributo MasterPageFile que apunta a la página maestra que se va a utilizar.NET (archivos . el contenido reemplazable se define en las páginas de contenido. que la enlaza con la página Master1.NET en la página maestra.master.

.

se compilan las dos páginas. Los usuarios solicitan una página escribiendo la dirección URL de la página de contenido. Si las páginas se solicitan por primera vez. Si la directiva hace referencia a una página maestra. Comportamiento en tiempo de ejecución de las páginas maestras En tiempo de ejecución. mediante conjuntos de marcos. y Proporcionan un control más preciso sobre el diseño de la página final al permitir controlar el modo en que se representan los controles PlaceHolder. también se lee la página maestra. etc. y Facilitan la creación de un conjunto de controles y código. 2. 5. se lee la directiva @ Page. puede utilizar los controles en la página maestra para crear un menú que se aplique a todas las páginas.NET. 3. . el texto y los elementos de control existentes repetidamente. y Proporcionan un modelo de objetos que permite personalizar la página maestra a partir de páginas de contenido individuales. El contenido de los controles Content individuales se combina en el control ContentPlaceHolder correspondiente de la página maestra. Ventajas de las páginas maestras Las páginas maestras proporcionan una funcionalidad que tradicionalmente los programadores creaban copiando el código. y un conjunto diferente de páginas de contenido para cada página maestra. las páginas maestras se controlan en la secuencia siguiente: 1. controles de usuario de ASP.Puede crear varias páginas maestras para definir diseños distintos para partes diferentes del sitio. Por ejemplo. Cuando se obtiene la página. La página maestra con el contenido actualizado se combina en el árbol de control de la página de contenido. archivos de inclusión de elementos comunes. 4. La página combinada resultante se representa en el explorador. y aplican los resultados en un conjunto de páginas. Entre las ventajas de las páginas maestras se incluyen las siguientes: y Permiten centralizar las funciones comunes de las páginas para que las actualizaciones puedan llevarse a cabo en un solo lugar.

. si establece una propiedad de toda la página en la página maestra. la página maestra también podría tener marcado y controles en los controles ContentPlaceHolder. si establece la propiedad EnableViewState de la página de contenido en true pero establece la misma propiedad en false en la página maestra. la página maestra actúa fundamentalmente de igual forma que un control de usuario: como un elemento secundario de la página de contenido y como un contenedor dentro de esa página. Rutas de acceso de la página maestra y la página de contenido Cuando se solicita una página de contenido. su contenido se combina con la página maestra.Sin embargo.Este proceso se describe en el diagrama siguiente: Desde la perspectiva del usuario. la ruta de acceso representa la ubicación de la página de contenido. en algunos casos. se puede hacer referencia a los miembros públicos de una página maestra a partir del código de la página de contenido.Por ejemplo.En este caso. En general. la combinación de las páginas maestras y de contenido da como resultado una única página. las dos páginas actúan como contenedores diferentes para sus respectivos controles.Por ejemplo. si la página de contenido no tiene los controles Content correspondientes. tal y como se describe en la sección siguiente. porque la página maestra es el elemento principal más inmediato para los controles de la página. si obtiene la propiedad CurrentExecutionFilePath del objeto HttpRequest ya sea en el código de la página de contenido o en el código de la página maestra. la página maestra es el contenedor de todos los controles de servidor representados en el explorador.De hecho. sin embargo. puede verse afectado el comportamiento de la página de contenido.La página de contenido actúa como un contenedor de la página maestra.Sin embargo. Esta diagrama está simplificado.El árbol de control de una página maestra y una página de contenido combinadas tendrá un aspecto similar a: . Desde la perspectiva del programador. esta estructura no tiene ningún efecto sobre el modo en que se crean o se programan las páginas.La dirección URL de esta página es la de la página de contenido. Tenga en cuenta que la página maestra pasa a formar parte de la página de contenido. el estado de vista se deshabilitará porque la configuración de la página maestra tendrá prioridad. y la página se ejecuta en el contexto de la página de contenido.

NET.master. Esto puede afectar al modo en que se especifican las direcciones URL de los recursos.En ese caso. como en el ejemplo de código siguiente.) Por cuestiones prácticas. Para obtener más información sobre cómo especificar las rutas de acceso en los controles de servidor ASP. podría situar un control Image en una página maestra y establecer su propiedad ImageUrl para que hiciera referencia a la página maestra. Por ejemplo. ASP.NET modificará la dirección URL para que se resuelva correctamente en el contexto de la página de contenido.NET no puede modificar las direcciones URL de los elementos que no son controles de servidor.NET a una página maestra. Las páginas maestras se resuelven en el contexto de las páginas de contenido.NET no modificará esta dirección URL. las dos podrían contener controles de imagen que hicieran referencia a archivos de imágenes o podrían contener delimitadores que hicieran referencia a otras páginas. y La propiedad se marca internamente en el control como una dirección URL. Sin embargo.NET puede modificar las direcciones URL en los casos siguientes: y La dirección URL es una propiedad de un control de servidor ASP.La página maestra y la página de contenido no tienen que estar en la misma carpeta. como archivos de imágenes y páginas de destino. y Si todo el sitio se ha configurado para que utilice un tema incluyendo la definición de un tema en el elemento Elemento pages (Esquema de configuración de ASP. ASP. si utiliza un elemento img en una página maestra y establece su atributo src en una dirección URL.NET modifica dinámicamente las direcciones URL de las propiedades que hacen referencia a recursos externos.NET puede combinar el contenido y las páginas maestras en una sola página representada.NET. se producirá un error en la página cuando se ejecute. utilice un control de servidor Image. Referencias a recursos externos La página de contenido y la página maestra pueden contener controles y elementos que hagan referencia a recursos externos.De este modo. Páginas maestras y temas No puede aplicar directamente un tema de ASP.NET. ASP.NET puede resolver las direcciones URL correctamente y puede evitar los problemas de mantenimiento que podrían surgir al mover la página maestra o la página de contenido. El contexto de las páginas maestras y de contenido combinadas es el de la página de contenido. vea Temas y máscaras de ASP.NET.NET que se utilizan normalmente para hacer referencia a recursos externos se marcan de este modo. la dirección URL se resolverá en el contexto de la página de contenido y se creará la dirección URL convenientemente. Controles de servidor En los controles de servidor de las páginas maestras.Por ejemplo. por lo que el tema de la página de contenido también se aplica a la página maestra. Siempre que el atributo MasterPageFile de la directiva @ Page de la página de contenido se resuelva como una página . resulta recomendable utilizar un control de servidor incluso para los elementos que no requieren código de servidor. vea Rutas de acceso a sitios web ASP. en los delimitadores.NET). las propiedades de los controles de servidor ASP.Por ejemplo. Por ejemplo. ASP. al trabajar con elementos en las páginas maestras. Para obtener más información. Ámbito de las páginas maestras Puede adjuntar páginas de contenido a una página maestra en tres niveles: y En el nivel de la página Puede utilizar una directiva de página en cada página de contenido para enlazarla a una página maestra. los temas se aplican a las páginas maestras bajo estas circunstancias: y Si un tema está definido en la página de contenido. en lugar de utilizar un elemento img. Si agrega un atributo de tema a la directiva @ Master.(La propiedad se marca con el atributo UrlPropertyAttribute. En general. Otros elementos ASP. ASP. ASP.En tiempo de ejecución. .

.

Este tutorial lo muestra cómo trabajar con temas de ASP. va a configurar un control Button. En el menú Archivo. Para empezar a trabajar con temas en este tutorial. Para crear un sitio Web del sistema de archivos 1. una o varias hojas de estilo. de manera que pueda ver cómo los temas afectan a dichos controles. Haga clic en Aceptar. escriba el nombre de la carpeta dónde desea conservar las páginas de su sitio Web.aspx. 5. Las tareas ilustradas en este tutorial incluyen: y y Aplicar temas de ASP. En la lista Lenguaje. Visual Web Developer crea la carpeta y una nueva página denominada Default. Abra Visual Web Developer. un control Calendar y un control Label. 3. Para colocar los controles en la página . escriba el nombre de carpeta C:\WebSites. En el cuadro Ubicación.NET predefinidos a páginas individuales y a un sitio en conjunto. Crear un tema propio con máscaras. De lo contrario. En Plantillas instaladas de Visual Studio.NET Framework 4 Este tutorial muestra cómo utilizar temas para aplicar un aspecto coherente a las páginas y controles de un sitio Web. El entorno .Tutorial: Personalizar un sitio Web mediante temas en Visual Studio. haga clic en Nuevositio Web.NET Framework. haga clic en Sitio Web de ASP. Por ejemplo. por ejemplo el control TreeView. 4. Un tema puede contener archivos de máscara que definan un aspecto común para cada uno de los controles. haga clic en el lenguaje de programación con el que prefiera trabajar. cree un sitio Web y una página nuevos siguiendo estos pasos.NET. y gráficos comunes para su uso con los controles. Requisitos previos Para poder completar este tutorial. mediante los pasos descritos en Tutorial: Crear una página Web básica en Visual Web Developer). Crear el sitio Web Si ya ha creado un sitio Web en Visual Web Developer (por ejemplo. 2. 6. que se utilizan para definir la apariencia de controles individuales. puede utilizar ese sitio Web y pasar a la sección siguiente. necesitará: y y Microsoft Visual Web Developer (Visual Studio).NET en los sitios Web. Aparece el cuadro de diálogo Nuevo sitio Web.

3. no utilice el comando AutoFormat para establecer el aspecto del control Calendar.1. El nombre de esta carpeta será el nombre del tema que cree (aquí.skin. Para crear un tema nuevo 1. 2. creará un tema con algunas máscaras simples. Para probar la página. haga clic en Agregar carpeta ASP.NET y. En esta parte del tutorial. En el archivo sampleTheme. agregue definiciones de máscaras como se muestra en el ejemplo de código siguiente. Cambie a la vista Diseño. seleccione Agregar nuevo elemento. 4. que definen el aspecto de los controles. 2. pero debe recordarlo cuando aplique el tema personalizado. a continuación. haga clic en Tema. El diseño exacto de la página no es importante. haga clic con el botón secundario en el nombre del sitio Web. Asegúrese de que el elemento head de la página tiene el atributo runat="server" de forma que diga lo se indica a continuación: <head runat="server"></head> 5.skin. y a continuación con temas diferentes. En Visual Web Developer. Del grupo Estándar del Cuadro de herramientas. Por ejemplo. Se crean la carpeta denominada App_Themes y una subcarpeta denominada Theme1. Haga clic con el botón secundario en la carpeta sampleTheme. un control Button y un control Label hacia la página. Crear y aplicar un tema a una página Con ASP. agregue un nuevo archivo de texto y denomínelo sampleTheme. sampleTheme). 3. Nota No aplique ningún formato a ninguno de los controles. 4.NET resulta muy fácil aplicar un tema predefinido a una página o crear un tema único. Guarde la página. Copiar <asp:Label runat="server" ForeColor="red" Font-Size="14pt" Font-Names="Verdana" /> <asp:button runat="server" Borderstyle="Solid" Borderwidth="2px" Bordercolor="Blue" Backcolor="yellow"/> . puede verla antes de que se aplique un tema. Cambie el nombre de la carpeta Theme1 a sampleTheme. El nombre exacto no tiene importancia. arrastre un control Calendar. Cambie a la vista Código fuente.

. 3. 5. Las definiciones de máscaras son parecidas a la sintaxis para crear un control. Presione CTRL+F5 para ejecutar la página.skin que definió previamente). Puesto que no realizó una entrada en el archivo sampleTheme. Los controles Label y Button aparecerán con la configuración que realizó en el archivo sampleTheme.. Presione CTRL+F5 para ejecutar la página de nuevo. establezca el tema en el nombre de otro tema. 6.. vuelva a Visual Web Developer. los controles se representan con la combinación de colores definida en el tema. Nota Si agrega un archivo de hoja de estilos en cascada (CSS) a la carpeta sampleTheme.%> Nota Debe indicar el nombre de un tema real en el valor de atributo (en este caso.skin para el control Calendar. las definiciones de máscaras no incluyen una opción para la propiedad ID. Ya puede probar la página antes de que se aplique ningún tema. se muestra con su aspecto predeterminado.skin. Los controles se muestran con su aspecto predeterminado. agregue un atributo Theme que especifique sampleTheme como nombre del tema: Copiar <%@ Page Theme="sampleTheme" . Guarde el archivo de máscara y ciérrelo. Esta vez. se aplicará a todas las páginas que utilicen el tema. Cierre el explorador y. 5.aspx y. a continuación. Los valores de la selección anterior son sugerencias que serán más obvias cuando pruebe el tema más adelante. 4. En Visual Web Developer. salvo que las definiciones sólo contienen opciones que afectan al aspecto del control. 2. cambie a la vista Código fuente. Abra o cambie al archivo Default.Nota Las características exactas que defina no tienen importancia. Para probar los temas 1. En la directiva @ Page. a continuación. si lo hay. el archivo sampleTheme. Por ejemplo.

si utiliza un tema de personalización. Los temas de hojas de estilos utilizan los mismos archivos de temas que los temas de personalización. Cambie a la vista Diseño. Para utilizar un tema de hoja de estilos y ver el orden de prioridad 1. establezca ForeColor en el color azul. De igual forma. Presione CTRL+F5 para ejecutar la página.config. Cambie a la vista Código fuente. Cambie la declaración de la página: <%@ Page theme="sampleTheme" %> a una declaración de tema de hoja de estilos: <%@ Page StyleSheetTheme ="sampleTheme" %> 3. vuelva a cambiar: <%@ Page StyleSheetTheme="sampleTheme" %> a: <%@ Page Theme="sampleTheme" %> 9. las propiedades del tema reemplazarán todo lo que haya en la página local y todo lo que contenga un tema de hoja de estilos que se esté utilizando. Presione CTRL+F5 para ejecutar la página de nuevo. el orden de prioridad es: y y y Configuración del tema. para ello. Configuración de la página local. Cambie a la vista Código fuente. 4. Presione CTRL+F5 para ejecutar la página. pero tienen menos prioridad en los controles y propiedades de las páginas. 2. En este sentido. las propiedades del tema quedarán reemplazadas por lo que se declare localmente en la página. puede adaptarlo a su uso en una aplicación asociándolo a una página como tema de personalización (como se ha hecho en la sección anterior) o como tema de hoja de estilos. Temas de hojas de estilos y temas de personalización Una vez que haya creado un tema. 8. si decide utilizar un tema de hoja de estilos. Seleccione Label1 y. Observe que el valor de la propiedad ForeColor del control Label1 es el color rojo. 7. Cambie la declaración de la página para declarar un tema. 5. Configuración de temas de hoja de estilos. En ASP. 6. en lugar de un tema de hoja de estilos. El valor de la propiedad ForeColor de Label1 es el color azul. Presione CTRL+F5 para ejecutar la página. incluidos los temas establecidos en el archivo Web. . dicha prioridad equivale a la de un archivo de CSS. en Propiedades.7. Los controles vuelven a cambiar de aspecto.NET.

puede usar los siguientes valores de configuración: y BackColor Cián y BorderColor Rojo y BorderWidth 4 y CellSpacing 8 y Font-Name Arial y Font-Size Grande y SelectedDayStyle-BackColor Rojo y SelectedDayStyle-ForeColor Amarillo y TodayDayStyle-BackColor Rosa Nota Las características exactas que defina no tienen importancia. Aplicar temas a un sitio Web Puede aplicar un tema a todo un sitio web. El segundo control Calendar hereda sus propiedades de aspecto de la definición de máscara que realizó en el archivo sampleTheme.skin. . 3. En la vista Diseño. lo que implica que no es necesario aplicarlo a cada una de las páginas. 4. copie el elemento <asp:calendar> y sus atributos. a continuación. Cambie a la vista Código fuente y. Los dos controles Calendar tendrán el mismo aspecto.El valor de la propiedad ForeColor de Label1 vuelve a ser el color rojo. Abra el archivo Web. 2. No establezca ninguna de sus propiedades.config.aspx y arrastre un segundo control Calendar a la página. establezca las propiedades del control Calendar de manera que el control tenga un aspecto especial. Pegue la definición del control Calendar en el archivo sampleTheme. Cambie a la página Default. Quite la propiedad ID de la definición del archivo sampleTheme. Los valores de la lista anterior son sugerencias que serán más obvias cuando pruebe el tema más adelante. a continuación. Basar un tema personalizado en controles existentes Una manera sencilla de crear definiciones de máscaras consiste en usar el diseñador para establecer las propiedades de aspecto y. Guarde el archivo sampleTheme.skin. El primer control Calendar refleja los valores de propiedad explícitos que realizó. puede reemplazar la configuración de los temas en una página concreta. copiar la definición de los controles en un archivo de máscara. Cambie al archivo sampleTheme. Como sugerencia.aspx. Ejecute la página Default. Para basar un tema personalizado en controles existentes 1. 7.skin. o ábralo.skin.skin. 8. 5. 6. Si lo desea. Para establecer un tema para un sitio Web 1.

config. pase a la vista Código fuente. Quite el atributo theme (theme="themeName") de la declaración de @ Page. 6.config distinguen entre mayúsculas y minúsculas. Abra o cambie al archivo Default. dicho tema reemplazará cualquier tema especificado en el archivo Web. 5. 3. tal y como se indica en el siguiente ejemplo: <pages theme="sampleTheme" > Nota Los nombres de los elementos y atributos del archivo Web.2. a continuación. Guarde y cierre el archivo Web.config.aspx y. 4. La página se muestra con el tema que especificó en el archivo Web. Si decide especificar un nombre de tema en la declaración de la página.config. En el elemento pages.aspx. . Presione CTRL+F5 para ejecutar Default. agregue un atributo theme y establezca su valor en el nombre del tema que desee aplicar a todo el sitio web.

Sign up to vote on this title
UsefulNot useful