本文向大家描述一下CSS樣式表高效使用的技巧，為了提高網頁的維護更新效率，我們可以使用樣式表，來僅僅改變一個文件，就能達到同時改變幾百個網頁的外觀，而其個性化的表現未受任何損失。
CSS樣式表高效使用的技巧
為了提高網頁的維護更新效率，我們可以使用樣式表，來僅僅改變一個文件，就能達到同時改變幾百個網頁的外觀，而其個性化的表現未受任何損失。為了能充分用好樣式表的強大性和靈活性，筆者就怎樣有效使用樣式表，來談談自己的一些心得體會。
1、在一個網頁中同時調用CSS的多種引入方式
在Html中引入CSS的方式很多，例如直接插入式，使用鏈接外部樣式表，使用CSS"@import"導入樣式表以及在內部元素中使用"STYLE"標記來定義樣式表等。有網友詢問，這些引入方式能不能同時在一個網頁中被調用，它們之間會不會產生混亂？其實，我們大可不必這麼擔心，這就是它為什麼稱之為“層疊樣式表”的原因，浏覽器在處理網頁中的樣式表是按照一定的順序來處理的，首先檢查頁面中是否有直接插入式CSS，如果存在就先執行它，針對本句的其它CSS就不去管它了；接著檢查網頁源代碼中的"STYLE"標記，有就執行了；接下來再依次檢查執行"@import"導入的內部樣式表和鏈接的外部樣式表。因此，我們完全可以在一個網頁中同時調用CSS的多種引入方式。
2、快速創建CSS外連式文件
對於一個初接觸CSS的網頁設計人員來講，要用寫字板之類的編輯器，去創建一個CSS外連式文件是相當困難的。由於Dreamweaver對CSS支持的很好，用它來幫助就輕松多了。具體可以這樣操作：首先在紙上寫好在網站的網頁中可能要用到的格名稱，然後在Dreamweaver的編輯窗中調出CSS面板，一個一個地定義，並在一個空白頁上適當地寫一點相關內容，邊定義邊試用，效果不滿意，立即修改；全部定義好後，再用記事本創建一個空的CSS外連式文件，把在〈head〉與〈/head〉之間的那段定義好的CSS復制到CSS文件中去，就大功告成了。
3、讓背景圖案靜止不動
當網頁不能在一屏全部顯示時，我們往往借助於水平滾動條和豎直滾動條來浏覽屏幕以外的內容，移動滾動條時一般圖象和文字是一起移動的，那麼我們有沒有辦法使背景圖象不隨文字一起“滾動”呢？利用CSS就可以實現這樣的目的，我們只要把下面這段源代碼直接放在網頁的與標簽之間就可以了，其中bg.jpg就是網頁中的背景圖象，大家可以把它換成自己需要的背景圖象：
- 〈styletype="text/CSS"〉
- 〈!--
- BODY{background:purpleurl(bg.jpg);
- background-repeat:repeat-y;
- background-attachment:fixed
- }
- --〉
- 〈/style〉
4、讓網頁自動進行“首行縮進”
用DreamWeaver來設計網頁的用戶知道，在DreamWeaver中輸入空格不是那麼的方便，我們可以利用css來設計“首行縮進”功能來彌補這個缺憾。打開DreamWeaver的設計界面，在該界面中找到CSS的屬性定義對話框（StyleDefinitionfor.style1)，在該對話框的“Block”標簽下的“text-indent”屬性定義設置項中來設置“首行縮進”功能，在這裡要注意的是，所謂“首行”是指每段內容的第一行，也就是直接按回車鍵就形成了一個新的段落。縮進最好以“em”（字符）為單位，比如：漢字編排要求每段開始縮進兩個漢字，設置好的CSS如下所示：
- 〈styletype="text/CSS"〉
- 〈!--
- .style1{text-indent:2em}
- --〉
- 〈/style〉
5、巧用CSS來設定文字的背景
在DreamWeaver中，如果我們需要給文字加上不同的背景顏色時，操作上很簡單，只要用鼠標單擊屬性面板上的文字顏色按鈕，從彈出的顏色設置欄中選擇需要的顏色就可以了。但如果我們要給部分文字加不同的背景色，該怎麼操作呢？由於DreamWeaver3中沒有這方面的功能，但我們可以巧妙利用css來實現這樣的目的。具體操作過程是，首先我們可以先做一個定義背景色的CSS，例如給這個css命名為bjstyle，接著在網頁中選中需要設置顏色的文字，然後在工具欄中單擊一下“bJStyle”就行了。下面就是一個定義顏色背景的CSS的源代碼：
- 〈styletype="text/CSS"〉
- 〈!--
- .bJStyle{background:#cc00bb}
- --〉
- 〈/style〉