• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

Theme、StylesheetTheme设置ASP.NET的样式与主题

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

ASP.NET创建的动态网站,与静态网站相比,简单地说,就是在静态网站的基础上增加了由在服务器端运行的代码动态生成的内容,这个在服务器端运行的代码包括代码页中的后台代码,也包括前台页面中的控件。

静态网页的样式,同样适应于动态网页的静态内容。

一、样式

1、  行内样式(在HTML元素的内部,利用 style直接定义样式)

<head runat="server">
    <title>ASP.NET的样式</title>
</head>
<body>
    <form >
    <div>
    <p style="background-color:#FF0000">ASP.NET的样式</p>
    </div>
    </form>
</body>
2、  内部样式(在网页<head>标签中,利用style标签定义样式)
<head >
    <title>ASP.NET的样式</title>
    <style type="text/css">
    p
    {
        background-color:#FF7F00;
    }
    </style>
</head>
<body>
    <form >
    <div>
    <p style="background-color:#FF0000">ASP.NET的样式</p>
    </div>
    </form>
</body>

3、  外部样式(将样式定义在另外一个样式表文件中)

1)外部样式表文件:

2)通过link标签引入样式表

<html xmlns="http://www.w3.org/1999/xhtml">
<head >
    <title>ASP.NET的样式</title>
    <link href="App_Themes/MyTheme/StyleSheet.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    p
    {
        background-color:#FF7F00;
    }
    </style>
</head>
<body>
    <form >
    <div>
    <p style="background-color:#FF0000">ASP.NET的样式</p>
    </div>
    </form>
</body>
</html>


 

很显然,这三种样式的优先级别是:行内样式>内部样式>外部样式。

由于ASP.NET比静态网页多个服务器端编译运行的控件,很多时候,样式表控制不了控件的样式,这时,就出现了外观。

二、外观

设置控件的外观,可以直接设置控件的外观属性,也可以在外部的外观文件中集中设置。

外观文件通常与样式表文件一齐放在主题文件夹中,与设置样式、外观的图片一起,称为ASP.NET的主题。也就是说,ASP.NET的主题主要包括样式表、外观文件和图片三个内容。

引入主题通常不再使用link标签,而是使用Page页的Theme或者StylesheetTheme属性。

注意此时,标签head一定具有runat="server属性,否则,会出现错误:

1、  创建外观文件

2、使用Theme设置主题

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" 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 runat="server">
    <title>无标题页</title>
</head>
<body>
    <form >
    <div>
    <asp:Label ID="lblMessage" runat="server" Text="ASP.NET的皮肤" BackColor="#00FF00"></asp:Label>
    </div>
    </form>
</body>
</html>


 

3、使用StylesheetTheme设置主题

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" StylesheetTheme="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 runat="server">
    <title>无标题页</title>
</head>
<body>
    <form >
    <div>
    <asp:Label ID="lblMessage" runat="server" Text="ASP.NET的皮肤" BackColor="#00FF00"></asp:Label>
    </div>
    </form>
</body>
</html>


 

不难看出,ThemeStylesheetTheme的主要区别是优先级,与行内外观属性相比,三者的优先级别是:Theme>行内外观>StylesheetTheme,也就是说,使用StylesheetTheme设置主题,显示的外观是行内外观绿色;而使用Theme,行内外观被改写,显示的是外观文件中的青色。

对于静态网页内容,使用ThemStylesheetTheme设置主题时的优先级别则是:

行内样式>Theme设置的外部样式>内部样式>StylesheetTheme设置的外部样式

4Web.config文件中设置主题

可以在web.config文件的System.Web节中统一设置整个网站的主题,格式如下:

<pages theme="MyTheme" />

<pages styleSheetTheme="MyTheme" />

5、某一网页不使用主题

如果某一网页使用单独的主题,可以在该网页是再单独设置Theme属性;而如果某一网页不使用主题,刚可以采用以下两种方法进行设置:

Theme=""StylesheetTheme=""(注意引号中不能有空格);

EnableTheming="false"

 

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
ASP.NET学习笔记_08控件和母版发布时间:2022-07-10
下一篇:
ASP.NET MVC的帮助类HtmlHelper和UrlHelper发布时间:2022-07-10
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap