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

更新：2007 年 11 月

本逐步解說將向您介紹 Visual Studio 2008 中的階層式樣式表 (CSS) 功能。它會引導您建立三欄式頁面配置，並說明建立新 Web 網頁和新樣式表的基本技巧。

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

• 建立檔案系統網站。

• 使用 CSS 導向功能自訂網站。

• 使用 CSS 建立三欄式頁面配置。

必要條件

若要完成此逐步解說，您需要下列項目：

• Visual Studio 2008 或 Visual Web Developer 2008 Express 版。如需下載資訊，請參閱 .NET Framework 開發人員中心網站。

• .NET Framework 3.5 版。

建立網站

在這部分的逐步解說中，您可以建立網站，並在網站中加入頁面。在下一節中，您可以加入 CSS 檔，並在 Web 瀏覽器中執行網頁。

如果您已建立網站 (例如，遵循逐步解說：在 Visual Web Developer 中建立基本 Web 網頁中的步驟)，就可以使用該網站，並移至此逐步解說中稍後的「加入頁面項目並設定樣式」。否則，請依照下列步驟建立新的網站。

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

1. 在 Visual Web Developer 中，按一下 [檔案] 功能表上的 [新網站]。

2. 在 [Visual Studio 安裝的範本] 底下，按一下 [新網站] 方塊中的 [ASP.NET 網站]。

3. 按一下 [位置] 方塊中的 [檔案系統]，輸入您要用來保存網站頁面的資料夾名稱。

   例如，輸入下列資料夾名稱：C:\CSSWebSite

4. 按一下 [語言] 清單中的 [Visual Basic] 或 [Visual C#]，然後按一下 [確定]。

   注意事項：
   您選擇的程式語言將成為網站的預設值，不過您可以為每個網頁分別設定程式語言。

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

加入頁面項目並設定樣式

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

加入頁面項目

在下列程序中，您將複製可以使用 CSS 工具處理的頁面項目。頁面項目是由一個橫幅 (包含文字和搜尋方塊)、一個頁尾和三個文字區段組成。頁面的主要內容位於最後一個文字區段。

將頁面項目加入至預設頁面

1. 開啟或切換至 Default.aspx 頁面。

   注意事項：
   您可以使用網站上的任何可用頁面。

2. 切換至 [原始碼] 檢視。

3. 將下列程式碼加到 <form> 標記 (Tag) 後方：

   <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>
     <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>
   

4. 儲存網頁。

5. 切換至 [設計] 檢視，查看預設格式。

在設計檢視中套用樣式

使用 [設計] 檢視，您便可以將樣式套用至頁面項目，並立即查看結果。您不需要在撰寫 CSS 之後切換至網頁，以查看樣式設定是否符合您的需求。

在 [設計] 檢視中，有多種方式可以將樣式設定套用至網頁上的個別項目。您可以使用內嵌樣式 (Inline Style)，該樣式撰寫為個別項目的 style 屬性。這些樣式規則只能套用至該項目。

您可以在網頁的 HTML head 項目之 style 項目中撰寫樣式規則。這些樣式規則可以套用至目前頁面中的項目。最後，您可以將樣式規則寫入外部 CSS 檔。在此情況下，樣式規則可以套用至網站中的任何頁面。

在這個逐步解說中，您會將格式化和樣式設定資訊寫入網頁的 style 項目區段，做為內嵌樣式。稍後，您可以將 CSS 資訊移至外部樣式表，以使用 Visual Studio 2008 中的其他功能。

格式化網頁橫幅

您將設定格式的第一個項目是橫幅區段，這個區段包含以 <div ID="banner"> 標記括住的項目。在這個範例中，您將使用 [直接樣式應用程式] 工具列，變更標題的樣式設定和位置。您也將設定橫幅區域的大小，並加入背景色彩。

格式化橫幅文字

1. 在 [設計] 檢視中，按一下橫幅區段中的標題文字 "AdventureWorks Styling Page"。

   請注意，選取範圍有藍色方塊圍繞和表示已選取 h1 項目的定位點。

2. 在 [樣式應用程式] 工具列中，按一下 [目標規則] 清單中的 [套用新樣式]。

   [新樣式] 對話方塊隨即出現。

   [直接樣式應用程式] 選項預設為 [手動]，所以您將以手動方式套用樣式。

3. 按一下 [選取器] 清單中的 [h1]，以建立可套用至所有 h1 項目的樣式。

   請注意，[定義於] 清單設定為 [目前的頁面]。這表示樣式規則建立在目前頁面的 style 項目中。

4. 在 [字型系列] 清單中，選取粗字型，例如 [Impact]。

5. 在 [字型大小] 方塊中，輸入或選取 [xx-large]。

6. 在 [字型變數] 方塊中，輸入或選取 [small-caps]。

7. 按一下 [確定]。

8. 若要查看已建立的樣式規則，請切換至 [原始碼] 檢視，並捲動至位於 head 項目內的 style 項目。

   您可以看到為 h1 項目建立的 CSS 樣式規則。

9. 使用下列步驟，以類似的方式為橫幅上的 h2 項目設定樣式：

   1. 如同在步驟 2 一樣，開啟 [新樣式] 對話方塊。

   2. 選取 h2 項目。

   3. 將 [新樣式] 方塊中的 [選取器] 值設定為 [h2]。

   4. 將 [字型系列] 設定為 comic Sans MS，並將 [字型大小] 設定為 [small]。

選取頁面項目

在 Visual Studio 2008 中，有多種方式可以選取頁面上的項目。您可以使用位於 [設計] 檢視窗格下半部的快速標籤選擇器。當您將插入點放在頁面的任何位置時，快速標籤選擇器會顯示標記，這個標記顯示該區域的基礎 HTML。在快速標籤選擇器列中，包含目前標記的標記出現在標記的左邊。例如，如果插入點在表格儲存格中，快速標籤選擇器列中會顯示 td 標記，而且前面加上 tr 標記表示表格列，加上 table 標記表示表格。

當您將指標移至快速標籤選擇器中的標記上方時，[設計] 檢視會將標記的內容反白顯示，且標記上會出現箭號。您可以按一下這個箭號，選取標記和其內容、只選取標記的內容、編輯或移除標記、開啟 [快速標籤編輯器] 對話方塊，或開啟項目的 [屬性] 對話方塊。

您也可以使用 ESC 鍵，在項目階層中上移。例如，h1 項目會以巢狀方式置於橫幅的 div 項目內。若要選取整個 div 項目，請按一下 h1 項目進行選取，然後使用 ESC 鍵選取橫幅 div 項目。請注意，第一次按 ESC 鍵會將 h1 項目反白顯示，並顯示項目的邊框距離和邊界 (由於我們並未設定這些效果，因此它們是預設設定)。再按一次 ESC 鍵時會選取整個 div 項目。選取項目後，標記會顯示 div#banner。

調整橫幅大小及其內容的位置

您可以使用 [直接樣式應用程式] 工具列，在 [設計] 檢視中調整橫幅和其內容的大小和位置。樣式規則寫入目前的頁面，與撰寫先前樣式規則的位置相同。

注意事項：
您可以使用 CTRL 鍵和方向鍵，變更已設定的大小項目值。例如，如果您將橫幅的寬度拖曳成 785 像素，您可以使用按鍵組合 CTRL + 向左鍵，將寬度減少為 780 像素。

調整橫幅的大小

1. 切換至 [設計] 檢視。

2. 按一下 h1 文字 ("AdventureWorks Styling Page") 進行選取，然後按兩次 ESC 鍵選取封入項目，也就是橫幅 div 項目。

3. 拖曳右下角的調整大小控點，調整橫幅 div 項目的大小。

   請注意，當您拖曳時，工具提示會顯示寬度和高度值。[設計] 檢視視窗下方的狀態列也會顯示這些值。

4. 將項目的大小調整到寬度約為 780 像素和高度約為 100 像素為止。

5. 若要查看已建立的樣式規則，請移至 [分割] 檢視，並捲動至 style 項目。

   您可以看到為橫幅 div 項目建立的樣式規則 (使用 #banner 選取器)。

6. 在 [設計] 檢視中，請確定已選取橫幅 div 項目 (標記導覽中的 [div#banner] 仍然應該選取)

7. 按一下 [格式] 功能表上的 [背景色彩]。

   色彩選擇器隨即出現。

8. 選取橫幅的色彩，然後按一下 [確定]。

您也可以套用標題文字置中的樣式規則。作法是設定邊框距離值。

將標題項目放置於橫幅內

1. 在 [設計] 檢視中，選取橫幅 div 項目。

2. 按一下 [格式] 功能表上的 [段落]。

   [段落] 對話方塊隨即出現。

   因為 h1 項目與橫幅 div 的長度相同，您可以將文字放置在 h1 項目內，讓文字在橫幅區域內置中。

3. 在 [段落] 方塊的 [對齊] 下拉式清單 (Drop-Down List) 中，選取 [置中]，然後按一下 [確定]。

4. 選取 h2 項目，然後重複執行步驟 2 和 3。

5. 選取橫幅 div 項目。

6. 按住 SHIFT 鍵，將滑鼠指標移至 div 項目的邊緣，讓工具提示顯示目前的邊框距離值。

7. 將邊框距離邊緣拖曳到緊鄰 div 項目的上框線。

8. 拖曳到兩個文字項目置中為止 (約 30 像素)。

若要完成橫幅，您必須將搜尋 div 項目和其項目放置於橫幅上。您可以使用 Visual Studio 2008 的另一個功能 (即定位格線) 完成這項工作。

將搜尋 div 項目放置於橫幅內

1. 在 [設計] 檢視中，選取搜尋 div 項目 (div#search)。

2. 按一下 [格式] 功能表上的 [設定位置]，然後選取 [絕對]。

3. 使用標記 (文字為 div#search) 將搜尋 div 項目拖曳至橫幅內，文字項目右邊的位置。

   請注意，選取項目會延伸出兩條藍線，表示上定位值和左定位值。

4. 放置在您要的位置後，放開搜尋 div 項目。

建立彈性的三欄式配置

您可以使用 Visual Web Developer，在 [設計] 檢視中格式化頁面項目，以建立樣式規則。您也可以使用這些工具建立頁面配置。

在此逐步解說中，您將使用「浮動」樣式規則建立三欄式配置。首先，您將設定左右提要欄位的大小和位置，接著可以調整主要內容區段的邊框距離，建立彈性的三欄式配置。

注意事項：
若要查看項目是否已正確放置於 [設計] 檢視，您可能需要隱藏 [工具列]。這樣可以有更多空間顯示頁面項目的位置。

建立提要欄位

在頁面配置中調整側邊欄的大小，就像調整橫幅的大小一樣。調整提要欄位的大小時，您可以只設定寬度值，不設定高度值，讓文字視需要延伸為欄的長度。若只要設定 div 項目的寬度，您可以拖曳 div 項目的右邊，不需要像上一個範例一樣抓取 div 項目的角落。

調整左右提要欄位 div 項目的大小和位置

1. 在 [設計] 檢視中，選取左提要欄位 div 項目 (作法是在標記導覽中選取 [div.column#leftsidebar])。

2. 拖曳左提要欄位 div 項目的右邊緣，將項目大小調整為寬度約 200 像素。

   請注意，在拖曳時，高度的值會顯示在括號中，表示未設定。

3. 按一下 [格式] 功能表上的 [位置]。

   [位置] 對話方塊隨即出現。

4. 選取 [換行樣式] 底下的 [左]，然後按一下 [確定]。

5. 選取右提要欄位 div 項目，拖曳右邊緣直到寬度約為 250 像素。

6. 按一下 [格式] 功能表上的 [位置]。

7. 按一下 [換行樣式] 底下的 [右]，然後按一下 [確定]。

建立置中欄

若要建立置中欄，您可以設定邊界和邊框距離，讓內容與左右欄分開。您可以先建立左框線，然後使用邊框距離，讓內容離開框線。

設定置中欄的樣式

1. 在 [設計] 檢視中，選取主要內容 div 項目。

2. 按住 CTRL 鍵並拖曳主要內容 div 項目的右邊界，將右邊界設定為 260 像素。將左邊界拖曳為 210 像素的值。

3. 在已選取主要內容 div 項目的情況下，選取 [格式] 功能表上的 [框線及網底]。

   [框線及網底] 對話方塊隨即出現。

4. 選取 [設定] 底下的 [自訂]。

5. 選取 [樣式] 清單中的 [實心]，然後按一下 [預覽] 底下的左框線按鈕。

6. 在 [寬度] 文字方塊中，輸入 1px。

7. 在 [邊框距離] 底下的 [左] 方塊中，輸入 10px。

8. 按一下 [確定]。

調整頁尾

如果使用者調整頁面的大小，或頁面顯示在大型監視器上，頁尾可能會換行，而顯示在其中一欄的邊緣上。若要防止這種情況，您可以設定「清除」樣式規則。

調整頁尾 div 項目

1. 在 [設計] 檢視中，選取頁尾 div 項目。

2. 按一下 [格式] 功能表上的 [新樣式]。

   [新樣式] 對話方塊隨即出現。

3. 在 [選取器] 方塊中輸入或選取 [#footer]。

4. 在 [分類] 清單中按一下 [配置]。

5. 在 [清除] 清單中選取 [兩者]。

6. 按一下 [確定]。

建立和使用樣式表

將樣式規則放在樣式表中是使用 CSS 較有效率的方式。之後，所有頁面都可以參考這些樣式，使其外觀一致。

您也可以搭配 ASP.NET 主題使用階層式樣式表。若要搭配主題使用樣式表，您必須將它放在正確的資料夾中。如需佈景主題和 CSS 的詳細資訊，請參閱 ASP.NET 佈景主題和面板概觀。

建立樣式表的方法與建立新頁面的方法相同。

建立樣式表並附加至頁面

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

2. 選取 [Visual Studio 安裝的範本] 底下的 [樣式表]。

3. 在 [名稱] 方塊中，輸入 Layout.css，然後按一下 [加入]。

   編輯器隨即開啟，並顯示包含空白 body 樣式規則的新樣式表。

4. 開啟或切換至 Default.aspx 頁面，並切換至 [設計] 檢視。

5. 按一下 [格式] 功能表上的 [CSS 樣式]，然後按一下 [管理樣式]。

   [管理樣式] 視窗隨即開啟 (根據預設，此視窗會停駐)。

6. 按一下 [附加樣式表]。

7. [選取樣式表] 對話方塊隨即出現。

8. 選取 Layout.css 檔案，然後按一下 [確定]。

   [管理樣式] 視窗中會建立名為 Layout.css 的新索引標籤。

有多種方式可以指派樣式表給頁面。最簡單的方法是將檔案從 [方案總管] 拖曳至 [原始碼] 檢視中的頁面標頭項目。

將樣式規則從頁面移至樣式表

您可以使用 [管理樣式] 窗格，將樣式從一個頁面移至另一個頁面，或查看樣式規則在頁面上如何套用。

到目前為止，您在逐步解說建立的樣式規則都儲存在 Default.aspx 頁面的 style 項目中。您可以將這些樣式規則移至您建立的新樣式表。

使用管理樣式窗格移動樣式規則

1. 在 [管理樣式] 視窗的 [目前的頁面] 索引標籤中，選取所有樣式 (您可以使用 SHIFT+按一下，選取所有樣式)。

2. 將選取的樣式拖曳至 [管理樣式] 視窗的 [Layout.css] 索引標籤。

   樣式規則會從 Default.aspx 頁面中移除，並移至 Layout.css 檔案。您可以在 [原始碼] 檢視中檢視 Default.aspx 頁面，也可以在編輯器中切換至 Layout.css 頁面，以確認這個結果。

您也可以在使用 [管理樣式] 視窗變更樣式表中的樣式順序。例如，您可以拖曳搜尋樣式規則，使它位於橫幅樣式規則的正下方。

後續步驟

此逐步解說說明了使用 Visual Studio 2008 的使用者介面處理 CSS 樣式的基本技巧。您也可以瀏覽下列用來控制 Web 網頁外觀的方法：

• 使用現有樣式表。如需詳細資訊，請參閱逐步解說：使用現有的 CSS 檔。

• 以程式設計方式設定 HTML 項目的樣式資訊。如需詳細資訊，請參閱 HOW TO：以程式設計方式設定 HTML 伺服器控制項屬性。

• 建立主題和面板，它們不僅可讓您指定 CSS 樣式，還能讓您指定 ASP.NET 控制項的幾乎所有屬性。如需詳細資訊，請參閱 ASP.NET 佈景主題和面板概觀。

請參閱

工作

逐步解說：在 Visual Web Developer 中建立基本 Web 網頁

概念

Visual Web Developer 中的網站類型