我正在创建一个 asp.net 网页，一些自动生成的 CSS 覆盖了我的样式表。我不确定属性在哪里可以正确设置值，或者如何禁用我的 Web 应用程序自动生成的 CSS。这是代码。
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="FrontEnd.master.cs" Inherits="pigninja.FrontEnd" %>
<!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 id="Head1" runat="server" >
<title>Title</title>
<link href="../Styles/Styles.css" rel="Stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div id="pageWrapper">
<div id="header"></div>
<div id="navigation">
<asp:Menu ID="Menu1" runat="server" Orientation="Horizontal"
Width="100%" StaticItemFormatString="            {0}  ">
<Items>
<asp:MenuItem NavigateUrl="../Default.aspx" Text="Home" Value="Home">
</asp:MenuItem>
<asp:MenuItem NavigateUrl="../About.aspx" Text="About Me" Value="About Me">
</asp:MenuItem>
<asp:MenuItem NavigateUrl="../Programming.aspx" Text="Programming"
Value="Programming"></asp:MenuItem>
<asp:MenuItem NavigateUrl="../Rants.aspx" Text="Rants" Value="Rants">
</asp:MenuItem>
</Items>
</asp:Menu></div>
<div id ="content"><asp:ContentPlaceHolder ID="Content" runat="server">
</asp:ContentPlaceHolder></div>
<div id="footer"><p>Footer</p></div>
</div>
</form>
</body>
</html>
这是CSS
*
{
font-family: Arial, Sans-Serif;
}
body
{
margin: 0;
background-color:Black;
}
a
{
text-decoration: none;
color: #b30707;
}
a:hover
{
text-decoration: underline;
}
#header
{
background-image: url(../img/header.jpg);
position:relative;
margin:auto;
height: 250px;
}
#pageWrapper
{
width:844px;
margin: auto;
background-color:#ccc;
}
#navigation
{
width: auto;
text-align:center;
height: 36px;
padding-top: 15px;
padding-left: 17px;
background-color: #9C989A
}
#content
{
border-style:solid;
border-width: 2px;
border-color: #b30707;
padding: 15px;
}
#footer
{
text-align:center;
}
我添加此行是为了避免菜单控件未正确跨越父元素的问题。我计划在 CSS 按预期工作后将其删除。
StaticItemFormatString="            {0}  "
这是根据请求呈现的代码。
<!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 id="Head1"><title>
Title
</title><link href="Styles/Styles.css" rel="Stylesheet" type="text/css" /><style type="text/css">
/* <![CDATA[ */
#Menu1 { width:100%; }
#Menu1 img.icon { border-style:none;vertical-align:middle; }
#Menu1 img.separator { border-style:none;display:block; }
#Menu1 img.horizontal-separator { border-style:none;vertical-align:middle; }
#Menu1 ul { list-style:none;margin:0;padding:0;width:auto; }
#Menu1 ul.dynamic { z-index:1; }
#Menu1 a { text-decoration:none;white-space:nowrap;display:block; }
#Menu1 a.static { padding-left:0.15em;padding-right:0.15em; }
#Menu1 a.popout { background-image:url("/WebResource.axd? d=xjCds24on9XfE0DBajC4vRjqPwEZnPWc2oYtv118cqG5ViUhvTqbbGX- kFRHBgPTk01twuHMnUgYwxiSOFVm4FdDFd1DRzkQC6dPTjhsTD81&t=634773918900000000");background- repeat:no-repeat;background-position:right center;padding-right:14px; }
/* ]]> */
</style></head>
<body>
<form method="post" action="" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTEwMDUyNjYzMjhkZMqkGL/k2S4bUfDNJETNEEgreeQwj//8qMPH/3Jfp1j8" />
</div>
<script src="/WebResource.axd?d=JhWUzx8WLq0au7xqJj_xdb8v-NEKpWcJ1R4twSIpfaW-Hg2- LRc2Fqrqmb31NCEsThyJFzieaKJwGQI8BjHNp9tN4M8jNjJ1fHS70aQkb681&t=634773918900000000" type="text/javascript"></script>
<div id="pageWrapper">
<div id="header"></div>
<div id="navigation"><a href="#Menu1_SkipLink"><img alt="Skip Navigation Links" src="/WebResource.axd? d=uVlrphLtejMyCQfMUd5MSwr7OFiIQBNYbtiTqDgsAQmI5_6XjhY8AFmAwPz4RAV7D87YEb3m48XzVHtpmam77PhCI6 AVXXVAbALWvpCcB1w1&t=634773918900000000" width="0" height="0" style="border- width:0px;" /></a><div id="Menu1">
<ul class="level1">
<li><a class="level1" href="Default.aspx">            Home  </a> </li><li><a class="level1" href="About.aspx">            About Me  </a></li><li><a class="level1" href="Programming.aspx">            Programming  </a></li><li><a class="level1" href="Rants.aspx">            Rants  </a> </li>
</ul>
</div><a id="Menu1_SkipLink"></a></div>
<div id ="content">
<p>Content</p>
</div>
<div id="footer"><p>Footer.</p></div>
</div>
<script type='text/javascript'>new Sys.WebForms.Menu({ element: 'Menu1', disappearAfter: 500, orientation: 'horizontal', tabIndex: 0, disabled: false });</script></form>
</body>
</html>
最佳答案
我最终做的是关闭通过属性窗口内联应用的 CSS。更具体地说，我将“IncludeStyleBlock”属性设置为 false。在执行此操作之前，我从 View 源中获取了自动生成的 CSS，并将其放置在样式表中。然后我能够更好地控制CSS，但它并没有解决我的问题。为了解决我的问题，我必须在我的 asp:Menu block 中包含一个 CssClass="menuClass"，如下所示。
<asp:Menu ID="Menu1" runat="server" Orientation="Horizontal"
IncludeStyleBlock="False" StaticEnableDefaultPopOutImage="False" CssClass="menuClass">
然后我依次设置 CSS 属性，如下所示。
.menuClass a.static.highlighted
{
color:Red !important;
text-decoration:underline !important;
}
关于asp.net 超越 CSS 菜单控件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13303484/