Css3的概念和優(yōu)勢(shì)
CSS3是css技術(shù)的升級(jí)版本曲伊，CSS3語(yǔ)言開(kāi)發(fā)是朝著模塊化發(fā)展的谆棱。以前的規(guī)范作為一個(gè)模塊實(shí)在是太龐大而且比較復(fù)雜寡喝，所以阶祭，把它分解為一些小的模塊绷杜，更多新的模塊也被加入進(jìn)來(lái)直秆。這些模塊包括： 盒子模型、列表模塊鞭盟、超鏈接方式 圾结、語(yǔ)言模塊 、背景和邊框 齿诉、文字特效 筝野、多欄布局等。
css3的優(yōu)點(diǎn)：CSS3將完全向后兼容粤剧，所以沒(méi)有必要修改現(xiàn)在的設(shè)計(jì)來(lái)讓它們繼續(xù)運(yùn)作歇竟。網(wǎng)絡(luò)瀏覽器也還將繼續(xù)支持CSS2。對(duì)我們來(lái)說(shuō)抵恋，CSS3主要的影響是將可以使用新的可用的選擇器和屬性焕议，這些會(huì)允許實(shí)現(xiàn)新的設(shè)計(jì)效果（譬如動(dòng)態(tài)和漸變），而且可以很簡(jiǎn)單的設(shè)計(jì)出現(xiàn)在的設(shè)計(jì)效果（比如說(shuō)使用分欄）
漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)
漸進(jìn)增強(qiáng) progressive enhancement：針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁(yè)面弧关，保證最基本的功能盅安，然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗(yàn)世囊。
優(yōu)雅降級(jí) graceful degradation：一開(kāi)始就構(gòu)建完整的功能别瞭，然后再針對(duì)低版本瀏覽器進(jìn)行兼容。
區(qū)別：優(yōu)雅降級(jí)是從復(fù)雜的現(xiàn)狀開(kāi)始茸习，并試圖減少用戶體驗(yàn)的供給畜隶，而漸進(jìn)增強(qiáng)則是從一個(gè)非潮诶撸基礎(chǔ)的号胚，能夠起作用的版本開(kāi)始，并不斷擴(kuò)充浸遗，以適應(yīng)未來(lái)環(huán)境的需要猫胁。降級(jí)（功能衰減）意味著往回看；而漸進(jìn)增強(qiáng)則意味著朝前看跛锌，同時(shí)保證其根基處于安全地帶弃秆。
CSS3選擇器
一、屬性選擇器
1髓帽、E[attr]：只使用屬性名菠赚，但沒(méi)有確定任何屬性值；?
2半哟、E[attr="value"]：指定屬性名茬高，并指定了該屬性的屬性值壶栋；?
3、E[attr~="value"]：指定屬性名拌牲，并且具有屬性值俱饿，此屬性值是一個(gè)詞列表，并且以空格隔開(kāi)塌忽，其中詞列表中包含了一個(gè)value詞拍埠，而且等號(hào)前面的“?”不能不寫?
4、E[attr^="value"]：指定了屬性名土居，并且有屬性值枣购，屬性值是以value開(kāi)頭的；?
5装盯、E[attr$="value"]：指定了屬性名坷虑，并且有屬性值，而且屬性值是以value結(jié)束的?
6埂奈、E[attr*="value"]：指定了屬性名迄损，并且有屬性值，而且屬值中包含了value账磺；?
7芹敌、E[attr|="value"]：指定了屬性名，并且屬性值是value或者以“value-”開(kāi)頭的值（比如說(shuō)zh-cn）;
二垮抗、偽類選擇器
1氏捞、結(jié)構(gòu)性偽類選擇器
X:first-child 匹配子集的第一個(gè)元素。IE7就可以支持
X:last-child匹配父元素中最后一個(gè)X元素
X:nth-child(n)用于匹配索引值為n的子元素冒版。索引值從1開(kāi)始
X:only-child這個(gè)偽類一般用的比較少液茎，比如上述代碼匹配的是div下的有且僅有一個(gè)的p，也就是說(shuō)辞嗡，如果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è)開(kāi)始算索引续室。
X:nth-last-of-type(n) 匹配同類型中的倒數(shù)第n個(gè)同級(jí)兄弟元素X
X:root匹配文檔的根元素栋烤。在HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用）中，根元素永遠(yuǎn)是HTML
X:empty匹配沒(méi)有任何子元素（包括包含文本）的元素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丰泊、語(yǔ)言偽類選擇器
: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元素满葛，而且匹配元素被定義了超鏈接并未被訪問(wèn)過(guò)径簿。常用于鏈接描點(diǎn)上
E:visited
鏈接偽類選擇器
選擇匹配的E元素，而且匹配元素被定義了超鏈接并已被訪問(wèn)過(guò)嘀韧。常用于鏈接描點(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ǔ)法及應(yīng)用
說(shuō)明：水平、垂直陰影的位置允許負(fù)值 可進(jìn)行多陰影設(shè)置
文本換行的相關(guān)屬性
Word-wrap
屬性值：
normal
說(shuō)明：只在允許的斷字點(diǎn)換行（瀏覽器保持默認(rèn)處理）
break-word
說(shuō)明：屬性允許長(zhǎng)單詞或 URL 地址換行到下一行羽德。
屬性用來(lái)標(biāo)明是否允許瀏覽器在單詞內(nèi)進(jìn)行斷句几莽，這是為了防止當(dāng)一個(gè)字符串太長(zhǎng)而找不到它的自然斷句點(diǎn)時(shí)產(chǎn)生溢出現(xiàn)象。
Word-break
屬性值：
break-all
說(shuō)明：它斷句的方式非常粗暴玩般，它不會(huì)嘗試把長(zhǎng)單詞挪到下一行银觅，而是直接進(jìn)行單詞內(nèi)的斷句
Keep-all
說(shuō)明：文本不會(huì)換行礼饱，只能在半角空格或連字符處換行坏为。
@font-face
@font-face是CSS3中的一個(gè)模塊，他主要是把自己定義的Web字體嵌入到你的網(wǎng)頁(yè)中镊绪，隨著@font-face模塊的出現(xiàn)匀伏，我們?cè)赪eb的開(kāi)發(fā)中使用字體不怕只能使用Web安全字體（@font-face這個(gè)功能早在IE4就支持）
@font-face的語(yǔ)法規(guī)則：@font-face {
font-family: <YourWebFontName>;
src: <source> [<format>][,<source> [<format>]]*;
[font-weight: <weight>];
[font-style: <style>];
}
@font-face語(yǔ)法說(shuō)明：
1、YourWebFontName:此值指的就是你自定義的字體名稱蝴韭，最好是使用你下載的默認(rèn)字體够颠，他將被引用到你的Web元素中的font-family。如“font-family:"YourWebFontName";”
2榄鉴、source:此值指的是你自定義的字體的存放路徑履磨，可以是相對(duì)路徑也可以是絕路徑蛉抓；
3、format：此值指的是你自定義的字體的格式剃诅，主要用來(lái)幫助瀏覽器識(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)
說(shuō)明：指定background-origin屬性應(yīng)該是相對(duì)位置屬性值：padding-box 背景圖像填充框的相對(duì)位置
border-box 背景圖像邊界框的相對(duì)位置
content-box 背景圖像的相對(duì)位置的內(nèi)容框
注：默認(rèn)值為：padding-box;
2翻屈、Background-clip 背景裁切
說(shuō)明：background-clip 屬性規(guī)定背景的繪制區(qū)域陈哑。屬性值：border-box 背景被裁剪到邊框盒。
padding-box 背景被裁剪到內(nèi)邊距框伸眶。
content-box 背景被裁剪到內(nèi)容框
芥颈。
注：默認(rèn)值：border-box;
3、Background-size 背景尺寸
說(shuō)明：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}
以斜杠/分開(kāi)后面的參數(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
