HTML5網(wǎng)頁(yè)設(shè)計(jì)課程的CSS3教學(xué)拓展

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

（韓山師范學(xué)院計(jì)算機(jī)與信息工程學(xué)院，潮州 521041）

0 引言

HTML5是HTML標(biāo)準(zhǔn)的第五次修訂，由W3C推薦，它的開(kāi)發(fā)目標(biāo)是為桌面和移動(dòng)平臺(tái)帶來(lái)無(wú)縫銜接的豐富內(nèi)容?；谄鋸V泛的應(yīng)用前景，HTML5已成為當(dāng)前網(wǎng)頁(yè)設(shè)計(jì)的主要技術(shù)，也是高?！毒W(wǎng)頁(yè)設(shè)計(jì)與制作》課程的基礎(chǔ)內(nèi)容。網(wǎng)頁(yè)設(shè)計(jì)離不開(kāi)網(wǎng)頁(yè)排版的層疊樣式表CSS，CSS3是當(dāng)前最新的CSS技術(shù)，有效運(yùn)用CSS3可令網(wǎng)頁(yè)的布局更加靈活，頁(yè)面效果更新穎美觀，其圖形圖像特效和動(dòng)畫(huà)效果已經(jīng)能夠取代Flash或JavaScript的很多特效。脫離了CSS3，HTML5將黯然失色無(wú)法展示其強(qiáng)大的支撐能力。本文重點(diǎn)闡述CSS3的擴(kuò)展功能，以簡(jiǎn)明有代表性的案例對(duì)CSS3技術(shù)應(yīng)用進(jìn)行探討，并以此作為HTML5網(wǎng)頁(yè)的教學(xué)拓展。

1 CSS3新技術(shù)概述

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

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

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

（3）@font-face：允許用戶(hù)輸入自己的字體出現(xiàn)在網(wǎng)站上,即使該特定的字體在終端計(jì)算機(jī)上沒(méi)有安裝；

（4）動(dòng)畫(huà)：使用@keyframes規(guī)則創(chuàng)建由當(dāng)前樣式逐漸改為新樣式的動(dòng)畫(huà)效果；

（5）漸變色：允許元素設(shè)置背景雙色或多色、線(xiàn)性或徑向等平穩(wěn)過(guò)渡的漸變色；

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

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

（8）文字陰影：設(shè)置文字陰影效果。

2 CSS3新技術(shù)對(duì)盒子背景、圖像、表格的支持

2.1 背景漸變色

以下代碼實(shí)現(xiàn)紅、黃、藍(lán)線(xiàn)性漸變的背景色，網(wǎng)頁(yè)效果如圖 1（a）。

若將最后“background”屬性修改如下則實(shí)現(xiàn)紅、黃、藍(lán)徑向漸變的背景色，網(wǎng)頁(yè)效果如圖1（b）。

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

CSS3定義漸變的顏色數(shù)可以多于等于2種，各顏色間用逗號(hào)（,）分隔開(kāi)。

圖1 漸變的背景色

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

以下代碼實(shí)現(xiàn)圖像的半透明、圓角及陰影特效，原圖及其網(wǎng)頁(yè)效果如圖2。

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

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

2.3 多圖像背景

以下代碼實(shí)現(xiàn)將三張圖像設(shè)置成重疊背景，原圖及重疊背景網(wǎng)頁(yè)效果如圖3。

當(dāng)設(shè)置多張圖像時(shí)，這些背景圖是分層的，先讀入的圖像將置于最前端。

2.4 CSS 3的圓角表格

CSS3的圓角功能不僅能對(duì)圖像產(chǎn)生效果，其對(duì)表格元素同樣可以實(shí)現(xiàn)，以下CSS3樣式就能將表格及表項(xiàng)都設(shè)置成圓角，效果如圖4所示。

圖4 圓角表格效果

圖3 三張圖像原圖及其重疊圖像背景的網(wǎng)頁(yè)效果

3 CSS3的動(dòng)態(tài)導(dǎo)航設(shè)計(jì)

3.1 “transform”實(shí)現(xiàn)形變導(dǎo)航按鈕

CSS3的“transform”形變功能可以實(shí)現(xiàn)對(duì)象的變形變換，以下CSS3樣式可實(shí)現(xiàn)導(dǎo)航區(qū)的按鈕旋轉(zhuǎn)觸發(fā)特效。效果如圖5所示。

CSS3的“transform”功能可以實(shí)現(xiàn)旋轉(zhuǎn)（rotate）、縮放（scale）、傾斜（skew）等多種形變，這樣能使網(wǎng)頁(yè)元素具有一定的動(dòng)感功能，而這樣以功能在傳統(tǒng)網(wǎng)頁(yè)制作上是需要借助Flash或JavaScript才能實(shí)現(xiàn)的。

圖5 能旋轉(zhuǎn)形變的導(dǎo)航區(qū)按鈕

3.2 CSS “3transition”實(shí)現(xiàn)動(dòng)態(tài)下拉菜單

除了transform變形動(dòng)畫(huà)功能，CSS3還有“transition”過(guò)渡動(dòng)畫(huà)功能。很多常規(guī)JavaScript處理功能也可用之高效取代，以下代碼就是直接運(yùn)用CSS3實(shí)現(xiàn)下拉菜單的樣式代碼，其中關(guān)鍵步驟是用“transition”屬性實(shí)現(xiàn)菜單向下漸慢“彈出”的過(guò)渡效果。網(wǎng)頁(yè)效果如圖6。

transition用于設(shè)置對(duì)象在一定的時(shí)間內(nèi)平滑地狀態(tài)過(guò)渡，其過(guò)渡方式非常多，除“ease”逐漸變慢外，還有“l(fā)inear”勻速、“ease-in”加速、“cubic-bezier”cubic-bezier曲線(xiàn)等，其選擇性多應(yīng)用非常靈活。

圖6 CSS3實(shí)現(xiàn)網(wǎng)頁(yè)下拉菜單效果

4 結(jié)語(yǔ)

HTML5及CSS3在推出早期并不能兼容于所有瀏覽器，部分瀏覽器還需要編寫(xiě)專(zhuān)用的CSS3私有屬性才能顯示效果[2]。但隨著Internet不斷發(fā)展，用戶(hù)對(duì)網(wǎng)頁(yè)頁(yè)面效果的訴求越來(lái)越強(qiáng)列，CSS3技術(shù)的優(yōu)越性使大多數(shù)瀏覽器紛紛認(rèn)同并大力支持，其樣式修飾功能是其他技術(shù)無(wú)法替代的。因此，在學(xué)習(xí)HTML5網(wǎng)頁(yè)開(kāi)發(fā)時(shí)緊密結(jié)合CSS3技術(shù)，只有不斷挖掘、認(rèn)真實(shí)踐、正確運(yùn)用CSS3，才能讓網(wǎng)站網(wǎng)頁(yè)更長(zhǎng)遠(yuǎn)地立足于Internet中不容易落伍淘汰。

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

[2]劉增杰,臧順娟,何楚斌.精通HTML5+CSS3+JavaScript網(wǎng)頁(yè)設(shè)計(jì)[M].北京：清華大學(xué)出版社,2012.8.