HTML5與CSS3權威指南

第一章:Web時代的變遷

HTML5放心使用的理由:html

兼容性:HTML5在老闆本的瀏覽器上也能夠正常運行;web

實用性:HTML5內部並無封裝什麼很複雜的,不切實際的功能,而只是封裝了簡單實用的功能;正則表達式

非革命性的發展:HTML5的內部功能不是革命性的,只是發展性的。canvas

第二章:HTML5與HTML4的區別

1.DOCTYPE聲明:

<!DOCTYPE html>瀏覽器

2.指定字符i編碼:

<meta charset = "UTF-8">緩存

3.不容許寫結束標記的元素有:area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr.服務器

  能夠省略結束標記的元素有:li, dt, dd, p, rt, rp, optgroup, potion, colgroup, thead, tbody, tfoot, tr, td, th.cookie

  能夠省略所有標記的元素有:html, head, body, colgroup, tbody.網絡

4.對於具備boolean值的屬性,例如disabled與readonly等,當只寫屬性而不指定屬性值時,表示屬性值爲true,若是想要將屬性值設爲false,能夠不使用該屬性。另外,要想將屬性值設定爲true時,也能夠將屬性名設定爲屬性值,或將空字符串設定爲屬性值。session

5.指定屬性值的時候,屬性值兩邊既能夠用雙引號,也能夠用單引號。HTML5在此基礎上作了一些改進,當屬性值不包括空字符串,「<」, 「>」, 「=」, 單引號,雙引號等字符時,屬性值兩邊的引號能夠省略。

6.canvas元素表示圖形,好比圖表和其餘圖像。這個元素自己沒有行爲,僅提供一塊畫布,但它把一個繪圖API展示給客戶端JavaScript,以使腳本可以把想繪製的東西繪製到這塊畫布上。

7.contentEditable屬性的主要功能是容許用戶編輯元素中的內容,因此該元素必須是能夠得到鼠標焦點的元素,並且在點擊鼠標後要向用戶提供一個插入符號,提示用戶該元素中的內容容許編輯。contentEditable屬性是一個布爾值屬性,能夠被指定爲true或false。

8.designMode屬性用來指定整個頁面是否可編輯,當頁面可編輯時,頁面中任何支持上文所述的contentEditable屬性的元素都變成了可編輯狀態。designMode屬性只能在JavaScript腳本里被編輯修改。該屬性有兩個值——「on」與「off」。屬性指定爲「on」時,頁面可編輯;不然不可編輯。如:document.designMode = "on"

第三章:HTML5的結構

1.在HTML5中,article元素能夠當作是一種特殊種類的section元素,它比section元素更強調獨立性。即section元素強調分段或分塊,而article強調獨立性。具體來講,若是一塊內容相對來講比較獨立,完整的時候,應該使用article元素,可是若是你想要將一塊內容分紅幾段的時候,應該使用section元素。

2.section元素的使用禁忌:

不要將section元素用做設置樣式的頁面容器,那是div元素的工做;

若是article元素,aside元素或nav元素更符合使用條件,不要使用section元素;

不要爲沒有標題的內容區塊使用section元素。

3.header元素是一種具備引導和導航做用的結構元素,一般用來放置整個頁面或頁面內的一個內容區塊的標題,但也能夠包含其餘內容,例如數據表格,搜索表單或相關的logo圖片。一個網頁並未限制header元素的個數,能夠擁有多個,能夠爲每一個內容區塊加一個header元素。

4.hgroup元素是將標題及其子標題進行分組的元素。

第四章:表單與文件

1.placeholder屬性是指文本框處於未輸入狀態而且未獲取光標焦點時,模糊顯示輸入提示文字。

2.url類型的input元素是一種專門用來輸入url地址的文本框。

3.email類型的input元素是一種專門用來輸入email地址的文本框。提交時若是該文本框中的內容不是email地址格式的文字則不容許提交,可是它並不檢查該email地址是否存在。提交時該文本框能夠爲空,除非加上了required屬性。

4.date類型的input元素的使用方法:<input name = "date1" type = "date" value = "2013- 11-2 ">

5.time類型的input元素是一種專門用來輸入時間的文本框,而且在提交時會對輸入時間的有效性進行檢查。

6.datetime類型的input元素是一種專門用來輸入UTC日期的文本框,而且在提交時會對輸入的日期和時間進行有效性檢查。

7.datetime-local類型的input元素是一種專門用來輸入本地日期和時間的文本框,而且在提交時會對輸入的日期和時間進行有效性檢查。

8.number類型的input元素是一種專門用來輸入數字的文本框,而且在提交時會檢查其中的內容是否爲數字。它有min, max, step屬性。

< input name = "number1" type = "number" value = "25" min = "10" max = "100" step = "5">

9.range類型的input元素是一種只容許輸入一段範圍內數值的文本框,它有min, max, step屬性。

< input name = "range1" type = "range" value = "25" min = "0" max = "100" step = "5">

10.search類型的input元素是一種專門用來輸入搜索關鍵詞的文本框。

11.tel類型的input元素被設計爲用來輸入電話號碼的專用文本框。它沒有特殊的校驗規則,不強制輸入數字,譬如:86-0519-8888888.可是開發者能夠經過pattern屬性來指定對於輸入的電話號碼格式的驗證。

12.required屬性能夠應用在大多數輸入元素上(除了隱藏元素,圖片元素按鈕上)。在提交時,若是元素中內容爲空白,則不容許提交,同時在瀏覽器中顯示信息提示文字,提示用戶這個元素中必須輸入內容。

13.對input元素使用pattern屬性,而且將屬性值設爲某個格式的正則表達式,在提交時會檢查其內容是否符合給定格式。

14.在HTML5中,可使用JavaScript調用各input元素的setCustomValidity方法來自定義錯誤信息。

15.mark元素表示頁面中須要突出顯示或高亮顯示的,對於當前用戶具備參考做用的一段文字。

16.在HTML4中,你可能已經習慣於用em元素或strong元素來突出顯示文字,但請記住mark元素的的做用與這兩個元素的做用是有區別的,不能混合使用。mark元素的標示目的與原文做者無關,或者說它不是原文做者用來標示文字的,而是在後來引用時添加上去的,它的目的是吸引當前用戶的注意力,提供給用戶做參考,但願可以對用戶有幫助。而strong是原文做者用來強調一段文字的重要性的,譬如:警告信息,錯誤信息等等,em元素是做者爲了突出文章重點而使用的。

17.在HTML5中,將ol列表進行了改良,爲它添加了start與reversed屬性。

18.在HTML5中,從新定義後的dl列表包含多個帶名字的列表項。每一項包含一條或多條帶名字的dt元素,用來表示術語,dt元素後面緊跟一個或多個dd元素,用來表示定義。在一個元素內,不容許有相同名字的dt元素,不容許有重複的術語。

第五章:繪製圖形

1.canvas元素只是一塊無色透明的區域。須要利用JavaScript編寫在其中進行繪畫的腳本。

2.進行圖形繪製時,須要用到圖形上下文,圖形上下文是一個封裝了不少繪圖功能的對象。須要使用canvas對象的getContext方法來得到圖形上下文。在draw函數中,將參數設爲「2d」。如: var context = canvas.getContext('2d');

3.經過getContext來取得圖形上下文,經過fillStyle屬性與strokeStyle屬性來指定顏色,經過fillRect方法與strokeRect方法來繪製圖形,就能夠繪製出簡單的圖形了。

4.在建立路徑時,須要使用moveTo方法將光標移動到指定的直線起點,而後使用lineTo方法在直線起點與直線終點之間建立路徑,而後將光標移動到直線終點。

5.使用Canvas元素能夠給圖形添加陰影效果。

shadowOffsetX——陰影的橫向位移量;

shadowOffsetY——陰影的縱向位移量;

shadowColor——陰影的顏色;

shadowBlur——陰影的模糊範圍。

6.事實上,即便設定好Image對象的src屬性後,也不必定馬上就能把圖像繪製完畢,譬若有時該圖像文件是一個來源於網絡的比較大的圖像文件,這時用戶就得耐心等待圖像所有裝載完畢才能看見該圖像了。這時,可使用以下方法:image.onload = fuction() {繪製圖像的函數}

7.圖形的平鋪:context.createPattern(image, type);type參數的值必須是如下的字符串之一:

no-repeat:不平鋪;

repeat-x:橫方向平鋪;

repeat-y:縱方向平鋪;

repeat:全方向平鋪。

8.圖形上下文對象的measureText方法來獲得文字的寬度,如:metrics = context.measureText(text).

9.Canvas API使用toDataURL方法把繪畫狀態輸出到一個data URL中,而後從新裝載,客戶可直接把裝載後的文件進行保存。如:canvas.toDataURL(type);

10.setInterval方法設置動畫的間隔時間。setInterval方法爲HTML中固有方法,該方法接受兩個參數,第一個參數表示執行動畫的函數,第二個參數爲時間間隔,單位爲毫秒。

第六章:多媒體播放

1.在HTML5中,新增了兩個元素——video元素與audio元素,其中video元素專門用來播放網絡上的視頻或電影,而audio元素專門用來播放網絡上的音頻數據。

<audio src = "http://Lulingniu/demo/test.mp3">

您的瀏覽器不支持audio元素

</audio>

<video width = "640" height = "360" src = "http://Lulingniu/test.mp4">

您的瀏覽器不支持video元素

</video>

其中「您的瀏覽器不支持audio元素」爲在不支持audio元素的瀏覽器中所顯示的代替的文字。

src:該屬性指定媒體數據的URL地址;

autoplay:該屬性中指定媒體是否在頁面加載後自動播放;

preload:該屬性中指定視頻或音頻數據是否預加載。若是使用預加載的話,瀏覽器會預先將視頻或音頻數據進行緩衝,這樣能夠加快播放的速度,由於播放時數據已經預先緩衝完畢。

poster(video元素獨有屬性):當視頻不可用時,可使用該屬性向用戶展現一幅代替用的圖片;

loop:該屬性中指定是否循環播放視頻或音頻;

controls:該屬性中指定是否爲視頻或音頻添加瀏覽器自帶的播放用的控制條。如:<video src = "sample.mov" controls> </video>

2.對於事件的捕捉及其處理,能夠按兩種方式來進行。

第一種是監聽的方式。使用video元素或audio元素的addEventListener方法來對事件的發生進行監聽,如:videoElement.addEventListener(type, listener, useCapture);

第二種事件處理方式爲JavaScript腳本中常見的獲取事件句柄的方式,如:<video id = "video1" src = "sample.mov" onplay = "begin_playing();"> </video>

function begin_playing()

    {

......

    };

第七章:本地存儲

1.cookies儲存永久數據存在如下問題:

大小:cookies的大小被限制在4KB;

帶寬:cookies是隨HTTP事務一塊兒被髮送的,所以會浪費一部分發送cookies時使用的帶寬;

複雜性:要正確地操縱cookies是很困難的。

2.sessionStorage爲臨時保存,而localStorage爲永久保存。

第八章:離線應用程序

1.Web應用程序的本地緩存是經過每一個頁面的manifest文件來管理的。

2.在manifest文件中,第一行必須是「CACHE MANIFEST」文字,以把本文件的做用告知給瀏覽器,即對本地緩存中的資源文件進行具體設置。

3.在manifest文件中,能夠加上註釋來進行一些必須的說明或解釋,註釋行以「#」文字開頭。

4.在指定資源文件的時候,能夠把資源文件分爲三類,分別是CACHE, NETWORK, FALLBACK.

在CACHE類別中指定須要被緩存在本地的資源文件;

NETWORK類別爲顯示指定不進行本地緩存的資源文件,這些資源文件只有當客戶端與服務器端創建鏈接的時候才能訪問;

FALLBACK類別中的每行中指定兩個資源文件,每個資源文件爲可以在線訪問時使用的資源文件,第二個資源文件爲不能在線訪問時使用的備用資源文件。

每一個類別都是可選的。可是若是文件開頭沒有指定類別而直接書寫資源文件的時候,瀏覽器把這些資源文件視爲CACHE類別,直到看到文件中第一個被書寫出來的類別爲止。

5.爲了讓瀏覽器可以正常閱讀,須要在Web應用程序頁面上的html標籤的manifest屬性中指定manifest文件的URL地址。如:<html manifest = "global.manifest">...</html>

第九章:通訊API

1.發送源與網站的URL地址不是同一律念,發送源只包括域名與端口號。

第十章:使用Web Workers處理線程

1.經過Web Workers,你將能夠建立一個不會影響前臺處理的後臺線程,而且在這個後臺線程中建立多個子線程。

2.建立後臺線程的步驟十分簡單。只要在Worker類的構造器中,將須要在後臺線程中執行的腳本文件的URL地址做爲參數,而後建立Worker對象就能夠了。

如: var worker = new Worker( "worker.js" );

可是,要注意在後臺線程中是不能訪問頁面或窗口對象的。若是在後臺線程的腳本文件中使用到window對象或document對象,則會引發錯誤的發生。

3.使用後臺線程時不能訪問頁面或窗口對象,可是並不表明後臺線程不能與頁面之間進行數據交互。

4.實現子線程與子線程之間的數據交互,要如下步驟:

先建立發送數據的子線程;

執行子線程中的任務,而後把要傳遞的數據發送給主線程;

在主線程接受到子線程傳回來的消息時,建立接收數據的子線程,而後把發送數據的子線程中返回的消息傳遞給接收數據的子線程;

執行接收數據子線程中的代碼。

第十一章:獲取地理位置的信息

第十二章:CSS 3概述

1.當div區域中的文字高度處於不斷變化的狀態時,使用CSS 2樣式表添加邊框圖像的操做相對來講就比較麻煩。在CSS 3中考慮到了這種狀況,添加了容許邊框圖像自動拉伸的屬性,從而解決了這個問題。

第十三章:選擇器

1.在CSS 3中,提倡使用選擇器來將樣式與元素直接綁定起來,這樣的話,在樣式表中什麼樣式與什麼元素相匹配變得一目瞭然,修改起來也很方便。不只如此,經過選擇器,咱們還能夠實現各類複雜的指定,同時也能大量減小樣式表的代碼書寫量,最終書寫出來的樣式表也會變得簡潔明瞭。

2.咱們還能夠在指定樣式的時候使用「^」通配符(開頭字符匹配),「?」通配符(結尾字符匹配)與「*」通配符(包含字符匹配)。譬如:指定id末尾字母爲「t」的div元素的背景色爲藍色:div[ id$ = "t" ] { background: red;}

3.[ att* = val ]屬性選擇器的含義是:若是元素用att表示的屬性之屬性值中包含用val指定的字符的話,則該元素使用這個樣式。

   [ att^ = val]屬性選擇器的含義是:若是元素使用att表示的屬性之屬性值的開頭字符爲用val指定的字符的話,則該元素使用這個樣式。

   [ att$ = val]屬性選擇器的含義是:若是元素用att表示的屬性之屬性值的結尾字符爲用val指定的字符的話,則該元素使用這個樣式。另外請注意該屬性選擇器中必須在指定匹配字符前加上「\」這個轉義字符。[id$ =\-1]  { background-color: yellow; }

4.在CSS中,還有一種僞類選擇器,這種僞類選擇器與類選擇器的區別是,類選擇器能夠隨便起名,譬如上面的「p.class」與"p.center",你也能夠命名爲「p.class1」與「p.class2」,而後在頁面上使用「class = 'class1'」與「class = 'class2'」,可是僞類選擇器是CSS中以定義好的選擇器,不能隨便起名。

5.所謂僞元素選擇器,是指並非針對真正的元素使用的選擇器,而是針對CSS中已定義還的僞元素使用的選擇器,如:選擇器:僞元素{屬性:值}

僞元素選擇器也能夠與類配合使用,如:選擇器  類名:僞元素{屬性:值}

6.first-line僞元素選擇器用於爲某個元素中的第一行文字使用樣式。

7.first-letter僞元素選擇器用於爲某個元素中的文字的首字母(歐美文字)或第一個字(中文或日文等漢字)使用樣式。

8.before僞元素選擇器用於在某個元素以前插入一些內容。

9.after僞元素選擇器用於在某個元素以後插入一些內容,如:<元素>:after    { content : url( test.wav )}

10.結構性僞類選擇器的共同特徵是容許開發者根據文檔樹中的結構來指定元素的樣式。

11.root選擇器將樣式綁定到頁面的根元素中。所謂根元素,是指位於文檔樹中最頂層結構的元素,在HTML頁面中就是指包含着整個頁面的「<html>」部分。

12.若是想對某個結構元素使用樣式,可是想排除這個結構元素下面的子結構元素,讓它不使用這個樣式時,可使用not選擇器。

13.使用empty選擇器來指定當元素內容爲空白時使用的樣式。

14.使用target選擇器來對頁面中的某個target元素(該元素的id被當作頁面中的超連接來使用)指定樣式,該樣式只在用戶點擊了頁面中的超連接,而且跳轉到target元素後起做用。

15.採用nth-child選擇器,只要在「nth-child(n)」語句處,把參數n改爲可循環的an+b的形式就能夠。a表示每次循環中共包括幾種樣式,b表示指定的樣式在循環中所片的位置。

16.結合運用nth-child與nth-last-child的話,能夠指定當某個父元素中只有一個子元素時才使用的樣式。如:<子元素>:nth-child(1):nth-last-child(1)  {  //指定樣式 }

17.在CSS 3的選擇器中,處理結構性僞類選擇器外,還有一種UI元素狀態僞類選擇器。這些選擇器的共同特徵是:指定的樣式只有當元素處於某種狀態下時才起做用,在默認狀態下不起做用。

在CSS 3中,共有11仲UI元素狀態僞類選擇器:E:hover, E:active, E:focus, E:enabled, E:disabled, E:read-only, E:read-write, E:checked, E:default, E:indeterminate及E:selection.

第十四章:使用選擇器在頁面中插入內容

1.在content屬性中追加了一個none屬性值。

2.從CSS 2.1開始,只有當使用before選擇器與after選擇器的時候,normal屬性值的做用才與none屬性值相同,都是不讓選擇器在個別元素的前面或後面插入內容。可是none屬性值只能應用在這兩個選擇器中,而normal屬性值還能夠應用在其餘用來插入內容的選擇器中。

3.在content屬性中使用counter屬性值來針對多個項目追加連續編號,如:<元素>:before  { content: counter( 計數器名 );}  使用計數器來計算編號,計數器可任意命名。另外,還須要在元素的樣式中追加對元素的counter-increment屬性的指定,爲了使用連續編號,須要將counter-increment屬性的屬性值設定爲before選擇器或after選擇器的counter屬性值中所指定的計數器名。如:<元素>  { counter-increment : before選擇器或after選擇器中指定的計數器名 }

4.使用content屬性的open-quote屬性值與close-quote屬性值在字符串兩邊添加諸如括號,單引號,雙引號之類的嵌套文字符號。open-quote屬性值用於添加開始的嵌套文字符號,close-quote屬性值用於添加結尾的嵌套文字符號。另外,在元素的樣式中使用quotes屬性來指定使用什麼樣式嵌套文字符號。如:h1{ quotes:  "(" ")" }

第十五章:文字與字體相關樣式

1.text-shadow屬性給文字添加陰影,如:text-shadow: length length length color

2.CSS 3中,使用word-break屬性來讓文字自動換行。

3.瀏覽器自己也自帶着讓文本自動換行的功能。對於西方文字來講,瀏覽器會在半角空格或連字符的地方自動換行,而不會在單詞的當中忽然換行。對於中文來講,能夠在任何一箇中文字後面進行換行。

4.當中文當中含有標點符號的時候,瀏覽器老是不可能讓標點符號位於一行文字的行首,一般將標點符號以及它前面的一個文字做爲一個總體來統一換行。

5.在CSS 3中,可使用work-break屬性來本身決定自動換行的處理方法。

6.在CSS 3中,使用word-wrap屬性來實現長單詞與URL地址的自動換行。如: div { word-wrap: braek-word; }

7.在CSS 3中,可使用@font-face屬性來利用服務器端文字。如:@font-face {

                                                                                                                   font-family: WebFont;

                                                                                                                   src: url( 'font/Fontin_Sans_R_45b.otf' )  format (" opentype ");

                                                                                                                   font-weight: normal;

                                                                                                           }

使用@font-face屬性顯示客戶端本地的字體時,須要將字體文件路徑的URL屬性值修改成「local()」形式的屬性值,而且在「local」後面的括號中寫入使用的字體。

8.font-size-adjust屬性修改字體種類而保持字體尺寸不變。可是它須要使用每一個字體種類自帶的一個aspect值,aspect值能夠用來在將字體修改成其餘字體時保持字體大小基本不變。

第十六章:盒相關樣式

1.在CSS中,使用display屬性來定義盒了類型。整體上來講,CSS中的盒分爲block類型與inline類型。例如:div元素與p元素屬於block類型,span元素與a元素屬於inline類型。

2.若是樣式代碼使用display屬性,能夠將div屬性與span元素的類型進行互換,將div元素變成inline類型的元素,將span元素變成block類型的元素。

3.inline-block類型盒屬於block類型盒的一種,可是在顯示時它具備inline類型盒的特色。

4.width屬性與height屬性只能使用在block類型的元素上。

5.使用float類型將前兩個div元素並列顯示。

6.默認狀況下,使用inline-block類型時並列顯示的元素的垂直對齊方式是底部對齊,爲了將垂直對齊方式改成頂部對齊,還須要在div元素的樣式中加入vertical-align屬性。另外,若是要讓兩個div元素的當中沒有縫隙,還須要去除代碼中兩個div元素之間的換行符。

7.使用inline-block類型一樣能夠實現代碼的水平菜單。同時能夠去除列表項目中的「●」標記。

8.將元素指定爲run-in類型或compact類型的時候,若是元素後面還有block類型的元素,run-in類型的元素將被包含在block類型的元素內部,而compact類型的元素將被放置在block類型的元素左邊。

9.將元素的類型指定爲none類型後,改元素將不會被顯示。

10.在CSS 3中,可使用box-shadow屬性讓盒在顯示時產生陰影效果。

11.可使用first-letter選擇器或first-line選擇器來只讓第一個文字或第一行具備陰影效果。

12.可使用box-shadow屬性讓表格及表格內的單元格產生陰影效果。

13.在CSS 3中,使用box-sizing屬性來指定針對元素的寬度與高度的計算方法。

14.能夠給box-sizing屬性指定的屬性值爲content-box屬性值與border-box屬性值。content-box屬性值表示元素的寬度與高度不包括內部補白區域,以及邊框的寬度與高度,border-box屬性值表示元素的寬度與高度包括內部補白區域,以及邊框的寬度與高度,在沒有使用box-sizing屬性的時候,默認使用content-box屬性值。

第十七章:與背景和邊框相關樣式

1.在HTML中,一個具備背景的元素一般由元素的內容,內部補白(padding),邊框,外部補白(margin)構成。

2.在使用background-clip來修改背景的顯示範圍,若是將background-clip的屬性值設定爲border,則背景範圍包括邊框區域,若是設定爲padding,則不包括邊框區域。

            如:div  {border: dashed 15px green;}

3.background-origin屬性指定繪製背景圖像的繪製起點,屬性值爲border, padding, content,分別表明從邊框的左上角,內部補白區域的左上角或內容的左上角開始繪製。另外,將三個div元素的background-repeat屬性均指定爲no-repeat,表示不使用平鋪方式。

4.在CSS 3中,可使用background-size屬性來指定背景圖像的尺寸。

5.若是要維持圖像縱橫比例的話,能夠在設定圖像寬度與高度的同時,將另外一個參數設定爲「auto」。

6.在CSS 3中,可使用background-break屬性來指定平鋪內聯元素圖像時的循環方式,值爲bounding-box, each-box, continuous.屬性爲bounding-box時,背景圖像在整個內聯元素中進行平鋪。指定爲each-box的時候,背景圖像在每一行中進行平鋪,指定爲continuous的時候,下一行中的圖像緊跟着上一行中的圖像繼續平鋪。

7.在使用background-image屬性來指定圖像文件的時候,是按在瀏覽器中顯示時圖像疊放的順序從上往下指定的,第一個圖像文件是放在最上面的,最後指定的文件是放在最下面的。另外,經過多個background-repeat屬性與background-position屬性的指定,能夠單獨指定背景圖像中某個圖像文件的平鋪方式與放置位置。

8.在CSS 3中,只要使用border-radius屬性指定好圓角的半徑,就能夠繪製圓角邊框了。能夠指定兩個半徑,如:border-radius: 40px  20px; 若是使用了這個屬性,的是把邊框設定爲不顯示的時候,瀏覽器將把背景的四個角繪製爲圓角。

9.在CSS 3中增長了一個border-image屬性,可讓處於隨時變化狀態的元素的長或寬的邊框統一使用一個圖像文件來繪製。

10.在CSS 3中,除了使用border或border-width屬性來指定邊框的寬度外,使用border-image屬性一樣能夠指定邊框的寬度。如:border-image: url(圖像路徑) A B C D / border-width  topbottom  leftright  ,其中,topbottom表示元素的上下兩條邊中圖像的顯示方法,leftright表示元素的左右兩條邊的顯示方法。在顯示時能夠指定的值爲repeat, stretch, round.將顯示方法指定爲round時與將顯示方法指定爲repeat時相似,都是將圖像進行平鋪顯示,區別在於若是最後顯示的一幅圖像不能被徹底顯示,且可以顯示的部分不到圖像的一半,就不顯示最後的圖像,而後擴大前面的圖像,使顯示區域正好完整平鋪所有圖像;若是可以顯示的部分超過圖像的一半,就顯示圖像最後的圖像,可是將所有顯示的圖像縮小,使顯示區域正好完整平鋪所有圖像。

第十八章:CSS 3中的變形處理

1.在CSS 3中,能夠利用transform功能來實現文字或圖像的旋轉,縮放,傾斜,移動這四種類型的變形處理。

2.「transform: rotate( 45deg )」語句使該div元素順時針旋轉45度。

3..「scale("0.5")」表示縮小50%。 transform: scale( 0.5, 2 );表示水平方向縮小50%,垂直方向放大一倍。

4.「 skew ( 30deg, 30deg )」表示水平方向向上傾斜30度,垂直方向向上傾斜30度。

5.「 translate ( 50px, 50px )」表示水平方向上移動50個像素,垂直方向上移動50個像素。

6.使用transform方法進行文字或圖像的變形時,是以元素的中心點爲基準點進行的。使用transform-origin屬性,能夠改變變形的基準點。

第十九章:CSS 3中的動畫功能

1.CSS 3中的動畫功能分爲Transitions功能與Animations功能,這兩種功能均可以經過改變CSS 中的屬性值來產生動畫效果。到目前爲止,Transitions功能支持從一個屬性值平滑過渡到另外一個屬性值,Animations功能支持經過關鍵幀的指定來在頁面上產生更復雜的動畫效果。

2.transition: property duration timing-function   其中property表示對哪一個屬性進行平滑過渡,duration表示在多長時間內完成屬性值的平滑過渡,timing-function表示經過什麼方法來進行平滑過渡。

3.div: hover { background-color: #00ffff; }經過hover屬性指定當鼠標指針停留在div元素上時的背景色爲淺藍色。

4.使用Transition功能實現動畫的缺點是隻能指定屬性的開始值與終點值,而後在這兩個屬性值之間實現平滑過渡,不能實現更爲複雜的動畫效果。

5. @-webkit-keyframes 關鍵幀集合名 { 建立關鍵幀的代碼 }

@-webkit-keyframes mycolor{

    0%{ background-color: red; }

    40%{ background-color: darkblue; }

     70%{ background-color: yellow; }

     100%{ background-color: red; }

}

div: hover{

     -webkit-animation-name: mycolor;

     -webkit-animation-duration: 5s;

     -webkit-animation-timing-function: linear;

}

在animation-name屬性中指定關鍵幀集合的名稱,在animation-duration屬性中指定完成整個動畫所花費的時間,在animation-timing-function屬性中指定實現動畫的方法。

6.在元素的樣式代碼中,能夠經過animation-iteration-count屬性來指定動畫的播放次數,也可經過對該屬性指定infinite屬性值來讓動畫不停地循環播放。

7.Animation中的方法:linear, ease-in, ease-out, ease, ease-in-out.

第二十章:佈局相關樣式

1.在CSS 3中,經過column-count屬性來使用多欄佈局方式,該屬性的含義是將一個元素中的內容分爲多欄進行顯示。

2.使用多欄佈局的時候,須要將元素的寬度設置成多個欄目的總寬度,它與使用float屬性和position屬性時的區別是:使用兩個屬性時只需單獨設定每一個元素的寬度便可,而使用多欄佈局時須要設定元素中多個欄目相加後的總的寬度。使用column-width屬性單獨設置每一欄的寬度而不設定元素的寬度。使用column-gap屬性來設定多欄之間的間隔距離。使用column-rule屬性在欄與欄之間增長一條間隔線,而且設定該間隔線的寬度,顏色等等。

3.在CSS 3中,經過box屬性來使用盒佈局。使用box-flex屬性,使盒佈局變爲彈性盒佈局就能夠了。使用彈性盒佈局時,能夠經過box-ordinal-group屬性來改變各元素的顯示順序。使用box-orient來指定多個元素的排列方向。

第二十一章:Media Queries相關樣式

1.CSS 3中單獨增長了Media Queries模塊,使用這個模塊,網頁製做者只須要針對不一樣的瀏覽器窗口尺寸來編寫不一樣的樣式,而後讓瀏覽器根據不一樣的窗口尺寸來選擇使用不一樣的樣式便可。

      @media  設備類型  and   ( 設備特性 )  { 樣式代碼 }

第二十二章:CSS 3的其餘重要樣式和屬性

1.在CSS 3中,能夠經過對RGB顏色設定alpha通道的方法來定義RGBA顏色。A指alpha通道值。

2.opacity屬性是CSS 中專門用來指定透明度的一個屬性,取值範圍也在0~1之間,0表示徹底透明,1表示不透明。

3.在CSS 2中定義了一個outline屬性,用來在元素周圍繪製一條輪廓線,能夠起到突出元素的做用。如:outline: outline-color  outline-style  outline-width

4.CSS 3中新增的out-offset屬性,給屬性指定一個帶像素單位的整數值便可,該整數值表示向外偏離多少個像素。如:outline-offset: 2px;

5.CSS 3中的一個重要屬性resize,它容許用戶經過拖動的方式來修改元素的尺寸。

6.在CSS 3中,可使用initial屬性值取消對元素的樣式指定。

 

轉自:http://blog.csdn.net/ljiechang/article/details/14047363

相關文章
相關標籤/搜索