How does CSS work with ASP.NET web controls?
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
td
{
background-color: Red;
}
This style gets sent to the browser together with the rendered html table
<table>
<tr>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
</tr&g开发者_如何学Ct;
</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?
The menu overrides some styles.
Most ASP.NET controls expose a CssClass property, which you should use to assign styles to the control.
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 { ... }
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.
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.
To demonstrate that something else is going on, I verified your sample HTML+CSS works:
<html>
<style>
td { background-color: blue }
</style>
<body>
<table>
<tr>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
</tr>
</table>
</body>
</html>
Maybe you can use in div and you can give a style from div like:
style:
#div td{ .... }
html:
<div id="myDiv">
<table>
<tr>
<td></td>
</tr>
</table>
</div>
加载中,请稍侯......
精彩评论