- Div+CSS3.0網頁布局案例精粹（升級版）
- 張曉景
- 1680字
- 2020-03-02 16:09:19
2.1 CSS的基本概念
CSS是Cascading Style Sheets的簡稱。對于設計者來說，它是一個非常靈活的工具，不必再把繁雜的樣式定義編寫在文檔結構中，可以將所有有關文檔的樣式指定內容全部脫離出來，在行內定義、在標題中定義，甚至作為外部樣式表文件供HTML頁面調用。
2.1.1 CSS的特點
使用CSS定義樣式的好處是：不僅可以控制傳統的格式屬性，如字體、尺寸、對齊方式，還可以設置諸如位置、特殊效果、鼠標滑過之類的HTML屬性。圖2-1所示為沒有使用CSS美化的頁面，圖2-2所示為使用CSS美化后的頁面。
圖2-1 沒有使用CSS美化的頁面
圖2-2 使用CSS美化后的頁面
當然，通過修改樣式，可以自動、快速更新所有采用該樣式的文字格式。HTML樣式可以看作一組用于控制單個文檔中某個范圍內文本外觀的格式化屬性，而CSS不僅可以控制單個文檔中的文本格式，還可以控制多個文檔的格式。與使用HTML樣式相比，使用CSS可以更好地鏈接外部多個文檔，當CSS被更新時，所有使用CSS的文檔也會隨之自動更新。
當用戶需要管理一個非常大的網站時，使用CSS定義站點，便可以體現出非常明顯的優越性。使用CSS可以快速格式化整個站點，并且使用CSS可以控制多種使用HTML不能控制的屬性。
CSS的特點一般可以歸納為以下幾點。
（1）可以更加靈活地控制網頁中文字的字體、顏色、大小、間距、風格及位置。
（2）可以靈活地設置一段文本的行高、縮進，并可以為其加入三維效果的邊框。
（3）可以方便地為網頁中的任何元素設置不同的背景顏色和背景圖像。
（4）可以精確地控制網頁中各元素的位置。
（5）可以為網頁中的元素設置各種過濾器，從而產生各種效果，如陰影、模糊、透明等。
（6）可以與腳本語言相結合，從而產生各種動態效果。
（7）由于是HTML代碼，所以可以提高頁面打開的速度。
2.1.2 CSS的基本語法
CSS語言由選擇符和屬性構成，其基本語法如下：
首先討論在HTML頁面內直接引用樣式表的方法。這個方法必須把樣式表信息包括在<style>和</style>標簽中，為了使樣式表在整個頁面中產生作用，應把該組標簽及內容放到<head>和</head>標簽中。CSS語法示意圖如圖2-3所示。
圖2-3 CSS語法示意圖
例如，需要設置HTML頁面中所有H1標題字顯示為紅色，其代碼如下：
提示
<style>標簽中包括了type="text/css"，目的是讓瀏覽器知道是使用CSS規則。加入<!--…-->注釋標記是防止有些老式瀏覽器不認識CSS規則，可以把該段代碼忽略不計。
在使用CSS的過程中，經常會有幾個選擇符用到同一個屬性的情況，如規定頁面中粗體字、斜體字和H1標題字都顯示為綠色，按照上文介紹的語法CSS的代碼如下：
這樣書寫是十分麻煩的，于是在CSS中引進了分組的概念，可以將相同屬性的樣式定義寫在一起，這樣CSS的代碼就會簡潔很多，代碼如下：
用逗號分隔各個CSS選擇符，將3行代碼合并寫在一起即可。
2.1.3 CSS的沖突
如果將兩個或多個CSS規則應用于同一個文本時，這些規則可能會發生沖突并產生意外的結果，瀏覽器會使用就近原則處理CSS規則。
技能案例：使用就近原則
源文件：源文件\第2章\2-1.html
（1）執行“文件”→“打開”命令，打開文件“源文件\第2章\2-1.html”，頁面效果如圖2-4所示。然后定義兩個字體的CSS規則，分別為font01和font02，如圖2-5所示。
圖2-4 頁面效果
圖2-5 CSS規則代碼
（2）如果應用于同一文本的兩種CSS規則的屬性發生沖突，則瀏覽器顯示最里面的CSS規則（離文本最近的規則）的屬性，如圖2-6所示。
圖2-6 應用兩種CSS規則
（3）“兩個標題”會應用font02的樣式規則，而不會應用font01的樣式規則。在Dreamweaver的實時視圖中，可以看到頁面中字體的效果，如圖2-7所示。
圖2-7 顯示最里面的CSS規則的字體效果
提示
在該案例中，font02中的font-weight屬性與font01發生沖突，在font02中定義字體為粗體，而在font01中并沒有字義字體的加粗屬性，當它們同時應用于同一文本時，將顯示這兩種CSS規則所有的屬性。但是font02中的color屬性與font01中的color屬性重復，font02中定義字體顏色為深灰色，而font01中定義字體顏色為淺灰色，這兩種CSS規則定義的color屬性發生了沖突，當它們同時應用于同一文本時，將顯示最里面的CSS規則定義的color屬性。
（4）如果有直接沖突，則自定義的CSS規則（使用class屬性應用的規則）中的屬性將覆蓋HTML標簽樣式中的屬性，如圖2-8所示。在Dreamweaver的實時視圖中，可以看到頁面中字體的效果，如圖2-9所示。
圖2-8 應用兩種CSS規則
圖2-9 覆蓋HTML標簽中的樣式屬性
由此可見，當CSS規則定義的屬性和HTML標簽中的屬性發生沖突時，將顯示CSS規則所定義的屬性。