HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)教程第11章-CSS3概述

第1頁(yè)第11章CSS3概述本章概述本章的學(xué)習(xí)目標(biāo)主要內(nèi)容第2頁(yè)本章概述在過(guò)去,Web頁(yè)面的許多視覺(jué)效果都是由標(biāo)記元素來(lái)描述,直接把表示頁(yè)面結(jié)構(gòu)的標(biāo)記與表示頁(yè)面外觀的標(biāo)記或?qū)傩曰旌显谝黄?HTML就是這樣的標(biāo)記語(yǔ)言。然而,之后出現(xiàn)的嚴(yán)格的XHTML則不允許出現(xiàn)用于描述外觀的元素與特性,標(biāo)記語(yǔ)言只是用于描述頁(yè)面結(jié)構(gòu)。描述外觀的工作則交給用層疊樣式表（CascadingStyleSheet,CSS）語(yǔ)法編寫的樣式表來(lái)完成。標(biāo)記與樣式之間的職責(zé)區(qū)分為Web頁(yè)面的開(kāi)發(fā)、維護(hù),甚至運(yùn)行性能都帶來(lái)了諸多益處,而這種解決方案與僅僅使用標(biāo)記相比,優(yōu)勢(shì)巨大。第3頁(yè)本章的學(xué)習(xí)目標(biāo)CSS發(fā)展歷史；為文檔應(yīng)用CSS的3種方式；了解CSS3的新增特性；了解查看CSS3兼容性的方法。第4頁(yè)主要內(nèi)容11.1CSS變遷11.2了解CSS3新增特性11.3CSS3兼容性速查11.4本章小結(jié)第5頁(yè)11.1CSS變遷11.1.1CSS產(chǎn)生的原因11.1.2CSS發(fā)展歷史11.1.3HelloCSSWorld11.1.4為文檔應(yīng)用CSS的方式第6頁(yè)11.1.1CSS產(chǎn)生的原因HTML的設(shè)計(jì)初衷并不是為了描述外觀,HTML本身也并不善于此道。而早起的HTML卻是既要負(fù)責(zé)文檔結(jié)構(gòu)又要負(fù)責(zé)文檔樣式,任務(wù)太重。因此,后來(lái)人們用HTML標(biāo)記語(yǔ)言描述頁(yè)面的結(jié)構(gòu),而將表示網(wǎng)頁(yè)外觀的功能標(biāo)記或?qū)傩苑蛛x出來(lái),這就形成了表示網(wǎng)頁(yè)外觀的替代方法——層疊樣式表(CascadingStyleSheet,CSS)。第7頁(yè)11.1.2CSS發(fā)展歷史1994年哈坤?利提出了CSS的最初建議。伯特?波斯（BertBos）當(dāng)時(shí)正在設(shè)計(jì)一個(gè)叫做Argo的瀏覽器,他們決定一起合作設(shè)計(jì)CSS。第8頁(yè)11.1.3HelloCSSWorld詳情見(jiàn)【例11-1】一個(gè)使用CSS樣式表現(xiàn)網(wǎng)頁(yè)外觀的例子。第9頁(yè)11.1.4為文檔應(yīng)用CSS的方式CSS提供了3種使用方式:第一，內(nèi)聯(lián)樣式表，通過(guò)HTML元素的style屬性直接將樣式嵌入HTML標(biāo)記中；第二，樣式規(guī)則塊，將表示樣式的style屬性的內(nèi)容，全部提到公共的樣式規(guī)則塊中，以方便管理和擴(kuò)展；第三，外部鏈接樣式文件，將樣式徹底獨(dú)立成一個(gè)文件，供任何頁(yè)面調(diào)用。第10頁(yè)主要內(nèi)容11.1CSS變遷11.2了解CSS3新增特性11.3CSS3兼容性速查11.4本章小結(jié)第11頁(yè)11.2了解CSS3新增特性11.2.1CSS3選擇器11.2.2引用服務(wù)端字體11.2.3換行處理11.2.4文字渲染11.2.5多列布局11.2.6邊框和顏色11.2.7漸變效果11.2.8陰影和反射效果11.2.9背景效果11.2.10盒子模型11.2.11過(guò)渡、形變與動(dòng)畫(huà)第12頁(yè)11.2.1CSS3選擇器CSS3在CSS2基礎(chǔ)上提供了更多更加方便快捷的選擇器，例如:tbody:nth-child(even)，nth-child(odd),:not(.textinput),div:first-child,E:nth-last-child(n)、E:nth-of-type(n)、E:nth-last-of-type(n)、E:last-child、E:first-of-type、E:only-child、E:only-of-type、E:empty、E:checked、E:enabled、E:disabled、E::selection、E:not(s)，利用這些新特性，可以極大程度地減少無(wú)畏代碼。第13頁(yè)11.2.2引用服務(wù)端字體當(dāng)未在客戶端安裝字體樣式時(shí)，在CSS3中，可以使用服務(wù)端字體，代碼如下:@font-face{font-family:BorderWeb;src:url(BORDERW0.eot);}以上代碼聲明了服務(wù)端字體BORDERW0.eot，冠以“BorderWeb”的字體名稱。聲明之后即可在頁(yè)面中使用了:“FONT-FAMILY:"BorderWeb"”。第14頁(yè)11.2.3換行處理word-wrap屬性主要用于指定當(dāng)當(dāng)前行超過(guò)指定容器的邊界時(shí)如何處理的操作。第15頁(yè)11.2.4文字渲染CSS3開(kāi)始支持對(duì)文字進(jìn)行更深層次的渲染，示例代碼如下:div{-webkit-text-fill-color:black;-webkit-text-stroke-color:red;-webkit-text-stroke-width:2.75px;}第16頁(yè)11.2.5多列布局.multi_column_style{-webkit-column-count:3;-webkit-column-rule:1pxsolid#bbb;-webkit-column-gap:2em;}<divclass="multi_column_style">……</div>這段代碼中,column-count屬性表示布局幾列；Column-rule屬性表示列與列之間的間隔條的樣式；Column-gap屬性表示列于列之間的間隔。第17頁(yè)11.2.6邊框和顏色CSS3對(duì)顏色提供了透明度的支持，示例代碼如下:color:rgba(255,0,0,0.75);background:rgba(0,0,255,0.75);對(duì)于border，CSS3提供了圓角的支持，示例代碼如下:border-radius:15px;第18頁(yè)11.2.7漸變效果線性漸變:繪制左上（0%0%）到右上（0%100%）即從左到右水平漸變，代碼如下:background-image:-webkit-gradient(linear,0%0%,100%0%,from(#2A8BBE),to(#FE280E));徑向漸變:下面是目標(biāo)半徑為0的漸變的代碼:backgroud:-webkit-gradient(radial,5050,50,5050,0,from(black),color-stop(0.5,red),to(blue));第19頁(yè)11.2.8陰影和反射效果陰影效果既可用于普通元素，也可用于文字，例如:.class1{text-shadow:5px2px6pxrgba(64,64,64,0.5);}.class2{box-shadow:3px3px3pxrgba(0,64,128,0.3);}第20頁(yè)11.2.8陰影和反射效果還可以使用新增的反射功能來(lái)繪制出水中倒影的效果，示例代碼如下:.classReflect{-webkit-box-reflect:below10px-webkit-gradient(linear,lefttop,leftbottom,from(transparent),to(rgba(255,255,255,0.51)));}第21頁(yè)11.2.9背景效果CSS3中新增了關(guān)于背景的屬性，例如，BackgroundClip屬性用于確定背景畫(huà)區(qū)，取值如下: border-box:背景從border開(kāi)始顯示。 padding-box:背景從padding開(kāi)始顯示。 content-box:背景從content區(qū)域開(kāi)始顯示。 no-clip:默認(rèn)屬性，等同于border-box。第22頁(yè)11.2.10盒子模型盒子模型為開(kāi)發(fā)者提供了一種非常靈活的布局方式，但是支持這一特性的瀏覽器并不多，目前只有webkit內(nèi)核的新版本safari和chrome以及gecko內(nèi)核的新版本firefox。下面是一個(gè)盒子模型的示例代碼:<divclass="boxcontainer"><divclass="item">1</div><divclass="item">2</div><divclass="item">3</div><divclass="itemflex">4</div></div>第23頁(yè)11.2.11過(guò)渡、形變與動(dòng)畫(huà)在CSS3中,可以通過(guò)Transitions實(shí)現(xiàn)過(guò)渡,Transform實(shí)現(xiàn)形變,Animation實(shí)現(xiàn)動(dòng)畫(huà)。第24頁(yè)主要內(nèi)容11.1CSS變遷11.2了解CSS3新增特性11.3CSS3兼容性速查11.4本章小結(jié)第25頁(yè)11.3CSS3兼容性速查本書(shū)推薦常用的CSS3兼容性速查表:/，在搜索框