HTML5,CSS3的新屬性

HTML5:
新增的標籤:
語義化:header,footer,aside,article,nav,main,section,figure(標籤規定獨立的流內容,如圖像、圖表、照片、代碼等等)
內容元素:mark高亮 progress 進度
新的表單控件:calander,date,time,email,url,search
新的input類型:color,date,datetime,datetime-local,email
移除的標籤:
big,font,frame,frameset
canvas繪圖,支持內聯SVG,支持MathML
多媒體audio,video,embed,track,source
本地離線存儲,把需要離線存儲在本地的文件列在一個manifest配置文件
web存儲,LocalStorage,SessionStorage。
位置信息:Geolocation

CSS3:
邊框:
border-radius:圓角。用於創建圓角。border:2px solid red;
box-shadow:CSS3邊框陰影。
border-image:CSS3邊框圖片。通過 CSS3 的 border-image 屬性,您可以使用圖片來創建邊框。border-image:url(border.png) 30 30 round;
背景:
background-size: 屬性規定背景圖片的尺寸。在 CSS3 之前,背景圖片的尺寸是由圖片的實際尺寸決定的。在 CSS3 中,可以規定背景圖片的尺寸,這就允許我們在不同的環境中重複使用背景圖片。您能夠以像素或百分比規定尺寸。如果以百分比規定尺寸,那麼尺寸相對於父元素的寬度和高度。
background-origin:規定背景圖片的定位區域。背景圖片可以放置於 content-box、padding-box 或 border-box 區域。
文字效果:
text-shadow:在 CSS3 中,text-shadow 可向文本應用陰影。text-shadow:5px 5px 5px #FFFFFF;
word-wrap :單詞太長的話就可能無法超出某個區域,允許對長單詞進行拆分,並換行到下一行:p{word-wrap:break-word;}
2D轉換(translate,rotate,scale,skew等):
transform:通過 CSS3 轉換,我們能夠對元素進行移動、縮放、轉動、拉長或拉伸。
translate():元素從其當前位置移動,根據給定的 left(x 座標) 和 top(y 座標) 位置參數:transform:translate(50px,100px);值 translate(50px,100px) 把元素從左側移動 50 像素,從頂端移動 100 像素。
rotate():元素順時針旋轉給定的角度。允許負值,元素將逆時針旋轉。transform:rotate(30deg);值 rotate(30deg) 把元素順時針旋轉 30 度。
scale():元素的尺寸會增加或減少,根據給定的寬度(X 軸)和高度(Y 軸)參數:transform:scale(2,4);值 scale(2,4) 把寬度轉換爲原始尺寸的 2 倍,把高度轉換爲原始高度的 4 倍。
skew():元素轉動給定的角度,根據給定的水平線(X 軸)和垂直線(Y 軸) 參數:transform:skew(30deg,20deg);值 skew(30deg,20deg) 圍繞 X 軸把元素轉動 30 度,圍繞 Y 軸轉動 20 度。
matrix() :把所有 2D 轉換方法組合在一起。matrix() 方法需要六個參數,包含數學函數,允許您:旋轉、縮放、移動以及傾斜元素。
3D轉換:
rotateX():元素圍繞其 X 軸以給定的度數進行旋轉。transform:rotateX(120deg);
rotateY():元素圍繞其 Y 軸以給定的度數進行旋轉。transform:rotateY(120deg);
過渡:transition 當元素從一種樣式變換爲另一種樣式時爲元素添加效果。
動畫:animation創建動畫,這可以在許多網頁中取代動畫圖片、Flash 動畫以及 JavaScript。
多列:
column-count:屬性規定元素應該被分隔的列數。
column-gap:屬性規定列之間的間隔。
column-rule :屬性設置列之間的寬度、樣式和顏色規則。
用戶界面:
resize:屬性規定是否可由用戶調整元素尺寸。
box-sizing:屬性允許您以確切的方式定義適應某個區域的具體內容。
標準的是content-box,內容爲content
Ie的(怪異的)爲border-box,內容爲左右border+content+padding
outline-offset :屬性對輪廓進行偏移,並在超出邊框邊緣的位置繪製輪廓。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章