 |
目錄：
|
1、顯示屬性，自身屬性，文本屬性
|
推薦樣式編寫順序
2 自身屬性（合模型）：width，height，margin，padding，border，background（第3點）1 顯示屬性 ：display，list-style，position，float，clear [注意按照橫着的順序] 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 鏈接的樣式請嚴格按照如下順序添加： a:link-->a:visited-->a:hover-->a:active(LoVeHAte) * 書寫的CSS代碼的時候請注意按照顯示 自身 文本的書寫順序來書寫！
|
2、CSS3屬性（內核前綴）
|
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 | % / 1
border-radius數值爲合模型的一半就變成圓
，記住：不是相對於合模型的width（如：965x1611），
而是整個框纔是
結果就顯示的不是正圓，所以border-radius: 300px; 才能顯示正圓，加上border的值
  '/'前面表示水平方向，後面表示垂直方向。每個方向都可以用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：
2.盒陰影 box-shadow（不需要判斷瀏覽器）
盒陰影的使用語法結構與文本陰影類似，如box-shadow: 5px 5px 5px rgba(255,15,255,0.5);
但是，盒陰影多了個屬性：外延值，inset，
如box-shadow: 5px 5px 25px rgba(0,0,255,0.5) inset;
  補充個知識點：
3）背景圖
1.CSS3蒙版（需要判斷瀏覽器）
 實現上面的效果，需要用到一張蒙版圖，注意這張圖中間不透明，跟平時PS設計蒙版不一樣，
不透明的區域顯示出來的效果就變爲要的效果
 
-webkit-mask-clip 蒙版裁剪位置
-webkit-mask-origin 蒙版原點位置
蒙版是能夠應用漸變的。但是因爲瀏覽器兼容的問題比較嚴重，通常不使用漸變作爲蒙版的屬性值，
而是使用有“透明度梯度”的圖片替代掉漸變，產生同樣的功能。
2. 多重背景 background-image: url(teacher_li.jpg),url(teacher_li.jpg);
3. CSS3漸變 css3實現背景顏色線性漸變
4. CSS3倒影 -webkit-box-reflect
1.方向 -webkit-box-reflect: below/above/left/right
2.距離
3.透明度
|
二，三維變形的變形方式：四種方法
旋轉——縮放——平移——扭曲
| 旋轉（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); |
旋轉：-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;）
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 規定過渡開始前等待幾秒
簡寫：transition：width 2s ease；
animation基本參數與transition完全相同，第一個參數表示的是調用哪個動畫 infinite 表示無限循環
|
.wrap {
height:100px;margin:10px; -webkit-animation:colorChange 10s linear 1.5s infinite; } @-webkit-keyframes colorChange { 0%{ background:#f00;} 10%{ background:#ff0;} } |
animation屬性值：
|
規定動畫。
|
|
|
所有動畫屬性的簡寫屬性，除了animation-play-state 屬性。
|
|
|
規定 @keyframes 動畫的名稱。
|
|
|
規定動畫完成一個週期所花費的秒或毫秒。默認是 0。
|
|
|
規定動畫的速度曲線。默認是 "ease"。
|
|
|
規定動畫何時開始。默認是 0。
|
|
|
規定動畫被播放的次數。默認是 1。
|
|
|
規定動畫是否在下一週期逆向地播放。默認是 "normal" 。逆向alternate
|
|
|
規定動畫是否正在運行或暫停。默認是 "running"，暫停時pause
|
|
|
規定對象動畫時間之外的狀態。
|
★CSS3過渡與動畫的區別：
|
transition animation
1、animation多兩個參數，循環和動畫的方式
2、transition不能自行觸發，通過hover等動作或結合JS進行觸發。anmiation可以自行運行。
3、transition可控性較弱，只能指定起始狀態和結束狀態，而animation可以定義多個關鍵幀。
4、動畫在運行結束之後，需要回到初始狀態
5、transition的作用，可以用一句話來概括，‘平滑’改變CSS樣式
|
優勢：① 語義性好 少類名 有利於SEO 代碼少
② 文檔易讀 、搜索引擎能夠更好的理解頁面中的內容、作爲開發者，能夠更快更準確的搜索到信息
①<新增標籤>
article 定義文章 代表文檔、頁面或者應用程序中獨立、完整、可以獨自被外部引用的內容
header 定義頁眉 aside 定義文章的側邊欄
figure一組媒體對象的以及文字 nav定義導航
figcaption定義figure的標題 section定義文檔中的區段
footer定義頁腳 time定義日期和時間
vidio 定義視頻 canvas 定義圖形，提供畫布
audio定義音頻 command表示命令按鈕
embed插入各種多媒體 details表示用戶要求得到並可以得到的詳細信息
mark定義需要突出顯示或者高亮的文本 wbr表示軟換行
progress顯示js中耗費的函數進程 hgroup定義對網頁標題的組合
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元素。
原文地址：
https://software.intel.com/zh-cn/blogs/2014/05/23/css3-html5/?utm_campaign=CSDN&utm_source=intel.csdn.net&utm_medium=Link&utm_content=%20others-%20html5#
https://software.intel.com/zh-cn/blogs/2014/05/23/css3-html5/?utm_campaign=CSDN&utm_source=intel.csdn.net&utm_medium=Link&utm_content=%20others-%20html5#
|
目錄：
|
1、顯示屬性，自身屬性，文本屬性
|
推薦樣式編寫順序
2 自身屬性（合模型）：width，height，margin，padding，border，background（第3點）1 顯示屬性 ：display，list-style，position，float，clear [注意按照橫着的順序] 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 鏈接的樣式請嚴格按照如下順序添加： a:link-->a:visited-->a:hover-->a:active(LoVeHAte) * 書寫的CSS代碼的時候請注意按照顯示 自身 文本的書寫順序來書寫！
|
2、CSS3屬性（內核前綴）
|
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 | % / 1
border-radius數值爲合模型的一半就變成圓
，記住：不是相對於合模型的width（如：965x1611），
而是整個框纔是
結果就顯示的不是正圓，所以border-radius: 300px; 才能顯示正圓，加上border的值
'/'前面表示水平方向，後面表示垂直方向。每個方向都可以用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：
2.盒陰影 box-shadow（不需要判斷瀏覽器）
盒陰影的使用語法結構與文本陰影類似，如box-shadow: 5px 5px 5px rgba(255,15,255,0.5);
但是，盒陰影多了個屬性：外延值，inset，
如box-shadow: 5px 5px 25px rgba(0,0,255,0.5) inset;
補充個知識點：
3）背景圖
1.CSS3蒙版（需要判斷瀏覽器）
實現上面的效果，需要用到一張蒙版圖，注意這張圖中間不透明，跟平時PS設計蒙版不一樣，
不透明的區域顯示出來的效果就變爲要的效果
-webkit-mask-clip 蒙版裁剪位置
-webkit-mask-origin 蒙版原點位置
蒙版是能夠應用漸變的。但是因爲瀏覽器兼容的問題比較嚴重，通常不使用漸變作爲蒙版的屬性值，
而是使用有“透明度梯度”的圖片替代掉漸變，產生同樣的功能。
2. 多重背景 background-image: url(teacher_li.jpg),url(teacher_li.jpg);
3. CSS3漸變 css3實現背景顏色線性漸變
4. CSS3倒影 -webkit-box-reflect
1.方向 -webkit-box-reflect: below/above/left/right
2.距離
3.透明度
|
二，三維變形的變形方式：四種方法
旋轉——縮放——平移——扭曲
| 旋轉（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); |
旋轉：-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;）
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 規定過渡開始前等待幾秒
簡寫：transition：width 2s ease；
animation基本參數與transition完全相同，第一個參數表示的是調用哪個動畫 infinite 表示無限循環
|
.wrap {
height:100px;margin:10px; -webkit-animation:colorChange 10s linear 1.5s infinite; } @-webkit-keyframes colorChange { 0%{ background:#f00;} 10%{ background:#ff0;} } |
animation屬性值：
|
規定動畫。
|
|
|
所有動畫屬性的簡寫屬性，除了animation-play-state 屬性。
|
|
|
規定 @keyframes 動畫的名稱。
|
|
|
規定動畫完成一個週期所花費的秒或毫秒。默認是 0。
|
|
|
規定動畫的速度曲線。默認是 "ease"。
|
|
|
規定動畫何時開始。默認是 0。
|
|
|
規定動畫被播放的次數。默認是 1。
|
|
|
規定動畫是否在下一週期逆向地播放。默認是 "normal" 。逆向alternate
|
|
|
規定動畫是否正在運行或暫停。默認是 "running"，暫停時pause
|
|
|
規定對象動畫時間之外的狀態。
|
★CSS3過渡與動畫的區別：
|
transition animation
1、animation多兩個參數，循環和動畫的方式
2、transition不能自行觸發，通過hover等動作或結合JS進行觸發。anmiation可以自行運行。
3、transition可控性較弱，只能指定起始狀態和結束狀態，而animation可以定義多個關鍵幀。
4、動畫在運行結束之後，需要回到初始狀態
5、transition的作用，可以用一句話來概括，‘平滑’改變CSS樣式
|
優勢：① 語義性好 少類名 有利於SEO 代碼少
② 文檔易讀 、搜索引擎能夠更好的理解頁面中的內容、作爲開發者，能夠更快更準確的搜索到信息
①<新增標籤>
article 定義文章 代表文檔、頁面或者應用程序中獨立、完整、可以獨自被外部引用的內容
header 定義頁眉 aside 定義文章的側邊欄
figure一組媒體對象的以及文字 nav定義導航
figcaption定義figure的標題 section定義文檔中的區段
footer定義頁腳 time定義日期和時間
vidio 定義視頻 canvas 定義圖形，提供畫布
audio定義音頻 command表示命令按鈕
embed插入各種多媒體 details表示用戶要求得到並可以得到的詳細信息
mark定義需要突出顯示或者高亮的文本 wbr表示軟換行
progress顯示js中耗費的函數進程 hgroup定義對網頁標題的組合
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元素。