6.3在主题中添加CSS
在主题中添加CSS
如果在主题文件夹中添加CSS文件，则在页面应用主题时也会自动应用CSS。
SimpleStyle\SimpleSheet.css
页面 ShowSimpleCSS.aspx
页面显示：
注意：
使用CSS的好处是使加载页面的速度更快。
尽量不要通过修改控件属性来对控件进行格式化。使用<style>
1、在主题中添加多个CSS
<link href="App_Themes/StyleTheme/SimpleSheet.css" type="text/css" rel="stylesheet" />
<link href="App_Themes/StyleTheme/SimpleSheet2.css" type="text/css" rel="stylesheet" />
<link href="App_Themes/StyleTheme/SimpleSheet3.css" type="text/css" rel="stylesheet" />
2、使用CSS改变页面布局
使用CSS可以改变页面布局，所以使用主题可以控制页面布局
Float.css 放在主题中
html
{
background-color:Silver;
font:14px Arail,Sans-Serif;
}
#div1
{
float:left;
width:25%;
margin:15px;
padding:10px;
background-color:White;
}
#div2
{
float:left;
width:25%;
margin:15px;
padding:10px;
background-color:White;
}
#div3
{
float:left;
width:25%;
margin:15px;
padding:10px;
background-color:White;
}
ShowLayout.aspx
2011-4-28 15:02 danny
如果在主题文件夹中添加CSS文件，则在页面应用主题时也会自动应用CSS。
SimpleStyle\SimpleSheet.css
html {
background-color:Gray;
font:14px Georgia,Serif;
}
.content
{
margin:auto;
width:600px;
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;
}
页面 ShowSimpleCSS.aspx
<%@ Page Language="C#" Theme="StyleTheme" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div class="content">
<h1>
Registration Form</h1>
<asp:Label ID="lblFirstName" AssociatedControlID="txtFirstName" runat="server" />
<br />
<asp:TextBox ID="txtFirstName" runat="server" />
<br />
<br />
<asp:Label ID="lblLastName" Text="Last Name:" AssociatedControlID="txtLastName" runat="server" />
<br />
<asp:TextBox ID="txtLastName" runat="server" />
<br />
<br />
<asp:Button ID="btnSubmit" Text="Submit Form" CssClass="button" runat="server" />
</div>
</form>
</body>
</html>
页面显示：
注意：
使用CSS的好处是使加载页面的速度更快。
尽量不要通过修改控件属性来对控件进行格式化。使用<style>
1、在主题中添加多个CSS
<link href="App_Themes/StyleTheme/SimpleSheet.css" type="text/css" rel="stylesheet" />
<link href="App_Themes/StyleTheme/SimpleSheet2.css" type="text/css" rel="stylesheet" />
<link href="App_Themes/StyleTheme/SimpleSheet3.css" type="text/css" rel="stylesheet" />
2、使用CSS改变页面布局
使用CSS可以改变页面布局，所以使用主题可以控制页面布局
Float.css 放在主题中
html
{
background-color:Silver;
font:14px Arail,Sans-Serif;
}
#div1
{
float:left;
width:25%;
margin:15px;
padding:10px;
background-color:White;
}
#div2
{
float:left;
width:25%;
margin:15px;
padding:10px;
background-color:White;
}
#div3
{
float:left;
width:25%;
margin:15px;
padding:10px;
background-color:White;
}
ShowLayout.aspx
<%@ Page Language="C#" Theme="Simple5" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div id="div1">
First div content
<br />
First div content
<br />
First div content
<br />
First div content
<br />
First div content
<br />
First div content
</div>
<div id="div2">
Second div content
<br />
Second div content
<br />
Second div content
<br />
Second div content
<br />
Second div content
<br />
Second div content
</div>
<div id="div3">
Third div content
<br />
Third div content
<br />
Third div content
<br />
Third div content
<br />
Third div content
<br />
Third div content
</div>
</form>
</body>
</html>
2011-4-28 15:02 danny