提高網頁的維護更新效率(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就是網頁中的背景圖象，大家可以把它換成自己需要的背景圖象：

〈style type="text/css"〉

〈!--

BODY { background: purple url(bg.jpg);

　　　 background-repeat:repeat-y;

　　　 background-attachment:fixed 　

　　　　}

--〉

〈/style〉

　　4、讓網頁自動進行“首行縮排”

　　用DreamWeaver來設計網頁的使用者知道，在DreamWeaver中輸入空格不是那麼的方便，我們可以利用css來設計“首行縮排”功能來彌補這個缺憾。開啟DreamWeaver的設計介面，在該介面中找到CSS的屬性定義對話方塊（Style Definition for .style1)，在該對話方塊的“Block”標籤下的“text-indent”屬性定義設定項中來設定“首行縮排”功能，在這裡要注意的是，所謂“首行”是指每段內容的第一行，也就是直接按斷行符號鍵就形成了一個新的段落。縮排最好以“em”（字元）為單位，比如：漢字編排要求每段開始縮排兩個漢字，設定好的CSS如下所示：

〈style type="text/css"〉

〈!--

.style1 { text-indent: 2em}

--〉

〈/style〉

　　5、巧用css來設定文字的背景

　　在DreamWeaver中，如果我們需要給文字加上不同的背景顏色時，操作上很簡單，只要用按一下滑鼠屬性面板上的文字顏色按鈕，從彈出的顏色設定欄中選擇需要的顏色就可以了。但如果我們要給部分文字加不同的背景色，該怎麼操作呢？由於DreamWeaver3中沒有這方面的功能，但我們可以巧妙利用css來實現這樣的目的。具體操作過程是，首先我們可以先做一個定義背景色的CSS，例如給這個css命名為bjstyle，接著在網頁中選中需要設定顏色的文字，然後在工具列中單擊一下“bjstyle”就行了。下面就是一個定義顏色背景的CSS的原始碼：

〈style type="text/css"〉

〈!--

.bjstyle { background: #cc00bb}

--〉

〈/style〉

　　6、給指定內容加邊框

　　在DreamWeaver中，我們可以利用CSS強大的定義功能來給某部分內容加邊框，定義時首先開啟DreamWeaver的設計介面，在該介面中找到CSS的屬性定義對話方塊（Style Definition for .style1)，該對話方塊的“Border”設定項就是用來定義指定內容邊框線的，其中“top”、“bottom”、“left”、“right”設定欄是分別用來定義指定內容四周邊框線的粗細和顏色的，這些設定項設定好後還需要在下面的“Style”中定義線型，否則我們將看不到定義的邊框線，因為css預設的線型是“none”。下面是一個定義了上邊框為：藍色細線；左邊框為：綠色中粗線的CSS原始碼：

〈style type="text/css"〉

〈!--

.style1 { border: solid; border-width: thin 0px 0px medium; border-color: #0000FF black black #00FF00}

--〉

〈/style〉

　　7、用樣式表來控制超級連結的顏色

　　如果你仔細研究一下超級連結，你就會發現，瀏覽器處理超級連結的預設是，對於目前還沒有訪問過的超級連結是用藍色且帶有底線的文字來顯示的，對於已經訪問過的超級連結則是用深紫色且帶有深紫色的底線的文字來顯示的。這些預設的設定顏色看得時間，可能就產生厭倦之感，並且很有可能與自己網頁的背景顏色不協調。因此我們完全可以按照自己的視覺要求，來自由更改超級連結的顯示顏色，讓它更能體現自己的風格。下面筆者就來介紹一段修改超級連結顯示顏色的原始碼，代碼如下：

　　

　　我們可以把這段原始碼添加在HTML檔案的……之間，它可以對對本網頁中的任何一個超級連結都起作用，其中這段代碼中的：

　　A:link {text－decoration: none; color:blue}是說明了超級連結還沒有被訪問，它沒有底線，顏色為藍色。

　　A:visited { color:red; text－decoration:line－through }說明了超級連結被訪問後，它的顏色變成了紅色，有了一根刪除線。

　　A:active { color:white; text－decoration:underline }說明超級連結處於活動狀態的時候，它的顏色變成了白色，有了底線。

　　A:hover {text－decoration:none;color:＃FF0000;background－color:black}說明滑鼠移動到超級連結後，它沒有底線，文字顏色變成了黃色，背景顏色是黑色。

　　根據上面的解釋，我們可以把超級連結在各種狀態下的顯示顏色修改成自己喜歡的那種，以便能更好地展示自己的個性。

　　8、給選中文字加背景映像

　　在DreamWeaver中，我們同樣可以給指定文字加上背景圖象，其操作過程與給指定文字加背景色操作類似，只不過是把選擇背景顏色換成選擇載入的背景圖象就是了。其具體操作過程是，首先我們可以先做一個定義背景色的CSS，例如給這個css命名為txstyle，接著在網頁中選中需要設定顏色的文字，然後在工具列中單擊一下“txstyle”就行了。下面就是一個定義背景圖象的CSS的原始碼（其中test.gif就是所載入的背景圖象）：

〈style type="text/css"〉

〈!--

.txbgstyle { background-image: url(test.gif)}

--〉

〈/style〉