Css3的概念和優(yōu)勢(shì)
CSS3是css技術(shù)的升級(jí)版本,CSS3語(yǔ)言開發(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: 一開始就構(gòu)建完整的功能,然后再針對(duì)低版本瀏覽器進(jìn)行兼容。 區(qū)別: 優(yōu)雅降級(jí)是從復(fù)雜的現(xiàn)狀開始,并試圖減少用戶體驗(yàn)的供給,而漸進(jìn)增強(qiáng)則是從一個(gè)非?;A(chǔ)的,能夠起作用的版本開始,并不斷擴(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è)詞列表,并且以空格隔開,其中詞列表中包含了一個(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-”開頭的值(比如說(shuō)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,也就是說(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è)開始算索引。 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的開發(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}
以斜杠/分開后面的參數(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
更多建議: