将样式表添加到asp.net（使用Visual Studio 2010）

我想将样式表添加到asp.net web窗体中的母版页。基本上尝试为页面顶部创建一个内联导航菜单。我遇到问题了。我创建了样式表（如果这是一个html网站，我会创建相同的方式），并将其放在下面的目录中。我看不到下面的代码如何显示与样式表的任何关系。将样式表添加到asp.net（使用Visual Studio 2010）

HTML类似，我会

首页
关于
联系

然后我的样式表是这样的......

ul { 
list-style-type:none; 
margin:0; 
padding:0; 
} 

li { 
display:inline; 
padding:20px; 
}

而且CSS会让它显示为内联（顶部）。但我不知道该去哪里。

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %> 

<!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>AR Toolbox</title> 
<asp:ContentPlaceHolder id="Stylesheets" runat="server"> 
    <link rel="Stylesheet" href="/css/master.css" type="text/css" /> 
</asp:ContentPlaceHolder> 
<style type="text/css"> 
    .style1 
    { 
     width: 100%; 
    } 
    .style2 
    { 
     height: 459px; 
    } 
    .style3 
    { 
     width: 100%; 
     height: 100%; 
    } 
    .style6 
    { 
     height: 79px; 
    } 
    .style7 
    { 
     width: 345px; 
     height: 73px; 
    } 
</style> 
</head> 
<body> 
<form id="form1" runat="server"> 
<table class="style1"> 
    <tr> 
     <td style="background-color: #A3A3A3; color: #FFFFFF; font-family: 'Arial Black'; font-size: large; font-weight: bold;" 
      class="style6"> 
      <asp:Menu ID="Menu1" runat="server"> 
       <Items> 
        <asp:MenuItem Text="Home" Value="Home"></asp:MenuItem> 
        <asp:MenuItem Text="About" Value="About"></asp:MenuItem> 
        <asp:MenuItem Text="Compliance" Value="Compliance"> 
         <asp:MenuItem Text="Item 1" Value="Item 1"></asp:MenuItem> 
         <asp:MenuItem Text="Item 2" Value="Item 2"></asp:MenuItem> 
        </asp:MenuItem> 
        <asp:MenuItem Text="Tools" Value="Tools"></asp:MenuItem> 
        <asp:MenuItem Text="Contact" Value="Contact"></asp:MenuItem> 
       </Items> 
      </asp:Menu> 
     </td> 
    </tr> 
    <tr> 
     <td style="background-color: #A3A3A3; color: #FFFFFF; font-family: 'Arial Black'; font-size: large; font-weight: bold;" 
      class="style6"> 
      <img alt="South University'" class="style7" 
       src="file:///C:/Users/jnewnam/Documents/Visual%20Studio%202010/WebSites/WebSite1/img/suo_n_seal_hor_pantone.png" /></td> 
    </tr> 
    <tr> 
     <td class="style2"> 
      <table class="style3"> 
       <tr> 
        <td> 
         &nbsp;</td> 
       </tr> 
      </table> 
     </td> 
    </tr> 
    <tr> 
     <td style="color: #FFFFFF; background-color: #A3A3A3"> 
      This is the footer.</td> 
    </tr> 
</table> 
</form> 
</body> 
</html>

来源

2013-04-23 JPC Solutions

把'css'文件放在' ....之间css文件' 不要在'aspx'页面中使用设计视图，因为它会自动创建像'style1'，'style2'这样的类......只需创建单独的CSS文件并按照我的建议放置它。如果是'display：inline'，那么你应该在'' – 2013-04-23 14:38:08

这里有几件事。

首先，你在3个地方定义你的CSS！

符合，在头部和外部。我建议你只选择一个。我会建议外部。

我建议你在你的ASP形式从

<td style="background-color: #A3A3A3; color: #FFFFFF; font-family: 'Arial Black'; font-size: large; font-weight: bold;" 
     class="style6">

更新您的代码，以这样的：

<td class="style6">

，然后更新你的CSS太

.style6 
    { 
     height: 79px; background-color: #A3A3A3; color: #FFFFFF; font-family: 'Arial Black'; font-size: large; font-weight: bold; 
    }

这消除了内联。

现在，从webForm的头部移动它。

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %> 

<!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>AR Toolbox</title> 
    <link rel="Stylesheet" href="css/master.css" type="text/css" /> 
</head> 
<body> 
<form id="form1" runat="server"> 
<table class="style1"> 
    <tr> 
     <td class="style6"> 
      <asp:Menu ID="Menu1" runat="server"> 
       <Items> 
        <asp:MenuItem Text="Home" Value="Home"></asp:MenuItem> 
        <asp:MenuItem Text="About" Value="About"></asp:MenuItem> 
        <asp:MenuItem Text="Compliance" Value="Compliance"> 
         <asp:MenuItem Text="Item 1" Value="Item 1"></asp:MenuItem> 
         <asp:MenuItem Text="Item 2" Value="Item 2"></asp:MenuItem> 
        </asp:MenuItem> 
        <asp:MenuItem Text="Tools" Value="Tools"></asp:MenuItem> 
        <asp:MenuItem Text="Contact" Value="Contact"></asp:MenuItem> 
       </Items> 
      </asp:Menu> 
     </td> 
    </tr> 
    <tr> 
     <td class="style6"> 
      <img alt="South University'" class="style7" 
       src="file:///C:/Users/jnewnam/Documents/Visual%20Studio%202010/WebSites/WebSite1/img/suo_n_seal_hor_pantone.png" /></td> 
    </tr> 
    <tr> 
     <td class="style2"> 
      <table class="style3"> 
       <tr> 
        <td> 
         &nbsp;</td> 
       </tr> 
      </table> 
     </td> 
    </tr> 
    <tr> 
     <td style="color: #FFFFFF; background-color: #A3A3A3"> 
      This is the footer.</td> 
    </tr> 
</table> 
</form> 
</body> 
</html>

现在，在一个叫master.css（在你的CSS文件夹中）添加新文件

ul { 
list-style-type:none; 
margin:0; 
padding:0; 
} 

li { 
display:inline; 
padding:20px; 
} 
.style1 
{ 
    width: 100%; 
} 
.style2 
{ 
    height: 459px; 
} 
.style3 
{ 
    width: 100%; 
    height: 100%; 
} 
.style6 
{ 
    height: 79px; background-color: #A3A3A3; color: #FFFFFF; font-family: 'Arial Black'; font-size: large; font-weight: bold; 
} 
.style7 
{ 
    width: 345px; 
    height: 73px; 
}

来源

2013-04-23 14:38:06 Dave

中列出你的内联样式标签当我按照你所说的去做时，我得到这个错误，我不明白为什么？ [链接] https://www.box.com/s/bu7q6q7yp37csf85xylp – 2013-04-23 17:55:08

甚至在我做你的建议之前，当我提交页面时，它只显示一个目录列表，而不是网站本身。思考？ – 2013-04-23 17:56:56

目录列表可能意味着默认文档与您提供的不同 – Dave 2013-04-23 23:18:42

加入你的风格在这里：

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="BSC.SiteMaster" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head runat="server"> 
    <title></title> 
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" /> 
    <link href="~/Styles/NewStyle.css" rel="stylesheet" type="text/css" /> 

    <asp:ContentPlaceHolder ID="HeadContent" runat="server"> 
    </asp:ContentPlaceHolder> 
</head>

然后在页面：

<asp:Table CssClass=NewStyleExampleClass runat="server" >

来源

2015-04-16 14:48:27 Mario

您唯一要做的就是添加在CSHTML文件，在头，下面一行：

 @Styles.Render("~/Content/Main.css")

整个头部看起来somethink这样的：

<head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <title>HTML Page</title> 
     @Styles.Render("~/Content/main.css") 
    </head>

希望它可以帮助！

来源

2016-05-23 14:20:07 SomeAnonymousPerson

将样式表添加到asp.net（使用Visual Studio 2010）

回答

相关问题