1、目錄目錄2第 1 章 CSS3 簡(jiǎn)介41.1CSS3 的現(xiàn)狀41.2如何對(duì)待4準(zhǔn)備工作4第 2 章2.1環(huán)境42.1如何使用手冊(cè)5基礎(chǔ)知識(shí)5第 3 章3.1選擇器53.1.1屬性選擇器53.1.2偽類(lèi)選擇器63.1.3偽元素選擇器63.2顏色73.3文本83.4邊框83.4.1邊框圓角83.4.2邊框. 93.4.3邊框陰影93.5盒模型113.6背景123.7漸變123.7.1線性漸變133.7.2徑向漸變133.82D 轉(zhuǎn)換153.9過(guò)渡143.103D 轉(zhuǎn)換163.11動(dòng)畫(huà)173.12伸縮布局183.13多列布局20第 4 章 Web 字體204.1字體格式204.2字體圖標(biāo)21第 5

2、章 兼容性22第 6 章 高級(jí)應(yīng)用22第1章CSS3 簡(jiǎn)介如同人類(lèi)的的進(jìn)化一樣，CSS3 是 CSS2 的“進(jìn)化”版本，在 CSS2 基礎(chǔ)上，增強(qiáng)或新增了許多特性， 彌補(bǔ)了 CSS2 的眾多不足之處，使得 Web 開(kāi)發(fā)變得更為高效和便捷。1.1 CSS3 的現(xiàn)狀1、瀏覽器支持程度差，需要添加私有前綴2、移動(dòng)端支持優(yōu)于 PC 端3、不斷改進(jìn)中4、應(yīng)用相對(duì)廣泛1.2如何對(duì)待1、堅(jiān)持漸進(jìn)增強(qiáng)原則2、考慮用戶群體3、遵照產(chǎn)品的方案4、聽(tīng)s 的第2章準(zhǔn)備工作2.1環(huán)境由于 CSS3 兼容性問(wèn)題的普遍存在，為了避免因兼容性帶來(lái)的干擾，約定的環(huán)境，以保證學(xué)習(xí)的效率，在最后會(huì)單獨(dú)說(shuō)明兼容性的問(wèn)題。1、Chro

3、me 瀏覽器 ver46+2、Firefox 瀏覽器 firefox 42+3、PhotoShop CS6（建議）2.1如何使用手冊(cè)學(xué)會(huì)使用工具，可以讓事半功倍。表示全部可選項(xiàng)|表示或者|表示多選一？表示 0 個(gè)或者 1 個(gè)*表示 0 個(gè)或者多個(gè)表示范圍第3章基礎(chǔ)知識(shí)3.1選擇器CSS3 新增了許多靈活查找元素的方法，極大的提高了查找元素的效率和精準(zhǔn)度。CSS3 選擇器與 jQuery 中所提供的絕大部分選擇器兼容。3.1.1 屬性選擇器其特點(diǎn)是通過(guò)屬性來(lái)選擇元素，具體有以下 7 種形式：1、Eattr 表示存在 attr 屬性即可；2、Eattr=val 表示屬性值完全等于 val；3、Ea

4、ttr*=val表示的屬性值里包含 val 字符并且在“任意”位置；4、Eattr=val表示的屬性值里包含 val 字符并且在“開(kāi)始”位置；5、Eattr$=val表示的屬性值里包含 val 字符并且在“結(jié)束”位置；3.1.2 偽類(lèi)選擇器除了以前學(xué)過(guò)的:link、:active、:visited、:hover，CSS3 又新增了其它的偽類(lèi)選擇器。1、以某元素相對(duì)于其父元素或兄弟元素的位置來(lái)獲取無(wú)素的結(jié)構(gòu)偽類(lèi)。重點(diǎn)理解通過(guò) E 來(lái)確定元素的父元素。E:-child 第一個(gè)子元素E:last-child 最后一個(gè)子元素E:nth-child(n) 第 n 個(gè)子元素，計(jì)算方法是 E 元素的全部兄弟

5、元素；E:nth-last-child(n) 同 E:nth-child(n) 相似，只是倒著計(jì)算；n 遵循線性變化，其取值 0、1、2、3、4、. 但是當(dāng) n=0 時(shí)，選取無(wú)效。n多種形式：nth-child(2n)、nth-child(2n+1)、nth-child(-1n+5)等；E:empty 選中沒(méi)有任何子節(jié)點(diǎn)的 E 元素；（使用不是非常廣泛）2、目標(biāo)偽類(lèi)E:結(jié)合進(jìn)行使用，處于當(dāng)前的元素會(huì)被選中；3.1.3 偽元素選擇器E:-letter 文本的第一個(gè)單詞或字（如中文、日文、韓文等）；E:-line 文本第一行；重點(diǎn)：E:before、E:after是一個(gè)行內(nèi)元素，需要轉(zhuǎn)換成塊元素E

6、:after、E:before 在舊版本里是偽類(lèi)，在新版本里是偽元素，新版本下E:after、E:before 會(huì)被自動(dòng)識(shí)別為 E:after、E:before，按偽元素來(lái)對(duì)待，這樣做的目的是用來(lái)做兼容處理。E:after、E:before 后面的練習(xí)中會(huì)反復(fù)用到，目前只需要有個(gè)大致了解E:selection 可改變選中文本的樣式；: 與 : 區(qū)別在于區(qū)分偽類(lèi)和偽元素3.2顏色新增了 RGBA、HSLA 模式，其中的 A 表示通道，即可以設(shè)置顏色，相較 opacity，它們不具有繼承性，即不會(huì)影響子元素的值的。Red、Green、Blue、Alpha 即 RGBAHue、Saturation、

7、Lightness、Alpha 即 HSLAR、G、B 取值范圍 0255H色調(diào) 取值范圍 0360，0/360 表示紅色、120 表示綠色、240 表示藍(lán)色S飽和度 取值范圍 0%100%L 亮度取值范圍 0%100%A取值范圍 01關(guān)于：1、opacity 只能針對(duì)整個(gè)盒子設(shè)置，子盒子及內(nèi)容會(huì)繼承父盒子的透明度；2 、transparent 不可調(diào)節(jié)，始終完全透明RGBA、HSLA 可應(yīng)用于所有使用顏色的地方。3.3 文本text-shadow，可分別設(shè)置偏移量、模糊度、顏色（可設(shè)）。1、水平偏移量 正值向右 負(fù)值向左；2、垂直偏移量 正值向下 負(fù)值向上；3、模糊度是不能為負(fù)值；3.4 邊

8、框其中邊框圓角、邊框陰影屬性，應(yīng)用十分廣泛，兼容性也相對(duì)較好，具有符合漸進(jìn)增強(qiáng)原則的特征，需要重點(diǎn)掌握。3.4.1 邊框圓角border-radius圓角處理時(shí)，腦中要形成圓、圓心、橫軸、縱軸的概念，正圓是橢圓的一種特殊情況。如下圖可分別設(shè)置長(zhǎng)、短半徑，以“/”進(jìn)行分隔，遵循“1，2，3，4”規(guī)則，“/”前面的 14 個(gè)用來(lái)設(shè)置橫軸半徑（分別對(duì)應(yīng)橫軸 1、2、3、4 位置 ），“/”后面 14 個(gè)參數(shù)用來(lái)設(shè)置縱軸半徑（分別對(duì)應(yīng)縱軸 1、2、3、4 位置 ）3.4.2 邊框陰影box-shadow1、水平偏移量 正值向右 負(fù)值向左；2、垂直偏移量 正值向下 負(fù)值向上；3、模糊度是不能為負(fù)值；4、

9、inset 可以設(shè)置內(nèi)陰影；設(shè)置邊框陰影不會(huì)改變盒子的大小，即不會(huì)影響其兄弟元素的布局。可以設(shè)置多重邊框陰影，實(shí)現(xiàn)更好的效果，增強(qiáng)感。3.4.3 邊框border-image設(shè)置的將會(huì)被“切割”成九宮格形式，然后進(jìn)行設(shè)置。如下圖“切割”完成后生成虛擬的 9 塊圖形，然后按對(duì)應(yīng)位置設(shè)置背景，其中四個(gè)角位置、形狀保持不變，中心位置水平垂直兩個(gè)方向平鋪。如下圖1、round 和 repeat 之間的區(qū)別round會(huì)自動(dòng)調(diào)整尺寸，完整顯示邊框。repeat單純平鋪多余部分，會(huì)被“裁切”而不能完整顯示。2、更改裁切尺寸background-slice: 34 36 27 27 分別設(shè)置裁切如下圖關(guān)于邊框

10、重點(diǎn)理解 9 宮格的裁切及平鋪方式，實(shí)際開(kāi)發(fā)中應(yīng)用不廣泛，但是如能靈活動(dòng)用會(huì)給帶來(lái)不少便利。3.5 盒模型CSS3 中可以通過(guò) box-sizing 來(lái)指定盒模型，即可指定為 content-box、border-box，這樣計(jì)算盒子大小的方式就發(fā)生了改變。可以分成兩種情況：1、box-sizing: border-box計(jì)算方式為 width = border + padding + content2、box-sizing: content-box計(jì)算方式為 width = content3.6 背景背景在 CSS3 中也得到很大程度的增強(qiáng)，比如背景尺寸、背景裁切區(qū)域、背景定位參照點(diǎn)、多重背

11、景等。1、background-size 設(shè)置背景的尺寸cover 會(huì)自動(dòng)調(diào)整縮放比例，保證始終填充滿背景區(qū)域，溢出部分則會(huì)被隱藏。contain 會(huì)自動(dòng)調(diào)整縮放比例，保證始終完整顯示在背景區(qū)域。也可以使用長(zhǎng)度或百分比2、background-origin 設(shè)置背景定位的原點(diǎn)border-box 以邊框做為參考原點(diǎn)；padding-box 以內(nèi)邊距做為參考原點(diǎn)；content-box 以內(nèi)容區(qū)做為參考點(diǎn)；3、background-clip 設(shè)置背景區(qū)域裁切border-box 裁切邊框以內(nèi)為背景區(qū)域；padding-box 裁切內(nèi)邊距以內(nèi)為背景區(qū)域；content-box 裁切內(nèi)容區(qū)做為背景區(qū)

12、域；4、以逗號(hào)分隔可以設(shè)置多背景，可用于自適應(yīng)局背景尺寸在實(shí)際開(kāi)發(fā)中應(yīng)用十分廣泛。3.7漸變漸變是 CSS3 當(dāng)中比較豐富多彩的一個(gè)特性，通過(guò)漸變可以實(shí)現(xiàn)許多炫麗的效果，有效的減少的使用數(shù)量，并且具有很強(qiáng)的適應(yīng)性和可擴(kuò)展性。可分為線性漸變、徑向漸變3.7.1 線性漸變linear-gradient 線性漸變指沿著某條直線朝一個(gè)方向產(chǎn)生漸變效果。上圖是從黃色漸變到綠色1、必要的元素：a、方向b、起始顏色c、終止色；2、關(guān)于方向如下圖3.7.2 徑向漸變r(jià)adial-gradient 徑向漸變指從一個(gè)中心點(diǎn)開(kāi)始沿著四周產(chǎn)生漸變效果1、必要的元素：a、輻射范圍即圓半徑b、中心點(diǎn) 即圓的中心c、漸變起

13、始色d、漸變終止色2、關(guān)于中心點(diǎn)：中心位置參照的是盒子的左上角3、關(guān)于輻射范圍：其半徑可以不等，即可以是橢圓3.8 過(guò)渡過(guò)渡是 CSS3 中具有性的特征之一，可以實(shí)現(xiàn)元素不同狀態(tài)間的平滑過(guò)渡（補(bǔ)間動(dòng)畫(huà)），經(jīng)常用來(lái)制作動(dòng)畫(huà)效果。幀動(dòng)畫(huà)：通過(guò)一幀一幀的畫(huà)面按照固定順序和速度。如膠片補(bǔ)間動(dòng)畫(huà)：自動(dòng)完成從起始狀態(tài)到終止?fàn)顟B(tài)的的過(guò)渡。關(guān)于補(bǔ)間動(dòng)畫(huà)學(xué)習(xí)可查看 http/ts/1009特點(diǎn)：當(dāng)前元素只要有“屬性”發(fā)生變化時(shí)，可以平滑的進(jìn)行過(guò)渡。transition-property 設(shè)置過(guò)渡屬性transition-duration 設(shè)置過(guò)渡時(shí)間transition-timing-function 設(shè)置過(guò)渡

14、速度transition-delay 設(shè)置過(guò)渡延時(shí)以上四屬性重在理解3.9 2D 轉(zhuǎn)換轉(zhuǎn)換是 CSS3 中具有性的特征之一，可以實(shí)現(xiàn)元素的位移、旋轉(zhuǎn)、變形、縮放，甚至支持矩陣方式，配合即將學(xué)習(xí)的過(guò)渡和動(dòng)畫(huà)知識(shí)，可以取代大量之前只能靠 Flash 才可以實(shí)現(xiàn)的效果。1、移動(dòng) translate(x, y) 可以改變?cè)氐奈恢茫瑇、y 可為負(fù)值；a) 移動(dòng)位置相當(dāng)于自身原來(lái)位置b) y方向朝下2、縮放 scale(x, y) 可以對(duì)元素進(jìn)行水平和垂直方向的縮放，x、y 的取值可為小數(shù)；4、旋轉(zhuǎn) roe(deg) 可以對(duì)元素進(jìn)行旋轉(zhuǎn)，正值為順時(shí)針，負(fù)值為逆時(shí)針；5、傾斜 skew(deg, deg)

15、 可以使元素按一定的角度進(jìn)行傾斜3.10 3D 轉(zhuǎn)換1、3D 坐標(biāo)軸用 X、Y、Z 分別表示空間的 3 個(gè)維度，三條軸互相垂直。如下圖2、左手坐標(biāo)系伸出左手，讓拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。這樣就建立了一個(gè)左手坐標(biāo)系，拇指、食指和中指分別代表 X、Y、Z軸的正方向。如下圖3、左手法則左手握住旋轉(zhuǎn)軸，豎起拇指指向旋轉(zhuǎn)方向，正向就是其余手指卷曲的方向。3.11 動(dòng)畫(huà)動(dòng)畫(huà)是 CSS3 中具有性的特征之一，可通過(guò)設(shè)置多個(gè)節(jié)點(diǎn)來(lái)精確控制一個(gè)或一組動(dòng)畫(huà)，常用來(lái)實(shí)現(xiàn)復(fù)雜的動(dòng)畫(huà)效果。1、必要元素：a、通過(guò)keyframes 指定動(dòng)畫(huà)序列；b、通過(guò)百分比將動(dòng)畫(huà)序列分割成多個(gè)節(jié)點(diǎn)；c、

16、在各節(jié)點(diǎn)中分別定義各屬性d、通過(guò) animation 將動(dòng)畫(huà)應(yīng)用于相應(yīng)元素；2、關(guān)鍵屬性a、animation-name 設(shè)置動(dòng)畫(huà)序列名稱(chēng)b、animation-duration 動(dòng)畫(huà)持續(xù)時(shí)間c、animation-delay 動(dòng)畫(huà)延時(shí)時(shí)間d、animation-timing-function 動(dòng)畫(huà)執(zhí)行速度，linear、ease 等e、animation-play-se 動(dòng)畫(huà)狀態(tài)，play、paused 等f(wàn)、animation-direction 動(dòng)畫(huà)逆播，alternate 等g、animation-fill-mode 動(dòng)畫(huà)執(zhí)行完畢后狀態(tài)，forwards、backwards 等h、an

17、imation-iteration-count 動(dòng)畫(huà)執(zhí)行次數(shù)，inifinate 等3.12 伸縮布局CSS3 在布局方面做了非常大的改進(jìn)，使得對(duì)塊級(jí)元素的布局排列變得十分靈活，適應(yīng)性非常強(qiáng)，其強(qiáng)大的伸縮性，在響應(yīng)式開(kāi)中可以發(fā)揮極大的作用。如下圖，學(xué)習(xí)新的概念：主軸：Flex 容器的主軸主要用來(lái)配置 Flex 項(xiàng)目，默認(rèn)是水平方向側(cè)軸：與主軸垂直的軸稱(chēng)作側(cè)軸，默認(rèn)是垂直方向的方向：默認(rèn)主軸從左向右，側(cè)軸默認(rèn)從上到下主軸和側(cè)軸并不是固定不變的，通過(guò) flex-direction 可以互換。1、必要元素：a、指定一個(gè)盒子為伸縮盒子 display: flexb、設(shè)置屬性來(lái)調(diào)整此盒的子元素的布局方式

18、 例如 flex-directionc、明確主側(cè)軸及方向d、可互換主側(cè)軸，也可改變方向2、各屬性詳解a、flex-direction 調(diào)整主軸方向（默認(rèn)為水平方向）b、justify-content 調(diào)整主軸對(duì)齊c、align-items 調(diào)整側(cè)軸對(duì)齊d、flex-wrap 控制是否換行e、align-content 堆棧（由 flex-wrap 產(chǎn)生的獨(dú)立行）對(duì)齊f、flex-flow 是 flex-direction、flex-wrap 的簡(jiǎn)寫(xiě)形式g、flex 控制子項(xiàng)目的縮放比例h、order 控制子項(xiàng)目的排列順序此知識(shí)點(diǎn)重在理解，要明確找出主軸、側(cè)軸、方向，各屬性對(duì)應(yīng)的屬性值可參考示例

19、源碼3.13 多列布局類(lèi)似報(bào)紙或雜志中的排版方式，上要用以控制大篇幅文本。了解即可，實(shí)際意義不大。第4章Web 字體開(kāi)發(fā)可以為自已的網(wǎng)頁(yè)指定特殊的字體，無(wú)需考慮用戶電腦上是否安裝了此特殊字體，從此把特殊字體處理成的時(shí)代便成為了過(guò)去。支持程度比較好，甚至 IE 低版本瀏覽器也能支持。4.1 字體格式不同瀏覽器所支持的字體格式是不一樣的，有必要了解一下有關(guān)字體格式的知識(shí)。1、TureTpe(.ttf)格式.ttf 字體是 Windows 和 Mac 的最常見(jiàn)的字體，是一種 RAW 格式，支持這種字體的瀏覽器有 IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+；2、OpenType(.otf)格式.otf 字體被認(rèn)為是一種原始的字體格式，其內(nèi)置在 TureType 的基礎(chǔ)上，支持這種字體的瀏覽器有 Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOSMobile、Safari4.2+；3、Web Open Font Format(.woff)格式woff 字體是 Web 字體中最佳格式，