逐步解說：使用現有的 CSS 檔

發行項
10/22/2014

更新：2007 年 11 月

本逐步解說介紹 Visual Studio 2008 的階層式樣式表 (CSS) 功能。逐步引導您建立及修改一個內含雙欄式的頁面配置。本逐步解說同時提供建立新網頁及新階層式樣式表的基本技巧。

此逐步解說會說明以下工作：

建立檔案系統網站。
使用 Visual Web Developer 的 CSS 功能。
使用 CSS 建立一個雙欄式的頁面配置。

注意事項：

本逐步解說將說明逐步解說：建立和修改 CSS 檔未提及之 Visual Studio 2008 的其他功能。

注意事項：
本逐步解說將說明逐步解說：建立和修改 CSS 檔未提及之 Visual Studio 2008 的其他功能。

必要條件

您需要下列元件才能完成此逐步解說：

Visual Studio 2008 或 Microsoft Visual Web Developer Express 版。如需下載資訊，請參考 Microsoft Visual Studio Express Editions 網站 (英文)。
.NET Framework 3.5 版。
可加入至網頁的影像。實際影像不重要，本影像僅用以說明定位功能。

建立網站

在這部分的逐步解說中，您要建立網站並在其中加入頁面。

如果您已在 Visual Web Developer 中建立網站 (例如，依照逐步解說：在 Visual Web Developer 中建立基本 Web 網頁中的步驟)，則您可使用該網站，並跳至本逐步解說稍後的「加入 HTML 項目及 CSS 檔」。否則，請依照下列步驟建立新的網站。

若要建立新的檔案系統網站

開啟 Visual Web Developer。
在 [檔案] 功能表上，按一下 [新網站]

[新網站] 對話方塊便會顯示。
請在 [Visual Studio 安裝的範本] 下方，按一下 [ASP.NET 網站]。
在 [位置] 方塊中，選取 [檔案系統]，然後輸入資料夾名稱，網站的頁面將存放在此資料夾中。

例如，輸入下列的資料夾名稱：C:\CSSWebSite
在 [語言] 清單中，按一下 [Visual Basic] 或 [Visual C#]。

您選擇的程式語言將成為網站的預設值，不過您可以為每個頁面分別設定程式語言。
按一下 [確定]。

Visual Web Developer 會建立資料夾和名為 Default.aspx 的新頁面。

加入 HTML 項目及 CSS 檔

本節提供一組項目讓您專注於格式化及樣式設定工具，不需建立項目來設定樣式。您可以將這些項目複製並貼到頁面上。程式碼包含以 div 項目組成的段落，各項目內有橫幅、左右提要欄位區段、主要內容區段及頁尾。這些簡單的項目包含您可處理的文字及項目 ID。在某些情況下，有些項目包含 CSS 類別，供您使用設定頁面上特定項目的樣式。

加入 HTML 項目

本節加入您要處理的內容。本頁面由一個橫幅 (包含文字及一個搜尋方塊)、一個頁尾及三個文字段落組成。頁面的主要內容位於最後一個文字區段。

將 HTML 項目加入至頁面

在 [來源] 檢視中開啟 Default.aspx 頁面。

將下列程式碼加入至 <form> 項目之後。

<div id="pagecontainer">
<div id="banner">
<h1>AdventureWorks Styling Page</h1>
<h2>Making CSS Styling Easier in Design View</h2>
<div id="search">Find:<input id="searchbox" type="text" />
<input id="searchbutton" type="button" value="Go" />
</div>
</div>
<div id="leftsidebar" class="column">
<h3>Matters of the Web</h3>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur in sem. Vivamus adipiscing vulputate lacus. Sed enim 
lorem, fringilla eget, nonummy sed, ullamcorper sit amet, diam. Sed a justo. Curabitur quis nibh sit amet nunc malesuada 
rutrum.</p>
</div>
<div id="rightsidebar" class="column">
<h3>Matters of the Web</h3>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur in sem. Vivamus adipiscing vulputate lacus. Sed enim 
lorem, fringilla eget, nonummy sed, ullamcorper sit amet, diam. Sed a justo. Curabitur quis nibh sit amet nunc malesuada 
rutrum.</p>
</div>
<div id="maincontent" class="column">
<h2>Matters of the Web</h2>
<p> Pellentesque mattis tincidunt ipsum. Donec tempus, nunc vitae rhoncus imperdiet, eros turpis accumsan risus, ut luctus ipsum 
lacus a felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean convallis euismod 
nulla. Suspendisse potenti. Donec in mi nec odio tincidunt luctus. Donec euismod, mauris cursus molestie convallis, quam 
pede tempus magna, mollis dapibus quam est et magna. Aenean eros massa, elementum vehicula, dapibus eget, lobortis non, 
mauris. Vivamus nisl ante, interdum eget, sagittis vel, scelerisque nec, magna. Praesent placerat nibh vel metus viverra 
tincidunt.</p>
<asp:Image ID="Image1" />
<p>Fusce magna urna, gravida non, sodales vehicula, consequat ac, lacus. Ut sed eros sit amet neque malesuada 
malesuada. Fusce porttitor cursus eros. Maecenas libero odio, convallis vel, tristique id, sodales vel, leo. Curabitur nibh 
neque, interdum eget, convallis id, adipiscing nec, risus. Suspendisse rutrum dui sed urna. Pellentesque leo felis, tempor eu, 
convallis venenatis, auctor vitae, justo. In at massa.</p>
</div>
<div id="footer">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit 2007.</p>
</div>
</div>

儲存 Web 網頁。
切換至 [設計] 檢視，查看預設格式化。

加入 CSS 檔

本節中，您要加入階層式樣式表 (.css 檔)，來指定您剛剛加進頁面中的項目的格式及樣式。樣式表會併用 ID 型及類別型樣式規則。

加入 CSS 檔

在 [方案總管] 中，以滑鼠右鍵按一下網站名稱，然後按一下 [加入新項目]。

[加入新項目] 對話方塊便會出現。
在 [Visual Studio 安裝的範本] 下，按一下 [樣式表]。
在 [名稱] 方塊中，輸入 Layout.css，然後按一下 [加入]。

編輯器會開啟一個新的樣式表，內含一個 body 樣式規則。

移除 body 樣式規則，然後把下列規則貼到檔案上。

#pagecontainer {
    width: 800px;
}
#banner {
    height: 126px;
    padding-top: 18px;
    background-color: #DD6B26;
}
#search {
    width: 254px;
    position: absolute;
    top: 115px;
    left: 545px;
    font-family: "Lucida Sans";
    font-size: small;
    color: #930626;
}
#leftsidebar {
    width: 188px;
    float: left;
    padding-right: 10px;
}
#rightsidebar {
    width: 238px;
    float: right;
    padding-left: 6px;
}
#maincontent {
    border-left: 1px solid #DD6B26;
    margin-left: 203px;
    margin-right: 260px;
    padding-left: 13px;
    padding-right: 13px;
}
#footer {
    text-align: center;
    background-color: #DD6B26;
}
h1 {
    font-family: "Lucida Calligraphy";
    font-size: x-large;
    font-weight: bold;
    color: #930626;
    text-align: center;
    height: 42px;
    margin-bottom: 0px;
}
h2 {
    font-family: "Lucida Sans";
    font-variant: small-caps;
    font-size: large;
    color: #307630;
    font-weight: bold;
    text-align: center;
    margin-bottom: 0px;
    margin: 0;
    padding: 0;
}
p {
    font-family: "Palatino Linotype";
    font-size: medium;
}

儲存檔案。

將樣式規則加入至樣式表

使用現有 CSS 樣式表時，可以用 [管理樣式] 視窗來變更樣式表內的樣式規則。本逐步解說中，您將修改頁面，把原來三欄式的配置改成雙欄式的配置。之後，您要移除套用至原始配置的樣式。

移除右側欄位並重新設定樣式

如果要把頁面改成雙欄式的配置，請移除建立右側欄位的程式碼。然後重新設定其他項目的樣式，以建立雙欄式的配置。

移除右側欄位的程式碼並進行格式化

開啟或切換至 Default.aspx 網頁。
切換至 [設計] 檢視。
從 [方案總管] 中將您剛才建立的 .css 檔拖放至頁面上。

如此即建立 .css 檔與目前頁面間的連結。頁面會變更以反映出 .css 檔定義的樣式。
切換至 [原始碼] 檢視。
刪除以 <div id="rightsidebar" class="column"> 開頭的 div 項目。
儲存檔案。
按一下 [格式] 功能表上的 [CSS 樣式]，然後按一下 [管理樣式]。

[管理樣式] 視窗隨即出現 (根據預設，此視窗會停駐)。
在 [管理樣式] 視窗中，以滑鼠右鍵按一下 #rightsidebar 樣式，然後按一下 [刪除]。

注意事項：

#rightsidebar 樣式的圖示沒有圈起來，表示頁面已不再使用此樣式，因此可移除。
在 [管理樣式] 視窗中，以滑鼠右鍵按一下 #maincontent 樣式，然後按一下 [修改樣式]。

[修改樣式] 對話方塊隨即出現。
按一下 [分類] 下的 [方塊]。
在 [邊界] 中，將 [右] 方塊的值改為 0。
按一下 [確定]。
切換至 [設計] 檢視。現在您有雙欄式的配置了。
儲存檔案。

注意事項：
#rightsidebar 樣式的圖示沒有圈起來，表示頁面已不再使用此樣式，因此可移除。

加入影像

設定影像樣式之前，您必須將影像加入專案，並設定影像的 ImageUrl 屬性。

將影像加入至專案

在 [方案總管] 中，以滑鼠右鍵按一下網站名稱，然後按一下 [加入現有項目]。

[加入現有項目] 對話方塊隨即出現。
選取影像檔，然後按一下 [加入]。

影像加入專案後，您必須將影像指派給 Image 控制項。

將影像指派給影像控制項

開啟或切換至 Default.aspx 檔。
切換至 [設計] 檢視，然後選取 Image 控制項。
在 [屬性] 視窗中，將 Image 控制項的 ImageUrl 屬性設為新加入之影像檔的 URL。

加入樣式規則以格式化影像

如果要使影像與文字更流暢，可以讓影像在主要欄位的左緣或右緣浮動，並加入邊框距離，把影像中的文字移開。

將影像加入至配置

開啟或切換至 Layout.css 檔。

將下列程式碼加入至樣式表。

img {
    margin: 0px;
    border: 1px solid #DD6B26;
    padding: 5px;
}
.floatright {
    margin-left: 10px;
    float:right;
}
.floatleft {
    float: left;
    margin-right: 10px;
}

開啟或切換至 Default.aspx 檔。
切換至 [設計] 檢視，然後選取 Image 控制項。
在 [管理樣式] 視窗中，以滑鼠右鍵按一下 CSS 樣式，然後選取 [套用樣式]，以便將 floatright 或 floatleft CSS 樣式套用至 Image 控制項。

您選取的 CSS 樣式會指派給 img 樣式。

後續步驟

本逐步解說提供藉由 Visual Studio 2008 中的使用者介面來使用 CSS 樣式的基本技巧。您可能也想利用下列方法控制網頁外觀：

使用新樣式表。如需詳細資訊，請參閱逐步解說：建立和修改 CSS 檔。
以程式設計方式設定 HTML 項目的樣式資訊。如需詳細資訊，請參閱 HOW TO：以程式設計方式設定 HTML 伺服器控制項屬性。
建立主題和面板，不僅可指定 CSS 樣式，而且幾乎可以指定 ASP.NET 控制項的任何屬性。如需詳細資訊，請參閱ASP.NET 佈景主題和面板概觀。

請參閱

工作

逐步解說：建立和修改 CSS 檔

概念

使用 CSS 概觀

ASP.NET Web 伺服器控制項和 CSS 樣式

HOW TO：使用 CSS 屬性視窗

共用方式為

逐步解說：使用現有的 CSS 檔

必要條件

建立網站

若要建立新的檔案系統網站

加入 HTML 項目及 CSS 檔

加入 HTML 項目

將 HTML 項目加入至頁面

加入 CSS 檔

加入 CSS 檔

將樣式規則加入至樣式表

移除右側欄位並重新設定樣式

移除右側欄位的程式碼並進行格式化

加入影像

將影像加入至專案

將影像指派給影像控制項

加入樣式規則以格式化影像

將影像加入至配置

後續步驟

請參閱

工作

概念

其他資源