Informacin general sobre el trabajo con CSS .NET Framework 4Las 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

EscenariosEn 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 CSSVisual Studio 2010 ofrece un conjunto de herramientas para crear, aplicar y administrar estilos y hojas de estilos en cascada (CSS).Entre estas herramientas se incluyen las siguientes:

y

y

y

y

y

La ventana Aplicar estilos permite crear, modificar y aplicar estilos.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 generalEn 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 CSSCada 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 estilosPuede 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 :

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

Escribir estilos CSSSe 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.

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.

HTML 4.0 CSS Element Style Example h1{text-align:center; color:blue;} This text is centered and blue

En esta pgina web, todo el texto que aparezca entre las etiquetas y 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.

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 y .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 CSSLas 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 claseNo se aplica ninguna clase a las herramientas de CSS.

Lo nuevoVisual 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 4En 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.

y

Requisitos previosPara 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 WebEn 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 archivos1. 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.

NotaEl 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 pginaPara 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 pginaEn 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 predeterminada1. Abra la pgina Default.aspx o cambie a ella.

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

AdventureWorks Styling Page Making CSS Styling Easier in Design View Find: Matters of the Web 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. Matters of the Web 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. Matters of the Web 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. 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. Lorem ipsum dolor sit amet, consectetuer adipiscing elit 2007. 4. 5. Guarde la pgina. Cambie a la vista Diseo para ver el formato predeterminado.

Aplicar estilos en la vista DiseoEn 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 pginaEl primer elemento al que dar formato es la seccin de pancarta, que incluye elementos delimitados por la etiqueta .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 pancarta1. 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 pginaEn 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 contenidoPuede 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.

NotaPuede 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 pancarta1. 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 pancartaEn 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 pancarta1. 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 columnasPuede 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.

NotaPara 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 lateralPuede 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 derecha1. 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 centralPara 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 central1. 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 pginaSi 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 pgina1. 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 estilosUna 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 pgina1. 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 estilosPuede 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 estiloEn 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 siguientesEn 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 4Este 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.

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

Requisitos previosNecesita 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.

y

Crear un sitio WebEn 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 archivos1. 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 CSSPara 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 pgina1. 2. Abra la pgina Default.aspx en vista Cdigo fuente. Agregue el cdigo siguiente despus del elemento :

AdventureWorks Styling Page Making CSS Styling Easier in Design View Find: Matters of the Web 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. Matters of the Web 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. Matters of the Web 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. 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. Lorem ipsum dolor sit amet, consectetuer adipiscing elit 2007.

3. 4.

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

Agregar un archivo CSSEn 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 CSS1. 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 estilosAl 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 estiloPara 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 formato1. 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 . 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.

NotaEl 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 imagenAntes de establecer el estilo de una imagen, debe agregar la imagen al proyecto y establecer su propiedad ImageUrl.

Para agregar una imagen al proyectoEn 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 Image1. 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 imagenPara 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 diseo1. 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 siguientesEste 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 4Un 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 controlLos 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.

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

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 cascadaUn 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 recursosLos 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.

mbito de los temasPuede 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 en el archivo de configuracin de la aplicacin. Si el elemento se define en el archivo Machine.config, el tema se aplicar a todas las pginas de las aplicaciones web en el servidor.

Temas de pginaUn 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 globalesUn 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 temasSe 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 temasComo 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 cascadaLos 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 seguridadLos 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 4En 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 pgina1. 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 pgina1. 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.

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.

NotaUna 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.

NotaSlo 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 pgina1. 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 globalesUn 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.

NotaSi 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 global1. Cree una carpeta Themes con la ruta de acceso siguiente.

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

NotaEl 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.

NotaAl 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 4Puede 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 Web1. En el archivo Web.config de la aplicacin, establezca el elemento en el nombre del tema, ya sea ste global o de pgina, como se muestra en el siguiente ejemplo:

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

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 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, comose muestra en el siguiente ejemplo:

Cmo: Deshabilitar temas de ASP.NET.NET Framework 4Puede 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.

NotaPuede 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: Para deshabilitar temas en un control y Establezca la propiedad EnableTheming del control en false, como en este ejemplo: Tras ello, el tema, con sus estilos y mscaras correspondientes, slo se aplicar a la pgina que lo declara.

Aplicar mscaras a los controlesLas 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: 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

NotaLos 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 4En 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 previosPara completar este tutorial, necesitar: y Visual Web Developer (Visual Studio). y .NET Framework.

Crear un sitio WebSi 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 archivos1. 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 TemaUn 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 tema1. 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 maestraPara 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 maestra1. 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 maestraLa 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 elementosform 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 contenidoLa 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 contenido1. 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 contenidoUna 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 inicio1. 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 AzulEl 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 Azul1. 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.

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 pginaPara 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 tema1. 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 pginaPuede 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 adicionalesEl 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 adicionales1. 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.

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 temasLa lista desplegable se puede utilizar ahora para seleccionar entre los tres temas de la pgina.

Para seleccionar diferentes temas1. 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 siguientesPara 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 4Las 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 maestrasLas pginas maestras se componen en realidad de dos partes, la propia pgina maestra y una o varias pginas de contenido.

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

Pginas maestrasUna 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 contenidoPara 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 maestrasLas 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 maestrasEn 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 contenidoCuando 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 Master