VS 2005 與 ASP.NET 2.0 中處理 CSS 樣式表的最佳實踐

本文給讀者一個所有基於母版頁面的網頁自動獲得樣式表的技巧，就是由控制項提供的對相對路徑調整支援。可在母版頁面裡使用這東西輕鬆引用整個專案重用的 .CSS 樣式表檔案，不管專案是相對於根目錄還是子應用程式。

推薦一個可在 ASP.NET 2.0 中利用的技巧：使用 CSS 時，利用母版頁面功能給網站提供統一 UI，在母版頁面一處引用所有樣式表，這樣所有基於此母版頁面的網頁就會自動獲得這些樣式表。

可利用一個技巧是由 <head runat="server"> 控制項提供的相對路徑調整支援。可在母版頁面裡使用這東西輕鬆引用整個專案重用的 .CSS 樣式表檔案，不管專案是相對於根目錄還是子應用程式一部分：

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="Site" %>
<html><head runat="server">
<title>Master Page</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head><body>
<form id="form1" runat="server">
<asp:contentplaceholder id="MainContent" runat="server">
</asp:contentplaceholder>
</form></body></html>

<head> 控制項路徑調整功能然後可取一個 .CSS 樣式表檔案相對路徑，然後在執行時正確輸出其絕對路徑，不管它是相對於根目錄網站還是子應用程式一部分。

然後，網站上頁面可類似下列內容，這些網頁會在執行時與設計時 VS 的 HTML 所見即所得 (WYSIWYG) 設計器裡自動獲得樣式表設定：

<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" Title="Sample Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" Runat="Server">
<h1>Root Web Site Sample</h1>
<a href="/Products">Click here to go to the Products section (note the absolute path) </a>
</asp:Content>

因包含在 .CSS 樣式表檔案中的圖片引用是相對於 .CSS 檔案路徑被瀏覽器引用，而非相對於使用樣式表檔案網頁路徑，可將此行為與上述 <head runat="server"> 邏輯結合，使圖片在根網站與子應用程式兩情形下自動生效，即使後來改變路徑也不會出問題。

透過此方式引用的圖片在 VS 2005 HTML WYSIWYG 設計器裡也會正確顯示，不這樣做的話，VS 2005 有時難決定取得圖片引用的「/」根路徑。