CSS3主要知識點復習總結+HTML5新增標簽

1、顯示屬性，自身屬性，文本屬性

推薦樣式編寫順序 
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 鏈接的樣式請嚴格按照如下順序添加： 
        a:link-->a:visited-->a:hover-->a:active(LoVeHAte) 

  * 書寫的CSS代碼的時候請注意按照顯示 自身 文本的書寫順序來書寫！

分享2014-4-1 HTML5上課筆記

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 平鋪，圖片會工具邊框的尺寸動態調整圖片大小直至剛 好鋪滿整個邊框

<style> 
.wrap { 
height: 100px; 
width: 100px; 
border: 20px solid; 
/*border-image: url('border-image.png') 30 30 repeated;簡寫形式*/ 
border-image: url('border-image2.png') repeat; 
border-image-slice:30 30; 
text-align: center; 
} 
</style>

③ border-radius   相關屬性    border-radius: 1-4 length | % / 1

    border-radius數值為  合模型 的一半就變成圓 ，記住：不是相對於合模型的width（如：965 x 1611），

    而是整個框才是

<style> 
.wrap { 
height: 500px; 
width: 500px; 
border: 50px solid; 
border-radius:  250px ; 
} 
</style>

結果就顯示的不是正圓，所以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 -p 1 x 0px #000；

文字陰影的列表（以逗號分隔）,1px的頂部和底部1px的陰影。

text-shadow： 水平偏移量 垂直偏移量 陰影模糊值 顏色，

                水平偏移量 垂直偏移量 陰影模糊值 顏色； （多個陰影用，隔開）

eg：

.con2 p { 
     font-size: 90px; 
     color:#fff; 
     text-shadow: -1px -1px 1px rgba(0,0,255,1), 
                  -2px -2px 1px rgba(0,0,254,0.5), 
                  -6px -6px 10px rgba(0,0,252,0.2); 
}

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;

         

  

補充個知識點：

background:  transparent ; 等價  background:rgba(0,0,0,0);

color:  transparent ; 等價  color:rgba(0,0,0,0);

3） 背景圖

   

 1. CSS3蒙版 （需要判斷瀏覽器）

    

 

實現上面的效果，需要用到一張蒙版圖，注意這張圖中間不透明，跟平時PS設計蒙版不一樣，

不透明的區域顯示出來的效果就變為要的效果

代碼： 
.wrap img{ 
height: 160px; 
width: 160px; 
background: #F00; 
background: url(teacher_li.jpg); 
-webkit-mask-image:url(pro_pho_show_pic.png); 
-webkit-mask-position:50% 50%; 
-webkit-mask-repeat:no-repeat; 
} 
縮寫： -webkit-mask:url(pro_pho_show_pic.png) 50% 50%  no-repeat;

  -webkit-mask-clip 蒙版裁剪位置

  -webkit-mask-origin 蒙版原點位置

蒙版是能夠應用漸變的。但是因為瀏覽器兼容的問題比較嚴重，通常不使用漸變作為蒙版的屬性值，

而是使用有“透明度梯度”的圖片替代掉漸變，產生同樣的功能。

   2. 多重背景   background-image: url(teacher_li.jpg),url(teacher_li.jpg);

  3. CSS3漸變    css3實現背景顏色線性漸變

div{ 
width:500px; 
border:1px solid #FA0; 
background:-webkit-linear-gradient(left,#f00,#ff0 25%,#0ff 55%,#00f 70%,#f00);     /*橫向漸變*/ 
background:-webkit-gradient-gradient(left,#f00,#ff0 25%,#0ff 55%,#00f 70%,#f00); /*縱向漸變*/ 
-webkit-background-clip:  text ; 
/*只有webkit內核支持text的剪切模式*/ 
color:transparent; 
}

 4. CSS3倒影   -webkit-box-reflect

     1.方向 -webkit-box-reflect:   below/above/left/right

     2.距離

     3.透明度

-webkit-box-reflect: below 10px -webkit-linear-gradient(top,rgba(0,0,0,0) 20%,

rgba(0,0,0,0.6) 100%)

★  4） CSS3  變形 transform  

   二，三維變形  的變形方式：四種方法  

  旋轉——縮放——平移——扭曲

旋轉（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;）

5.視角 ： -webkit-persepective：0；

      0沒設置 （值） 800px;  通常在body元素下

CSS3 perspective屬性 ：   目前瀏覽器都不支持 perspective 屬性。   Chrome 和 Safari 支持替代的 -webkit-perspective 屬性。

6. backface-visibility: visible | hidden;   定義當元素不面向屏幕時是否可見。可用在撲克牌旋轉上。

 

【  W3CSchool資料 】 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 轉換元素的透視視圖。

★    7） CSS3  過渡  trabsition

參與過渡的屬性、過渡時間、過渡方式（動畫類型） 延遲時間 【需要寫前綴】

一般情況下，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；

★    8） CSS3  動畫  animation

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。
animation-timing-function	規定動畫的速度曲線。默認是 "ease"。
	規定動畫何時開始。默認是 0。
animation-iteration-count	規定動畫被播放的次數。默認是 1。
規定動畫是否在下一周期逆向地播放。默認是 "normal" 。逆向  alternate
規定動畫是否正在運行或暫停。默認是 "  running"，暫停時  pause
規定對象動畫時間之外的狀態。

★  CSS3過渡與動畫的區別：

 transition  animation     

1、 animation 多兩個參數，循環和動畫的方式

2、transition不能自行觸發，通過hover等動作或結合JS進行觸發。anmiation可以自行運行。

3、 transition可控性較弱，只能指定起始狀態和結束狀態，而animation可以定義多個關鍵幀。

4、動畫在運行結束之后，需要回到初始狀態

5、transition的作用，可以用一句話來概括，‘平滑’改變CSS樣式

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元素。