ASP.NET在主题中添加CSS文件

在ASP.NET中,可以使用CSS来控制页面上HTML元素和ASP.NET控件的皮肤。如果在主题文件夹中添加了CSS文件,则在页面应用主题时也会自动应用CSS。

在App_Themes\StyleTheme\SimpleStyle.css中使用CSS对ASPX页面中的几个不同HTML元素应用样式规则。操作步骤如下:

1. 在Visual Studio 2010中创建一个网站WebSite1。

2. 在网站根目录创建主题文件夹App_Themes,并将“主题1”文件夹修改为StyleTheme文件夹。

3. 在StyleTheme文件夹上单击鼠标右键,在弹出的快捷菜单中选择“添加新项”命令,打开“添加新项”对话框。

4. 在对话框的中间窗口中选择“样式表”项,在窗口底部“名称”右侧的文本框中输入SimpleStyle.css。

5. 点击该对话框右下角的“添加”按钮,即可在StyleTheme主题中添加一个SimpleStyle.css样式表文件。如下图所示:

6. 在SimpleStyle.css文件中添加CSS规则。代码如下:

html
{
background-color:gray;
font:14px 宋体;
}
.content
{
margin:auto;
width:400px;
border:solid 1px black;
background-color:White;
padding:10px;
}
h1
{
color:Gray;
font-size:18px;
border-bottom:solid 1px orange;
}
label
{
font-weight:bold;
}
input
{
background-color:Yellow;
border:double 3px orange;
}
.button
{
background-color:#eeeeee;
}

实例

如果在名为StyleTheme的主题文件夹(App_Themes文件夹下的StyleTheme文件夹)中添加SimpleStyle.css文件,这个CSS将会自动应用到ShowSimpleCSS.aspx页面中。程序代码如下:

<%@ Page Language="C#" Theme="StyleTheme" AutoEventWireup="true" CodeFile="ShowSimpleCSS.aspx.cs" Inherits="ShowSimpleCSS" %>
<!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>ASP.NET在主题中添加CSS文件-www.baike369.com</title>
</head>
<body>
<form id="form1" runat="server">
<div class="content">
<asp:Label
ID="lblUserName"
Text="用户名:"
AssociatedControlID="txtUserName"
runat="server">
</asp:Label>
<br />
<asp:TextBox
ID="txtUserName"
runat="server">
</asp:TextBox>
<br /><br />
<asp:Label
ID="lblContactNumber"
Text="联系电话:"
AssociatedControlID="txtContactNumber"
runat="server">
</asp:Label>
<br />
<asp:TextBox
ID="txtContactNumber"
runat="server">
</asp:TextBox>
<br /><br />
<asp:Button
ID="btnsubmit"
Text="提交"
runat="server"
CssClass="button" />
</div>
</form>
</body>
</html>

执行结果如下:

CSS用于对ShowSimpleCSS.aspx中的几个HTML元素进行样式设置。例如,样式表将页面背景色设为灰色,并将<div>标签的内容设置为居中显示。


提示

因为ASP.NET控件也会显示为HTML元素,所以样式表也可以对由ASP.NET的Label控件、TextBox控件和Button控件显示的HTML元素进行样式设置。

  • 一个ASP.NET Label控件会输出为一个HTML <label>标签,样式表将所有的<label>标签格式化为粗体。
  • TextBox控件和Button控件的输出为HTML <input>标签,样式表将修改<input>标签的边框样式和背景颜色。

注意,Button控件具有CssClass属性,通过这个属性,可以在CSS中对特定的控件(或者是一些控件)进行样式设置。在示例中,Button控件输出的<input>标签的背景色被设为淡灰色,值为#eeeeee。

在此建议所有的网页都使用本节讨论的方法进行设计。应该在主题文件夹中保存外部的CSS,特别要注意,不要通过修改控件的属性来改变控件皮肤。此外,也要避免使用皮肤文件。

使用CSS的好处是使加载页面的速度更快。在外部的样式表中保存的内容越多,在每一次请求页面时需要加载的内容就越少。浏览器可以加载缓存外部样式表的内容并对Web应用程序中的所有页面应用样式表。

如果通过修改控件属性来修改控件皮肤,那么在每次请求页面时,多余的内容都会被加载到浏览器中。例如,如果修改Label控件的BackColor属性,在显示Label控件时,额外的Style属性也会显示出来。

使用皮肤文件和修改控件属性没有区别。使用皮肤也会使页面变得臃肿。举例来说,如果给Label控件创建一个皮肤,当每个页面的Label控件输出时,皮肤文件中的Label的属性必须和每个页面中的Label控件进行合并。

因此,最好使用外部的样式表来完成所有的格式化工作。


注意

主题中的CSS文件与普通的CSS文件没有任何区别,但是,主题中的CSS文件必须保存在主题文件夹中。


技巧:创建主题的简便方法

在创建控件外观时,一个简单的方法就是:将控件添加到.aspx页面中,然后利用Visual Studio 2010的属性窗口及可视化设计功能对控件进行设置,最后再将控件代码复制到外观文件中并做适当的修改。

ASP.NET在主题中添加CSS文件的更多相关文章

  1. asp.net后台代码动态添加JS文件和css文件的引用

    首先添加命名空间 using System.Web.UI.HtmlControls; 代码动态添加css文件的引用 HtmlGenericControl myCss = new HtmlGeneric ...

  2. 007.Adding a view to an ASP.NET Core MVC app -- 【在asp.net core mvc中添加视图】

    Adding a view to an ASP.NET Core MVC app 在asp.net core mvc中添加视图 2017-3-4 7 分钟阅读时长 本文内容 1.Changing vi ...

  3. 006.Adding a controller to a ASP.NET Core MVC app with Visual Studio -- 【在asp.net core mvc 中添加一个控制器】

    Adding a controller to a ASP.NET Core MVC app with Visual Studio 在asp.net core mvc 中添加一个控制器 2017-2-2 ...

  4. 008.Adding a model to an ASP.NET Core MVC app --【在 asp.net core mvc 中添加一个model (模型)】

    Adding a model to an ASP.NET Core MVC app在 asp.net core mvc 中添加一个model (模型)2017-3-30 8 分钟阅读时长 本文内容1. ...

  5. ASP.NET Web Application中使用链接文件

    最近重构一个内部的平台系统,作为一个平台,其下有几个子系统,每个子系统有自己的网站系统.而每个网站使用的是统一的风格,统一的验证机制,反馈系统,等等.所以,为了避免几个子系统中重复出现相同的资源或文件 ...

  6. 如何在IOS开发中在自己的framework中添加.bunble文件

    今天就跟大家介绍一下有关,如何在IOS开发中在自己的framework中添加.bunble文件,该文章我已经在IOS教程网(http://ios.662p.com)发布过来,个人觉得还是对大家有帮助的 ...

  7. Xcode7 Xcode6 中添加pch文件

    在Xcode7 和 Xcode6 中添加.pch文件是一样的,具体操作图文如下: 第一步:在Xcode的项目里,一般在Supporting Files 文件夹下创建,选中Supporting File ...

  8. 在ASP.NET MVC 框架中调用 html文件及解析get请求中的参数值

    在ASP.NET MVC 框架中调用 html文件: public ActionResult Index() { using (StreamReader sr = new StreamReader(P ...

  9. js动态创建style节点(js文件中添加css)

    ie6 不能 document.createElement('style') 然后append到head标签里.所以就找到这样个好文章 --------------------- 有很多提供动态创建 ...

随机推荐

  1. [转]Windows Shell 编程 第二章 【来源:http://blog.csdn.net/wangqiulin123456/article/details/7987893】

    第二章Shell的结构  “Shell 编程”的大伞之下有大量的API函数和COM接口.这个种类繁多的‘命令’集允许你用不同的方法对Windows Shell进行编程.函数和接口并不是两种提供相同功能 ...

  2. JavaScript高级程序设计(九):基本概念----函数

    一.参数的理解 1.ECMAScript中的参数在内部是用一个数组来表示的.函数接收到的始终是这个数组,而不关心数组中包含多少个参数,即使没有参数也可以. 2.实质上,函数可以通过arguments对 ...

  3. 点击穿透问题(http://www.tuicool.com/articles/6NfaUnM)

    一.click与300ms延迟 移动浏览器提供一个特殊的功能:双击(double tap)放大 300ms的延迟就来自这里,用户碰触页面之后,需要等待一段时间来判断是不是双击(double tap)动 ...

  4. 05_XML的解析_02_dom4j 解析将信息封装到对象中

    [person.xml]要解析的内容 <?xml version="1.0" encoding="UTF-8"?> <students> ...

  5. Java抽奖小程序

    package com.test; import java.awt.Color; import java.awt.Font; import java.awt.event.ActionEvent; im ...

  6. 动态链接库找不到 : error while loading shared libraries: libgsl.so.0: cannot open shared object file: No such file or directory

    问题: 运行gsl(GNU scientific Library)的函数库,用 gcc erf.c -I/usr/local/include -L/usr/local/lib64 -L/usr/loc ...

  7. LinqToExcel常用对象

    1.ExcelQueryFactory对象(1)获取工作表名集合IEnumerable<string> GetWorksheetNames() //获取工作薄中的工作表名 foreach ...

  8. web页面背景色控制

    有一道题要实现输入rgb数值,实现更换页面背景色的功能,如下图所示: 答案: <html> <head> <script type="text/javascri ...

  9. Android 之 悬浮窗

    昨天研究Android的悬浮窗,遇到一个问题,研究了一天,总算找到结症了,原因非常坑人..... 问题是这样的,我想要将悬浮窗展现在桌面或其他应用之上,我的开发机子用的是MIUI,结果发现在机子上无论 ...

  10. Codeforces Round #345 (Div. 1) B. Image Preview

    Vasya's telephone contains n photos. Photo number 1 is currently opened on the phone. It is allowed ...