CSS3主要知識點總結+HTML5新增標籤
阿新 • • 發佈:2019-01-11
1、顯示屬性,自身屬性,文字屬性
2、CSS3屬性(核心字首)
二,三維變形的變形方式:四種方法
旋轉——縮放——平移——扭曲
旋轉:-webkit-transform: rotate(120deg);
平移:-webkit-transform: translate(20px, 10px); -moz-transform: translateX(20px);
縮放:-webkit-transform: scale(1.1,0.5); X方向縮放1.1倍,Y方向縮放0.5倍
★① scale(1,1);
② scale(-1,1); ③scale(1,-1); ④scale(-1,-1);等價scale(-1);
① transform:變形種類;的名稱(對應的屬性值),多個種類之間使用空格分隔。一個()中的屬性值之間用逗號分隔。
② 二維平面的旋轉,旋轉圍繞點進行,而旋轉正方向預設為順時針方向
③ 預設的旋轉中心就是這個塊的正中心,可以通過transform-origin去改變旋轉中心,通過left
top、數值、百分比改變旋轉中心
④ scale(<number>[, <number>]);表示使元素在X軸和Y軸同時縮放。<number>表示縮放倍數,可以是正數,負數和小數。負數是先翻轉元素然後再縮放。包含兩個引數,如果缺少第二個引數,那麼第二個引數的值等於第一個引數。
scaleX(<number>):表示只在X軸(水平方向)縮放元素。
scaleY(<number>):表示只在Y軸(垂直方向)縮放元素。
scaleZ(<number>):表示只在Z軸縮放元素。前提是元素本身或者元素的父元素設定了透視值(perspective:100;) 5.視角:-webkit-persepective:0; 0沒設定 (值) 800px; 通常在body元素下 CSS3 perspective屬性:目前瀏覽器都不支援 perspective 屬性。Chrome 和 Safari 支援替代的 -webkit-perspective 屬性。 6. backface-visibility: visible | hidden; 定義當元素不面向螢幕時是否可見。可用在撲克牌旋轉上。
animation屬性值:
★CSS3過渡與動畫的區別:
9.HTML5新增加標籤:
優勢:① 語義性好 少類名 有利於SEO 程式碼少
② 文件易讀 、搜尋引擎能夠更好的理解頁面中的內容、作為開發者,能夠更快更準確的搜尋到資訊
①<新增標籤>
article 定義文章、帖子、使用者評論、 代表文件、頁面或者應用程式中獨立、完整、可以獨自被外部引用的內容
header 定義頁首 aside 定義文章的側邊欄
figure一組媒體物件的以及文字 nav定義導航
figcaption定義figure的標題 section定義文件中的區段
footer定義頁尾 time定義日期和時間
vidio 定義視訊 canvas 定義圖形,提供畫布
audio定義音訊 command表示命令按鈕
embed插入各種多媒體 details表示使用者要求得到並可以得到的詳細資訊
mark定義需要突出顯示或者高亮的文字 wbr表示軟換行
progress顯示js中耗費的函式程序 hgroup定義對網頁標題的組合 ②新增的input元素型別 <email> 輸入E-mail地址的文字輸入框 <url> 輸入URL地址 <number> 輸入數值的文字輸入框 <range> 表示必須輸入一定範圍內的數字值的文字輸入框 artical:定義文章 代表文件、頁面或者應用程式中獨立、完整、可以獨自被外部引用的內容 section:用於對網站或應用程式中的頁面上的內容進行分塊,一個section元素通常由內容以及標題組成。但section元素並非一個普通的容器元素;當一個容器需要被直接定義樣式或通過指令碼定義行為時,推薦使用div而非section元素。
參考內容:http://blog.csdn.net/html5_/article/details/26098273
推薦樣式編寫順序 1 顯示屬性 :display,list-style,position,float,clear [注意按照橫著的順序] 2 自身屬性(合模型):width,height,margin,padding,border,background(第3點) 3 背景:background 4 行高:line-height 5 文字屬性:color,font,text-decoration,text-align,vertical-align,white-space,content 6 其他 cursor/z-index/zoom 7 css3屬性:trandsform/transition/animation/box-shadow/border-radius 8 連結的樣式請嚴格按照如下順序新增: * 書寫的CSS程式碼的時候請注意按照顯示 自身 文字的書寫順序來書寫!
|
Mozilla 核心 css字首-moz;
WebKit 核心 css字首-webkit ;(谷歌已換用blink核心)
Opera 核心 css字首 -o ; (歐朋已換用blink核心)
Trident 核心 css字首 -ms ;
CSS3新屬性:
1)邊框
① border-colors
相關屬性 border-top-colors border-right-colors
border-bottom-colors border-left-colors
② border-image :
stretch 拉伸方式來填充邊框背景圖 |
repeat 平鋪 圖片碰到邊界時超出截斷 |
round 平鋪,圖片會工具邊框的尺寸動態調整圖片大小直至剛 好鋪滿整個邊框
③ border-radius 相關屬性border-radius: 1-4 length | % / 1border-radius數值為合模型的一半就變成圓 ,記住:不是相對於合模型的width(如:965x1611), 而是整個框才是
'/'前面表示水平方向,後面表示垂直方向。每個方向都可以用1~4個值,縮寫的規則遵循“左上開始, 順時針旋轉/ 只能寫一個 2)陰影 1.文字陰影 text-shadow(不需要判斷瀏覽器) text-shadow:2px 3px 2px #000; 文字陰影的結構是按照以下順序:X--偏移,Y--偏移,模糊,和顏色; text-shadow:-2px -3px 2px rgba(0, 118, 160, .25); 設定為負值,X -偏移陰影轉移到左側。設定為負值偏移Y -轉移陰影頂端。顏色可以用RGBA值。 text-shadow:0px 1px 0px #fff,0px -p1x 0px #000; 文字陰影的列表(以逗號分隔),1px的頂部和底部1px的陰影。 text-shadow:水平偏移量 垂直偏移量 陰影模糊值 顏色, 水平偏移量 垂直偏移量 陰影模糊值 顏色;(多個陰影用,隔開) eg:
實現上面的效果,需要用到一張蒙版圖,注意這張圖中間不透明,跟平時PS設計蒙版不一樣, 不透明的區域顯示出來的效果就變為要的效果
-webkit-mask-clip 蒙版裁剪位置 -webkit-mask-origin 蒙版原點位置 蒙版是能夠應用漸變的。但是因為瀏覽器相容的問題比較嚴重,通常不使用漸變作為蒙版的屬性值, 而是使用有“透明度梯度”的圖片替代掉漸變,產生同樣的功能。 2. 多重背景background-image: url(teacher_li.jpg),url(teacher_li.jpg);
|
旋轉(1個值) | 縮放(1個值) | 平移(2個值) | 扭曲(2個值) |
rotate rotate(30deg) |
scale 可以取值正,負,小數 |
translate translate(x,y) 針對2D平面平移 |
skew |
rotateX(30deg); rotateY(30deg); rotateZ(30deg); | 縮放的值,X為負時,字型先沿Y軸翻轉再縮放 縮放的值,Y為負時,字型先沿X軸翻轉再縮放 |
translateX translateY | skew(30deg,15deg); skewX(30deg); skewY(15deg); |
scaleY(<number>):表示只在Y軸(垂直方向)縮放元素。
scaleZ(<number>):表示只在Z軸縮放元素。前提是元素本身或者元素的父元素設定了透視值(perspective:100;) 5.視角:-webkit-persepective:0; 0沒設定 (值) 800px; 通常在body元素下 CSS3 perspective屬性:目前瀏覽器都不支援 perspective 屬性。Chrome 和 Safari 支援替代的 -webkit-perspective 屬性。 6. backface-visibility: visible | hidden; 定義當元素不面向螢幕時是否可見。可用在撲克牌旋轉上。
matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n) | 定義3D轉換,使用16個值的4x4矩陣。 |
translate3d(x,y,z) | 定義3D轉化。 |
translateX(x) | 定義3D轉化,僅使用用於X軸的值。 |
translateY(y) | 定義3D轉化,僅使用用於Y軸的值。 |
translateZ(z) | 定義3D轉化,僅使用用於Z軸的值。 |
scale3d(x,y,z) | 定義3D縮放轉換。 |
scaleX(x) | 定義3D縮放轉換,通過給定一個X軸的值。 |
scaleY(y) | 定義3D縮放轉換,通過給定一個Y軸的值。 |
scaleZ(z) | 定義3D縮放轉換,通過給定一個Z軸的值。 |
rotate3d(x,y,z,angle) | 定義3D旋轉。 |
rotateX(angle) | 定義沿X軸的3D旋轉。 |
rotateY(angle) | 定義沿Y軸的3D旋轉。 |
rotateZ(angle) | 定義沿Z軸的3D旋轉。 |
perspective(n) | 定義3D轉換元素的透視檢視。 |
參與過渡的屬性、過渡時間、過渡方式(動畫型別) 延遲時間 【需要寫字首】 一般情況下,transition新增在基本效果上,而不是hover效果中。css原狀態和hover狀態設定為兩種不同的樣式,然後通過CSS3過渡進行‘漸變’處理padding、color所有瀏覽器都支援漸變 |
transition 屬性是一個簡寫屬性,用於設定四個過渡屬性:
- transition-property 哪個屬性實現過渡如:width
- transition-duration 完成過渡效果需要多少秒/毫秒
- transition-timing-function 速度效果的運動曲線,如linear 、ase-in 、ease 、 ease-out 、ease-in-out 、 cube-bezier(貝塞爾曲線)
- transition-delay 規定過渡開始前等待幾秒
.wrap {
height:100px; margin:10px; -webkit-animation:colorChange 10s linear 1.5s infinite; } @-webkit-keyframes colorChange { 0%{ background:#f00;} 10%{ background:#ff0;} } |
transition animation 1、animation多兩個引數,迴圈和動畫的方式 2、transition不能自行觸發,通過hover等動作或結合JS進行觸發。anmiation可以自行執行。 3、transition可控性較弱,只能指定起始狀態和結束狀態,而animation可以定義多個關鍵幀。 4、動畫在執行結束之後,需要回到初始狀態 5、transition的作用,可以用一句話來概括,‘平滑’改變CSS樣式 |
figure一組媒體物件的以及文字 nav定義導航
figcaption定義figure的標題 section定義文件中的區段
footer定義頁尾 time定義日期和時間
vidio 定義視訊 canvas 定義圖形,提供畫布
audio定義音訊 command表示命令按鈕
embed插入各種多媒體 details表示使用者要求得到並可以得到的詳細資訊
mark定義需要突出顯示或者高亮的文字 wbr表示軟換行
progress顯示js中耗費的函式程序 hgroup定義對網頁標題的組合 ②新增的input元素型別 <email> 輸入E-mail地址的文字輸入框 <url> 輸入URL地址 <number> 輸入數值的文字輸入框 <range> 表示必須輸入一定範圍內的數字值的文字輸入框 artical:定義文章 代表文件、頁面或者應用程式中獨立、完整、可以獨自被外部引用的內容 section:用於對網站或應用程式中的頁面上的內容進行分塊,一個section元素通常由內容以及標題組成。但section元素並非一個普通的容器元素;當一個容器需要被直接定義樣式或通過指令碼定義行為時,推薦使用div而非section元素。
參考內容:http://blog.csdn.net/html5_/article/details/26098273