2.2 網頁設計中的CSS

CSS主要是為了與HTML一起使用而設計的，所以CSS非常適合在網頁設計中使用。CSS可以為網頁設計帶來全新的構思空間，提供平面HTML所不具備的功能和靈活性。使用CSS，可以實現網頁中所有常見的顯示效果，在使用CSS之前首先要了解如何使用CSS，以及CSS能做什么、不能做什么。

2.2.1 如何使用CSS

CSS是由許多CSS規則組成的文件。規則是最小的CSS單位，可以定義一種或多種樣式效果。每個規則可以標識它選擇網頁中的哪些部分，以及它對頁面的該部分應用什么屬性。網頁文檔鏈接到某個CSS，就意味著瀏覽器需要下載該CSS，并且當顯示該頁面時會應用相應的CSS規則。CSS文件可以與任何數量的網頁文檔鏈接，因此，CSS可以控制整個站點或其一部分的外觀。

CSS可以與幾種不同的標記語言一起使用，這些標記語言包括HTML和XML（Extensible Markup Language，可擴展標記語言）。

1．CSS和HTML

HTML由標記文檔內特定元素的一系列標簽組成。這些元素都具有默認的表示樣式，默認的表示樣式由瀏覽器提供，基于HTML的正式規范。用戶通過鏈接到樣式表或在HTML文檔中添加樣式表，可以對HTML頁面應用樣式表，這樣可以重新定義每個元素的表示樣式。

HTML頁面可以包含設置表達樣式的標簽和屬性，但是與CSS比較，其功能和效果有限。CSS可以與HTML表達樣式的標簽和屬性一起使用，如<font>標簽、color="red"屬性，或者可以完全替換其表達樣式的標簽和屬性。

如圖2-10所示，該網頁沒有應用CSS，因此外觀十分普通，字體都是瀏覽器的默認字體，顏色也是非常基本的顏色，雖然外觀看起來十分簡陋，但所有信息都清楚可見，頁面也易于使用，只是缺乏樣式表使它看起來并不美觀。

圖2-11所示為使用CSS后的頁面效果。使用CSS不但可以為頁面定義引人注目的文字，而且可以使頁面的排版更加整齊、漂亮。使用CSS的綜合效果就是顯著地改進網頁的外觀，使網站頁面更友好、可識別和便于使用。

圖2-12所示為應用到該頁面中的部分CSS代碼，從中可以看出CSS代碼的寫法與HTML代碼有很大的不同。

2．CSS和XML

CSS也可以與XML一起使用。XML通常不具有內在的表達定義，而CSS可以直接應用于XML文件，達到添加表達樣式的目的。

2.2.2 CSS能做什么

CSS可以用來改變從文本樣式到頁面布局的各種內容，并且能夠與JavaScript結合產生動態顯示效果。

1．文本格式和顏色

使用CSS可以控制很多的文本效果，例如：

· 選擇字體與字體大小。

· 設置粗體、斜體、下畫線和文本陰影。

· 改變文本顏色與背景顏色。

· 改變鏈接的顏色，刪除下畫線。

· 縮進文本或使文本居中。

· 拉伸、調整文本大小和行間距。

· 將文本部分轉換成大寫、小寫，或者轉換成大小寫混合形式（僅限針對英文）。

· 添加首寫大寫字母下沉和其他特效。

2．圖形外觀和頁面布局

CSS也可以用來改變圖形的外觀和頁面的布局。在CSS中有一個定位屬性，運用該屬性，用戶不使用表格就能夠格式化網頁。用戶運用CSS改變圖形外觀和頁面布局的一些操作包括：

· 設置背景圖像，控制其位置、排列方式和滾動方式。

· 繪制頁面各部分的邊框。

· 設置全部元素的垂直和水平邊距，以及垂直和水平填充方式。

· 設置圖像周圍及其他文本周圍的文本繞排。

· 將頁面元素定位到準確位置。

· 重新定義HTML表、表單和列表的顯示方式。

· 以指定的順序將各個元素分層放置。

3．動態操作

網頁設計的動態效果是交互性的，為了適應運用而改變。通過CSS能創建響應用戶的交互式設計，例如：

· 鼠標經過鏈接時的效果。

· 在HTML標簽之前或之后插入動態內容。

· 自動對頁面元素進行編號。

· 在動態HTML（Dynamic HTML，DHTML）和異步JavaScript與XML（Asynchronous JavaScript and XML，AJAX）中的完全交互式設計。

2.2.3 CSS不能做什么

CSS的功能雖然很強大，但是也有某些局限性。CSS的局限性在于，它主要對標記文件中的顯示內容起作用。顯示順序在某種程度上可以改變，可以插入少量文本內容，但是如果要在源HTML（或XML）中做較大改變，用戶需要使用另外的方法，如使用XSLT（可擴展樣式語言轉換）。

同樣，CSS的出現比HTML晚，這就意味著，一些較老的瀏覽器不能識別用CSS寫的樣式。并且CSS在簡單文本瀏覽器中的用途也有限，如為手機或移動設備編寫的簡單瀏覽器代碼等。

CSS是可以實現向后兼容的，如較老的瀏覽器雖然不能夠顯示出樣式，卻能夠正常地顯示網頁。相反，應該使用默認的HTML表達樣式，并且如果設計者合理地設計了CSS和HTML，即使樣式不能顯示，頁面的內容也還是可用的。