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); |
① 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; 定義當元素不面向螢幕時是否可見。可用在撲克牌旋轉上。
| 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