Css3的概念和優(yōu)勢

CSS3是css技術的升級版本，CSS3語言開發(fā)是朝著模塊化發(fā)展的。以前的規(guī)范作為一個模塊實在是太龐大而且比較復雜，所以，把它分解為一些小的模塊，更多新的模塊也被加入進來。這些模塊包括： 盒子模型、列表模塊、超鏈接方式 、語言模塊 、背景和邊框 、文字特效 、多欄布局等。

css3的優(yōu)點：CSS3將完全向后兼容，所以沒有必要修改現(xiàn)在的設計來讓它們繼續(xù)運作。網(wǎng)絡瀏覽器也還將繼續(xù)支持CSS2。對我們來說，CSS3主要的影響是將可以使用新的可用的選擇器和屬性，這些會允許實現(xiàn)新的設計效果（譬如動態(tài)和漸變），而且可以很簡單的設計出現(xiàn)在的設計效果（比如說使用分欄）

漸進增強和優(yōu)雅降級

漸進增強 progressive enhancement： 針對低版本瀏覽器進行構(gòu)建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。 優(yōu)雅降級 graceful degradation： 一開始就構(gòu)建完整的功能，然后再針對低版本瀏覽器進行兼容。 區(qū)別： 優(yōu)雅降級是從復雜的現(xiàn)狀開始，并試圖減少用戶體驗的供給，而漸進增強則是從一個非常基礎的，能夠起作用的版本開始，并不斷擴充，以適應未來環(huán)境的需要。降級（功能衰減）意味著往回看；而漸進增強則意味著朝前看，同時保證其根基處于安全地帶。

CSS3選擇器

一、屬性選擇器

1、E[attr]：只使用屬性名，但沒有確定任何屬性值； 2、E[attr="value"]：指定屬性名，并指定了該屬性的屬性值； 3、E[attr~="value"]：指定屬性名，并且具有屬性值，此屬性值是一個詞列表，并且以空格隔開，其中詞列表中包含了一個value詞，而且等號前面的“?”不能不寫 4、E[attr^="value"]：指定了屬性名，并且有屬性值，屬性值是以value開頭的； 5、E[attr$="value"]：指定了屬性名，并且有屬性值，而且屬性值是以value結(jié)束的 6、E[attr*="value"]：指定了屬性名，并且有屬性值，而且屬值中包含了value； 7、E[attr|="value"]：指定了屬性名，并且屬性值是value或者以“value-”開頭的值（比如說zh-cn）;

二、偽類選擇器

1、結(jié)構(gòu)性偽類選擇器

X:first-child 匹配子集的第一個元素。IE7就可以支持 X:last-child匹配父元素中最后一個X元素 X:nth-child(n)用于匹配索引值為n的子元素。索引值從1開始 X:only-child這個偽類一般用的比較少，比如上述代碼匹配的是div下的有且僅有一個的p，也就是說，如果div內(nèi)有多個p，將不匹配。 X:nth-of-type(n)匹配同類型中的第n個同級兄弟元素X X:only-of-type匹配屬于同類型中唯一兄弟元素的X X:first-of-type匹配同級兄弟元素中的第一個X元素 X:nth-last-child(n)從最后一個開始算索引。 X:nth-last-of-type(n) 匹配同類型中的倒數(shù)第n個同級兄弟元素X X:root匹配文檔的根元素。在HTML（標準通用標記語言下的一個應用）中，根元素永遠是HTML X:empty匹配沒有任何子元素（包括包含文本）的元素X 2、目標偽類選擇器

E:target 選擇匹配E的所有元素，且匹配元素被相關URL指向

3、UI 元素狀態(tài)偽類選擇器

E:enabled 匹配所有用戶界面（form表單）中處于可用狀態(tài)的E元素 E:disabled 匹配所有用戶界面（form表單）中處于不可用狀態(tài)的E元素 E:checked 匹配所有用戶界面（form表單）中處于選中狀態(tài)的元素E E:selection 匹配E元素中被用戶選中或處于高亮狀態(tài)的部分

4、語言偽類選擇器

:lang eg：E:lang(language)表示選擇匹配E的所有元素，且匹配元素指定了lang屬性，而且其值為language。

5、否定偽類選擇器

E:not(s) （IE6-8瀏覽器不支持:not()選擇器。） 匹配所有不匹配簡單選擇符s的元素E

6、動態(tài)偽類選擇器

E:link 鏈接偽類選擇器 選擇匹配的E元素，而且匹配元素被定義了超鏈接并未被訪問過。常用于鏈接描點上

E:visited
鏈接偽類選擇器 選擇匹配的E元素，而且匹配元素被定義了超鏈接并已被訪問過。常用于鏈接描點上

E:active 用戶行為選擇器 選擇匹配的E元素，且匹配元素被激活。常用于鏈接描點和按鈕上

E:hover 用戶行為選擇器 選擇匹配的E元素，且用戶鼠標停留在元素E上。IE6及以下瀏覽器僅支持a:hover

E:focus 用戶行為選擇器 選擇匹配的E元素，而且匹配元素獲取焦點

7、層級選擇器

E>F 子選擇器 選擇匹配的F元素，且匹配的F元素所匹配的E元素的子元素

E+F 相鄰兄弟選擇器 選擇匹配的F元素，且匹配的F元素緊位于匹配的E元素的后面

E~F 通用選擇器 選擇匹配的F元素，且位于匹配的E元素后的所有匹配的F元素

CSS3文本屬性

瀏覽器前綴的簡介及應用

某些CSS屬性還只是最新版的預覽版，并未發(fā)布成最終的正式版，而大部分瀏覽器已經(jīng)為這些屬性提供了支持，但這些屬性是小部分瀏覽器專有的；有些時候，有些瀏覽器為了擴展某方面的功能，它們會選擇新增的一些CSS屬性，這些自行擴展的CSS屬性也是瀏覽器專屬的。為了讓這些瀏覽器識別這些專屬屬性，CSS規(guī)范允許在CSS屬性前增加各自的瀏覽器前綴。

文本陰影屬性語法及應用

說明：水平、垂直陰影的位置允許負值 可進行多陰影設置

文本換行的相關屬性

Word-wrap

屬性值： normal 說明：只在允許的斷字點換行（瀏覽器保持默認處理） break-word 說明：屬性允許長單詞或 URL 地址換行到下一行。 屬性用來標明是否允許瀏覽器在單詞內(nèi)進行斷句，這是為了防止當一個字符串太長而找不到它的自然斷句點時產(chǎn)生溢出現(xiàn)象。

Word-break

屬性值： break-all 說明：它斷句的方式非常粗暴，它不會嘗試把長單詞挪到下一行，而是直接進行單詞內(nèi)的斷句 Keep-all 說明：文本不會換行，只能在半角空格或連字符處換行。

@font-face

@font-face是CSS3中的一個模塊，他主要是把自己定義的Web字體嵌入到你的網(wǎng)頁中，隨著@font-face模塊的出現(xiàn)，我們在Web的開發(fā)中使用字體不怕只能使用Web安全字體（@font-face這個功能早在IE4就支持）

@font-face的語法規(guī)則： @font-face { font-family: <YourWebFontName>; src: <source> [<format>][,<source> [<format>]]*; [font-weight: <weight>]; [font-style: <style>]; }

@font-face語法說明：

1、YourWebFontName:此值指的就是你自定義的字體名稱，最好是使用你下載的默認字體，他將被引用到你的Web元素中的font-family。如“font-family:"YourWebFontName";” 2、source:此值指的是你自定義的字體的存放路徑，可以是相對路徑也可以是絕路徑； 3、format：此值指的是你自定義的字體的格式，主要用來幫助瀏覽器識別，其值主要有以下幾種類型：truetype,opentype,truetype-aat,embedded-opentype,avg等； 4、weight和style:這兩個值大家一定很熟悉，weight定義字體是否為粗體，style主要定義字體樣式，如斜體。

實例： @font-face { font-family: 'icomoon'; src:url('fonts/icomoon.eot'); src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'), url('fonts/icomoon.svg#icomoon') format('svg'), url('fonts/icomoon.woff') format('woff'), url('fonts/icomoon.ttf') format('truetype'); font-weight: normal; font-style: normal; }

CSS3 背景的新增屬性

1、Background-origin 背景原點

說明： 指定background-origin屬性應該是相對位置 屬性值： padding-box 背景圖像填充框的相對位置 border-box 背景圖像邊界框的相對位置 content-box 背景圖像的相對位置的內(nèi)容框 注：默認值為：padding-box;

2、Background-clip 背景裁切

說明： background-clip 屬性規(guī)定背景的繪制區(qū)域。 屬性值： border-box 背景被裁剪到邊框盒。 padding-box 背景被裁剪到內(nèi)邊距框。 content-box 背景被裁剪到內(nèi)容框 。 注：默認值：border-box;

3、Background-size 背景尺寸

說明： background-size 規(guī)定背景圖像的尺寸 屬性值： length 規(guī)定背景圖的大小。第一個值寬度，第二個值高度。

Percentage(%) 以百分比為值設置背景圖大小

cover 把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區(qū)域

contain 把圖像圖像擴展至最大尺寸，以使其寬度和高度完全適應內(nèi)容區(qū)域。

4、css3多背景屬性

Eg: p{ background:url(demo.gif) no-repeat; //這是寫給不識別下面這句的默認背景圖片 background:url(demo.gif) no-repeat ,url(demo1.gif) no-repeat left bottom, url(demo2.gif) no-repeat 10px 15px; //這是高級瀏覽器的css多重背景，第一個最上面 background-color:yellow; //這是定義的默認背景顏色，全部適合 }

CSS3 顏色特性

1、rgba 顏色模式

2、 Hsl 顏色模式（了解）

3、 Hsla 顏色模式（了解）

CSS3 邊框的新增屬性

1、border-color

EG: border-color:red green #000 yellow;(上右下左)

2、border-image

border-image 屬性是一個簡寫屬性，用于設置以下屬性: border-image-source 用在邊框的圖片的路徑。 border-image-slice 圖片邊框向內(nèi)偏移。 border-image-repeat 圖像邊框是否應平鋪(repeated)、鋪滿(rounded)或拉伸(stretched) border-image-outset 邊框圖像區(qū)域超出邊框的量

3、Border-radius 圓角邊框

(1) .box{ border-radius: 5px 10px 20px 50px }

(2) .div1{border-radius: 2em/1em}

以斜杠/分開后面的參數(shù): 第一個參數(shù)表示圓角的水平半徑，第二個參數(shù)表示圓角的垂直半徑

(3) .div1{ border-radius:10px 20px 30px 40px/40px 30px 20px 10px }

按順時針的順序，斜杠/左邊是四個圓角的水平半徑，右邊是四個圓角的垂直半徑，但是通常我們很少寫右邊的參數(shù)，那就是默認右邊等于左邊的值。

4、box-shadow 盒子陰影

屬性值：

Eg:box-shadow: 10px 10px 5px #888888