044. asp.net主题之二为主题添加CSS样式和动态加载主题

时间:2022-06-07 08:22:05

1. 新建任意一个网站, 默认主页为Default.aspx, 增加一个App_Themes目录, 用于存储主题, 添加一个MyTheme的主题, 在MyTheme主题下添加一个样式表文件, 默认名称为StyleSheet.css. 主题中的CSS文件与普通的CSS文件没有任何区别, 但主题中包含的CSS文件主要针对页面和普通的HTML控件进行设置, 并且主题中的CSS文件必须保存在主题目录中

/*背景色*/
body
{
text-align: center;
color: red;
background-color: #00CCFF;
font-weight: bold;
}
/*连接的三种外观*/
A:link
{
color:White ;
text-decoration:underline;
}
A:visited
{
color:White;
text-decoration:underline;
}
A:hover
{
color :Fuchsia;
text-decoration:underline;
font-style :italic ;
}
/*input的边框颜色*/
input
{
border-color :Yellow;
}

在默认的Default.aspx中应用CSS文件

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" 

Theme ="MyTheme" 

%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" runat="server">
<title>为主题添加CSS样式</title>
</head>
<body>
<form id="form1" runat="server">
<div>
为主题添加CSS文件
<table>
<tr>
<td style="width: 100px">
<a href ="Default.aspx">他们知道</a>
</td>
<td style="width: 100px">
<a href ="Default.aspx">他们不知道</a>
</td>
</tr>
<tr>
<td style="width: 100px">
<input id="Button1" type="button" value="button" /></td>
<td style="width: 100px">
</td>
</tr>
</table>
</div>
</form>
</body>
</html>

最终效果图:

044. asp.net主题之二为主题添加CSS样式和动态加载主题

044. asp.net主题之二为主题添加CSS样式和动态加载主题