- 網頁設計與制作項目化實訓教程
- 吳蓓 陳桂芳 雷瑩主編
- 9字
- 2025-06-20 16:57:21
1 階段1：任務初探
1-1 【任務分析】
任務分析是網頁開發的前提與基礎，任務分析重點要解決“做什么”，分成哪些模塊，需要哪些技能點。圖2-1為主題頁面效果。
圖2-1 主題頁面效果
（網頁素材來源：1.中國日報網；2.“學習強國”網）
1.準備工作與頁面布局
(1)準備工作
在HBuilderX中建立項目，命名為project-2，將圖片素材拷貝到項目的img文件夾中。
具體步驟：
打開HBuilderX軟件，新建項目。常用的方法有兩種：一是利用“文件”菜單的“新建”選項中的“項目”菜單；二是在主界面中心的快捷菜單中選“新建項目”，如圖2-2所示。
圖2-2 新建項目(1)
在彈出的對話框中，選擇“普通項目”，輸入項目名稱“project-2”，自定義存放的路徑，在“選擇模板”中選擇“基本HTML項目”，點擊“創建”按鈕即可，如圖2-3所示。
圖2-3 新建項目(2)
在左側的任務窗格中就能看到創建好的項目文件了，如圖2-4所示。
圖2-4 新建項目(3)
然后將網頁圖片素材拷貝到“img”文件夾中，雙擊“index.html”，在打開的編碼區域準備書寫網頁代碼，如圖2-5所示。
圖2-5 拷貝圖片素材
(2)頁面布局分析
根據網頁效果圖，可以將“厲害了，我的國”主題頁從上到下分為5個模塊——頭部模塊、標題模塊、三軍風采模塊、兵器大觀模塊和頁腳模塊，如圖2-6所示。
圖2-6 頁面布局分析
2.知識準備
本次主題網頁的訓練重點是掌握CSS樣式規則，掌握CSS復合選擇器，可以快捷選擇頁面中的元素，理解CSS層疊性、繼承性與優先級，學會高效控制網頁元素。
(1)CSS樣式規則
選擇器｛屬性1：屬性值 1；屬性 2：屬性值 2；屬性 3：屬性值 3；｝
在上面的樣式規則中，選擇器用于指定CSS樣式作用的HTML對象，花括號內是對該對象設置的具體樣式。其中，屬性和屬性值以“鍵值對”的形式出現，用英文“：”連接，多個“鍵值對”之間用英文“；”進行區分。圖2-7為CSS樣式表基本規則。
圖2-7 CSS樣式表基本規則
(2)HTML頁面中引入CSS樣式表的方式
?行內式：也稱為內聯樣式，直接在HTML標簽中添加style屬性來定義元素的樣式。
語法格式：
<標記名style＝"屬性 1:屬性值 1;屬性 2:屬性值 2;屬性 3:屬性值 3;">內容</標記名>
例1：
?內嵌式：將CSS代碼集中寫在HTML文檔的<head>頭部標記中，并且用<style>標記定義，之后在整個HTML文件中直接調用該樣式的標記。
語法格式：
例2：
?鏈入式
將所有的樣式放在一個或多個以.css為擴展名的外部樣式表文件中，通過<link/>標記將外部樣式表文件鏈接到HTML文檔中。
語法格式：
鏈入式需要先建立css文件，在文件中書寫css樣式代碼，再在HTML文檔中鏈入css文件。在HBuilderX中的操作步驟如圖2-8所示。
圖2-8 新建css文件1
在彈出的對話框中為css文件命名，如圖2-9所示。
圖2-9 新建css文件2
在css文件中編寫css樣式代碼，保存css文件，如圖2-10所示。
圖2-10 新建css文件3
在HTML文檔中鏈入css文件。
例3：
(3)CSS基礎選擇器
要想將CSS樣式應用于特定的HTML元素，首先需要找到該目標元素。在CSS中，執行這一任務的樣式規則部分被稱為選擇器。
?標記選擇器
標記選擇器是指用HTML標記名稱作為選擇器，按標記名稱分類，為頁面中某一類標記指定統一的CSS樣式。
語法格式：
標記名｛屬性 1：屬性值 1；屬性 2：屬性值 2；屬性 3：屬性值 3；｝
例4：
在這個例子中，使用了標記選擇器p，定義css樣式為顏色并設為藍色，這讓正文中所有<p>標記作用的文字變成藍色。
?類選擇器
類選擇器使用“.”（英文點號）進行標識，后面緊跟類名。
語法格式：
.類名｛屬性 1：屬性值 1；屬性 2：屬性值 2；屬性 3：屬性值 3；｝
例5：
在這個例子中，使用了類選擇器.p1，定義css樣式為顏色并設為紅色，這讓正文中所有引用了p1選擇器的標記作用的文字變成紅色。
?id選擇器
id選擇器使用“#”進行標識，后面緊跟id名。
語法格式：
#id名｛屬性 1：屬性值 1；屬性 2：屬性值 2；屬性 3：屬性值 3；｝
例6：
在這個例子中，使用了id選擇器.p1，定義css樣式為顏色并設為灰色，這讓正文中所有引用了p2選擇器的標記作用的文字變成灰色。
?通配符選擇器
通配符選擇器用“*”號表示，它是所有選擇器中作用范圍最廣的，能匹配頁面中所有的元素。
語法格式：
*｛屬性 1：屬性值 1；屬性 2：屬性值 2；屬性 3：屬性值 3；｝
例7：
在這個例子中，使用了通配符選擇器*，定義css樣式為顏色并設為綠色，這讓正文中所有文字標記作用的文字變成綠色。
(4)CSS控制文本樣式常用屬性
?font-size屬性用于設置字號，最常用的單位為px，也可以用em、pt等單位。
例8：
?font-family屬性用于設置字體，定義幾種不同的字體，并用逗號隔開，當瀏覽器找不到字體一時，將會用字體二代替，以此類推。當瀏覽器完全找不到字體時，則使用默認字體（宋體）。
例9：
?font-weight屬性用于定義字體的粗細，常見取值有：normal（默認值）、bold（加粗）、bolder（更粗）、lighter（更細）、100~900（100的整數倍）。其中400等同于normal，700等同于bold，值越大字體越粗。
例10：
?font-style屬性用于定義字體風格。常見取值有：normal（默認值，瀏覽器顯示一個標準的字體樣式）、italic（瀏覽器會顯示斜體的字體樣式）、oblique（瀏覽器會顯示傾斜的字體樣式）。
例11：
?font屬性用于對字體樣式進行綜合設置，可設置的屬性是（按順序）："font-style font-variant font-weight font-size / line-height font-family"。font-size和font-family的值是必需的。如果缺少了其他值，默認值將被插入，如果有默認值的話。注意：line-height屬性設置行與行之間的空間。
例12：
?color屬性用于定義文本的顏色，其取值方式為：有顏色英文單詞、十六進制、RGB代碼。
例13：
?letter-spacing屬性用于定義字間距。字間距是指字符與字符之間的空白。其屬性值可為不同單位的數值，允許使用負值，默認為normal。
例14：
?line-height屬性用于設置行間距。行間距是指行與行之間的距離，即字符的垂直間距，一般稱為行高。常用的屬性值單位有三種，分別為像素(px)、相對值(em)和百分比(%)，實際工作中使用最多的是像素(px)。
例15：
?text-align屬性用于設置文本內容水平對齊，相當于HTML中的align對齊屬性。常用屬性值有left（左對齊）、right（右對齊）、center（居中對齊）。
例16：
?text-decoration屬性用于設置文本的下劃線、上劃線、刪除線等裝飾效果。常用取值有：none（默認值，沒有裝飾）、underline（下劃線）、overline（上劃線）、line-through（刪除線）。
例17：
?text-indent屬性用于設置首行文本的縮進。其屬性值可為不同單位的數值、字符寬度的倍數(em)，或相對于瀏覽器窗口寬度的百分比(%)。允許使用負值，建議使用em作為設置單位。
例18：
?background-color屬性，用于定義背景顏色，取值為有顏色英文關鍵字、RGB值。transparent表示透明，也是瀏覽器的默認值。
例19：
(5)CSS常用復合選擇器
?標記指定選擇器
標簽指定式選擇器又稱交集選擇器，由兩個選擇器構成，其中第一個為標記選擇器，第二個為class選擇器或id選擇器，兩個選擇器之間不能有空格，如h3.special或p#one。
例20：
思考：仔細觀察正文三段文字顏色，想想為什么是這個顏色？
?后代選擇器
后代選擇器用來選擇元素或元素組的后代，其寫法就是把外層標記寫在前面，內層標記寫在后面，中間用空格分隔。當標記發生嵌套時，內層標記就成為外層標記的后代。
例21：
?并集選擇器
并集選擇器是各個選擇器通過逗號連接而成的，任何形式的選擇器都可以作為并集選擇器的一部分。若某些選擇器定義的樣式完全或部分相同，可利用并集選擇器為它們定義相同的樣式。
例22：
(6)CSS高級特性
層疊性和繼承性是CSS的基本概念，深入理解和熟練運用它們可以幫助開發者更好地掌握CSS編程。
?層疊性(Cascade)
層疊性指的是當多個選擇器同時應用于同一個元素時，CSS規定了一套層疊規則來確定哪個樣式優先級更高，從而決定最終應用于元素的樣式。
層疊規則包括選擇器的特殊性(specificity)、重要性（！important）和源順序(source order)等因素。通過計算這些因素，CSS會按照一定的優先級順序應用樣式，最終得到應用于元素的樣式。
一般情況下，特殊性優先級最高，其次是重要性，最后是源順序。但在實際應用中，應當盡量避免過度使用重要性，保持源順序的一致性。
例23：
?繼承性(Inheritance)
繼承性指的是元素會從父元素繼承某些樣式屬性的值。具體來說，某些CSS屬性的值會被傳遞給其子元素。
樣式屬性的繼承性是由CSS規范來定義的，例如color、font-family、text-align等屬性具有繼承性，而width、height、border等屬性則不具有繼承性。
父元素的樣式只有在子元素沒有自己定義相同屬性的樣式的情況下才會被繼承。
可以使用inherit關鍵字來顯式地指定某個屬性的值從父元素繼承。
例24：
在上面的例子中，父元素<div>引用了類名為"parent"的樣式，設置了顏色為藍色和字體大小為20像素。子元素<p>引用了類名為"child"的樣式，沒有定義顏色和字體大小屬性，但繼承了父元素的顏色和字體大小，因此它的文字顏色將是藍色，字體大小是20像素。子元素自身設置了字體加粗的樣式，所以文字將會顯示為加粗字體。
通過這個示例可以看到，子元素的樣式繼承了父元素的相關樣式屬性，這體現了CSS的繼承性特點。
(7)CSS優先級
CSS優先級按從高到低的順序排列：
?！important：使用！important聲明的樣式具有最高優先級，并會覆蓋任何其他規則。
?內聯樣式：直接在HTML元素的style屬性中定義的樣式具有較高的優先級。
?id選擇器：使用id選擇器（如#id）指定的樣式具有比類選擇器和標簽選擇器更高的優先級。
?類選擇器、屬性選擇器和偽類選擇器：使用類選擇器（如.class）、屬性選擇器（如［attribute］）和偽類選擇器（如：hover）指定的樣式具有比標簽選擇器更高的優先級。
?標簽選擇器：使用標簽選擇器（如p、div）指定的樣式是最基本的選擇器，具有較低的優先級。
?通配符選擇器：使用*指定的樣式具有較低的優先級。
當多個規則應用于同一個元素時，CSS會根據這些規則的優先級來決定最終應用哪個樣式。如果多個規則具有相同的優先級，則會根據源順序來決定應用哪個樣式。
需要注意的是，盡管！important具有最高優先級，但過度使用！important會導致樣式表的維護困難，不易于重寫和擴展。因此，應謹慎使用！important，并盡量遵循良好的CSS編碼習慣。