ASP.NET在主题中添加CSS文件
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:LabelID="lblUserName"Text="用户名:"AssociatedControlID="txtUserName"runat="server"></asp:Label><br /><asp:TextBoxID="txtUserName"runat="server"></asp:TextBox><br /><br /><asp:LabelID="lblContactNumber"Text="联系电话:"AssociatedControlID="txtContactNumber"runat="server"></asp:Label><br /><asp:TextBoxID="txtContactNumber"runat="server"></asp:TextBox><br /><br /><asp:ButtonID="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的属性窗口及可视化设计功能对控件进行设置,最后再将控件代码复制到外观文件中并做适当的修改。
转载于:https://www.cnblogs.com/PearlRan/p/4833061.html
ASP.NET在主题中添加CSS文件相关推荐
- asp.net 2.0 主题中多CSS文件引用
asp.net 2.0 中引入了很多新特性, "主题"应用就是其中之一. 在方便多"主题"样式切换的同时也存在一些小问题. 常常一些网页设计者们喜欢按" ...
- 如何在React JS组件和React JS App中添加CSS样式?
In this tutorial, we will only work with CSS styles. Please ensure you have basic knowledge of HTML, ...
- html文件中添加css的方式
在html文件中经常会使用css来使自己的页面更加美观. 以下总结在html中添加css的三种方式: 1. 外部样式表 css保存在.css文件中 在html中使用引用 对于外部样式表,需要创建一个. ...
- asp.net后台代码动态添加JS文件和css文件的引用
首先添加命名空间 using System.Web.UI.HtmlControls; 代码动态添加css文件的引用 HtmlGenericControl myCss = new HtmlGeneric ...
- 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.Ch ...
- wordpress谷歌字体_如何以“正确”的方式在WordPress主题中添加Google Web字体
wordpress谷歌字体 Google fonts are amazing free resource for web designers. In WPBv4, we have started us ...
- Hexo next主题中添加播放器Aplayer
Hexo next主题中添加播放器Aplayer 下载 首先,先下载Aplayer源码:APlayer dist文件夹 再将文件中的dist文件夹复制到路径:blog/themes/next/sour ...
- HTML添加css文件和js文件
HTML 定义了网页的内容 CSS 描述了网页的布局 JavaScript 控制了网页的行为 一.链接三个文件: 1.HTML文件 <html><head><link r ...
- 如何在html添加css样式表,网页中添加CSS样式表的四种方式
本文向大家描述一下网页中添加CSS样式表的四种方式,首先让我们来看一下CSS样式表文件的优势,主要体现在两个方面,请看下文详细介绍. CSS样式表文件的优势表现在两个方面: ***,简化了网页的格式代 ...
最新文章
- CF5A Chat Server's Outgoing Traffic(字符串模拟,find函数的应用)难度⭐
- 19.04.27--作业 打字游戏
- C++走向远洋——61(项目一、排序函数模板)
- 玩转Go语言之特殊的语法
- 如何把SAP Kyma和SAP Cloud for Customer连接起来
- nssl1230-序列【位运算】
- 查看linux硬核上的线程,给大家分享一点基础硬核知识哦 Linux的基础指令操作Lin...
- oracle还原 ora 39111,在server2008上进行impdp引发的(ORA-39070)的问题
- 查看嵌入式设备的CPU频率
- php 实现错字检查,PHP每日一练:编写写字符串检查函数
- java list排序 sort_Java排序方法sort的使用详解
- (小例子)点击图标/链接发起QQ临时会话
- java bartender_BarTender Web Print Server可用的打印方法
- linux的mysql占用cpu过高_关于在Linux环境下,Mysql占用CPU使用率100%的优化
- m3u8.sqlite转mp4(txkt,文末附程序下载地址)
- vue项目使用svg图片
- 微信小程序实训day03
- STM32应用开发实践教程:基于 RS-485 总线的多机通信应用开发
- Arduino宿舍门禁,实现刷卡(NFC)开门
- golang 时间missing Location in call to Date
热门文章
- ios页面间传递参数四种方式
- python队列来做什么_简单介绍python的双向队列
- hibernate mysql自定义变量_hibernate 跟 MySql in的参数变量
- go并发编程-理解不同并发场景下的go原语
- (127)FPGA面试题-介绍FPGA 门控时钟
- (85)Verilog HDL:板间信号同步
- 计算机系统设计 片上系统 pdf,一种基于过程级编程模型的可重构片上系统设计方法.pdf...
- python支付系统_GitHub - zhuf/alipay_python: 支付宝 alipay python接口,支持担保交易,即时到帐和自动发货接口...
- python重命名文件夹下所有文件_Python3.4.3重命名当前文件夹下的文件
- 2021-03-09了解示隐式接口和编译时多态