CSS如何与ASP.NET Web控件一起使用？

Let's say I have an aspx page with a Menu web control. The menu web control renders as a html table on browser. My plan is to add css styles on the aspx page which will be sent to the browser. Let's say I add the following style to the aspx page

假设我有一个带有菜单Web控件的aspx页面。菜单Web控件在浏览器上呈现为html表。我的计划是在aspx页面上添加css样式,这些样式将被发送到浏览器。假设我将以下样式添加到aspx页面

td
{
    background-color: Red;
}

This style gets sent to the browser together with the rendered html table

此样式与呈现的html表一起发送到浏览器

<table>
   <tr>
       <td>...</td>
       <td>...</td>
   </tr>
   <tr>
       <td>...</td>
       <td>...</td>
   </tr>
</table>

But the style is not applied. I'm really puzzled why this is the case. In general how do we predict the effect of CSS on ASP.NET wen controls?

但风格并未适用。我真的很困惑为什么会这样。一般来说,我们如何预测CSS对ASP.NET文件控件的影响?

3 个解决方案

#1

The menu overrides some styles.

菜单会覆盖某些样式。

Most ASP.NET controls expose a CssClass property, which you should use to assign styles to the control.

大多数ASP.NET控件都公开一个CssClass属性,您应该使用该属性为控件分配样式。

#2

This is not a ASP.NET issue. Yes you're correct that CSS does not apply to server side controls as they appear in your ASPX/ASCX markup. They apply to the generated HTML. Most ASP.NET controls have a property CssClass where setting CssClass="n" which will add class="n" to some html tags they generate. So you can write css rules to target them with .n { ... }

这不是ASP.NET问题。是的,你是正确的,CSS不适用于服务器端控件,因为它们出现在ASPX / ASCX标记中。它们适用于生成的HTML。大多数ASP.NET控件都有一个属性CssClass,其中设置CssClass =“n”,它会将class =“n”添加到它们生成的某些html标记中。所以你可以编写css规则来定位它们.n {...}

But anyhow, in this case something else is going on which you haven't included in the question. I recommend grabbing Firebug, target the <TD> you expect to be styled, and see what CSS styles are being applied. Debug from there.

但无论如何,在这种情况下,你还没有包含其他问题。我建议抓住Firebug,定位你希望设计样式的,看看正在应用的CSS样式。从那里调试。

Maybe some other CSS rule is taking priority. Maybe your CSS rules were mistyped, or not actually included. Firebug is a good tool for tracking down these kind of mistakes.

也许其他一些CSS规则优先考虑。也许你的CSS规则输错了,或者实际上没有。 Firebug是一个很好的工具,可以追踪这些错误。

To demonstrate that something else is going on, I verified your sample HTML+CSS works:

为了证明其他内容正在发生,我验证了您的示例HTML + CSS的工作原理:

<html>

<style>
    td { background-color: blue }
</style>

<body>

<table>
   <tr>
       <td>...</td>
       <td>...</td>
   </tr>
   <tr>
       <td>...</td>
       <td>...</td>
   </tr>
</table>

</body>
</html>

#3

Maybe you can use in div and you can give a style from div like:

也许你可以在div中使用,你可以从div给出一个样式:

style:

#div td{ .... }

html:

<div id="myDiv">
 <table>
  <tr>
   <td></td>
  </tr>
 </table>
</div>

#1