HTML5與CSS3權威指南

一、Web時代的變遷

二、HTML5與HTML4的區別

1.新增的元素:section、article、aside、header、hgroup、footer、nav、figure、video、audio、embed、mark、progress、time、ruby、rt、rp、wbr、canvas、command、details、datalist、datagrid、keygen、output、source、menu

2.新增的input元素:email、url、number、range、Date Pickers

3.廢除的元素:

  • 能使用CSS替代的元素:basefont、big、center、font、s、strike、tt、u

  • 不再使用frame框架,僅支持iframe

  • applet、bsound、blink、marquee

  • rb、acronym、dir、isindex、listing、xmp、nextid、plaintext

4.新增的屬性:

  • 表單相關:autofocus、placeholder、form、required、autocomplete、min、max、multiple、pattern、step、list、formaction、formenctype、formmethod、formnovalidate、formtarget、novalidate

  • 鏈接相關:media、hreflang、rel、sizes、target

  • 其他屬性:reversed、charset、type、label、scoped、async、manifest、sandbox、seamless、srcdoc

5.全局屬性

  • contentEditable:允許用戶編輯元素中的內容,isContentEditable

  • designMode:指定整個頁面是否可編輯,只能在JS腳本里被編輯修改,只有"on"和"off"值

  • hidden:瀏覽器不渲染該元素,使該元素處於不可見狀態

  • spellcheck:對用戶輸入的文本內容進行拼寫和語法檢查

  • tabindex:每個tab是第幾個被訪問到

三、HTML5的結構

A.新增的主體結構元素

1.article:代表文檔、頁面或應用程序中獨立的、完整的、可以獨自被外部引用的內容

2.section:用於對網站或應用程序中頁面上的內容進行分塊,可以理解為section元素中的內容可以單獨存儲到數據庫中或輸出到word文檔中,通常不推薦為那些沒有標題的內容使用section元素

3.nav:可以用作頁面導航的鏈接組,其中導航元素鏈接到其他頁面或當前頁面的其他部分。可用於傳統導航條、側邊欄導航、頁內導航、翻頁操作

4.aside:用來表示當前頁面或文章的附屬信息部分,它可以包含與當前頁面或主要內容相關的引用 、側邊欄、廣告、導航條,以及其他類似的有別於主要內容的部分

5.time:代表24小時中的某個時刻或某個日期,表示時刻時允許帶時差

6.pubdata屬性:是一個可選的,boolean值的屬性,可以用到article中的time元素上,意思是time元素代表了文章或整個網頁的發佈日期

B.新增的非主體結構元素

1.header:是一種具有引導和導航作用的結構元素,通常用來放置整個頁面內的一個內容區塊的標題,但也可以包含其他內容

2.hgroup:是將標題及其子標題進行分組的元素,通過會將h1-h6元素進行分組,譬如一個內容區塊的標題及其子標題算一組

3.footer:可以作為其上層父級內容區塊或是一個根區塊的腳註

4.address:用來在文檔中呈現聯繫信息,包括文檔作者或文檔維護者的名字、他們的網站鏈接、電子郵箱、真實地址、電話號碼等

C.HTML5結構

1.顯式編排內容區塊:指明確使用section等元素創建文檔結構,在每個內容區塊內使用標題(h1-h6、hgroup等),儘量使用顯式編排

2.隱式編排內容區塊:指不明確使用section等元素,而是根據頁面中所書寫的各級標題(h1-h6、hgroup等 )等把內容區塊自動創建出來

四、表單與文件

A.新增元素與屬性

1.form屬性:表單元素放在表單外,可以用form指定表單id

2.formaction屬性:按扭元素可以指定不同的action

3.formmethod屬性:按扭元素可以指定不同的method

4.placeholder屬性:當文本框處於未輸入狀態時文本框中顯示的輸入提示

5.autofocus屬性:當頁面打開時,控件自動獲得光標焦點,一個頁面只能有一個控件具有該屬性,不要濫用

6.list屬性:為單行文本增加一個list屬性,該屬性的值為某個datalist元素的id,實現類似下拉功能

7.autocomplete屬性:配合list屬性實現自動補全,可以指定on、off和""

8.增加的input元素:search、tel、url、email、datetime、date、month、week、time、datetime-local、number、range、color

9.file增加multiple屬性,可以一次選擇多個文件,可以通過accept屬性限制文件的種類

10.output元素,定義不同類型的輸出,比如計算結果或腳本的輸出

B.表單驗證

1.required屬性:非空驗證

2.pattern屬性:通過正則檢查內容

3.min與max屬性:在數值和日期控件中使用,限制範圍

4.step屬性:指定數值類型的步長

5.js中可以獲取控件的checkValidity()方法獲取驗證狀態,還有validity屬性

6.取消驗證:novalidate屬性、formnovalidate屬性

7.自定義錯誤信息:js調用setCustomValidity方法

C.增強的頁面元素

1.figure元素:用來表示網頁上一塊獨立的內容,將其從網頁上移除後不會對網頁上的其他內容產生任何影響 ,主要用於圖片、統計圖或代碼示例,也可以用於其他的內容;figcaption元素表示figure元素的標題,從屬於figure元素,必須在figure內部

2.details元素:用於局部區域進行展開或收縮的方法,內部需要一個summary元素,open屬性表示處於展開狀態

3.mark元素:表示頁面中需要突出顯示或高亮顯示的,對於當前用戶具有參考作用的一段文字

4.progress元素:代表一個任務 的完成進度,可能用0到某個最大數字之間的數字來表示 準確的進度完成情況

5.meter元素:表示規定範圍內的數量值,包含六個屬性:value、min、max、low、high、optimum

6.menu和command元素:表示菜單和菜單項

7.改良的ol列表:添加了start屬性,表示編號的起始值,reversed屬性,對列表反序

8.改良的dl列表:增加dt、dd

9.加以嚴格限制的cite元素:僅用於表示作品的標題

10.重新定義的small元素:專門用來標識所謂“小字印刷體”的元素,不允許被應用在頁面主內容中,只允許被當做輔助信息用inline方式內嵌在頁面上使用

D.文件API

1.HTML5中,添加multiple屬性,file控件允許放置多個文件,FileList對象則為這些file對象的列表,代表用戶選擇的所有文件

2.Blob表示二進制原始數據,提供一個slice方法,有size和type屬性,file對象繼承了該對象

3.FileReader接口:用來把文件讀入內存,並且讀取文件中的數據,可以在瀏覽器中異步訪問文件系統,讀取文件中的數據,可讀取為二進制碼、文本、DataURL,包含讀取過程事件

E.拖放API

1.實現步驟:

  • 將對象元素的draggable屬性設為true,img與a元素默認允許拖放

  • 編寫拖放相關的事件處理代碼:dragstart、drag、dragenter、dragover、dragleave、drop、dragend

2.DataTransfer對象:可以實現定製拖放圖標,讓它只支持特定拖放等,甚至可以實現更復雜的拖放操作

  • 屬性:dropEffect、effectAllowed、types

  • 方法:clearData、setData、getData、setDragImage

五、繪製圖形

A.canvas元素的基礎知識

1.在頁面上放置一個canvas元素,就相當於在頁面上放置了一塊“畫布”,可以在其中進行圖形的描繪,只是一個透明的區域,需要利用JS編寫在其中進行繪畫的腳本

2.要指定ID、width、height三個屬性

3.相關api

  • getContext('2d')獲取context

  • fillRect(x,y,w,h)填充

  • strokeRect(x,y,w,h)邊框

  • fillStyle填充的樣式

  • strokeStyle邊框樣式

  • lineWidth邊框寬度

  • clearRect(x,y,w,h)擦除指定區域中的圖形

B.使用路徑

1.相關api

  • beginPath()開始路徑的創建

  • arc(x,y,radius,startAngle,endAngle,anticlockwise)繪製圓形

  • closePath()關閉路徑

  • fill()直接填充路徑

  • stroke()直接繪製路徑邊框

2.不關閉路徑,已創建的路徑會永遠保留著,創建的圖形會一次又一次地進行重疊

3.繪製線段

  • moveTo(x,y)將光標移動到指定的起點

  • lineTo(x,y)在起點與終點之間創建路徑

  • bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)貝濟埃曲線

C.繪製漸變圖形

1.createLinearGradient(xStart,yStart,xEnd,yEnd)線性漸變的LinearGradient對象

2.addCOlorStop(offset,color)追加漸變的顏色,至少追加兩次,開始顏色與漸變顏色

3.createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd )徑向漸變

D.繪製變形圖形

1.座標變換

  • translate(x,y)平移

  • scale(x,y)擴大

  • rotate(angle)旋轉

2.transform(m11,m12,m21,m22,dx,dy)矩陣變換

E.圖形組合

1.globalCompositeOperation=type,type的值:

  • source-over默認覆蓋

  • destination-over在原有圖形之下繪製

  • source-in作in運算,只顯示新圖形重疊的部分

  • destination-in,只顯示原圖形重疊的部分

  • source-out,只顯示新圖形不重疊的部分

  • destionation-out,只顯示原圖形不重疊的部分

  • source-atop,只顯示新圖片重疊及未被覆蓋的原有圖形部分

  • destionation-atop,只顯示原圖形重疊及未被覆蓋的新圖形部分

  • xor,只繪製新圖形不重疊的部分

  • copy,重疊的部分透明

F.給圖形繪製陰影

1.幾個屬性:

  • shadowOffsetX,陰影的橫向位移量

  • shadowOffsetY,陰影的縱向位移量

  • shadowColor,陰影的顏色

  • shadowBlur,陰影的模糊範圍

G.繪製圖像

1.drawImage(image,……)繪製圖像

2.createPattern(image,type)圖像平鋪,type,no-repeat、repeat-x、repeat-y、repeat

3.像素處理:getImageData(……)、putImageData(……)

H.繪製文字

1.fillText(text,x,y,[maxWidth])填充繪製

2.strokeText(text,x,y,[maxWidth])輪廓繪製

3.文字相關屬性:font、textAlign、textBaseline

I.補充知識

1.save()將當前狀態保存到棧中,restore()從棧中取出

2.toDataURL(type),把狀態輸出到一個data URL中然後重新裝載

六、多媒體播放

1.video:播放視頻,需要指定長寬

2.audio:播放音頻

3.source:為同一個媒體數據指定多個播放格式與編碼方式

4.屬性:

  • src,指定媒體數據的URL

  • autoplay,指定媒體是否在頁面加載後自動播放

  • preload,指定媒體是否預加載

  • poster,video元素獨有,當視頻不可用時,可以向用戶展示一幅替代用的圖片

  • loop,指定是否循環播放視頻或音頻

  • controls,是否為視頻或音頻添加瀏覽器自帶的播放用的控制條

  • width與height,指定視頻的寬度與高度,video獨有

  • error,只要出現錯誤,將返回一個MediaError對象,為只讀屬性,錯誤狀態包括MEDIA_ERR_ABORTED(1)、MEDIA_ERR_NETWORK(2)、MEDIA_ERR_DECODE(3)、MEDIA_ERR_SRC_NOT_SUPPORTED(4)

  • networkState,讀取當前網絡狀態,為只讀屬性,包括NETWORK_EMPTY(0)、NETWORK_IDLE(1)、NETWORK_LOADING(2)、NETWORK_NO_SOURCE(3)

  • currentSrc,讀取播放中的媒體數據的URL地址,為只讀

  • buffered,返回一個對象,該對象實現TimeRanges接口,以確認瀏覽器是否已緩存媒體數據

  • readyState,返回媒體當前播放位置的就緒狀態,包括HAVE_NOTING(0)、HAVE_METADATA(1)、HAVE_CURRENT_DATA(2)、HAVE_RUTURE_DATA(3)、HAVE-ENOUGH_DATA(4)

  • seeking與seekable,seeking表示瀏覽器是否正在請求某一特定播放位置的數據,seekable返回一個TimeRanges對象,表示 請求到的數據的時間範圍

  • currentTime,startTime、duration,currentTime讀取媒體的當前播放位置,為可讀寫屬性,startTime讀取媒體播放的開始時間通常為0,duration讀取媒體文件的總的播放時間

  • played、paused、ended,played返回一個TimeRanges對象,可以讀取媒體文件的已播放部分的時間段,paused表示是否暫停播放,played返回是否播放完畢

  • defaultPlaybackRate、playbackRate,defaultPlaybackRate讀取或修改媒體默認的播放速率,playbackRate讀取或修改媒體當前的播放速率

  • volume、muted,volume讀取或修改媒體的播放音量,muted讀取或修改媒體的靜音狀態

5.方法

  • play方法,播放媒體

  • pause方法,暫停媒體

  • load方法,重新載入媒體進行播放

  • canPlayType方法,測試瀏覽器是否支持指定的媒體類型

6.事件:loadstart、progress、suspend、abort、error、emptied、stalled、play、pause、loadedmetadata、loadeddata、waiting、playing、canplay、canplaythrough、seeking、seeked、timeupdate、ended、ratechange、durationchange、volumechange

七、本地存儲

A.Web Storage

1.sessionStorage:將數據保存在session對象中,臨時保存

2.localStorage:將數據保存在客戶端本地的硬件設備中,永久保存

3.保存:

  • sessionStorage.setItem(key,value);

  • localStorage.setItem(value);

4.獲取:

  • sessionStorage.getItem(key);

  • localStorage.getItem(key);

5.清除:.clear()方法

B.本地數據庫

1.使用SQLLite數據庫

2.var db = openDatabase(dbname,version,describe,size);

3.db.transaction(function(){}),事務

4.executeSql(sqlquery,params,dataHandler,errorHandler)方法執行SQL

八、離線應用程序

1.本地緩存與瀏覽器緩存的區別:

  • 本地緩存是為整個Web應用程序服務的,而瀏覽器的網頁緩存只服務於單個網頁

  • 網頁緩存是不安全、不可靠的,本地緩存是可靠的

2.Web應用程序的本地緩存是通過每個頁面的mainfest文件來管理的,需要服務器添加text/cache-manifest的mime類型

3.只要頁面上的資源文件被本地緩存過,下次瀏覽器打開這個頁面時,總是先使用本地緩存中的資源,然後請求manifest文件

4.applicationCache對象代表了本地緩存,可以用它來通知用戶本地緩存中已經被更新,也允許用戶手工更新本地緩存

  • updateReady,通知本地緩存已被更新

  • swapCache,手工執行本地緩存的更新

九、通信API

1.跨文檔消息傳輸:

  • window.postMessage(message,targetOrigin);向其他窗口發送消息

  • window.addEventListener('message',function(){...},false);監聽消息事件

2.Web Sockets可以在服務器與客戶端之間建立一個非HTTP的雙向連接,實時的、永久的,除非被顯式關閉

3.使用:

  • var ws = new WebSocket("ws://localhost:8005/socket");

  • ws.send("data");發送數據

  • ws.onmessage=function(event){},接收數據

  • ws.onopen=function(event){},監聽socket的打開事件

  • ws.onclose=function(event){},監聽socket的關閉事件

  • ws.close(),關閉socket

4.readyState屬性可獲取WebSocket對象的狀態:CONNECTING(0)、OPEN(1)、CLOSING(2)、CLOSED(3)

十、使用Web Workers處理線程

1.在後臺線程中不能訪問頁面或窗口對象,如果使用window或document會引起錯誤

2.使用:

  • var worker = new Worker("worker.js");

  • worker.onmessage = function(event){}; 處理收到的消息

  • worker.postMessage(message); 發送消息

3.線程中可以嵌套子純種,可以把較大的後臺線程切分成幾個子線程

十一、獲取地理位置信息

1.為window.navigator對象增加了一個geolocation屬性

2.geolocation屬性的方法:

  • getCurrentPosition(onSuccess,onError,options),獲取地理位置信息

  • watchCurrentPosition(onSuccess,onError,options),持續監控當前位置信息

  • clearWatch(watchId),停止獲取當前用戶的位置信息

3.position對象屬性:latitude、longitude、altitude、accuracy、altitudeAccurancy、heading、speed、timestamp

十二、CSS3概述

  1. 模塊與模塊化結構,為了避免產生瀏覽器對於某個模塊支持不完全的情況

十三、選擇器

1.class屬性缺點:本身沒有語義;容易混亂;

2.CSS3提倡使用選擇器來將樣式與元素直接綁定,減少樣式表的代碼書寫量

3.語法:E[foo$="val"],可以使用^、?、*通配符

4.偽元素選擇器,並不是針對真正的元素使用的選擇器,而是針對CSS中已經定義好的偽元素使用的選擇器,格式:選擇器 類名:偽元素 {屬性:值}

5.偽元素選擇器:

  • :first-line:用於為某個元素中的第一行文字使用樣式

  • :first-letter:用於為某個元素中的文字的首字母或第一個字使用樣式

  • :before:在某個元素之前插入一些內容

  • :after:在某個元素之後插入一些內容

  • :root,將樣式綁定到頁面的根元素,就是元素,注意與

    背景色的範圍
  • :not,如果想對某個結構元素使用樣式,但是想排除指定的子結構元素

  • :empty,當元素內容為空白時使用的樣式

  • :target,對頁面中某個target元素指定樣式,只在用戶點擊了頁面中的超鏈接,並且跳轉到target元素後起作用

  • :first-child,元素中的第一個子元素

  • :last-child,元素中的最後一個子元素

  • :nth-child(n),:nth-last-child(n),對指定序號的子元素指定樣式,n可以指定為數字,或odd為奇數,even為偶數,可以實現循環列表的樣式如(4n+1)

  • :nth-of-type(n),nth-last-of-type(n),在計算子元素時只針對同類型的子元素計算

  • :only-child,:only-of-type,讓樣式只對唯一子元素起作用的實現方法

6.UI元素偽類選擇器:

  • E:hover,當鼠標移動到元素上面時所使用的樣式

  • E:active,指定元素被激活(元素在鼠標上按下還沒鬆開時)

  • E:focus,指定元素獲得光標焦點時使用的樣式

  • E:enabled,當元素牌可用狀態時的樣式

  • E:disabled,當元素牌不可用狀態時的樣式

  • E:read-only,指定元素牌只讀狀態時的樣式

  • E:read-write,指定元素處於非只讀狀態時的樣式

  • E:checked,指定當表單中的radio或checkbox處於選中狀態時的樣式

  • E:default,指定當頁面打開時默認處於選取狀態的radio或checkbox的樣式

  • E:indeterminate,指定當前頁面打開 時,如果一組單選框中任何一個單選框都沒有被設定為選取狀態時整組單選框的樣式

  • E:selection,指定當元素處於選中狀態時的樣式

7.通用兄弟元素選擇器: ~ {}

十四、使用選擇器在頁面中插入內容

1.使用content:'',可以指定none

2.content:url(),可以插入圖像

3.content:counter(計數器名);針對多個項目追加連續編號,在元素樣式中counter-increment屬性設定計數器名counter-increment:before選擇器或after選擇器中指定的計數器名

4.content:'第'counter(計數器名)'章',可以追加文字

5.content:counter(計數器名,編號種類),編號種類可以是list-style-type類型

6.可以使用content屬性的open-quote屬性值與close-quote屬性值在字符串兩邊添加括號、單引號、雙引號之類的潛逃文字符號,在元素樣式中使用quotes屬性來指定使用什麼嵌套文字符號

十五、文字與字體相關樣式

1.text-shadow:length length length color,給頁面上的文字添加陰影效果,可以指定多個陰影

2.word-break屬性:normal,使用默認換行規則,keep-all,只能在半角空格或連字符處換行,break-all,允許在單詞內換行

3.word-wrap屬性單詞換行:normal,默認,break-word,在長單詞或url地址內部進行換行

4.@font-face屬性可以使用服務器端字體,包括:font-family:WebFont,聲明服務器端字體,src:url('xxxxx.otf') format('字體文件格式'),指定服務器端字體路徑

5.@font-face中可以指定的其他屬性值:font-style、font-variant(字體大小寫)、font-weight、font-stretch(設置字體是否伸縮變形)、font-size

6.font-size-adjust: aspect,保持文字大小不發生變化的情況下改變字體的種類,aspect值是比例值,可以用來保持大小,計算方法為x-height值除以該字體的尺寸

十六、盒相關樣式

A.盒的類型

1.基本類型:

  • block,一行只有一個

  • inline,一行並列容納多個

2.inline-block類型,屬於block類型盒的一種,但是在顯示時具有inline類型盒的特點,但可以指定width和height屬性,可代替float

3.inline-table類型,表格文字環繞,可以vertical-align設計對齊方式

4.list-item類型,可以將元素的類型設定為list-item類型,可以將多個元素作為列表來顯示,同時在元素的開頭加上列表的標記

5.run-in類型與compact類型,如果元素後面還有block類型的元素,run-in類型的元素將被包含在block類型的元素內部,而compact類型的元素將被放置在block類型的元素左邊

6.表格相關類型:table、inline-table、table-row、table-cell、table-row-group、table-header-group、table-footer-group、table-column、table-column-group、table-caption

B.對於盒中容納不下的內容的顯示

1.overflow屬性:hidden、scroll、auto、visiable

2.overflow-x屬性與overflow-y屬性:單獨指定在水平方向或垂直方向上內容超出盒容納範圍時的顯示方法

3.text-overflow屬性,在盒的末尾顯示省略符號,只在水平方向上有效

C.對盒使用陰影

1.box-shadow屬性,box-shadow:length length length color

D.指定針對元素的寬度與高度的計算方法

1.box-sizing屬性,可以指定用width屬性與height屬性分別指定的寬度值與高度值是否包含元素內部的補白區域,以及邊框的寬度與高度

2.box-sizeing可以指定:

  • content-box,表示元素的寬度與高度不包括內部補白區域,及邊框的寬度與高度,默認

  • border-box,表示元素的寬度與高度包括內部補白區域,及邊框的寬度與高度

十七、與背景和邊框相關的樣式

A.與背景相關的新增屬性

1.background-clip:border|pading;,背景範圍,包括邊框或不包括

2.background-origin:border|padding|content;,背景的起始繪製範圍

3.background-size:寬 高,指定背景圖片的尺寸

4.background-break:bounding-box|each-box|continuous,指定平鋪內聯元素背景圖像時的循環方式

B.在一個元素中顯示多個背景圖像

1.通過多個background-image、background-repeat、background-position、background-clip、background-origin、background-size來實現背景中顯示多個圖像文件的功能

C.圓角邊框的繪製

1.border-radius,指定圓角半徑,可以指定多個半徑

2.border-radius-topleft、border-radius-topright、border-radius-bottomleft、border-radius-bottomright指定四個角

D.使用圖像邊框

  1. border-image,指定圖像邊框

十八、CSS3中的變形處理

1.transform:xxx();

  • scale(0.5),縮放

  • skew(水平角度,垂直角度),傾斜

  • translate(水平方向,垂直方向),移動

  • rotate(角度),旋轉

2.transform-origin:left|top|bottom|right|center,指定變形基準點,可多個參數聯合設置,如左上

十九、CSS3中的動畫功能

1.Transitions功能通過將元素的某個屬性從一個屬性值在指定的時間內平滑過濾到另一個屬性值來實現動畫功能,transition: property duration timing-function[,...];

2.Animations與Transitions功能相同,都是通過改變元素的屬性值來實現動畫效果,區別在於使用Transitions功能時只能通過指定屬性的開始值與結束值,然後平滑的過度,而Animations則通過定義多個關鍵幀以及定義每個關鍵幀中元素的屬性值來實現更為複雜的動畫

3.Animations:

  • 使用keyframes建立關鍵幀集合

  • animations:keyframes duration timing-function

4.實現動畫的方法:linear、ease-in、ease-out、ease、ease-in-out

二十、佈局相關樣式

A.多欄佈局

1.通過column-count屬性,將一個元素中的內容分為多欄進行顯示

2.使用cloumn-width屬性單獨設置每一欄的寬度而不設定元素的寬度

3.使用column-gap屬性來設定多欄之間的間隔距離

4.使用column-rule屬性在欄與欄之間增加一條間隔線,可以設定寬度、顏色等,與border相同

B.盒佈局

1.使用display:box,屬性,實現盒佈局

2.多欄佈局寬度是相等的,盒佈局不用

3.使用box-flex屬性,將盒內部元素變為彈性盒佈局

4.使用box-ordinal-group改變元素的顯示順序

5.使用box-orient指定元素的排列方向,垂直或水平

6.使用box-pack和box-align屬性來指定元素中的文字、圖像及子元素水平方向或垂直方向水平的對齊方式

二十一、Media Queries相關樣式

1.媒體查詢(media query)表達式,用以指定媒體類型,然後根據媒體類型來選擇應該使用的樣式

2.@media screen|all|print|handheld|tv|speech|braille|embossed|projection|tty and (max-width: xxxxpx){…………}

二十二、CSS3的其他重要樣式和屬性

A.顏色相關樣式

1.rgba(x,x,x,alpha):通過設定alpha通道的方法來定義RGBA顏色,實現透明效果

2.alpha通道不會將元素內的文字也變透明,opacity會將文字和背景色都透明

B.用戶界面相關樣式

1.css2中的outline屬性,在元素周圍繪製一條輪廓線,outline:color style width

2.css3中outline-offset屬性,緊貼著邊框外圍繪製一條輪廓線

3.resize屬性,允許用戶以拖動的方式來修改元素的尺寸,主要用於可以使用overflow屬性的任何容器元素中

C.取消對元素的樣式指定——initial屬性值

1.使用initial屬性值讓各種屬性使用默認值,不等於直接刪除對應屬性

二十三、綜合實例

https://github.com/zhangyue0503/html5js/tree/master/html5yucss3quanweizhinan


分享到:


相關文章: