新·模式l

同時采用最合理的TS教學模式和最合理教學時間安排.l

全程手把學、邊學邊練，

7*12小時答疑指導，保證學員即學即會。薪·未來l

無限互聯學生畢業平均薪資12755元，比 業機構平均高出12%。l

98%的無限互聯學生在畢業4周內成功就業！信·機構l

慧科教育 旗下泛IT職業教育培訓機構。l

與找座兒形成國內第一家O2O混合式教學

。l

良心教學，

賴大機構！心·服務l

多年教學經驗資深講師傾心教學l

配備專門的生活導師，提供入學接送、精選宿舍、生活指導、學習督促等一條龍服務。l

提供專業就業指導服務，簡歷指導+模擬面試，保證快速就業。走進無限互聯本章知識點CSS3介紹及新特性預覽CSS3新增選擇器CSS3新增文本屬性、顏色表示法CSS3新增邊框屬性CSS3新增背景屬性、顏色漸變CSS3新增盒子屬性、用戶界面屬性一、CSS3介紹CSS的概念CSS引入CSS3的概念CSS3的新特性預覽CSS的概念CSS就是一種叫做樣式表（stylesheet）的技術。也有的人稱之為層疊樣式表（Cascading

Stylesheet）可以有效地對頁面的布局、字體、顏色、背景和其它效果實現更加精確的控制只要對相應的代碼做一些簡單的修改，就可以改變同一頁面的不同部分，或者頁數不同的網頁的外觀和格式CSS的引入的三種方式外部引入：style

：內聯：CSS的引入CSS3的概念CSS3是CSS2的升級版本，3只是版本號，它在CSS2.1的基礎上增加了很多強大的新功能。目前主流瀏覽器chrome、safari、firefox、opera、甚至360都已經支持了CSS3大部分功能了，IE10以后也開始全面支持CSS3了。在編寫CSS3樣式時，不同的瀏覽器可能需要不同的前綴。它表示該CSS屬性或規則尚未成為W3C標準的一部分，是瀏覽器的私有屬性，雖然目前

較新版本的瀏覽器都是不需要前綴的，但為了更好的向前兼容前綴還是少不了的前綴瀏覽器-webkitChrome

和Safari-mozFirefox-msIE-oOperaCSS3新特性預覽CSS3新特性預覽強大的CSS選擇器新的顏色制式和透明設定多欄布局的實現多背景圖效果文字陰影效果開放的網絡字體類型圓角邊框背景盒子陰影二、CSS3新增選擇器關系選擇器屬性選擇器結構性偽類選擇器UI元素狀態偽類選擇器偽對象選擇器關系選擇器兄弟選擇符E~F：選擇E元素所有兄弟元素F屬性選擇器

在CSS2中引入了一些屬性選擇器，而CSS3在CSS2的基礎上對屬性選擇器進行了擴展，新增了3個屬性選擇器，使得屬性選擇器有了通配符的概念屬性選擇器功能描述E[att^="val"]選擇匹配元素E，且E元素定義了屬性att，其屬性值以val開頭的任何字符串E[att$="val"]選擇匹配元素E，且E元素定義了屬性att，其屬性值以val結尾的任何字符串E[att*="val"]選擇匹配元素E，且E元素定義了屬性att，其屬性任意位置包含了val，換句話說，字符串與屬性值中的任意位置相匹配結構性偽類選擇器選擇符功能描述E:not(s)匹配除某個元

外的所有元素E:root匹配E元素在文檔的根元素。E:last-child匹配父元素的最后一個子元素E。E:only-child匹配父元素僅有的一個子元素E。E:nth-child(n)匹配父元素的第n個子元素E。E:nth-last-child(n)匹配父元素的倒數第n個子元素E。E:

-of-type匹配同類型中的第一個同級兄弟元素E。E:last-of-type匹配同類型中的最后一個同級兄弟元素E。E:only-of-type匹配同類型中的唯一的一個同級兄弟元素E。E:nth-of-type(n)匹配同類型中的第n個同級兄弟元素E。E:nth-last-of-type(n)匹配同類型中的倒數第n個同級兄弟元素E。E:empty匹配沒有任何子元素（包括text節點）的元素E。UI元素狀態偽類選擇器UI元素狀態偽類選擇器選擇符功能描述E:checked匹配用戶界面上處于選中狀態的元素E。(用于inputtype為radio與checkbox時)E:enabled匹配用戶界面上處于可用狀態的元素E。E:disabled匹配用戶界面上處于禁用狀態的元素E。偽對象選擇器偽對象選擇器選擇符功能描述E:-letter/E::-letter設置對象內的第一個字符的樣式。E:-line/E::-line設置對象內的第一行的樣式。E:before/E::before設置在對象前（依據對象樹的邏輯結構）發生的內容。用來和content屬性一起使用E:after/E::after設置在對象后（依據對象樹的邏輯結構）發生的內容。用來和content屬性一起使用E::selection設置對象被選擇時的顏色。練1、將CSS3所有新增的選擇器在不同的瀏覽器全部驗證一遍三、CSS3新增屬性CSS3新增文本屬性CSS3新增顏色表示法CSS3新增文本屬性屬性描述hanging-punctuation規定標點字符是否位于線框之外punctuation-trim規定是否對標點字符進行修剪text-align-last設置如何對齊最后一行或緊挨著強制換行符之前的行text-emphasis向元素的文本應用重點標記以及重點標記的前景色text-justify規定當text-align設置為"justify"時所使用的對齊方法text-outline規定文本的輪廓text-overflow規定當文本溢出包含元素時發生的事情text-shadow向文本添加陰影text-wrap規定文本的換行規則word-break規定非 韓文本的換行規則word-wrap允許對長的不可分割的單詞進行分割并換行到下一行注：黑色字體屬性，目前主流瀏覽器都不支持CSS3新增文本屬性屬性描述text-decoration-line檢索或設置對象中的文本裝飾線條的位置text-decoration-color檢索或設置對象中的文本裝飾線條的顏色。text-decoration-style檢索或設置對象中的文本裝飾線條的形狀。text-fill-color設置或檢索對象中的文字填充顏色text-stroke復合屬性。設置或檢索對象中的文字的描邊text-stroke-width設置或檢索對象中的文字的描邊厚度text-stroke-color設置或檢索對象中的文字的描邊顏色注：黑色字體屬性，目前主流瀏覽器都不支持橙色字體屬性，需要使用瀏覽器私有前綴作用：規定當

text-align被設置為text-align時的齊行方法文本屬性-text-justify值描述auto瀏覽器決定齊行算法。none禁用齊行inter-word增加/減少單詞間的間隔inter-ideograph用表意文本來排齊內容inter-cluster只對不包含 單詞間隔的內容（比如亞洲語系）進行排齊distribute類似報紙版面，除了在東亞語系中最后一行是不齊行的kashida通過拉伸字符來排齊內容文本屬性-text-overflow作用：規定當文本溢出包含元素時發生的事情使用：值描述clip修剪文本ellipsis顯示省略符號來表示被修剪的文本string使用給定的字符串來代表被修剪的文本文本屬性-text-shadow作用：設置文本的陰影效果默認為none使用：值描述h-shadow必需，水平陰影的位置。允許負值。v-shadow必需，垂直陰影的位置。允許負值blur可選，模糊的距離color可選，陰影的顏文本屬性-word-break作用：規定自動換行的處理方法使用：值描述normal使用瀏覽器默認的換行規則break-all允許在單詞內換行keep-all只能在半角空格或連字符處換行文本屬性-word-wrap作用：規定自動換行的處理方法使用：值描述normal只在允許的斷字點換行（瀏覽器保持默認處理)break-word在長單詞或

URL

地址

進行換行文本屬性-加私有前綴Text-fill-color：作用：指定文本填充顏色取值：顏色Text-stroke:作用：設置文本邊框顏色取值：text-stroke-widthtext-stroke-color設置或檢索對象中的文字的描邊厚度設置或檢索對象中的文字的描邊顏色Color

Name:

red優點:

方便

,使用方便簡單缺點:

數量少,不支持設置HEX方式:#FFFFFF優點:

顏色種類多缺點:

換算復雜,需要借助工具測量RGB方式:rgb（255，0，0）優點:

支持的顏色種類多,使用方便缺點:

換算復雜,需要借助工具測量CSS顏色表示法復習CSS3顏色表示法CSS1

&&

CSS2Color

name顏色名稱方式HEX方式

十六進制RGB方式

三原色配色方式CSS3RGBA模式HSL模式HSLA模式的使用,A是Alpha透RGBA方式:這種方式與RGB方式相同,只是在基礎上新增了明度語

則:

rgba(R,G,B,A);取值規范:R:0~255整數或百分數G:0~255整數或百分數B:0~255整數或百分數A:0~1小數舉例:rgba(255,255,0,0.5);CSS3新增顏色表示法HSL方式(色輪記法):語

則:

HSL(H,S,L);取值規范:H(色調):

取值范圍0~360

0或360表示紅色藍色S(飽和度):

取值為：0.0%

-100.0%

所謂的飽和度，指的其實是色彩的純度，純度越高，表現越鮮明，純度較低，表現則較黯L(亮度):

取值為0.0%~100.0%舉例:HSL(120,100%,100%);120表示綠色

240表示CSS3新增顏色表示法HSLA方式(色輪記法):與HSL方式是相同的只是多了語

則:

HSL(H,S,L,A);取值規范:H(色調):

取值范圍0~360

0或360表示紅色藍色120表示綠色

240表示S(飽和度):

取值為：0.0%

-100.0%L(亮度):

取值為0.0%~100.0%A(

):

小數舉例:HSL(120,100%,100%,0.5);CSS3新增顏色表示法CSS3顏色表示法transparent：特殊顏色值，表示透明色，可以直接當做顏色使用使用：color：transparent（設置字體顏色為透明）opacity：設置元素的使用：

opacity：0.1（取值0~1）filter：alpha（opacity=50）

取值0-100（IE）四、CSS3新增屬性CSS3

新增邊框屬性-

邊框CSS3新增邊框屬性-圓角邊框CSS3新增邊框屬性-邊框陰影CSS3新增邊框屬性屬性功能描述border-image設置或檢索對象的邊框使用圖像來填充border-image-source設置或檢索對象的邊框是否用圖像定義樣式或圖像來源路徑border-image-slice設置或檢索對象的邊框背景圖的分割方式border-image-width設置或檢索對象的邊框厚度border-image-outset設置或檢索對象的邊框背景圖的擴展border-image-repeat設置或檢索對象的邊框圖像的平鋪方式border-radius設置或檢索對象使用圓角邊框border-top-left-radius設置或檢索對象左上角圓角邊框border-top-right-radius設置或檢索對象右上角圓角邊框border-bottom-right-radius設置或檢索對象右下角圓角邊框border-bottom-left-radius設置或檢索對象左下角圓角邊框box-shadow設置或檢索對象陰影box-reflect設置或檢索對象的倒影CSS3

新增邊框屬性-

邊框CSS3中新增的邊框屬性，使border具備寬度、顏色和風格屬性外，還具備背景

屬性語法格式border-image-source

：none/url(border-image-slice：分割方法border-image-width：邊框寬度border-image-outset：擴展方式border-image-repeat：重復方式地址);CSS3

新增邊框屬性-

邊框border-image-source作用：設置或檢索對象的邊框樣式使用圖像路徑對應

特性：borderImageSource取值：none：無背景

，顯示border-style所定義的邊框樣式效果url：使用絕對或相對地址指定圖像CSS3

新增邊框屬性-

邊框border-image-slice：該屬性規定圖像的上、右、下、左側邊緣的向內偏移，圖像被分割為九個區域：四個角、四條邊以及一個中間區域。除非使用了

fill，否則中間的圖像部分會被丟棄。如果省略第四個數值/百分比，則與第二個值相同。如果省略第三個值，則與第一個值相同。如果省略第二個值，則與第一個值相同取值：number：數字值，代表圖像中像素（如果是光柵圖像）或矢量坐標（如果是矢量圖像）%：

相對于圖像尺寸的百分比值：圖像的寬度影響水平偏移，高度影響垂直偏移fill：

保留邊框圖像的中間部分CSS3

新增邊框屬性-

邊框border-image-width作用：用于指定使用多厚的邊框來承載被裁剪后的圖像對應

特性：borderImageWidth取值：%/浮點數/長度值

不允許有負值auto：如果auto值被設置，則border-image-width采用與border-image-slice相同的值CSS3

新增邊框屬性-

邊框border-image-outset作用：用于指定邊框圖像向外擴展所定義的數值，即如果值為10px，則圖像在原本的基礎上往外延展10px再顯示對應

特性：borderImageOutset取值：長度值/浮點數

不能為負數border-image-outset：10px；CSS3

新增邊框屬性-

邊框border-image-repeat作用：用于指定邊框背景圖的填充方式。可定義0-2個參數值，即水平和垂直方向。如果2個值相同，可合并成1個，表示水平和垂直方向都用相同的方式填充邊框背景圖；如果2個值都為stretch，則可省略不寫對應

特性：borderImageRepeat取值：stretch：拉伸方式填充邊框背景圖repeat：中心為原點以平鋪方式填充，超出部分截斷round：平鋪方式填充，為了不出現截斷的

，會適當調整

的大少，保證

完整顯示space：平鋪方式填充，為了不出現截斷的

，會適當調整

間的間隔，保證

完整顯示CSS3新增邊框屬性-圓角邊框border-radius：設置或檢索對象使用圓角邊框取值：border-radius：參數1/參數2（提供兩個參數，以‘/’分隔），參數1設置水平半徑，參數2設置垂直半徑，設置一個則兩個默認相同參數1和參數2也可設置1~4個參數：垂直半徑下右10px水平半徑下右10pxCSS3新增邊框屬性-圓角邊框border-radius四個角分開設置CSS3新增邊框屬性-邊框陰影box-shadow：設置或檢索對象陰影可以設定多組效果，每組參數值以逗號分隔CSS3新增邊框屬性-邊框陰影box-reflect：可以對盒子模型進行倒影設置練習二1、div元素創建一個100px

*100px的盒子，使用新增的邊框屬性，完成下圖操作五、CSS3新增屬性CSS3新增背景屬性CSS3新增漸變屬性CSS3新增背景屬性CSS3新增的背景屬性屬性功能描述background-origin設置或檢索對象的背景圖像顯示的原點background-clip設置或檢索對象的背景向外裁剪的區域background-size設置或檢索對象的背景圖像的尺寸大小CSS3新增背景屬性background-origin背景

可以放置于

content-box、padding-box

或border-box

區域值描述padding-box背景圖像相對于內邊距框來定位border-box背景圖像相對于邊框盒來定位content-box背景圖像相對于內容框來定位CSS3新增背景屬性background-clip可以設置多背景值描述padding-box背景被裁剪到內邊距框border-box背景被裁剪到邊框盒content-box背景被裁剪到內容框CSS3新增背景屬性background-size值描述length設置背景圖像的高度和寬度。第一個值設置寬度，第二個值設置高度。如果只設置一個值，則第二個值會被設置為"auto"percentage以父元素的百分比來設置背景圖像的寬度和高度。第一個值設置寬度，第二個值設置高度。如果只設置一個值，則第二個值會被設置為“auto”cover把背景圖像擴展至足夠大，以使背景圖像完

背景區域。背景圖像的某些部分也許無法顯示在背景定位區域中。contain把圖像圖像擴展至最大尺寸，以使其寬度和高度完全適應內容區域CSS3新增漸變屬性的顏色之間進行平滑的CSS3提供了創建顏色漸變的方式，在兩個或過渡瀏覽器支持的兩種顏色漸變線性漸變

linear-gradient（to漸變方向或角度,第一種顏色,第二種顏色,…）徑向漸變

radial-gradient(形狀(可選)大小(可選)at位置(可選)，顏色1，顏色2)CSS3新增漸變屬性線性漸變的方向和角度表示0deg90deg180deg270degCSS3新增漸變屬性徑向漸變六、CSS3新增屬性CSS3新增盒子屬性CSS3新增可伸縮盒子屬性CSS3新增用戶界面屬性CSS3新增盒子屬性CSS3新增的盒子屬性屬性描述overflow-x如果內容溢出了元素內容區域，是否對內容的左/右邊緣進行裁剪overflow-y如果內容溢出了元素內容區域，是否對內容的上/下邊緣進行裁剪overflow-style規定溢出元素的首選滾動方法rotation圍繞由rotation-point屬性定義的點對元素進行旋轉rotation-point定義距離上左邊框邊緣的偏移點CSS3新增盒子屬性overflow-x、overflow-y值描述visible不裁剪內容，可能會顯示在內容框之外hidden裁剪內容

-

不提供滾

制scroll裁剪內容

-

提供滾

制auto如果溢出框，則應該提供滾

制no-display如果內容不適合內容框，則刪除整個框no-content如果內容不適合內容框，則隱藏整個內容CSS3新增盒子屬性overflow-style值：autopannerscrollber

為溢出元素添加滾動條move

用戶能夠直接移動元素的內容，通常用戶能夠用鼠標拖動內容Marquee

內容自主移動，不需任何用戶

對其控制rotation值：角度rotation-point值：rotation-point（方向/百分比，方向/百分比）注：目前沒有瀏覽器支持overflow-style、rotation與rotation-pointCSS3新增可伸縮盒子屬性屬性描述box-align規定如何對齊框的子元素box-direction規定框的子元素的顯示方向box-flex規定框的子元素是否可伸縮box-flex-group將可伸縮元素分配到柔性分組box-lines規定當超出父元素框的空間時，是否換行顯示box-ordinal-group規定框的子元素的顯示次序box-orient規定框的子元素是否應水平或垂直排列box-pack規定水平框中的水平位置或者垂直框中的垂直位置注：目前沒有任何瀏覽器支持以上屬性，紅色字體的屬性可加瀏覽器私有前綴CSS3新增可伸縮盒子屬性box-align(規定如何對齊框的子元素)值：startend對于正常方向的框，每個子元素的上邊緣沿著框的頂邊放置對于反方向的框，每個子元素的下邊緣沿著框的底邊放置對于正常方向的框，每個子元素的下邊緣沿著框的底邊放置對于反方向的框，每個子元素的上邊緣沿著框的頂邊放置center

均等地分割多余的空間，一半位于子元

上，另一半位于子元

下baseline如果box-orient是inline-axis或horizontal，所有子元素均與其基線對齊。拉伸子元素以填充包含塊stretchCSS3新增可伸縮盒子屬性box-direction(規定框的子元素的顯示方向)值：normalreverseinherit以默認方向顯示子元素以反方向顯示子元素應該從子元素繼承

box-direction屬性box-flex(規定框的子元素是否可伸縮)值：value

元素的可伸縮性，柔性是相對的，例如box-flex為2的子元素為

box-flex為1的子元素的兩倍。box-ordinal-group(規定框的子元素的顯示次序)值：integer

一個整數，指示子元素的顯示次序CSS3新增可伸縮盒子屬性box-orient(規定框的子元素是否應水平或垂直排列)值：horizontalverticalinline-axisblock-axisinherit在水平行中從左向右排列子元素從上向下垂直排列子元素沿著行內軸來排列子元素（沿著塊軸來排列子元素（為horizontal）為vertical）應該從父元素繼承

box-orient屬性的值box-pack(在水平行中從左向右排列子元素)值：start對于正常方向的框，首個子元素的左邊緣被放在左側對于相反方向的框，最后子元素的右邊緣被放在右側對于正常方向的框，最后子元素的右邊緣被放在右側對于相反方向的框，首個子元素的左邊緣被放在左側endcenter

均等地分割多余空間，其中一半空間被置于首個子元素前，另一半被置于最后一個子元素后justify

在每個子元

間分割多余的空間（首個子元素前和最后一個子元素后沒有多余的空間）。CSS3新增可伸縮盒子屬性CSS3新增用戶界面屬性屬性描述appearance允許您將元素設置為標準用戶界面元素的外觀box-sizing允許您以確切的方式定義適應某個區域的具體內容icon為創作者提供使用圖標化等價物來設置元素樣式的能力nav-down規定在使用arrow-down導航鍵時向何處導航nav-index設置元素的tab鍵控制次序nav-left規定在使用arrow-left導航鍵時向何處導航nav-right規定在使用arrow-right導航鍵時向何處導航nav-up規定在使用arrow-up導航鍵時向何處導航outline-offset對輪廓進行偏移，并在超出邊框邊緣的位置繪制輪廓resize規定是否可由用戶對元素的尺寸進行調整appearance

允許您使元素看上去像標準的用戶界面元素瀏覽器支持：主流瀏覽器不支持，Firefox、Safari、chrome支持帶瀏覽器私有前綴的appearance取值：normaliconwindowbutton?將元素呈現為常規元素將元素呈現為圖標（小

）將元素呈現為視口將元素呈現為按鈕將元素呈現為一套供用戶選擇的選項field將元素呈現為輸入字段CSS3新增用戶界面屬性box-si