共用方式為

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

  • 發行項

本逐步解說介紹 Visual Studio 中協助您使用階層式樣式表 (CSS) 的功能。 其中描述如何建立三欄式頁面配置，並說明如何建立網頁和新樣式表的基本技巧。

注意事項注意事項

本主題中的範例是專用於 ASP.NET Web Form 網頁。您可以使用 ASP.NET MVC (模型檢視控制器) 或 ASP.NET 網頁應用程式 (.cshtml 檔案) 中的編輯頁面 [原始檔] 檢視，但 Web Forms 網頁只能完整支援 [設計] 檢視和 [分割] 檢視。

這個逐步解說將說明下列工作：

  • 建立檔案系統網站。

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

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

必要條件

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

  • Visual Studio 或 Visual Studio Express for Web 已安裝在您的電腦上。

    注意事項注意事項

    如果您正在使用 Visual Studio，此逐步解說假設您在第一次啟動 Visual Studio 時已選取設定的 [Web 程式開發] 集合。如需詳細資訊，請參閱 HOW TO：選取 Web 開發環境設定。

  • 如何在 Visual Studio 中工作的一般知識。

    關於如何在 Visual Studio 中建立網頁的簡介，請參閱逐步解說：在 Visual Studio 中建立基本網頁。

建立網站

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

如果您已在 Visual Studio 中建立網站 (例如，依照逐步解說：在 Visual Studio 中建立基本網頁中的步驟)，則您可使用該網站，並跳至本逐步解說稍後的＜加入頁面項目並設定樣式 否則，請依照下列步驟建立新的網站。

注意事項注意事項

ASP.NET 網站和 ASP.NET Web 應用程式的預設專案範本包含預先建置的 Site.css 檔案。這個檔案包含了定義主版頁面 (Site.master) 與內容頁面 (Default.aspx 和 About.aspx) 外觀的 CSS 規則。此逐步說明顯示如何在 ASP.NET 網頁中建立及使用 CSS。一開始使用空網站專案，然後將 CSS 功能加入到網站。

若要建立檔案系統網站

  1. 開啟 Visual Studio 或 Visual Studio Express for Web。

  2. 按一下 [檔案] 功能表上的 [新網站]。

    [新網站] 對話方塊便會顯示。

  3. 在 [已安裝的範本] 底下，按一下 [Visual Basic] 或 [Visual C#]，然後選取 [ASP.NET 空網站]。

  4. 選取 [Web 位置] 方塊中的 [檔案系統]，然後輸入您想要用來保存網站網頁的資料夾名稱。

    例如，輸入資料夾名稱 C:\WebSites。

  5. 按一下 [確定]。

    Visual Studio 會建立只包含 Web.config 檔而不包含任何其他網頁或檔案的網站專案。

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

  7. 選取 [Web Form]，並將網頁命名為 Default.aspx，然後按一下 [加入]。

    Visual Studio 會建立 Default.aspx 網頁，並在 [原始碼] 檢視中將它開啟。

加入頁面項目並設定樣式

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

Bb398932.collapse_all(zh-tw,VS.110).gif加入頁面項目

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

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

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

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

  3. 在 <form> 區段內，移除預設情況下建立的空白 <div></div> 標記組。

  4. 將下列程式碼加到開頭 <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>
  <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>
    注意事項注意事項

    若要提高網頁的可讀性，請按一下 [編輯] 功能表中的 [格式化文件]。

  5. 儲存網頁。

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

在設計檢視中套用樣式

使用 [設計] 檢視，您便可以將樣式套用至頁面項目，並立即查看結果。 您不必建立及修改 .css 檔案，然後切換至網頁來查看樣式設定是否符合您的需求。

在 [設計] 檢視中，可以使用下列方式將樣式設定套用至網頁上的個別項目：

  • 使用內嵌樣式，該樣式撰寫為個別項目的 style 屬性。 這些樣式規則只能套用至該項目。

  • 您可以在網頁 HTML head 項目的 <style> 區段中撰寫樣式規則。 這些樣式規則可以套用至目前頁面中的項目。

  • 將樣式規則寫入外部 CSS 檔案。 在此情況下，樣式規則可以套用至網站中的任何頁面。

在這個部分的逐步解說中，您將會定義寫入網頁 style 區段的格式與樣式規則。 稍後，您會將您建立的 CSS 資訊移至外部樣式表。

Bb398932.collapse_all(zh-tw,VS.110).gif格式化網頁橫幅

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

格式化橫幅文字

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

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

  2. 在 [格式化] 工具列中，按一下 [目標規則] 清單中的 [套用新樣式]。 或者，選擇 [格式] 功能表中的 [新樣式]。

    提示

    預設會啟用 [格式化] 工具列。若要啟用它，請選擇 [檢視] 功能表中的 [工具列]，然後選擇 [格式化]。

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

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

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

  4. 在 [font-family] 清單中，選取 [影響] 或是通常用於橫幅的另一種字型。

    在 [預覽] 窗格預覽字型。

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

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

  7. 按一下 [確定]。

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

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

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

    1. 在 [設計] 檢視中，將指標放在 "Making CSS Styling Easier in Design View" 標題中，這個標題為 h2 項目。

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

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

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

    5. 按一下 [確定]。

Bb398932.collapse_all(zh-tw,VS.110).gif選取頁面項目

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

當您將指標移至快速標籤選擇器中的標記上方時，標記上會顯示一個箭頭。 按一下這個箭號可選取標記及其內容，或是只選取標記的內容。

您也可以使用 ESC 鍵，在項目階層中上移。 例如，h1 項目會以巢狀方式置於橫幅的 div 項目內。 若要選取整個 div 項目，請按一下 h1 項目進行選取，然後使用 ESC 鍵選取橫幅 div 項目。 第一次按 ESC 鍵會將 h1 項目反白顯示，並顯示項目的邊框距離和邊界 再按一次 ESC 鍵時會選取整個 div 項目。 選取項目後，標記會顯示 div#banner。

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

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

注意事項注意事項

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

調整橫幅的大小

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

  2. 按一下 h1 文字 ("AdventureWorks Styling Page") 進行選取，然後按兩次 ESC 鍵。 這個動作會選取封入項目，也就是名為 banner 的 div 項目。

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

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

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

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

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

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

  7. 請確定已選取橫幅 div 項目 (標記導覽中的 [div#banner] 仍然應該選取)

  8. 按一下 [格式] 功能表中的 [框線及網底]。

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

    選取 [網底] 索引標籤，再選取 [背景色彩]，然後按一下 [其他色彩]。

    [其他色彩] 對話方塊隨即顯示。

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

    在 [分割] 檢視中，您可以看到 #banner 樣式規則已更新，其中包含 background-color 的設定。

  10. 若要調整表單的寬度使其符合橫幅大小，請選取 form 項目。 然後拖曳右邊的大小調整控點，將表單的寬度縮小為 780 像素。

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

將標題項目放置於橫幅內

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

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

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

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

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

若要完成橫幅，您要使用定位格線，將搜尋 div 項目和其項目放置於橫幅上。

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

  1. 在 [設計] 檢視中，選取搜尋 div 項目 (div#search)。 (網頁頂端的此項目包含搜索方塊)。

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

  3. 使用索引標籤將 div#search 項目拖曳至橫幅內，文字項目右邊的位置。

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

  4. 放置在您要的位置並調整大小後，放開搜尋 div 項目。

建立彈性的三欄式配置

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

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

注意事項注意事項

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

Bb398932.collapse_all(zh-tw,VS.110).gif建立提要欄位

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

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

  1. 在 [分割] 檢視中，選取 HTML 原始程式碼中的左提要欄位 div 項目。

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

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

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

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

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

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

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

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

Bb398932.collapse_all(zh-tw,VS.110).gif建立置中欄

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

設定置中欄的樣式

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

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

    或者，您可以使用 [原始碼] 檢視或 [分割] 檢視建立以下樣式規則：

    #maincontent
{
    margin-right: 290px;
    margin-left: 210px;
}

  3. 選取主要內容的 div 項目，然後按一下 [格式] 功能表上的 [框線及網底]。

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

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

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

  6. 在 [寬度] 文字方塊中，選擇 1。

  7. 在 [邊框距離] 底下的 [左] 和 [右] 方塊中，選擇 10。

  8. 按一下 [確定]。

    請注意在 [原始碼] 檢視或 [分割] 檢視中，#maincontent 項目的樣式定義已經更新。

Bb398932.collapse_all(zh-tw,VS.110).gif調整頁尾

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

調整頁尾 div 項目

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

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

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

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

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

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

  6. 按一下 [確定]。

建立和使用樣式表

到目前為止，您已經藉由直接操作網頁的項目來建立樣式定義。 您已經將樣式定義儲存在網頁 head 項目內的 style 項目中。 這些樣式設定只適用於目前的頁面。

將樣式規則放在所有網頁都可以參考的樣式表中，是使用 CSS 較有效率的方式。 建立樣式表的方法與建立頁面的方法相同。

建立樣式表並附加至頁面

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

  2. 在範本清單中，選取 [樣式表]。

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

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

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

  5. 按一下 [檢視] 功能表中的 [管理樣式]。

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

  6. 在 [管理樣式] 視窗的工具列中，按一下 [附加樣式表] 按鈕。

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

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

    [管理樣式] 視窗中會建立名為 Layout.css 的新索引標籤。 Layout.css 檔案已附加至目前的文件。 在 [原始碼] 或 [分割] 檢視中，您可以看到類似以下的 link 項目加入至網頁的 head 項目：

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

    這說明您如何使用 [管理樣式] 視窗，將樣式表指派到網頁上。 也有其他方式可將樣式表指派到網頁上。 例如，您也可以從 [方案總管] 將樣式表檔案拖曳到 [原始碼] 檢視中網頁的 head 項目。 您還可以從 [方案總管] 中將檔案拖放至 [設計] 檢視頁面上的任何位置。

Bb398932.collapse_all(zh-tw,VS.110).gif將樣式規則從頁面移至樣式表

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

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

  1. 切換至 Default.aspx 網頁。

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

  3. 在 [管理樣式] 視窗的 [目前的頁面] 區段中，選取所有樣式 (如果選取第一種樣式，然後使用 SHIFT + 滑鼠左鍵來選取最後一個樣式，則會選取所有樣式)。

  4. 在 [管理樣式] 視窗中，將選取的樣式拖曳至 [Layout.css] 區段中的 [主體] 圖示。

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

您也可以在使用 [管理樣式] 視窗變更樣式表中的樣式順序。

後續步驟

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

請參閱

其他資源

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

Visual Studio 中的網站專案類型