HTML5網頁設計課程的CSS3教學拓展

江玉珍，朱映輝，黃偉，陸錫聰

（韓山師范學院計算機與信息工程學院，潮州 521041）

0 引言

HTML5是HTML標準的第五次修訂，由W3C推薦，它的開發目標是為桌面和移動平臺帶來無縫銜接的豐富內容。基于其廣泛的應用前景，HTML5已成為當前網頁設計的主要技術，也是高校《網頁設計與制作》課程的基礎內容。網頁設計離不開網頁排版的層疊樣式表CSS，CSS3是當前最新的CSS技術，有效運用CSS3可令網頁的布局更加靈活，頁面效果更新穎美觀，其圖形圖像特效和動畫效果已經能夠取代Flash或JavaScript的很多特效。脫離了CSS3，HTML5將黯然失色無法展示其強大的支撐能力。本文重點闡述CSS3的擴展功能，以簡明有代表性的案例對CSS3技術應用進行探討，并以此作為HTML5網頁的教學拓展。

1 CSS3新技術概述

CSS即層疊樣式表（Cascading StyleSheet）。在網頁制作時采用層疊樣式表技術，可以有效地對頁面的布局、字體、顏色、背景和其他效果實現更加精確的控制[1]。CSS3是CSS技術的升級版本，相比原來的CSS2版本，CSS3新增了八大功能，分別如下。

（1）圓角：可以指定一個元素的任意一個角或全部角為圓角，還可以設置圓角的半徑（即曲度）；

（2）多背景：在CSS3中可以在一個元素中顯示多個背景圖像，還可以將多個背景圖像進行重疊顯示；

（3）@font-face：允許用戶輸入自己的字體出現在網站上,即使該特定的字體在終端計算機上沒有安裝；

（4）動畫：使用@keyframes規則創建由當前樣式逐漸改為新樣式的動畫效果；

（5）漸變色：允許元素設置背景雙色或多色、線性或徑向等平穩過渡的漸變色；

（6）box-陰影：可為盒子元素圖像元素等添加陰影，陰影可設置為半透明的或漸變色；

（7）RGBa-透明色：RGBa中的a代表透明色，用于設置元素不透明度。

（8）文字陰影：設置文字陰影效果。

2 CSS3新技術對盒子背景、圖像、表格的支持

2.1 背景漸變色

以下代碼實現紅、黃、藍線性漸變的背景色，網頁效果如圖 1（a）。

若將最后“background”屬性修改如下則實現紅、黃、藍徑向漸變的背景色，網頁效果如圖1（b）。

background:radial-gradient（red,yellow,blue）;

CSS3定義漸變的顏色數可以多于等于2種，各顏色間用逗號（,）分隔開。

圖1 漸變的背景色

2.2 CSS 3半透明、圓角、陰影圖像特效

以下代碼實現圖像的半透明、圓角及陰影特效，原圖及其網頁效果如圖2。

圖2 圖像的半透明、圓角及陰影效果

其中，opacity屬性的值在0～1之間，值越小圖像越透明。border-radius屬性通常有三種取值：屬性值只有一個值時，如“border-radius:70px”表示四個邊角均為半徑70px圓角；屬性值有2個值時表示兩對對角的圓角設置；屬性值有4個值時按左上、右上、右下和左下分別表示各個角圓角設置。

2.3 多圖像背景

以下代碼實現將三張圖像設置成重疊背景，原圖及重疊背景網頁效果如圖3。

當設置多張圖像時，這些背景圖是分層的，先讀入的圖像將置于最前端。

2.4 CSS 3的圓角表格

CSS3的圓角功能不僅能對圖像產生效果，其對表格元素同樣可以實現，以下CSS3樣式就能將表格及表項都設置成圓角，效果如圖4所示。

圖4 圓角表格效果

圖3 三張圖像原圖及其重疊圖像背景的網頁效果

3 CSS3的動態導航設計

3.1 “transform”實現形變導航按鈕

CSS3的“transform”形變功能可以實現對象的變形變換，以下CSS3樣式可實現導航區的按鈕旋轉觸發特效。效果如圖5所示。

CSS3的“transform”功能可以實現旋轉（rotate）、縮放（scale）、傾斜（skew）等多種形變，這樣能使網頁元素具有一定的動感功能，而這樣以功能在傳統網頁制作上是需要借助Flash或JavaScript才能實現的。

圖5 能旋轉形變的導航區按鈕

3.2 CSS “3transition”實現動態下拉菜單

除了transform變形動畫功能，CSS3還有“transition”過渡動畫功能。很多常規JavaScript處理功能也可用之高效取代，以下代碼就是直接運用CSS3實現下拉菜單的樣式代碼，其中關鍵步驟是用“transition”屬性實現菜單向下漸慢“彈出”的過渡效果。網頁效果如圖6。

transition用于設置對象在一定的時間內平滑地狀態過渡，其過渡方式非常多，除“ease”逐漸變慢外，還有“linear”勻速、“ease-in”加速、“cubic-bezier”cubic-bezier曲線等，其選擇性多應用非常靈活。

圖6 CSS3實現網頁下拉菜單效果

4 結語

HTML5及CSS3在推出早期并不能兼容于所有瀏覽器，部分瀏覽器還需要編寫專用的CSS3私有屬性才能顯示效果[2]。但隨著Internet不斷發展，用戶對網頁頁面效果的訴求越來越強列，CSS3技術的優越性使大多數瀏覽器紛紛認同并大力支持，其樣式修飾功能是其他技術無法替代的。因此，在學習HTML5網頁開發時緊密結合CSS3技術，只有不斷挖掘、認真實踐、正確運用CSS3，才能讓網站網頁更長遠地立足于Internet中不容易落伍淘汰。

[1]陳建孝,江玉珍,陸錫聰,余曉春.網頁制作案例教程[M].北京:人民郵電出版社,2017.1.

[2]劉增杰,臧順娟,何楚斌.精通HTML5+CSS3+JavaScript網頁設計[M].北京：清華大學出版社,2012.8.