母版頁上的CSS和圖像

Question

我遇到了一個非常普遍的問題，但未能找到可行的解決方案。

基本上，我使用的是母版頁（/Masterpages/Default.master），其中包括

<link href="../css/style.css" rel="stylesheet" type="text/css />

並且還包括一些具有相同相對鏈接的圖像。

但是，當我將母版頁應用於內容頁（在不同的文件夾級別）時，css格式和圖像會丟失。

無論如何，是否可以使用母版頁動態地解決所有css文件夾級別的鏈接以及圖像到所有內容頁面的鏈接？

提前致謝

更新：

還有另一個問題。 要在瀏覽器和Visual Studio的設計視圖中正確呈現輸出，是很棘手的。

我使用了asp：image解決方案來處理母版頁中的圖像，並通過將母版頁中的css進行兩次鏈接來使其工作，一種使其在VS中呈現，另一種使其可以正確瀏覽網站。

<link href="../css/style.css" rel="stylesheet" type="text/css" />
<link href="<%=ResolveUrl("~/css/style.css")%>" rel="stylesheet" type="text/css" />

Answer 1

最好使用：

<link href="<%=ResolveUrl("~/css/style.css") %>" rel="stylesheet" type="text/css />

因為這可以應付iis應用程序的根，而不像：

<link href="/css/style.css" rel="stylesheet" type="text/css />

Answer 2

您可以使鏈接runat =“ server”並使用波浪號映射來創建相對於站點根的CSS路徑。

<link runat="server" id="siteStyle"
      href="~/css/style.css"
      rel="stylesheet"
      type="text/css" />

CSS中引用的圖像應相對於CSS文件的位置，並且應正確包含CSS文件本身，才能正常解析。 對於頁面上標簽中的圖像，您將需要使用ASP：Image控件，並再次使用代字號映射作為相對於根的路徑。

Answer 3

相當確定這會起作用

<link href="/css/style.css" rel="stylesheet" type="text/css />

/將您帶到網站的根目錄

Answer 4

您可以使用波浪號來使鏈接可從任何地方使用。 這同樣適用於圖像。

<link runat="server" href="~/css/style.css" rel="stylesheet" type="text/css />

Answer 5

CSS中的圖像是相對於它們所引用的文件的。

（這是Internet Explorer中用於PNG修復的“過濾器”規則的例外。在這種情況下，圖像是相對於HTML文檔的。）

Answer 6

是的，問題是materpage使用相對網址加載CSS：

"../css/style.css"

您需要將其更改為站點根目錄（取決於CSS文件的位置），例如：

"/css/style.css"

則所有各種文件夾級別都可以使用相同的網址。

Answer 7

實際上，母版頁將自動為您重新設置css文件的基礎，而無需添加runat =“ server”。 確保您的css文件位於指定文件夾中的一個目錄下。

您可以使用css文件的絕對路徑，但是執行此操作時Visual Studio似乎無法在設計視圖中呈現樣式。 同樣，有時您不知道是否要在虛擬目錄中運行，因此使用絕對路徑並不總是理想的。

另外，請使用從css文件本身到圖像資產的相對鏈接-無論您如何鏈​​接到樣式表，該鏈接都將起作用。

Answer 8

您可能還對研究主題和外觀感興趣。

ASP.NET主題和外觀概述