第12天Css3入門

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

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

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

漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)

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

CSS3選擇器

一、屬性選擇器

1、E[attr]：只使用屬性名，但沒有確定任何屬性值； 2、E[attr="value"]：指定屬性名，并指定了該屬性的屬性值； 3、E[attr~="value"]：指定屬性名，并且具有屬性值，此屬性值是一個(gè)詞列表，并且以空格隔開，其中詞列表中包含了一個(gè)value詞，而且等號(hào)前面的“?”不能不寫 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 匹配子集的第一個(gè)元素。IE7就可以支持 X:last-child匹配父元素中最后一個(gè)X元素 X:nth-child(n)用于匹配索引值為n的子元素。索引值從1開始 X:only-child這個(gè)偽類一般用的比較少，比如上述代碼匹配的是div下的有且僅有一個(gè)的p，也就是說，如果div內(nèi)有多個(gè)p，將不匹配。 X:nth-of-type(n)匹配同類型中的第n個(gè)同級(jí)兄弟元素X X:only-of-type匹配屬于同類型中唯一兄弟元素的X X:first-of-type匹配同級(jí)兄弟元素中的第一個(gè)X元素 X:nth-last-child(n)從最后一個(gè)開始算索引。 X:nth-last-of-type(n) 匹配同類型中的倒數(shù)第n個(gè)同級(jí)兄弟元素X X:root匹配文檔的根元素。在HTML（標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用）中，根元素永遠(yuǎn)是HTML X:empty匹配沒有任何子元素（包括包含文本）的元素X 2、目標(biāo)偽類選擇器

E:target 選擇匹配E的所有元素，且匹配元素被相關(guān)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()選擇器。） 匹配所有不匹配簡(jiǎn)單選擇符s的元素E

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

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

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

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

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

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

7、層級(jí)選擇器

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

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

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

CSS3文本屬性

瀏覽器前綴的簡(jiǎn)介及應(yīng)用

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

文本陰影屬性語法及應(yīng)用

說明：水平、垂直陰影的位置允許負(fù)值 可進(jìn)行多陰影設(shè)置

文本換行的相關(guān)屬性

Word-wrap

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

Word-break

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

@font-face

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

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

@font-face語法說明：

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

實(shí)例： @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 背景原點(diǎn)

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

2、Background-clip 背景裁切

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

3、Background-size 背景尺寸

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

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

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

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

4、css3多背景屬性

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

CSS3 顏色特性

1、rgba 顏色模式

2、 Hsl 顏色模式（了解）

3、 Hsla 顏色模式（了解）

CSS3 邊框的新增屬性

1、border-color

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

2、border-image

border-image 屬性是一個(gè)簡(jiǎn)寫屬性，用于設(shè)置以下屬性: border-image-source 用在邊框的圖片的路徑。 border-image-slice 圖片邊框向內(nèi)偏移。 border-image-repeat 圖像邊框是否應(yīng)平鋪(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ù): 第一個(gè)參數(shù)表示圓角的水平半徑，第二個(gè)參數(shù)表示圓角的垂直半徑

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

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

4、box-shadow 盒子陰影

屬性值：

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