如何在 ASP.NET 应用程序中使用 CSS答案

【问题标题】：How to use CSS in ASP.NET application如何在 ASP.NET 应用程序中使用 CSS
【发布时间】：2011-05-01 03:45:18
【问题描述】：

我想知道如何在 ASP.NET 中使用 CSS。

如果我有一组 CSS 文件并将我的母版页链接到它们，如何利用它们使我的应用程序看起来更好。我不是在谈论 CSS 本身，而是在谈论如何在任何 ASP.NET 页面的源代码中使用它的元素。

我正在寻找建议、资源、网站或意见。

【问题讨论】：

我不知道为什么要投反对票，先讨论问题再投反对票
@user41834 我放置它（只需单击它），然后将其删除，但系统有某种缓存。
如果你想要体面的答案，你必须解释“如何利用它们使我的应用程序看起来不错”的确切含义。你的意思是在 ASP 中使用 CSS 的最佳实践是什么.NET 控件？您的意思是如何将内容与设计分开？开始赏金很棒，但人们目前对你真正想要什么一无所知..
是的，我想知道在 ASP.NET 控件中使用 CSS 的最佳实践？
有时我有 CSS 文件，但我不知道如何在 ASP.net 源代码中有效地使用它们来使我的网站看起来不错，我也想知道在构建我的网站时我应该告诉我的设计师做什么来帮助我使我的网站看起来不错？还有什么更好；在 ASP.net 中完成所有工作后或在此期间使用 Css 文件....

标签： asp.net html css

【解决方案1】：

在控件中有一个属性CssClass

<asp:Button ID="Button1" CssClass="Red" runat="server" Text="Button" OnClientClick='ani();'/>

【讨论】：

谢谢我知道这一点，我谈论如何最大限度地从 CSS 文件中受益..

【解决方案2】：

除了@anishmarokey 的回答，不要忘记所有的 ASP.NET 标记都将在浏览器上呈现为 HTML，因此您可以对 HTML 做任何可以做的事情。这甚至包括向所有元素添加诸如style 之类的属性（即使智能感知不会提示它）。这将在客户端正确呈现为 HTML 样式属性。

另外CssClass只能用于ASP元素，其他都需要style

【讨论】：

【解决方案3】：

根据您的问题 + cmets，我认为这都是关于 CSS 的。

查看css Zen Garden：

演示通过基于 CSS 的设计可以在视觉上完成什么。从列表中选择任何样式表以将其加载到此页面中。

他们有 210 个备用 CSS 设计，都使用相同的未修改的 html。看看其他设计，这是一个很好的例子，可以将设计方面保持在 CSS 中。

【讨论】：

【解决方案4】：

好吧，假设您想要快速而有效的答案，我将分享我对如何使用 CSS 文件和一般 CSS 的看法，它与控件或 ASP.NET 语言没有真正的关系。

首先，请平面设计师为您提供网站应该外观的草图：每个元素的位置（菜单、徽标、内容）、每个元素的外观和感觉（颜色？如果需要图片？）也许最重要的是，整个网站统一的字体系列和颜色：可能有几种颜色，但超过三种或四种会变得过于凌乱和嘈杂。

创建草图后，首先在页面中放置空占位符（或使用虚拟文本），然后为每个占位符指定自己的类，稍后您将在其中定义占位符中的内容的外观。如果您确定占位符元素的设计是唯一的并且不会被其他元素“共享”，您也可以稍后使用占位符元素的 ID。

所有这一切的“核心”是通过定义正确的样式使所有内容都在草图中呈现。例如，如果您需要右侧的菜单以及左侧具有特定颜色的链接和内容，那么您在 HTML 部分（在您的情况下为 .aspx 或 .ascx）中所需要的只是：

<div id="MainContents">contents here</div>
<div id="MainMenu">menu links come here</div>
<div class="clear"></div>

然后在 CSS 文件中：

#MainContents { float: left; width: 700px; padding: 10px; }
#MainMenu { float: right; width: 300px; padding: 5px; }
#MainMenu a { color: #e01010; }
.clear { clear: both; }

使用 float 时需要“clear”部分，只是一个具有 clear: both 样式的空 div。

就是这样，简而言之......如果你愿意，我会详细说明具体部分。

关于 ASP.NET 控件，如果多个控件使用同一个 CSS 文件，并且该 CSS 文件不是对所有页面“全局”的，则可以使用此类代码仅包含一次 CSS 文件：

if (!Page.ClientScript.IsClientScriptBlockRegistered(this.Page.GetType(), "MyCssFile"))
    Page.ClientScript.RegisterClientScriptBlock(this.Page.GetType(), "MyCssFile", "<link href=\"MyCssFile.css\" rel=\"stylesheet\" type=\"text/css\" />", false);

此代码放置在控件的 Page_Load 中，即使页面中有 20 个控件实例，也只会包含一次 CSS 文件。

【讨论】：

这太棒了，还有两件事：第一：：皮肤文件呢？它们是否被认为是 CSS 文件的补充？何时使用它们以及何时避免使用它们？其次::我想要更多解释如何利用 div 或 span 在 ASPX 页面中使用 Css 文件..
皮肤文件是一种“服务器端 CSS 文件”，因为它定义了服务器端控件的外观和感觉。它不是 CSS 文件的补充，它可以作为主题的一部分并排出现。当您想让用户选择网站的外观和感觉时使用它，也就是主题。看不到任何避免皮肤文件的理由。 DIV 和 SPAN 是 HTML 的基本元素，是构建 HTML 墙的砖块。通过使用 DIV（通用容器，可以包含任何其他内容，包括其他 DIV）和 SPAN（只能包含内联数据）包装您的内容，您可以控制此内容的外观。

【解决方案5】：

其他人已经解释了 CssClass 与 Web 控件的用法。在我看来，一个重要的用途是在皮肤文件中的使用。如果您在外观文件中使用 CssClass 映射 Web 控件的所有方面，您将获得一个主要依赖于一个外观文件和相关 CSS 的布局。

Here 是我的一个 SO 问题，其中包含菜单控件的代码示例。

【讨论】：

【解决方案6】：

CSS 的所有好处都已被其他人列出，但我在想为什么您在母版页中添加了许多 CSS 文件？

虽然CSS 文件是图形库并且在第一次访问时被发送到浏览器，但仍然将许多CSS 文件绑定到母版页会降低您的网站速度。找到问题的答案后，请考虑删除不必要的问题。

【讨论】：

【解决方案7】：

所有答案的补充：

同时考虑 CSS 缩小。 Css/javascript 缩小意味着如果您在运行时有例如 6 个 css 文件，它们将全部合并为一个，并且浏览器将对您的 css 发出一个请求而不是 6 个。这特别有用，因为您的 css 文件数量正在增长浏览器同时支持有限数量的请求。

对于 asp.net，我使用过这个库，它适用于 css 和 javascript：

http://combres.codeplex.com/

【讨论】：