HTML5與CSS3權威指南

第一章:Web時代的變遷

HTML5放心使用的理由:

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

實用性:HTML5內部並沒有封裝什麼很複雜的,不切實際的功能,而只是封裝了簡單實用的功能;

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

第二章: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.

  可以省略全部標記的元素有:html, head, body, colgroup, tbody.

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

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屬性值取消對元素的樣式指定。

第二十三章:綜合實例

 


 




發佈了16 篇原創文章 · 獲贊 7 · 訪問量 5萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章