01-css3基礎(chǔ)第1天教學(xué)筆記

1、目錄目錄2第 1 章 CSS3 簡介41.1CSS3 的現(xiàn)狀41.2如何對待4準備工作4第 2 章2.1環(huán)境42.1如何使用手冊5基礎(chǔ)知識5第 3 章3.1選擇器53.1.1屬性選擇器53.1.2偽類選擇器63.1.3偽元素選擇器63.2顏色63.3文本73.4邊框73.4.1邊框圓角83.4.2邊框. 83.4.3邊框陰影93.5盒模型93.6背景103.7漸變113.8伸縮布局113.8.1新版伸縮布局113.9多列布局123.10過渡123.11動畫133.12轉(zhuǎn)換133.13查詢15第 4 章 Web 字體164.1字體格式164.2字體圖標17第 5 章 兼容性18第 6 章 高級應(yīng)

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

3、瀏覽器 firefox 42+3、PhotoShop CS6（建議）2.1如何使用手冊學(xué)會使用工具，可以讓事半功倍。表示全部可選項|表示或者|表示多選一？表示 0 個或者 1 個*表示 0 個或者多個表示范圍第3章基礎(chǔ)知識3.1選擇器CSS3 新增了許多靈活查找元素的方法，極大的提高了查找元素的效率和精準度。CSS3 選擇器與 jQuery 中所提供的絕大部分選擇器兼容。3.1.1 屬性選擇器參考手冊1、Eattr 表示存在 attr 屬性即可；2、Eattr=val 表示屬性值完全等于 val3、Eattr=val 表示的一個單獨的屬性值 這個屬性值是以空格分隔的4、Eattr|=val 表

4、示的要么一個單獨的屬性值 要么這個屬性值是以“-”分隔的5、Eattr*=val表示的屬性值里包含 val 字符并且在“任意”位置6、Eattr=val表示的屬性值里包含 val 字符并且在“開始”位置7、Eattr$=val表示的屬性值里包含 val 字符并且在“結(jié)束”位置3.1.2 偽類選擇器參考手冊重點理解 E 是用來參考確定其父元素的，nth-child(n) 對應(yīng)根據(jù) E 元素確定的父元素的所有子元素，nth-of-type(n) 的不同之處在于其對應(yīng)的是只有 E 元素，會忽略其子元素。（此處要配合案例加強理解）E:nth-child(n) 第n 個子元素，計算方法是 E 元素的全部

5、兄弟元素E:nth-of-type(n) 第n 個子元素，計算方法只是 E 元素，會忽略其子元素的存在E:nth-last-child(n) 同E:nth-child(n) 計算順序相反。E:nth-last-of-type(n) 同 E:nth-of-type(n) 計算順序相反。n 遵循線性變化，其取值 1、2、3、4、.關(guān)于n 的取值范圍：1、當n 做為一個獨立值時，n 取值為 n=1，例如 nth-child(n)2、當n 做一個系數(shù)時，n 取值為n=0 者n0，例如 nth-child(2n+1)、nth-child(-n+5) 此處需要理解 2n+1 或者-n+5 做為一個整體不能

6、小于 1；E:only-child 表示當前以 E 確定的父元素，除 E 之外并無其它子元素（獨生子）；E:only-of-type 表示當前以 E 確定的父元素， 除 E 之外不能包含其它和 E同類型的子元素；E:結(jié)合進行使用，處于當前的元素會被選中；E:empty 選中沒有任何子節(jié)點的 E 元素；3.1.3 偽元素選擇器E:selection 可改變選中文本的樣式E:placeholder 可改變 placeholder 默認樣式，這個存在明顯的兼容問題，比如:-webkit-input-placeholder，具體參考手冊進行對比。E:after、E:before 在舊版本里是偽類，在新

7、版本里是偽元素，新版本下E:after、E:before 會被自動識別為 E:after、E:before，按偽元素來對待。: 與 : 區(qū)別在于區(qū)分偽類和偽元素3.2 顏色新增了 RGBA、HSLA 模式，其中的 A 表示通道，即可以設(shè)置顏色，相較 opacity，不具有繼承性，即不會影響子元素的值的。Red、Green、Blue、Alpha 即RGBAHue、Saturation、Lightness、Alpha 即HSLAR、G、B 取值范圍 0255H 取值范圍 0360，0/360 表示黑色、120 表示綠色、240 表示藍色S 取值范圍 0%100%L 取值范圍 0%100%A 取值范

8、圍 01關(guān)于：1、opacity 子元素會繼承父元素的，在實際開發(fā)中會帶來干擾；2 、transparent 設(shè)置時完全類似于“玻璃”一樣的透明；3.3 文本參考手冊文字陰影與邊框陰影相似，可分別設(shè)置偏移量、模糊度、顏色（可設(shè)透明度）。單行文本溢出，需要配合 overflow:hidden; white-space: nowrap;難理解的點：自已要多試著理解一下關(guān)于 white-space 的各個屬性值之間的差異；上述方法只能解決單行文本的溢出問題，多行文本溢出處理可參照下面的方法，但是有比較嚴重的兼容性，需要慎重選擇，比較完備的多行溢出需要 JS輔助完成，可自行嘗試。多行文本文字溢出處理，

9、非標準屬性，可應(yīng)用于移動端了解常握 white-space 使用3.4 邊框其邊框圓角、邊框陰影屬性，應(yīng)用十分廣泛，兼容性也相對較好，具有符合漸進增強原則的特征，需要重點掌握。3.4.1 邊框圓角圓角處理時，腦中要形成圓、圓心、長半徑、短半徑的概念，正圓是橢圓的一種特殊情況?？煞謩e設(shè)置長、短半徑，以“/”進行分隔，遵循“1，2，3，4”規(guī)則，參考手冊練習(xí)熟悉各種簡寫方式。表格運用圓角需要要 border-collapse: separate;當圓角半徑小于或等于邊框?qū)挾葧r，元素內(nèi)角是直角如何在PS 中查看圓角半徑？3.4.2 邊框設(shè)置的將會被“切割”成九宮格形式，然后進行設(shè)置。如下圖“切割”完

10、成后生成虛擬的 9 塊圖形，然后按對應(yīng)位置設(shè)置背景，其中四個角位置、形狀保持不變，中心位置水平垂直兩個方向平鋪。如下圖round 會自動調(diào)整尺寸，完整顯示邊框。repeat 單純平鋪多余部分，會被“裁切”而不顯示。3.4.3 邊框陰影設(shè)置邊框陰影不會影響盒子的布局，即不會影響其兄弟元素的布局spread 可以與 blur、h-shadow、v-shadow 相互抵消，blur 不可為負值可以設(shè)置多重邊框陰影，實現(xiàn)更好的效果，增強感。3.5 盒模型關(guān)于盒模型存在兩種形式，分別是 W3C 標準盒模型和 IE 盒模型，如下圖所示，其區(qū)別主要在于寬度和高度的計算方式，CSS3 對盒模型做出了新的定義，

11、即允許開發(fā)指定盒子寬度和高度的計算方式。IE 盒模型只會出現(xiàn)在 IE5 版本和 IE6+的怪異模式中。3.6 背景背景在 CSS3 中也得到很大程度的增強，比如背景尺寸、背景裁切區(qū)域、背景定位參照點、多重背景等。cover 會使“最大”邊，進行縮放，另一邊同比縮放，鋪滿容器，超出部分會溢出。contain 會使“最小”邊，進行縮放，另一邊同比縮放，不一定鋪滿容器，會完整顯示。background-size 會以background-clip 設(shè)定的盒模型計算背景尺寸在實際開發(fā)中應(yīng)用十分廣泛。參照手冊3.7 漸變漸變是 CSS3 當中比較豐富多彩的一個特性，通過漸變可以實現(xiàn)許多炫麗的效果，有效的

12、減少的使用數(shù)量，并且具有很強的適應(yīng)性和可擴展性。可分為線性漸變、徑向漸變、重復(fù)漸變。線性漸變指沿著某條直線朝一個方向產(chǎn)生漸變效果。徑向漸變指從一個中心點開始沿著四周產(chǎn)生漸變效果關(guān)于圓的知識同邊框圓角章節(jié)的介紹3.8 伸縮布局CSS3 在布局方面做了非常大的改進，使得對塊級元素的布局排列變得十分靈活，適應(yīng)性非常強，其強大的伸縮性，在響應(yīng)式開中可以發(fā)揮極大的作用，使得開發(fā)一下子就過上了小康的生活。伸縮盒模型經(jīng)歷了幾次演變，大致分為舊版伸縮布局、過渡伸縮布局、新版伸縮布局，同樣為了避免，以學(xué)習(xí)新版伸縮布局為主。3.8.1 新版伸縮布局這里需要引入一些新的概念：主軸：Flex 容器的主軸主要用來配置

13、Flex 項目。側(cè)軸：與主軸垂直的軸稱作側(cè)軸，是側(cè)軸方向的延伸。主軸和側(cè)軸并不是固定不變的，通過 flex-direction 可以調(diào)整。另個兩個版本伸縮布局其實現(xiàn)思路與新版基本一致，區(qū)別在于其屬性及屬性值不同，熟練掌握新版伸縮布局后，要參照對比另外兩個版本的不同。3.9 多列布局類似報紙或雜志中的排版方式，上要用以控制大篇幅文本。參照手冊3.10 過渡過渡是 CSS3 中具有性的特征之一，可以實現(xiàn)元素不同狀態(tài)間的平滑過渡（補間動畫），經(jīng)常用來制作動畫效果。幀動畫：通過一幀一幀的關(guān)鍵畫面按照固定順序和速度。如膠片補間動畫：自動完成從起始狀到終止狀的的過度。學(xué)習(xí)可查看 http/ts/1009關(guān)

14、于補間動畫3.11 動畫動畫是 CSS3 中具有性的特征之一，可通過設(shè)置多個節(jié)點來精確控制一個或一組動畫，常用來實現(xiàn)復(fù)雜的動畫效果。曲線限定了過渡的軌跡。參考手冊3.12 轉(zhuǎn)換轉(zhuǎn)換是 CSS3 中具有性的特征之一，可以實現(xiàn)元素的位移、旋轉(zhuǎn)、變形、縮放，甚至支持矩陣方式，配合即將學(xué)習(xí)的過渡和動畫知識，可以取代大量之前只能靠 Flash 才可以實現(xiàn)的效果。2D 轉(zhuǎn)換translate(x,y)x、y 可為負值，相對自身移動，并未脫離文檔流。左手坐標系：伸出左手，讓拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。這樣就建立了一個左手坐標系，拇指、食指和中指分別代表 X、Y、Z 軸的正方向。

15、左手法則：左手握住旋轉(zhuǎn)軸，豎起拇指指向旋轉(zhuǎn)軸正方向，正向旋轉(zhuǎn)方向就是其余手指卷曲的方向。3D 坐標軸，用 X、Y、Z 分別表示空間的 3 個維度，三條軸上互相垂直。3.13查詢由于網(wǎng)頁呈現(xiàn)終端設(shè)備越來越趨向于多樣化，尤其是移動終端（），具有不同屏幕盡寸、不同分辨率，為了保證網(wǎng)頁能十分友好的呈現(xiàn)，CSS3 為開發(fā)提供了可以識別呈現(xiàn)終端的方法，這樣便可以有針對性的為不同的呈現(xiàn)終端分別進行處理，被廣泛應(yīng)用于響應(yīng)式開發(fā)中。html方式：css 屬性方式：常使用的是檢測設(shè)備寬度參考手冊第4章Web 字體開發(fā)可以為自已的網(wǎng)頁指定特殊的字體，無需考慮用戶電腦上是否安裝了此特殊字體，從此把特殊字體處理成的時代

16、便成為了過去。支持程度比較好，甚至 IE 低版本瀏覽器也能支持。4.1 字體格式不同瀏覽器所支持的字體格式是不一樣的，有必要了解一下有關(guān)字體格式的知識。1、TureTpe(.ttf)格式.ttf 字體是 Windows 和 Mac 的最常見的字體，是一種 RAW 格式，支持這種字體的瀏覽器有 IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+；2、OpenType(.otf)格式.otf 字體被認為是一種原始的字體格式，其內(nèi)置在 TureType 的基礎(chǔ)上，支持這種字體的瀏覽器有 Firefox3.5+、Chrom

17、e4.0+、Safari3.1+、Opera10.0+、iOSMobile、Safari4.2+；3、Web Open Font Format(.woff)格式woff 字體是 Web 字體中最佳格式，他是一個開放的 TrueType/OpenType 的壓縮版本，同時也支持元數(shù)據(jù)包的分離，支持這種字體的瀏覽器有 IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+；4、Embedded Open Type(.eot)格式.eot 字體是 IE字體，可以從 TrueType 創(chuàng)建此格式字體，支持這種字體的瀏覽器有 IE4+；5、SVG(.svg)格式.svg 字體是基于SVG 字體渲染的一種格式，支持這種字體的瀏覽器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+；關(guān)于字體介紹摘自 http/content/css3-font-face/了解了上面的知識后，就需要為不同的瀏覽器準備不同格式的字體，通常會通過字體生成工具幫生成各種格式的字體，因此無需過于在意字體格式間的區(qū)別差異。htt/、htt