6.3在正题中添加CSS _HTML/CSS

6.3在主题中添加CSS
在主题中添加CSS

如果在主题文件夹中添加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