Quizás algunos amigos no tengan muy claros los temas y skins. Primero introduzcamos temas y máscaras.
1. Introducción:
Solo mira los nombres Temas y Máscaras y sabrás para qué se usan. Ahora hablemos de para qué se usan (cómo puedes decirlo todavía,~_~) cuando los conoces todos. ¿Podemos cambiarlos fácilmente usando? Temas y estilos de página sin modificar nuestro código y archivos de página.
Los archivos de Temas se colocan por separado en una carpeta App_Themes y están completamente separados de su programa.
2. Cómo utilizar Temas y Máscaras:
Primero veamos un ejemplo muy simple:
App_Themesdefault1.skin código de archivo:
<asp:Label Font-Bold="true" ForeColor="Red" runat="server" />
default.aspx: Código de archivo:
<%@ Page Language="C#" Theme="default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transicional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<cabeza id="Cabeza1" runat="servidor">
<title>Página con tema de ejemplo aplicado</title>
</cabeza>
<cuerpo>
<formulario id="form1" runat="servidor">
<asp:Label ID="Label1" runat="servidor" Text="Hola 1" /><br />
<asp:Label ID="Label2" runat="servidor" Text="Hola 2" /><br />
</formulario>
</cuerpo>
</html>
Puede ver que no hemos escrito ningún código para controlar el estilo en default.aspx, pero cuando lo ejecutamos, encontramos que las palabras en la etiqueta se han puesto en negrita roja. Este es el ejemplo de tema más básico.
Carpeta App_Themes:
La carpeta App_Themes se encuentra en el directorio raíz del programa. App_Themes debe ser una subcarpeta del nombre del tema. La subcarpeta puede contener varios archivos .skin y .css. En la siguiente figura, se crean dos temas, denominados default y default2:
Usar temas
1. Aplicar tema a una página:
Si desea aplicar un tema a una página determinada, modifique <%@ Page Theme="..." %> directamente en el archivo aspx. Por ejemplo, si desea aplicar el tema default2 a esta página, configure <%. @ Page Theme="default2" %> OK
2. Aplique el mismo tema a todas las páginas:
Si desea utilizar el mismo tema en todas las páginas, agregue la oración <pages theme="..."/> debajo del nodo <system.web> en web.config
3. Deje que el control no aplique el tema:
En el primer ejemplo, vimos que los estilos de dos etiquetas cambiaron, lo que significa que el estilo del archivo .skin entró en vigor en todas las etiquetas de la página. Pero a veces queremos que una etiqueta determinada no aplique el estilo en .skin. En este caso, solo necesita establecer la propiedad EnableTheming de la etiqueta en falso.
Quizás también desee que diferentes etiquetas muestren diferentes estilos. Solo necesita configurar el atributo SkinID de la etiqueta. Consulte el siguiente ejemplo.
App_Themesdefault1.skin
<asp:label runat="servidor" font-bold="true" forecolor="Rojo" />
<asp:label runat="servidor" SkinID="Azul" font-bold="true" forecolor="azul" />
deafult.aspx
<%@ Idioma de página="C#" Tema="predeterminado" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transicional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<cabeza id="Cabeza1" runat="servidor">
<title>Página con tema de ejemplo aplicado</title>
</cabeza>
<cuerpo>
<formulario id="form1" runat="servidor">
<asp:Label ID="Label2" runat="servidor" Text="Hola 2" SkinID="Azul" /><br />
<asp:Label ID="Label3" runat="servidor" Text="Hola 3" /><br />
</formulario>
</cuerpo>
</html>
Después de ejecutar, encontrará que los estilos de visualización de las dos etiquetas son diferentes.
4. Otros métodos:
Como se mencionó anteriormente, usar <%@ Page Theme="..." %> en el encabezado del archivo aspx para usar el tema, y usar este método para aplicar el estilo en el tema sobrescribirá el estilo del atributo de control que escribió en aspx. Por ejemplo:
App_Themesdefault1.skin
<asp:Label Font-Bold="true" ForeColor="Rojo" runat="servidor" />
default.aspx
<%@ Idioma de página="C#" Tema="default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transicional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http ://www.w3.org/1999/xhtml ">
<cabeza id="Cabeza1" runat="servidor">
</cabeza>
<cuerpo>
<formulario id="form1" runat="servidor">
<asp:Label ID="Label1" runat="servidor" Text="Hola 1" /><br />
<asp:Label ID="Label2" runat="servidor" Text="Hola 2" ForeColor="azul" />
</formulario>
</cuerpo>
</html>
Como resultado de la operación, el color frontal de todas las etiquetas es rojo.
Usar <%@ Page StyleSheetTheme="..." %> para aplicar un tema no sobrescribirá el atributo de estilo que escribió en el archivo aspx:
el orden en el que el control aplica el atributo de estilo es el siguiente:
a. Estilo al que hace referencia StyleSheetTheme.
b. Propiedades de control establecidas por código (anular StyleSheetTheme)
c. El estilo al que hace referencia el tema Tema (que cubre los primeros 2)
contiene CSS:
Los archivos .css también se pueden usar en temas. Cuando coloca el archivo .css en un directorio de temas, su .css se aplicará automáticamente a la página que usa este tema.
3. El código de fondo puede cambiar fácilmente la apariencia del sitio web. .
Lo que mencioné anteriormente es aplicar temas en archivos aspx o web.config. Sin embargo, obviamente es inconveniente usar el método anterior para cambiar máscaras en un sitio web como un blog donde cada usuario tiene una máscara diferente.
A continuación se presentará cómo hacer referencia dinámica al tema en el código de fondo para resolver la situación anterior. El tema debe aplicarse lo antes posible cuando se solicita la página, por lo que debemos escribir código en el evento Page_PreInit. El código es muy simple. , solo una frase:
Página.Tema = "...";
Aquí solo necesitamos leer los diferentes nombres de temas establecidos por cada usuario en la base de datos para darnos cuenta fácilmente de que cada usuario tiene un aspecto diferente.
------------------------------------------
Las anteriores son todas opiniones y experiencias personales. Si hay algún problema, por favor dame tu consejo.