Informacin 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 pgina web.Estos estilos definen la forma en que se van a mostrar los elementos y su posicin en la pgina.Visual Studio 2010 proporciona herramientas que se pueden usar con las hojas CSS. Este tema contiene: y Escenarios y Caractersticas de las herramientas de CSS y Informacin general y Ejemplos de cdigo y Referencia de clases y Lo nuevo

Escenarios
En Visual Studio 2010, mientras utiliza el diseador para crear y modificar pginas web, puede escribir reglas de estilo insertadas en el cdigo, contenidas en una pgina web o contenidas en una hoja de estilos externa.Puede ver el relleno y los mrgenes aplicados a los elementos de la pgina utilizando las ayudas visuales.Tambin puede colocar los elementos con las herramientas de posicin.

Caractersticas 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:

La ventana Aplicar estilos permite crear, modificar y aplicar estilos.Tambin puede vincular o quitar una CSS externa.La ventana identifica los tipos de estilo y muestra si el estilo se utiliza en la pgina web actual y si se est usando en la seleccin actual.Para obtener ms informacin, vea Cmo: Usar las ventanas Aplicar estilos y Administrar estilos. La ventana Administrar estilos proporciona muchas de las caractersticas 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 pgina) a una hoja de estilos externa o viceversa.Tambin puede utilizarla para mover los estilos dentro de una hoja de estilos.Para obtener ms informacin, vea Cmo: Usar las ventanas Aplicar estilos y Administrar estilos. La ventana Propiedades de CSS muestra los estilos utilizados por la seleccin actual en una pgina web.Tambin muestra el orden de prioridad de los estilos.Adems, 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 ms informacin, vea Cmo: Usar la ventana Propiedades de CSS. La barra de herramientas Aplicacin de estilo directo permite aplicar o quitar estilos basados en clase o en identificador, y crear y aplicar nuevos estilos.Proporciona ms control sobre los estilos generados mediante Visual Studio.Para obtener ms informacin, vea Cmo: Usar la barra de herramientas Aplicacin de estilo directo. El selector de etiquetas permite seleccionar las etiquetas HTML mientras se est trabajando en una pgina web.La barra del selector de etiquetas se encuentra en la parte inferior de la ventana de edicin.Cuando se coloca el cursor en cualquier parte de una pgina, la barra rpida del selector de etiquetas muestra la etiqueta HTML subyacente de ese rea.Tambin puede utilizar la tecla ESC para desplazarse hacia arriba en la jerarqua HTML para seleccionar etiquetas que estn anidadas dentro de otras etiquetas.Para obtener ms informacin, vea Navegacin de etiquetas en el Editor HTML de Visual Web Developer.

Informacin general
En lugar de asignar los atributos de formato individualmente a cada elemento de una pgina, 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 cmo se crea un estilo y cmo se aplica.Esta seccin contiene informacin de la especificacin 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 (tambin denominada estilo) tiene dos partes principales: un selector (por ejemplo, h1) y una declaracin (por ejemplo, color:blue).La declaracin 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 segn 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 slo 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 pxeles alrededor de todos los prrafos (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).Tambin 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 cmo 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 comparndolos con las clases que se definen en un archivo .css.Esto es porque los nombres de clase se pueden utilizar como descriptores semnticos, como un microformato, en cdigo ECMAScript o para marcar un estilo que an 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 pgina 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 cmo 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 pgina web. y En una hoja de estilos externa (archivo .css) que se vincula o se importa en la pgina 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 slo a una pgina se escriben en el elemento style de la pgina.Las reglas de estilo que se aplican a un nico elemento de la pgina se escriben como estilo inline.Muchos diseadores 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 pgina 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 (especficos de la pgina) Las reglas de estilo CSS se pueden definir en un elemento style dentro del elemento head de una pgina web.En ese caso, las reglas de estilo se aplican slo a los elementos de esa pgina. En el ejemplo de cdigo siguiente se muestra cmo definir y aplicar una regla de estilo CSS a todos los elementos h1 de una pgina 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 pgina 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 extensin de nombre de archivo .css que contiene slo reglas de estilo.Puede vincular una hoja de estilos a una pgina 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 pgina 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 pginas 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 ms fcil administrar las reglas de estilo.

Introduccin 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 pgina web invalida un estilo definido en una hoja de estilos externa.De forma similar, un estilo inline definido en un elemento HTML de la pgina 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 seguirn aplicndose a los elementos incluso despus de que se hayan aplicado los estilos locales.En el ejemplo de la seccin 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 caractersticas 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 pgina 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 edicin de CSS enriquecida con diversas herramientas nuevas para que resulte ms fcil que nunca trabajar con hojas de estilos en cascada (CSS).Gran parte del trabajo de preparacin del diseo y de aplicacin de estilos a los contenidos se puede realizar en la vista Diseo con la ventana Propiedades de CSS, las ventanas Aplicar estilos y Administrar estilos y la herramienta Aplicacin de estilo directo. Tambin puede cambiar la posicin, el relleno y los mrgenes en la vista Diseo con las herramientas de diseo visuales WYSIWYG.

Tutorial: Crear y modificar un archivo CSS .NET Framework 4

En este tutorial se presentan las caractersticas de hojas de estilos en cascada (CSS) de Visual Studio 2008. Le servir de gua para crear un diseo de pgina de tres columnas, que ilustra las tcnicas bsicas de creacin de una nueva pgina 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 caractersticas orientadas a CSS. y Crear un diseo de pgina de tres columnas mediante CSS.

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

Crear un sitio Web

En esta parte del tutorial puede crear un sitio web y agregarle una nueva pgina.En la seccin siguiente, puede agregar un archivo CSS y, a continuacin, ejecutar la pgina en un explorador web. Si ya ha creado un sitio web (por ejemplo, segn los pasos descritos en el tema Tutorial: Crear una pgina Web bsica en Visual Web Developer), puede usar dicho sitio web y pasar a la seccin "Agregar y aplicar estilos a los elementos de la pgina", ms 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 Ubicacin, haga clic en Sistema de archivos y escriba el nombre de la carpeta en la que desea guardar las pginas 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 continuacin, haga clic en Aceptar.

4.

Nota
El lenguaje de programacin que elija ser el valor predeterminado para el sitio Web, sin embargo, puede establecer el lenguaje de programacin para cada pgina de forma individual. 5. Visual Web Developer crea la carpeta y una pgina nueva denominada Default.aspx.

Agregar y aplicar estilos a los elementos de la pgina

Para que se pueda centrar en las herramientas de formato y estilo en lugar de en la creacin de elementos para aplicar estilos, en esta seccin se proporciona un conjunto de elementos de pgina. Puede copiar y pegar estos elementos en una pgina. El cdigo incluye secciones realizadas con elementos div que incluyen una pancarta, secciones de barra lateral izquierda y derecha, una seccin de contenido principal y un pie de pgina. Estos elementos simples contienen texto con el que puede trabajar e identificadores de elemento. En algunos casos, los elementos contienen clases CSS que puede usar para aplicar estilo a elementos concretos de una pgina.

Agregar elementos de pgina

En el procedimiento siguiente, copiar elementos de pgina con los que podr trabajar utilizando las herramientas de CSS. Los elementos de pgina constan de una pancarta que contiene texto y un cuadro de bsqueda, un pie de pgina y tres secciones de texto. El contenido principal de la pgina se encuentra en la ltima seccin de texto.

Para agregar elementos de pgina a la pgina predeterminada

1. Abra la pgina Default.aspx o cambie a ella.

Nota
Puede utilizar cualquier pgina que est disponible en el sitio web. 2. 3. Cambie a la vista Cdigo fuente. Agregue el cdigo siguiente detrs 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, consectetuer adipiscing elit.Curabitur in sem.Vivamus adipiscing vulputate lacus.Sed enim lorem, fringilla eget, nonummy sed, ullamcorper sit amet, diam.Sed a justo.Curabitur quis nibh sit amet nunc malesuada rutrum.</p> </div> <div id="rightsidebar" class="column"> <h3>Matters of the Web</h3> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Curabitur in sem.Vivamus adipiscing vulputate lacus.Sed enim lorem, fringilla eget, nonummy sed, ullamcorper sit amet, diam.Sed a justo.Curabitur quis nibh sit amet nunc malesuada rutrum.</p> </div> <div id="maincontent" class="column"> <h2>Matters of the Web</h2> <p> Pellentesque mattis tincidunt ipsum.Donec tempus, nunc vitae rhoncus imperdiet, eros turpis accumsan risus, ut luctus ipsum

lacus a felis.Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean convallis euismod nulla.Suspendisse potenti.Donec in mi nec odio tincidunt luctus.Donec euismod, mauris cursus molestie convallis, quam pede tempus magna, mollis dapibus quam est et magna.Aenean eros massa, elementum vehicula, dapibus eget, lobortis non, mauris.Vivamus nisl ante, interdum eget, sagittis vel, scelerisque nec, magna.Praesent placerat nibh vel metus viverra tincidunt.</p> <p>Fusce magna urna, gravida non, sodales vehicula, consequat ac, lacus.Ut sed eros sit amet neque malesuada malesuada.Fusce porttitor cursus eros.Maecenas libero odio, convallis vel, tristique id, sodales vel, leo.Curabitur nibh neque, interdum eget, convallis id, adipiscing nec, risus.Suspendisse rutrum dui sed urna.Pellentesque leo felis, tempor eu, convallis venenatis, auctor vitae, justo.In at massa.</p> </div> <div id="footer"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit 2007.</p> </div> </div>
4. 5. Guarde la pgina. Cambie a la vista Diseo para ver el formato predeterminado.

Aplicar estilos en la vista Diseo

En la vista Diseo, puede aplicar estilos a los elementos de pgina y ver inmediatamente los resultados. No tiene que escribir la CSS y cambiar a la pgina para ver si se ha aplicado el estilo deseado. En la vista Diseo, puede aplicar un estilo a elementos individuales de una pgina de varias maneras. Puede utilizar estilos insertados, que se escriben como el atributo style de un elemento individual. Estas reglas de estilo slo se pueden aplicar a ese elemento. Puede escribir reglas de estilo en un elemento style del elemento head HTML de la pgina. Estas reglas de estilo se pueden aplicar a los elementos de la pgina actual .Por ltimo, puede escribir las reglas de estilo en un archivo CSS externo. En ese caso, las reglas de estilo se pueden aplicar a cualquier pgina del sitio web. En este tutorial, escribir la informacin de formato y estilo en la seccin del elemento style de la pgina y como estilos insertados. Despus, puede mover la informacin de CSS a una hoja de estilos externa para utilizar otras caractersticas de Visual Studio 2008.

Dar formato a una pancarta de pgina

El primer elemento al que dar formato es la seccin de pancarta, que incluye elementos delimitados por la etiqueta <div ID="banner">.En este ejemplo, utilizar la barra de herramientas Aplicacin de estilo directo para cambiar el estilo y la posicin del encabezado. Establecer tambin el tamao del rea de la pancarta y agregar un color de fondo.

Para dar formato al texto de la pancarta

1. 2. En la vista Diseo, haga clic en el texto de ttulo en la seccin de pancarta "AdventureWorks Styling Page". Observe que la seleccin tiene un cuadro azul alrededor y una ficha que indica que el elemento h1 se ha seleccionado. En la barra de herramientas Aplicacin de estilo, en la lista Regla de destino, haga clic en Aplicar nuevo estilo. Aparecer el cuadro de dilogo Nuevo estilo. La opcin Aplicacin de estilo directo est establecida de forma predeterminada en Manual, por lo que aplicar manualmente el estilo. En la lista Selector, haga clic en h1 para que pueda crear un estilo que se aplique a todos los elementos h1. Observe que la lista Definir en est establecida en Pgina actual.Esto indica que la regla de estilo se crea en un elemento style de la pgina actual. En la lista familia de fuentes, seleccione una fuente gruesa como Impacto. En el cuadro tamao de fuente, escriba o seleccione muy grande. En el cuadro variante de fuente, escriba o seleccione versales.

3.

4. 5. 6.

7. 8.

9.

Haga clic en Aceptar. Para ver la regla de estilo que ha creado, cambie a la vista Cdigo fuente y desplcese al elemento style, que se encuentra dentro del elemento head. Puede ver que la regla de estilo CSS se ha creado para el elemento h1. Siga este procedimiento para aplicar estilo al elemento h2 de la pancarta de forma similar: a. Abra el cuadro de dilogo Nuevo estilo como en el paso 2. b. Seleccione el elemento h2. c. Establezca el valor Selector del cuadro Nuevo estilo en h2. d. Establezca la familia de fuentes en Comic Sans MS y el tamao de fuente en pequeo.

Seleccionar elementos de la pgina

En Visual Studio 2008, hay varias formas de seleccionar elementos de la pgina.Puede utilizar el selector rpido de etiquetas, que se encuentra en la seccin inferior del panel de la vista Diseo.Cuando se coloca el punto de insercin en cualquier parte de una pgina, en el selector rpido de etiquetas se muestra la etiqueta HTML subyacente de esa rea.Las etiquetas que contienen la etiqueta actual aparecen a la izquierda de la etiqueta en la barra del selector rpido de etiquetas.Por ejemplo, si el punto de insercin est en una celda de la tabla, la etiqueta td aparece en la barra del selector rpido de etiquetas, precedida por una etiqueta tr para la fila de la tabla y una etiqueta table para la tabla. Al mover el puntero sobre una etiqueta en el selector rpido de etiquetas, el contenido de la etiqueta se resalta en la vista Diseo y aparece una flecha en la etiqueta.Puede hacer clic en esta flecha para seleccionar una etiqueta y su contenido, seleccionar slo el contenido de la etiqueta, modificar o quitar la etiqueta, abrir el cuadro de dilogo Editor rpido de etiquetas o abrir el cuadro de dilogo Propiedades de un elemento. Tambin puede utilizar la tecla ESC para subir los elementos por la jerarqua.Por ejemplo, el elemento h1 est anidado dentro del elemento div de la pancarta.Para seleccionar el elemento div completo, haga clic en el elemento h1 para seleccionarlo y, a continuacin, utilice la tecla ESC para seleccionar el elemento div de la pancarta.Observe que la primera vez que presiona la tecla ESC, el elemento h1 se resalta y se muestra el relleno y los mrgenes.(Puesto que no establecimos estas opciones, sta es la configuracin predeterminada). Al presionar de nuevo la tecla ESC, se selecciona todo el elemento div.Cuando el elemento est seleccionado, la etiqueta muestra div#banner.

Cambiar el tamao de la etiqueta y la posicin de su contenido

Puede cambiar el tamao y la posicin de la pancarta y de su contenido en la vista Diseo utilizando la barra de herramientas Aplicacin de estilo directo.Las reglas de estilo se escriben en la pgina actual, que es la misma ubicacin en la que se escribieron las reglas de estilo anteriores.

Nota
Puede utilizar la tecla CTRL y las teclas de direccin para cambiar el valor de los elementos de tamao que ya se han definido.Por ejemplo, si arrastra el ancho de la pancarta hasta 785 pxeles, puede utilizar la combinacin de teclas CTRL + FLECHA IZQUIERDA para reducir el ancho a 780 pxeles.

Para cambiar el tamao de la pancarta

1. 2. 3. Cambie a la vista Diseo. Haga clic en el texto h1 ("AdventureWorks Styling Page") para seleccionarlo y, a continuacin, presione la tecla ESC dos veces para seleccionar el elemento que lo contiene, que es el elemento div de la pancarta. Arrastre el controlador de cambio de tamao en la esquina inferior derecha para cambiar el tamao del elemento div de la pancarta. Observe que al arrastrar, la informacin sobre herramientas muestra los valores de alto y ancho.Estos valores se muestran tambin en la barra de estado, situada en la seccin inferior de la ventana de la vista Diseo. Cambie el tamao del elemento hasta que tenga aproximadamente 780 pxeles de ancho y 100 pxeles de alto. Para ver la regla de estilo que ha creado, vaya a la vista Dividida y desplcese al elemento style. Puede ver que se ha creado un regla de estilo para el elemento div de la pancarta (mediante el selector #banner).

4. 5.

En la vista Diseo, asegrese de que el elemento div de la pancarta est seleccionado (div#banner debe seguir seleccionado en el navegador de etiquetas). 7. En el men Formato, haga clic en Color de fondo. Se muestra el selector de color. 8. Seleccione un color para la pancarta y, a continuacin, haga clic en Aceptar. Tambin puede aplicar reglas de estilo que centren el texto de los encabezados.Para ello, defina valores de relleno.

6.

Para colocar los elementos de encabezado dentro de la pancarta

En la vista Diseo, seleccione el elemento div de la pancarta. En el men Formato, haga clic en Prrafo. Se muestra el cuadro de dilogo Prrafo. Como el elemento h1 tiene la misma longitud que el elemento div de la pancarta, puede colocar el texto dentro del elemento h1 para centrarlo en el rea de la pancarta. 3. En el cuadro Prrafo, en la lista desplegable Alineacin, seleccione Centrar y, a continuacin, haga clic en Aceptar. 4. Seleccione el elemento h2 y, a continuacin, repita los pasos 2 y 3. 5. Seleccione el elemento div de la pancarta. 6. Manteniendo presionada la tecla MAYS, coloque el puntero del mouse sobre el borde del elemento div hasta que en la informacin sobre herramientas se muestre el valor de relleno actual. 7. Arrastre el borde de relleno hasta que est contiguo al borde superior del elemento div. 8. Arrastre hasta que los dos elementos queden centrados (aproximadamente 30 pxeles). Para completar la pancarta, debe colocar el elemento div de bsqueda y sus elementos en la pancarta.Para ello, puede utilizar otra caracterstica de Visual Studio 2008, la cuadrcula de posicin. 1. 2.

Para colocar el elemento div de bsqueda dentro de la pancarta

1. 2. 3. En la vista Diseo, seleccione el elemento div de bsqueda (div#search). En el men Formato, haga clic en Establecer posicin y, a continuacin, seleccione Absoluta. Arrastre el elemento div de bsqueda por su ficha (el texto indica div#search) hasta una posicin que est dentro de la pancarta pero a la derecha de los elementos de texto. Observe que dos lneas azules se extienden desde la seleccin, que indican un valor de posicin superior e izquierdo. Suelte el elemento div de bsqueda cuando est colocado en el lugar que desee.

4. 5.

Crear un diseo flexible de tres columnas

Puede utilizar Visual Web Developer para crear reglas de estilo dando formato a los elementos de pgina en la vista Diseo.Tambin puede utilizar estas mismas herramientas para crear su diseo de pgina. En este tutorial, crear un diseo de tres columnas mediante la regla de estilo Float. En primer lugar, establecer el tamao y la posicin de las barras laterales izquierda y derecha y, a continuacin, puede ajustar el relleno en la seccin de contenido principal para crear un diseo flexible de tres columnas.

Nota
Para ver los elementos correctamente colocados en la vista Diseo, es posible que tenga que ocultar la Barra de herramientas.De esta forma, tendr ms espacio para mostrar la posicin de los elementos de la pgina.

Crear las columnas de la barra lateral

Puede cambiar el tamao de las columnas laterales en el diseo de pgina del mismo modo que cambi el tamao de la pancarta.Cuando cambie el tamao de las columnas de la barra lateral, slo desear establecer el valor de ancho, y no el de alto, para que el texto abarque la longitud de la columna si es necesario.Para establecer slo el ancho del elemento div, puede arrastrar el lado derecho del elemento div en lugar de arrastrar la esquina del elemento div, como en el ejemplo anterior.

Para cambiar el tamao y la posicin de los elementos div de la barra lateral izquierda y derecha
1. En vista Diseo, seleccione el elemento div de la barra lateral izquierda.(Para ello, puede seleccionar div.column#leftsidebar en el navegador de etiquetas).

2.

3. 4. 5. 6. 7. 8.

Arrastre el borde derecho del elemento div de la barra lateral izquierda para cambiar el tamao del elemento hasta que tenga un ancho aproximado de 200 pxeles. Observe que al arrastrar, el valor de alto se muestra entre parntesis, lo que indica que no se va a definir. En el men Formato, haga clic en Posicin. Aparecer el cuadro de dilogo Posicin. En Estilo de ajuste, seleccione Izquierda y, a continuacin, haga clic en Aceptar. Seleccione el elemento div de la barra lateral derecha y arrastre su borde derecho hasta que tenga un ancho aproximado de 250 pxeles. En el men Formato, haga clic en Posicin. En Estilo de ajuste, haga clic en Derecha y luego en Aceptar.

Crear la columna central

Para crear la columna central, puede establecer mrgenes y relleno para mover el contenido fuera de las columnas derecha e izquierda.Primero crear un borde izquierdo y, a continuacin, utilizar relleno para mover el contenido fuera del borde.

Para aplicar estilo a la columna central

1. 2. 3. 4. 5. 6. 7. 8. En la vista Diseo, seleccione el elemento div del contenido principal. Con la tecla CTRL presionada, arrastre el margen derecho del elemento div del contenido principal para establecerlo en 260 pxeles.Arrastre el margen izquierdo hasta un valor de 210 pxeles. Con el elemento div del contenido principal seleccionado, en el men Formato, seleccione Bordes y sombreado. Se muestra el cuadro de dilogo Bordes y sombreado. En Configuracin, seleccione Personalizado. En la lista Estilo, seleccione Slido y en Vista previa, haga clic en el botn de borde izquierdo. En el cuadro de texto Ancho, escriba 1px. En Relleno, en el cuadro Izquierda, escriba 10px. Haga clic en Aceptar.

Ajustar el pie de pgina

Si los usuarios cambian el tamao de la pgina o si la pgina se muestra en un monitor de gran formato, el pie de pgina podra ajustarse y aparecer en el borde de una de las columnas.Para evitar que esto suceda, puede definir la regla de estilo Clear.

Para ajustar el elemento div de pie de pgina

1. 2. 3. 4. 5. 6. En la vista Diseo, seleccione el elemento div del pie de pgina. En el men Formato, haga clic en Nuevo estilo. Aparecer el cuadro de dilogo Nuevo estilo. En el cuadro Selector, escriba o seleccione #footer. En la lista Categora, haga clic en Diseo. En la lista clear, seleccione ambos. 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.De esa forma, todas las pginas podrn hacer referencia a los estilos, para que adopten un aspecto similar. Tambin puede utilizar las hojas de estilos en cascada con los temas de ASP.NET.Para utilizar una hoja de estilos con un tema, debe colocar la hoja en la carpeta correcta.Para obtener ms informacin sobre los temas y CSS, vea Temas y mscaras de ASP.NET. Para crear una hoja de estilos se utilizan las mismas tcnicas que para crear una nueva pgina.

Para crear una hoja de estilos y asociarla a una pgina

1. 2. 3. En el Explorador de soluciones, haga clic con el botn secundario del mouse en el nombre del sitio web y, a continuacin, haga clic en Agregar nuevo elemento. En Plantillas instaladas de Visual Studio, seleccione Hoja de estilos. En el cuadro Nombre, escriba Layout.css y, a continuacin, haga clic en Agregar.

Se abre el editor con una nueva hoja de estilos que contiene una regla de estilo body vaca. Abra la pgina Default.aspx o cambie a ella, y cambie a la vista Diseo. En el men Vista, haga clic en Administrar estilos. Se abre la ventana Administrar estilos.(De forma predeterminada, esta ventana est acoplada). 6. Haga clic en Adjuntar hoja de estilos. 7. Aparecer el cuadro de dilogo Seleccionar hoja de estilos. 8. Seleccione el archivo Layout.css y, a continuacin, haga clic en Aceptar. Se crea una nueva ficha denominada Layout.css en la ventana Administrar estilos. Puede asignar una hoja de estilos a una pgina de varias formas.La forma ms simple consiste en arrastrar el archivo del Explorador de soluciones al elemento de encabezado de la pgina en la vista Cdigo fuente. 4. 5.

Mover reglas de estilo de una pgina a una hoja de estilos

Puede utilizar el panel Administrar estilos para mover estilos de una pgina a otra o para ver cmo las reglas de estilo se aplican a una pgina. Hasta ahora, las reglas de estilo que ha creado en este tutorial se han guardado en el elemento style de la pgina Default.aspx.Puede mover estas reglas de estilo a la nueva hoja de estilos que ha creado.

Para mover reglas de estilo utilizando el panel Administrar estilo

En la ficha Pgina actual de la ventana Administrar estilos, seleccione todos los estilos.(Puede seleccionarlos utilizando MAYS+CLIC). 2. Arrastre los estilos seleccionados hasta la ficha Layout.css de la ventana Administrar estilos. Las reglas de estilo se quitan de la pgina Default.aspx y se mueven al archivo Layout.css.Puede confirmar esta operacin en la pgina Default.aspx de la vista Cdigo fuente y en la pgina Layout.css del editor. Tambin puede cambiar el orden de los estilos en la hoja de estilos mediante la ventana Administrar estilo.Por ejemplo, puede arrastrar la regla de estilo de bsqueda para que aparezca justo debajo de la regla de estilo de la pancarta. 1.

Pasos siguientes
En este tutorial se han descrito las tcnicas bsicas para trabajar con estilos CSS mediante la interfaz de usuario de Visual Studio 2008.Tambin es posible que desee explorar las maneras siguientes de controlar la apariencia de las pginas Web:

y y y

Trabajar con una hoja de estilos existente.Para obtener ms informacin, vea Tutorial: Trabajar con un archivo CSS existente. Configurar la informacin de estilo mediante programacin para los elementos HTML.Para obtener ms informacin, vea Cmo: Establecer las propiedades de un control de servidor HTML mediante programacin. Crear temas y mscaras que permiten no slo especificar estilos CSS, sino prcticamente cualquier propiedad de un control ASP.NET.Para obtener informacin detallada, vea Temas y mscaras de ASP.NET.

Tutorial: Trabajar con un archivo CSS existente.NET Framework 4

Este tutorial introduce las caractersticas de hojas de estilos en cascada (CSS) de Visual Studio 2008.Le gua a travs de la creacin y modificacin de un diseo de pgina de dos columnas.Tambin muestra las tcnicas bsicas de creacin de una nueva pgina web y una nueva hoja de estilos en cascada. En este tutorial se muestran las tareas siguientes: y Crear un sitio Web de sistema de archivos. y Utilizar caractersticas orientadas a CSS de Visual Web Developer. y Crear un diseo de pgina de dos columnas con CSS.

Nota
Este tutorial muestra caractersticas adicionales de Visual Studio 2008 que no se trataron en Tutorial: Crear y modificar un archivo CSS.

Requisitos previos
Necesita los componentes siguientes para completar este tutorial: y Visual Studio 2008 o Microsoft Visual Web Developer Express.Para obtener informacin de la descarga, vea el sitio web de Microsoft Visual Studio Express Editions. y .NET Framework versin 3.5. y Una imagen que pueda agregar a la pgina web.La imagen real no es importante; slo la usar para mostrar las caractersticas de posicin.

Crear un sitio Web

En esta parte del tutorial va a crear un sitio web y a agregarle una nueva pgina. Si ya ha creado un sitio web en Visual Web Developer (por ejemplo, siguiendo los pasos del tema Tutorial: Crear una pgina Web bsica en Visual Web Developer), puede usar ese sitio web e ir directamente al apartado "Agregar elementos HTML y un archivo CSS", ms 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. 4. Abra Visual Web Developer. En el men Archivo, haga clic en Nuevositio Web. Se muestra el cuadro de dilogo Nuevo sitio Web. En Plantillas instaladas de Visual Studio, haga clic en Sitio Web ASP.NET. En el cuadro Ubicacin, seleccione Sistema de archivos y, a continuacin, escriba el nombre de la carpeta en la que desea guardar las pginas del sitio web. Por ejemplo, escriba el siguiente nombre de carpeta: C:\CSSWebSite En la lista Lenguaje, haga clic en Visual Basic o en Visual C#. El lenguaje de programacin que seleccione ser el lenguaje predeterminado del sitio web, pero tambin puede establecer el lenguaje de programacin de cada pgina de forma individual. Haga clic en Aceptar. Visual Web Developer crea la carpeta y una pgina nueva denominada Default.aspx.

5.

6.

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 creacin de elementos para crear estilos, en esta seccin se proporciona un conjunto de elementos.Puede copiar y pegar estos elementos en una pgina.El cdigo incluye secciones realizadas con elementos div que incluyen una pancarta, secciones de barra lateral izquierda y derecha, una seccin de contenido principal y un pie de pgina.Estos elementos simples contienen texto con el que puede trabajar e identificadores de elemento.En algunos casos, los elementos contienen clases CSS que puede usar para aplicar estilo a elementos concretos de una pgina.

Agregar elementos HTML

En esta seccin se agrega el contenido con el que se va a trabajar.La pgina consta de una pancarta con texto y un cuadro de bsqueda, un pie de pgina y tres secciones de texto.El contenido principal de la pgina se encuentra en la ltima seccin de texto.

Para agregar elementos HTML a la pgina

1. 2. Abra la pgina Default.aspx en vista Cdigo fuente. Agregue el cdigo siguiente despus 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, consectetuer adipiscing elit. Curabitur in sem. Vivamus adipiscing vulputate lacus. Sed enim lorem, fringilla eget, nonummy sed, ullamcorper sit amet, diam. Sed a justo. Curabitur quis nibh sit amet nunc malesuada rutrum.</p> </div> <div id="rightsidebar" class="column"> <h3>Matters of the Web</h3> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur in sem. Vivamus adipiscing vulputate lacus. Sed enim lorem, fringilla eget, nonummy sed, ullamcorper sit amet, diam. Sed a justo. Curabitur quis nibh sit amet nunc malesuada rutrum.</p> </div> <div id="maincontent" class="column"> <h2>Matters of the Web</h2> <p> Pellentesque mattis tincidunt ipsum. Donec tempus, nunc vitae rhoncus imperdiet, eros turpis accumsan risus, ut luctus ipsum lacus a felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean convallis euismod nulla. Suspendisse potenti. Donec in mi nec odio tincidunt luctus. Donec euismod, mauris cursus molestie convallis, quam pede tempus magna, mollis dapibus quam est et magna. Aenean eros massa, elementum vehicula, dapibus eget, lobortis non, mauris. Vivamus nisl ante, interdum eget, sagittis vel, scelerisque nec, magna. Praesent placerat nibh vel metus viverra tincidunt.</p> <asp:Image ID="Image1" runat="server"/> <p>Fusce magna urna, gravida non, sodales vehicula, consequat ac, lacus. Ut sed eros sit amet neque malesuada malesuada. Fusce porttitor cursus eros. Maecenas libero odio, convallis vel, tristique id, sodales vel, leo. Curabitur nibh neque, interdum eget, convallis id, adipiscing nec, risus. Suspendisse rutrum dui sed urna. Pellentesque leo felis, tempor eu, convallis venenatis, auctor vitae, justo. In at massa.</p> </div> <div id="footer"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit 2007.</p> </div> </div>

3. 4.

Guarde la pgina. Cambie a la vista Diseo para ver el formato predeterminado.

Agregar un archivo CSS

En esta seccin agrega una hoja de estilos en cascada (archivo .css) que da formato y aplica estilo a los elementos que agreg a la pgina en la ltima seccin.La hoja de estilos usa reglas de estilo basadas en id. y en clase.

Para agregar un archivo CSS

1. En el Explorador de soluciones, haga clic con el botn secundario del mouse en el nombre del sitio web y, a continuacin, haga clic en Agregar nuevo elemento. Aparecer el cuadro de dilogo Agregar nuevo elemento. En Plantillas instaladas de Visual Studio, haga clic en Hoja de estilos. En el cuadro Nombre, escriba Layout.css y, a continuacin, haga clic en Agregar. El editor abre una nueva hoja de estilos que contiene una regla de estilo body. Quite la regla de estilo body y, a continuacin, pegue las reglas siguientes en el archivo.

2. 3. 4.

#pagecontainer { width: 800px; } #banner { height: 126px; padding-top: 18px; background-color: #DD6B26; } #search { width: 254px; position: absolute; top: 115px; left: 545px; font-family: "Lucida Sans"; font-size: small; color: #930626; } #leftsidebar { width: 188px; float: left; padding-right: 10px; } #rightsidebar { width: 238px; float: right; padding-left: 6px; } #maincontent { border-left: 1px solid #DD6B26; margin-left: 203px; margin-right: 260px; padding-left: 13px; padding-right: 13px; } #footer { text-align: center; background-color: #DD6B26; } h1 { font-family: "Lucida Calligraphy"; font-size: x-large; font-weight: bold;

color: #930626; text-align: center; height: 42px; margin-bottom: 0px; } h2 { font-family: "Lucida Sans"; font-variant: small-caps; font-size: large; color: #307630; font-weight: bold; text-align: center; margin-bottom: 0px; margin: 0; padding: 0; } p { font-family: "Palatino Linotype"; font-size: medium; }
5. 6. Guarde el archivo.

Agregar reglas de estilo a la hoja de estilos

Al trabajar con una hoja de estilos CSS existente, puede usar la ventana Administrar estilos para cambiar las reglas de estilo de la hoja. En este tutorial, modificar la pgina de diseo original de tres columnas a un diseo de dos columnas. A continuacin quitar los estilos aplicados al diseo original.

Quitar la columna derecha y cambiar el estilo

Para cambiar el diseo de pgina a un diseo de dos columnas, puede quitar el cdigo que crea la columna derecha. A continuacin, puede cambiar el estilo de los otros elementos para crear el diseo de dos columnas.

Para quitar el cdigo de la columna derecha y dar formato

1. 2. 3. Abra o cambie a la pgina Default.aspx. Cambie a la vista Diseo. En el Explorador de soluciones, arrastre el archivo .css que ha creado colquelo en la pgina. De esta forma vincula el archivo .css a la pgina actual.La pgina cambia para reflejar los estilos definidos en el archivo .css. Cambie a la vista Cdigo fuente. Elimine el elemento div que comienza con <div id="rightsidebar" class="column">. Guarde el archivo. En el men Formato, haga clic en Estilos CSSy, a continuacin, haga clic en Administrar estilos. Aparece la ventana Administrar estilos.(De forma predeterminada, la ventana est acoplada.) En la ventana Administrar estilos, haga clic con el botn secundario en el estilo #rightsidebar y, a continuacin, haga clic en Eliminar.

4. 5. 6. 7. 8.

Nota
El icono del estilo #rightsidebar no tiene un crculo alrededor, lo que indica que ya no se usa en la pgina y se puede quitar. 9. En la ventana Administrar estilos, haga clic con el botn secundario en el estilo #maincontent y, a continuacin, haga clic en Modificar estilo. Aparece el cuadro de dilogo Modificar estilo. En Categora, haga clic en Cuadro. En margen, cambie el valor del cuadro derecho a 0. Haga clic en Aceptar. Cambie a la vista Diseo. Ahora cuenta con un diseo de dos columnas. Guarde el archivo.

10. 11. 12. 13. 14.

Agregar una imagen

Antes de establecer el estilo de una imagen, debe agregar la imagen al proyecto y establecer su propiedad ImageUrl.

Para agregar una imagen al proyecto

En el Explorador de soluciones, haga clic con el botn secundario en el nombre del sitio web y, a continuacin, seleccione Agregar elemento existente. Aparecer el cuadro de dilogo Agregar elemento existente. 2. Seleccione un archivo de imagen y haga clic en Agregar. Ahora que la imagen se ha agregado a su d, debe asignarla a un control Image. 1.

Para asignar una imagen al control Image

1. 2. 3. Abra la pgina Default.aspx o cambie a ella. Cambie a la vista Diseo y seleccione el control Image. En la ventana Propiedades, establezca la propiedad ImageUrl del control Image en la direccin URL del archivo de imagen recientemente agregado.

Agregar reglas de estilo para dar formato a la imagen

Para mejorar el flujo de la imagen con respecto al texto, puede establecer la imagen como flotante en el borde derecho o izquierdo de la columna principal y agregar relleno, lo que aleja el texto de la imagen.

Para agregar imgenes al diseo

1. 2. Abra el archivo Layout.css o cambie a l. Agregue el cdigo siguiente a la hoja de estilos.

img { margin: 0px; border: 1px solid #DD6B26; padding: 5px; } .floatright { margin-left: 10px; float:right; } .floatleft { float: left; margin-right: 10px; }
3. 4. 5. Abra la pgina Default.aspx o cambie a ella. Cambie a la vista Diseo y seleccione el control Image. En la ventana Administrar estilos, aplique el estilo CSS floatright o floatleft al control Image; para ello, haga clic con el botn secundario en el estilo CSS y seleccione Aplicar estilo. El estilo CSS seleccionado se asigna al estilo img.

Pasos siguientes
Este tutorial muestra las tcnicas bsicas para trabajar con estilos CSS mediante la interfaz de usuario de Visual Studio 2008.Tambin es posible que desee explorar las maneras siguientes de controlar la apariencia de las pginas web: y Trabajar con una nueva hoja de estilos.Para obtener ms informacin, vea Tutorial: Crear y modificar un archivo CSS. y Configurar la informacin de estilo mediante programacin para los elementos HTML.Para obtener ms informacin, vea Cmo: Establecer las propiedades de un control de servidor HTML mediante programacin. y Crear temas y mscaras que permiten no slo especificar estilos CSS, sino prcticamente cualquier propiedad de un control ASP.NET.Para obtener ms informacin, vea Temas y mscaras de ASP.NET.

Temas y mscaras de ASP.NET.NET Framework 4

Un tema es un conjunto de valores de propiedad que permiten definir la apariencia de las pginas y de los controles y, a continuacin, aplicar esa apariencia de manera coherente a las pginas de una aplicacin Web, en toda una aplicacin Web o en todas las aplicaciones Web de un servidor. Esta informacin general contiene las siguientes secciones: y Mscaras de temas y control y mbito de los temas y Prioridad en la configuracin 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

Mscaras de temas y control

Los temas estn formados por un conjunto de elementos: mscaras, hojas de estilos en cascada (CSS), imgenes y otros recursos. Como mnimo, un tema contendr mscaras. Los temas se definen en directorios especiales en un sitio Web o un servidor web.

Mscaras
Un archivo de mscara tiene la extensin de nombre de archivo .skin y contiene los valores de propiedades para los controles individuales como Button, Label, TextBox o Calendar.La configuracin de las mscaras de control se parece al propio marcado del control, pero slo contiene las propiedades que se desee establecer como parte del tema. Por ejemplo, lo siguiente es una mscara de control Button:

<asp:button runat="server" BackColor="lightblue" ForeColor="black" />

Los archivos .skin se crean en la carpeta Theme. Un archivo .skin puede contener una o ms mscaras de control para uno o ms tipos de control. Es posible definir un archivo de mscaras independiente para cada control o definir todas las mscaras para un tema en un archivo nico. Hay dos tipos de mscaras de control, mscaras predeterminadas y mscaras con nombre: y Una mscara predeterminada se aplica automticamente a todos los controles del mismo tipo cuando un tema se aplica a una pgina. Una mscara de control es predeterminada si no tiene un atributo SkinID. Por ejemplo, si se crea una mscara predeterminada para un control Calendar, la mscara de control se aplicar a todos los controles Calendar de las pginas en las que se utilice el tema.(Las mscaras predeterminadas coinciden exactamente atendiendo al tipo de control, de modo que una mscara de control Button se aplica a todos los controles Button pero no a los controles LinkButton ni a los derivados del objeto Button). y Una mscara con nombre es una mscara de controles con un conjunto de propiedades SkinID. Las mscaras con nombre no se aplican automticamente a todos los controles segn el tipo.En su lugar, una mscara con nombre se aplica explcitamente a un control estableciendo la propiedad SkinID del control. Al crear mscaras con nombre, se pueden configurar diferentes mscaras para distintas instancias del mismo control en una aplicacin.

Hojas de estilos en cascada

Un tema tambin puede incluir una hoja de estilos en cascada (archivo .css).Cuando coloca un archivo .css en la carpeta de temas, la hoja de estilos se aplica automticamente como parte del tema. La hoja de estilos se define utilizando la extensin de nombre de archivo .css en la carpeta de tema.

Grficos del tema y otros recursos

Los temas tambin pueden incluir grficos y otros recursos, como archivos de script o archivos de sonido. Por ejemplo, la parte de un tema de pgina podra incluir una mscara para un control TreeView. Como parte del tema, se pueden incluir los grficos utilizados con el fin de representar los botones para expandir y contraer. Normalmente, los archivos de recursos del tema estn en la misma carpeta que los archivos de mscara de dicho tema, pero pueden estar en cualquier parte de la aplicacin Web, por ejemplo, en una subcarpeta de la carpeta de temas. Para hacer

referencia a un archivo de recursos en una subcarpeta de la carpeta de temas, utilice una ruta de acceso como la que se muestra en esta mscara de control Image:

asp:Image runat="server" ImageUrl="ThemeSubfolder/filename.ext" />

Tambin puede almacenar sus archivos de recursos fuera de la carpeta de temas. Si utiliza la sintaxis de la tilde (~) para hacer referencia a los archivos de recursos, la aplicacin Web encontrar automticamente las imgenes. Por ejemplo, si coloca los recursos de un tema en una subcarpeta de la aplicacin, puede utilizar rutas de acceso como ~/Subcarpeta/nombreArchivo.ext para hacer referencia a los archivos de recursos, como en el siguiente ejemplo.

<asp:Image runat="server" ImageUrl="~/AppSubfolder/filename.ext" />

mbito de los temas

Puede definir temas para una aplicacin Web nica o como temas globales que pueden utilizar todas las aplicaciones en un servidor web. Una vez definido un tema, se puede colocar en pginas individuales utilizando el atributo Theme o StyleSheetTheme de la directiva @ Page, o se puede aplicar a todas las pginas de una aplicacin configurando el elemento <pages> en el archivo de configuracin de la aplicacin. Si el elemento <pages> se define en el archivo Machine.config, el tema se aplicar a todas las pginas de las aplicaciones web en el servidor.

Temas de pgina
Un tema de pgina corresponde a una carpeta de temas con mscaras de control, hojas de estilos, archivos de grficos y otros recursos creados como una subcarpeta de la carpeta \App_Themes en su sitio Web.Cada tema constituye una subcarpeta diferente con respecto a la carpeta \App_Themes.En el siguiente ejemplo de cdigo se muestra un tema de pgina tpico que define dos temas denominados BlueTheme y PinkTheme.

MyWebSite App_Themes BlueTheme Controls.skin BlueTheme.css PinkTheme Controls.skin PinkTheme.css

Temas globales
Un tema global es un tema que puede aplicar a todos los sitios Web en un servidor.Los temas globales permiten definir una apariencia de conjunto para un dominio cuando se mantienen varios sitios Web en el mismo servidor. Los temas globales se parecen a los de pgina en que ambos tipos incluyen valores de propiedades, la configuracin de las hojas de estilos y grficos.Sin embargo, los temas globales se almacenan en una carpeta denominada Themes que es global al servidor web.Cualquier sitio Web del servidor y cualquier pgina de cualquier sitio Web pueden hacer referencia a un tema global.

Prioridad en la configuracin de temas

Se puede especificar la prioridad que tiene la configuracin del tema sobre la configuracin regional del control especificando cmo se aplica el tema. Si establece la propiedad de una pgina Theme, los valores de control en el tema y la pgina se combinan para formar la configuracin final para el control.Si la configuracin del control se define tanto en el control como en el tema, la configuracin del control del tema reemplaza cualquier configuracin de la pgina en el control.Esta estrategia hace posible que el tema pueda crear una apariencia coherente a lo largo de las pginas, incluso si los controles de las pginas ya tuvieran valores de propiedades individuales.Por ejemplo, esto permite aplicar un tema a una pgina que se cre en una versin anterior de ASP.NET. Asimismo, es posible aplicar un tema como tema de la hoja de estilos estableciendo la propiedad StyleSheetTheme de la pgina.En este caso, la configuracin de la pgina local tiene prioridad sobre aquellos definidos en el tema cuando la configuracin se define en ambos lugares.ste es el modelo utilizado en las hojas de estilos en cascada.Se podra aplicar un tema como tema de la hoja de estilos si se desea poder establecer las propiedades de controles individuales en la pgina mientras se sigue aplicando un tema para lograr una apariencia de conjunto.

Los elementos de temas globales no pueden reemplazarse parcialmente por elementos de temas de nivel de aplicacin.Si crea un tema de nivel de aplicacin con el mismo nombre que un tema global, los elementos de tema de nivel de aplicacin no reemplazarn los elementos del tema global.

Propiedades que se pueden definir mediante temas

Como regla general, se pueden usar los temas para definir las propiedades relacionadas con la apariencia de una pgina o de un control o el contenido esttico.Slo se pueden establecer esas propiedades que tienen un atributo ThemeableAttribute establecidas como true en la clase de control. Las propiedades que especifican explcitamente el comportamiento de los controles en lugar de su apariencia no aceptan valores de tema. Por ejemplo, no se puede configurar la propiedad CommandName de un control Button mediante un tema. De manera similar, no se puede utilizar un tema para configurar la propiedad AllowPaging o DataSource de un control GridView. Tenga en cuenta que no puede utilizar generadores de expresiones, que generan expresiones de cdigo para asignarlas a una pgina en tiempo de compilacin, en temas o mscaras.

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 pgina.Sin embargo, 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 pgina, y no slo las propiedades de un estilo.Por ejemplo, los temas permiten especificar los grficos de un control TreeView, el diseo de plantilla de un control GridView, etctera. y Los temas pueden incluir grficos. y Los temas no se colocan en cascada de la misma manera que las hojas de estilos. De forma predeterminada, cualquier valor de propiedad definido en un tema al que se haga referencia en la propiedad Theme de una pgina reemplazar los valores de las propiedades establecidos mediante declaracin, a menos que aplique explcitamente el tema mediante la propiedad StyleSheetTheme. Para obtener ms informacin, consulte la seccin anterior Prioridad en la configuracin de temas. y Slo se puede aplicar un tema a cada pgina. No puede aplicar varios temas a una pgina, a diferencia de las hojas de estilos que s se pueden aplicar varias.

Consideraciones de seguridad
Los temas pueden causar problemas de seguridad cuando se utilizan en el sitio Web.Se pueden utilizar temas malintencionados para: y Modificar el comportamiento de un control de forma que no se comporte segn lo previsto. y Insertar script de cliente, lo que puede suponer un riesgo de scripting entre sitios. y Modificar la validacin. y Divulgar informacin confidencial. y Las formas de mitigar estas amenazas comunes son las siguientes: y Proteja los directorios de temas globales y de aplicacin con una configuracin de control de acceso apropiada.Slo los usuarios de confianza deben poder escribir archivos en los directorios de temas. y No utilice temas de un origen que no sea de confianza.Examine todos los temas que no provengan de su organizacin por si contienen cdigo malintencionado antes de utilizarlos en su sitio Web. y No exponga el nombre del tema en los datos de una consulta.Los usuarios malintencionados podran utilizar esta informacin para usar temas que el programador no conoce y, de ese modo, divulgar informacin confidencial.

Cmo: Definir temas de pginas ASP.NET.NET Framework 4

En Visual Web Developer, puede definir temas de pgina y aplicarlos a una o varias pginas de la aplicacin.Tambin puede crear temas en el nivel del equipo que se pueden utilizar en varias aplicaciones del servidor. Los temas se componen de varios archivos de base, por ejemplo, hojas de estilos para el aspecto de las pginas y mscaras de control para definir el aspecto de los controles de servidor, as como de otras imgenes y archivos.El contenido de un tema es el mismo si el tema se define como un tema de pgina o como un tema global. Los temas se pueden aplicar mediante el uso de los atributos Theme o StyleSheetTheme de la directiva @ Page, o estableciendo el elemento Elemento pages (Esquema de configuracin de ASP.NET) en el archivo de configuracin de la aplicacin.Visual Web Developer slo representar visualmente los temas aplicados mediante el atributo StyleSheetTheme.

Para crear un tema de pgina

1. 2. En el Explorador de soluciones, haga clic con el botn secundario en el nombre del sitio Web para el que desea crear un tema de pgina y, a continuacin, haga clic en Agregar carpeta ASP.NET. Haga clic en Tema. Si la carpeta App_Themes no existe, Visual Web Developer la crea.A continuacin, Visual Web Developer crea una nueva carpeta para el tema como carpeta secundaria de la carpeta App_Themes. Escriba un nombre para la nueva carpeta. El nombre de esta carpeta es tambin el nombre del tema de la pgina.Por ejemplo, si crea una carpeta denominada \App_Themes\FirstTheme, el nombre del tema es FirstTheme. Agregue archivos a la carpeta para incorporar las mscaras de controles, hojas de estilos e imgenes que compondrn el tema.

3.

4.

Para agregar un archivo de mscara y una mscara a un tema de pgina

1. 2. 3. En el Explorador de soluciones, haga clic con el botn secundario en el nombre del tema y, a continuacin, haga clic en Agregar nuevo elemento. En el cuadro de dilogo Agregar nuevo elemento, haga clic en Archivo de mscara. En el cuadro Nombre, escriba un nombre para el archivo .skin y, a continuacin, haga clic en Agregar. La convencin que se suele seguir es crear un archivo .skin por control, como Button.skin o Calendar.skin.No obstante, se pueden crear tantos archivos .skin como se necesiten. En el archivo .skin, agregue una definicin normal de control (con sintaxis declarativa), pero incluyendo nicamente las propiedades que vaya a establecer para el tema.La definicin del control debe incluir el atributo runat="server" y no debe incluir el atributo ID="". En el ejemplo de cdigo siguiente se muestra una mscara 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.

<asp:Button runat="server" BackColor="Red" ForeColor="White" Font-Name="Arial" Font-Size="9px" />

Esta mscara de controles Button no contiene un atributo skinID.Se aplicar a todos los controles Button de la aplicacin con el tema que no especifiquen el atributo skinID.

Nota
Una forma sencilla de crear una mscara de controles consiste en agregar el control a una pgina y configurarlo hasta conseguir el aspecto deseado.Por ejemplo, podra agregar un control Calendar a una pgina y establecer su encabezado de das, de fecha seleccionada y otras propiedades.A continuacin, puede copiar la definicin del control de la pgina en un archivo de mscara, pero debe quitar el atributo ID. 5. Repita los pasos 2 y 3 para cada archivo de mscara de controles que desee crear.

Nota
Slo podr definir una mscara predeterminada por control.Podr utilizar el atributo SkinID de la declaracin de control de la mscara para crear mscaras con nombre para el mismo tipo de control.

Para agregar un archivo de hoja de estilos en cascada al tema de la pgina

1. 2. 3. En el Explorador de soluciones, haga clic con el botn secundario en el nombre del tema y, a continuacin, haga clic en Agregar nuevo elemento. En el cuadro de dilogo Agregar nuevo elemento, haga clic en Hoja de estilos. En el cuadro Nombre, escriba un nombre para el archivo .css y, a continuacin, haga clic en Agregar. Cuando el tema se aplica a una pgina, ASP.NET agrega al elemento de encabezado de la pgina una referencia a la hoja de estilos.Para obtener ms informacin, vea Cmo: Aplicar temas de ASP.NET

Crear temas globales

Un tema global se aplica a todos los sitios Web de un servidor.La ubicacin 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.NET.

Nota
Si est trabajando con un sitio Web del sistema de archivos, de manera predeterminada Visual Web Developer ejecuta el sitio Web para realizar las pruebas iniciando el servidor de desarrollo de ASP.NET.Para otros tipos de sitios Web, Visual Web Developer ejecuta las pginas en IIS para realizar las pruebas.

Para crear un tema global

1. Cree una carpeta Themes con la ruta de acceso siguiente.

Copiar %windows%\Microsoft.NET\Framework\version\ASP.NETClientFiles\Themes

Nota
El nombre de la carpeta para los temas globales es Themes, no App_Themes, como es para los temas de pgina.

2.

Cree una subcarpeta de la carpeta Themes para que contenga los archivos de temas globales. El nombre de la subcarpeta es el nombre del tema.Por ejemplo, si crea una carpeta denominada \Themes\FirstTheme, el nombre del tema es FirstTheme. Agregue archivos a la carpeta para incorporar las mscaras de controles, hojas de estilos e imgenes que compondrn el tema global.

Nota
Al definir un tema global, no puede agregarle directamente archivos de mscara y de hoja de estilos utilizando Visual Web Developer.Puede resultarle ms fcil definir y probar el tema como tema de pgina y, despus, copiarlo en la carpeta de los temas globales del servidor web.

3. 4. 5.

Si el sitio Web es un sitio Web de sistema de archivos que est probando con el servidor de desarrollo de ASP.NET, el tema est listo para realizar las pruebas. Si est probando el sitio Web utilizando un sitio Web local de IIS, abra una ventana de comandos y ejecute aspnet_regiis -c para instalar el tema en el servidor donde e ejecuta IIS. Si est probando el tema en un sitio Web remoto o en un sitio Web de FTP, debe crear manualmente una carpeta de temas en la siguiente ruta de acceso.

IISRootWeb\aspnet_client\system_web\version\Themes

Cmo: Aplicar temas de ASP.NET.NET Framework 4

Puede aplicar los temas a una pgina, un sitio Web, o globalmente.Al establecer un tema en el nivel del sito Web los estilos y mscaras se aplican a todas las pginas y controles del sitio, a no ser que reemplace un tema para una pgina individual.Al establecer un tema en el nivel de la pgina, los estilos y mscaras se aplican a esa pgina y a todos sus controles. De manera predeterminada, los temas reemplazan la configuracin local del control.Como alternativa, tambin se puede establecer un tema como tema de la hoja de estilos, de forma que dicho tema se aplique slo a la configuracin del control que no est especficamente establecida en el mismo.

Para aplicar un tema a un sitio Web

1. En el archivo Web.config de la aplicacin, establezca el elemento <pages> en el nombre del tema, ya sea ste global o de pgina, como se muestra en el siguiente ejemplo:

<configuration> <system.web> <pages theme="ThemeName" /> </system.web> </configuration>

Nota
Cuando un tema de aplicacin tiene el mismo nombre que otro global, la prioridad recae en el tema de pgina. 2. Para establecer un tema como tema de la hoja de estilos de forma que se subordine a la configuracin local del control, establezca en su lugar el atributo styleSheetTheme:

<configuration> <system.web> <pages styleSheetTheme="Themename" /> </system.web> </configuration>

Los temas que se establecen en el archivo Web.config se aplican a todas las pginas Web ASP.NET de esa aplicacin.La configuracin del tema en el archivo Web.config sigue las convenciones normales de jerarqua.Por ejemplo, para aplicar un tema nicamente a un subconjunto de pginas, puede colocar estas pginas en una carpeta con su propio archivo Web.config o bien crear un elemento <location> en el archivo Web.config raz para especificar una carpeta. Para obtener informacin detallada, vea Configurar archivos y subdirectorios especficos.

Para aplicar un tema a una pgina individual y Establezca el atributo Theme o StyleSheetTheme de la directiva @ Page en el nombre del tema que se va a utilizar, como
se muestra en el siguiente ejemplo:

<%@ Page Theme="ThemeName" %> <%@ Page StyleSheetTheme="ThemeName" %>

Cmo: Deshabilitar temas de ASP.NET.NET Framework 4

Puede configurar una pgina o un control para omitir los temas. De forma predeterminada, los temas reemplazan la configuracin regional del aspecto de pginas y controles. Conviene deshabilitar este comportamiento cuando no se desee que un tema reemplace el aspecto predefinido de una pgina o control.

Nota
Puede dar prioridad a la configuracin de controles en la pgina actual aplicando un tema como un tema de la hoja de estilos.En ese caso, el tema se utiliza para establecer propiedades que no tienen ninguna configuracin regional pero la configuracin regional explcita es prioritaria.Para obtener informacin detallada, vea Cmo: Aplicar temas de ASP.NET.

Para deshabilitar temas en una pgina y Establezca el atributo EnableTheming de la directiva @ Page en false, como en este ejemplo: <%@ Page EnableTheming="false" %> Para deshabilitar temas en un control y Establezca la propiedad EnableTheming del control en false, como en este ejemplo: <asp:Calendar id="Calendar1" runat="server" EnableTheming="false" />
Tras ello, el tema, con sus estilos y mscaras correspondientes, slo se aplicar a la pgina que lo declara.

Aplicar mscaras a los controles

Las mscaras definidas en el tema se aplicarn en todas las instancias de controles de la aplicacin o en las pginas a las que se aplique el tema.En algunos casos, es posible que desee aplicar un conjunto concreto de propiedades a un control individual.Puede hacerse creando una mscara con nombre (entrada en un archivo .skin que tiene establecida la propiedad SkinID) y aplicndola a continuacin mediante el identificador a controles individuales.

Para aplicar una mscara con nombre a un control y Establezca la propiedad SkinID del control, como se muestra en el ejemplo siguiente: <asp:Calendar runat="server" ID="DatePicker" SkinID="SmallCalendar" />
Si el tema de la pgina no incluyera ninguna mscara de controles coincidente con la propiedad SkinID, el control utilizar la mscara predeterminada para ese tipo de control.

.NET Framework 4 Aparte de especificar las preferencias de mscaras y temas en las declaraciones de pgina y los archivos de configuracin, puede aplicar temas mediante programacin.Puede establecer mediante programacin temas de pginas y temas de hojas de estilos; sin embargo, el procedimiento para aplicar cada tipo de tema es diferente.

Cmo: Aplicar temas de ASP.NET mediante programacin

Nota
Los temas a los que se hace referencia a continuacin no se incluyen en ASP.NET.Para crear un tema personalizado, vea Cmo: Definir temas de pginas ASP.NET.

Para aplicar mediante programacin un tema de una pgina y En un controlador para el mtodo PreInit de la pgina, establezca la propiedad Theme de la pgina.
En el ejemplo siguiente se muestra cmo establecer el tema de una pgina basndose condicionalmente en un valor pasado en la cadena de consulta.

APLICAR IVAN

Tutorial: Crear temas seleccionables por el usuario.NET Framework 4

En este tutorial se muestra cmo crear una pgina ASP.NET que permita al usuario seleccionar un tema para la pgina. Aunque en este ejemplo se utiliza una sola mscara de control y un archivo de hoja de estilos en cascada (CSS) bsico, los principios mostrados se aplican a temas ms complejos que incluyan grficos, esquemas de diseo diferentes en el archivo CSS y mscaras de control de servidor ms complejas. Entre las tareas ilustradas en este tutorial se incluyen las siguientes: y Crear un tema, incluido un archivo CSS y una mscara de control de servidor, en Microsoft Visual Web Developer. y Crear una pgina maestra de ASP.NET que utilice un tema. y Crear una pgina de ASP.NET con una pgina maestra aplicada que utilice un tema. y Crear un control de servidor de lista desplegable que aplique un nuevo tema a una pgina, incluido el cambio de estilo de los elementos de la pgina maestra. y Ejecutar una pgina para mostrar temas diferentes aplicados a la pgina.

Requisitos previos
Para completar este tutorial, necesitar: y Visual Web Developer (Visual Studio). y .NET Framework.

Crear un sitio Web

Si ya ha creado un sitio Web en Visual Web Developer (por ejemplo, siguiendo los pasos que se describen en Tutorial: Crear una pgina Web bsica en Visual Web Developer), puede utilizar ese sitio Web y pasar a la seccin siguiente, "Crear una pgina maestra". De lo contrario, cree un sitio y una pgina Web nuevos siguiendo estos pasos.

Para crear un sitio Web del sistema de archivos

1. 2. 3. 4. 5. 6. Abra Visual Web Developer. En el men Archivo, haga clic en Nuevositio Web. Aparece el cuadro de dilogo Nuevo sitio Web. En Plantillas instaladas de Visual Studio, haga clic en Sitio Web de ASP.NET. En el cuadro Ubicacin, escriba el nombre de la carpeta dnde desea conservar las pginas de su sitio Web. Por ejemplo, escriba el nombre de carpeta C:\WebSites. En la lista Lenguaje, haga clic en el lenguaje de programacin con el que prefiera trabajar. Haga clic en Aceptar. Visual Web Developer crea la carpeta y una nueva pgina denominada Default.aspx.

Crear un Tema
Un tema es una coleccin de valores de propiedades que permiten definir la apariencia de pginas y controles. Puede aplicar una apariencia similar a todas las pginas de una aplicacin Web. Los temas se componen de varios elementos: mscaras de control de servidor, archivos CSS y otros recursos. En este ejemplo, se utiliza una mscara y una hoja de estilos para crear un tema. Los temas se definen en directorios especiales del proyecto de sitio Web.

Para crear un tema

1. En el Explorador de soluciones, haga clic con el botn secundario del mouse en el nombre del proyecto del sitio Web, haga clic en Agregar carpeta ASP.NET y, a continuacin, haga clic en Tema. Se crea automticamente la carpeta App_Themes y se agrega una nueva carpeta de temas denominada Theme1. Haga clic con el botn secundario del mouse en la nueva carpeta Theme1 y haga clic en Cambiar nombre.Escriba Azul y presione ENTRAR. Haga clic con el botn secundario del mouse en la nueva carpeta denominada Azul y, a continuacin, haga clic en Agregar nuevo elemento. En el cuadro de dilogo Agregar nuevo elemento, seleccione Archivo de mscara y asigne el nombre default.skin al archivo.Haga clic en Agregar.

2. 3. 4.

5. 6.

En el Explorador de soluciones, vuelva a hacer clic con el botn secundario del mouse en la nueva carpeta denominada Azul y, a continuacin, haga clic en Agregar nuevo elemento. En el cuadro de dilogo Agregar nuevo elemento, seleccione Hoja de estilos.Asigne el nombre default.css a la hoja de estilos.Haga clic en Agregar. Se crear el primer tema con un archivo CSS y un archivo de mscara de control de servidor vacos.En breve modificar estos archivos, pero primero debe crear una pgina que contenga un control y algn cdigo HTML que se pueda aplicar al tema.

Crear una pgina maestra

Para mostrar lo fcil que puede ser aplicar un tema a una pgina maestra y a una pgina que utilice dicha pgina maestra, cree una pgina maestra simple para utilizarla con la pgina Default.aspx del proyecto web.

Para crear la pgina maestra

1. 2. 3. 4. 5. En el Explorador de soluciones, haga clic con el botn secundario del mouse en el nombre del sitio Web y, a continuacin, haga clic en AgregarNuevo elemento. En Plantillas instaladas de Visual Studio, haga clic en Pgina maestra. En el cuadro Nombre, escriba Master1.master. En la lista Lenguaje, haga clic en el lenguaje de programacin con el que prefiera trabajar. Desactive la casilla Colocar el cdigo en un archivo independiente y, a continuacin, haga clic en Agregar. La nueva pgina maestra se abre en la vista Cdigo fuente.En la parte superior de la pgina hay una declaracin @ Master en lugar de la declaracin @ Page que normalmente se encuentra en la parte superior de las pginas ASP.NET.El cuerpo de la pgina contiene un control asp:contentplaceholder con el valor de la propiedad ID establecido en ContentPlaceHolder1, que define el rea de la pgina maestra donde se combinar el contenido reemplazable de las pginas de contenido en tiempo de ejecucin.En el tutorial, trabajar despus ms con el marcador de posicin de contenido.

Disear la pgina maestra

La pgina maestra define los elementos que constituyen la pgina.Puede contener cualquier combinacin de texto esttico y controles.Una pgina maestra tambin contiene uno o ms marcadores de posicin de contenido que indican dnde aparecer el contenido dinmico cuando se muestren las pginas. En este tutorial, se utiliza una tabla que contiene un ttulo, varias reglas horizontales y un marcador de posicin de contenido de la pgina maestra como el diseo de la pgina Home.aspx.

Para crear una tabla para la pgina maestra y Con el archivo Master1.master seleccionado en la vista Cdigo fuente, seleccione el texto situado entre los dos elementos
form y pegue el contenido siguiente en el rea seleccionada.Tenga en cuenta que este cdigo coloca el marcador de posicin de contenido en una tabla en lugar de entre los elementos div, como ocurre en el diseo predeterminado de la pgina maestra.

Crear una pgina de contenido

La pgina maestra proporciona la plantilla para el contenido.El contenido de la pgina maestra se define creando una pgina ASP.NET que se asocia a la pgina maestra.La pgina de contenido es una pgina especializada de ASP.NET que incluye slo el contenido que se va a combinar con la pgina maestra.En la pgina de contenido, agregar el texto y los controles que desee mostrar cuando los usuarios soliciten la pgina. La pgina de contenido utilizar la pgina maestra que ha creado y los temas que crear a continuacin.La pgina utilizar el marcador de posicin de contenido de la pgina maestra y tendr un ttulo, un subttulo y una lista desplegable.Como la pgina va a utilizar una pgina maestra, debe contener un atributo MasterPageFile en la directiva @ Page, as como el marcador de posicin de contenido.

Para crear la pgina de contenido

1. 2. 3. 4. 5. 6. En el Explorador de soluciones, haga clic con el botn secundario del mouse en el nombre del sitio Web y, a continuacin, seleccione Agregar nuevo elemento. En Plantillas instaladas de Visual Studio, haga clic en Web Forms. En el cuadro Nombre, escriba Pgina principal. En la lista Lenguaje, haga clic en el lenguaje de programacin con el que prefiera trabajar. Active la casilla Seleccionar la pgina maestra y, a continuacin, haga clic en Agregar. Aparece el cuadro de dilogo Seleccionar la pgina maestra. Haga clic en Master1.master y en Aceptar. Se crea un nuevo archivo denominado Home.aspx.La pgina contiene una directiva @ Page que asocia la pgina actual a la pgina maestra seleccionada con el atributo MasterPageFile, tal como se muestra en el ejemplo de cdigo siguiente.

Agregar contenido a la pgina de contenido

Una pgina de contenido no tiene los elementos usuales que constituyen una pgina ASP.NET, como html, body o form.En su lugar, el contenido que se desea mostrar en la pgina maestra se agrega reemplazando las reas de marcador de posicin creadas en dicha pgina.En este ejemplo, puede agregar una elemento de encabezado 1, un elemento de encabezado 2, un elemento de prrafo y una lista desplegable.Utilizar la lista desplegable para seleccionar el tema que se aplica a la pgina.

Para agregar contenido a la pgina de inicio

1. Pegue el siguiente cdigo entre las etiquetas asp:Content de apertura y cierre correspondientes al marcador de posicin con la propiedad ID establecida en ContentPlaceHolder1.En el ejemplo siguiente se crean tres elementos HTML: un encabezado 1, un encabezado 2 y un prrafo.Tambin se agrega un control de lista desplegable.Tenga en cuenta que puede agregar tambin el control a la pgina en la vista Diseo, si lo prefiere

2.

. Agregue una seccin de script que ejecute el cdigo que carga el tema cuando se selecciona de la lista desplegable.El ejemplo siguiente y las etiquetas script deben agregarse a la pgina de contenido en la lnea situada detrs de la

directiva

@ Page.

El tema se carga durante el evento PreInit del ciclo de vida de la pgina.El formulario de solicitud de pgina contiene una matriz de valores, y el valor en el ndice 4 es el valor seleccionado de la lista desplegable.Este valor se asigna al tema de la pgina y, cuando se carga la pgina, se aplica el nuevo tema. El paso siguiente del tutorial consiste en crear varios temas que puede utilizar para mostrar cmo se aplica un tema diferente.

Modificar el tema Azul

El tema Azul contiene una hoja de estilos vaca y una mscara vaca.Como sabe qu elementos constituyen la pgina predeterminada y la pgina maestra que utiliza, ahora puede modificar los archivos de temas para agregar color a los elementos de la pgina.

Para modificar el tema Azul

1. 2. Abra el archivo Default.skin de la carpeta de temas Azul en la vista Cdigo fuente. Agregue el cdigo siguiente a la lista desplegable para designar los colores de la pgina cuando se seleccione el tema Azul.

<asp:dropdownlist runat="server" ForeColor="white" BackColor="Blue" />

3. Abra el archivo Default.skin de la carpeta Azul en la vista Cdigo fuente.Primero, agregue el cdigo siguiente para dar formato al ttulo de tabla de la pgina maestra.

td.title { font-size: 1em; text-align: center; font-family: verdana; font-size: x-large; font-weight: bolder; color: Navy; }
4. A continuacin, agregue un color de fondo a la tabla con el cdigo siguiente.

table.header { background-color: Blue; }

5. Despus, aplique estilo a los elementos encabezado 1 y encabezado 2 en la pgina de contenido.

h1 { font-size: large; color: Navy; } h2

{ font-family: Verdana; font-size: medium; margin-top: 30; color: Navy; }

6. Finalmente, aplique estilo a la regla horizontal y al elemento de prrafo.

p { font-family: Verdana; font-size: small; color: Aqua; text-align: left; } hr { border: 0; border-top: 2px solid Aqua; height: 2px; }

Asociar los temas a la pgina

Para poder ver el tema aplicado a la pgina Home.aspx, necesita agregar un atributo a la directiva @ Page que indique que la pgina utiliza un tema.

Para asociar una pgina a un tema

1. 2. Abra Home.aspx en la vista Cdigo fuente. Agregue el atributo StylesheetTheme a la directiva @ Page y establzcalo en un valor similar al del tema Azul.La directiva de pgina debe tener un aspecto similar al del ejemplo siguiente.

Probar la pgina
Puede probar la pgina ejecutndola tal como hara con cualquier pgina ASP.NET.

Para probar la pgina y Mientras ve la pgina Home.aspx, presione CTRL+F5 para ejecutarla.
ASP.NET combina el contenido de la pgina Home.aspx con el diseo de la pgina Master1.master en una sola pgina y, a continuacin, aplica el tema Azul y muestra la pgina resultante en el explorador.Observe que el tema Azul se ha aplicado a los elementos HTML y a la lista desplegable, as como al ttulo y al fondo definidos en el archivo principal.

Crear temas adicionales

El tema Azul est bien, pero el propsito de este tutorial es proporcionar al usuario de la pgina varias opciones para un tema.Puede copiar los archivos de hoja de estilos y mscara en nuevos directorios de temas y, a continuacin, modificar los colores utilizados en el tema para reflejar los nuevos colores del tema.En el procedimiento siguiente se crean dos nuevos temas, Rojo y Verde.

Para crear temas adicionales

1. En el Explorador de soluciones, haga clic con el botn secundario del mouse en la carpeta App_Themes, haga clic en Agregar carpeta ASP.NET y, a continuacin, haga clic en Tema.Con el ttulo de la carpeta Theme1 seleccionado, escriba Rojo y presione ENTRAR. Abra la carpeta Azul y seleccione los archivos Default.skin y Default.css.Haga clic con el botn secundario del mouse en los dos archivos seleccionados y, a continuacin, haga clic en Copiar. Haga clic con el botn secundario del mouse en la carpeta Rojo y, a continuacin, haga clic en Pegar. Repita el paso 1, pero asigne a la nueva carpeta de temas el nombre Verde.A continuacin, haga clic con el botn secundario del mouse en la carpeta Verde y haga clic en Pegar para colocar copias de los archivos Default.skin y Default.css en la carpeta Verde. Modifique el atributo de color en el archivo de mscara de forma que refleje el color del tema.Por ejemplo, el archivo de mscara del tema Rojo debe tener un aspecto como el del ejemplo siguiente.

2. 3. 4.

5.

<asp:dropdownlist runat="server" ForeColor="white" BackColor="Red" />

6. Modifique la hoja de estilos para que cada tema refleje el nombre del tema.Tenga en cuenta que desear utilizar varios tonos de verde para que los distintos elementos HTML y el texto contrasten con el fondo.La hoja de estilos del tema Verde podra tener un aspecto similar al del ejemplo siguiente.

p { font-family: Verdana; font-size: small; color: Teal; text-align: left; } hr { border: 0; border-top: 2px solid Teal; height: 2px; } h1 { font-size: large; color: Green; } h2 { font-family: Verdana; font-size: medium; margin-top: 30; color: Green; } table.header { background-color: Lime; } td.title { font-size: 1em; text-align: center; font-family: verdana; font-size: x-large; font-weight: bolder; color: Teal; }

Probar la seleccin de temas

La lista desplegable se puede utilizar ahora para seleccionar entre los tres temas de la pgina.

Para seleccionar diferentes temas

1. 2. Cambie a la pgina Home.aspx y, a continuacin, presione CTRL+F5. Seleccione Verde o Rojo en la lista desplegable. Observe que la hoja de estilos se aplica a los elementos HTML de la pgina y la mscara se aplica al control de lista desplegable.

Pasos siguientes
Para obtener ms informacin sobre el uso de pginas maestras, vea Tutorial: Crear y usar pginas maestras ASP.NET en Visual Web Developer.

Pginas principales ASP.NET.NET Framework 4

Las pginas maestras de ASP.NET permiten crear un diseo coherente para las pginas de la aplicacin.Puede definir el aspecto, el diseo y el comportamiento estndar que desea que tengan todas las pginas (o un grupo de pginas) de la aplicacin en una sola pgina maestra.A continuacin, puede crear pginas de contenido individuales que incluyan el contenido que desea mostrar.Cuando los usuarios solicitan las pginas de contenido, las combinan con la pgina maestra con el fin de generar una salida que combine el diseo de la pgina maestra con el de la pgina de contenido. Esta informacin general contiene las siguientes secciones: y Cmo funcionan las pginas maestras y Ventajas de las pginas maestras y Comportamiento en tiempo de ejecucin de las pginas maestras y Rutas de acceso de la pgina maestra y la pgina de contenido y Pginas maestras y temas y mbito de las pginas maestras y Temas relacionados y Referencia

Cmo funcionan las pginas maestras

Las pginas maestras se componen en realidad de dos partes, la propia pgina maestra y una o varias pginas de contenido.

Nota
Tambin se pueden anidar pginas maestras.Para obtener informacin detallada, vea Pginas maestras ASP.NET anidadas.

Pginas maestras
Una pgina maestra es un archivo de ASP.NET con la extensin .master (por ejemplo, MySite.master) que tiene un diseo predefinido que puede incluir texto esttico, elementos HTML y controles de servidor.La pgina maestra se identifica mediante una directiva @ Master especial que reemplaza la directiva @ Page utilizada en las pginas .aspx normales.El aspecto de la directiva es el siguiente:

Adems de la directiva @ Master, la pgina maestra tambin incluye todos los elementos HTML de nivel superior de una pgina, como html, head y form.Por ejemplo, en una pgina maestra podra utilizar una tabla HTML para el diseo, un elemento img para el logotipo de la compaa, texto esttico para el aviso de copyright y controles de servidor para crear la navegacin estndar en el sitio.Puede utilizar cualquier elemento HTML y ASP.NET en la pgina maestra. Marcadores de posicin de contenido reemplazables Adems del texto esttico y los controles que aparecern en todas las pginas, la pgina maestra tambin incluye uno o varios controles ContentPlaceHolder.Estos controles PlaceHolder definen las regiones que incluirn contenido reemplazable.A su vez, el contenido reemplazable se define en las pginas de contenido.Tras definir los controles ContentPlaceHolder, una pgina maestra tendra el siguiente aspecto:

Pginas de contenido
Para definir el contenido de los controles PlaceHolder de la pgina maestra, cree pginas de contenido individuales, que son pginas ASP.NET (archivos .aspx y, opcionalmente, archivos de cdigo subyacente) que estn enlazadas a una pgina maestra concreta.El enlace se establece en la directiva @ Page de la pgina de contenido al incluir un atributo MasterPageFile que apunta a la pgina maestra que se va a utilizar.Por ejemplo, una pgina de contenido podra tener la siguiente directiva @ Page, que la enlaza con la pgina Master1.master.

Puede crear varias pginas maestras para definir diseos distintos para partes diferentes del sitio, y un conjunto diferente de pginas de contenido para cada pgina maestra.

Ventajas de las pginas maestras

Las pginas maestras proporcionan una funcionalidad que tradicionalmente los programadores creaban copiando el cdigo, el texto y los elementos de control existentes repetidamente, mediante conjuntos de marcos, archivos de inclusin de elementos comunes, controles de usuario de ASP.NET, etc. Entre las ventajas de las pginas maestras se incluyen las siguientes: y Permiten centralizar las funciones comunes de las pginas para que las actualizaciones puedan llevarse a cabo en un solo lugar. y Facilitan la creacin de un conjunto de controles y cdigo, y aplican los resultados en un conjunto de pginas. Por ejemplo, puede utilizar los controles en la pgina maestra para crear un men que se aplique a todas las pginas. y Proporcionan un control ms preciso sobre el diseo de la pgina final al permitir controlar el modo en que se representan los controles PlaceHolder. y Proporcionan un modelo de objetos que permite personalizar la pgina maestra a partir de pginas de contenido individuales.

Comportamiento en tiempo de ejecucin de las pginas maestras

En tiempo de ejecucin, las pginas maestras se controlan en la secuencia siguiente: 1. Los usuarios solicitan una pgina escribiendo la direccin URL de la pgina de contenido. 2. Cuando se obtiene la pgina, se lee la directiva @ Page. Si la directiva hace referencia a una pgina maestra, tambin se lee la pgina maestra. Si las pginas se solicitan por primera vez, se compilan las dos pginas. 3. La pgina maestra con el contenido actualizado se combina en el rbol de control de la pgina de contenido. 4. El contenido de los controles Content individuales se combina en el control ContentPlaceHolder correspondiente de la pgina maestra. 5. La pgina combinada resultante se representa en el explorador.

Este proceso se describe en el diagrama siguiente:

Desde la perspectiva del usuario, la combinacin de las pginas maestras y de contenido da como resultado una nica pgina.La direccin URL de esta pgina es la de la pgina de contenido. Desde la perspectiva del programador, las dos pginas actan como contenedores diferentes para sus respectivos controles.La pgina de contenido acta como un contenedor de la pgina maestra.Sin embargo, se puede hacer referencia a los miembros pblicos de una pgina maestra a partir del cdigo de la pgina de contenido, tal y como se describe en la seccin siguiente. Tenga en cuenta que la pgina maestra pasa a formar parte de la pgina de contenido.De hecho, la pgina maestra acta fundamentalmente de igual forma que un control de usuario: como un elemento secundario de la pgina de contenido y como un contenedor dentro de esa pgina.En este caso, sin embargo, la pgina maestra es el contenedor de todos los controles de servidor representados en el explorador.El rbol de control de una pgina maestra y una pgina de contenido combinadas tendr un aspecto similar a:

. Esta diagrama est simplificado; si la pgina de contenido no tiene los controles Content correspondientes, la pgina maestra tambin podra tener marcado y controles en los controles ContentPlaceHolder. En general, esta estructura no tiene ningn efecto sobre el modo en que se crean o se programan las pginas.Sin embargo, en algunos casos, si establece una propiedad de toda la pgina en la pgina maestra, puede verse afectado el comportamiento de la pgina de contenido, porque la pgina maestra es el elemento principal ms inmediato para los controles de la pgina.Por ejemplo, si establece la propiedad EnableViewState de la pgina de contenido en true pero establece la misma propiedad en false en la pgina maestra, el estado de vista se deshabilitar porque la configuracin de la pgina maestra tendr prioridad.

Rutas de acceso de la pgina maestra y la pgina de contenido

Cuando se solicita una pgina de contenido, su contenido se combina con la pgina maestra, y la pgina se ejecuta en el contexto de la pgina de contenido.Por ejemplo, si obtiene la propiedad CurrentExecutionFilePath del objeto HttpRequest ya sea en el cdigo de la pgina de contenido o en el cdigo de la pgina maestra, la ruta de acceso representa la ubicacin de la pgina de contenido.

La pgina maestra y la pgina de contenido no tienen que estar en la misma carpeta. Siempre que el atributo MasterPageFile de la directiva @ Page de la pgina de contenido se resuelva como una pgina .master, ASP.NET puede combinar el contenido y las pginas maestras en una sola pgina representada.

Referencias a recursos externos

La pgina de contenido y la pgina maestra pueden contener controles y elementos que hagan referencia a recursos externos. Por ejemplo, las dos podran contener controles de imagen que hicieran referencia a archivos de imgenes o podran contener delimitadores que hicieran referencia a otras pginas. El contexto de las pginas maestras y de contenido combinadas es el de la pgina de contenido. Esto puede afectar al modo en que se especifican las direcciones URL de los recursos, como archivos de imgenes y pginas de destino, en los delimitadores. Controles de servidor En los controles de servidor de las pginas maestras, ASP.NET modifica dinmicamente las direcciones URL de las propiedades que hacen referencia a recursos externos.Por ejemplo, podra situar un control Image en una pgina maestra y establecer su propiedad ImageUrl para que hiciera referencia a la pgina maestra.En tiempo de ejecucin, ASP.NET modificar la direccin URL para que se resuelva correctamente en el contexto de la pgina de contenido. ASP.NET puede modificar las direcciones URL en los casos siguientes: y La direccin URL es una propiedad de un control de servidor ASP.NET. y La propiedad se marca internamente en el control como una direccin URL.(La propiedad se marca con el atributo UrlPropertyAttribute.) Por cuestiones prcticas, las propiedades de los controles de servidor ASP.NET que se utilizan normalmente para hacer referencia a recursos externos se marcan de este modo. Otros elementos ASP.NET no puede modificar las direcciones URL de los elementos que no son controles de servidor.Por ejemplo, si utiliza un elemento img en una pgina maestra y establece su atributo src en una direccin URL, ASP.NET no modificar esta direccin URL.En ese caso, la direccin URL se resolver en el contexto de la pgina de contenido y se crear la direccin URL convenientemente. En general, al trabajar con elementos en las pginas maestras, resulta recomendable utilizar un control de servidor incluso para los elementos que no requieren cdigo de servidor. Por ejemplo, en lugar de utilizar un elemento img, utilice un control de servidor Image.De este modo, ASP.NET puede resolver las direcciones URL correctamente y puede evitar los problemas de mantenimiento que podran surgir al mover la pgina maestra o la pgina de contenido. Para obtener ms informacin sobre cmo especificar las rutas de acceso en los controles de servidor ASP.NET, vea Rutas de acceso a sitios web ASP.NET.

Pginas maestras y temas

No puede aplicar directamente un tema de ASP.NET a una pgina maestra. Si agrega un atributo de tema a la directiva @ Master, se producir un error en la pgina cuando se ejecute. Sin embargo, los temas se aplican a las pginas maestras bajo estas circunstancias: y Si un tema est definido en la pgina de contenido. Las pginas maestras se resuelven en el contexto de las pginas de contenido, por lo que el tema de la pgina de contenido tambin se aplica a la pgina maestra. y Si todo el sitio se ha configurado para que utilice un tema incluyendo la definicin de un tema en el elemento Elemento pages (Esquema de configuracin de ASP.NET). Para obtener ms informacin, vea Temas y mscaras de ASP.NET.

mbito de las pginas maestras

Puede adjuntar pginas de contenido a una pgina maestra en tres niveles: y En el nivel de la pgina Puede utilizar una directiva de pgina en cada pgina de contenido para enlazarla a una pgina maestra, como en el ejemplo de cdigo siguiente.

Tutorial: Personalizar un sitio Web mediante temas en Visual Studio.NET Framework 4

Este tutorial muestra cmo utilizar temas para aplicar un aspecto coherente a las pginas y controles de un sitio Web. Un tema puede contener archivos de mscara que definan un aspecto comn para cada uno de los controles, una o varias hojas de estilo, y grficos comunes para su uso con los controles, por ejemplo el control TreeView. Este tutorial lo muestra cmo trabajar con temas de ASP.NET en los sitios Web. Las tareas ilustradas en este tutorial incluyen:

y y

Aplicar temas de ASP.NET predefinidos a pginas individuales y a un sitio en conjunto. Crear un tema propio con mscaras, que se utilizan para definir la apariencia de controles individuales.

Requisitos previos

Para poder completar este tutorial, necesitar:

y y

Microsoft Visual Web Developer (Visual Studio). El entorno .NET Framework.

Crear el sitio Web

Si ya ha creado un sitio Web en Visual Web Developer (por ejemplo, mediante los pasos descritos en Tutorial: Crear una pgina Web bsica en Visual Web Developer), puede utilizar ese sitio Web y pasar a la seccin siguiente. De lo contrario, cree un sitio Web y una pgina nuevos siguiendo estos pasos.

Para crear un sitio Web del sistema de archivos

1. 2. Abra Visual Web Developer. En el men Archivo, haga clic en Nuevositio Web. Aparece el cuadro de dilogo Nuevo sitio Web. 3. 4. En Plantillas instaladas de Visual Studio, haga clic en Sitio Web de ASP.NET. En el cuadro Ubicacin, escriba el nombre de la carpeta dnde desea conservar las pginas de su sitio Web. Por ejemplo, escriba el nombre de carpeta C:\WebSites. 5. 6. En la lista Lenguaje, haga clic en el lenguaje de programacin con el que prefiera trabajar. Haga clic en Aceptar. Visual Web Developer crea la carpeta y una nueva pgina denominada Default.aspx. Para empezar a trabajar con temas en este tutorial, va a configurar un control Button, un control Calendar y un control Label, de manera que pueda ver cmo los temas afectan a dichos controles.

Para colocar los controles en la pgina

1. 2.

Cambie a la vista Diseo. Del grupo Estndar del Cuadro de herramientas, arrastre un control Calendar, un control Button y un control Label hacia la pgina. El diseo exacto de la pgina no es importante.

Nota
No aplique ningn formato a ninguno de los controles. Por ejemplo, no utilice el comando AutoFormat para establecer el aspecto del control Calendar.

3. 4.

Cambie a la vista Cdigo fuente. Asegrese de que el elemento head de la pgina tiene el atributo runat="server" de forma que diga lo se indica a continuacin:

<head runat="server"></head>
5. Guarde la pgina.

Para probar la pgina, puede verla antes de que se aplique un tema, y a continuacin con temas diferentes.

Crear y aplicar un tema a una pgina

Con ASP.NET resulta muy fcil aplicar un tema predefinido a una pgina o crear un tema nico. En esta parte del tutorial, crear un tema con algunas mscaras simples, que definen el aspecto de los controles.

Para crear un tema nuevo

1. En Visual Web Developer, haga clic con el botn secundario en el nombre del sitio Web, haga clic en Agregar carpeta ASP.NET y, a continuacin, haga clic en Tema. Se crean la carpeta denominada App_Themes y una subcarpeta denominada Theme1. 2. Cambie el nombre de la carpeta Theme1 a sampleTheme. El nombre de esta carpeta ser el nombre del tema que cree (aqu, sampleTheme). El nombre exacto no tiene importancia, pero debe recordarlo cuando aplique el tema personalizado. 3. 4. Haga clic con el botn secundario en la carpeta sampleTheme, seleccione Agregar nuevo elemento, agregue un nuevo archivo de texto y denomnelo sampleTheme.skin. En el archivo sampleTheme.skin, agregue definiciones de mscaras como se muestra en el ejemplo de cdigo siguiente.

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"/>

Nota
Las caractersticas exactas que defina no tienen importancia. Los valores de la seleccin anterior son sugerencias que sern ms obvias cuando pruebe el tema ms adelante.

Las definiciones de mscaras son parecidas a la sintaxis para crear un control, salvo que las definiciones slo contienen opciones que afectan al aspecto del control. Por ejemplo, las definiciones de mscaras no incluyen una opcin para la propiedad ID. 5. Guarde el archivo de mscara y cirrelo.

Ya puede probar la pgina antes de que se aplique ningn tema.

Nota
Si agrega un archivo de hoja de estilos en cascada (CSS) a la carpeta sampleTheme, se aplicar a todas las pginas que utilicen el tema.

Para probar los temas

1. Presione CTRL+F5 para ejecutar la pgina. Los controles se muestran con su aspecto predeterminado. 2. 3. 4. Cierre el explorador y, a continuacin, vuelva a Visual Web Developer. Abra o cambie al archivo Default.aspx y, a continuacin, cambie a la vista Cdigo fuente. En la directiva @ Page, agregue un atributo Theme que especifique sampleTheme como nombre del tema:

Copiar

<%@ Page Theme="sampleTheme" ...%>

Nota
Debe indicar el nombre de un tema real en el valor de atributo (en este caso, el archivo sampleTheme.skin que defini previamente).

5.

Presione CTRL+F5 para ejecutar la pgina de nuevo. Esta vez, los controles se representan con la combinacin de colores definida en el tema. Los controles Label y Button aparecern con la configuracin que realiz en el archivo sampleTheme.skin. Puesto que no realiz una entrada en el archivo sampleTheme.skin para el control Calendar, se muestra con su aspecto predeterminado.

6.

En Visual Web Developer, establezca el tema en el nombre de otro tema, si lo hay.

7.

Presione CTRL+F5 para ejecutar la pgina de nuevo. Los controles vuelven a cambiar de aspecto.

Temas de hojas de estilos y temas de personalizacin

Una vez que haya creado un tema, puede adaptarlo a su uso en una aplicacin asocindolo a una pgina como tema de personalizacin (como se ha hecho en la seccin anterior) o como tema de hoja de estilos. Los temas de hojas de estilos utilizan los mismos archivos de temas que los temas de personalizacin, pero tienen menos prioridad en los controles y propiedades de las pginas; dicha prioridad equivale a la de un archivo de CSS. En ASP.NET, el orden de prioridad es:

y y y

Configuracin del tema, incluidos los temas establecidos en el archivo Web.config. Configuracin de la pgina local. Configuracin de temas de hoja de estilos.

En este sentido, si decide utilizar un tema de hoja de estilos, las propiedades del tema quedarn reemplazadas por lo que se declare localmente en la pgina. De igual forma, si utiliza un tema de personalizacin, las propiedades del tema reemplazarn todo lo que haya en la pgina local y todo lo que contenga un tema de hoja de estilos que se est utilizando.

Para utilizar un tema de hoja de estilos y ver el orden de prioridad

1. 2. Cambie a la vista Cdigo fuente. Cambie la declaracin de la pgina:

<%@ Page theme="sampleTheme" %>

a una declaracin de tema de hoja de estilos:

<%@ Page StyleSheetTheme ="sampleTheme" %>

3. Presione CTRL+F5 para ejecutar la pgina. Observe que el valor de la propiedad ForeColor del control Label1 es el color rojo. 4. 5. 6. Cambie a la vista Diseo. Seleccione Label1 y, en Propiedades, establezca ForeColor en el color azul. Presione CTRL+F5 para ejecutar la pgina. El valor de la propiedad ForeColor de Label1 es el color azul. 7. 8. Cambie a la vista Cdigo fuente. Cambie la declaracin de la pgina para declarar un tema, en lugar de un tema de hoja de estilos; para ello, vuelva a cambiar:

<%@ Page StyleSheetTheme="sampleTheme" %>

a:

<%@ Page Theme="sampleTheme" %>

9. Presione CTRL+F5 para ejecutar la pgina.

El valor de la propiedad ForeColor de Label1 vuelve a ser el color rojo.

Basar un tema personalizado en controles existentes

Una manera sencilla de crear definiciones de mscaras consiste en usar el diseador para establecer las propiedades de aspecto y, a continuacin, copiar la definicin de los controles en un archivo de mscara.

Para basar un tema personalizado en controles existentes

1. En la vista Diseo, establezca las propiedades del control Calendar de manera que el control tenga un aspecto especial. Como sugerencia, puede usar los siguientes valores de configuracin: y BackColor Cin 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

TodayDayStyle-BackColor

Rosa

Nota
Las caractersticas exactas que defina no tienen importancia. Los valores de la lista anterior son sugerencias que sern ms obvias cuando pruebe el tema ms adelante.

2. 3. 4. 5. 6. 7. 8.

Cambie a la vista Cdigo fuente y, a continuacin, copie el elemento <asp:calendar> y sus atributos. Cambie al archivo sampleTheme.skin, o bralo. Pegue la definicin del control Calendar en el archivo sampleTheme.skin. Quite la propiedad ID de la definicin del archivo sampleTheme.skin. Guarde el archivo sampleTheme.skin. Cambie a la pgina Default.aspx y arrastre un segundo control Calendar a la pgina. No establezca ninguna de sus propiedades. Ejecute la pgina Default.aspx. Los dos controles Calendar tendrn el mismo aspecto. El primer control Calendar refleja los valores de propiedad explcitos que realiz. El segundo control Calendar hereda sus propiedades de aspecto de la definicin de mscara que realiz en el archivo sampleTheme.skin.

Aplicar temas a un sitio Web

Puede aplicar un tema a todo un sitio web, lo que implica que no es necesario aplicarlo a cada una de las pginas. Si lo desea, puede reemplazar la configuracin de los temas en una pgina concreta.

Para establecer un tema para un sitio Web

1. Abra el archivo Web.config.

2.

En el elemento pages, agregue un atributo theme y establezca su valor en el nombre del tema que desee aplicar a todo el sitio web, tal y como se indica en el siguiente ejemplo:

<pages theme="sampleTheme" >

Nota
Los nombres de los elementos y atributos del archivo Web.config distinguen entre maysculas y minsculas.

3. 4. 5. 6.

Guarde y cierre el archivo Web.config. Abra o cambie al archivo Default.aspx y, a continuacin, pase a la vista Cdigo fuente. Quite el atributo theme (theme="themeName") de la declaracin de @ Page. Presione CTRL+F5 para ejecutar Default.aspx. La pgina se muestra con el tema que especific en el archivo Web.config.

Si decide especificar un nombre de tema en la declaracin de la pgina, dicho tema reemplazar cualquier tema especificado en el archivo Web.config.