程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> .NET網頁編程 >> ASP.NET >> 關於ASP.NET >> 在VS 2005和ASP.NET 2.0中處理CSS樣式表

在VS 2005和ASP.NET 2.0中處理CSS樣式表

編輯:關於ASP.NET

本文給讀者一個所有基於母板頁的網頁自動獲得樣式表的技巧,就是由控件提供的對相對路徑調整的支持。可以在母板頁裡使用這個東西來輕松地引用一個在整個項目裡重用的.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有時會有困難決定獲取圖片引用的“/”根路徑。

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved