Dreamweaver使用CSS樣式表設置網頁文本格式(2)_Dreamweaver教程
      
編輯Tag賺U幣
      


      教程Tag：暫無Tag,歡迎添加,賺取U幣!
      


      

      


      　　內部(或嵌入式)CSS 樣式表是包含在 HTML 文檔 head 部分的 style 標簽內的一系列 CSS 規則。例如，下面的示例為已設置段落標簽的文檔中的所有文本定義字體大小:
      


      



    

        

            <head> 
      <style>  
         p{ 
         font-size:80px 
         } 
      </style> 
      </head> 　

        

    




      


      　　內聯樣式是在 HTML 文檔中的特定標簽實例中定義的。例如，<p style="font-size: 9px"> 僅對用含有內聯樣式的標簽設置了格式的段落定義字體大小。 
      


      　　Dreamweaver 會呈現您所應用的大多數樣式屬性并在"文檔"窗口中顯示它們。您也可以在瀏覽器窗口中預覽文檔以查看樣式的應用情況。有些 CSS 樣式屬性在 Microsoft Internet Explorer、Netscape Navigator、Opera 和 Apple Safari 中呈現的外觀不相同。
      


      　　選擇"文件">"新建"。
      


      　　在"新建文檔"對話框中的"類別"列中選擇"基本頁"，在"基本頁"列中選擇"CSS"，然后單擊"創建"。
      


      　　
      


      　　空白樣式表將出現在"文檔"窗口中。"設計"視圖和"代碼"視圖按鈕已被禁用。CSS 樣式表是純文本文件，其內容將不會用于在瀏覽器中查看。
      


      　　將該頁保存("文件">"保存")為 cafe_townsend.css。
      


      　　保存樣式表時，請確保將其保存到 cafe_townsend folder 文件夾(您的 Web 站點的根文件夾)中。
      


      　　在樣式表中鍵入以下代碼:
      


      



    

        

            　　p{ 
      　　font-family: Verdana, sans-serif; 
      　　font-size: 11px; 
      　　color: #000000; 
      　　line-height: 18px; 
      　　padding: 3px; 
      　　}

        

    




      


      　　當您鍵入代碼時，Dreamweaver 將使用代碼提示為您建議一些選項，以幫您完成輸入。當看到希望 Dreamweaver 為您完成鍵入的代碼時，請按 Enter 鍵 (Windows) 或 Return 鍵 (Macintosh)。
      


      　　不要忘記在每行結尾處的屬性值后面加上一個分號。
      


      　　完成后的代碼類似于下面的示例:
      


      　　
      


      　　若要顯示該指南，請選擇"幫助">"參考"，然后從"參考"面板的彈出式菜單中選擇"O'Reilly CSS 參考"。保存樣式表。
      




      　　附加樣式表
      


      　　當您將樣式表附加到 Web 頁面中時，在樣式表中定義的規則將應用到頁面上的相應元素。例如，當您將 cafe_townsend.css 樣式表附加到 index.html 頁時，將根據您定義的 CSS 規則設置所有段落文本(用 HTML 代碼中的標簽設置格式的文本)的格式。 
      


      　　在"文檔"窗口中，打開 Cafe Townsend 的 index.html 文件。(假如該文件已打開，則請單擊它的選項卡。)
      


      　　選擇在教程:向頁面添加內容中粘貼到頁面中的第一段文本。
      


      　　
      


      　　在"屬性"檢查器中查看，并確保使用段落標簽設置了該段落的格式。
      


      　　假如"屬性"檢查器中的"格式"彈出式菜單顯示"段落"，則已使用段落標簽設置了段落的格式。假如"屬性"檢查器中的"格式"彈出式菜單顯示"無"或其它內容，則選擇"段落"來設置段落的格式。


      

      


      來源：網頁教學網//所屬分類：Dreamweaver教程/更新時間：2007-11-14


      


      



      


      



      相關Dreamweaver教程：